:root{
    --bg-start:#000; --bg-mid:#0a0b0c; --bg-end:#1a1c20;
    --ink:#000; --ink-invert:#fff; --muted:#a1a7b3;
    --outline:rgba(255,255,255,.65); --outline-strong:#ffffff;
    --accent:#61a8ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body.app-body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:#fff;background:#000;position:relative;overflow-x:hidden;}
.bg-gradient{position:fixed;inset:0;background:linear-gradient(to bottom, #000 0%, #000 80%, #54525D 100%) !important;z-index:-2}
.bg-watch{
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100vw;
    height: 50vh;                 /* izaberi 40–70vh po ukusu */
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;   /* uvek razvlači na PUNU širinu, zadržava odnos strana */
    z-index: -1;
    pointer-events: none;
}
/* Grid shell: header | content | footer */
.viewport{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.app-header{position:sticky;top:0;z-index:5}
.app-footer{position:sticky;bottom:0;z-index:5;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));backdrop-filter:saturate(120%) blur(6px)}

/* Header brand */
.samsung-wordmark{letter-spacing:.45em;font-weight:900;color:#fff;opacity:.95}
.series{font-size:clamp(22px,5.5vw,44px);font-weight:800;line-height:1.05;margin-top:.25rem}
.ai{font-size:clamp(16px,4vw,28px);opacity:.9}
.sparkles{color:#73a7ff}

/* Center page content; if taller than space, page simply scrolls in the 1fr area */
.page{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;     /* vertikalno u centru kad staje */
    justify-items: stretch;    /* DETALJ: sadržaj zauzima punu širinu */
    padding: 1rem;
}

/* sve neposredne stavke u .page neka budu 100% */
.page > *{ width: 100%; }
.stack{display:flex;flex-direction:column}

/* White input pills */
.field-pill{background:#fff;border:2px solid #fff;color:#000;padding:.5rem 1.25rem;border-radius:9999px;text-align:center;font-weight:600}
.field-pill::placeholder{color:#6b7280}
.field-pill:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(97,168,255,.35)}

/* Option pills (multi) with left black circle + white check */
.segment-fill{display:flex;flex-direction:column;gap:.65rem}
.option-pill{--s:1.65rem;display:flex;align-items:center;gap:.75rem;justify-content:flex-start;width:100%;background:#fff;border:2px solid #fff;color:#000;border-radius:9999px;padding:.25rem .25rem;font-weight:600;text-align:left}
.option-pill::before{
    content:""; width:var(--s); height:var(--s); border-radius:50%;
    border:2px solid #000; background:transparent;
    display:grid; place-items:center; color:#fff; font-weight:800; line-height:1;
    flex:0 0 var(--s);
}
.btn-check:checked + .option-pill{border-color:#000}
.btn-check:checked + .option-pill::before{background:#000; content:"✓";}

/* Textarea: black bg + white outline and text */
.area-outline{background:#000;border:2px solid #fff;color:#fff;border-radius:1.25rem;padding:1rem 1.2rem;min-height:220px}
.area-outline::placeholder{color:#a1a7b3}

/* Ghost buttons */
.nav-wrap .btn-ghost{background:transparent;border:2px solid var(--outline);color:#fff;font-weight:700;padding:.75rem 1.5rem;border-radius:9999px;min-width:9rem}
.nav-wrap .btn-ghost:hover{border-color:#fff;color:#fff}

/* Question title */
.q-title{font-size:clamp(20px, 4.5vw, 32px);font-weight:800;line-height:1.15;text-align:center;margin:2rem 0 1.5rem}

/* NPS circles */
/* levo/desno labele ostaju isto; sredina sa krugovima centrirana */
.nps-row{ display:flex; align-items:center; justify-content: center; gap:1rem; }

/* krugovi – centrirani, prelamaju se po potrebi */
.nps{
    --nps-d: 3rem;         /* veličina kruga */
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem;
}

/* dimenzije krugova, da ne “jedu” se međusobno */
.nps .btn{
    width:var(--nps-d);
    height:var(--nps-d);
    border-radius:50%;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font-weight:700;
}
@media (max-width:420px){.nps .btn{--d:2.6rem}}
.btn-check:checked + .btn{border-color:#000;background:#fff;color:#000}
.nps-label{color:var(--muted);line-height:1}

/* Select dropdown as pill */
.select-wrap{ position:relative; }
.select-pill{
    background:#fff; border:2px solid #fff; color:#000;
    padding:.5rem 2.25rem; border-radius:9999px; width:100%;
    text-align:center; font-weight:700; cursor:pointer; position:relative;
}
.select-pill:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(97,168,255,.35); }
.select-pill::after{
    content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:#000; font-size:1.1rem; line-height:1;
}
.select-menu{ width:100%; border-radius:1rem; overflow:hidden; }
.select-menu .dropdown-item{ padding:.65rem 1rem; font-weight:600; }
.select-menu .dropdown-item:hover{ background:#f2f4f7; }

.btn-check + .btn.option-pill:hover {
    background: #CCC;
    /*border-color: var(--option-pill-hover);*/
    color: #000;
}

.area-outline{
    width:100%;
    max-width:none;
    margin:0;
}

/* RATING 1–5 layout */
.rating-wrap{
    display:flex;
    justify-content:center;
    margin:1.5rem 0;
}
.rating-track{
    width:100%;
    max-width:340px;       /* prilagodi po želji; drži sve kompaktno i centrirano */
    margin:0 auto;
}

/* Brojevi: ravnomerno raspoređeni preko track širine, pa cela traka centrirana */
.rating-numbers{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.4rem;             /* mali buffer između krugova na manjim širinama */
}

/* Krug dugme */
.rate-btn{
    --d:3.2rem;            /* prečnik kruga; smanji na 2.8rem ako ti treba još kompaktnije */
    width:var(--d);
    height:var(--d);
    border-radius:50%;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font-weight:700;
    font-size:1.2rem;
    line-height:1;
}

/* Checked stanje (isti stil kao ranije) */
.btn-check:checked + .rate-btn{
    background:#fff;
    color:#000;
    border-color:#fff;
}

/* Manji krugovi na vrlo uskim ekranima */
@media (max-width:420px){
    .rate-btn{ --d:2.6rem; font-size:1rem; }
}

/* Tekst ispod – leve/desne ivice trake */
.rating-labels{
    display:flex;
    justify-content:space-between;
    width:100%;
    color:#a1a7b3;
    font-size:.9rem;
    margin-top:.5rem;
}

/* === TOP FLOW ZA CONTENT (bez vertikalnog centriranja) === */
.page{
    display:block;            /* više nije grid ovde */
    padding: 1rem 1rem;          /* skromni vertikalni razmak; po želji prilagodi */
}

/* Ako negde postoji poravnanje iz prethodnih stilova, sigurnosno ga “ugasimo” */
.page{ align-content: start !important; justify-items: stretch !important; }
.step{ transform:none !important; } /* da ne ostane neki translate iz starog JS-a */

/* === FOOTER: sticky više nije potreban — grid (.viewport) ga drži na dnu kad ima mesta === */
.app-footer{
    position: static !important;
    bottom: auto !important;
    /* zadržiš postojeći gradient background ako želiš */
}

/* .viewport neka i dalje bude 3-redni grid: header | 1fr | footer (već postoji u fajlu) */
/* .bg-watch ostaje kako jeste (full width, dno) */