@font-face {
    font-family: "JetBrains Sans";
    src: url("fonts/JetBrainsSans-Regular.woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Regular.woff2");
}

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-hover: #f0f2f5;
    --border: rgba(0, 0, 0, 0.10);
    --accent: #2f6fdb;
    --accent-rgb: 47, 111, 219;
    --accent-2: #1a9c86;
    --accent-2-rgb: 26, 156, 134;

    /* Height of the sticky header, so anything else that sticks can sit under it
       instead of behind it. Measured, and kept in step with .nav's padding. */
    --header-h: 86px;

    font-family: "JetBrains Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    color: rgba(0, 0, 0, 0.87);
    background-color: var(--bg);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #fff;
}

/* Nimic nu are voie să lățească pagina. Pe un iPhone 11 Pro, pagina de start ieșea
   cu vreo 15 px din ecran - antetul cu tot cu ea, fiindcă Safari lățește toată
   pagina ca să încapă elementul care depășește - iar emularea nu l-a reprodus la
   nicio lățime. Ce iese se taie aici. `clip`, nu `hidden`: hidden ar face din body
   un container de scroll și ar strica antetul lipit sus. */
html, body {
    overflow-x: clip;
}

/* Butoanele și câmpurile nu moștenesc fontul de la sine. Chrome le dă totuși un
   font fără serife, dar Safari pe iPhone scria „Caută” din pagina de start cu
   Times, pentru că regula acelui buton uitase font-family: inherit. O dată aici,
   pentru toate. */
button, input, select, textarea {
    font-family: inherit;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#app {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Sticky, so navigation and the "Adaugă o părere" button stay reachable on the
   long pages - a model page or the moderation queue can run for thousands of
   pixels. Sticky rather than fixed keeps it a containing block for the mobile
   dropdown, which is positioned against it with top: 100%.
   The background is not optional: without it the page scrolls visibly through. */
.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Only once the page has moved, so the header keeps its clean edge at rest and
   still reads as a separate layer over content. */
.nav-scrolled {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.nav .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The data set is young and the scores move as it grows. Better said out loud in
   the header than discovered later. An outlined pill rather than a filled chip:
   it sits directly beside the wordmark and must not compete with it. */
.beta-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-2-rgb), 0.38);
    background-color: rgba(var(--accent-2-rgb), 0.08);
    color: #14806f;
    line-height: 1.3;
}

.compare-link {
    display: inline-block;
    font-size: 13px;
    color: var(--accent);
    margin: 8px 0 0;
}

.recommend-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;
    margin: 20px 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
}

.recommend-filters label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
}

/* La fel ca la comparare și la formular: erau 35px, cele mai scunde controale de
   pe site — pe o pagină care e în întregime un rând de filtre. Înălțimea e cerută
   direct, nu obținută din padding: selectul din formular moștenește alt
   line-height, deci aceleași valori dau alt rezultat. */
/* Culoarea textului, scrisă explicit. Fără ea, Safari pe iPhone desenează textul
   dintr-un <select> în albastrul lui de control nativ, iar cele trei filtre de aici
   arătau ca niște linkuri - pe desktop, unde moștenesc negrul, nu se vedea nimic.
   -webkit-text-fill-color e perechea obligatorie: pe iOS `color` singur nu ajunge
   la textul unui control nativ. */
.recommend-filters select {
    font-family: inherit;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.85);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.85);
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 36px 10px 12px;
    min-width: 160px;
    min-height: 44px;
}

.compare-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

/* Aceleași valori ca la selectul din formularul de părere, nu aproximativ
   aceleași: măsurate, erau 39px față de 44px peste tot altundeva - cel mai scund
   control de pe site, și tocmai pe pagina unde e primul lucru pe care îl atingi.
   Spațiul mai mare din dreapta e pentru săgeată. */
.compare-picker select {
    font-family: inherit;
    font-size: 15px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 36px 10px 12px;
    color: rgba(0, 0, 0, 0.85);
    /* Ținta scrisă direct, nu dedusă din padding: cu aceleași valori ca la
       formular ieșeau 42px, fiindcă selectul de acolo moștenește alt line-height.
       Înălțimea e ce trebuie să se potrivească, deci ea e cea cerută. */
    min-height: 44px;
}

.compare-table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface);
    font-size: 14px;
}

.compare-table th,
.compare-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.compare-table thead th {
    background-color: var(--surface-hover);
    font-weight: 600;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table td:first-child {
    color: rgba(0, 0, 0, 0.62);
    font-weight: 500;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* A faint lift under the mark, so a dark tile on a white header does not look
   pasted on. */
.logo svg {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.logo-text {
    font-weight: 700;
    font-size: 19px;
    color: #16181d;
    letter-spacing: -0.01em;
}

.logo-text-accent {
    color: var(--accent);
}

h1 {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #111318;
}

.home h1 {
    margin: 28px 0 12px;
}

.subtitle {
    color: rgba(0, 0, 0, 0.6);
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.search-bar-wrap {
    position: relative;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--surface);
    border: 1px solid #d9dce3;
    border-radius: 12px;
    padding: 0 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar:focus-within {
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* Attached directly under the input, like a native combobox, not a floating card. */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--surface);
    border: 1px solid #d9dce3;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    max-height: 320px;
    overflow-y: auto;
}

.search-bar-wrap-open .search-bar {
    border-radius: 12px 12px 0 0;
}

.search-suggestion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    color: #111318;
}

/* The arrow-key highlight has to read the same as hover, so moving with the
   keyboard and moving with the mouse look like the same thing. */
.search-suggestion-row:hover,
.search-suggestion-row-active {
    background-color: var(--surface-hover);
}

.search-suggestion-meta {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 400;
}

.search-suggestion-score {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.search-icon {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.4);
}

.search-bar-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 17px;
    padding: 15px 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111318;
}

.search-bar-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.search-bar-input::-webkit-search-cancel-button {
    cursor: pointer;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.chip {
    font-family: inherit;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background-color: #f3f4f6;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.chip:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.chip.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.toggle-empty {
    display: block;
    margin: 20px auto 0;
    font-family: inherit;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px dashed var(--border);
    background: none;
    color: rgba(0, 0, 0, 0.62);
    cursor: pointer;
}

.toggle-empty:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent);
}

.review-own-badge {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    background-color: rgba(var(--accent-2-rgb), 0.12);
    border-radius: 999px;
    padding: 3px 10px;
}

.empty-note {
    color: rgba(0, 0, 0, 0.62);
    font-size: 14px;
}

.empty-note a {
    color: var(--accent);
}

.how-it-works {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.how-it-works li {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 16px;
}

.how-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.how-step-number {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background-color: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Names the stage, so the three cards read as one pipeline rather than as three
   unrelated claims. */
.how-step-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.38);
}

.how-it-works h3 {
    font-size: 15px;
    margin: 0 0 6px;
}

.how-it-works p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.62);
}

/* The line that answers "so what" for each step. Separated by a rule because it
   is a different kind of statement from the description above it. */
.how-it-works .how-step-note {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
}

.how-step-note::before {
    content: '✓';
    margin-right: 6px;
    color: #1e8e5f;
    font-weight: 700;
}

/* Four columns rather than one line. The footer is where someone decides whether
   the site is worth trusting, and a single sentence about "surse publice" did not
   give them enough to decide with. */
/* Sits inside #app's 960px column rather than bleeding to the viewport: a
   full-width band here would have to cancel #app's bottom padding to avoid a
   white strip under it, and the border alone separates it well enough. */
.site-footer {
    margin-top: 56px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
}

.site-footer-inner {
    padding: 32px 0 26px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

.footer-brand-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.footer-brand-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    background-color: rgba(var(--accent-2-rgb), 0.12);
    color: #14806f;
}

/* .footer-blurb a plecat odată cu paragraful pe care îl îmbrăca. Nota care i-a
   luat locul e singura frază rămasă, deci preia lățimea lui - altfel s-ar fi întins
   pe toată coloana și ar fi arătat a rând rătăcit. */
.footer-note {
    margin: 0;
    max-width: 46ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.5);
}

.footer-note::before {
    content: '✓';
    margin-right: 6px;
    color: #1e8e5f;
    font-weight: 700;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
}

.footer-col-title {
    margin: 0 0 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.75);
}

.site-footer-bottom {
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.42);
}

.site-footer a {
    color: rgba(0, 0, 0, 0.55);
}

.site-footer a:hover {
    color: var(--accent);
}

@media (max-width: 760px) {
    .site-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        padding: 26px 0 22px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

.generation-label {
    color: rgba(var(--accent-rgb), 0.9);
    font-size: 13px;
    line-height: 1.4;
    margin: 5px 0 0;
}

.generation-label-large {
    font-size: 16px;
    margin-top: 6px;
}

/* Numele mașinii, lipit sub antet după ce titlul a ieșit din ecran. Fișa are între
   șapte și zece ecrane, iar de la al doilea încolo nimic nu mai spunea despre ce
   mașină citești - cu două-trei taburi deschise, adică fix ce face cineva care
   alege între mașini, e ușor să te rătăcești. */
.sticky-bar-sentinel {
    height: 1px;
    margin-top: -1px;
}

/* Fixă, nu lipicioasă. Lipicioasă stătea în fluxul paginii și, ascunsă, lăsa o
   gaură de 60px sub antetul modelului; o margine negativă a închis-o în Chrome,
   dar pe iPhone gaura a rămas. Fixă nu ocupă loc deloc, în niciun browser, iar
   pagina tot nu sare când apare. Lățimea e a ecranului, cu textul aliniat la
   marginea conținutului din #app (960px, cu 20px pe laturi). */
.sticky-model-bar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 60px;
    padding: 8px max(20px, calc((100vw - 960px) / 2 + 20px));
    /* Opac, nu translucid. Cu 94% se citea textul paginii prin bară exact pe
       muchia de sus, iar o bară prin care se vede conținutul arată a greșeală de
       randare, nu a strat. */
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.sticky-model-bar.vizibila {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.sticky-model-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-model-gen {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .sticky-model-bar {
        transition: opacity 0.16s ease, visibility 0.16s;
        transform: none;
    }
}

/* Verdictul inspecției tehnice. Marginea colorată din stânga e singurul semn de
   culoare: caseta spune deja în cuvinte dacă mașina e peste sau sub medie, iar un
   fundal întreg colorat ar striga mai tare decât scorul de deasupra ei. Aceleași
   trei culori ca la scor, ca verdele să însemne același lucru peste tot. */
/* Răspunsul la un "Caută" apăsat pe gol. Stă chiar sub casetă, pe fundalul
   albastru al primului ecran, deci galben deschis pe întuneric - roșul ar fi spus
   "ai greșit", iar omul n-a greșit cu nimic, doar n-a apucat să scrie. */
/* Previzualizarea de sub caseta de feedback. Arată cum iese textul, fiindcă altfel
   "începe rândul cu -" e o promisiune pe care omul o crede sau nu. Apare abia după
   ce e ceva de arătat, ca formularul să nu pornească cu o cutie goală sub el. */
.feedback-preview {
    margin: 4px 0 18px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background-color: var(--surface);
}

.feedback-preview-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.45);
}

.hint code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.06);
}

.search-empty {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #ffd98a;
}

.mot-verdict {
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 20px 0;
    background-color: var(--surface);
}

.mot-verdict-bun { border-left-color: #1e8e5f; }
.mot-verdict-mediu { border-left-color: #c8871b; }
.mot-verdict-slab { border-left-color: #d6453b; }

.mot-verdict-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mot-verdict-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.55);
}

/* Numărul e ajutorul, nu titlul: propoziția de dedesubt spune același lucru în
   cuvinte, iar cine nu vrea un indice poate să nu-l bage în seamă. */
.mot-verdict-index {
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.45);
}

