/* Izvuceno iz templates/layouts/shell_couple.html (scripts/build/izvuci_inline_css.py).
   Uredjuj OVDJE, ne u predlosku — predlozak ga samo linka. *//* Izvučeno iz templates/layouts/shell_couple.html (perf, 2026-09-10).
   Bilo je inline u SVAKOM HTML-u portala mladenaca, dakle nekeširano na
   svaki zahtjev. Sadržaj je prenesen doslovno, redoslijed kaskade je isti
   jer <link> stoji točno tamo gdje je stajao <style>. */
/* ── PINK SCROLLBAR (couple portal global) ───────────────────
   Thin Dalia mauve scrollbar on the whole page + sidebar nav +
   main content area + bilo koji scroll container koji nije
   eksplicitno opt-out (scrollbar-width: none). Firefox uses
   `scrollbar-*`, WebKit gets ::-webkit-scrollbar pseudo. */
body, .couple-sidebar-nav, .couple-main, .notif-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--color-deep-mauve) transparent;
}

/* ── COUPLE LAYOUT ── */
/* S3 (2026-07-17): scroll je BODY/WINDOW scroll, ne unutarnji. Stari
   max-height:100vh + overflow:hidden je pretvarao .couple-main u skriveni
   scroll container (overflow-x:hidden → computed overflow-y:auto): scrollbar
   je visio na sredini stranice uz rub centriranog sadržaja, a window-scroll
   ovisnici (tracker scroll-depth, gallery settle, popover close) nisu se
   nikad okidali. App-surface stranice koje žele jedan ekran (seating, atlas,
   chat) lock-aju html/body same, page-scoped. */
.couple-layout {
    display: flex;
    min-height: 100vh;
    /* Akvarel (2026-06-03): transparent da .dp-aquarelle (body, sloj
       var(--z-behind)) prosvijetli. Body zadržava cream bazu (dalia-portal.css?v=20260906a:711). */
    background: transparent;
}

/* ── WARM SIDEBAR (desktop) ── */
.couple-sidebar {
    width: 240px; flex-shrink: 0; /* Bruno 2026-05-29: blago suženo (256→240) */
    background:
        radial-gradient(circle at top left, rgba(255,214,227,0.38), transparent 30%),
        radial-gradient(circle at bottom right, rgba(214,231,247,0.24), transparent 28%),
        linear-gradient(180deg, rgba(255,252,250,0.98) 0%, rgba(255,245,230,0.9) 100%);
    border-right: 1px solid rgba(200, 166, 189, 0.22);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    font-family: var(--font-sans);
    box-shadow: 20px 0 45px rgba(181, 107, 141, 0.08);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s, margin 0.3s;
}

/* Sklopivi sidebar (Bruno 2026-05-21): "treba napraviti da se side
   navigacijski meni moze sklopiti, ako netko zeli veci prikaz, npr bas za
   raspored snjedenje". Toggle gumb na rubu sidebar-a, pamti state u
   localStorage. */
body.sidebar-collapsed .couple-sidebar {
    width: 0;
    overflow: hidden;
    padding-left: 0; padding-right: 0;
    border-right: none;
    box-shadow: none;
}
body.sidebar-collapsed .couple-sidebar > * {
    opacity: 0;
    pointer-events: none;
}
/* S2 polish (2026-07-17): « kliker maknut — rub sidebara JE kontrola.
   Duh S6 odluke ostaje (Bruno 2026-05-22: "tko zeli i zna ce ga pronaci,
   da ne upada u oiko"): affordance je tanka lilac linija tek na hover/drag,
   ali drag zona je cijela visina ruba pa je lakše pogoditi nego stari gumb.
   Drag JS (uz aside dolje) vodi width 240→0 1:1 s pointerom; state logika
   nepromijenjena (body.sidebar-collapsed + localStorage 'dw-sidebar-collapsed'). */
.couple-sidebar-drag {
    position: fixed;
    top: 0;
    left: 238px;   /* mora pratiti .couple-sidebar width (240) - 2 */
    width: 10px;
    height: 100vh;
    z-index: var(--z-couple-drag);
    margin: 0; padding: 0;
    background: transparent;
    border: none;
    cursor: col-resize;
    touch-action: none;
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.couple-sidebar-drag::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 1px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--lilac-400) 55%, transparent) 18%,
        color-mix(in srgb, var(--lilac-400) 55%, transparent) 82%,
        transparent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.couple-sidebar-drag:hover::before,
.couple-sidebar-drag:focus-visible::before,
body.sidebar-dragging .couple-sidebar-drag::before { opacity: 1; }
.couple-sidebar-drag:focus { outline: none; }
body.sidebar-collapsed .couple-sidebar-drag { left: 0; }
/* Rasmus (RASMUS_SIDEBAR_DRAG_AUDIT): "kontrola koja te odvela u stanje mora
   ostaviti adresu za povratak" — sklopljeno stanje drži tihu nit uz rub. */
body.sidebar-collapsed .couple-sidebar-drag::before { opacity: 0.35; }
body.sidebar-collapsed .couple-sidebar-drag:hover::before,
body.sidebar-collapsed .couple-sidebar-drag:focus-visible::before { opacity: 1; }
/* Tijekom drag-a: rub prati miš (inline width/left iz JS-a), tranzicije
   ugašene da nema gume; sadržaj blijedi preko --sb-progress (JS, 0–1). */
body.sidebar-dragging .couple-sidebar-drag { transition: none; }
body.sidebar-dragging,
body.sidebar-dragging * { cursor: col-resize !important; user-select: none; }
body.sidebar-dragging .couple-sidebar {
    transition: none;
    overflow: hidden;
}
body.sidebar-dragging .couple-sidebar > * {
    opacity: var(--sb-progress, 1);
    pointer-events: none;
    transition: none;
}
/* Snap na otpust: sadržaj dolazi/odlazi mekano, ne skokom. */
.couple-sidebar > * { transition: opacity 0.25s var(--ease); }
/* IK#9: coarse pointer (iPad landscape i sl.) dobiva širu metu, isti vizual. */
@media (pointer: coarse) and (min-width: 769px) {
    .couple-sidebar-drag { width: 24px; }
}
/* IK#10 / motion registar: follow ostaje i pod RM (ruka vodi = sadržaj,
   presedan cchat-swipe-reply); snap i fade su instant. */
@media (prefers-reduced-motion: reduce) {
    .couple-sidebar,
    .couple-sidebar-drag,
    .couple-sidebar > * { transition: none; }
}
@media (max-width: 768px) {
    .couple-sidebar-drag { display: none; }
}
.couple-sidebar-header {
    /* 28/20 → 20/16 (Bruno 2026-07-29): zaglavlje je nosilo ~48px praznine iznad
       i ispod lockupa, pa je navigacija počinjala pretjerano nisko.
       24 → 20 vodoravno (2026-08-02): marka i zvonce dijele jedan red, pa im
       200px sadržajne širine (240 − 2×20) daje zraka bez diranja lockupa. */
    padding: 12px 12px 16px;
    /* Bez `border-bottom` (Vedran 5.9.2026.: „ne sviđa mi se ta linija iznad
       search boxa, što je to.."). Crta je visjela točno iznad `#dwOmniSlot` i
       ništa nije razdvajala — ispod nje je odmah polje, pa se čitala kao rub
       nekog nevidljivog elementa. Odvajanje sada radi razmak (12→16 dolje), a
       to je i pravilo plohe: IK#15 („ploha leži NA akvarelu") kaže da papir
       nosi hijerarhiju, ne linije. */
    position: relative;
}
.couple-sidebar-header h1 {
    font-family: var(--font-serif);
    font-size: 24px; font-weight: 500;
    color: var(--warm-black);
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.2;
}
/* ── Marka u portalu mladenaca ──────────────────────────────────────────────
   Crtež marke NIJE više ovdje. Do 2026-08-01 je ovaj shell imao vlastiti lockup
   (`.couple-brand-mark`: Libre Baskerville 700 / Avenir 300 mala slova) i
   vlastite mjere znaka (46 px sidebar, 44 px topbar) — jedan od sedam crteža
   iste marke u proizvodu. Sad dolazi iz `dalia_lockup` makroa i `.dw-lockup`
   sustava (dalia-portal.css § ZNAK MARKE); ovdje ostaje SAMO pozicioniranje.
   Prelazak znaka ispod mobilne trake je `bleed=true`, ne pravilo po plohi. */
/* BEZ color-pravila: riječ marke nosi kanonski `--lk-ink` iz `.dw-lockup`
   (Vedran 11.8.: „siva svugdje, samo cvijet nosi boju"); `color: inherit` je
   davao tjelesni #715f68 — treću tintu iste riječi u proizvodu. */
/* Zaglavlje: marka u kutu, pa identitet (Vedran 2026-08-02).
   Kratka povijest jer se mijenjalo dvaput u istom danu: zvonce je bilo
   `position:absolute` u gornjem desnom kutu, pa je marka morala krenuti 36px
   niže samo da ga zaobiđe. Zvonce je zatim sjelo u red uz marku, a sad je
   otišlo POD sliku profila — u izbornik koji ionako nosi obavijesti, postavke,
   paket i izlaz. Zaglavlje je time ostalo bez ijednog gumba, marka može u kut,
   a sve što je oslobođeno ide meniju.
   Padding 16→12px slijeva: Vedran traži marku „skroz u lijevi gornji kut", a
   12px je najmanji razmak na kojem znak ne dodiruje rub sklopivog sidebara. */
.couple-sidebar-header .couple-brand-link {
    /* Bez `display` — `.dw-lockup` je već `inline-flex` (dalia-portal.css:1930).
       Ljuska koja ga ponovi gazi zajednički lockup i pada na guardu
       `test_ljuska_ne_gazi_display_zajednickog_lockupa`; gostinska strana se
       tako razišla (znak i ime jedno ispod drugog, ime ispalo iz 52px trake). */
    width: fit-content;
}
.couple-topbar .couple-brand-link { min-width: 0; }
/* Zvonce u redu s markom — više nije izvan toka. `.couple-id-cluster` je
   zadržao ime jer ga čita portal-chrome.js, ali više ne pozicionira. */
.couple-id-cluster { display: flex; align-items: center; flex: 0 0 auto; }
/* Avatar identitet-čip PRIJE imena člana, u redu s imenom (zadatak 2, 2026-07-19:
   "želim ikonicu na navbaru prije imena i povećaj je"). 30 → 40px za paritet s
   gostom (.gp-guest-av 40px). Zvonce ostaje gore-desno u .couple-id-cluster. */
.couple-sidebar-header .couple-avatar { width: 40px; height: 40px; }
.couple-sidebar-header .couple-avatar--initial { font-size: 17px; }
.couple-sidebar-header .couple-greeting {
    font-size: 15px; color: var(--stone);
    margin-top: 8px; font-weight: 400;
}
.couple-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ivory);
    flex-shrink: 0;
}
/* S1 (2026-07-18): avatar je ulaz u profil (postavke#profil); hover u CSS-u,
   ne inline JS. Pod reduced-motion prijelaz je instant. Padding + negativna
   margina sire dodirnu metu 40px avatara na 46px (>=44 IK#9) bez pomaka
   layouta (i bez urušavanja gap-a u .couple-editor-row). */
