.tool-page { max-width: 820px; margin: 0 auto; padding-bottom: 32px; }
.tool-header { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; gap:12px; padding:12px 0 14px; margin-bottom:18px; background:linear-gradient(180deg,rgba(3,3,4,.98) 75%,rgba(3,3,4,0)); }
.tool-back { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; border:1px solid var(--border-light); background:rgba(255,255,255,.05); color:var(--accent); font-size:25px; text-decoration:none; }
.tool-header-copy { min-width:0; }
.tool-header-copy h1 { margin:0; font-size:21px; }
.tool-header-copy p { margin:3px 0 0; color:var(--text-dim); font-size:12px; }
.tool-hero { padding:22px; border:1px solid rgba(0,170,255,.24); border-radius:24px; background:linear-gradient(145deg,rgba(0,170,255,.13),rgba(255,255,255,.035)); margin-bottom:16px; box-shadow:0 12px 35px rgba(0,0,0,.22); }
.tool-hero-badge { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(0,170,255,.14); color:#73d2ff; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.tool-hero h2 { margin:13px 0 8px; font-size:25px; line-height:1.15; }
.tool-hero p { margin:0; color:#b6bec8; line-height:1.55; font-size:14px; }
.tool-card { border:1px solid var(--border-light); border-radius:22px; background:var(--card-bg-light); padding:18px; margin-bottom:14px; }
.tool-card-title { margin:0 0 6px; font-size:17px; }
.tool-card-subtitle { margin:0 0 15px; color:var(--text-dim); font-size:13px; line-height:1.45; }
.tool-search { position:relative; }
.tool-search input { width:100%; border:1px solid var(--border-light); border-radius:15px; background:rgba(255,255,255,.055); color:#fff; padding:15px 15px 15px 44px; font-size:15px; outline:none; }
.tool-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.1); }
.tool-search-icon { position:absolute; left:15px; top:15px; z-index:1; }
.tool-search-results { margin-top:8px; border:1px solid var(--border-light); border-radius:16px; overflow:hidden; background:#12151a; box-shadow:0 16px 38px rgba(0,0,0,.42); }
.tool-search-result { width:100%; padding:13px 14px; display:flex; flex-direction:column; gap:3px; text-align:left; border:0; border-bottom:1px solid var(--border-light); background:transparent; color:#fff; cursor:pointer; }
.tool-search-result:last-child { border-bottom:0; }
.tool-search-result:active { background:rgba(0,170,255,.12); }
.tool-search-result strong { font-size:14px; }
.tool-search-result span { color:#aeb7c2; font-size:12px; }
.tool-search-result small { color:#68727d; font-size:11px; }
.tool-search-empty { padding:16px; color:var(--text-dim); font-size:13px; text-align:center; }
.tool-selected { margin-top:10px; padding:12px; border:1px solid rgba(0,210,106,.28); border-radius:15px; background:rgba(0,210,106,.075); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tool-selected div { min-width:0; }
.tool-selected strong,.tool-selected span { display:block; }
.tool-selected strong { font-size:14px; color:#fff; }
.tool-selected span { margin-top:3px; color:#8fdcb6; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-selected button { border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:8px 10px; background:rgba(255,255,255,.06); color:#fff; font-size:11px; }
.tool-question { padding:15px 0; border-bottom:1px solid var(--border-light); }
.tool-question:last-child { border-bottom:0; }
.tool-question h3 { margin:0 0 10px; font-size:14px; line-height:1.4; }
.tool-options { display:grid; gap:8px; }
.tool-option { position:relative; }
.tool-option input { position:absolute; opacity:0; pointer-events:none; }
.tool-option span { display:block; padding:12px 13px; border:1px solid var(--border-light); border-radius:13px; background:rgba(255,255,255,.035); color:#c6ccd4; font-size:13px; cursor:pointer; }
.tool-option input:checked + span { border-color:var(--accent); background:rgba(0,170,255,.13); color:#fff; box-shadow:0 0 0 2px rgba(0,170,255,.07); }
.tool-primary,.tool-secondary { width:100%; border:0; border-radius:15px; padding:15px 16px; font-size:14px; font-weight:850; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; }
.tool-primary { background:linear-gradient(135deg,var(--accent),#007fbd); color:#fff; box-shadow:0 8px 25px rgba(0,170,255,.22); }
.tool-secondary { margin-top:9px; border:1px solid var(--border-light); background:rgba(255,255,255,.055); color:#fff; }
.tool-primary:active,.tool-secondary:active { transform:scale(.985); }
.tool-result { border:1px solid rgba(0,170,255,.25); background:linear-gradient(145deg,rgba(0,170,255,.1),rgba(255,255,255,.035)); }
.tool-score-wrap { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.tool-score { width:92px; height:92px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; border:7px solid rgba(255,255,255,.08); background:rgba(0,0,0,.2); font-size:25px; font-weight:900; }
.tool-score.low { border-color:#00d26a; color:#70f4b0; }
.tool-score.medium { border-color:#f1c40f; color:#ffe17b; }
.tool-score.high { border-color:#ff8c42; color:#ffbd89; }
.tool-score.critical { border-color:#ff4d4f; color:#ff999a; }
.tool-result-heading h3 { margin:0 0 4px; font-size:19px; }
.tool-result-heading p { margin:0; color:#aeb7c2; font-size:13px; line-height:1.45; }
.tool-risk-list,.tool-issue-list { display:grid; gap:9px; margin-top:12px; }
.tool-risk-item,.tool-issue-item { padding:13px; border:1px solid var(--border-light); border-radius:14px; background:rgba(0,0,0,.15); }
.tool-risk-item strong,.tool-issue-item strong { display:block; font-size:13px; margin-bottom:4px; }
.tool-risk-item span,.tool-issue-item p { margin:0; color:#aeb7c2; font-size:12px; line-height:1.48; }
.tool-issue-item { text-decoration:none; color:#fff; }
.tool-issue-item .match { display:inline-flex; margin-top:8px; padding:5px 8px; border-radius:999px; background:rgba(0,170,255,.13); color:#72d4ff; font-size:10px; font-weight:800; }
.tool-chip-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tool-chip { position:relative; }
.tool-chip input { position:absolute; opacity:0; }
.tool-chip span { display:inline-flex; padding:10px 12px; border:1px solid var(--border-light); border-radius:999px; background:rgba(255,255,255,.04); color:#bbc2ca; font-size:12px; cursor:pointer; }
.tool-chip input:checked + span { border-color:var(--accent); background:rgba(0,170,255,.15); color:#fff; }
.tool-warning { margin:12px 0; padding:13px; border-left:3px solid #ff4d4f; border-radius:10px; background:rgba(255,77,79,.09); color:#ffc3c4; font-size:12px; line-height:1.5; }
.tool-comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.compare-engine { padding:14px; border:1px solid var(--border-light); border-radius:16px; background:rgba(0,0,0,.15); min-width:0; }
.compare-engine h3 { margin:0 0 4px; font-size:14px; }
.compare-engine .muted { color:var(--text-dim); font-size:11px; }
.compare-row { display:grid; grid-template-columns:105px 1fr 1fr; gap:8px; align-items:start; padding:11px 0; border-bottom:1px solid var(--border-light); font-size:12px; }
.compare-row:last-child { border-bottom:0; }
.compare-row b { color:#8f99a4; }
.compare-risk { margin:6px 0 0; padding-left:16px; color:#c7cdd5; line-height:1.45; }
.repair-issue { display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border-light); }
.repair-issue:last-child { border-bottom:0; }
.repair-issue input { margin-top:3px; accent-color:var(--accent); }
.repair-issue label { flex:1; cursor:pointer; }
.repair-issue strong { display:block; font-size:13px; }
.repair-issue span { display:block; margin-top:3px; color:#8f99a4; font-size:11px; }
.repair-total { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.repair-total div { padding:12px 8px; border:1px solid var(--border-light); border-radius:14px; text-align:center; background:rgba(0,0,0,.16); }
.repair-total span { display:block; color:#8f99a4; font-size:10px; text-transform:uppercase; }
.repair-total strong { display:block; margin-top:5px; font-size:14px; }
.tool-disclaimer { color:#727c87; font-size:11px; line-height:1.5; margin-top:12px; }
.dvz-toast { position:fixed; left:50%; bottom:24px; z-index:1000; transform:translate(-50%,20px); opacity:0; padding:11px 16px; border-radius:999px; background:#eaf8ff; color:#071017; font-size:12px; font-weight:800; transition:.22s ease; box-shadow:0 12px 35px rgba(0,0,0,.35); }
.dvz-toast.is-visible { transform:translate(-50%,0); opacity:1; }
@media (max-width:560px) { .tool-comparison-grid { grid-template-columns:1fr; } .compare-row { grid-template-columns:85px 1fr 1fr; font-size:11px; } .tool-score-wrap { align-items:flex-start; } }


/* ==================================================
   MY GARAGE
================================================== */
.garage-hero { background:linear-gradient(145deg,rgba(0,210,106,.10),rgba(0,170,255,.08),rgba(255,255,255,.025)); }
.garage-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tool-small-button { width:auto; padding:10px 13px; margin:0; white-space:nowrap; }
.garage-form { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
.garage-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tool-field { margin-bottom:12px; }
.tool-field label { display:block; margin:0 0 7px; color:#aeb8c2; font-size:11px; font-weight:750; }
.tool-input { width:100%; min-height:46px; padding:12px 13px; border:1px solid rgba(255,255,255,.09); border-radius:13px; outline:none; background:rgba(255,255,255,.045); color:#fff; font:inherit; }
.tool-input:focus { border-color:rgba(0,170,255,.55); box-shadow:0 0 0 3px rgba(0,170,255,.08); }
.garage-form-actions { display:grid; grid-template-columns:1.5fr 1fr; gap:10px; }
.garage-form-actions .tool-primary,.garage-form-actions .tool-secondary { margin:0; }
.garage-list { display:grid; gap:12px; }
.garage-empty { padding:28px 14px 12px; text-align:center; color:#7f8a95; }
.garage-empty span { display:block; font-size:34px; }
.garage-empty strong { display:block; margin-top:8px; color:#dce7ee; font-size:14px; }
.garage-empty p { margin:6px auto 0; max-width:290px; font-size:11px; line-height:1.5; }
.garage-car-card { padding:15px; border:1px solid rgba(255,255,255,.08); border-radius:17px; background:rgba(255,255,255,.035); }
.garage-car-card.is-danger { border-color:rgba(255,77,79,.36); background:linear-gradient(145deg,rgba(255,77,79,.08),rgba(255,255,255,.025)); }
.garage-car-card.is-warning { border-color:rgba(255,169,64,.32); }
.garage-car-card.is-good { border-color:rgba(0,210,106,.22); }
.garage-car-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.garage-car-top h3 { margin:0; color:#fff; font-size:16px; }
.garage-car-top p { margin:4px 0 0; color:#84909b; font-size:10px; line-height:1.4; }
.garage-mileage { flex:0 0 auto; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.055); color:#dce7ee; font-size:11px; font-weight:800; }
.garage-service-line { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:13px; padding:12px; border-radius:13px; background:rgba(0,0,0,.18); }
.garage-service-line small { display:block; color:#81909d; font-size:9px; }
.garage-service-line strong { display:block; margin-top:3px; color:#fff; font-size:14px; }
.garage-service-line > span { color:#83909b; font-size:9px; }
.garage-note { margin:10px 1px 0; color:#a3adb6; font-size:10px; line-height:1.45; }
.garage-card-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.garage-card-actions button,.garage-card-actions a { padding:8px 9px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.04); color:#cbd6dd; text-decoration:none; font:inherit; font-size:9px; font-weight:700; cursor:pointer; }
.garage-card-actions .is-delete { margin-left:auto; color:#ff8587; }
.garage-engine-list { display:grid; gap:8px; }
.garage-engine-row { display:flex; align-items:stretch; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.03); overflow:hidden; }
.garage-engine-row a { flex:1; min-width:0; padding:11px 12px; color:#fff; text-decoration:none; }
.garage-engine-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.garage-engine-row span { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#788591; font-size:9px; }
.garage-engine-row button { width:42px; border:0; border-left:1px solid rgba(255,255,255,.07); background:transparent; color:#73808c; cursor:pointer; }
.garage-inline-empty { padding:13px; border:1px dashed rgba(255,255,255,.08); border-radius:13px; color:#6f7a84; text-align:center; font-size:10px; }
@media (max-width:520px) { .garage-form-grid { grid-template-columns:1fr; gap:0; } .garage-form-actions { grid-template-columns:1fr; } }

/* ==================================================
   GOOGLE MORE BUTTON
================================================== */
.tool-google-more {
    border-color:rgba(66,133,244,.34);
    background:linear-gradient(135deg,rgba(66,133,244,.16),rgba(52,168,83,.08));
    color:#ddecff;
}
.tool-google-more::after { content:"↗"; font-size:13px; opacity:.8; }


/* Release polish */
:focus-visible {
    outline: 3px solid rgba(255, 105, 72, 0.72);
    outline-offset: 3px;
}

.home-feature-card,
.home-action-card,
.home-catalog-card,
.home-secondary-card,
.tool-card,
.engine-card,
.brand-card {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
    .home-feature-card:hover,
    .home-action-card:hover,
    .home-catalog-card:hover,
    .home-secondary-card:hover,
    .engine-card:hover,
    .brand-card:hover {
        transform: translateY(-2px);
    }
}

.tool-hero-badge {
    letter-spacing: 0.1em;
}

.tool-card-subtitle,
.home-feature-card small,
.home-action-card small,
.home-catalog-card small,
.home-secondary-card small {
    line-height: 1.5;
}

.engine-actions-head small {
    max-width: 280px;
}

@media (max-width: 520px) {
    .home-hub-head {
        align-items: flex-start;
        gap: 12px;
    }

    .home-engine-count {
        white-space: nowrap;
    }

    .tool-hero h2,
    .brands-hero h2 {
        line-height: 1.16;
    }
}

/* DVZ Garage Cloud v2 */
#garageSyncStatus.is-cloud { color:#7fe7b3; }
.garage-wide-field { grid-column:1 / -1; }
.garage-textarea { min-height:92px; resize:vertical; line-height:1.45; }
.garage-car-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.garage-car-meta span { padding:6px 8px; border:1px solid rgba(255,255,255,.06); border-radius:999px; color:#7f8d98; font-size:8px; }
.garage-maintenance-panel { border-color:rgba(0,170,255,.22); background:linear-gradient(145deg,rgba(0,170,255,.07),rgba(255,255,255,.025)); }
.garage-maintenance-list { display:grid; gap:10px; margin-top:16px; }
.garage-maintenance-record { padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(0,0,0,.17); }
.garage-maintenance-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.garage-maintenance-head span { display:inline-block; margin-bottom:5px; color:#69d1ff; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.garage-maintenance-head h3 { margin:0; color:#f3f7fa; font-size:13px; line-height:1.35; }
.garage-maintenance-head > strong { flex:0 0 auto; color:#f7c86b; font-size:10px; }
.garage-maintenance-meta { margin:7px 0 0; color:#7e8a94; font-size:9px; }
.garage-maintenance-description { margin:10px 0 0; color:#aab4bc; font-size:10px; line-height:1.55; white-space:pre-wrap; }
.garage-record-actions { display:flex; gap:7px; margin-top:11px; }
.garage-record-actions button { padding:7px 9px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.04); color:#bfcbd2; font:inherit; font-size:8px; font-weight:800; cursor:pointer; }
.garage-record-actions .is-delete { color:#ff8587; }
.garage-history-list { display:grid; gap:8px; }
.garage-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.03); }
.garage-history-row strong { display:block; color:#eef4f7; font-size:11px; }
.garage-history-row span { display:block; margin-top:3px; color:#77838d; font-size:8px; }
.garage-history-row b { flex:0 0 auto; color:#70d4ff; font-size:10px; }
@media (max-width:520px) {
  .garage-wide-field { grid-column:auto; }
  .garage-maintenance-head { align-items:flex-start; }
}


/* ==================================================
   MOBILE SEARCH / KEYBOARD COMFORT
================================================== */
html { scroll-padding-top: 82px; }
.tool-search { scroll-margin-top: 82px; }
.tool-search-results {
    max-height: min(360px, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.tool-search-results.is-open { position: relative; z-index: 35; }
.tool-card.dvz-picker-card-active {
    position: relative;
    z-index: 30;
    border-color: rgba(0,170,255,.38);
    box-shadow: 0 16px 42px rgba(0,0,0,.32);
}

@media (max-width: 760px), (pointer: coarse) {
    .tool-search input {
        min-height: 50px;
        font-size: 16px;
    }
    .tool-search-results {
        max-height: var(--dvz-picker-max-height, 240px);
    }
    .tool-search-result {
        min-height: 62px;
        padding: 12px 13px;
    }
    .tool-search-result strong { font-size: 14px; line-height: 1.25; }
    .tool-search-result span { line-height: 1.3; }
    body.dvz-picker-open .tool-page {
        padding-bottom: var(--dvz-keyboard-reserve, 320px);
    }
}


/* ==================================================
   TOOL PAGE SURFACE POLISH V7
   Replaces the opaque black sticky title band with glass.
================================================== */
.tool-header {
    top: max(8px, env(safe-area-inset-top));
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(17,22,29,.90), rgba(12,16,22,.82));
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.tool-header-copy { flex: 1; }
.tool-header-copy h1 {
    color: #f5f9fc;
    font-size: clamp(16px, 5.2vw, 20px);
    line-height: 1.18;
    text-shadow: 0 4px 18px rgba(0,0,0,.16);
}
.tool-header-copy p { color: #84919c; font-size: 10px; }
.tool-back { width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; background: rgba(255,255,255,.045); }
.support-header-link { flex: 0 0 auto; }

.tool-hero,
.brands-hero {
    overflow: hidden;
    border-color: rgba(0,170,255,.20);
    background:
        radial-gradient(circle at 92% 4%, rgba(0,170,255,.15), transparent 37%),
        linear-gradient(145deg, rgba(19,25,33,.78), rgba(14,18,24,.58));
    box-shadow: 0 14px 38px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tool-card {
    background: linear-gradient(145deg, rgba(31,36,43,.66), rgba(20,24,31,.60));
    box-shadow: 0 9px 28px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tool-hero h2,
.brands-hero h2,
.tool-card-title,
.tool-question h3,
.tool-result-heading h3 {
    background: none !important;
    color: #f4f8fb;
    -webkit-text-fill-color: currentColor;
}

@media (max-width: 520px) {
    .tool-page { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
    .tool-header { border-radius: 16px; }
    .tool-hero { padding: 19px 17px; border-radius: 21px; }
    .tool-hero h2 { font-size: 22px; }
    .tool-card { padding: 16px; border-radius: 19px; }
}


/* ==================================================
   EXPANDED INFO CTA ABOVE DATABASE RESULTS — v16
================================================== */
.tool-more-row {
    display: grid;
    gap: 7px;
    margin: 13px 0 11px;
}
.tool-more-kicker,
.tool-db-caption {
    color: #73818d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
}
.tool-google-more-compact {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(63, 182, 255, .38);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 153, 230, .16), rgba(38, 104, 172, .09));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 7px 20px rgba(0, 140, 220, .07);
    color: #e5f6ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tool-google-more-compact b {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(0,170,255,.13);
    color: #72d5ff;
    font-size: 14px;
    font-weight: 800;
}
.tool-google-more-compact:active {
    transform: scale(.988);
    background: linear-gradient(135deg, rgba(0, 166, 245, .22), rgba(38, 104, 172, .13));
    border-color: rgba(83, 196, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 5px 14px rgba(0, 140, 220, .10);
}
.tool-db-caption {
    margin: 0 1px 8px;
}
.tool-issues-title {
    margin-top: 16px;
}
@media (max-width: 390px) {
    .tool-google-more-compact {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 11px;
    }
}