.mot-verdict-bun .mot-verdict-index { color: #1e8e5f; }
.mot-verdict-mediu .mot-verdict-index { color: #c8871b; }
.mot-verdict-slab .mot-verdict-index { color: #d6453b; }

.mot-verdict-line {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.5;
}

.mot-verdict-cauze {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.78);
}

/* Propoziția care apare doar când părerile și inspecția se contrazic. Separată de
   restul casetei printr-o linie, fiindcă e de alt fel: celelalte rânduri raportează
   o cifră, ăsta pune două lucruri cap la cap. */
.mot-verdict-gap {
    margin: 10px 0 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.mot-verdict-gap-atentie {
    background-color: rgba(200, 135, 27, 0.10);
    color: #7a5310;
}

.mot-verdict-gap-incurajator {
    background-color: rgba(30, 142, 95, 0.10);
    color: #14663f;
}

.mot-verdict-sursa {
    margin: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

/* Câte o casetă pe vârstă, pe un rând. Pe telefon încap două pe rând: patru
   înghesuite ar fi scris procentele pe două linii. */
.mot-grupe {
    list-style: none;
    padding: 0;
    margin: 4px 0 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.mot-grupa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.02);
}

/* Grupa pe care o citează fraza de deasupra, ca ochiul să facă legătura. */
.mot-grupa-citata {
    border-color: rgba(0, 0, 0, 0.28);
}

.mot-grupa-varsta {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}

.mot-grupa-procent {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.mot-grupa-fata {
    font-size: 12px;
    font-weight: 600;
}

.mot-grupa-bun .mot-grupa-fata { color: #1e8e5f; }
.mot-grupa-mediu .mot-grupa-fata { color: #9a6511; }
.mot-grupa-slab .mot-grupa-fata { color: #c23a31; }

/* Caseta DVSA din tabul de date oficiale. */
.mot-details {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px 20px;
    margin: 24px 0;
}

.mot-details h3 {
    margin: 0 0 6px;
}

.mot-details-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin: 16px 0 12px;
}

@media (max-width: 760px) {
    .mot-details-cols {
        grid-template-columns: 1fr;
    }
}

/* Caseta ITP și cea ADAC încep cu o propoziție și cu ce să verifici. Cifrele pe
   vârste sau pe ani stau dedesubt, strânse sub un link. */
.mot-plain-verdict {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.mot-check h4 {
    margin: 0 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.6);
}

.mot-check-list {
    list-style: none;
    margin: 8px 0 14px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.mot-check-item {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-hover);
}

.mot-check-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.mot-check-share {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.mot-check-tip {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
}

.mot-numbers {
    margin: 4px 0 12px;
}

.mot-numbers > summary {
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    margin-bottom: 8px;
}

.mot-details-col h4 {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.6);
}

.mot-rate-list,
.mot-cauze-list,
.mot-rate-note {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mot-rate-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mot-cauze-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.mot-rate,
.mot-cauza {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mot-rate-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
}

.mot-rate-value {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.mot-rate-bun { color: #1e8e5f; }
.mot-rate-mediu { color: #9a6511; }
.mot-rate-slab { color: #c23a31; }

.mot-cauza-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Bara nu taie ce iese din ea: semnul mediei trebuie să se vadă și deasupra
   umpluturii, și dincolo de ea. */
.mot-rate-track {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.06);
}

.mot-rate-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.mot-rate-fill-bun { background-color: #1e8e5f; }
.mot-rate-fill-mediu { background-color: #c8871b; }
.mot-rate-fill-slab { background-color: #d6453b; }

.mot-rate-media {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    border-radius: 1px;
    background-color: rgba(0, 0, 0, 0.75);
}

.mot-rate-meta {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.62);
}

.mot-rate-details summary {
    width: fit-content;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
}

.mot-rate-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.5);
}

.mot-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}

.mot-legend-media {
    display: inline-block;
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background-color: rgba(0, 0, 0, 0.75);
}

.summary-box {
    background-color: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
}

.summary-box h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--accent-rgb), 0.9);
    margin: 0 0 8px;
}

.summary-box p {
    margin: 0;
    line-height: 1.6;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

/* Centred on the block beside it, not on its first line. The logo used to be
   nudged down 22px by hand, which lined it up with a one-line title and left it
   sitting 40px high once the generation went underneath - "BMW Seria 5" with
   "G30" below it, and the badge floating beside the gap between them. */
.detail-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.detail-title .brand-logo {
    width: 56px;
    height: 56px;
}

/* The h1 keeps the page's default margins, and with nothing to stop them they
   collapse straight out through the wrapper - so the box the logo was being
   centred against did not contain the words in it. */
.detail-title h1 {
    margin: 0;
}

.detail-title .generation-label-large {
    margin: 4px 0 0;
}

.sort-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0 4px;
}

.sort-label {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    margin-right: 2px;
}

.sort-option {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: none;
    color: rgba(0, 0, 0, 0.62);
    cursor: pointer;
}

.sort-option:hover {
    color: var(--accent);
}

/* Sortarea aleasă se vede în culoarea mărcii, nu doar într-un chenar. Chenarul
   singur se pierde printre celelalte opțiuni, mai ales pe telefon, unde toate trei
   stau lipite - iar cine nu vede care e activă nu știe după ce citește lista. */
.sort-option.active {
    border-color: rgba(var(--accent-rgb), 0.4);
    background-color: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    font-weight: 600;
}

.country-badge {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.6);
}

.country-badge.country-ro {
    background-color: rgba(var(--accent-2-rgb), 0.14);
    color: #14806f;
    font-weight: 500;
}

.review-card.review-ro {
    box-shadow: inset 3px 0 0 rgba(var(--accent-2-rgb), 0.35);
}

.detail-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.detail-score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.55);
}

.detail-score-confidence {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.detail-score-method {
    font-size: 11px;
    color: var(--accent);
}

.detail-score-empty {
    background-color: #f1f2f5;
    color: rgba(0, 0, 0, 0.3);
}

/* Says where a number came from at a glance: a public registry or a person. */
.source-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.source-kind-official {
    background-color: rgba(var(--accent-rgb), 0.10);
    color: #24508f;
}

.source-kind-user {
    background-color: rgba(var(--accent-2-rgb), 0.12);
    color: #14806f;
}

.pros-cons-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pros-cons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.pros-cons-col {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px;
}

.pros-cons-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

.pros-title { color: #2e9e4a; }
.cons-title { color: #d1453b; }

.pros-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pros-cons-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: inherit;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    text-align: left;
}

.pros-cons-row-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-bar-track {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.mini-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.mini-bar-positive { background-color: #3fb950; }
.mini-bar-negative { background-color: #f85149; }

.inline-toggle {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.pros-cons-row:hover {
    background-color: var(--surface-hover);
}

.pros-cons-count {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.62);
}

.checklist-box {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px 20px;
    margin: 24px 0;
}

.checklist-box h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px;
}

.checklist-hint {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.62);
    margin: 0 0 12px;
}

/* Lista de reguli din „Termeni”. Avea 14px, lipită de titlu, între paragrafe de
   16px - arăta scrisă cu alt font. Acum e textul paginii, cu aceeași distanță
   de titlu ca un paragraf. */
.checklist {
    margin: 1em 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: inherit;
    line-height: inherit;
}

.stats-box {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px 20px;
    margin: 24px 0;
}

.stats-box h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

.stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-row-main strong {
    font-size: 20px;
    margin-right: 8px;
}

.stat-row-label {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.62);
}

.stat-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.stat-row-meta a {
    color: var(--accent);
}

.stat-scope-badge {
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 2px 8px;
    color: rgba(0, 0, 0, 0.62);
}

.stat-row-note {
    grid-column: 1 / -1;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.5;
}

/* Câte un rând per idee. Ca paragraf, indicele - singura cifră care dă înțeles
   procentului de deasupra - se pierdea între numărul de inspecții și licență. */
.stat-row-note-list {
    margin: 4px 0 0;
    padding-left: 16px;
    list-style: disc;
}

.stat-row-note-list li {
    margin-bottom: 2px;
}

.stat-row-note-list li::marker {
    color: rgba(0, 0, 0, 0.3);
}

.tabs {
    display: flex;
    gap: 4px;
    margin: 28px 0 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 18px;
    border: none;
    background: none;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
    color: rgba(0, 0, 0, 0.8);
}

.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 2px 7px;
}

.tab.active .tab-count {
    background-color: rgba(var(--accent-rgb), 0.14);
}

.tab-panel {
    padding-top: 20px;
}

/* Un tab fără date rămâne pe loc, dar se vede mai stins - omul știe dinainte
   că n-o să găsească mare lucru acolo. */
.tab.tab-empty:not(.active) {
    color: rgba(0, 0, 0, 0.35);
}

.tab-empty-state {
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.62);
}

.tab-empty-state a {
    color: var(--accent);
    font-weight: 600;
}

.tab-intro {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 20px;
}

.tab-panel h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

.submit-cta-hint {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.submit-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.submit-cta-button {
    background-color: var(--accent);
    color: #fff;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s, transform 0.15s;
}

.submit-cta-button:hover {
    background-color: #2a62c4;
    transform: translateY(-1px);
}

.submit-cta-quiet {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.7);
    background-color: transparent;
}

.submit-cta-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-size: 16px;
}

.submit-cta-button:hover {
    background-color: #2a62c4;
}

.owner-ratings-box {
    border: 1px solid rgba(var(--accent-2-rgb), 0.3);
    background-color: rgba(var(--accent-2-rgb), 0.06);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.owner-ratings-box h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    color: #14806f;
}

.owner-rating-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.owner-rating-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.owner-rating-value {
    font-size: 19px;
    font-weight: 700;
    color: #14806f;
    font-variant-numeric: tabular-nums;
}

.owner-rating-max {
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
}

.owner-rating-label {
    flex: 1;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.powertrain-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
}

.powertrain-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface);
    font-size: 13px;
}

.powertrain-table th,
.powertrain-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.powertrain-table thead th {
    background-color: var(--surface-hover);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(0, 0, 0, 0.62);
}

.powertrain-table tbody tr:last-child td {
    border-bottom: none;
}

.powertrain-drive {
    color: rgba(0, 0, 0, 0.5);
}

.fuel-badge {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.fuel-diesel { background-color: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.7); }
.fuel-benzina { background-color: rgba(var(--accent-rgb), 0.12); color: #2a62c4; }
.fuel-hibrid { background-color: rgba(var(--accent-2-rgb), 0.15); color: #14806f; }
.fuel-electric { background-color: rgba(63, 185, 80, 0.15); color: #2e9e4a; }

.chip-divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--border);
    margin: 2px 4px;
}

.known-issues-box,
.recalls-box {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px 20px;
    margin: 24px 0;
}

.known-issues-box h2,
.recalls-box h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px;
}

.known-issue-list,
.recall-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.known-issue,
.recall-item {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.known-issue:last-child,
.recall-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.known-issue-head,
.recall-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* Numele componentei vine de la NHTSA și e un singur cuvânt lung, fără spații:
   "ELECTRICAL SYSTEM:WIRING:SWITCHES/KNOBS/HARNESS". Pe un ecran de 390 de pixeli
   ieșea 11 pixeli în afară și se putea trage toată pagina în lateral. Se rupe
   oriunde, fiindcă n-are unde altundeva. */
.recall-head strong {
    overflow-wrap: anywhere;
    min-width: 0;
}

.known-issue .mini-bar-track {
    margin-bottom: 6px;
}

.known-issue-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    background-color: rgba(248, 81, 73, 0.12);
    color: #d1453b;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.known-issue-sample,
.recall-summary {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.62);
}

.recall-meta {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    font-family: "JetBrains Mono", monospace;
}

.recall-remedy {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.75);
}

.complaints-box {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    padding: 16px 20px;
    margin: 24px 0;
}

.complaints-box h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px;
}

.complaint-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Numele deasupra barei, nu într-o coloană îngustă lângă ea: "Service brakes ›
   hydraulic › antilock" nu încape în 170px și se rupea pe trei rânduri. */
.complaint-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.complaint-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.complaint-head > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.complaint-pct {
    color: rgba(0, 0, 0, 0.45);
}

.complaint-bar-wrap {
    display: block;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
}

/* Aceeași ramă pentru toate casetele din tabul de date oficiale - DVSA, TÜV,
   probleme, rechemări, reclamații - ca să se citească drept o singură pagină. */
.official-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    padding: 18px 20px;
    margin: 0 0 16px;
}

.official-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.official-count {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.62);
}

.official-empty {
    margin: 8px 0 12px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
}

/* Rechemări și reclamații una lângă alta pe ecran lat, ca în macheta Stitch;
   pe telefon una sub alta. */
.official-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.official-grid > .official-card {
    margin: 0;
    min-width: 0;
}

@media (max-width: 860px) {
    .official-grid {
        grid-template-columns: 1fr;
    }
}

/* Titlul sus, anul și campania dedesubt, pe orice rând. Lăsate să se așeze
   singure, unele rânduri le țineau alături și altele le împingeau dedesubt, iar
   lista arăta dezordonată. */
.recall-item details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
}

.recall-list {
    gap: 10px;
}

.recall-item {
    padding-bottom: 10px;
}

.recall-item details > summary strong {
    font-size: 14px;
    font-weight: 600;
}

.recall-item details > summary .recall-meta {
    padding-left: 14px;
}

.recall-item details > summary::-webkit-details-marker {
    display: none;
}

.recall-item details > summary strong::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    color: rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}

.recall-item details[open] > summary strong::before {
    transform: rotate(90deg);
}

.recall-item details > summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.recall-item details > .recall-summary {
    margin-top: 8px;
}

.known-issue-quote summary {
    width: fit-content;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
}

.complaint-bar {
    display: block;
    height: 100%;
    background-color: rgba(var(--accent-rgb), 0.65);
}

.complaint-count {
    text-align: right;
    color: rgba(0, 0, 0, 0.62);
    font-variant-numeric: tabular-nums;
}

.video-section h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 32px 0 16px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
    display: block;
}

/* Miniatura care stă în locul playerului până la apăsare. Aceleaşi dimensiuni ca
   iframe-ul pe care îl înlocuieşte, ca rândul să nu sară când sosește playerul. */
.video-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: #000;
}

/* hqdefault vine 4:3 cu dungi negre sus şi jos. Tăierea pe mijloc scoate dungile
   şi lasă exact cadrul 16:9 pe care l-ar arăta şi playerul. */
.video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.18s ease;
}

.video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease;
    opacity: 0.92;
}

.video-poster:hover img,
.video-poster:focus-visible img {
    transform: scale(1.03);
}

.video-poster:hover .video-play,
.video-poster:focus-visible .video-play {
    opacity: 1;
}

.video-poster:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .video-poster img {
        transition: none;
    }

    .video-poster:hover img,
    .video-poster:focus-visible img {
        transform: none;
    }
}

.video-title {
    font-size: 14px;
    margin: 8px 0 2px;
}

.video-channel {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.62);
    margin: 0;
}

.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.tag-filter {
    font-family: inherit;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}

.tag-filter:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.tag-filter.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.review-engine {
    color: rgba(0, 0, 0, 0.62);
    font-family: "JetBrains Mono", monospace;
}

/* Despre ce generație e părerea, la modelele care le țin pe toate la un loc. */
.review-generation {
    font-size: 12px;
    font-weight: 600;
    color: #14806f;
    background: #eaf7f2;
    padding: 2px 8px;
    border-radius: 999px;
}