.couple-avatar-link { display: block; flex-shrink: 0; transition: opacity 0.2s; }
@media (prefers-reduced-motion: reduce) { .couple-avatar-link { transition: none; } }
/* S1: inicijal fallback kad clan nema ni osobnu ni zajednicku fotku, isti
   tokeni kao profil-krug u postavkama (settings.html .profile-avatar). */
.couple-avatar--initial {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cpl-avatar-1), var(--cpl-avatar-2));
    color: var(--cpl-mauve-aa); font-family: var(--font-serif);
    font-weight: 500; font-size: 15px; line-height: 1;
}
/* Red: avatar (link) PRIJE imena clana, ispod brand lockupa (zadatak 2,
   2026-07-19). Uski sidebar (~192px sadrzaja) → ime dobiva ellipsis. */
/* Identitet: slika i ime otvaraju ISTI izbornik (Vedran 2026-08-02).
   Red nije link nego nosač dvaju okidača — `.couple-profile` (avatar, s
   crvenim krugićem) i `.couple-brand-editor` (ime). Ime je <button>, ne <a>:
   ne vodi nikamo, otvara sloj. */
.couple-editor-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
}
/* S1: ime i prezime clana koji ureduje. Flex-item uz avatar, skraćuje se
   ellipsisom u uskom sidebaru. Neutralizacija UA gumb-stilova jer je od
   2026-08-02 <button>. */
.couple-brand-editor {
    flex: 1; min-width: 0; text-align: left;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-sans, 'Manrope'), sans-serif;
    font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--stone);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.2s;
}
.couple-editor-row:hover .couple-brand-editor { color: var(--warm-black); }
.couple-brand-editor:focus-visible {
    outline: 2px solid var(--color-deep-mauve); outline-offset: 3px; border-radius: 6px;
}
.couple-sidebar-nav {
    flex: 1; padding: 12px 12px;
    overflow-y: auto;
}
.couple-sidebar-bottom {
    padding: 12px 16px;
    border-top: 1px solid var(--ivory);
}

/* ── COUPLE NAV LINKS ── */
.couple-nav-section {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--stone);
    font-weight: 600; padding: 0 12px;
    margin-top: 12px; margin-bottom: 4px;
}
.couple-nav-section:first-child { margin-top: 0; }

.cp-nav {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 10px;
    color: var(--charcoal); font-size: 14px;
    text-decoration: none; transition: all 0.2s;
    border-left: 3px solid transparent;
    font-weight: 400;
}
.cp-nav svg {
    width: 18px; height: 18px; flex-shrink: 0;
    opacity: 0.45; transition: opacity 0.2s;
    stroke: var(--charcoal);
}
/* Prodajni ulaz (Rasmus §3, 2026-08-02; prekrojen 5.9.2026.).
   Vedran: „ova prodajna sekcija je nekako predodabrana, isto nije jasno je
   li otvoreno to ili Pregled (Pregled je otvoren)."

   Uzrok je bio sudar jezika, ne boje: `.cp-nav--sale` i `.cp-active` dijelili su
   TRI od četiri svojstva — mauve tekst, mauve lijevi rub 3px i `font-weight:500`.
   Jedina razlika bila je ružičasta podloga aktivnog retka na 34 % alfe, koja se
   na kremastom papiru jedva vidi. Dva retka jednake težine, a samo je jedan
   otvoren.

   Presuda: LIJEVI RUB I TEŽINA PRIPADAJU SAMO AKTIVNOM RETKU. Prodajni ulaz ih
   gubi i postaje najtiši red u traci (IK#13: jedna radnja nosi punu težinu, sve
   ostalo je tiše) — zadržava mauve tinti samo na znaku, koji ga i dalje
   razlikuje od navigacije, ali ga više ne izjednačava s otvorenom plohom.

   Ime paketa je iz citata gore NAMJERNO izostavljeno. Ovo je CSS komentar u
   `<style>` bloku ljuske, dakle ide u posluženi HTML, a
   `test_samo_vendorska_pretplata_ne_izmislja_couple_paket` traži imena couple
   paketa doslovnim `in html` nad CIJELIM odgovorom. Komentar koji imenuje
   paket zato pada jednako kao da ga kartica stvarno prikazuje. */
.cp-nav--sale {
    border-left-color: transparent;
    color: var(--charcoal);
    font-weight: 400;
    margin-bottom: 10px;
}
.cp-nav--sale svg { stroke: var(--color-deep-mauve); opacity: 0.55; }
.cp-nav--sale:hover { color: var(--color-deep-mauve); }
.cp-nav:hover {
    background: rgba(255,214,227,0.24);
    color: var(--color-deep-mauve);
}
.cp-nav:hover svg { opacity: 0.75; stroke: var(--color-deep-mauve); }

/* Otvorena ploha: podloga 0.34 → 0.62 (Vedran 5.9.2026.). Na 34 % alfe preko
   kremastog papira pilula je bila naslućena, ne vidljiva — par nije mogao reći
   koji je red otvoren. Uz to je aktivni red jedini nositelj mauve lijevog ruba
   i teže tinte, pa se čita i bez podloge (daltonizam, tamna tema, ispis). */
.cp-active {
    background: rgba(255,214,227,0.62) !important;
    color: var(--color-deep-mauve) !important;
    border-left-color: var(--color-deep-mauve) !important;
    font-weight: 600;
}
.cp-active svg { opacity: 0.8 !important; stroke: var(--color-deep-mauve) !important; }

/* Akcija u navigaciji ("Skeniraj", QR čitač na desktopu). Nosi .cp-nav pa se ne
   ističe iz reda, ali je <button>: nema odredišta ni cp-active stanja, otvara
   modal preko trenutnog ekrana. Ovdje samo neutraliziramo UA gumb-stilove. */
.cp-nav--action {
    width: 100%;
    font-family: var(--font-sans);
    text-align: left;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
}

/* Badge uz nav-stavku (npr. broj fotki koje čekaju u Galeriji). Bio inline. */
.cp-nav-badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--gold-accent);
    color: white;
    font-size: 10px; font-weight: 500; line-height: 1.6;
}

/* Zvonce obavijesti je anchor za panel koji se portala na <body>. */
.notif-bell-wrap { position: relative; }
.notif-markall {
    background: none; border: 0; padding: 0;
    font-family: var(--font-sans); font-size: 12px;
    color: var(--color-deep-mauve);
    cursor: pointer;
}
.notif-markall:disabled { opacity: .45; cursor: default; }
.notif-empty { padding: 24px 20px 22px; text-align: center; color: var(--stone); font-size: 13px; }
/* Prazna ploha kaže što ovdje stiže i nudi jedan potez (pravilo kuće), umjesto
   golog „Nema novih obavijesti". Redak je kratak da stane na 360 px. */
.notif-empty p { margin: 0 0 2px; line-height: 1.45; }
.notif-empty p + p { color: var(--stone); }
.notif-empty__cta {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.notif-empty__cta:hover { background: var(--gold); color: var(--cpl-on-fill-ink); }

/* S7 Sub-nav (Bruno 2026-05-23): uvijek vidljive ikone-stavke pod Gosti,
   bez dropdown chevrona. Bolji vizualni rhythm + manji broj klikova.
   Inset-padding match s parent nav-item-ima da gold-active obrub se ne
   reže na rubu sidebar-a. */
.cp-subnav {
    margin-left: 12px; padding-left: 10px;
    border-left: 1px solid rgba(181,107,141,0.2); /* sub-marker zadržan, mauve */
    margin-top: 4px;
    margin-bottom: 8px;
    overflow: visible;  /* fix za odsječen gold border na active item-u */
    display: flex; flex-direction: column; gap: 2px;
}
.cp-subnav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; color: var(--charcoal);
    font-size: 14px; text-decoration: none; /* Bruno 2026-05-29: izjednačeno s .cp-nav */
    border-radius: 8px;
    transition: color 0.18s, background 0.18s, box-shadow 0.18s;
    margin-right: 2px;
}
/* Ikone izjednačene s glavnim nav-om (18px); inline width/height=14 override. */
.cp-subnav a svg { width: 18px !important; height: 18px !important; flex-shrink: 0; opacity: 0.5; stroke: var(--charcoal); transition: opacity 0.18s, color 0.18s; }
.cp-subnav a:hover { color: var(--color-deep-mauve); background: rgba(255,214,227,0.24); }
.cp-subnav a:hover svg { opacity: 0.8; color: var(--color-deep-mauve); stroke: var(--color-deep-mauve); }
.cp-subnav a.cp-subnav-active {
    color: var(--color-deep-mauve);
    background: rgba(255,214,227,0.34);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(181,107,141,0.32);
}
.cp-subnav a.cp-subnav-active svg { opacity: 0.85; color: var(--color-deep-mauve); stroke: var(--color-deep-mauve); }

/* ── GLOBALNI "Vaš dan" page header (S5) ──
   Sve couple stranice: samo naslov + glavna akcija. Bez breadcrumb-a, bez
   eyebrow-a, bez page description-a. Pattern iz raspored-dana cinematic
   redesign (d6a70cf), generaliziran preko portala. */