.review-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.review-tag {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.pending-model {
    font-weight: 500;
    color: rgba(var(--accent-rgb), 0.9);
    margin: 4px 0;
}

.pending-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.pending-actions button {
    font-family: inherit;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid rgba(63, 185, 80, 0.5);
    background-color: rgba(63, 185, 80, 0.15);
    color: rgba(0, 0, 0, 0.95);
}

.pending-actions .reject-button {
    border-color: rgba(248, 81, 73, 0.5);
    background-color: rgba(248, 81, 73, 0.15);
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.model-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.model-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    background-color: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.model-card:hover {
    border-color: #cbd2dc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* No content yet - stays clickable (someone might want to be first to write a
   review) but visually signals there's nothing to read there yet. */
.model-card-empty,
.brand-chip-empty {
    opacity: 0.6;
}

.model-card-empty:hover,
.brand-chip-empty:hover {
    opacity: 0.85;
}

.model-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.model-card-name {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111318;
}

.model-card-gen {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
}

.model-card-score {
    flex-shrink: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.model-card-score-none {
    font-size: 22px;
    color: rgba(0, 0, 0, 0.25);
}

.model-card-sub {
    margin: 0 0 14px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.55);
}

.model-card-issues {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.45);
}

.score-tier-text-good { color: #2c7a34; }
.score-tier-text-mixed { color: #b06d10; }
.score-tier-text-poor { color: #b3291f; }

.score-tier-bg-good { background-color: #4f9e35; }
.score-tier-bg-mixed { background-color: #c8820f; }
.score-tier-bg-poor { background-color: #d0392c; }

.brand-chip-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* 190px fits "Mercedes-Benz", the longest name we carry. Below that it was
       being truncated to "Merce...", which is not a name anyone recognises. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.brand-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    background-color: var(--surface);
    font-size: 14px;
    font-weight: 600;
    color: #111318;
    transition: border-color 0.15s, background-color 0.15s;
}

.brand-chip:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background-color: var(--surface-hover);
}

/* The marques are the only colour and recognition the page has, so they get to
   be the largest thing in the tile. */
.brand-chip .brand-logo,
.brand-chip .car-icon {
    width: 32px;
    height: 32px;
}

.brand-chip .brand-logo img,
.brand-chip .brand-logo svg {
    width: 32px;
    height: 32px;
}

.brand-chip span:first-of-type {
    flex: 1;
    min-width: 0;
}

.brand-chip-count {
    color: rgba(0, 0, 0, 0.45);
    font-variant-numeric: tabular-nums;
}

.brand-logo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-title .brand-logo {
    width: 56px;
    height: 56px;
}

.brand-detail-subtitle {
    color: rgba(0, 0, 0, 0.6);
    margin: 4px 0 0;
}

.brand-detail-grid {
    margin-top: 24px;
}

.car-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-icon-initials {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.model-card h2 {
    font-size: 17px;
    line-height: 1.35;
    margin: 0;
}

.review-count {
    color: rgba(0, 0, 0, 0.62);
    font-size: 14px;
    margin: 14px 0 14px;
}

.top-tag {
    color: rgba(var(--accent-rgb), 0.8);
}

/* The figures that say this is not one person's opinion. They used to be a grey
   caption under the search box; as tiles they carry their own weight and give
   the eye somewhere to land between the hero and the ranking. */
.proof-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 32px 0 8px;
}

.proof-figure {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 12px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
}

.proof-icon {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
}

/* Each figure measures a different kind of thing, and the colour is the fastest
   way to say which: blue for what we collected, teal for what is verifiable,
   amber for what someone complained about. */
.proof-icon-sources {
    background-color: rgba(var(--accent-2-rgb), 0.12);
    color: #14806f;
}

.proof-icon-complaints {
    background-color: rgba(210, 153, 34, 0.14);
    color: #a67815;
}

.proof-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #111318;
    font-variant-numeric: tabular-nums;
}

.proof-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}

/* A section heading with its "see all" on the same line, so the link is where
   the eye already is rather than orphaned under the content. */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.section-head .see-all-link {
    margin-top: 0;
    margin-bottom: 18px;
    white-space: nowrap;
}

/* A long lead was filling the row and pushing the "see all" link onto a line of
   its own. Capping the text block keeps them side by side. */
.section-head > div {
    max-width: 64ch;
}

.section-head .section-lead {
    margin-bottom: 18px;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 40px 0 4px;
    color: #111318;
}

.section-lead {
    margin: 0 0 18px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.55);
}

/* Full-bleed: escapes the 960px column by stretching to the viewport and padding
   its own inner column back to the same width. */
.band {
    margin: 48px calc(50% - 50vw) 8px;
    padding: 8px calc(50vw - 50%) 36px;
    background-color: #f4f6fa;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.band .section-title {
    margin-top: 32px;
}

.sentiment-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 12px 0;
}

.sentiment-empty {
    color: rgba(0, 0, 0, 0.55);
    font-size: 13px;
}

.sentiment-positive { background-color: #3fb950; }
.sentiment-neutral { background-color: #d29922; }
.sentiment-negative { background-color: #f85149; }

.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.score-badge-md {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.score-badge-lg {
    width: 64px;
    height: 64px;
    font-size: 21px;
}

.score-badge-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.score-tier-good { background-color: rgba(63, 185, 80, 0.20); color: #1e7e39; }
.score-tier-mixed { background-color: rgba(210, 153, 34, 0.20); color: #8a6010; }
.score-tier-poor { background-color: rgba(248, 81, 73, 0.20); color: #b02a24; }

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 0.6);
}

.back-link:hover {
    color: var(--accent);
}

.review-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.review-card {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 16px;
    background-color: var(--surface);
}

.review-card.sentiment-positive { border-left-color: #3fb950; }
.review-card.sentiment-neutral { border-left-color: #d29922; }
.review-card.sentiment-negative { border-left-color: #f85149; }

.review-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.sentiment-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.sentiment-tag-positive { background-color: rgba(63, 185, 80, 0.2); color: #3fb950; }
.sentiment-tag-neutral { background-color: rgba(210, 153, 34, 0.2); color: #d29922; }
.sentiment-tag-negative { background-color: rgba(248, 81, 73, 0.2); color: #f85149; }

.review-author {
    color: rgba(0, 0, 0, 0.55);
}

.review-content {
    margin: 0 0 8px;
    line-height: 1.5;
}

.review-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--accent);
}

.source-icon {
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.source-icon-generic {
    color: rgba(0, 0, 0, 0.45);
}

/* Coloured on purpose. A forum post is the most specific material the site
   carries - the ones that name a mileage and a failure - and it was wearing the
   same grey as a generic web page. */
.source-icon-forum {
    color: #14806f;
}

/* O singură culoare pentru toate linkurile de sursă. Forumurile erau verzi și
   restul albastre, iar într-o listă în care sursele se amestecă ieșeau două feluri
   de link care arătau ca două feluri de lucru. Ce fel de sursă e o spun deja
   icoana și numele scris lângă ea - culoarea nu adăuga informație, doar întrebarea
   "de ce ăsta e altfel". */

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: rgba(0, 0, 0, 0.95);
}

/* A select sizes itself from the font metrics its own widget uses, so matching
   the padding is not enough - next to a text box it always sat a few pixels
   shorter. Fixing the height on both is the only way they line up. */
.admin-form input:not([type="checkbox"]):not(.honeypot),
.admin-form select {
    height: 44px;
}

/* The native arrow is drawn at whatever size the platform likes and left the
   control looking unlike everything around it. */
.admin-form select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* Only after a submit attempt - the class is put on by the form, which does not
   set it until you have pressed the button. Before that an untouched form would
   be a wall of red for fields you simply have not reached yet. */
.admin-form label.has-problem {
    color: #a8382f;
}

.admin-form label.has-problem > input,
.admin-form label.has-problem > select,
.admin-form label.has-problem textarea {
    border-color: #d6453b;
    background-color: rgba(214, 69, 59, 0.04);
}

.admin-form label.has-problem > input:focus,
.admin-form label.has-problem > select:focus,
.admin-form label.has-problem textarea:focus {
    border-color: #d6453b;
    box-shadow: 0 0 0 3px rgba(214, 69, 59, 0.14);
}

/* The checkbox has no box to outline, so the row itself carries the mark. */
.admin-form label.checkbox-label.has-problem {
    border-left: 3px solid #d6453b;
    padding-left: 10px;
    margin-left: -13px;
}

/* Scoped to submit buttons on purpose: this used to style every button inside a
   form, which silently overrode the tag chips so a picked tag looked identical to
   an unpicked one. */
.admin-form button[type="submit"] {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    background-color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 13px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.15s;
}

.admin-form button[type="submit"]:hover {
    background-color: #2a62c4;
}

.admin-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
}

.first-reviewer-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: rgba(210, 153, 34, 0.15);
    color: #a67815;
}

.error {
    color: #f85149;
}

.success {
    color: #3fb950;
}

@media (max-width: 640px) {
    :root {
        --header-h: 66px;
    }

    #app {
        padding: 0 14px 40px;
    }

    /* Three things on one line: the menu button, the mark, the one action worth
       taking. Every link moves behind the button, which is what buys the room for
       the action to be a real button instead of a row in a dropdown. */
    .nav {
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
    }

    h1 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 16px;
    }

    h1 {
        font-size: 26px;
    }

    .detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .detail-score {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }

    .detail-score-confidence {
        white-space: normal;
    }

    .detail-title .brand-logo {
        margin-top: 0;
    }

    .recommend-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .recommend-filters select {
        min-width: 0;
    }

    .review-meta {
        flex-wrap: wrap;
    }

    /* Filtrele se înfășoară pe mai multe rânduri, nu se derulează lateral.
       Banda derulabilă părea o idee bună - ține filtrele pe un rând - dar pe un
       iPhone 11 Pro ieșea din cardul care o ține, iar pagina ajungea să aibă 649
       de pixeli lățime pe un ecran de 375: se putea trage tot site-ul în lateral.
       Și un filtru pe care nu-l vezi nu e un filtru, e un lucru ascuns. */
    .chip-row {
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0 24px;
    }

    .complaint-row {
        grid-template-columns: 90px 1fr 32px;
        font-size: 12px;
    }

    .stat-row {
        grid-template-columns: 1fr;
    }

    .admin-form {
        max-width: none;
    }

    .search-bar {
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
    }

    .search-icon {
        order: -1;
    }

    .search-bar-input {
        order: -1;
        flex: 1;
        min-width: 0;
        padding: 8px 0;
    }

    .search-bar-button {
        flex-basis: 100%;
        padding: 12px;
    }
}

/* Below this the three header items stop fitting on one line and the action
   button was being clipped off the right edge on a real iPhone - Safari renders
   the wordmark wider than Chromium did at the same width, so the desk test
   passed and the phone did not. The BETA badge goes rather than the button's
   label: "Scrie o experiență" says what happens, "Scrie" leaves you guessing
   what you are writing, and the badge is the only decoration in the row. */
@media (max-width: 480px) {
    .nav .beta-badge {
        display: none;
    }
}

@media (max-width: 400px) {
    .nav {
        gap: 6px;
        padding: 10px 12px;
    }

    .nav .logo svg {
        width: 30px;
        height: 30px;
    }

    .nav .logo {
        gap: 7px;
    }

    .logo-text {
        font-size: 16px;
    }

    h1 {
        font-size: 25px;
    }

    .subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .search-bar-input {
        font-size: 16px;
        padding: 13px 0;
    }

    .model-card-name {
        font-size: 16px;
    }

    .model-card-sub {
        font-size: 14px;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tag-picker {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin: 0;
}

.tag-picker legend {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    padding: 0 4px;
}

.tag-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Bots fill this in; people never see it. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.checkbox-label span a {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.see-all-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    color: var(--accent);
}

/* Sticky because the queue can be well over a hundred items: you tick as you read
   your way down, and the actions have to stay within reach. */
.queue-toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
}

.queue-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-right: auto;
}

.batch-button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(63, 185, 80, 0.5);
    background-color: rgba(63, 185, 80, 0.15);
    color: #1e7e39;
    cursor: pointer;
}

.batch-button.reject-button {
    border-color: rgba(248, 81, 73, 0.5);
    background-color: rgba(248, 81, 73, 0.15);
    color: #b3261e;
}

.batch-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* On a phone the three controls would stack into a tall bar that eats the screen
   it is pinned to. Keep the two actions on one row instead. */
@media (max-width: 640px) {
    .queue-toolbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .queue-select-all {
        flex-basis: 100%;
        margin-right: 0;
    }

    .batch-button {
        flex: 1;
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;
    }
}

.md-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.md-toolbar button {
    font-family: inherit;
    font-size: 14px;
    min-width: 34px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.md-toolbar button:hover {
    background-color: var(--surface-hover);
}

.md-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.md-hint code {
    font-size: 12px;
    background-color: var(--surface-hover);
    padding: 1px 4px;
    border-radius: 4px;
}

/* The formatted review body. Paragraphs collapse their outer margins so a
   one-paragraph review sits exactly where the old single <p> did. */
.review-content > p {
    margin: 0 0 10px;
}

.review-content > p:last-child {
    margin-bottom: 0;
}

.rich-list {
    margin: 0 0 10px;
    padding-left: 20px;
}

.rich-list:last-child {
    margin-bottom: 0;
}

.compare-thin {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

.admin-gate {
    max-width: 340px;
    margin: 40px auto;
}

.admin-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.admin-bar button {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(248, 81, 73, 0.5);
    background-color: rgba(248, 81, 73, 0.12);
    cursor: pointer;
}

.queue-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* A ticked card has to be obvious at a glance, otherwise you cannot tell what a
   batch action is about to touch. */
.review-card.picked,
.video-card.picked {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}

.md-count {
    color: var(--accent);
}

/* ── Clasamentul de fiabilitate ──────────────────────────────────────────────
   The answer the whole site exists to give, and until now it appeared nowhere. */
.ranking-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ranking-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--surface);
}

.ranking-head {
    margin: 0;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ranking-best .ranking-head {
    background-color: rgba(26, 156, 134, 0.10);
    color: #14705f;
}

.ranking-worst .ranking-head {
    background-color: rgba(214, 69, 59, 0.09);
    color: #a8382f;
}

.ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ranking-list li + li .ranking-row {
    border-top: 1px solid var(--border);
}

.ranking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.ranking-row:hover {
    background-color: var(--surface-hover);
}

.ranking-pos {
    width: 14px;
    flex-shrink: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.35);
}

.ranking-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 600;
    color: #111318;
}

.ranking-brand {
    font-size: 11px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
}

.ranking-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

/* A filled chip rather than coloured text: the score has to be readable at a
   glance from across the section, which is the whole point of ranking things. */
.score-chip {
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.score-chip.score-tier-good { background-color: #1e8e5f; }
.score-chip.score-tier-mixed { background-color: #c8871b; }
.score-chip.score-tier-poor { background-color: #d6453b; }

.ranking-count {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.42);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .ranking-columns {
        grid-template-columns: 1fr;
    }

    .proof-band {
        gap: 28px;
        padding: 18px 0;
    }

    .proof-value {
        font-size: 24px;
    }
}

/* ── Cardul de scor de pe pagina de model ────────────────────────────────────
   Replaces a small badge in the top-right corner. The number, the verdict in
   words, what it rests on and the sentiment split belong together: a score with
   no sample size behind it is not worth reading. */
.score-card {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 18px 0 8px;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--surface);
}

.score-ring {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.score-ring-track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.07);
    stroke-width: 11;
}

.score-ring-value {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.score-ring-good .score-ring-value { stroke: #1e8e5f; }
.score-ring-mixed .score-ring-value { stroke: #c8871b; }
.score-ring-poor .score-ring-value { stroke: #d6453b; }

.score-ring-figure {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.score-ring-number {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #111318;
    font-variant-numeric: tabular-nums;
}

.score-ring-good .score-ring-number { color: #1e8e5f; }
.score-ring-mixed .score-ring-number { color: #b4780f; }
.score-ring-poor .score-ring-number { color: #d6453b; }
.score-ring-empty .score-ring-number { color: rgba(0, 0, 0, 0.3); }

.score-ring-unit {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}

.score-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.score-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.score-card-verdict {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.score-card-verdict-empty {
    color: rgba(0, 0, 0, 0.55);
    font-size: 20px;
}

.score-card-basis {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.45;
}

.score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.score-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-legend strong {
    color: #111318;
    font-variant-numeric: tabular-nums;
}

.score-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.score-card-method {
    margin-top: 8px;
    font-size: 13px;
    color: var(--accent);
}

@media (max-width: 640px) {
    .score-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 20px;
    }

    .score-card-verdict {
        font-size: 21px;
    }
}

/* ── Invitația de a contribui ────────────────────────────────────────────────
   Dark, because it is the one thing on the page asking the reader for something
   rather than giving them something, and it was previously the quietest element
   on it: a grey line of text with an arrow. */
.join-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 40px 0 8px;
    padding: 26px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #171b24 0%, #1f2634 100%);
    color: #fff;
}

.join-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

/* Mid-page on a model page rather than at the end of the homepage, so it has to
   be a touch quieter than the one it borrows its styling from. */
.join-cta-model {
    margin: 28px 0 4px;
}

.join-cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.join-cta-points li::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
    color: #4ade9b;
}

/* A soft glow behind the button, so the panel is not a flat black rectangle. */
.join-cta::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(var(--accent-rgb), 0.22);
    filter: blur(56px);
    pointer-events: none;
}

.join-cta > * {
    position: relative;
    z-index: 1;
}

.join-cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7fb0ff;
}

.join-cta-title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #fff;
}

.join-cta-body {
    margin: 2px 0 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
}

.join-cta-button {
    flex-shrink: 0;
    padding: 13px 24px;
    border-radius: 10px;
    background-color: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
    transition: background-color 0.15s, transform 0.15s;
}

.join-cta-button:hover {
    background-color: #2761c4;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .join-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 22px 20px;
    }

    .join-cta-title {
        font-size: 20px;
    }

    .join-cta-button {
        width: 100%;
        text-align: center;
    }
}

/* Field-level validation. The browser's own stops at the first offending field
   and only says "Completați acest câmp", which tells you neither which nor how
   many are left. */
.field-problem {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #c0392f;
}

.form-problem-summary {
    margin: 4px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(248, 81, 73, 0.35);
    background-color: rgba(248, 81, 73, 0.07);
    font-size: 14px;
    color: #a8382f;
}

.md-count-over {
    color: #c0392f;
    font-weight: 600;
}

/* A caveat that has to be read before the table it sits above, not after. The
   grey "tab-intro" it replaced read as a footnote, and the thing being qualified
   is not a detail: the whole table describes the American market. */
.market-warning {
    margin: 10px 0 18px;
    padding: 14px 18px;
    border-left: 3px solid #c8871b;
    border-radius: 0 10px 10px 0;
    background-color: rgba(210, 153, 34, 0.08);
}

.market-warning strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #8a5d0c;
}

.market-warning p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
}

.market-warning p:last-child {
    margin-bottom: 0;
}

/* ── Hero-ul paginii principale ──────────────────────────────────────────────
   Centred, and narrower than the column it sits in. The search box is the only
   thing the page asks anyone to do first; left-aligned under a full-width
   heading it read as one more element rather than as the way in. */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 36px auto 0;
    max-width: 720px;
}

.hero h1 {
    margin: 16px 0 12px;
    font-size: 40px;
    /* Without this the line breaks inside "s-o", which reads as a typo. */
    text-wrap: balance;
}

.hero .subtitle {
    margin-bottom: 26px;
    max-width: 52ch;
}

.hero .search-bar-wrap {
    width: 100%;
    text-align: left;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-2-rgb), 0.3);
    background-color: rgba(var(--accent-2-rgb), 0.08);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #14806f;
}

.hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #1a9c86;
}

/* A way in for someone who has not decided what to type yet. Driven by review
   count, so it always points at the pages with something to read on them. */
.hero-popular {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hero-popular-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.38);
}