.couple-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 16px;
    margin-bottom: 20px;
    position: relative;
    flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════════════════
   PRVI RED PLOHE — JEDAN OBRAZAC ZA CIJELI PORTAL MLADENACA (12.9.2026.)
   ══════════════════════════════════════════════════════════════════════════
   OVO JE JEDINO MJESTO NA KOJEM PIŠE KAKO IZGLEDA PRVI RED PLOHE. Tko piše
   novu plohu, čita ovaj blok i bira jedan od tri raspored; četvrtog nema
   (`tests/test_prvi_red_ploha_mladenaca.py` ga obara).

   ŠTO JE BILO KRIVO — izmjereno na 1440 px, 11 mladenačkih ploha, 12.9.2026.:
     Galerija    tražilica 1061 px preko CIJELE širine, sama u prvom redu;
                 naslov i tri gumba tek u drugom (y = 100).
     Pjesme      TRI reda: naslov (y = 32), tražilica (y = 114), alati (y = 164).
     Partneri    naslov (y = 32), pa tražilica preko cijele širine (y = 114).
     Lista želja tražilica preko cijele širine (y = 32), pa naslov (y = 78).
     Gosti       jedan red, ali alati zalijepljeni uz naslov (x = 641 od 1400).
     Raspored    jedan red i poravnat desno — jedina ploha koja je bila točna.
   Vedran, 12.9.2026.: „ova tražilica ti ode skroz gore. treba pored naslova
   ili ispod biti, a sa strane te akcije i gumbi sve u istom redu da dobijemo
   isto prostora… na mobitelu je dobro ali desktop se zeznuo."

   OBRAZAC. Prvi red plohe ima najviše DVA utora, imenovana atributom:
     [data-prvi="tekst"]  — naslov plohe i njegov podnaslov. Lijevo, raste.
     [data-prvi="alati"]  — tražilica plohe i njezini gumbi. Desno, ne raste.
   Utora „alati" smije biti više od jednog (npr. tražilica je jedan blok, traka
   gumba drugi); vodoravni redoslijed među njima je redoslijed u DOM-u, pa
   tražilica stoji ondje gdje je i na mobitelu — prva. Blok koji nosi
   `.dw-search-row` je tražilica i jedini se steže; gumbi drže svoju mjeru.
   [data-prvi="prolaz"] je omotač koji se na ≥1025 px rastvara (`display:
   contents`) da bi njegova djeca sjela u red — za plohe kojima naslov i gumbi
   već žive u zajedničkoj kutiji.

   POREDAK GUMBA JE ISTI SVUGDJE: sporedne radnje lijevo, glavna radnja desno
   na kraju, `⋯` (prelijevanje) zadnje. Galerija je do danas radila obrnuto
   („Dodaj slike" prvi), pa je par isti par gumba na dvije plohe nalazio na
   dva mjesta.

   TRI DOPUŠTENA RASPOREDA (i ništa četvrto):
     1. PUNI     — tekst + alati (ploha ima vlastitu tražilicu ili gumbe):
                   Galerija, Gosti, Pjesme, Partneri, Lista želja, Raspored.
     2. TIHI     — samo tekst; tražilicu nosi ljuska i `dalia-omnibox.js` je na
                   ≥769 px seli u bočnu traku: Pripreme, Pozivnice, Troškovnik,
                   Postavke.
     3. BEZ REDA — immersive ploha koja naslov nosi u vlastitom platnu:
                   Pregled, Raspored dana, Poruke, Rezervacije, Logistika.

   MOBITEL SE NE MIJENJA. Cijeli obrazac živi u `@media (min-width: 1025px)`.
   Novi omotač (ploha kojoj su tekst i alati braća, a ne rođaci) nosi uz
   `.dw-prvi-red` i `.dw-prozirno`: ispod 1025 px taj je omotač `display:
   contents`, dakle za raspored ga NEMA i mobilni kroj ostaje bajt po bajt
   isti. Ploha kojoj je prvi red već jedan element (Gosti, Pjesme) uzima samo
   `.dw-prvi-red` i ne treba prozirnost.

   Dijete reda bez `data-prvi` (npr. `.ded-mod` na Pjesmama) pada u vlastiti
   redak ispod (`order: 9`) — red drži ono što je u njega imenovano, a ne ono
   što je slučajno završilo u istoj kutiji. */
@media (max-width: 1024px) {
    .couple-main .dw-prozirno { display: contents; }
}
@media (min-width: 1025px) {
    .couple-main .dw-prvi-red {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    /* Razmak ispod reda dobiva SAMO novi omotač: ploha kojoj je red već bio
       element (Gosti, Pjesme) ima svoj razmak i ovdje bi ga dobila dvaput.
       Izmjereno: bez ove razlike Gosti su dobili 12 px više praznine ispod
       prvog reda — suprotno od onoga zbog čega se prolaz i radi. */
    .couple-main .dw-prvi-red.dw-prozirno { margin-bottom: 20px; }
    .couple-main .dw-prvi-red > :not([data-prvi]) { flex: 1 0 100%; order: 9; }
    .couple-main [data-prvi="prolaz"] { display: contents; }
    .couple-main [data-prvi] { margin-block: 0; padding-block: 0; }
    /* `flex-basis: 0` nije mikro-optimizacija nego ono što drži JEDAN red:
       omotač lomi redak po HIPOTETSKOJ mjeri djeteta, a ne po stegnutoj. S
       `auto` je naslovni blok Pjesama (naslov + brojka + Apple znak = 400 px)
       zbrojen s poljem i alatima prelazio 1120 px, pa je traka alata padala u
       drugi red — točno ono što se popravlja. S nulom naslov uzima ono što
       PRETEKNE i nikad ne gura susjede dolje.

       `min-width` je druga polovica iste presude: bez nje naslovni blok nikad
       ne bi prelomio red, pa bi na 1025 px (naslov dobiva 115 px, a traži 400)
       tekst tekao ISPOD tražilice. 140 px je mjera na kojoj Galerija na 1025 px
       još stoji u jednom redu (160 + 226 + 295 + razmaci = 705 = puna širina),
       a Pjesme — koje uz polje nose i četiri alata — uredno prelome alate u
       drugi redak umjesto da naslov nestane pod poljem. */
    .couple-main [data-prvi="tekst"] { order: 1; flex: 1 1 0; min-width: 140px; }
    .couple-main [data-prvi="alati"] { order: 2; flex: 0 0 auto; }
    /* Tražilica je jedini blok u redu koji se steže: gumbi imaju natpis koji se
       ne smije rezati, polje ima placeholder koji smije. Donja granica je mjera
       na kojoj „Pretraži ili dodaj pjesmu…" još stane. */
    .couple-main [data-prvi="alati"].dw-search-row { flex: 0 1 clamp(220px, 22vw, 340px); min-width: 0; }
}
/* Divider maknut (Vedran 2026-06-23, Rasmus audit): centrirani akvarel potez
   ispod space-between headera lebdio je nigdje (ni uz naslov ni uz akciju);
   tišina + razmak drže hijerarhiju bolje. Bez linije, bez sive border-bottom. */
.couple-page-title {
    font-family: var(--font-serif, 'Cardo', Georgia, serif);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 400;
    color: var(--warm-black);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}
/* ── Akvarelni sprig akcent (Bruno 2026-06-20): Master Collection Watercolour,
   Violet. (Header sprig uz naslov maknut — bio presitan/nije radio. Ostaje
   veći sprig u praznim stanjima umjesto emoji ikone.) */
.empty-state::before {
    content: ''; display: block; width: 110px; height: 163px; margin: 0 auto 14px;
    /* Crta se na 110x163 px, pa je pun rez od 352 px (27,5 kB) bio čista težina.
       `violet-sprig-320.webp` (22,2 kB) pokriva i dvostruku gustoću (220 px). */
    background: url('/static/img/watercolor/violet-sprig-320.webp?v=20260910p') no-repeat center / contain;
}
/* OPREZ: ovo pravilo gasi SVE unutar `.empty-state-icon`, ne samo emoji — pa
   je nevidljivim učinilo i uredan inline SVG u `couple/songs.html` (nađeno i
   obrisano 2026-08-07). Tko napiše ikonu u praznom stanju, izgubit će je bez
   ijedne greške. To je namjerno: sprig iz `::before` je JEDINI vizual praznog
   stanja (Bruno 2026-06-20). Ako ikad zatreba per-ploha ikona, mijenja se
   odluka o sprigu, ne dopisuje iznimka. Od 2026-08-07 pravilo nema nijednog
   korisnika na mladenačkoj strani — stoji kao zamka za buduće, ne za zatečeno. */
.empty-state .empty-state-icon { display: none; }
/* Bruno 2026-05-29: primarni CTA cijelog mladenačkog portala = deep-mauve.
   Fill = var(--cpl-mauve-aa) (tamnija nijansa akcenta), NE token #b56b8d — bijeli tekst na
   var(--cpl-mauve-aa) = 4.94:1 (prolazi WCAG AA), na #b56b8d = 3.85:1 (pada AA). Token
   --color-deep-mauve (#b56b8d) ostaje za nav-akcente/tintove (tamo nije fill s
   bijelim tekstom). Detalji: docs/rasmus/portal/RASMUS_PORTAL_CONSISTENCY_AUDIT.md. */
/* Bruno 2026-05-29: glavni CTA-i prozirni (kao galerija) — tekst+obrub u mauve,
   bez ispune. Elegantnije; var(--cpl-mauve-aa) na svijetlom prolazi AA. Vrijedi za sve couple
   stranice (shared klasa: "+ Dodaj pjesmu", "+ Dodaj gosta", "Pošalji pozivnice"…). */
.couple-page-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    color: var(--cpl-mauve-aa);
    border: 1px solid rgba(160, 90, 125, 0.45);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-sans, system-ui, sans-serif);
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.couple-page-action:hover {
    background: rgba(160, 90, 125, 0.08);
    border-color: var(--cpl-mauve-aa);
    color: var(--cpl-mauve-aa-hover);
    transform: translateY(-1px);
}
/* Bruno 2026-05-29: ghost je default (elegancija), ali konverzijski/sidreni CTA
   (npr. "Pošalji pozivnice") dobiva solid fill da se ne izgubi među ghost gumbima
   (Rasmus: 4 ghost klona u headeru = nema hijerarhije). */
.couple-page-action--solid {
    background: var(--cpl-mauve-aa);
    color: var(--cpl-on-fill-ink);
    border-color: var(--cpl-mauve-aa);
}
.couple-page-action--solid:hover {
    background: var(--cpl-mauve-aa-hover);
    color: var(--cpl-on-fill-ink);
    box-shadow: 0 8px 20px -6px rgba(160, 90, 125, 0.4);
}
/* Sekundarni header CTA (ghost) — ista visina/oblik, prozirna pozadina;
   za drugu akciju u headeru (npr. "Podsjetnik svima" uz "Pošalji pozivnice"). */
.couple-page-action-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: transparent;
    color: var(--cpl-mauve-aa); /* AA: tamniji mauve za tekst (#b56b8d pada AA na bijelom). */
    border: 1px solid rgba(160, 90, 125, 0.45);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-sans, system-ui, sans-serif);
    letter-spacing: 0.02em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.couple-page-action-ghost:hover {
    background: rgba(160, 90, 125, 0.08);
    border-color: var(--cpl-mauve-aa);
}
/* S5: globalno sakri breadcrumb i page-header* legacy elemente unutar
   couple-main. Pojedinačne stranice koje ih namjerno zadržavaju mogu
   override-ati preko !important ili specifičnijeg selector-a. */
.couple-main .breadcrumb { display: none; }

/* ── COUPLE CONTENT AREA ──
   `--couple-main-pt` / `--couple-main-pb` NISU ukras: 100vh deck na /mladenci/
   od njih računa svoju visinu (templates/couple/dashboard.html, `.cp-stage`).
   Do 2026-08-02 je deck poništavao ostavu ručno upisanim `-clamp(1.5rem,4vw,2.5rem)`
   (=40px), a stvarna gornja ostava je na desktopu 20px (@1024-1440) ili 24px
   (@1441+) — pa je 16-20px decka stajalo IZNAD vrha prozora i bilo nedohvatljivo
   (kartice odrezane gore). Tokeni postoje da se ta dva broja više ne mogu razići:
   TKO GOD mijenja `padding` ovdje, mijenja i token u istom pravilu. */
.couple-main {
    flex: 1;
    /* ═══ BEZ PRAZNINE S DESNE STRANE (Vedran 9.8.2026.) ═══════════════════
       Bilo je `max-width: 1440px; margin-inline: auto`. Ploha je time bila
       UŽA od prostora koji ima, a višak se dijelio na dvije strane. Lijevi
       višak se ne vidi jer uz njega stoji bočna traka sa svojim prijelazom;
       desni ostaje gola pozadina — „praznina s desne strane".

       Brojka nije bila kriva, nego postojanje brojke: 1440 je izgledalo dobro
       na 1440 i 1680, a na svakom širem zaslonu ostavlja pojas. Sad ploha uzme
       prostor koji ima, a duljinu retka drži pravilo ispod — ograničava se
       TEKST, ne ploha, jer je čitljivost svojstvo retka, a ne stranice.

       Mreže na stranicama već su pisane s `repeat(auto-fill, minmax(...))`, pa
       na širem zaslonu dobivaju još jedan stupac umjesto da se rastegnu.
       ═══════════════════════════════════════════════════════════════════════ */
    max-width: none;
    margin-inline: 0;
    --couple-main-pt: clamp(1.5rem, 4vw, 2.5rem);
    --couple-main-pb: clamp(1.5rem, 4vw, 2.5rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    padding-left: max(2rem, 4vw);
    padding-right: max(2rem, 4vw);
    /* S3: bez overflow-x:hidden — pravio je od maina scroll container
       (computed overflow-y:auto) i ubijao position:sticky potomke nakon
       prelaska na body scroll. Horizontalni overflow drži body (dalia-portal
       body{overflow-x:hidden}). */
    min-width: 0;
    font-size: 15px; line-height: 1.6;
    color: var(--text-body);
    /* Akvarel (2026-06-03): transparent da podloga prosvijetli iza sadržaja. */
    background: transparent;
    width: 100%;
}

/* ── Couple typography defaults ──
   OVO SU ZADANE VRIJEDNOSTI, NE ZAKON. Ljuska omata sav sadržaj u `.couple-main`,
   pa je `.couple-main h1` nosio (0,1,1) — jače od BILO KOJE klase koju stranica
   napiše (0,1,0). Pravilo predloška se tada ne izvrši: datoteka i dalje stoji u
   repou, jinja je renderira, a na ekranu piše nešto treće.

   Izmjereno getComputedStyle-om (headless Chrome 1440×900 i 390×844, 2026-08-07)
   na dvanaest mladenačkih ekrana: 615 elemenata je renderiralo tipografiju
   ljuske umjesto vlastite. `.ae-title` traži 32px/400 → davao 26px/600;
   `.al-shared-h` 15px/400 → 20px/600; `.al-name` 17px → 18px/500. Najskuplji
   slučaj je bio u ovoj datoteci: `.couple-page-title` (standardni naslov SVAKE
   mladenačke stranice) traži clamp(22px,3vw,28px) u rezu 400, a dobivao je
   26px/600 jer je `.couple-main h1` deset redaka niže bio jači od njega.

   `:where()` spušta doseg na (0,0,1): dovoljno da nadjača Tailwind preflight
   (`h1{font-size:inherit}` iz output.css, koji dolazi ranije u kaskadi), premalo
   da pregazi ijedno stranično pravilo s klasom. Isti postupak i isto
   obrazloženje kao kod dark-mode `a` pravila niže u ovoj datoteci.

   TKO GOD ovdje doda pravilo za goli element (h1..h6, p, td, th, label, input…)
   i u njemu napiše veličinu, rez ili pismo — mora ga omotati u `:where()`.
   Čuva `tests/test_shell_typography_specificity.py`. */
.couple-main .text-xs { font-size: 13px; }
/* Duljina retka ostaje čitljiva iako ploha više nema strop (v. bilješku uz
   `.couple-main`). 78ch je ~700px na 15px/1.6 — kartice i stupci su ionako
   uži, pa ovo dira samo odlomke koji bi inače tekli preko cijelog zaslona. */
.couple-main > p,
.couple-main > .empty-state p,
.couple-main .wl-sec-hint,
.couple-main .couple-page-lede { max-width: 78ch; }
.couple-main .text-sm { font-size: 14px; }
:where(.couple-main) label { font-size: 14px; color: var(--text-tertiary); font-weight: 400; }
:where(.couple-main) input, :where(.couple-main) textarea, :where(.couple-main) select { font-size: 15px; }
:where(.couple-main) h1 { font-size: 26px; font-weight: 600; color: var(--text-primary); font-family: var(--font-serif); }
:where(.couple-main) h2 { font-size: 20px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-serif); }
:where(.couple-main) h3 { font-size: 18px; font-weight: 500; color: var(--text-secondary); }
:where(.couple-main) p { color: var(--text-body); font-size: 15px; }
:where(.couple-main) td { color: var(--text-body); font-size: 15px; }

/* ── BREADCRUMB ── */
.breadcrumb {
    padding: 8px 0; font-size: 14px;
    color: var(--stone); margin-bottom: 28px;
    position: relative; z-index: var(--z-sticky);
}
.breadcrumb a { color: var(--gold-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── TABLE WRAPPER (Responsive) ── */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border-radius: var(--radius-lg);
}
.table-wrapper table {
    width: 100%;
    min-width: 600px; /* Prevent collapse on small screens */
}

/* ── TABLE STYLES ── */
:where(.couple-main) table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
:where(.couple-main) thead th {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--cream);
}
:where(.couple-main) tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-body);
    vertical-align: middle;
    font-size: 15px;
}
.couple-main tbody tr:hover {
    background: var(--hover-bg);
    transition: background 0.15s ease;
}

/* ── EMPTY STATE ── */
.empty-state { padding: 64px 24px; text-align: center; font-family: var(--font-sans); }
.empty-state-icon { font-size: 32px; margin-bottom: 16px; opacity: 0.4; }
.empty-state-title { font-family: var(--font-serif); font-size: 20px; color: var(--text-primary); margin-bottom: 8px; }
.empty-state-sub { font-size: 14px; color: var(--text-tertiary); font-weight: 300; margin-bottom: 24px; line-height: 1.6; }
.empty-state-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold); text-decoration: none;
    border: 1px solid var(--gold); padding: 11px 26px;
    font-family: var(--font-sans); transition: all 0.2s;
}
.empty-state-cta:hover { background: var(--gold); color: var(--warm-black); }

/* Cards: shadows instead of borders */
.cd-card, .g-card, .seat-card, .inv-card, .gal-card, .set-card,
.seat-stat-card, .seat-table-detail {
    border: none !important;
    box-shadow: 0 2px 12px rgba(59,53,41,0.06), 0 1px 3px rgba(59,53,41,0.04) !important;
}

/* ── PAGE HEADER (reused by timeline, songs, etc.) ── */
.page-header { padding:28px 40px 22px; background:var(--card-bg); }
.page-header-eyebrow { font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:6px; display:block; font-weight:500; }
.page-header h1 { font-family:var(--font-serif); font-size:28px; font-weight:600; color:var(--text-primary); margin:0 0 4px; letter-spacing:-0.02em; }
.page-header p { font-size:15px; color:var(--text-tertiary); margin:0; line-height:1.6; }
.page-header-actions { display:flex; gap:10px; margin-top:14px; }

/* ── NOTIFICATION BELL ── */
/* 6 → 10px padding (32 → 40px kutija, 2026-08-02): zvonce sad stoji u redu uz
   45px marku, pa je 32 premalo i za miš. Ne 44 — bočni izbornik je `display:none`
   ispod 768px, dakle miš, ne prst. */
.notif-bell { position: relative; cursor: pointer; padding: 10px; border-radius: 8px; color: var(--stone); }
.notif-bell:hover { background: rgba(181,107,141,0.08); color: var(--gold-accent); }
/* Badge u paleti svoje ljuske (Rasmus Obavijesti v2 #7, polish pass): couple =
   duboki lilac, ne crveni alarm — nova fotka od gosta je radost, ne greška. */
.notif-badge { position: absolute; top: 1px; right: 1px; background: var(--lilac-700); color: white; border-radius: 50%; width: 15px; height: 15px; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: var(--z-content); }


/* Z-index fix (Bruno 2026-05-26): panel se portala na document.body i koristi
   position: fixed s top/left koje JS računa iz bell-ove pozicije. Ovo zaobilazi
   sve stacking contexte (sticky sidebar, transform-elemente u dashboard, paperC
   overflow, lista-želja kartice, gosti filterbar) — jer fixed + body parent
   znači da je root stacking context jedini ancestor. Visok z-index iznad svih
   pozicioniranih elemenata u app-u (modal-overlay je 1000–2000, toasts 9999). */
/* notif panel + profil meni CSS -> static/css/portal-chrome.css (dedup 2026-07-21) */
/* ── RESPONSIVE BREAKPOINTS ── */
/* Mobile: < 768px */
@media (max-width: 768px) {
    .couple-sidebar { display: none; }
    .couple-main {
        /* 2026-06-03 (Rasmus): fixed topbar je 48px — sadržaj je ulazio pod
           header. padding-top = topbar height + safe-area-inset-top + dah. */
        /* 2026-06-30 (Rasmus nav audit N8/N9): footer-floateri uklonjeni → dno
           se vraća sadržaju. Nema fantomske 88px rezervacije; samo safe-area dah. */
        /* 2026-07-29: dno rezervira donji nav (58px) + safe-area — sadržaj završava
           IZNAD trake, ne pod njom (isto pravilo kao .gp-main na gostu). */
        padding: calc(52px + env(safe-area-inset-top) + 1rem) 1rem calc(58px + env(safe-area-inset-bottom, 0px) + 16px) 1rem !important;
        max-width: 100%;
    }
    .couple-topbar { display: flex !important; }
    /* Isti razlog kao gore: `:where()` da mobilna zadana veličina ostane
       zadana — stranica koja svojoj klasi propiše mobilni raspon dobiva je. */
    :where(.couple-main) h1, .text-h1 { font-size: 22px; }
    :where(.couple-main) h2, .text-h2 { font-size: 18px; }
    :where(.couple-main) h3, .text-h3 { font-size: 16px; }
    .page-header { padding: 20px 16px 16px; }
    .page-header h1 { font-size: 24px; }
    .page-header p { font-size: 14px; }
    .table-wrapper table { min-width: 500px; }
    /* Akvarel zaštita (Rasmus gate 2026-06-03): najsvjetlije sive note
       (--text-tertiary) su bile granične na cream-u i prije akvarela; blagi
       paper-backing vraća kontrast samo njima, samo na mobitelu — bez diranja
       akvarela (0.12 ostaje globalno). Naslovi/body su dovoljno tamni. */
    :where(.couple-main) .empty-state-sub,
    :where(.couple-main) label,
    :where(.couple-main) .text-xs {
        text-shadow: 0 0 1px var(--paper);
    }
}


/* Vrh sadržaja (2026-07-29, Bruno WP7): bočni razmaci ostaju, GORNJI se steže —
   na svakoj širini prvi redak kreće ranije, a stranica i dalje diše sa strane. */
/* Tablet: 768px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .couple-main {
        --couple-main-pt: 1rem;
        --couple-main-pb: 1.5rem;
        padding: 1rem 2rem 1.5rem;
    }
}

/* Desktop: 1024px - 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
    .couple-main {
        --couple-main-pt: 1.25rem;
        --couple-main-pb: 2rem;
        padding: 1.25rem 2.5rem 2rem;
    }
}

/* Wide: > 1440px — content stops expanding, stays centered */
@media (min-width: 1441px) {
    .couple-main {
        --couple-main-pt: 1.5rem;
        --couple-main-pb: 2.5rem;
        padding: 1.5rem 3rem 2.5rem;
        /* max-width 1440px + margin-inline: auto = centered */
    }
}