.hero-popular-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    transition: border-color 0.15s, color 0.15s;
}

.hero-popular-chip:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent);
}

.hero-popular-gen {
    color: rgba(0, 0, 0, 0.4);
    font-weight: 400;
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: rgba(0, 0, 0, 0.45);
}

.hero-notes li::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
    color: #1e8e5f;
}

/* ── Completări la clasament ─────────────────────────────────────────────── */
.ranking-gen {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
}

/* A rank says "this one is better" without saying in what way. This names the
   thing owners keep bringing up, so the row carries its own reason. */
.ranking-headline {
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
}

.ranking-headline-positive { color: #1e8e5f; }
.ranking-headline-negative { color: #c0392f; }

.ranking-headline-count {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
}

.ranking-pos {
    width: 22px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.28);
}

.ranking-row {
    align-items: flex-start;
}

.ranking-row .brand-logo {
    margin-top: 1px;
}

.brand-chip-arrow {
    color: rgba(0, 0, 0, 0.25);
    font-size: 18px;
    line-height: 1;
}

.brand-chip:hover .brand-chip-arrow {
    color: var(--accent);
}

/* ── Firul de navigare de pe pagina unui model ───────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb-sep {
    color: rgba(0, 0, 0, 0.25);
}

.breadcrumb-current {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
}

/* Pushed to the far end of the same line: it is a sideways move, not a step
   back up the hierarchy. */
.breadcrumb .compare-link {
    margin: 0 0 0 auto;
}

/* ── Antetul paginii unui model ──────────────────────────────────────────── */
.model-hero {
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--surface);
}

.model-hero-main {
    width: 100%;
    min-width: 0;
}

/* Cu poză: pe ecran lat numele și datele la stânga, poza la dreapta; pe telefon
   poza deasupra, pe toată lățimea casetei. Poza e prima în pagină ca pe telefon
   să vină sus fără alt markup; pe desktop o mută `order`. */
.model-hero-with-photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    gap: 24px;
    align-items: center;
}

.model-hero-with-photo .model-photo {
    order: 2;
}

.model-photo {
    margin: 0;
    min-width: 0;
}

.model-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-hover);
}

.model-photo-generation {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.75);
}

.model-photo figcaption {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.5);
    overflow-wrap: anywhere;
}

.model-photo figcaption a {
    color: inherit;
}

@media (max-width: 760px) {
    .model-hero-with-photo {
        display: block;
    }

    .model-photo {
        margin-bottom: 16px;
    }
}

.model-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.model-hero-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: rgba(var(--accent-rgb), 0.09);
    color: #24508f;
}

.model-hero .detail-title .brand-logo {
    margin-top: 4px;
}

/* The name is the one thing on this card nobody should have to look for. */
.model-hero h1 {
    font-size: 38px;
}

/* What the car is, as opposed to how much we know about it - the counters for
   that sit beside the score below. */
/* Flex rather than a grid of equal columns: a model with two known facts should
   not have them stretched across the whole card with a gulf in between. */
.model-hero-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    margin: 20px 0 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.model-hero-spec dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.38);
}

.model-hero-spec dd {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #111318;
}

/* ── Contoarele de lângă scor ────────────────────────────────────────────── */
.score-card-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0 0 0 26px;
    border-left: 1px solid var(--border);
    align-self: stretch;
    justify-content: center;
    flex-shrink: 0;
}

.score-card-metrics li {
    display: flex;
    flex-direction: column;
    min-width: 128px;
}

.score-metric-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #111318;
    font-variant-numeric: tabular-nums;
}

.score-metric-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.score-metric-note {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.38);
}

/* ── Ce să verifici, ca fișe ─────────────────────────────────────────────── */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cards rather than bullets: this is the section a buyer reads again in the
   parking lot, and a run-on list is not something you can scan there. */
.checklist-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-top: 3px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background-color: var(--bg);
}

.checklist-card-high { border-top-color: #d6453b; }
.checklist-card-mid { border-top-color: #c8871b; }
.checklist-card-low { border-top-color: #9aa3b0; }

.checklist-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.checklist-card-icon {
    display: flex;
    color: rgba(0, 0, 0, 0.45);
}

.checklist-card-high .checklist-card-icon { color: #c0392f; }
.checklist-card-mid .checklist-card-icon { color: #a67815; }

.checklist-card-count {
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.5);
}

.checklist-box .checklist-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: #111318;
}

.checklist-card-source {
    margin-top: auto;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}

.checklist-card-source-official {
    color: #24508f;
}

/* ── Bara de taburi ──────────────────────────────────────────────────────── */
.tab-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 32px 0 0;
    border-bottom: 1px solid var(--border);
}

/* The border now belongs to the bar, so the tabs must not draw a second one
   under the sorting controls. */
.tab-bar .tabs {
    margin: 0;
    border-bottom: none;
    flex: 1;
    min-width: 0;
}

.tab-bar .sort-row {
    margin: 0 0 6px;
}

.pros-cons-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pros-cons-total {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(0, 0, 0, 0.4);
}

/* ── Fișa unei păreri ────────────────────────────────────────────────────── */
.review-date {
    color: rgba(0, 0, 0, 0.4);
}

/* The year and the odometer are what tell you whether the rest of the card
   applies to the car you are looking at, so they get the far edge of the row. */
.review-ownership {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), 0.08);
    color: #24508f;
    white-space: nowrap;
}

/* "Citește tot" nu e un buton ca "încarcă mai multe": ăla e o acțiune peste listă,
   ăsta e o continuare a frazei pe care tocmai ai citit-o. Deci se poartă ca un
   link din text - fără chenar, pe rândul de sub el, cât să nu se confunde cu
   începutul următoarei păreri. */
.review-more {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--accent);
    cursor: pointer;
}

.review-more:hover {
    text-decoration: underline;
}

.review-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.load-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.load-more:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent);
}

.load-more-rest {
    color: rgba(0, 0, 0, 0.4);
    font-weight: 400;
}