/* Desktop + Tablet: hide mobile nav (Bundle E .dw-bottom-nav handles its own hide via media query) */
@media (min-width: 769px) {
    .couple-topbar { display: none !important; }
}

/* ── MOBILE TOP BAR ── */
.couple-topbar {
    display: none;
    position: fixed; top: 0; left: 0; right: 0;
    /* 48px (bilo 52) — traka nosi samo znak+riječ i dvije kontrole od 40px, pa
       je 52 bilo prazan pojas iznad sadržaja (Bruno 2026-07-29: "smanji gap
       između headera i tih elemenata, pretjerano veliko"). Broj živi u tokenu
       --dw-topbar-h (head), da ga stranice ne prepisuju rukom. */
    height: var(--dw-topbar-h, 48px); z-index: var(--z-couple-topbar);
    background: var(--dark-surface, rgba(255, 250, 246, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Bez `border-bottom` (isti nalaz, mobilna polovica): traka je fiksna na
       0–48 px, polje počinje na 70 px (IK#11), pa je hairline lebdio ~21 px
       iznad pilule i ništa ispod sebe nije dijelio. `backdrop-filter` već
       odvaja traku od sadržaja koji ispod nje prolazi. */
    align-items: center; justify-content: space-between;
    padding: 0 16px;
}
/* Auto-sklanjanje GORNJE trake: atribut data-dw-autohide na traci; CSS i
   mehanika su dijeljeni (dalia-portal.css `dw-topbar-hide` + dw-topbar-autohide.js).
   N1/N2 lekcija („navigacija se ne skriva na skrol") i dalje vrijedi za DONJU
   traku — Vedranova naredba 11.8. izričito pokriva gornju. */
.couple-topbar h1 {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 400;
    color: var(--warm-black); margin: 0;
}

/* ── MOBILE PROFILE DROPDOWN (Rasmus chrome redizajn 2026-06-03) ──
   Jedini element gore-desno. Trigger nosi i .notif-bell klasu (anchor za
   notif-panel) pa ovdje neutraliziramo notif-bell padding/hover. */
.couple-profile { position: relative; flex-shrink: 0; }
/* Izbornik u SIDEBARU se otvara udesno (`right:0` iz portal-chrome.css bi ga u
   240px širokoj ploči izbacio izvan lijevog ruba ekrana). Isti popravak koji
   gostinska ljuska već ima za `.gp-guest-id`. Mobilna traka zadržava `right:0`
   jer je ondje okidač uz desni rub. */
.couple-sidebar-header .couple-profile__menu { right: auto; left: 0; min-width: 216px; }

/* ── MOBILE HEADER DESNI KLASTER + NAV LADICA (Rasmus nav audit 2026-06-30) ──
   Zamjenjuje legacy .more-menu floating drawer + footer-floatere. Desni klaster
   headera: ✶ Dalia + ☰ Izbornik + profil. Mobile-only (couple-topbar je
   display:none na desktopu). Ladica = mobilno zrcalo desktop sidebara.
   ────────────────────────────────────────────────────────────── */
.couple-topbar__right { display: flex; align-items: center; gap: 2px; }
.couple-topbar-btn {
    position: relative; flex-shrink: 0;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 50%;
    color: var(--warm-black); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.couple-topbar-btn:hover { background: rgba(181,107,141,0.07); }
.couple-topbar-btn:active { transform: scale(0.94); }
.couple-topbar-btn svg { width: 22px; height: 22px; }
.couple-topbar-btn--dalia { color: var(--lilac-400); }
.couple-topbar-btn__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--rose-500); color: var(--cpl-on-fill-ink);
    font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
    border: 1.5px solid var(--paper);
}
.couple-topbar-btn__badge[hidden] { display: none; }
body.dark-mode .couple-topbar-btn { color: var(--dark-ink-strong); }
body.dark-mode .couple-topbar-btn:hover { background: var(--cpl-dark-border); }

/* ── MOBILNI DONJI NAV (Vedran 2026-07-29) ────────────────────────────────
   Paritet s portalom gostiju (.gp-bottom-nav): četiri najčešće mete u dohvatu
   palca + „Više" koje otvara ISTU ladicu kao ☰ u headeru. Nav audit 2026-06-30
   je skinuo cijeli footer sloj (bloom + center FAB + traka) i ostavio ladicu
   kao jedini ulaz — gost portal je poslije dobio traku, pa su se portali
   razišli: par je do galerije/gostiju imao dva tapa, gost jedan.
   Navigacija se NE skriva na skrol (N1/N2 lekcija) — sklanjaju se samo
   plutajuće plohe (.dw-corner--gone). Ime klase je slobodno: Bundle E
   `.dw-bottom-nav` je obrisan 2026-06-30 (dalia-portal.css:1953). */
.dw-bottom-nav { display: none; }
@media (max-width: 768px) {
    .dw-bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-couple-bottomnav);
        /* 58 → 50px (paritet s gostinskom ljuskom, PR #996, 2026-08-02).
           Višak nije bio padding nego VODSTVO: `line-height: normal` na Manrope
           daje 1,5 (15,75px na 10,5px slovu), pa natpis nosi ~5px praznog
           line-boxa. Zato ide i `line-height: 1.15` na natpis — 1,15 × 10,5 =
           12,1px i dalje nosi rep slova „g".
           Dodirna meta ostaje CIJELA traka (50px, iznad HIG minimuma od 44px);
           50px je i iOS mjera tab bara. */
        height: calc(50px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255,250,246,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--ivory);
    }
    .dw-bottom-nav a span, .dw-bottom-nav button span { line-height: 1.15; }
    .dw-bottom-nav a, .dw-bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        text-decoration: none; color: var(--stone); font-size: 10.5px; font-family: var(--font-sans);
        background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .dw-bottom-nav svg { width: 22px; height: 22px; opacity: 0.7; stroke: currentColor; fill: none; }
    .dw-bottom-nav .is-active { color: var(--color-deep-mauve); }
    .dw-bottom-nav .is-active svg { opacity: 1; }
}
/* Brojač nepročitanog na stavci Poruke. Ne ispisuje broj nego STOJI: točka je
   dovoljna da kaže „ima nešto", a broj na 22px ikoni u traci se ionako ne čita.
   Puni ga `dw:unread-total` iz ljuske — isti izvor kao zvonce, bez drugog polla. */
.dw-nav-msg__wrap { position: relative; display: inline-flex; }
.dw-nav-msg__badge {
    position: absolute; top: -1px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-deep-mauve);
    box-shadow: 0 0 0 2px rgba(255, 250, 246, 0.96);
}
.dw-nav-msg__badge[hidden] { display: none; }
body.dark-mode .dw-nav-msg__badge { box-shadow: 0 0 0 2px rgba(30, 28, 26, 0.96); }

/* ── „+" u sredini trake i ploča brzih radnji (Vedran 29.8.2026.) ───────────
   Plus je jedina meta u traci koja ne vodi nikamo nego OTVARA — pa je i jedina
   koja nosi ispunjen disk. Bez izdizanja iznad trake (Instagram ga ne diže; a
   ovdje bi mauve krug koji visi nad papirom povukao pogled s kartica na sebe).
   Disk je 30px: veći od ikone susjeda, manji od pola visine trake. */
.dw-nav-plus__disc {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-deep-mauve);
    transition: transform .18s var(--ease, ease);
}
.dw-bottom-nav .dw-nav-plus__disc svg { width: 17px; height: 17px; opacity: 1; stroke: var(--cpl-on-fill-ink); }
.dw-nav-plus[aria-expanded="true"] { color: var(--color-deep-mauve); }
.dw-nav-plus[aria-expanded="true"] .dw-nav-plus__disc { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
    .dw-nav-plus__disc { transition: none; }
}

/* Ploča: sjeda NA traku, ne preko cijelog ekrana — radnja je mala i ne zaslužuje
   punu plohu. Z ispod ladice (1050) jer se nikad ne otvaraju zajedno. */
/* Zatamnjenje staje IZNAD trake (Vedran 29.8.2026.: „ne treba zatamniti donji
   navi meni kad se stisne plus, nekako mi ne izgleda prirodno" — i ima pravo).
   Ploča IZLAZI iz trake i nastavak je nje, pa zatamniti traku znači zatamniti
   izvor vlastite radnje: plus koji si upravo pritisnuo posivi, a i dalje je
   jedini gumb koji ploču zatvara. Zatamnjuje se ono što je ploča prekrila —
   sadržaj iznad. */
.dw-plus-backdrop {
    position: fixed; top: 0; left: 0; right: 0;
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-plus-backdrop);   /* registar (1035); isti kat kao gost */
    background: rgba(20, 15, 12, 0);
    transition: background 240ms ease;
}
.dw-plus-backdrop[hidden] { display: none; }
.dw-plus-backdrop.is-open { background: rgba(20, 15, 12, 0.38); }

.dw-plus-sheet {
    position: fixed; left: 0; right: 0;
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-plus-sheet);   /* registar (1040); isti kat kao gost */
    background: var(--paper);
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    box-shadow: 0 -14px 40px -18px rgba(63, 49, 56, 0.42);
    padding: 8px 14px 16px;
    transform: translateY(102%);
    transition: transform 300ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
    max-height: calc(100dvh - 50px - 24px);
    overflow-y: auto;
}
.dw-plus-sheet[hidden] { display: none; }
.dw-plus-sheet.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .dw-plus-sheet { transition: none; }
}
@media (min-width: 769px) { .dw-plus-sheet, .dw-plus-backdrop { display: none !important; } }

.dw-plus-grip {
    display: block; width: 36px; height: 4px; margin: 0 auto 12px;
    border-radius: 999px; background: rgba(107, 78, 113, 0.22);
}

/* Skener: tražilo lijevo, tekst desno. Ploha je ružičasta kao u skeneru samom
   (isti radial), pa dodir ne mijenja jezik nego samo pali kameru. */
/* Omjer PRAVE kartice, 85,6 × 54 mm = 1,586 (Vedran 29.8.2026.: „ajde još povećaj
   da je dimenzija standardne kartice baš, da ih asocira na to"). Ploha time nije
   samo veća nego prepoznatljiva — oko je pročita kao karticu prije nego pročita
   natpis. `aspect-ratio` umjesto fiksne visine: širina ploče ovisi o telefonu,
   omjer ne smije. */
.dw-plus-scan {
    position: relative; display: flex; align-items: flex-end;
    width: 100%; aspect-ratio: 1.586; max-height: 42dvh;
    padding: 18px 20px 20px; margin: 2px 0 10px;
    border: none; border-radius: 18px;
    cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
    font: inherit; color: inherit;
    background: radial-gradient(ellipse 78% 78% at 50% 34%, var(--mauve-100), var(--paper));
    overflow: hidden;
}
/* Fotoaparat je vodeni žig kartice, ne ikona uz tekst — stoji gore, blijed, i
   ne bori se s natpisom za istu točku pogleda. */