@media (max-width: 860px) {
    /* The counters stack under the verdict instead of squeezing it. */
    .score-card-metrics {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px;
        margin: 0;
        padding: 16px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
        width: 100%;
    }

    .score-card {
        flex-wrap: wrap;
    }

    .score-card-metrics li {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .hero {
        margin-top: 24px;
    }

    .hero h1 {
        font-size: 27px;
    }

    .hero-notes {
        gap: 4px 16px;
        font-size: 12px;
    }

    .proof-band {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .proof-figure {
        padding: 12px 14px;
        gap: 0 10px;
    }

    .proof-icon {
        width: 32px;
        height: 32px;
    }

    .proof-value {
        font-size: 21px;
    }

    .proof-label {
        font-size: 9.5px;
    }

    .section-head {
        align-items: flex-start;
    }

    .section-head .see-all-link {
        margin-bottom: 14px;
    }

    .model-hero {
        padding: 18px;
    }

    /* 38px is a desktop size. On a phone "Toyota Corolla" broke onto two lines
       beside a logo pinned to the first of them, which left the mark floating
       next to nothing. Smaller type keeps most names on one line, and centring
       ties the logo to the name when they do wrap. */
    .model-hero h1 {
        font-size: 26px;
    }

    .model-hero .detail-title {
        align-items: center;
        gap: 12px;
    }

    .model-hero .detail-title .brand-logo {
        margin-top: 0;
    }

    /* Two across then one stranded underneath. A single column of rows lines the
       figures up on one edge and gives each label the width it needs. */
    .score-card-metrics {
        flex-direction: column;
        gap: 12px;
    }

    .score-card-metrics li {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 2px 12px;
    }

    .score-metric-value {
        grid-row: 1 / 3;
        min-width: 58px;
    }

    .breadcrumb .compare-link {
        margin-left: 0;
        flex-basis: 100%;
    }

    /* Underlined tabs in a scrolling strip hid "Date oficiale" and "Video" off
       the right edge with nothing to say they were there. Wrapped pills show
       every tab at once, which beats making the scroll easier to discover. */
    .tab-bar {
        align-items: stretch;
        border-bottom: none;
    }

    .tab-bar .tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        overflow-x: visible;
    }

    .tab-bar .tab {
        margin-bottom: 0;
        /* 14px pushed "Motorizări (SUA) 25" onto a second line and made that
           tile taller than the one beside it. */
        font-size: 13px;
        padding: 10px 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background-color: var(--surface);
        text-align: center;
        white-space: normal;
    }

    .tab-bar .tab.active {
        border-color: var(--accent);
        background-color: var(--accent);
        color: #fff;
    }

    .tab-bar .tab.active .tab-count {
        background-color: rgba(255, 255, 255, 0.22);
        color: #fff;
    }

    .tab-bar .sort-row {
        margin: 10px 0 0;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
}

/* ── Formularul rapid ────────────────────────────────────────────────────────
   The site had one owner submission against nine hundred mined comments. The
   form was asking for a model, a year, a mileage, an engine code from memory,
   a sentiment, tags and a forty-character essay before it would take anything
   at all. The short path asks for the four facts a buyer actually wants and
   lets the rest be optional. */
.mode-switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 24px;
    padding: 4px;
    border-radius: 12px;
    background-color: #f1f3f6;
}

.mode-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border: none;
    border-radius: 9px;
    background: none;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.mode-option.active {
    background-color: var(--surface);
    color: #111318;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

.mode-option-hint {
    font-size: 11px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.42);
}

.severity-picker {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.severity-picker legend {
    padding: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.severity-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

/* Three targets big enough for a thumb, because this is the one question the
   whole short form exists to ask. */
.severity-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font-family: inherit;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.severity-option strong {
    font-size: 14px;
    color: #111318;
}

.severity-option span {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.severity-option:hover {
    border-color: rgba(0, 0, 0, 0.25);
}

/* Coloured only once chosen: three coloured buttons at rest would read as a
   severity scale you are being shown rather than one you are being asked for. */
.severity-option.active {
    border-width: 2px;
    padding: 11px 13px;
}

.severity-none.active { border-color: #1e8e5f; background-color: rgba(30, 142, 95, 0.07); }
.severity-minor.active { border-color: #c8871b; background-color: rgba(200, 135, 27, 0.08); }
.severity-major.active { border-color: #d6453b; background-color: rgba(214, 69, 59, 0.07); }

.severity-none.active strong { color: #14705f; }
.severity-minor.active strong { color: #8a5d0c; }
.severity-major.active strong { color: #a8382f; }

.severity-picker.has-problem legend {
    color: #a8382f;
}

.severity-picker.has-problem .severity-option {
    border-color: rgba(214, 69, 59, 0.45);
}

.field-optional {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
}

.field-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
}

/* ── Costul reparației, pe fișa părerii ─────────────────────────────────────
   A forum post says the gearbox failed. It never says it was 4200 lei, which is
   the thing the reader is trying to work out, so when we do have the figure it
   gets its own line rather than a chip among the metadata. */
.review-cost {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: rgba(var(--accent-rgb), 0.07);
}

.review-cost-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}

.review-cost strong {
    font-size: 15px;
    color: #24508f;
    font-variant-numeric: tabular-nums;
}

/* ── Contextul ofertei ──────────────────────────────────────────────────────
   Everything else on a model page describes a generation. This block is the only
   one that talks about one particular listing, so it is bordered rather than
   boxed like a card: it reads as an annotation on the page, not as more content. */
.offer-box {
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    background-color: var(--surface);
}

.offer-box-match { border-left-color: var(--accent); }
.offer-box-warn { border-left-color: #d29922; }
.offer-box-thin { border-left-color: rgba(0, 0, 0, 0.2); }

.offer-box-invite {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-left-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(var(--accent-rgb), 0.04);
}

.offer-box-invite strong { font-size: 15px; }

.offer-box-invite p {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    max-width: 52ch;
}

.offer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.offer-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.5);
}

.offer-chips {
    display: flex;
    gap: 6px;
    flex: 1;
}

.offer-chip {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(var(--accent-rgb), 0.1);
    color: #24508f;
}

.offer-title {
    margin: 0 0 6px;
    font-size: 17px;
}

.offer-note {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    max-width: 68ch;
}

.offer-form {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.offer-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.offer-form input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background-color: var(--surface);
    min-width: 150px;
}

.offer-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.offer-form-submit {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.offer-form-submit:hover { background-color: #24508f; }

.offer-matches {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offer-match-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.offer-match-engine {
    font-size: 13px;
    font-family: "JetBrains Mono", monospace;
    color: rgba(0, 0, 0, 0.55);
}

.offer-match-text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.offer-match-source {
    font-size: 13px;
    color: var(--accent);
    /* Iconița sursei lângă nume, ca în lista de păreri. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.viewing-item-source a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.offer-match-more {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
}

/* The sentence that keeps the block from reading as a verdict on the car. */
.offer-caveat {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    max-width: 68ch;
}

/* Said under the search box when part of what was typed describes the offer
   rather than the car. */
.search-offer-note {
    margin: 10px auto 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    max-width: 60ch;
}

.search-offer-note strong { color: #24508f; }

/* ── Ce măsoară scorul ──────────────────────────────────────────────────────
   Folded away by default: someone who trusts the number should not have to read
   a lecture, and someone who does not trust it needs all of this at once. */
.score-explainer {
    margin-top: 12px;
    font-size: 13px;
}

.score-explainer summary {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.score-explainer summary:hover { color: var(--accent); }

.score-explainer-body {
    margin: 10px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    max-width: 70ch;
}

.score-explainer-body dt {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.score-explainer-body dd {
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

@media (max-width: 620px) {
    .score-explainer-body {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .score-explainer-body dd { margin-bottom: 10px; }
}

/* The rows of the comparison that hold no figure, because no figure exists. */
.compare-unknown td {
    color: rgba(0, 0, 0, 0.45);
    font-style: italic;
}

.compare-caveat {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* ── Agenda vizionării ──────────────────────────────────────────────────────
   The one page meant to leave the screen: it is read on a phone in a car park or
   printed and carried, so it is a single column of large tap targets with the
   source of every question kept next to it. */
.viewing-head {
    margin-bottom: 24px;
}

.viewing-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.viewing-head h1 {
    margin: 6px 0 4px;
}

.viewing-car {
    margin: 0;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.6);
}

.viewing-intro {
    margin: 12px 0 0;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.72);
}

.viewing-offer {
    color: #24508f;
    font-weight: 500;
}

.viewing-warning {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-left: 4px solid #d29922;
    border-radius: 6px;
    background-color: rgba(210, 153, 34, 0.08);
    font-size: 14px;
}

.viewing-tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.viewing-progress {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.viewing-print {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.viewing-print:hover { background-color: var(--surface-hover); }

.viewing-offer-link {
    font-size: 14px;
    color: var(--accent);
}

.viewing-group { margin-bottom: 28px; }

.viewing-group-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.5);
    margin: 0 0 10px;
}

.viewing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.viewing-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
}

/* Ticked items stay legible rather than greying out: on paper a faded line is
   just a line you cannot read, and the point is to see what you already asked. */
.viewing-item-done {
    background-color: rgba(var(--accent-2-rgb), 0.06);
    border-color: rgba(var(--accent-2-rgb), 0.35);
}

.viewing-item-label {
    display: flex;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
}

.viewing-item-label input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent-2);
}

.viewing-item-label > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.viewing-item-title {
    font-size: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.viewing-item-count {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.6);
}

.viewing-item-ask {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.7);
}

.viewing-item-quote {
    font-size: 14px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.6);
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.viewing-item-source {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.viewing-item-source a { color: var(--accent); }

.viewing-caveat {
    margin-top: 28px;
    padding: 14px 16px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
}

.offer-next {
    display: inline-block;
    margin-top: 14px;
    font-weight: 500;
    color: var(--accent);
}

/* Printed, this is a form to fill in by hand: the site's furniture goes away and
   the boxes stay, because half the people using it will tick them with a pen. */
@media print {
    .nav,
    .site-footer,
    .no-print {
        display: none !important;
    }

    body, .content { background: #fff; }

    .viewing-item {
        break-inside: avoid;
        border-color: #999;
    }

    .viewing-item-done { background: none; }

    .viewing-item-source a { text-decoration: none; color: inherit; }

    .viewing-caveat { border: 1px solid #999; background: none; }
}

/* ── Pagina principală, după propunerea lui George ──────────────────────────
   Ported from the prototype rather than re-interpreted: the sizes, weights and
   colours below are his, so the built page and the proposal can be held side by
   side. Everything is scoped under .landing-page - the class names are generic
   enough ("step", "primary", "hint") that loose versions would leak into every
   other page on the site. */
body:has(.landing-page) #app,
body:has(.landing-page) .nav,
body:has(.landing-page) .site-footer-inner {
    max-width: 1080px;
}

.landing-page {
    padding-top: 4px;
}

.landing-page .muted { color: rgba(0, 0, 0, 0.6); }
.landing-page .teal { color: #14806f; }

.landing-page .eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 8px;
}

.landing-page .hint {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    margin-top: 12px;
}

.landing-page .text-link {
    color: var(--accent);
    font-size: 14px;
    display: inline-flex;
    padding-block: 8px;
    min-height: 36px;
}

.landing-page .primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    white-space: normal;
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    cursor: pointer;
}

/* ── Hero ── */
.landing-warm {
    isolation: isolate;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    padding: 40px 32px;
    background: linear-gradient(125deg, #2050a0, #2f6fdb 65%, #287892);
    border-radius: 20px;
}

/* The WebGL field draws over this gradient; when it cannot, the gradient is the
   design rather than a placeholder for it. */
.hero-shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.landing-copy h1 {
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
    max-width: 560px;
    /* Evens out the rag. Keeping "s-o cumperi" whole fixed the hanging hyphen but
       left a short middle line on a phone; this spreads the words so the lines come
       out closer in length. Ignored by browsers that do not know it, which is fine -
       they get exactly what they got before. */
    text-wrap: balance;
}

.landing-copy .subtitle {
    color: #e6efff;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 28px;
}

.landing-search label {
    color: #fff;
    font-size: 14px;
    display: block;
}

.landing-search .query-row {
    display: flex;
    position: relative;
    gap: 8px;
    margin: 8px 0 12px;
}

.landing-search .query-row input {
    flex: 1;
    width: 0;
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid #fff;
    border-radius: 6px;
    min-height: 52px;
    padding: 12px;
    font: inherit;
    font-size: 13px;
}

.landing-search .query-row .primary {
    background: #142c51;
    border-color: #142c51;
    padding-inline: 20px;
    min-height: 52px;
}

.landing-search .query-row .primary:hover { background: #0e213f; }
.landing-search .query-row .primary:active { background: #091831; }

.landing-search .hint {
    font-size: 12px;
    color: #e1ebfc;
    margin: 0 0 16px;
}

.landing-search .query-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #e1ebfc;
    font-size: 12px;
}

.landing-search .query-examples button {
    background: #ffffff10;
    border: 1px solid #ffffff70;
    color: #fff;
    border-radius: 20px;
    padding: 8px 12px;
    min-height: 40px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.landing-search .query-examples button:hover { background: #ffffff25; }
.landing-search .query-examples button:active { background: #ffffff40; }

.landing-search .search-source-note {
    text-align: left;
    color: #e1ebfc;
    font-size: 12px;
    line-height: 1.8;
    margin-top: 24px;
}

.landing-search .search-source-note > span {
    color: #a5e3d5;
    font-weight: 700;
}

.landing-copy :focus-visible { outline-color: #fff; }
.landing-search input:focus-visible { outline-color: #bce9e4; outline-offset: 3px; }

/* ── Sugestiile de sub căutare ── */
.landing-page .search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px #142c5133;
    max-height: 320px;
    overflow: auto;
}

.landing-page .search-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    min-height: 64px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.landing-page .search-option strong { font-size: 14px; display: block; }
.landing-page .search-option small { font-size: 12px; color: rgba(0, 0, 0, 0.6); display: block; }
.landing-page .search-option:hover,
.landing-page .search-option[aria-selected="true"] { background: #edf4fd; }
.landing-page .search-option:active { background: #dbe9fa; }

.landing-page .option-action {
    font-size: 12px;
    color: #245fbd;
    white-space: nowrap;
}

.landing-search .search-summary {
    padding: 12px 16px;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    background: #f5f7fa;
}

.landing-page .search-no-match { padding: 16px; font-size: 13px; }
.landing-page .search-no-match p { font-size: 12px; color: rgba(0, 0, 0, 0.6); margin: 8px 0 0; }

/* ── Cardul cu exemplul real ── */
.landing-sample {
    background: #fff;
    border: 1px solid #dce5e9;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 8px 24px #12233b1a;
    color: rgba(0, 0, 0, 0.87);
    /* Citatul e ales la întâmplare din păreri de pe forum, unde apar lucruri ca
       "temperatura100-105grade...mentionez". Un cuvânt așa trebuie să se poată rupe. */
    overflow-wrap: anywhere;
}

/* O coloană de grilă nu se îngustează sub lățimea conținutului ei decât dacă i se
   dă voie - altfel un singur rând încăpățânat din card lățește tot blocul albastru. */
.landing-warm > * {
    min-width: 0;
}

/* Titlul și eticheta sursei împart un rând doar cât încap amândouă. Un canal cu
   nume lung ("Auto Master Chef By Mihai Popescu") lua tot rândul pe telefon, iar
   titlul, lăsat să se rupă oriunde, ajungea o coloană cu câte o literă. Acum
   titlul nu se rupe niciodată, eticheta trece dedesubt când nu mai e loc, iar un
   nume care nu încape nici singur pe rând se termină cu „…”. */
.sample-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    align-items: center;
}

.sample-top .eyebrow { white-space: nowrap; }

.sample-top .source-chip-link {
    max-width: 100%;
    min-width: 0;
}

.source-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sample-top .eyebrow { font-size: 10px; letter-spacing: 0.06em; margin: 0; }

.source-chip {
    font-size: 10px;
    color: #14806f;
    background: #eaf7f2;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Când chip-ul e chiar linkul către sursă. Rămâne verde, nu devine albastru:
   culoarea aia spune "de aici vine relatarea", iar dacă ar trece în albastrul
   linkurilor ar arăta ca încă un buton de navigare prin site. Săgeata spune că
   duce afară. */
.source-chip-link {
    text-decoration: none;
    font-weight: 600;
    /* Iconița sursei (logo YouTube sau bulele de forum) stă pe același rând cu
       numele, centrată pe înălțimea literelor mici ale etichetei. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.source-chip-link .source-icon { flex-shrink: 0; }

.source-chip-link:hover,
.source-chip-link:focus-visible {
    background: #d8f0e7;
    text-decoration: underline;
}

.sample-model {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}

.sample-model { color: inherit; text-decoration: none; }
.sample-model:hover h2,
.sample-model:focus-visible h2 { color: #218b76; text-decoration: underline; }
.sample-model h2 { font-size: 20px; margin: 0 0 4px; }
.sample-model p { font-size: 12px; color: #626975; margin: 0; }

.sample-art { width: 100px; color: #218b76; flex-shrink: 0; }
.sample-art svg { display: block; width: 100%; }

.sample-symptom {
    background: var(--bg);
    border-radius: 8px;
    padding: 16px;
}

.sample-symptom .eyebrow { font-size: 10px; margin: 0 0 4px; }
.sample-symptom h3 { font-size: 16px; margin: 0 0 8px; }
.sample-symptom p { font-size: 12px; line-height: 1.7; color: #626975; margin: 0; }

.sample-question {
    border-left: 3px solid var(--accent-2);
    padding-left: 12px;
    margin: 20px 0 12px;
}

.sample-question .eyebrow { font-size: 10px; margin-bottom: 4px; }
.sample-question p { font-size: 13px; color: #344754; line-height: 1.7; margin: 0; }

.landing-sample > .text-link { font-size: 12px; font-weight: 600; }

.sample-source {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 4px;
}

.sample-source .text-link { font-size: 11px; color: #626975; min-height: 36px; }

/* ── Rezultatele căutării, sub hero ── */
.landing-results { margin-top: 32px; }

/* ── Explorează modelele ── */
.landing-models { margin-top: 40px; }

.landing-models .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.landing-models h2 { font-size: 22px; line-height: 1.35; font-weight: 700; margin: 0 0 8px; }
.landing-models .muted { font-size: 14px; margin: 0; }
.landing-models .section-head > .text-link { font-size: 13px; white-space: nowrap; }

.landing-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.landing-model-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none !important;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-model-card:hover { border-color: #9bb6d6; box-shadow: 0 4px 16px #17233514; }
.landing-model-card:active { background: #f0f4f8; }

.landing-model-card .model-art {
    background: #f2f5f8;
    color: var(--car-ink);
    border-radius: 8px;
    padding: 8px 24px;
    margin-bottom: 12px;
}

.model-art svg { display: block; width: 100%; height: 80px; }

.model-card-copy > .eyebrow { font-size: 10px; margin-bottom: 4px; }

.model-card-copy h3 {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
}

.model-card-copy h3 > span { color: var(--accent); }
.model-card-copy > p { font-size: 12px; color: #626975; margin: 0 0 12px; }

.model-count {
    font-size: 11px;
    color: #14806f;
    background: #eef8f4;
    border-radius: 5px;
    padding: 4px 8px;
    display: inline-block;
}

.landing-model-note {
    font-size: 11px;
    color: #626975;
    margin-top: 12px;
    line-height: 1.7;
}

/* ── Cum funcționează ── */
.landing-how { margin-top: 40px; }
.landing-how h2 { font-size: 22px; line-height: 1.35; font-weight: 700; margin: 0 0 8px; }
.landing-how > .muted { font-size: 14px; margin: 0; }

.landing-how .three-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    padding-top: 24px;
    gap: 24px;
    margin-top: 20px;
}

.landing-how .step { border: 0; border-radius: 0; padding: 0; }

.landing-how .step-number {
    background: transparent;
    color: var(--accent);
    width: auto;
    height: auto;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    font-weight: 700;
}

.landing-how .step h3 { margin: 8px 0; font-size: 16px; }
.landing-how .step p { font-size: 13px; line-height: 1.8; color: rgba(0, 0, 0, 0.6); margin: 0; }

/* ── Limitele, spuse pe prima pagină ── */
.landing-limits {
    background: #f6f8fb;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-top: 40px;
}

.landing-limits h2 { font-size: 20px; max-width: 850px; margin: 0 0 8px; }
.landing-limits > p,
.landing-limits details p { font-size: 14px; color: #5b626e; line-height: 1.7; }
.landing-limits details { max-width: 760px; }

.landing-limits summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
    padding: 8px 0;
    min-height: 40px;
}

.landing-coverage {
    font-size: 12px;
    color: #626975;
    margin-top: 24px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .landing-warm { gap: 24px; padding: 32px 24px; }
    .landing-copy h1 { font-size: 36px; }
    .sample-model { gap: 12px; }
    .sample-art { width: 72px; }
    .landing-sample { padding: 20px; }
    .landing-search .query-row { flex-wrap: wrap; }
    .landing-search .query-row input { flex-basis: 100%; }
    .landing-search .query-row .primary { width: 100%; }
}

@media (max-width: 760px) {
    .landing-page { padding-top: 0; }
    .landing-warm { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; border-radius: 16px; }
    .landing-copy h1 { font-size: 32px; margin-bottom: 16px; }
    .landing-copy .subtitle { font-size: 14px; margin-bottom: 24px; }
    .landing-search .query-row input { font-size: 13px; padding: 12px; min-height: 48px; }
    .landing-search .query-row .primary { min-height: 48px; }
    .landing-search .query-examples span { flex-basis: 100%; }
    .landing-search .query-examples button { font-size: 11px; }
    .landing-search .search-source-note { font-size: 11px; margin-top: 20px; }
    .landing-sample { padding: 20px; }
    .sample-art { width: 84px; }
    .sample-model h2 { font-size: 18px; }
    .sample-model p { font-size: 11px; }
    .landing-models { margin-top: 32px; }
    .landing-models .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .landing-model-grid { grid-template-columns: 1fr; gap: 12px; }
    .landing-model-card {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 12px;
    }
    .landing-model-card .model-art { padding: 4px; margin: 0; }
    .model-art svg { height: 64px; }
    .model-card-copy h3 { font-size: 14px; }
    .model-card-copy > p { font-size: 11px; margin-bottom: 8px; }
    .model-count { font-size: 10px; padding: 4px 6px; }
    .landing-how { margin-top: 32px; }
    .landing-how .three-columns { grid-template-columns: 1fr; gap: 24px; }
    .landing-limits { padding: 20px; margin-top: 32px; }
    .landing-limits h2 { font-size: 18px; }
}

@media (max-width: 360px) {
    .landing-warm { padding: 24px 16px; }
    .landing-copy h1 { font-size: 30px; }
    .landing-sample { padding: 16px; }
    .sample-top { gap: 8px; }
    .sample-top .eyebrow { font-size: 9px; }
    .source-chip { font-size: 9px; padding: 4px 6px; }
    .sample-art { width: 64px; }
    .sample-model { gap: 8px; }
    .sample-model h2 { font-size: 16px; }
    .sample-model p { font-size: 10px; }
    .sample-symptom { padding: 12px; }
    .landing-sample > .text-link { font-size: 11px; }
    .model-card-copy h3 { font-size: 13px; }
    .landing-model-card { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-model-card { transition: none; }
}

/* ── Headerul propus de George ──────────────────────────────────────────────
   Three destinations instead of five links and a button. His sizes: the wordmark
   grows to 24px so the name reads before anything beside it does, and the nav
   drops to 13px so it stops competing with it. */
.nav.buyer-header {
    padding-block: 16px;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
}

.buyer-header .brand img,
.buyer-header .brand .logo svg { box-shadow: none; }

.buyer-header .logo-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.buyer-header .product-nav {
    display: flex;
    margin-left: auto;
    font-size: 13px;
    gap: 22px;
}

.buyer-header .product-nav a {
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.75);
}

.buyer-header .product-nav a:hover { color: var(--accent); }

/* Shown only where it is needed. On desktop the three links sit out in the open,
   so a button that opens them would be a lid on an open box. */
.header-menu { display: none; }

@media (max-width: 760px) {
    .nav.buyer-header { flex-wrap: wrap; gap: 0; row-gap: 12px; }

    .header-menu {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        padding: 8px;
        color: #283749;
        cursor: pointer;
    }

    .buyer-header .product-nav {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        margin: 0;
        display: none;
    }

    .buyer-header .product-nav-open { display: flex; }

    .buyer-header .product-nav a {
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
        min-height: 44px;
    }
}

/* The example card carries the brand's own mark when we hold one. The drawing
   stretches to fill its slot; a logo keeps the box it has everywhere else on the
   site, so the same mark is the same size wherever you meet it. */
.sample-art-logo { width: auto; }
.sample-art-logo svg { width: auto; height: auto; }

/* The art panel holds either a drawing that fills it or a logo that sits in the
   middle of it, and the three cards have to stay the same height either way - a
   grid where one card is shorter than its neighbours reads as a loading state. */
.landing-model-card .model-art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}

/* On the tinted panel the logo drops its own box: a bordered square inside a
   bordered square is one frame too many. */
.model-art .brand-logo {
    width: auto;
    height: auto;
    background: none;
    border: 0;
}

.model-art .brand-logo svg,
.model-art .brand-logo img {
    width: auto;
    height: auto;
}

@media (max-width: 760px) {
    /* Matching the 64px the drawing drops to on a phone. */
    .landing-model-card .model-art { min-height: 72px; }
}

/* ── Fișa modelului, după propunerea lui George ─────────────────────────────
   The comparison out in the open beside the name. It used to be a thin blue
   link at the end of the breadcrumb, which is where you put something you do
   not expect anyone to click. */
.detail-compare {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.detail-compare:hover {
    background-color: var(--surface-hover);
    color: var(--accent);
}

/* The page ends where the journey does: with what to say at the car. His sizes -
   20px heading, 14px muted line, the action on the right. */
.next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    margin-top: 32px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--bg);
}

.next-step-eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 8px;
}

.next-step h2 {
    font-size: 20px;
    margin: 0 0 8px;
}

.next-step p {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    max-width: 60ch;
}

.next-step-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
}

.next-step-button:hover { background-color: #245cb9; border-color: #245cb9; }

@media (max-width: 760px) {
    /* Without the wrap the button has nowhere to go: flex-basis on a row that
       cannot break is only a suggestion, so on a 375px phone the button stayed
       beside the name and "Toyota Camry" broke around it. It gets its own line. */
    .detail-title {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .detail-title > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .detail-compare {
        order: 3;
        margin-left: 0;
        align-self: flex-start;
        flex-basis: 100%;
        justify-content: center;
    }

    .next-step {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .next-step-button { width: 100%; }
}

/* ── Explorează ─────────────────────────────────────────────────────────────
   The filters used to live under the homepage search, appearing only once you
   had typed something - which is the one moment you do not need them. Here they
   are the page, with what they cannot promise said next to them. */
.discovery-control {
    padding: 20px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 28px;
}

.discovery-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.discovery-row + .discovery-row { margin-top: 12px; }

.discovery-label {
    min-width: 110px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.discovery-control .hint {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    max-width: 70ch;
}

.browse-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.browse-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.browse-row:last-child { border-bottom: 0; }
.browse-row:hover { background-color: var(--surface-hover); }

.browse-name h3 {
    margin: 0 0 2px;
    font-size: 17px;
}

.browse-name p {
    margin: 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
}

.eyebrow-small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.45);
}

.browse-gen {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.browse-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.browse-action {
    font-size: 13px;
    color: var(--accent);
    white-space: nowrap;
}

/* Said as our gap, not as a fact about the cars. */
.explore-note {
    padding: 20px 24px;
    background-color: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
}

.explore-note p {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.explore-coverage,
.explore-brands {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 16px;
    max-width: 70ch;
}

.explore-brands a { color: var(--accent); }

@media (max-width: 760px) {
    .discovery-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .discovery-label { min-width: 0; }

    .browse-row {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 14px 16px;
    }

    .browse-action { grid-column: 2 / -1; }
}

/* iOS zooms the page in whenever you focus a text field smaller than 16px, and it
   does not zoom back out afterwards - you are left on a magnified page with the
   results somewhere off the right edge. The design calls for 13px, so the field is
   13px everywhere a pointer is precise and 16px where it is a finger, which is the
   only place the zoom ever happened. */
@media (pointer: coarse) {
    .landing-search .query-row input,
    .offer-form input,
    .search-bar-input {
        font-size: 16px;
    }
}

/* The list says out loud that it is filtered, and how to stop being. */
.review-filter-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: rgba(var(--accent-rgb), 0.07);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.review-filter-note strong { color: #24508f; }

/* ── Aer sub header ─────────────────────────────────────────────────────────
   The header rule sat directly on top of the first card: #app had no top
   padding, so the only gap was whatever margin the first element happened to
   carry. The proposal gives the page 40px, and 24px on the landing where the
   hero is a coloured block that needs less. */
.content {
    padding-top: 40px;
}

body:has(.landing-page) .content {
    padding-top: 24px;
}

/* ── Selectul de motorizare ─────────────────────────────────────────────────
   Same box as the year beside it. A select left to the browser's own metrics
   stood a few pixels shorter, which reads as two different kinds of control. */
.offer-form select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background-color: var(--surface);
    color: inherit;
    min-width: 150px;
    height: 38px;
}

.offer-form input {
    height: 38px;
}

/* Plug-in hybrid is its own thing: it has a socket, a hybrid does not, and
   neither is an EV. */
.fuel-plugin {
    background-color: rgba(var(--accent-2-rgb), 0.12);
    color: #0f6f5c;
}

/* The evidence behind a checklist card is one tap away, so the card says it is
   something you can press. */
.checklist-card-source-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}

.checklist-card-source-link:hover { text-decoration-color: currentColor; }

/* ── Starea de încărcare ────────────────────────────────────────────────────
   "Se încarcă..." was one grey line on an empty page. Two things replace it: a
   skeleton where the shape of what is coming is known, and the site's own mark,
   larger, where it is not. */
.loading-car {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 0;
}

/* A short bright segment travels the length of the roofline and lands back where
   it started, because the dash and the gap add up to the path's own length (172).
   Animated on stroke-dashoffset rather than on a transform: this is the property
   that behaves the same on a phone as it does on a desktop, which the last version
   of this animation learned the hard way. */
@keyframes loading-trace {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -172; }
}

.loading-trace {
    animation: loading-trace 1.6s linear infinite;
}

/* The wheel breathes on the same 1.6s as the light overhead, half a beat behind,
   so the two read as one thing rather than as two timers. */
@keyframes loading-hub {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.loading-hub {
    animation: loading-hub 1.6s ease-in-out infinite;
    animation-delay: -0.8s;
}

/* Not a heading and not a caption - the size of ordinary text, so it reads as the
   page talking rather than as a label on the drawing. */
.loading-message {
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 15px;
}

/* ── Schelete ───────────────────────────────────────────────────────────────
   Grey blocks in the shape of what is arriving. Nothing moves when the data
   lands, which is the whole point: no layout shift, and the wait reads as
   "arriving" rather than "broken". */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.skeleton {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
}

.skeleton-line,
.skeleton-block,
.skeleton-logo,
.skeleton-ring,
.skeleton-badge,
.skeleton-chip {
    display: block;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 6px;
}

.skeleton-line { margin-bottom: 10px; }

.skeleton-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    background-color: var(--surface);
}

.skeleton-badge { width: 84px; height: 22px; border-radius: 999px; margin-bottom: 18px; }

.skeleton-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.skeleton-title > div { flex: 1; }
.skeleton-title .skeleton-line:last-child { margin-bottom: 0; }

.skeleton-logo { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; }

.skeleton-specs {
    display: flex;
    gap: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.skeleton-specs .skeleton-line { flex: 1; margin: 0; }

.skeleton-score { display: flex; align-items: center; gap: 28px; }
.skeleton-ring { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; }
.skeleton-score-body { flex: 1; }
.skeleton-score-body .skeleton-line:last-child { margin-bottom: 0; }

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.skeleton-block { border-radius: 10px; }

.skeleton-rows {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 18px;
    overflow: hidden;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.skeleton-row:last-child { border-bottom: 0; }
.skeleton-row .skeleton-logo { width: 34px; height: 34px; }
.skeleton-row-text { flex: 1; }
.skeleton-row-text .skeleton-line:last-child { margin-bottom: 0; }
.skeleton-chip { width: 44px; height: 26px; border-radius: 999px; flex-shrink: 0; }

/* ── Scheletul primei pagini ────────────────────────────────────────────────
   The front page drawn as itself. The furniture is real - the hero keeps its
   gradient, the search box its shape, the cards their borders - and only the
   words are grey, so the page fills in rather than appears. */
.skeleton-warm {
    /* The hero's own gradient, not a grey rectangle standing in for it. It is
       already on screen the moment the CSS is, so there is nothing to wait for. */
    align-items: start;
}

/* On the gradient, a light placeholder. The 7%-black used everywhere else is
   invisible against a mid blue.
   Scoped to the copy column rather than to the whole hero: the example card sits
   in the hero too, and it is white, so the first version of this rule painted its
   placeholders white on white and left it looking like an empty box. */
.skeleton-warm .landing-copy .skeleton-line,
.skeleton-warm .landing-copy .skeleton-chip {
    background-color: rgba(255, 255, 255, 0.22);
}

.skeleton-gap { height: 12px; }

/* The search box keeps its white field and its button: it is the thing a reader
   came here to use, and its shape is the page's landmark. */
.skeleton-searchbox {
    margin-top: 26px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.skeleton-query {
    display: flex;
    gap: 10px;
    align-items: center;
}

.skeleton-input {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
}

.skeleton-button {
    width: 96px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.skeleton-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.skeleton-chips .skeleton-chip { width: 92px; height: 30px; }

.skeleton-sample {
    margin: 0;
    background: #fff;
}

.skeleton-sample-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.skeleton-sample-top .skeleton-line { margin: 0; }
.skeleton-sample .skeleton-specs { margin-top: 18px; }

.skeleton-section { margin-top: 36px; }

.skeleton-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.skeleton-model { margin: 0; }
.skeleton-model .skeleton-logo { margin-bottom: 18px; }
.skeleton-model .skeleton-line:last-child { margin-bottom: 0; }

/* One column on a phone, the way the real hero stacks. */
@media (max-width: 860px) {
    .skeleton-warm { grid-template-columns: minmax(0, 1fr); }
}

/* Somebody who asked their phone for less motion gets less motion - the road
   stops sliding, the wheels stop turning. But a frozen drawing reads as a page
   that has crashed, so what is left is a slow fade: no movement, still alive.
   Worth knowing that an iPhone answers "reduce" whenever Low Power Mode is on,
   so this is not a rare branch - it is what a phone on 15% battery sees.

   Declared out here rather than inside the query: @keyframes nested in @media is
   legal and is also the kind of thing Safari has historically dropped. */
@keyframes loading-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-trace,
    .loading-hub {
        animation: none;
    }

    /* The light stops travelling, so the dim copy underneath would be all that is
       left of the roofline. Shown whole instead, or the car loses its roof. */
    .loading-trace {
        stroke-dasharray: none;
    }

    .loading-car svg,
    .skeleton {
        animation: loading-breathe 2.4s ease-in-out infinite;
    }
}

/* Announced, not shown: the car says it on screen, this says it out loud. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Bannerul de consimțământ ───────────────────────────────────────────────
   Jos, peste conținut, fără să blocheze pagina: întrebarea contează, dar nu mai
   mult decât motivul pentru care a venit omul aici. Cele două butoane arată la
   fel — un banner în care „Accept" e colorat și „Refuz" e un link gri nu e chiar
   o întrebare, iar argumentul acestui site e tocmai că nu împinge pe nimeni. */
.consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18);
}

.consent-copy { flex: 1 1 320px; }

.consent-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.consent-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
}

/* Subliniat explicit: e singurul link din banner, ceruit de lege, iar în textul
   gri din jur arăta exact ca restul frazei. */
.consent-copy p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-copy p a:hover { color: var(--accent); }

.consent-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.consent-button {
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.consent-button:hover { background: var(--surface-hover); }

.consent-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Pe telefon butoanele trec pe toată lățimea: la 360px două butoane înghesuite
   lângă text sunt două ținte de atins greșit. */
@media (max-width: 520px) {
    .consent-banner { gap: 12px; padding: 14px; }
    .consent-actions { width: 100%; }
    .consent-button { flex: 1; padding: 11px 12px; }
}

/* Alegerea de pe pagina de termeni. Aceleași butoane ca în banner, fiindcă e
   aceeași întrebare pusă a doua oară. */
.analytics-choice {
    margin: 16px 0 8px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.analytics-choice p { margin: 0 0 12px; }
.analytics-choice .hint { margin: 12px 0 0; font-size: 13px; }

.analytics-choice .consent-button[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Ținut întreg pe un rând. Folosit pe "înainte s-o cumperi" din titlul paginii
   principale: rupt între rânduri, "s-" rămâne atârnat la capăt cu cratimă cu tot
   și se citește ca o greșeală de tipar. */
.nowrap { white-space: nowrap; }

/* ── Scheletul paginii de comparare ─────────────────────────────────────────
   Ultimul ecran care mai arăta mașinuța. Forma lui e cunoscută — trei selectoare
   peste un tabel — deci se poate desena, iar desenul înseamnă că nimic nu sare
   când sosesc datele. */
.skeleton-compare-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

/* Exact înălțimea selectului real, ca rândul de sub el să nu se mute. */
.skeleton-select {
    display: block;
    height: 44px;
    border-radius: 6px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
}

.skeleton-compare-table {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.skeleton-compare-head,
.skeleton-compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
}

.skeleton-compare-head {
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border);
}

.skeleton-compare-row + .skeleton-compare-row {
    border-top: 1px solid var(--border);
}

/* Liniile au margine de jos din .skeleton-line ca să se stivuiască; aici sunt
   singure în celulă, iar marginea ar împinge rândul strâmb. */
.skeleton-compare-head .skeleton-line,
.skeleton-compare-row .skeleton-line {
    margin-bottom: 0;
}

/* ── Scheletul paginii de recomandare ───────────────────────────────────────
   Bara de filtre își păstrează cutia și cele patru controale la înălțimea reală,
   fiindcă e primul lucru pe care pui mâna și nu trebuie să se miște sub ea. */
.skeleton-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;
    margin: 20px 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
}

.skeleton-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}

.skeleton-filter .skeleton-line { margin-bottom: 0; }

/* Cursorul de scor: mai scund decât un select, ca cel real. */
.skeleton-range {
    display: block;
    height: 20px;
    border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
}

/* ── Scheletele agendei de vizionare și ale formularului ────────────────────
   Ultimele două ecrane care mai arătau mașinuța. */
.skeleton-viewing-group {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.skeleton-viewing-group > .skeleton-line { margin-bottom: 16px; }

.skeleton-viewing-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
}

.skeleton-viewing-item + .skeleton-viewing-item { border-top: 1px solid var(--border); }

/* Pătratul de bifat, la dimensiunea lui reală, ca lista să nu se mute. */
.skeleton-tick {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 4px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
}

.skeleton-viewing-text { flex: 1; }
.skeleton-viewing-text .skeleton-line:last-child { margin-bottom: 0; }

.skeleton-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    max-width: 560px;
}

.skeleton-form .skeleton-filter { min-width: 0; }

/* Caseta de text e partea cea mai mare a formularului; desenată la înălțimea ei,
   altfel butonul de trimitere sare în sus când sosesc datele. */
.skeleton-textarea {
    display: block;
    height: 120px;
    border-radius: 6px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
}

/* ── Fișa modelului, citită prima dată ─────────────────────────────────────
   Tot ce urmează servește aceeași idee: o fișă pe care o înțelege din prima și
   cineva care n-a mai fost pe site, și cineva care vrea toate cifrele. Sus stă
   răspunsul; detaliile stau strânse sub titluri care spun deja ce e în ele.

   Două culori pentru două feluri de sursă, peste tot la fel: portocaliu pentru
   ce spun posesorii, albastru pentru registrele oficiale. */
:root {
    --src-owner: #d9822b;
    --src-owner-rgb: 217, 130, 43;
    --src-official: #2f6fdb;
    --src-official-rgb: 47, 111, 219;
}

.mini-bar-official { background-color: var(--src-official); }
.mini-bar-owner { background-color: var(--src-owner); }

/* Casetele strânse și tabul sub antetul fix și bara cu numele modelului: fără
   margine, un link care le deschide le-ar lăsa cu titlul ascuns sub ele. */
.official-card,
.checklist-box,
.tab-bar {
    scroll-margin-top: calc(var(--header-h) + 72px);
}

/* Rândul cu surse, sub scor. "source-pick", nu "source-chip": numele ăla
   era deja al linkului spre sursă de pe prima pagină, iar regulile de aici
   i-au schimbat forma. */
.source-strip {
    margin: 12px 0 20px;
}

.source-strip-lead {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
}

.source-strip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* minmax(0, ...), nu 1fr: altfel o casetă nu se îngustează sub lungimea
       textului ei și iese din ecran pe telefon. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 640px) {
    .source-strip-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.source-pick {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.source-pick-owner { border-left-color: var(--src-owner); }
.source-pick-official { border-left-color: var(--src-official); }

.source-pick:hover {
    background-color: rgba(0, 0, 0, 0.025);
}

.source-pick-title {
    font-size: 14px;
    font-weight: 600;
    color: #111318;
}

.source-pick-title::after {
    content: " →";
    color: rgba(0, 0, 0, 0.35);
}

.source-pick-detail {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
}

.source-pick-empty {
    border-left-color: var(--border);
}

.source-pick-empty .source-pick-title,
.source-pick-empty .source-pick-detail {
    color: rgba(0, 0, 0, 0.4);
}

/* Titlul unei casete strânse: numele mare, dedesubt rândul care spune ce e în
   ea, săgeata în dreapta. Tot rândul se apasă. */
.official-summary,
.checklist-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 28px;
    list-style: none;
    cursor: pointer;
}

.official-summary::-webkit-details-marker,
.checklist-summary::-webkit-details-marker,
.mot-verdict-more > summary::-webkit-details-marker {
    display: none;
}

.official-summary::after,
.checklist-summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(0, 0, 0, 0.45);
    border-bottom: 2px solid rgba(0, 0, 0, 0.45);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

details[open] > .official-summary::after,
details[open] > .checklist-summary::after {
    top: 10px;
    transform: rotate(-135deg);
}

.official-summary-title,
.checklist-summary-title {
    font-size: 15px;
    font-weight: 700;
    color: #111318;
}

.official-summary-teaser,
.checklist-summary-teaser {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.62);
}

.official-body {
    margin-top: 14px;
}

.official-card.official-card {
    padding: 14px 18px;
}

/* Grupele din tabul oficial, spuse în cuvinte. */
.official-group {
    margin: 26px 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.5);
}

.tab-intro + .official-group {
    margin-top: 0;
}

/* Barele oficiale, în culoarea sursei. */
.complaint-bar {
    background-color: var(--src-official);
}

/* Lista de verificat, strânsă. */
.checklist-box {
    padding: 14px 18px;
    margin: 16px 0;
}

.checklist-box[open] > .checklist-summary {
    margin-bottom: 12px;
}

.checklist-card-official { border-left: 3px solid var(--src-official); }
.checklist-card-owner { border-left: 3px solid var(--src-owner); }

.checklist-card-source-official { color: #24508f; }
.checklist-card-owner .checklist-card-source { color: #9a5a17; }

/* Verdictul ITP: eticheta în cuvinte în locul indicelui. */
.mot-verdict-chip {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.7);
}

.mot-verdict-bun .mot-verdict-chip { background-color: rgba(30, 142, 95, 0.12); color: #14663f; }
.mot-verdict-mediu .mot-verdict-chip { background-color: rgba(200, 135, 27, 0.14); color: #7a5310; }
.mot-verdict-slab .mot-verdict-chip { background-color: rgba(214, 69, 59, 0.12); color: #a3302a; }

@media (max-width: 480px) {
    .mot-verdict-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.mot-verdict-more {
    margin: 4px 0 10px;
}

.mot-verdict-more > summary {
    width: fit-content;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.mot-verdict-more > summary::after {
    content: " ▾";
}

.mot-verdict-more[open] > summary::after {
    content: " ▴";
}

.mot-verdict-more[open] > summary {
    margin-bottom: 10px;
}

/* Invitația de a scrie, pe un rând: titlu mic și buton. */
.join-cta.join-cta-model {
    margin: 20px 0 4px;
    padding: 14px 18px;
    gap: 16px;
    border-radius: 12px;
}

.join-cta-model .join-cta-title {
    font-size: 16px;
}

.join-cta-model .join-cta-body {
    font-size: 13px;
}

.join-cta-model .join-cta-button {
    padding: 10px 18px;
    font-size: 14px;
}

.join-cta-model::after {
    display: none;
}

@media (max-width: 760px) {
    .join-cta.join-cta-model {
        gap: 12px;
        padding: 14px 16px;
    }
}

/* Filtrul pe motorizare, pe un rând. */
.offer-box.offer-box-invite {
    margin: 16px 0;
    padding: 12px 16px;
    gap: 12px;
}

.offer-box-invite p {
    margin: 0;
    flex: 1 1 260px;
    max-width: none;
}

.offer-box-invite strong {
    font-size: 14px;
    color: #111318;
}

/* Fraza care pune scorul și inspecția cap la cap, chiar sub scor. */
.score-gap {
    margin: -4px 0 14px;
}

/* "Pe scurt" fără text: aceeași casetă, dar stinsă, ca să nu pară un verdict. */
.summary-box-empty {
    background-color: transparent;
    border-style: dashed;
}

.summary-box-empty p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* Originalul englezesc al unei rechemări, strâns sub traducere. */
.recall-original {
    margin-top: 8px;
}

.recall-original > summary {
    width: fit-content;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
}

.recall-original p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
}

/* Lista de bifat de pe fișă, după propunerea v0: un rând pe lucru de verificat,
   căsuța mare cât un deget, progresul sus. Aceleași bife ca pagina de vizionare. */
.viewing-checklist {
    margin: 28px 0 8px;
    scroll-margin-top: calc(var(--header-h) + 12px);
}
.viewing-checklist-title {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}
.viewing-checklist-hint {
    margin: 4px 0 14px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.92rem;
    line-height: 1.45;
}
.viewing-checklist-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}
.viewing-checklist-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.viewing-checklist-progress-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.viewing-checklist-bar {
    display: block;
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: #eceff3;
    overflow: hidden;
}
.viewing-checklist-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1f9d55;
    transition: width 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .viewing-checklist-bar > span { transition: none; }
}
.viewing-checklist-reset {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.viewing-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.viewing-checklist-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.viewing-checklist-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.viewing-checklist-label input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 1px 0 0;
    accent-color: #1f9d55;
    cursor: pointer;
}
.viewing-checklist-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.viewing-checklist-ask {
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.95rem;
}
.viewing-checklist-item.is-done .viewing-checklist-text {
    color: rgba(0, 0, 0, 0.45);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.viewing-checklist-item.is-done .viewing-checklist-ask { color: inherit; }
.viewing-checklist-meta {
    margin: 4px 0 0 36px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.viewing-checklist-meta button,
.viewing-checklist-meta a {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.viewing-checklist-more {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

/* ── Fișa modelului pe secțiuni (după propunerea v0) ────────────────────────
   În locul taburilor: secțiuni una sub alta, fiecare cu titlul ei, și un rând de
   chip-uri care duce la ele. Gândit întâi pentru telefon (375px): carduri albe
   cu margine de 1px, colțuri de 14-16px, culoarea doar pentru ton și verdict. */

:root {
    /* Bara fixă cu numele mașinii și secțiunile, cât ocupă sub antet. */
    --model-bar-h: 104px;
}

.model-section,
.viewing-checklist {
    scroll-margin-top: calc(var(--header-h) + var(--model-bar-h) + 8px);
}

.model-section {
    margin: 36px 0 8px;
}

.model-section-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.model-section-lead {
    margin: 4px 0 14px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.92rem;
    line-height: 1.5;
}

.model-section-title + .video-grid,
.model-section-title + .section-empty {
    margin-top: 14px;
}

.section-empty {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #f3f5f8;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Meniul de secțiuni. Rândul se derulează orizontal doar în interiorul lui. */
.section-nav-list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.section-nav-list::-webkit-scrollbar { display: none; }

.section-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: #111318;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.section-chip:hover { background: var(--surface-hover); }
.section-chip.active {
    border-color: #111318;
    background: #111318;
    color: #fff;
}

.section-nav-inline {
    margin: 20px 0 0;
}

.sticky-model-bar.sticky-model-bar-with-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}
.sticky-model-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.section-nav-sticky .section-chip {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
}

/* Cardul cu scorul: cercul și verdictul pe un rând, explicația dedesubt. */
.score-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.score-card-top {
    display: flex;
    align-items: center;
    gap: 20px;
}
.score-card-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Pe scurt: trei carduri, o idee fiecare. */
.quick-take {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.quick-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.quick-card-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}
.quick-card-verifica .quick-card-icon { background: #e8f0fd; color: var(--accent); }
.quick-card-forte .quick-card-icon { background: #e3f5ea; color: #1e8e5f; }
.quick-card-atentie .quick-card-icon { background: #fde8e7; color: #d6453b; }
.quick-card-body { min-width: 0; }
.quick-card-title {
    margin: 0;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.quick-card-text {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.quick-card-link {
    min-height: 32px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.model-section .summary-box {
    margin: 12px 0 0;
    border-radius: 16px;
}

/* Inspecții: trei carduri, verdictul mare, detaliile strânse. */
.inspect-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inspect-card {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.inspect-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    font-weight: 600;
}
.inspect-card-verdict {
    margin: 8px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111318;
}
.inspect-card-bun .inspect-card-verdict { color: #1a7f53; }
.inspect-card-slab .inspect-card-verdict { color: #c0392f; }
.inspect-card-mediu .inspect-card-verdict { color: #8a5d0c; }
.inspect-card-line {
    margin: 6px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
}
.inspect-card .section-empty { margin-top: 10px; }
.inspect-card .mot-check { margin-top: 10px; }
.inspect-card .review-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.inspect-more {
    margin-top: 6px;
}
.inspect-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.inspect-more > summary::-webkit-details-marker { display: none; }
.inspect-more > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s;
}
.inspect-more[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
    .inspect-more > summary::after { transition: none; }
}

/* Probleme: o listă de bare, apoi rechemările și reclamațiile. */
.known-issues-card,
.recalls-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    scroll-margin-top: calc(var(--header-h) + var(--model-bar-h) + 8px);
}
.known-issues-card .known-issue-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.known-issue-source {
    display: block;
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8rem;
}
.recalls-card { margin-top: 10px; }
.recalls-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.recalls-card-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fde8e7;
    color: #d6453b;
}
.recalls-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.recalls-card-count {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.recalls-card-advice {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f3f5f8;
    font-size: 0.95rem;
    line-height: 1.5;
}
.recalls-card .section-empty { margin-top: 12px; }
#probleme .complaints-box { margin-top: 10px; }

/* Păreri: tonul ca chip-uri, subiectul și ordinea strânse. */
.pros-cons-box {
    margin: 0 0 12px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.pros-cons-box > summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    padding: 8px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.pros-cons-box > summary::-webkit-details-marker { display: none; }
.pros-cons-teaser {
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
    font-weight: 500;
}
.pros-cons-box[open] { padding-bottom: 12px; }

.review-controls { margin: 0 0 12px; }
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: #111318;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.chip.active {
    border-color: #111318;
    background: #111318;
    color: #fff;
}
.review-more-filters { margin-top: 6px; }
.review-more-filters > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}
.review-more-filters .tag-filters,
.review-more-filters .sort-row {
    flex-wrap: wrap;
    margin: 6px 0 0;
}
.review-active-filter {
    margin: 8px 0 0;
    font-size: 0.92rem;
}

.review-card {
    border-left-width: 5px;
    border-radius: 16px;
}
.review-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}
.review-footer .review-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.review-footer .review-date {
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.8rem;
}

/* Invitația, ca un card închis la capătul părerilor. */
.join-cta.join-cta-model {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 20px 0 0;
    padding: 20px;
    border-radius: 16px;
}
.join-cta-model .join-cta-title { font-size: 1.15rem; }
.join-cta-model .join-cta-body { font-size: 0.95rem; }
.join-cta-model .join-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
}
.model-section .toggle-empty { margin-top: 10px; }

@media (min-width: 761px) {
    .quick-take {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .join-cta.join-cta-model {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 760px) {
    .score-card-top { gap: 16px; }
    .score-card .score-ring,
    .score-card .score-ring svg {
        width: 96px;
        height: 96px;
    }
    .score-card .score-ring-number { font-size: 30px; }
    .score-card .score-card-verdict { font-size: 19px; }
}

.review-card.review-ro { box-shadow: none; }
.review-more-filters { margin-top: 2px; }
.review-more-filters > summary { min-height: 44px; }

@media (max-width: 760px) {
    /* Pe telefon poza spune deja marca; sigla mare de lângă titlu doar împingea
       scorul cu un ecran mai jos. */
    .model-hero-with-photo .detail-title > .brand-logo { display: none; }
    .model-hero .detail-title { flex-wrap: wrap; gap: 8px 14px; }
    /* Titlul ia tot rândul, ca butonul să coboare mereu sub el. Altfel, la un nume
       scurt (BMW X5) urca în dreapta titlului, iar la unul lung stătea dedesubt. */
    .model-hero .detail-title > div { flex-basis: 100%; }
    .model-hero .detail-compare {
        width: auto;
        flex-basis: auto;
        min-height: 44px;
        margin: 0;
        padding: 8px 14px;
    }
}

/* „Au scris recent pe Fiabil.ro”, pe prima pagină, sub primul ecran. */
.recent-writers {
    margin-top: 40px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.recent-writers-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}
.recent-writers-lead {
    margin: 4px 0 12px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.92rem;
    line-height: 1.5;
}
.recent-writers-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.recent-writer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.recent-writer-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f0fd;
    color: var(--accent);
    font-weight: 700;
}
.recent-writer-text {
    min-width: 0;
    font-size: 0.98rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.recent-writer-text a {
    color: var(--accent);
    text-decoration: none;
}
.recent-writer-when {
    display: block;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.82rem;
}
.recent-writers + .join-cta { margin-top: 12px; }

.viewing-checklist-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

/* Rezumatul scris de mână, strâns sub cardurile din „Pe scurt”. */
.summary-more { margin-top: 6px; }
.summary-more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.summary-more .summary-box { margin-top: 4px; }
.known-issues-card .complaints-more { margin-top: 4px; }

/* Alegerea mașinii în formularul de părere, prin căutare. */
.model-picker-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}
.model-picker input { width: 100%; }
.model-picker-field.has-problem .model-picker input { border-color: #d6453b; }
.model-picker-results {
    margin: 6px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.model-picker-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 8px;
    color: #111318;
    font-size: 15px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.model-picker-option.active,
.model-picker-option:hover { background: #e8f0fd; }
.model-picker-empty {
    margin: 6px 0 0;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: #f3f5f8;
    font-size: 14px;
    line-height: 1.45;
}
.model-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: #f3f7fe;
}
.model-picker-selected-name {
    min-width: 0;
    color: #111318;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.model-picker-change {
    flex: none;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Câmpul de căutare a mașinii în afara formularului (pagina de comparare): aceeași
   înălțime și același chenar ca în formular, unde le dă .admin-form. */
.model-picker input {
    box-sizing: border-box;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    font-family: inherit;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.85);
}
.compare-picker { align-items: start; }

/* Pe iPhone, apăsarea într-un câmp cu literă sub 16px mărește singură pagina, iar
   zoom-ul rămâne și după ce pleci de acolo: întors pe prima pagină de pe Compară
   sau din formular, omul găsea pagina mărită, care se trăgea în lateral. Pe orice
   ecran tactil, câmpurile în care se scrie au deci cel puțin 16px. Selectorii cu
   clasă sunt aici ca regula să bată .admin-form și .compare-picker, care puneau 15px. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .admin-form input:not([type="checkbox"]):not([type="radio"]),
    .admin-form select,
    .admin-form textarea,
    .model-picker input,
    .compare-picker select {
        font-size: 16px;
    }
}

/* Caruselul „Au scris pe Fiabil.ro” de pe prima pagină: butoanele lângă titlu,
   ghilimele mari, contorul lângă nume. */
.recent-writers-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.recent-writers-head .recent-writers-title { min-width: 0; }
.recent-review-controls {
    display: flex;
    flex: none;
    gap: 6px;
}
.recent-review-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: #111318;
    cursor: pointer;
}
.recent-review-btn:hover { border-color: var(--accent); color: var(--accent); }
.recent-review {
    position: relative;
    margin: 4px 0 0;
    padding: 6px 16px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f7f9fc;
}
.recent-review-quote {
    display: block;
    height: 30px;
    margin-top: 10px;
    overflow: hidden;
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}
.recent-review-text {
    margin: 0;
    min-height: 7.75em;
    color: #111318;
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.recent-review-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.recent-review-count {
    flex: none;
    margin-left: auto;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}