.dw-plus-scan::before {
    content: ""; position: absolute; inset: 0; bottom: 42px;
    background-color: var(--color-deep-mauve);
    -webkit-mask: url("/static/img/kamera.svg") no-repeat center / 54px;
    mask: url("/static/img/kamera.svg") no-repeat center / 54px;
    opacity: 0.24; pointer-events: none;
}
.dw-plus-scan:hover::before, .dw-plus-scan:focus-visible::before { opacity: 0.34; }
.dw-plus-scan:focus-visible {
    outline: 2px solid var(--color-deep-mauve); outline-offset: 2px;
}
.dw-plus-scan__corner {
    position: absolute; width: 22px; height: 22px;
    border: 2px solid var(--color-deep-mauve); opacity: 0.5;
}
.dw-plus-scan__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.dw-plus-scan__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.dw-plus-scan__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.dw-plus-scan__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.dw-plus-scan__body { position: relative; display: flex; flex-direction: column; gap: 1px; }
.dw-plus-scan__title {
    font-family: var(--font-display, 'Cardo', serif); font-size: 20px;
    color: var(--charcoal);
}
.dw-plus-scan__hint {
    font-family: var(--font-script, 'Caveat', cursive); font-size: 15px;
    color: var(--stone);
}

.dw-plus-list { border-top: 1px solid var(--ivory); padding-top: 6px; }
.dw-plus-list .dw-qa-item { min-height: 56px; }

body.dark-mode .dw-plus-sheet { background: var(--cpl-dark-sunken); }
body.dark-mode .dw-plus-grip { background: rgba(212, 196, 176, 0.24); }
body.dark-mode .dw-plus-list { border-top-color: var(--cpl-dark-border); }

body.dark-mode .dw-bottom-nav { background: rgba(30,28,26,0.96); border-top-color: var(--cpl-dark-border); }
/* Lightbox/fullscreen plohe: traka ne smije stajati preko fotografije.
   gd-card-open: kartica gosta pokriva cijeli zaslon na ≤768 — traka bi inače
   stajala preko zadnje radnje kartice („+ Dodaj kontakt", Rasmus R3 K29).
   Ista klasa već gasi dock/FAB u portal-chrome.css. */
body.lb-open .dw-bottom-nav,
body.gd-card-open .dw-bottom-nav { display: none !important; }
/* K39: kartica gosta je full-screen ploha — i GORNJA traka ljuske se miče,
   inače crta preko ✕/„Poruka"/„⋯" u topbaru kartice (izmjereno:
   .couple-topbar je stajala nad .gd-topbar-acts). */
body.gd-card-open .couple-topbar { display: none !important; }

/* Backdrop + ladica (side sheet zdesna, puna visina). Z: backdrop 1040 / panel 1050. */
.cnd-backdrop {
    position: fixed; inset: 0; z-index: var(--z-sheet-backdrop, 1040);
    background: rgba(20, 15, 12, 0);
    backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
    transition: background 280ms ease, backdrop-filter 280ms ease;
}
.cnd-backdrop[hidden] { display: none; }
.cnd-backdrop.is-open { background: rgba(20, 15, 12, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.couple-nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px); height: 100dvh;
    z-index: var(--z-sheet, 1050);
    background: var(--paper);
    border-left: 1px solid var(--ivory);
    box-shadow: -12px 0 40px -16px rgba(45,34,56,0.40);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    overscroll-behavior: contain;
}
.couple-nav-drawer[hidden] { display: none; }
.couple-nav-drawer.is-open { transform: translateX(0); }

.cnd-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px 18px;
    border-bottom: 1px solid var(--ivory);
}
.cnd-home { text-decoration: none; }
.cnd-close {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 50%;
    color: var(--stone); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cnd-close:hover { background: rgba(181,107,141,0.07); color: var(--warm-black); }
.cnd-close svg { width: 22px; height: 22px; }

.cnd-scroll {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
}
.cnd-qn { margin: 4px 6px 8px; }

/* ── Brze akcije bottom-sheet sadržaj (D.1 gost / D.2 fotka, Rasmus nav audit V2) ── */
.dw-sheet-block { margin-bottom: 2px; }
.dw-sheet-eyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cpl-mauve-aa); margin: 0 0 5px; }
.dw-sheet-sub { font-family: var(--font-sans); font-size: 13px; color: var(--stone); margin: 0 0 12px; line-height: 1.5; }
.dw-sheet-input { width: 100%; padding: 11px 14px; border: 1px solid var(--ivory); border-radius: 10px; background: var(--dark-surface, var(--cpl-on-fill-ink)); font-family: var(--font-sans); font-size: 14px; color: var(--charcoal); outline: none; box-sizing: border-box; }
.dw-sheet-input:focus { border-color: var(--cpl-mauve-aa); }
.dw-sheet-linkrow { display: flex; gap: 8px; margin-bottom: 8px; }
.dw-sheet-linkrow .dw-sheet-input { flex: 1; min-width: 0; font-size: 12.5px; }
.dw-sheet-quickform { display: flex; flex-direction: column; gap: 8px; }
.dw-sheet-namerow { display: flex; gap: 8px; }
.dw-sheet-namerow .dw-sheet-input { flex: 1; min-width: 0; }
.dw-sheet-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: opacity .15s, background .18s; }
.dw-sheet-btn--primary { background: var(--cpl-mauve-aa); color: var(--cpl-on-fill-ink); border-color: var(--cpl-mauve-aa); }
.dw-sheet-btn--primary:hover { opacity: 0.88; }
.dw-sheet-btn--ghost { width: 100%; background: transparent; color: var(--cpl-mauve-aa); border-color: rgba(160,90,125,0.4); margin-top: 2px; }
.dw-sheet-or { display: flex; align-items: center; text-align: center; margin: 18px 0; color: var(--stone); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dw-sheet-or::before, .dw-sheet-or::after { content: ''; flex: 1; height: 1px; background: var(--ivory); }
.dw-sheet-or span { padding: 0 12px; }
.dw-sheet-msg { font-family: var(--font-sans); font-size: 12.5px; margin: 10px 0 0; line-height: 1.45; }
.dw-sheet-msg--ok { color: var(--dark-ink-sage, var(--cpl-msg-ok)); }
.dw-sheet-msg--err { color: var(--cpl-msg-err); }
.dw-sheet-msg--warn { color: var(--cpl-msg-warn); }
/* ── „Pozovi goste" (Vedran 2026-08-08) ───────────────────────────────────
   „2 tematske kockice u bojama pozivnica da mogu birati koju žele. Znači 2
   male kockice samo s bojom ljubičastog vrta i zlatnog sata — samo bitan
   središnji izrez iz njih."

   Kockica je zato SREDIŠNJI IZREZ prave naslovnice teme (`background-position:
   center` nad istom slikom koju vidi picker na /mladenci/pozivnice), a ne
   ručno prepisan heks. Ploha koja prepisuje boju razilazi se s temom prvi put
   kad se tema dotjera, i nitko to ne primijeti dok par ne odabere jedno a
   dobije drugo. */
.dw-inv-picks { display: flex; gap: 10px; margin: 0 0 14px; }
.dw-inv-pick {
    flex: 1; min-width: 0; padding: 0; border: 2px solid transparent;
    border-radius: 12px; overflow: hidden; cursor: pointer; background: none;
    display: flex; flex-direction: column; align-items: stretch; text-align: left;
}
.dw-inv-pick-art {
    display: block; width: 100%; aspect-ratio: 1/1; border-radius: 10px;
    background-size: cover; background-position: center;
    background-color: var(--ivory);
}
.dw-inv-pick-name {
    /* 14px i centrirano (Vedran 2026-08-09: „tekst pozivnice centriraj i malo
       povećaj"). Bilo 11.5px i lijevo — naslov IZBORA bio je sitniji od
       pomoćnog teksta ispod njega, a nasljeđivao je `text-align:left` s
       `.dw-inv-pick`. Izmjereno: najduži naziv („Ljubičasti vrt") je pri 14px
       86.7px u kutiji od 166px, pa rezanja ne može biti. */
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--stone); padding: 8px 2px 2px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dw-inv-pick[aria-pressed="true"] { border-color: var(--cpl-mauve-aa); }
.dw-inv-pick[aria-pressed="true"] .dw-inv-pick-name { color: var(--cpl-mauve-aa); }
/* Redak dijeljenja: link pa JEDAN „Podijeli" (makro components/_podijeli.html;
   Vedran 2.9.: Dalia chat prvi, pa kopiraj poveznicu, pa sustavni share). */
.dw-inv-share { display: flex; gap: 8px; align-items: center; }
.dw-inv-share .dw-sheet-input { flex: 1; min-width: 0; font-size: 12.5px; }
/* Tri točkice = napredno. Suptilno i dodatno, kako je i traženo. */
.dw-inv-more {
    display: block; margin: 12px auto 0; padding: 6px 12px; border: none;
    background: none; color: var(--stone); font-family: var(--font-sans);
    font-size: 18px; line-height: 1; letter-spacing: .12em; cursor: pointer;
}
.dw-inv-adv { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ivory); }
.dw-inv-adv[hidden] { display: none; }
.dw-inv-advrow { display: flex; align-items: center; gap: 10px; }
.dw-inv-advrow label { flex: 1; font-family: var(--font-sans); font-size: 13px; color: var(--charcoal); }
.dw-inv-advrow .dw-sheet-input { width: 78px; flex: none; text-align: center; }
.dw-inv-evwrap[hidden] { display: none; }
.dw-inv-events { display: flex; flex-direction: column; gap: 2px; }
.dw-inv-ev { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; }
.dw-inv-ev input { width: 17px; height: 17px; accent-color: var(--cpl-mauve-aa); flex-shrink: 0; }
.dw-inv-ev-t { font-family: var(--font-sans); font-size: 12px; color: var(--stone); min-width: 42px; font-variant-numeric: tabular-nums; }
.dw-inv-ev-n { font-family: var(--font-sans); font-size: 13.5px; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dw-sheet-photo-opt { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--ivory); border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.dw-sheet-photo-opt:hover { border-color: var(--cpl-mauve-aa); background: rgba(160,90,125,0.04); }
.dw-sheet-photo-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(160,90,125,0.10); display: flex; align-items: center; justify-content: center; color: var(--cpl-mauve-aa); }
.dw-sheet-photo-ico svg { width: 20px; height: 20px; }
.dw-sheet-photo-txt { display: flex; flex-direction: column; min-width: 0; }
.dw-sheet-photo-txt strong { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--charcoal); }
.dw-sheet-photo-txt em { font-family: var(--font-sans); font-size: 12px; font-style: normal; color: var(--stone); margin-top: 1px; }
.dw-sheet-photo-progress { margin-top: 6px; }
.dw-sheet-photo-bar { height: 6px; border-radius: 3px; background: var(--ivory); overflow: hidden; }
.dw-sheet-photo-bar > span { display: block; height: 100%; width: 0; background: var(--lilac-400); transition: width .25s; }
body.dark-mode .dw-sheet-input { background: var(--cpl-dark-field); border-color: var(--cpl-dark-border); color: var(--cpl-dark-ink-2); }
body.dark-mode .dw-sheet-photo-opt { border-color: var(--cpl-dark-border); }
body.dark-mode .dw-sheet-photo-txt strong { color: var(--cpl-dark-ink-2); }

.cnd-nav { display: flex; flex-direction: column; }
.cnd-group {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--stone);
    padding: 8px 14px 3px;
}
/* Redak je 48 → 44px, a razmak grupe 14 → 10px (29.8.2026.). Cilj je bio da
   ladica stane bez pomicanja i na 360×640 (izmjereno: 654 px sadržaja na 578 px
   prostora — 76 px preko). 44px je i dalje iznad HIG minimuma dodirne mete, pa se
   dobiva prostor, ne gubi preciznost. Na većim telefonima je i prije stajala. */
.cnd-link {
    display: flex; align-items: center; gap: 13px;
    padding: 10px 14px; min-height: 44px;
    color: var(--charcoal); text-decoration: none;
    border-radius: 11px; transition: background 0.15s;
}
.cnd-link:hover { background: rgba(181,107,141,0.07); }
.cnd-link:active { background: rgba(181,107,141,0.12); }
.cnd-link svg { width: 20px; height: 20px; opacity: 0.62; flex-shrink: 0; }
.cnd-link span { flex: 1; font-size: 15px; line-height: 1.2; }
/* Objašnjenje ispod imena stavke (10.9.2026.): stavka čije ime ne kaže čemu
   služi dobiva jedan kratki red, ne tooltip koji na dodir ne postoji. */
.cnd-sub {
    display: block; margin-top: 3px;
    font-size: 12px; line-height: 1.3; font-weight: 400;
    color: var(--stone);
}
.cnd-link.is-active .cnd-sub { font-weight: 400; }
.cnd-link.is-active { background: rgba(181,107,141,0.10); color: var(--warm-black); font-weight: 600; }
.cnd-link.is-active svg { opacity: 0.9; color: var(--lilac-400); }
.cnd-badge {
    flex: 0 0 auto; min-width: 20px; padding: 1px 7px; box-sizing: border-box;
    border-radius: 10px; background: var(--gold-accent); color: var(--cpl-on-fill-ink);
    font-size: 11px; font-weight: 600; text-align: center;
}

body.dark-mode .couple-nav-drawer { background: var(--cpl-dark-card); border-left-color: var(--cpl-dark-border); }
body.dark-mode .cnd-head { border-color: var(--cpl-dark-border); }
body.dark-mode .cnd-group { color: var(--ink-soft); }
body.dark-mode .cnd-link { color: var(--cpl-dark-ink); }
body.dark-mode .cnd-link:hover { background: var(--cpl-dark-border); }
body.dark-mode .cnd-link.is-active { background: var(--cpl-dark-border); color: var(--dark-ink-strong); }
body.dark-mode .cnd-close { color: var(--ink-soft); }
body.dark-mode .cnd-close:hover { background: var(--cpl-dark-border); color: var(--dark-ink-strong); }

/* Ladica + backdrop nikad na desktopu (☰ je mobile-only). */
@media (min-width: 769px) {
    .couple-nav-drawer, .cnd-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .couple-nav-drawer, .cnd-backdrop { transition: none; }
}

/* ── DARK MODE ── */
body.dark-mode .couple-sidebar {
    background: linear-gradient(180deg, var(--cpl-dark-sunken) 0%, var(--cpl-dark-card) 100%);
    border-right-color: var(--cpl-dark-border);
}
body.dark-mode .couple-sidebar-header { border-bottom-color: var(--cpl-dark-border); }
body.dark-mode .couple-sidebar-header h1 { color: var(--dark-ink-strong); }
body.dark-mode .couple-sidebar-header .couple-greeting { color: var(--ink-soft); }
body.dark-mode .couple-avatar { border-color: var(--cpl-dark-border); }
body.dark-mode .couple-avatar--initial { background: var(--cpl-dark-border); color: var(--ink-soft); }
body.dark-mode .couple-brand-editor { color: var(--ink-soft); }
body.dark-mode .couple-sidebar-bottom { border-top-color: var(--cpl-dark-border); }
body.dark-mode .couple-sidebar-nav .couple-nav-section { color: var(--ink-soft); }
body.dark-mode .cp-nav { color: var(--cpl-dark-ink); }
body.dark-mode .cp-nav svg { stroke: var(--cpl-dark-ink); }
body.dark-mode .cp-subnav a { color: var(--ink-soft); }
/* Aktivna stavka glavne navigacije: isti problem kao podizbornik — ružičasti
   veo (rgba(255,214,227,.34)) je u dark modu ostajao svijetao pod mauve tekstom. */
/* !important jer i .cp-active gore nosi !important (light pravilo) — bez toga
   ružičasti veo pobjeđuje i u dark modu. */
body.dark-mode .cp-nav.cp-active,
body.dark-mode .cp-nav:hover { background: rgba(181,107,141,0.20) !important; color: var(--dark-ink-strong) !important; }
body.dark-mode .cp-nav.cp-active svg,
body.dark-mode .cp-nav:hover svg { stroke: var(--dark-ink-strong) !important; color: var(--dark-ink-strong) !important; }
/* Skip-link: zlatna podloga + var(--warm-black) tekst, koji u dark modu
   posvijetli → svijetlo na zlatnom. Na zlatu tekst mora ostati taman. */
body.dark-mode .skip-to-content { color: var(--hero-ink) !important; }
/* Leaflet (atlas/logistika) crta vlastiti chrome s fiksnim light bojama. */
body.dark-mode .leaflet-control-attribution {
    background: rgba(26,23,20,0.82) !important; color: var(--ink-soft) !important;
}
body.dark-mode .leaflet-control-attribution a { color: var(--cpl-dark-ink-6) !important; }
/* Aktivna/hover stavka podizbornika: ružičasta podloga (rgba(255,214,227,.34))
   je u dark modu ostajala svijetla ispod prigušenog sivog teksta — 2.35:1.
   U dark ide mauve veo na tamnom, tekst svijetli. */
body.dark-mode .cp-subnav a:hover { background: rgba(181,107,141,0.18); color: var(--dark-ink-strong); }
body.dark-mode .cp-subnav a.cp-subnav-active {
    background: rgba(181,107,141,0.22); color: var(--dark-ink-strong);
    box-shadow: inset 0 0 0 1px rgba(181,107,141,0.45);
}
body.dark-mode .cp-subnav a.cp-subnav-active svg,
body.dark-mode .cp-subnav a:hover svg { color: var(--dark-ink-strong); stroke: var(--dark-ink-strong); }
/* Akvarel dark mode (2026-06-03): main ostaje transparent, tamna baza ide na
   body (jer html,body je inače cream), a akvarel se sakrije — pastel @ 0.12 nad
   tamnom je muljav i paper-veo bi blijedio u cream. Tamnu varijantu kasnije. */
body.dark-mode { background: var(--body-bg); }
body.dark-mode .couple-main { background: transparent; color: var(--cpl-dark-ink); }
body.dark-mode .dp-aquarelle { display: none; }
body.dark-mode .couple-topbar { background: rgba(30,28,26,0.92); border-bottom-color: var(--cpl-dark-border); }
body.dark-mode .couple-topbar h1 { color: var(--dark-ink-strong); }
body.dark-mode .notif-bell { color: var(--ink-soft); }
body.dark-mode .notif-bell:hover { color: var(--gold-accent); background: rgba(181,107,141,0.1); }

/* Re-apply couple-portal-content dark mode from design_tokens.
   Tokeni stoje na <body>, NE na .couple-main (2026-07-26): fiksirani UI —
   modali, ladice, bottom sheet, košarica, toastovi, chat dock — renderira se
   izvan maina, pa je s .couple-main scopeom zadržavao SVIJETLE tokene dok mu je
   tekst već bio svijetao (naslijeđen s bodyja) → bijelo na bijelom. */
body.dark-mode {
    --cream: var(--cpl-dark-sunken); --ivory: var(--cpl-dark-veil); --body-bg: var(--cpl-dark-ground);
    --card-bg: var(--cpl-dark-card); --charcoal: var(--cpl-dark-ink); --warm-black: var(--dash-ink-dark);
    --stone: var(--hero-meta-dark); --input-bg: var(--cpl-dark-sunken); --input-border: var(--cpl-dark-border);
    --border-subtle: var(--cpl-dark-border); --hover-bg: var(--cpl-dark-veil);
    --page-gradient-1: var(--cpl-dark-ground); --page-gradient-2: var(--cpl-dark-sunken);
    --text-primary: var(--dash-ink-dark); --text-secondary: var(--cpl-dark-ink);
    /* --text-tertiary nosi PROZU (page-header p, empty-state-sub, label), ne samo
       ambijent, pa ide na točno 4.50:1 nad plohom (var(--cpl-dark-ink-5) je davao 3.98).
       --text-muted (2.89:1) ostaje tih — smije, dok ne nosi ništa na što se klika. */
    --text-body: var(--hero-meta-dark); --text-tertiary: var(--cpl-dark-ink-3); --text-muted: var(--cpl-dark-ink-4);

    /* Izvedeni paper/ink tokeni (dalia-portal.css :root) MORAJU se prevesti
       eksplicitno. `--ink: var(--warm-black)` razrješava se u trenutku
       deklaracije na :root — kad dark ovdje redefinira --warm-black, --ink to
       NE vidi i ostaje tamna tinta. Posljedica je bila "fontovi su i dalje crni"
       (Bruno 2026-07-26) i bijele ladice/modali kroz var(--paper). */
    --paper:        var(--cpl-dark-ground);
    --paper-2:      var(--cpl-dark-veil);
    --paper-soft:   var(--cpl-dark-sunken);
    --ink:          var(--cpl-dark-ink);
    --ink-soft:     var(--hero-meta-dark);
    /* --ink-mute nosi sitni tisak (fusnote na paketima); na svjetlijoj plohi
       (var(--cpl-dark-surface-2)) je #6B6962 davao 2.66:1. Podignut na 3.98:1, i dalje stepen ispod
       --ink-soft da hijerarhija ostane. */
    --ink-mute:     var(--cpl-dark-ink-5);
    --ink-faint:    var(--cpl-dark-hair);   /* == --dark-line, hairline je hairline */
    --lilac-100:    var(--cpl-dark-veil);   
/* alias --ivory u :root */
    /* Tamne stepenice brand rampi su u dark modu preslabe kao TEKST na tamnoj
       plohi (sage-700 #4d6053 → 2.3:1, lilac-700 → 2.6:1). Dižemo ih na svjetliji
       stepen iste rampe — ton ostaje isti.
       GOTCHA: isti tokeni ponegdje služe kao ISPUNA (notif badge, hover puni
       gumb) s bijelim tekstom. Ta mjesta su ispod prikovana na light vrijednost
       (`body.dark-mode …{background:var(--cpl-dark-plum-fill)}`) — kad dodaješ novu punu plohu na
       ovim tokenima, prikuj je i ti, inače bijeli tekst nestane. */
    --sage-700:     var(--cpl-dark-sage);
    --sage-500:     var(--cpl-dark-sage-soft);
    --lilac-700:    var(--cpl-dark-lilac);
    --butter-700:   var(--cpl-dark-butter);
    /* --gold-deep NAMJERNO nije ovdje (Rasmus P0-2). Na mladenačkom portalu se
       razrješava u duboku mauve (--gold-accent → --color-deep-mauve #b56b8d), ne u
       zlato, i radi i tintu i ispunu. Podizanje mu je mijenjalo OBITELJ boje i
       tjeralo pinove po ispunama. Tekstualne upotrebe idu na --dark-ink-mauve. */
}
/* Pune plohe na tim tokenima — ostaju tamne da bijeli tekst preživi. */
body.dark-mode .notif-badge { background: var(--cpl-dark-plum-fill); }

/* ── Tailwind utility klase u dark modu ──────────────────────────────────
   Dio couple stranica (nadogradnja, pretplata, poklon-kartice) je pisan
   Tailwind utilityjima iz output.css. Te klase nose fiksne light vrijednosti
   pa su ostajale bijele plohe s gotovo crnim tekstom. Prevodimo samo neutralnu
   sivu rampu — semantičke (crvena, zelena, žuta) ostaju. */
body.dark-mode .couple-main :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-neutral-50) {
    background-color: var(--dark-surface) !important;
}
body.dark-mode .couple-main :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700, .text-slate-800) {
    color: var(--cpl-dark-ink) !important;
}
body.dark-mode .couple-main :is(.text-gray-600, .text-gray-500, .text-slate-500) { color: var(--ink-soft) !important; }
body.dark-mode .couple-main :is(.border-gray-100, .border-gray-200, .border-slate-200) { border-color: var(--cpl-dark-border) !important; }

/* ── Dark-only tokeni (2026-07-26) ─────────────────────────────────────────
   Dark mode je do sada bio POPIS klasa (.cd-card, .g-card, .set-card…) — svaka
   nova ploha u page <style> bloku ostajala je bijela dok je netko ne doda u
   popis. Zato je pola mladenačkog portala bilo pola-tamno.

   Ovi tokeni postoje SAMO u dark scopeu. Page CSS ih koristi kao omotač oko
   vlastite svijetle vrijednosti:

       background: var(--dark-surface, white);
       color:      var(--dark-ink-strong, #2A1F2E);

   U light modu token ne postoji → vrijedi fallback → svijetla tema je
   bit-identična kao prije. U dark modu token pobijedi. Nova ploha se ne mora
   nigdje registrirati; dovoljno je omotati vrijednost.

   Stoje na <body>, ne na .couple-main, da ih naslijedi i fiksirani chrome koji
   živi izvan mainа (notif panel, drawer, dockovi). */
body.dark-mode {
    /* Ljestvica ploha (Rasmus P1-7): prve vrijednosti (#252220 / #3A3530) davale su
       podloga→ploha 1.13 i vlas→ploha 1.30 — ploha koja tehnički postoji, a oku ne.
       Dalia je papir, jedna ploha: ne dodajemo stepenice, nego postojeću činimo
       stvarnom. Sad podloga→ploha 1.22, vlas nad plohom 1.39. */
    --dark-surface:    var(--cpl-dark-surface-2);   /* ploha kartice */
    --dark-sunk:       var(--cpl-dark-sunken);   /* uvučena ploha — rupa NATRAG u podlogu (1.05 od tijela je namjerno) */
    --dark-line:       var(--cpl-dark-hair);   /* hairline, razdjelnik */
    --dark-ink:        var(--cpl-dark-ink);   /* tekst na plohi */
    --dark-ink-strong: var(--dash-ink-dark);   /* naslov, naglašeni tekst */
    /* Ispuna punog gumba. Dvije rupe koje pokriva (Bruno 2026-07-26):
       (a) `background: var(--warm-black); color:var(--cpl-on-fill-ink)` — u dark modu --warm-black
           postane SVIJETAO (#E8DED0), pa je bijeli tekst nestao na bijelom;
       (b) `background:var(--cpl-dark-veil)` — literal tamni gumb ostaje crn na tamnoj podlozi,
           bez ijednog ruba kontrasta.
       --dark-fill je ispuna PRIMARNE akcije na ~34 mjesta. Prva vrijednost je bila
       ista kao --dark-line (Rasmus P1-3): u svijetlom su te ispune ~10:1 i najglasnija
       stvar na kartici, a u tamnom su padale na 1.30 — najtiša. Primarna akcija je
       prelaskom teme mijenjala mjesto u hijerarhiji. Uz to su se mirno stanje i hover
       razrješavali na isti heks, pa gumb nije priznavao pokazivač. Sad ima vlastitu
       vrijednost i vlastiti hover. Gumbi koji tekst vode kroz var(--paper) se NE
       diraju — oni se korektno invertiraju sami. */
    --dark-fill:       var(--cpl-dark-fill);   /* 1.93 nad plohom; bijeli tekst 7.6:1 */
    --dark-fill-hover: var(--cpl-dark-fill-hover);   /* 1.26 nad ispunom; bijeli tekst 6.0:1 */
    /* Obojena tinta: svjetliji stepen SVOJE rampe, NIKAD nova nijansa (Rasmus P1-8).
       Prve vrijednosti za šljivu i ružu su odlutale +15° u magentu odnosno −20° u
       roza — to je bila peta ljubičasta u sustavu. Sad plum = --lilac-400, potpisna
       Dalia lila koja već postoji; rose na zraci --rose-500. */
    --dark-ink-plum:   var(--lilac-400);   /* == --lilac-400 */
    --dark-ink-sage:   var(--cpl-dark-sage);
    --dark-ink-rose:   var(--cpl-dark-rose);
    --dark-ink-gold:   var(--cpl-dark-butter);
    /* Mauve tinta za tekstualne upotrebe --gold-deep (koji na ovom portalu NIJE
       zlato nego duboka mauve #b56b8d). Sam --gold-deep se u tamnom NE dira: token
       radi i tintu i ispunu, pa bi podizanje razbilo ispune i tražilo pinove. */
    --dark-ink-mauve:  var(--cpl-dark-mauve);

    /* Status badgevi: podloga im je rgba tinta (18%), pa se nad tamnom plohom
       kompozitira u tamnu mrlju, a tinta je ostajala svijetlomodna tamna —
       "Ne" pilula je izmjerena na 1.80:1 (Rasmus P1-5). Odbijenica je podatak koji
       par traži PRVI; ne smije biti najskrivenija stvar na ekranu. Tinte idu na
       svjetliji stepen vlastite rampe, isti obrazac kao --dark-ink-*. */
    --badge-danger-fg:  var(--dark-ink-rose);
    --badge-success-fg: var(--dark-ink-sage);
    --badge-warning-fg: var(--dark-ink-gold);
    --badge-neutral-fg: var(--dark-ink);
}
body.dark-mode .couple-main .page-header,
body.dark-mode .couple-main .cd-card,
body.dark-mode .couple-main .stat-card,
body.dark-mode .couple-main .tab-bar,
body.dark-mode .couple-main .wl-product,
body.dark-mode .couple-main .g-card,
body.dark-mode .couple-main .seat-card,
body.dark-mode .couple-main .inv-card,
body.dark-mode .couple-main .gal-card,
body.dark-mode .couple-main .set-card,
body.dark-mode .couple-main .card {
    background: var(--card-bg) !important; color: var(--cpl-dark-ink) !important;
}
/* Inline stilovi: hvatamo sve pravopise bijele (white / #fff / #ffffff, sa i bez
   razmaka, background i background-color), na BILO KOJEM elementu — prije je
   selektor bio vezan samo na div. `i` zastavica pokriva #FFF/WHITE. Ploha koja mora ostati
   svijetla i u dark modu (papir pozivnice, QR, print predložak) nosi
   data-theme-lock na sebi ili na roditelju. */
body.dark-mode .couple-main [style*="background:white" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background: white" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background:#fff" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background: #fff" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background-color:white" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background-color: white" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background-color:#fff" i]:not([data-theme-lock]):not([data-theme-lock] *),
body.dark-mode .couple-main [style*="background-color: #fff" i]:not([data-theme-lock]):not([data-theme-lock] *) {
    background: var(--card-bg) !important; color: var(--cpl-dark-ink) !important;
}
body.dark-mode .couple-main .modal-overlay > div,
body.dark-mode .couple-main [style*="background:white"][onclick] {
    background: var(--card-bg) !important; color: var(--cpl-dark-ink) !important;
}
body.dark-mode .couple-main input,
body.dark-mode .couple-main select,
body.dark-mode .couple-main textarea {
    background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--cpl-dark-ink) !important;
}
body.dark-mode .couple-main .cd-textarea,
body.dark-mode .couple-main .cd-input {
    background: transparent !important; border-color: var(--input-border) !important; color: var(--cpl-dark-ink) !important;
}
body.dark-mode .couple-main .cd-qa-item { background: var(--cream) !important; }
body.dark-mode .couple-main .wl-gift-row { border-color: var(--border-subtle) !important; }
body.dark-mode .couple-main .wl-gift-row:hover { background: var(--hover-bg) !important; }
body.dark-mode .couple-main .stat-grid { background: var(--border-subtle) !important; }
body.dark-mode .couple-main table { color: var(--cpl-dark-ink); }
body.dark-mode .couple-main th { color: var(--stone) !important; border-color: var(--border-subtle) !important; }
body.dark-mode .couple-main td { border-color: var(--border-subtle) !important; color: var(--cpl-dark-ink) !important; }
body.dark-mode .couple-main tr:hover td { background: var(--hover-bg) !important; }
/* Tekstualni linkovi u dark modu idu na akcent. Iznimka: <a> koji je zapravo
   PUNI GUMB (cta/pill/action/chip/tag) — njemu je pozadina već taj isti akcent,
   pa je blanket pravilo bojalo tekst u boju podloge i gumb je ostajao prazan
   (Bruno 2026-07-26: "na rasporedu ne vidim tekst gumba"). Filled <a> zadržava
   vlastitu boju teksta. */
/* Specifičnost mora ostati (0,0,1): dovoljno da nadjača `a{color:inherit}` iz
   dalia-portal.css (dolazi ranije u kaskadi), a premalo da pregazi BILO KOJE
   stranično pravilo s klasom. Zato je i `.dark-mode` i sadržaj `:not()` unutar
   `:where()` — `:not([class*="btn"])` inače nosi specifičnost svog argumenta
   (0,1,0) i pravilo je i dalje gazilo pune gumbe (.hp-art-deep, .hp-support a):
   tekst je dobivao boju vlastite podloge i gumb je ostajao prazan. */
:where(body.dark-mode .couple-main) a:not(:where([class*="btn"], [class*="cta"], [class*="pill"], [class*="action"], [class*="chip"], [class*="tag"])) { color: var(--gold-accent); }

/* ── Theme toggle ikona swap (Luka 2026-06-07) — mjesec u light, sunce u dark ── */
#dwThemeToggle .dw-theme-icon { width: 18px; height: 18px; flex-shrink: 0; }
#dwThemeToggle .dw-theme-icon--sun { display: none; }
body.dark-mode #dwThemeToggle .dw-theme-icon--moon { display: none; }
body.dark-mode #dwThemeToggle .dw-theme-icon--sun { display: inline-block; }
body.dark-mode #dwThemeToggle .dw-theme-label::after { content: ' uključen'; opacity: .6; font-weight: 400; }