/* ============================================================
   stil-base.css — del 1/12
   Designsystem/tokens, mørk modus-grunnlag, header, knapper, avatarer,
   selects, timeline-basis, event-kort, modaler, toast, KPI, org-modalens
   kjerne (eventer/ansatte/roller/maler), Mitt arbeid, event-innstillinger,
   sammendragskolonne, AI-modaler/sidepanel, kjøreplan (kpd-/uh-)
   Del av styles.css-splitten (2026-08-07). Lastes i FAST rekkefølge —
   kildeorden er kaskade-bærende (primitivene i stil-tema.css vinner ved
   lik spesifisitet fordi de kommer sist). Ny fil? Oppdater Index.html
   (statisk lenke eller DESKTOP_STIL i loaderen) OG alle test-*.html.
   ============================================================ */
    /* ==========================================
       DESIGN SYSTEM
       ========================================== */
    :root {
      --col-width: 140px;
      --primary: #F71B00;
      --primary-dark: #CC1500;
      --bg: #FFF2E9;
      --bg-panel: #2A2A2A;
      --surface: #FFFFFF;
      --text: #1D1D1D;
      --text-muted: #7A6E68;
      --border: #E5D8CF;
      --accent: #2563eb;
      /* Semantiske statusfarger (2026-08-07): ÉN grønn/amber/rød for ok/obs/feil.
         Før fantes 5 grønntoner og 3 tint-baser for «godkjent» — samme semantikk
         skal se lik ut i budsjett, bemanning, oppgaver, booking og mobil. */
      --st-ok-bg: #DCF5E7;   --st-ok-tekst: #047857;   --st-ok-tint: 16,185,129;
      --st-obs-bg: #FEF3C7;  --st-obs-tekst: #B45309;  --st-obs-tint: 245,158,11;
      --st-feil-bg: #FDECEA; --st-feil-tekst: #B42318; --st-feil-tint: 239,68,68;
      /* «-adaptiv»: statustekst som følger TEMAET. De tre over gjør ikke det —
         de er definert kun her i lys utgave (se .ev-oppsett lenger nede), så
         flater i mørk modus har måttet skrive sin egen `body.dark-mode … color:
         #FCD34D`-regel ved siden av hver eneste bruk. Disse to gjør det unødig.
         Bevisst ADDITIVE: de 233 stedene som bruker --st-*-tekst er urørt, for
         -tekst og -bg må byttes i PAR (lys tekst på --st-obs-bg #FEF3C7 blir
         gul-på-gult) og det er en egen runde gjennom hele mørk modus. */
      --st-obs-tekst-adaptiv: #B45309;
      --st-feil-tekst-adaptiv: #DC2626;
      /* Samme grep for merkerødt SOM TEKST. --primary-dark er definert kun her,
         i lys utgave, og ble brukt som tekstfarge på --primary-pill i aktive
         nav-knapper, piller og merker. I mørk modus er den pilla nesten sort
         (color-mix mot #212329), og #CC1500 målte 2,2:1 mot den — under AA på
         nøyaktig det elementet som skal si «du er her». Målt, ikke antatt:
         2,2 på pill, 2,8 på --surface, 3,1 på --bg.
         GJELDER KUN `color:`. --primary-dark er fortsatt riktig som BAKGRUNN
         (hover på primærknapper) — bytter du den, blir hover lyserosa.
         Flater som pinner den lyse paletten (#aiPanel, #org-page-familien) må
         pinne DENNE i samme slengen, ellers får de lys rød tekst på hvitt kort
         i mørk modus — 2,3:1, verre enn feilen dette retter. */
      --primary-dark-adaptiv: #CC1500;
      /* Modal-tokens (2026-08-07): felles backdrop, radius og skygge. z-skalaen
         er dokumentasjon for NYE flater — eksisterende z-verdier står urørt
         til stablingsrekkefølgen mellom modulene er kartlagt. */
      --overlay-bg: rgba(29, 29, 29, 0.45);
      --overlay-blur: 3px;
      --modal-r: 14px;
      --modal-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
      --z-modal: 2600; --z-toast: 6000; --z-popover: 9000;
      /* Dialogen (bekreft/varsle/sporTekst) åpnes som regel OPPÅ noe annet
         — en modal, et popover, offline-banneret på 99999. Den er alltid
         det øverste, ellers ber vi om en bekreftelse brukeren ikke ser. */
      --z-dialog: 100000;
      /* Felt-tokens (2026-08-07): én skjemafelt-geometri og én fokusring */
      --felt-pad: 9px 11px;
      --felt-r: 9px;
      --fokus-ring: 0 0 0 3px var(--primary-pill);
      /* Animasjonstokens (2026-08-07): ALL inngangsbevegelse i appen leser
         disse — juster nivået ETT sted. --anim-nivaa skalerer varighet,
         stagger og avstand samlet: 0 = av, 1 = standard, 1.5 = tydeligere.
         Enkelttokens kan også overstyres hver for seg. Ambient bevegelse
         (puls, skeleton-skimmer) skaleres bevisst IKKE — den er tempo, ikke
         nivå, og en uendelig animasjon med 0s varighet er udefinert. */
      --anim-nivaa: 1;
      --anim-kurve: cubic-bezier(.2, .85, .3, 1);
      --anim-tid: calc(.52s * var(--anim-nivaa));          /* kort-/rad-innfall */
      --anim-tid-panel: calc(.4s * var(--anim-nivaa));     /* fane-/panel-innfall */
      --anim-tid-hurtig: calc(.26s * var(--anim-nivaa));   /* chips, småfades */
      --anim-stagger: calc(38ms * var(--anim-nivaa));      /* forsinkelse per listeelement */
      --anim-avstand: calc(16px * var(--anim-nivaa));      /* løftehøyde kort */
      --anim-avstand-panel: calc(10px * var(--anim-nivaa));/* løftehøyde panel/fane */
      /* --el-designtokens (2026-08-07): var duplisert ordrett i 13 komponent-
         skop (mobil-org, årshjul, racesim m.fl.) — samlet her. Bevisst
         LITERALER, ikke aliaser mot --bg/--text: el-flatene skal forbli cream
         også i mørk modus. --el-purple avviker per modul og står igjen lokalt. */
      --el-cream: #FFF2E9;
      --el-cream-2: #F0E5DC;
      --el-cream-3: #FFFCF8;
      --el-paper: #FFFFFF;
      --el-ink: #1D1D1D;
      --el-ink-2: #2A2A2A;
      --el-ink-3: #3A3A3A;
      --el-muted: #7A6E68;
      --el-line: #E5D8CF;
      --el-line-2: #C8B8AD;
      --el-red: #F71B00;
      --el-red-dark: #CC1500;
      --el-red-soft: rgba(247, 27, 0, 0.12);
      --el-amber: #FBBF24;
      --el-amber-soft: rgba(251, 191, 36, 0.20);
      --el-emerald: #10B981;
      --el-emerald-soft: rgba(var(--st-ok-tint), 0.14);
      --el-blue: #3B82F6;
      --el-blue-soft: rgba(59, 130, 246, 0.14);
      --bg2: #F0E5DC;
      --card: rgba(255,255,255,0.05);
      --card-hover: rgba(255,255,255,0.09);
      /* Org-modal A+B tokens */
      --ink-soft: #5C5048;
      --line-soft: #D6C7BC;
      --amber: #F59E0B;
      --amber-soft: rgba(251,191,36,0.15);
      --amber-text: #9A6E0A;
      /* AI-lilla: fargen alt maskingenerert bærer (badges, AI-punkter,
         forslagsbokser). Var duplisert som literal #7C3AED / rgba(124,58,237)
         et dusin steder før 16.08.2026 — samme trippel som --amber, og
         -text har egen mørk utgave fordi #7C3AED er for mørk mot #16171C. */
      --ai-lilla: #7C3AED;
      --ai-lilla-soft: rgba(124,58,237,0.15);
      --ai-lilla-text: #6D28D9;
      --primary-pill: #FFE7DD;
      --header-dark: #1D1D1D;
      /* Kommandopulten — mørk flate på cream. MÅ finnes i begge temaer:
         en mørk flate som ikke løftes i mørk modus forsvinner i grunnen
         (DESIGN.md §2). Mørk utgave i body.dark-mode. */
      --pult-bg: #1D1D1D;
      --pult-kant: #1D1D1D;
      --paper: #FFF8F1;
      --header-panel-height: 215px;
      --area-header-height: 40px;
      --loc-header-height: 50px;
      --hour-height: 120px;
      --half-hour-height: 60px;
      --quarter-height: 30px;
    }

    /* ==========================================
       MØRK MODUS — ekte mørkt tema
       Lys = default cream-tema (:root ovenfor). Mørk redefinerer kjerne-
       variablene her, + overstyrer hardkodede lyse flater i egen blokk lenger
       ned (søk: "DARK-MODE OVERRIDES"). color-scheme gjør native kontroller,
       scrollbars og datovelgere mørke.
       ========================================== */
    body.dark-mode {
      color-scheme: dark;
      --bg: #16171C;
      --bg2: #1C1D23;
      --surface: #212329;
      --bg-panel: #16171C;
      --text: #ECEDF0;
      --text-muted: #9A9EA8;
      --border: rgba(255,255,255,0.11);
      --line-soft: rgba(255,255,255,0.08);
      --ink-soft: #C2C6CE;
      --paper: #212329;
      --card: rgba(255,255,255,0.045);
      --card-hover: rgba(255,255,255,0.085);
      --primary-pill: color-mix(in srgb, var(--primary) 26%, #212329);
      /* 5,5:1 mot pilla over, 6,8 mot --surface, 7,8 mot --bg. Samme verdi som
         .sup-ai-btn alt brukte for rød tekst på mørkt — ingen ny hue. */
      --primary-dark-adaptiv: #FF8A75;
      --amber-soft: rgba(251,191,36,0.16);
      --amber-text: #F0C24B;
      --ai-lilla: #A78BFA;
      --ai-lilla-soft: rgba(167,139,250,0.18);
      --ai-lilla-text: #C4B5FD;
      /* Samme gulen flatene i stil-tema.css skrev for hånd; rød lysnes fordi
         #DC2626 mot #16171C bare så vidt er lesbar (≈4,2:1). */
      --st-obs-tekst-adaptiv: #FCD34D;
      --st-feil-tekst-adaptiv: #F87171;
      --header-dark: #101116;
      /* Kommandopulten (Oversikt-heroen, «Live nå»-kortet) er «mørk flate på
         cream». Her er grunnen selv nesten like mørk, så pulten må LØFTES for
         å beholde skillet — ikke beholde #1D1D1D, som forsvinner i
         bakgrunnen. Lys utgave står i :root. */
      --pult-bg: #2B2D36;
      --pult-kant: #3E414D;
    }

    .spinner {
      border: 4px solid rgba(255,255,255,0.15);
      border-top: 4px solid white;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* ==========================================
       EVENTLAB-MERKET (.elab-*)
       Geometrien til selve merket er fasit i icons/favicon.svg — her bor bare
       lockup-typografien og bevegelsen. Markup-kontrakt: <svg> med klassen
       .elab-merke, og de fire rektanglene MERKET med .elab-strek (spina i
       tillegg med .elab-strek--spine) — uten de klassene treffer ikke
       animasjonen. app-core.js sin eventlabMerke() skriver riktig markup;
       de statiske flatene (Index.html, superadmin.html, support/) har den
       inline fordi de rendres før JS-en har kjørt.
       ========================================== */
    .elab-logo { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
    .elab-logo--vertikal { flex-direction: column; gap: 14px; text-align: center; }
    .elab-merke { display: block; flex-shrink: 0; }
    .elab-tekst { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .elab-logo--vertikal .elab-tekst { align-items: center; }
    .elab-ord {
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.12em;
      line-height: 1;
      color: #fff;
      /* letter-spacing legger luft ETTER hvert tegn — også det siste. Uten
         denne motvekten er tekstboksen 0.12em bredere enn glyfene, og en
         sentrert lockup står synlig for langt til venstre. */
      margin-right: -0.12em;
    }
    .elab-tagline {
      font-family: 'Inter', -apple-system, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      font-weight: 600;
      font-size: 10px;
      line-height: 1.5;
      /* 0.42 ga 4,45:1 mot #1D1D1D — så vidt under AA-kravet på 4,5:1.
         0.5 gir 5,0:1. Målt i prod 17.08.2026. */
      color: rgba(255,255,255,0.5);
    }
    .elab-logo--lys .elab-ord { color: #1D1D1D; }
    .elab-logo--lys .elab-tagline { color: rgba(0,0,0,0.55); }
    /* Luft ned til innholdet under (login-, org-velger- og invitasjonsskjermen) */
    .elab-logo--luft { margin-bottom: 38px; }

    /* Innloggingsfeltene er placeholder-only, så placeholderen ER etiketten.
       Uten en egen regel arvet den nettleserens standardfarge — målt til
       rgb(117,117,117) mot feltbakgrunnen rgb(43,43,43) = 3,07:1, altså under
       AA-kravet på 4,5:1 for det eneste som forteller hva feltet er.
       0.62 gir 6,0:1. Feltene ligger inline-stilet i Index.html; dette er den
       eneste kroken CSS har på dem. */
    #login-screen input::placeholder { color: rgba(255,255,255,0.62); opacity: 1; }

    /* ── Org-velgeren på login-skjermen ──────────────────────────────
       Mørk flate med vilje (samme skjerm som login/oppstart). Kortene
       følger appens kort-idiom: monogram-flis i merkerødt (ekko av
       app-ikonet), navn, rollebrikke i mono-caps og pil som våkner på
       hover (§6-hovermønsteret). Hvit-alfaene er målt mot #1D1D1D:
       0.72 ≈ 7:1 (mono-brikken), 0.45 er kun dekor-pilen. */
    .orgvelg-liste {
      display: flex; flex-direction: column; gap: 10px;
      width: 100%; max-width: 380px;
      font-family: 'Inter', -apple-system, sans-serif;
    }
    .orgvelg-kort {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      text-decoration: none; color: #fff;
      transition: transform 0.15s, border-color 0.15s, background 0.15s;
    }
    .orgvelg-kort:hover {
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      background: color-mix(in srgb, var(--primary) 8%, transparent);
      transform: translateY(-1px);
    }
    .orgvelg-kort:hover .orgvelg-pil { opacity: 1; transform: translateX(3px); }
    .orgvelg-kort:active { transform: scale(0.98); }
    .orgvelg-monogram {
      width: 44px; height: 44px; flex-shrink: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 19px; letter-spacing: 0.05em;
    }
    .orgvelg-tekst {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
    }
    .orgvelg-navn {
      max-width: 100%;
      font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .orgvelg-rolle {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 2px 8px; border-radius: 999px;
    }
    .orgvelg-pil {
      flex-shrink: 0;
      color: rgba(255,255,255,0.45);
      opacity: 0.7;
      transition: opacity 0.15s, transform 0.15s;
    }

    /* ── Bevegelse ──────────────────────────────────────────────────────
       To moduser: --animert = engangs-innfall (logg inn, invitasjon,
       org-velger), --laster = loop (lasteskjermen). Begge konsumerer
       --anim-*-tokens med fallback, jf. DESIGN.md §5b, og ligger i én
       prefers-reduced-motion-blokk. transform-box: fill-box er påkrevd —
       uten den regnes transform-origin fra SVG-ets viewBox-origo, ikke fra
       strekens egen boks, og strekene ville skutt ut av merket. */
    @media (prefers-reduced-motion: no-preference) {
      .elab-merke--animert .elab-strek,
      .elab-merke--laster .elab-strek {
        transform-box: fill-box;
        transform-origin: left center;
      }
      .elab-merke--animert .elab-strek--spine,
      .elab-merke--laster .elab-strek--spine { transform-origin: center top; }

      /* backwards, ALDRI both: en fylt animasjon overstyrer senere
         stilendringer på samme egenskap og ville låst opacity på 1 */
      .elab-merke--animert .elab-strek {
        animation: elabStrekInn calc(var(--anim-tid, .52s) * 1.15) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) backwards;
      }
      .elab-merke--animert .elab-strek--spine { animation-name: elabSpineInn; }
      .elab-merke--animert .elab-strek--1 { animation-delay: calc(var(--anim-stagger, 38ms) * 2); }
      .elab-merke--animert .elab-strek--2 { animation-delay: calc(var(--anim-stagger, 38ms) * 4); }
      .elab-merke--animert .elab-strek--3 { animation-delay: calc(var(--anim-stagger, 38ms) * 6); }

      /* Loopen tegner merket opp strek for strek, HOLDER det ferdig det meste
         av runden, og fader ut før den starter på nytt. En ren puls fram og
         tilbake (strekene krympet mot 1/3 midt i syklusen) leste som et
         ødelagt ikon, ikke som en logo som tegnes. */
      .elab-merke--laster .elab-strek {
        animation: elabStrekLoop 2.1s var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) infinite;
      }
      .elab-merke--laster .elab-strek--spine { animation-name: elabSpineLoop; }
      .elab-merke--laster .elab-strek--1 { animation-delay: .1s; }
      .elab-merke--laster .elab-strek--2 { animation-delay: .2s; }
      .elab-merke--laster .elab-strek--3 { animation-delay: .3s; }

      /* Oppstartsflata (.oppstart-*, under). Kun i FULL modus: --fortsett er
         andre sidelast i samme oppstart, og en logo som tegnes på nytt ville
         avslørt at sida ble lastet om; --stille er refresh, der dekket kun
         skal hindre login-blinket. */
      html.oppstart-full .oppstart-merke {
        animation: oppstartMerke calc(var(--anim-tid, .52s) * .6) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) backwards;
      }
      html.oppstart-full .oppstart-ord {
        animation: oppstartOrd calc(var(--anim-tid, .52s) * .9) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) .30s backwards;
      }
      html.oppstart-full .oppstart-spor  { animation: oppstartTon var(--anim-tid, .52s) ease .42s backwards; }
      html.oppstart-full .oppstart-tekst { animation: oppstartTon var(--anim-tid, .52s) ease .52s backwards; }
      html.oppstart-full .oppstart-bunn  { animation: oppstartTon var(--anim-tid, .52s) ease .68s backwards; }
    }

    /* Redusert bevegelse: lasteskjermen MÅ fortsatt vise at noe skjer, så
       den beholder en rolig opacity-puls (ingen forflytning/skalering). */
    @media (prefers-reduced-motion: reduce) {
      .elab-merke--laster .elab-strek { animation: elabDemp 1.75s ease-in-out infinite; }
      .elab-merke--laster .elab-strek--1 { animation-delay: .13s; }
      .elab-merke--laster .elab-strek--2 { animation-delay: .26s; }
      .elab-merke--laster .elab-strek--3 { animation-delay: .39s; }
    }

    @keyframes elabStrekInn { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes elabSpineInn { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes elabStrekLoop {
      0%        { transform: scaleX(0); opacity: 0; }
      17%, 76%  { transform: none;      opacity: 1; }
      92%, 100% { transform: none;      opacity: 0; }
    }
    @keyframes elabSpineLoop {
      0%        { transform: scaleY(0); opacity: 0; }
      17%, 76%  { transform: none;      opacity: 1; }
      92%, 100% { transform: none;      opacity: 0; }
    }
    @keyframes elabDemp { 0%, 100% { opacity: 1; } 45% { opacity: .38; } }

    /* ==========================================
       MOBIL-OPPSTART (.oppstart-*)
       Ett dekke som eier hele oppstarten på ≤768 px — også innloggingen og
       redirect-hoppet i landing.js. Porten (klassen på <html>) settes av
       inline-scriptet i Index.html <head>; kontrolleren (window._oppstart*)
       bor i app-mobile.js. Se docs/mobil-oppstart-2026-08-10.md.
       Stilen MÅ ligge her og ikke i app-mobiles MB_CSS: MB_CSS injiseres av et
       defer-skript og finnes ikke når flata skal stå på skjermen.
       ========================================== */
    .oppstart {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10500;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background: #1D1D1D;
      padding: calc(24px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
      opacity: 1;
      transition: opacity .42s ease;
    }
    /* To veier inn: porten mens flata lever, .ut mens den fader. Layouten ligger
       på basisregelen nettopp fordi oppstart-aktiv fjernes FØR fade-en er
       ferdig — det er den fjerningen som slipper #login-screen, #loading-screen
       og de pausede innfallene fri. Uten .ut ville flata forsvunnet momentant. */
    html.oppstart-aktiv .oppstart,
    .oppstart.ut { display: flex; }
    .oppstart.ut { opacity: 0; pointer-events: none; }

    /* #login-screen har display:flex INLINE i markupen, så en vanlig regel
       taper. !important er trygt her fordi oppstart-aktiv fjernes idet flata
       begynner å fade: kreves login, står skjemaet klart under det fadende
       dekket. #loading-screen ville ellers loopet sitt eget merke bak dekket. */
    html.oppstart-aktiv #login-screen,
    html.oppstart-aktiv #loading-screen { display: none !important; }

    /* I --fortsett og --stille skal merket stå ferdig tegnet: .elab-merke--animert
       ligger i markupen og ville ellers spilt innfallet sitt om igjen. */
    html:not(.oppstart-full) .oppstart-merke .elab-strek { animation: none; }

    .oppstart-midt { display: flex; flex-direction: column; align-items: center; margin: auto 0; }
    .oppstart-merke { margin-bottom: 22px; }
    .oppstart-ord {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 34px;
      line-height: 1;
      color: #fff;
      /* Samme motvekt som .elab-ord: letter-spacing legger luft etter siste
         tegn også, og en sentrert lockup står ellers for langt til venstre. */
      letter-spacing: .12em;
      margin-right: -.12em;
    }
    /* Indikatoren er EKTE milepæler (auth → org/event → data), ikke en tidsstyrt
       animasjon. Står den stille, går det faktisk tregt — det er hensikten. */
    .oppstart-spor {
      width: 132px;
      height: 2px;
      margin: 22px 0 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      overflow: hidden;
    }
    .oppstart-spor > i {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: #F71B00;
      transform: scaleX(0);
      transform-origin: left center;
      /* Transition, ikke animation: den skal også virke under reduced motion,
         fordi indikatoren er informasjon og ikke pynt. */
      transition: transform .32s cubic-bezier(.2,.85,.3,1);
    }
    .oppstart-tekst { text-align: center; min-height: 34px; transition: opacity .17s ease; }
    .oppstart-tekst.bytter { opacity: 0; }
    .oppstart-tittel {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      color: #fff;
    }
    .oppstart-tittel:empty { display: none; }
    .oppstart-under {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.5;
      text-transform: uppercase;
      letter-spacing: .11em;
      color: rgba(255,255,255,0.42);
    }
    /* «av» holdes gemen: hele linja i versaler leste som en stamme mot
       org-navnet rett over, og signaturen skal ligge under, ikke konkurrere. */
    .oppstart-bunn {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .06em;
      color: rgba(255,255,255,0.26);
    }
    .oppstart-bunn b {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: rgba(255,255,255,0.42);
    }

    @keyframes oppstartMerke {
      from { transform: scale(.86); opacity: 0; }
      to   { transform: none;       opacity: 1; }
    }
    @keyframes oppstartOrd {
      from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(4px); }
      to   { clip-path: inset(0 -10% 0 0); opacity: 1; transform: none; }
    }
    @keyframes oppstartTon { from { opacity: 0; } to { opacity: 1; } }

    html, body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    body { display: flex; flex-direction: column; }

    /* ==========================================
       HEADER
       ========================================== */
    .header-panel {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 2000;
      background: var(--header-dark, #1D1D1D);
      padding: 0 20px;
      border-bottom: 1px solid rgba(0,0,0,0.25);
      box-shadow: 0 4px 20px rgba(0,0,0,0.28);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 0;
      transform: translateY(0);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.28s ease;
    }
    .header-panel.skjult {
      transform: translateY(-100%);
      box-shadow: none;
    }
    #header-spacer {
      flex-shrink: 0;
      transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .header-row1 {
      display: flex; align-items: center; gap: 10px;
      height: 54px;
    }
    .tlb-tilbake {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important;
      border: 1px solid rgba(255,255,255,0.16) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88) !important;
      padding: 6px 11px !important; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }
    .tlb-tilbake:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important;
      border-color: rgba(255,255,255,0.30) !important;
      color: #fff !important;
    }
    .tlb-modus-tag {
      flex-shrink: 0;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: color-mix(in srgb, var(--primary) 75%, #fff);
      background: color-mix(in srgb, var(--primary) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }
    .header-row3 {
      display: flex; align-items: center; gap: 0;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 8px 0 9px;
    }
    .header-panel .btn-ai-primary {
      background: linear-gradient(135deg,#CC1500,#F71B00);
      color: white;
      border: 1px solid rgba(255,255,255,0.20);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 10px rgba(247,27,0,0.35);
    }
    .header-panel .btn-ai-primary:hover {
      background: linear-gradient(135deg,#E01700,#FF3D24);
      border-color: rgba(255,255,255,0.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 4px 12px rgba(247,27,0,0.45);
    }
    /* Nøytral mørk — «Opprett med AI» er verktøylinjas ENE røde primærhandling,
       og to røde AI-knapper side om side lot rødt slutte å bety «viktigst» */
    .header-panel .btn-ai-secondary {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.26);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35);
    }
    .header-panel .btn-ai-secondary:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255, 255, 255, 0.4);
    }
    #header-pin-btn.pinned {
      background: rgba(255,255,255,0.18) !important;
      border-color: rgba(255,255,255,0.45) !important;
      color: white !important;
    }
    .header-zone {
      display: flex; align-items: center; gap: 6px;
      padding: 0 14px;
      flex-shrink: 0;
    }
    .header-zone:first-child { padding-left: 0; }
    .header-zone + .header-zone { border-left: 1px solid rgba(255,255,255,0.09); }
    .header-zone.grow { flex: 1; }
    .zone-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.32);
      letter-spacing: 0.12em;
      white-space: nowrap; margin-right: 4px;
    }

    /* Nedsenket gruppeflate — kontrast til de hevede enkeltknappene */
    .ctrl-group {
      display: flex; align-items: center; gap: 1px;
      background: rgba(0,0,0,0.26);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px; padding: 2px;
      flex-shrink: 0;
    }
    .ctrl-seg-btn {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      color: rgba(255,255,255,0.75) !important;
      font-size: 15px; font-weight: 400;
      padding: 2px 8px !important; line-height: 1.2;
      border-radius: 6px !important;
    }
    .ctrl-seg-btn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
    .ctrl-seg-verdi {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; font-weight: 700; color: #fff;
      min-width: 28px; text-align: center;
    }
    .header-sep {
      width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0;
    }
    /* Del-knappen skjules/vises via style.display fra app-core — flex-layouten
       må derfor ligge i CSS så ikonet sentreres når inline-display fjernes. */
    #delelenke-btn { display: inline-flex; align-items: center; gap: 5px; }

    /* Dagknapper i verktøyslinjen (genereres av genererDatoArray) */
    .tl-dag-btn {
      display: inline-flex; flex-direction: column; align-items: center; gap: 0;
      min-width: 34px; padding: 3px 7px 4px !important;
      border-radius: 8px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important;
      border: 1px solid rgba(255,255,255,0.15) !important;
      color: rgba(255,255,255,0.85) !important;
      cursor: pointer; line-height: 1.15;
    }
    .tl-dag-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important;
      border-color: rgba(255,255,255,0.28) !important;
      color: #fff !important;
    }
    .tl-dag-uke {
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; opacity: 0.8;
    }
    .tl-dag-nr { font-size: 13px; font-weight: 700; }
    .tl-dag-btn.active {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(247,27,0,0.45);
    }
    .tl-dag-btn.active .tl-dag-uke { opacity: 0.85; }
    /* Dager utenfor eventdatoene (genererDatoArray utvider til faktiske
       hendelsesdatoer): nedtonet + stiplet så de skiller seg fra perioden. */
    .tl-dag-btn--utenfor {
      opacity: 0.55;
      border-style: dashed !important;
    }
    .tl-dag-btn--utenfor.active { opacity: 0.9; }

    /* ORG/EVENT-CHIP OG DROPDOWN */
    .org-chip {
      display: flex; align-items: center; gap: 6px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px; padding: 5px 10px 5px 10px;
      color: white; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: background 0.15s; white-space: nowrap;
      font-family: inherit;
    }
    .org-chip:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.28);
    }
    .org-chip-sep { opacity: 0.3; margin: 0 2px; }
    .org-chip-event { color: rgba(255,255,255,0.65); font-weight: 500; }
    .org-chip-arrow { opacity: 0.45; font-size: 10px; margin-left: 2px; }

    .org-dropdown-popup {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: white; border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #E5E7EB; min-width: 240px; z-index: 9999;
      overflow: hidden; animation: dropdownFadeIn 0.12s ease;
    }
    @keyframes dropdownFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    .org-dropdown-header {
      padding: 12px 16px 8px;
      font-size: 10px; font-weight: 700; color: #9CA3AF;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .org-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 16px; font-size: 13px; color: #1D1D1D;
      cursor: pointer; transition: background 0.1s; text-decoration: none;
    }
    .org-dropdown-item:hover { background: #F9FAFB; }
    .org-dropdown-item.active { background: #FFF7ED; color: #EA580C; font-weight: 600; }
    .org-dropdown-item.action { color: #374151; font-weight: 500; }
    .org-dropdown-sep { height: 1px; background: #F1F5F9; margin: 4px 0; }

    .hoved-tittel {
      margin: 0;
      font-family: 'Bebas Neue', 'Inter', sans-serif;
      font-size: 21px;
      font-weight: 400;
      color: rgba(255,255,255,0.95);
      letter-spacing: 0.05em;
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      min-width: 0; flex-shrink: 1;
      max-width: 340px;
    }

    /* ==========================================
       BUTTONS — base (light bg)
       ========================================== */
    button {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }
    /* 2026-08-07: hover maler ikke lenger om bakgrunn/kant — det overstyrte
       modulenes egne knappefarger og tvang frem !important-overstyringer.
       Brightness gir samme feedback uten å eie fargen. */
    button:hover { filter: brightness(0.97); }
    button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(247,27,0,0.35);
    }

    /* Header button overrides (dark bg) — hevet, solid «tast»-chip:
       solid flate avledet av headerfargen + topplys-inset + myk skygge
       (samme oppskrift som .orgp-support-btn). */
    .header-panel button {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      color: rgba(255,255,255,0.88);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
    }
    .header-panel button:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: white;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.4);
    }
    .header-panel button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(247,27,0,0.5);
    }

    /* ==========================================
       PROFILBILDE-AVATARER (avatarInnhold i app-core.js)
       Legges INNI en hvilken som helst avatar-sirkel: holderen
       fyller containeren og klipper bildet til containerens radius;
       initialene bak blir synlige hvis bildet feiler (onerror fjerner img).
       ========================================== */
    .avatar-holder {
      position: relative; width: 100%; height: 100%;
      display: grid; place-items: center;
      border-radius: inherit; overflow: hidden;
    }
    .avatar-bilde {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }

    /* ==========================================
       SELECTS — base (light bg)
       ========================================== */
    select {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    select:hover { border-color: #94A3B8; }
    select option { background: white; color: var(--text); }

    /* Header select overrides (dark bg) — nedsenkede felt som søket */
    .header-panel select {
      background: rgba(0,0,0,0.26);
      color: rgba(255,255,255,0.85);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px;
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 600;
      max-width: 170px;
    }
    .header-panel select:hover { background: rgba(0,0,0,0.34); border-color: rgba(255,255,255,0.26); }
    .header-panel select option { background: #2A2A2A; color: white; }

    /* Header text input */
    .header-panel input[type="text"] {
      padding: 6px 11px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(0,0,0,0.26);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      color: white;
      font-size: 12px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    .header-panel input[type="text"]:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      background: rgba(0,0,0,0.34);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3),
                  0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    .header-panel input[type="text"]::placeholder { color: rgba(255,255,255,0.35); }
    .header-panel input[type="range"] { cursor: pointer; accent-color: var(--primary); }

    .controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

    /* ==========================================
       TIMELINE
       ========================================== */
    .timeline-wrapper { flex-grow: 1; overflow: auto; display: flex; position: relative; }

    .time-column {
      position: sticky; left: 0; z-index: 990;
      width: 65px; flex-shrink: 0;
      background-color: var(--bg);
      border-right: 1px solid var(--border);
      height: var(--timeline-height, 11520px);
      box-shadow: 2px 0 8px rgba(29,29,29,0.05);
    }
    .time-spacer { height: calc(var(--area-header-height) + var(--loc-header-height)); box-sizing: border-box; }

    .time-slot { height: 120px; box-sizing: border-box; position: relative; border-bottom: 1px solid transparent; }
    .time-text {
      position: absolute; top: -7px; right: 12px;
      font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em;
    }
    /* Klokkeslett-etiketter i tidskolonnen (genereres av tegnTidslinje) */
    .tl-time-lbl {
      position: absolute; left: 0; width: 100%; text-align: center;
      font-family: 'JetBrains Mono', monospace;
    }
    .tl-time-lbl--hel     { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
    .tl-time-lbl--halv    { font-size: 10px; font-weight: 500; color: var(--text-muted); }
    .tl-time-lbl--kvarter { font-size: 9px;  font-weight: 400; color: color-mix(in srgb, var(--text-muted) 65%, transparent); }
    /* Skjøt der «Skjul netter» har klappet sammen tomme nattetimer.
       Høyde 0 med overflow synlig — markøren må ikke flytte tidsaksen. */
    .tl-natt-skjot {
      position: absolute; left: 0; right: 0; height: 0; z-index: 940;
      border-top: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
      line-height: normal; pointer-events: none;
    }
    .tl-natt-skjot span {
      position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
      background: var(--bg); padding: 0 3px;
      font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600;
      color: var(--text-muted); letter-spacing: -0.03em; white-space: nowrap;
    }
    .tl-natt-skjot--under span { bottom: auto; top: 1px; }
    /* Døgnskille — heltrukket der natt-skjøten er stiplet, så de to markørene
       ikke forveksles når begge treffer samme time. */
    .tl-dogn-skille {
      position: absolute; left: 0; right: 0; height: 0; z-index: 941;
      border-top: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
      line-height: normal; pointer-events: none;
    }
    .tl-dogn-skille span {
      position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
      background: var(--bg); padding: 0 3px;
      font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600;
      color: color-mix(in srgb, var(--primary) 80%, var(--text-muted));
      letter-spacing: -0.03em; white-space: nowrap;
    }
    #skjul-netter-btn.aktiv {
      background: var(--primary) !important; border-color: var(--primary) !important;
      color: #fff !important;
    }
    /* Dag-etikett (sticky pille øverst i tidskolonnen) */
    .tl-dag-etikett {
      position: absolute; left: 4px; right: 4px;
      background: var(--header-dark, #1D1D1D); color: #fff;
      text-align: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; letter-spacing: 0.08em;
      padding: 6px 2px 5px;
      border-radius: 0 0 9px 9px;
      box-shadow: 0 3px 10px rgba(29,29,29,0.25);
    }

    .area-group {
      display: flex; flex-direction: column;
      min-height: var(--timeline-height, 11520px);
      border-right: 2px solid var(--border);
    }
    .area-header {
      position: sticky; top: 0; z-index: 800;
      height: var(--area-header-height); line-height: var(--area-header-height);
      background: var(--header-dark, #374151); color: white;
      text-align: center; font-weight: 400; font-size: 15px;
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.25);
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .location-columns-container { display: flex; flex-direction: row; flex-grow: 1; min-height: 100%; }
    .location-column {
      height: var(--timeline-height, 11520px);
      position: relative; box-sizing: border-box;
      border-right: 1px solid var(--border);
      min-width: var(--col-width); max-width: var(--col-width); flex: 0 0 var(--col-width);
    }
    .location-header {
      position: sticky; top: var(--area-header-height); z-index: 700;
      height: var(--loc-header-height);
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      text-align: center;
      font-weight: 700; font-size: 11.5px; color: var(--text);
      border-bottom: 1px solid var(--border);
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0 6px; box-sizing: border-box;
      overflow: hidden;
    }

    .grid-container {
      flex-grow: 1; height: var(--timeline-height, 11520px);
      display: flex; position: relative; cursor: pointer;
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }

    /* ==========================================
       EVENT CARDS
       ========================================== */
    .event-card {
      position: absolute;
      border-radius: 9px;
      color: white;
      box-shadow: 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      transition: box-shadow 0.15s ease, height 0.15s ease, min-width 0.15s ease, transform 0.12s ease;
      border: none;
      display: flex; flex-direction: column;
      justify-content: space-between; align-items: stretch;
      text-align: left; padding: 6px 7px;
    }
    /* Hover-kortet vokser til siden også, ikke bare nedover: i en smal kolonne
       (bredde-slideren nede, eller flere samtidige hendelser som deler plassen)
       ble detaljene ellers presset til ett ord per linje. min-width betyr at
       kolonner som allerede er breiere enn dette står helt urørt.
       overflow-wrap hører hjemme her og ikke på .event-card: hover er eneste
       tilstand med overflow:visible, så det er bare her lange ord kan renne
       utenfor kanten. På kortflaten ellers vil brytingen skyve ansvarlig-linja
       ut av det klippede kortet. */
    .event-card:hover:not(.is-resizing) {
      height: auto !important;
      min-height: var(--card-h, 40px);
      min-width: 210px;
      overflow: visible;
      overflow-wrap: anywhere;
      z-index: 50 !important;
      box-shadow: 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.1);
    }
    .event-card.is-resizing {
      overflow: hidden;
      cursor: ns-resize;
    }
    .event-card-tittel {
      font-weight: 800; font-size: 13.5px; line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 1px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .event-card-tid {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px; font-weight: 500; opacity: 0.85;
      letter-spacing: -0.02em;
    }
    .event-card-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; width: 100%; }
    .event-card-topp .event-card-tittel { flex: 1 1 auto; min-width: 0; }
    .event-card-ekstern-chip {
      display: inline-block; margin-left: 5px; padding: 1px 5px;
      background: rgba(255,255,255,0.22); border-radius: 100px;
      font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; vertical-align: 1px;
    }
    .event-card-ansvarlig { font-size: 12px; font-weight: 600; width: 100%; margin-bottom: 3px; opacity: 0.95; }
    .card-expanded {
      display: none; width: 100%; margin-top: 6px;
      padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.25);
      text-align: left;
    }
    .event-card:hover:not(.is-resizing) .card-expanded { display: block; }
    .card-exp-tid { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: 0.95; }
    .card-exp-rad { font-size: 11px; opacity: 0.85; line-height: 1.5; }
    .card-exp-lbl { opacity: 0.65; margin-right: 3px; }
    .card-exp-besk { font-size: 11px; opacity: 0.8; margin-top: 5px; line-height: 1.4; font-style: italic; }
    .card-exp-konflikt { margin-top: 6px; font-size: 11px; font-weight: 700; color: #FBBF24; }

    .resizer {
      position: absolute; bottom: 0; left: 0; width: 100%; height: 8px;
      cursor: ns-resize;
      background: rgba(0,0,0,0.15);
      border-top: 1px solid rgba(0,0,0,0.08);
      border-radius: 0 0 9px 9px;
      opacity: 0;
      transition: opacity 0.12s ease;
    }
    .event-card:hover .resizer { opacity: 1; }
    .resizer:hover { background: rgba(0,0,0,0.3); }

    /* ==========================================
       MODALS
       ========================================== */
    .modal {
      display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .modal-content {
      background: var(--surface); margin: 3% auto; padding: 32px;
      border-radius: 16px; width: 650px; max-width: 95%;
      max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
      box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .modal-header {
      margin-top: 0; border-bottom: 1px solid var(--border);
      padding-bottom: 16px; margin-bottom: 24px;
      font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }

    /* Reset buttons/selects inside modals to light theme */
    .modal button, .modal-content button { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal button:hover, .modal-content button:hover { background: var(--bg); border-color: #C8B8AD; color: var(--text); }
    .modal select, .modal-content select { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal select option, .modal-content select option { background: white; color: var(--text); }

    /* ── Event-skjema: høyre sidebar ──────────────────────────────── */
    #eventModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 480px;
      pointer-events: none;
    }
    /* Delt stil for event- og info-sidebar */
    #eventModal .modal-content,
    #infoModal  .modal-content {
      margin: 0 !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 48px rgba(0,0,0,0.35) !important;
      pointer-events: all;
      box-sizing: border-box !important;
      overflow-y: auto;
      animation: event-sidebar-in 0.28s cubic-bezier(0.32,0.72,0,1);
    }
    #eventModal .modal-content {
      width: 480px !important;
      border-radius: 16px 0 0 16px !important;
    }
    #infoModal .modal-content {
      width: 600px !important;
      border-radius: 16px 0 0 16px !important;
    }
    @keyframes event-sidebar-in {
      from { transform: translateX(100%); }
      to   { transform: translateX(0); }
    }

    /* ── Info-sidebar ──────────────────────────────────────── */
    #infoModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 600px;
      pointer-events: none;
    }
    #infoModal .info-layout {
      grid-template-columns: 1fr !important;
    }
    #infoModal .info-kp-kolonne {
      border-left: none !important;
      padding-left: 0 !important;
      border-top: 1px solid var(--border);
      padding-top: 20px;
      margin-top: 8px;
    }
    #infoModal .info-modal-footer {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 4px !important;
      margin-top: 8px;
      border-top: 1px solid var(--border);
    }

    .event-modal-hd {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 2;
      background: var(--surface);
      padding-bottom: 14px; margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      padding-top: 2px;
    }
    #eventModal .modal-header,
    #infoModal  .modal-header {
      border: none !important; padding: 0 !important; margin: 0 !important;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.03em;
      line-height: 1.1;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .event-modal-lukk {
      width: 28px; height: 28px; border-radius: 7px;
      border: 1px solid var(--border) !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer;
      display: flex !important; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .12s, color .12s;
      padding: 0;
    }
    .event-modal-lukk:hover { background: var(--border) !important; color: var(--text) !important; }
    #eventModal .mal-footer-row {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 2px !important;
      margin-top: 12px;
      border-top: 1px solid var(--border);
    }

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

    .form-group label {
      display: block; font-size: 11px; font-weight: 700;
      margin-bottom: 6px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; box-sizing: border-box; padding: 10px 12px;
      border: 1.5px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.12);
    }
    .form-group select option { background: white; color: var(--text); }

    /* Synlighets-velgeren: <option> kan ikke inneholde SVG, så ikonet ligger
       i feltkanten og speiler valgt verdi (oppdaterSynlighetIkon i app-core). */
    .synl-select-wrap { position: relative; }
    .synl-select-wrap .synl-select-ikon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      display: flex; color: var(--text-muted); pointer-events: none;
    }
    .synl-select-wrap select { padding-left: 35px; }
    .info-value svg { vertical-align: -2px; margin-right: 4px; }

    .info-item { background: var(--bg); padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border); }
    .info-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; display: block; margin-bottom: 4px; letter-spacing: 0.07em; }
    .info-value { font-size: 14px; font-weight: 600; color: var(--text); }

    .full-width { grid-column: span 2; }

    .btn-save {
      background: var(--primary) !important; color: white !important; font-weight: 700;
      border: none !important; padding: 11px 24px; border-radius: 8px; font-size: 14px;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .btn-save:hover { background: var(--primary-dark) !important; box-shadow: 0 4px 14px rgba(247,27,0,0.4) !important; }
    .btn-cancel {
      background: var(--bg) !important; color: var(--text-muted) !important;
      border: 1.5px solid var(--border) !important; padding: 11px 24px;
      border-radius: 8px; font-size: 14px; font-weight: 600; margin-left: 10px;
    }
    .btn-cancel:hover { background: var(--border) !important; color: var(--text) !important; }

    /* ==========================================
       TOAST
       ========================================== */
    #toast-varsel {
      visibility: hidden; min-width: 260px;
      background: #0F172A; color: white;
      border-radius: 12px; padding: 14px 18px;
      position: fixed; z-index: 3000; left: 50%; bottom: 32px; transform: translateX(-50%);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      font-size: 14px; font-weight: 500;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    #toast-varsel.show { visibility: visible; animation: fadein 0.25s, fadeout 0.3s 4.7s; }
    /* Suksess-varianten (visToast med { type: 'suksess' }): grønn hake foran
       teksten, så en tildelingskvittering kan skilles fra feil i sidesynet.
       flex-start i stedet for space-between — med haken som eget flex-element
       ville space-between dyttet den og teksten fra hverandre. */
    #toast-varsel.er-suksess { justify-content: flex-start; border-left: 4px solid rgb(var(--st-ok-tint)); }
    #toast-varsel.er-suksess::before {
      content: '✓'; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
      background: rgb(var(--st-ok-tint)); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800;
    }
    #toast-varsel.er-suksess .btn-undo { margin-left: auto; }
    @keyframes fadein { from { bottom: 16px; opacity: 0; } to { bottom: 32px; opacity: 1; } }
    @keyframes fadeout { from { bottom: 32px; opacity: 1; } to { bottom: 16px; opacity: 0; } }

    .btn-undo { background: rgb(var(--st-feil-tint)); color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; }
    .btn-undo:hover { background: #DC2626; }

    /* ==========================================
       INFO MODAL — TO-KOLONNE KJØREPLAN-LAYOUT
       ========================================== */
    #infoModal .modal-content {
      width: 940px;
    }
    .info-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 0 28px;
      align-items: start;
    }
    .info-kp-kolonne {
      border-left: 1px solid var(--border);
      padding-left: 28px;
    }
    .info-kp-kolonne .kp-seksjon {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }
    /* Verten for hendelsens faktarutenett. Ikke selv et grid — .lvp-info-grid
       (stil-orgflater.css) har sitt eget oppsett, delt med Program-fanen. */
    .info-fakta { margin-bottom: 12px; }
    .info-meta-extra { display: flex; flex-direction: column; gap: 10px; }
    @media (max-width: 720px) {
      #infoModal .modal-content { width: 95vw; }
      .info-layout { grid-template-columns: 1fr; }
      .info-kp-kolonne { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; }
    }

    /* ==========================================
       CONFIRM MODAL
       ========================================== */
    #confirmModal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.65); backdrop-filter: blur(6px); }
    #confirmModal .modal-content { background: var(--surface); margin: 15% auto; padding: 32px; border-radius: 16px; width: 360px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.2); }

    /* KPI MODAL */
    #kpiModal { display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px); }
    #kpiModal .modal-content { background: var(--surface); margin: 4% auto; padding: 28px 32px;
      border-radius: 16px; width: 560px; max-width: 95%; max-height: 85vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04); }
    .kpi-modal-tittel { margin: 0 0 20px; font-size: 18px; font-weight: 800; color: var(--text);
      letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
    .kpi-modal-seksjon { font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; margin: 20px 0 10px; }
    .kpi-rad { display: flex; align-items: center; gap: 10px; padding: 7px 0;
      border-bottom: 1px solid var(--border); }
    .kpi-rad:last-child { border-bottom: none; }
    .kpi-rad-label { font-size: 13px; font-weight: 600; color: var(--text); width: 160px; min-width: 160px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kpi-rad-tall { font-size: 12px; color: var(--text-muted); min-width: 90px; text-align: right; white-space: nowrap; }
    .kpi-bar-wrapper { flex: 1; background: var(--border); border-radius: 4px; height: 7px; overflow: hidden; min-width: 60px; }
    .kpi-bar { height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
    .kpi-summary-box { background: var(--bg); border-radius: 10px; padding: 14px 18px;
      display: flex; gap: 24px; margin-bottom: 4px; flex-wrap: wrap; }
    .kpi-summary-stat { display: flex; flex-direction: column; }
    .kpi-summary-tall { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .kpi-summary-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    #confirmModal h3 { margin-top: 0; color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
    #confirmModal p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
    .btn-danger { background: rgb(var(--st-feil-tint)); color: white; border: none; padding: 11px 24px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(var(--st-feil-tint),0.3); }
    .btn-danger:hover { background: #DC2626; }

    /* ==========================================
       KONFLIKT-BADGE
       ========================================== */
    /* Rolig markering i hvile: tynn stripe i venstre kant + ikon-badge i
       badge-raden. Full farget ring kun på hover. Stedkonfliktens gule
       stripe vinner hvis begge gjelder (samme par kan kollidere på både
       sted og person) — badge-raden viser uansett begge ikonene. */
    .har-konflikt {
      box-shadow: inset 3px 0 0 #FBBF24, 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .har-personkonflikt:not(.har-konflikt) {
      box-shadow: inset 3px 0 0 #A78BFA, 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .event-card.har-konflikt:hover:not(.is-resizing) {
      box-shadow: 0 0 0 2px #FBBF24, 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .event-card.har-personkonflikt:not(.har-konflikt):hover:not(.is-resizing) {
      box-shadow: 0 0 0 2px #8B5CF6, 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    #konflikt-chip {
      display: none; cursor: pointer; padding: 2px 8px;
      background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4);
      border-radius: 6px; font-size: 12px; font-weight: 700; color: #FBBF24;
      white-space: nowrap; transition: background 0.15s;
      align-items: center; gap: 4px;
    }
    #konflikt-chip:hover { background: rgba(251,191,36,0.25); }

    /* ==========================================
       HEATMAP I TIDSKOLONNE
       ========================================== */
    .heatmap-celle {
      position: absolute; right: 0; width: 5px; border-radius: 1px 0 0 1px;
      pointer-events: none;
    }

    /* ==========================================
       HENDELSESMALER
       ========================================== */
    .mal-bar { display: none; }
    .mal-footer-row {
      display: flex; align-items: center; gap: 8px;
      margin-top: 20px; flex-wrap: wrap;
    }
    .btn-sekundær {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500;
      cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s;
    }
    .btn-sekundær:hover { border-color: var(--primary); color: var(--primary); }
    .mal-dropdown-panel {
      position: absolute; bottom: calc(100% + 6px); left: 0;
      min-width: 220px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,.15); z-index: 500;
      overflow: hidden;
    }
    .mal-panel-rad {
      display: flex; align-items: center;
    }
    .mal-liste-btn {
      flex: 1; padding: 9px 14px; text-align: left; border: none; background: none;
      color: var(--text); font-size: 13px; cursor: pointer;
    }
    .mal-liste-btn:hover { background: rgba(247,27,0,.06); color: var(--primary); }
    .mal-slett-inline-btn {
      padding: 9px 12px; border: none; background: none;
      color: var(--text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
    .mal-slett-inline-btn:hover { color: rgb(var(--st-feil-tint)); }

    /* ==========================================
       LEGENDE MODAL
       ========================================== */
    #legendeModal .modal-content { width: 440px; }
    .legende-rad { display: flex; align-items: center; gap: 10px; padding: 6px 0;
      border-bottom: 1px solid var(--border); font-size: 13px; }
    .legende-rad:last-child { border-bottom: none; }
    .legende-farge { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }

    /* ==========================================
       KPI DASHBOARD
       ========================================== */
    .kpi-box {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      border-left: 2px solid rgba(255,255,255,0.25);
      border-radius: 8px; padding: 4px 10px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .kpi-title { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1px; }
    .kpi-value { font-size: 13px; font-weight: 800; color: white; white-space: nowrap; }

    /* ==========================================
       TOOLTIP
       ========================================== */
    .tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; }
    .tooltip-icon { background: rgba(255,255,255,0.2); color: white; border-radius: 50%; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; }
    .tooltip-text {
      visibility: hidden; width: 180px; background-color: #0F172A; color: white;
      text-align: center; border-radius: 8px; padding: 8px 12px;
      position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -90px;
      opacity: 0; transition: opacity 0.2s; font-size: 11px; font-weight: 400; line-height: 1.5;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
    }
    .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

    /* ==========================================
       DB STATUS BADGE
       ========================================== */
    .db-status-badge { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
    .status-green { background: rgba(var(--st-ok-tint),0.15); color: #6EE7B7; border: 1px solid rgba(var(--st-ok-tint),0.3); }
    .status-red { background: rgba(var(--st-feil-tint),0.15); color: #FCA5A5; border: 1px solid rgba(var(--st-feil-tint),0.3); }

    /* ==========================================
       SETTINGS TABS
       ========================================== */
    .tab-btn {
      background: transparent !important; border: none !important;
      border-bottom: 2px solid transparent !important; border-radius: 0 !important;
      color: var(--text-muted) !important; font-weight: 600 !important;
      padding: 8px 16px !important; font-size: 14px !important; box-shadow: none !important;
    }
    .tab-btn:hover { color: var(--primary) !important; background: transparent !important; }
    .tab-btn.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; background: transparent !important; box-shadow: none !important; }
    .org-tab-hjelp { font-size: 12px; color: var(--text-muted); padding: 6px 2px 14px; min-height: 18px; }

    /* ==========================================
       ORGANISASJONSINNSTILLINGER — FULLSKJERM (A+B)
       ========================================== */
    .orgp-header {
      display: flex; align-items: center; gap: 12px;
      padding: 0 18px; height: 56px;
      background: var(--header-dark); color: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      flex-shrink: 0;
    }
    /* Event-topbaren er en container så innholdet tilpasser seg redusert bredde
       (AI-panel åpent, smalt vindu) uten at knapper renner ut under panelet.
       Scoped til .db-topbar for ikke å påvirke org-landingsheaderen. */
    .db-topbar.orgp-header { container-type: inline-size; }
    /* Smal topbar → kollaps knappe-labels til ikon-only (samme grep som
       iPad/tablet), og krymp/skjul søkefeltet gradvis. Container-query slår
       til uansett skjermstørrelse — også når AI-panelet krymper skallet. */
    @container (max-width: 1200px) {
      .orgp-support-btn span:not(.orgp-badge) { display: none; }
      .orgp-support-btn { padding: 8px 9px; }
    }
    @container (max-width: 1000px) {
      .orgp-header-soek { min-width: 0; flex: 0 1 190px; }
    }
    @container (max-width: 820px) {
      .orgp-header-soek { display: none; }
    }
    .orgp-header .kpd-tilbake-btn {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88);
      padding: 6px 11px; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
    }
    .orgp-header .kpd-tilbake-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: #fff;
    }
    .orgp-org-pille {
      display: inline-flex; align-items: center; gap: 9px;
      background: color-mix(in srgb, #fff 7%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
      padding: 4px 11px 4px 5px; border-radius: 999px;
      font-family: inherit;
    }
    .orgp-org-pille-avatar {
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: grid; place-items: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; padding-top: 1px;
      letter-spacing: 0.04em;
    }
    .orgp-org-pille-navn { font-size: 12px; font-weight: 600; color: #fff; }
    .orgp-org-pille-sep { font-size: 10px; color: rgba(255,255,255,0.35); }
    .orgp-org-pille-meta { font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; }
    .orgp-tittel {
      margin: 0 0 0 4px; font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; font-weight: 400; letter-spacing: 0.04em;
      color: rgba(255,255,255,0.95);
      /* Én linje m/ellipsis — ellers brøt tittelen til flere linjer og ble
         klippet øverst når skallet krympet (AI-panel åpent). */
      min-width: 0; flex-shrink: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Nedsenket felt — kontrast til de hevede knappene gir dybdehierarki */
    .orgp-header-soek {
      position: relative;
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
      border-radius: 8px; padding: 5px 11px;
      min-width: 280px; max-width: 380px; flex: 0 1 320px;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .orgp-header-soek:focus-within {
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      background: rgba(0,0,0,0.34);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.3),
                  0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    .orgp-header-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: #fff; font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-header-soek input::placeholder { color: rgba(255,255,255,0.5); }
    .orgp-header-soek svg { flex-shrink: 0; }
    .orgp-header-soek .orgp-kbd {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px; color: rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.16); border-radius: 4px;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
      padding: 1px 5px; flex-shrink: 0;
    }

    /* ── Global søk-dropdown — command palette ───────────────── */
    .db-soek-dd {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0;
      z-index: 1500;
      background: var(--paper, #FFF8F1);
      border: 1px solid var(--line-soft, var(--border));
      border-radius: 12px;
      box-shadow:
        0 24px 60px -16px rgba(29, 29, 29, 0.32),
        0 6px 18px -4px rgba(29, 29, 29, 0.14);
      max-height: 460px; overflow-y: auto;
      padding: 6px;
      animation: db-soek-pop .12s ease-out;
    }
    @keyframes db-soek-pop {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .db-soek-gruppe-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px; letter-spacing: 0.06em;
      color: var(--ink-soft, var(--text-muted));
      text-transform: uppercase;
      padding: 8px 10px 4px;
    }
    .db-soek-gruppe-tittel:first-child { padding-top: 4px; }
    .db-soek-rad {
      display: flex; align-items: center; gap: 11px;
      width: 100%; padding: 9px 11px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 9px;
      cursor: pointer; text-align: left;
      font-family: inherit; color: var(--text);
      transition: background .12s, border-color .12s;
    }
    .db-soek-rad:hover, .db-soek-rad.aktiv {
      background: var(--surface, #fff);
      border-color: var(--border);
    }
    .db-soek-rad.aktiv {
      box-shadow: 0 2px 6px rgba(29, 29, 29, 0.06);
    }
    .db-soek-ikon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; flex-shrink: 0;
    }
    .db-soek-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 1px;
    }
    .db-soek-tittel {
      font-size: 13px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .db-soek-sub {
      font-size: 11px; color: var(--ink-soft, var(--text-muted));
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .db-soek-pil {
      color: var(--text-muted); flex-shrink: 0;
      opacity: 0; transition: opacity .12s, transform .12s;
    }
    .db-soek-rad:hover .db-soek-pil,
    .db-soek-rad.aktiv .db-soek-pil {
      opacity: 1; transform: translateX(2px);
    }
    .db-soek-tom {
      padding: 24px 12px; text-align: center;
      color: var(--text-muted); font-size: 13px;
    }

    /* Flash-effekt når søk navigerer til en oppgave/element */
    .opp-kort-flash {
      animation: opp-kort-flash 1.5s ease-out;
    }
    @keyframes opp-kort-flash {
      0%, 100% { box-shadow: none; }
      20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
    }
    /* Hevet, solid «tast»-chip — samme oppskrift som .header-panel button:
       solid flate avledet av headerfargen + topplys-inset + myk skygge.
       Ikonene beholder rød aksent; AI-varianten (.ai) er den røde primær-CTA-en. */
    .orgp-support-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 14px; border-radius: 9px;
      font-size: 13px; font-weight: 600;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.92);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      cursor: pointer; flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .orgp-support-btn svg {
      color: color-mix(in srgb, var(--primary) 72%, #fff);
      transition: color 0.15s;
    }
    .orgp-support-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px -2px rgba(0,0,0,0.45);
    }
    .orgp-support-btn:hover svg { color: #fff; }
    .orgp-support-btn:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
    /* AI-varianten: solid mørkrød chip (speiler .btn-ai-secondary i tidslinjen)
       — skiller AI fra standardhandlingene uten å konkurrere med sidens
       primær-CTA (→ Tidslinje / Opprett med AI). */
    .orgp-support-btn.ai {
      background: color-mix(in srgb, var(--primary) 24%, var(--header-dark, #1D1D1D));
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35);
    }
    .orgp-support-btn.ai svg { color: color-mix(in srgb, var(--primary) 45%, #fff); }
    .orgp-support-btn.ai:hover {
      background: color-mix(in srgb, var(--primary) 36%, var(--header-dark, #1D1D1D));
      border-color: color-mix(in srgb, var(--primary) 75%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 10px -2px rgba(247,27,0,0.35);
    }
    .orgp-support-btn .orgp-badge {
      background: var(--primary); color: #fff;
      border-radius: 999px; font-size: 9.5px;
      padding: 1px 5px; font-weight: 700; margin-left: 2px;
    }
    .orgp-bruker-avatar {
      width: 30px; height: 30px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 11px; font-weight: 700; flex-shrink: 0;
      padding: 0; border: none; /* nullstill global button-stil — ellers skvises initialene ut av sirkelen */
      box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
      cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s;
    }
    .orgp-bruker-avatar:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 4px 12px -2px rgba(0,0,0,0.5);
    }

    /* Universell pointer-cursor for alt klikkbart i toppmenyen */
    .orgp-header button,
    .orgp-header a,
    .orgp-header .orgp-org-pille,
    .orgp-header [role="button"] {
      cursor: pointer;
    }

    .orgp-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
    }
    .orgp-nav {
      width: 232px; flex-shrink: 0;
      border-right: 1px solid var(--border);
      background: var(--surface);
      display: flex; flex-direction: column;
      overflow-y: auto; padding: 14px 10px;
      gap: 0;
      transition: width 0.16s ease;
    }
    /* Kollapsknapp + smal meny (2026-08-27). Kjøreplanen jobbes side ved side
       med andre vinduer, og 232 px meny er mye på en delt skjerm. Smal modus
       beholder ikonene og flytter etiketten til title — en meny uten begge
       deler er ikke smal, den er borte. iPad-modus har sin egen skuff
       (#ipad-nav-toggle) og skal ikke smalne; derfor :not(.ipad-modus). */
    .orgp-nav-kollaps {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 6px 9px; margin-bottom: 8px; flex-shrink: 0;
      border: 1px solid var(--border); border-radius: 7px;
      background: transparent; color: var(--text-muted);
      font-family: inherit; font-size: 11.5px; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: color 0.12s, border-color 0.12s;
    }
    .orgp-nav-kollaps:hover { color: var(--primary); border-color: var(--primary); }
    body.ipad-modus .orgp-nav-kollaps { display: none; }

    body.nav-smal:not(.ipad-modus) .orgp-nav {
      width: 54px; padding-left: 6px; padding-right: 6px;
    }
    body.nav-smal:not(.ipad-modus) .orgp-nav-soek,
    body.nav-smal:not(.ipad-modus) .orgp-nav-gruppe-tittel,
    body.nav-smal:not(.ipad-modus) .orgp-nav-btn > span,
    body.nav-smal:not(.ipad-modus) .orgp-nav-kollaps > span,
    body.nav-smal:not(.ipad-modus) .orgp-nav-footer-info,
    body.nav-smal:not(.ipad-modus) .orgp-nav-footer-logout { display: none; }
    body.nav-smal:not(.ipad-modus) .orgp-nav-btn,
    body.nav-smal:not(.ipad-modus) .orgp-nav-kollaps,
    body.nav-smal:not(.ipad-modus) .orgp-nav-footer {
      justify-content: center; padding-left: 0; padding-right: 0;
    }
    body.nav-smal:not(.ipad-modus) .orgp-nav-kollaps svg { transform: rotate(180deg); }
    .orgp-nav-soek {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 10px;
      margin-bottom: 14px; flex-shrink: 0;
    }
    .orgp-nav-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--text); font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-nav-soek input::placeholder { color: var(--text-muted); }
    .orgp-nav-gruppe { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
    .orgp-nav-gruppe-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; font-weight: 400; color: var(--ink-soft, var(--text-muted));
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0 8px 6px;
    }
    /* legacy separator — bevart for back-compat hvis noe injecter den */
    .orgp-nav-separator { display: none; }
    .orgp-nav-btn {
      position: relative;
      display: flex; align-items: center; gap: 9px;
      width: 100%; padding: 7px 9px; border-radius: 7px;
      border: none !important; background: transparent !important;
      color: var(--ink-soft) !important; font-size: 12.5px; font-weight: 500;
      cursor: pointer; text-align: left;
      transition: background 0.12s, color 0.12s;
      font-family: inherit; white-space: nowrap;
    }
    .orgp-nav-btn > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .orgp-nav-btn:hover {
      background: rgba(128,128,128,0.07) !important;
      color: var(--text) !important;
    }
    .orgp-nav-btn.active {
      background: var(--primary-pill) !important;
      color: var(--primary-dark-adaptiv) !important;
      font-weight: 700 !important;
    }
    .orgp-nav-btn.active::before {
      content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
      width: 2.5px; background: var(--primary); border-radius: 2px;
    }
    .orgp-nav-btn.active svg { stroke: var(--primary); }
    .orgp-nav-btn-badge {
      font-size: 9.5px; font-weight: 700;
      padding: 1px 5px; border-radius: 4px;
      background: var(--primary); color: #fff;
      min-width: 14px; text-align: center; line-height: 1.4;
      margin-left: auto; flex-shrink: 0;
    }
    .orgp-nav-btn-badge.amber { background: var(--amber); color: #fff; }
    .orgp-nav-spacer { flex: 1; min-height: 6px; }
    .orgp-nav-footer {
      border-top: 1px solid var(--border);
      padding: 10px 9px 0; margin-top: 6px;
      display: flex; align-items: center; gap: 9px;
      flex-shrink: 0;
    }
    .orgp-nav-footer-avatar {
      width: 26px; height: 26px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 10px; font-weight: 700; flex-shrink: 0;
    }
    .orgp-nav-footer-info { flex: 1; min-width: 0; line-height: 1.2; }
    .orgp-nav-footer-navn {
      font-size: 11.5px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-rolle {
      font-size: 10px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-logout {
      background: transparent; border: none; color: var(--text-muted);
      padding: 4px; border-radius: 6px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .orgp-nav-footer-logout:hover { background: var(--bg2); color: var(--text); }

    .orgp-content {
      flex: 1; min-width: 0; overflow-y: auto;
      padding: 20px 28px;
      /* Cream-paletten settes på #org-page (se «ORG-FLATER» nederst i fila),
         så .orgp-content arver --bg derfra. */
      background: var(--bg);
    }
    .orgp-hjelp {
      font-size: 12px; color: var(--text-muted);
      margin-bottom: 16px; min-height: 0;
    }
    .orgp-hjelp:empty { display: none; }

    /* Eventer-dashboard (A+B) */
    .ev-dash-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
    }
    .ev-dash-kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text-muted);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .ev-dash-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; font-weight: 400; line-height: 1;
      margin: 0; color: var(--text); letter-spacing: 0.01em;
    }
    .ev-dash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .ev-dash-segm {
      display: inline-flex; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px; padding: 3px;
    }
    .ev-dash-segm button {
      background: transparent; color: var(--ink-soft);
      border: none !important; padding: 6px 12px; border-radius: 6px;
      font-size: 11.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    /* Aktiv segmenttilstand er merkerød med hvit tekst — overalt (DESIGN.md
       §4). Denne var `var(--text)`: sort på cream, altså et annet designspråk
       enn resten, OG nesten hvit bak hvit tekst i mørk modus. */
    .ev-dash-segm button.aktiv { background: var(--primary); color: #fff; }
    /* Arrangørfilteret er en ANNEN akse enn statussegmentet, så det er et
       nedtrekk og ikke flere segmenter: antall arrangører er ukjent, og
       segmenter ville sprengt raden ved fire lokallag. Formen låner
       segmentkontrollens ramme så de to leses som ett filtersett. */
    .ev-dash-arrvelg {
      background: var(--surface); color: var(--ink-soft);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 7px 10px; font-size: 11.5px; font-weight: 600;
      font-family: inherit; cursor: pointer; max-width: 200px;
    }
    .ev-dash-nytt {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 9px 16px; font-size: 12.5px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-dash-nytt:hover { background: var(--primary-dark); }

    /* Sekundær «Nytt prosjekt»-knapp — outline-variant ved siden av «Nytt event» */
    .ev-dash-nytt-sek {
      background: var(--surface); color: var(--text);
      border: 1.5px solid var(--border);
      box-shadow: none;
    }
    .ev-dash-nytt-sek:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

    /* Seksjonstittel som skiller Eventer fra Prosjekter i org-modalen */
    .ev-seksjon-tittel {
      font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted);
      margin: 22px 2px 12px;
    }
    .ev-seksjon-tittel:first-of-type { margin-top: 4px; }

    .ev-stat-strip {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 22px;
    }
    .ev-stat-kort {
      border: 1px solid var(--border); border-radius: 12px;
      padding: 14px 16px; position: relative; overflow: hidden;
      background: var(--surface);
    }
    /* «Live nå» er kommandopult-flata i miniatyr — samme token som
       .evo-hero. Den var `var(--text)`, som er cream-mørk i lys modus og
       NESTEN HVIT i mørk: hvit tekst på hvitt kort. */
    .ev-stat-kort.tone-red {
      background: var(--pult-bg); border-color: var(--pult-kant);
    }
    .ev-stat-kort.tone-amber { background: rgba(251,191,36,0.10); }
    .ev-stat-label {
      font-size: 10px; font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
    }
    .ev-stat-kort.tone-red .ev-stat-label { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-label { color: var(--amber-text); }
    .ev-stat-pulse {
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.25);
      animation: ev-pulse 1.6s ease-in-out infinite;
    }
    @keyframes ev-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(247,27,0,0.25); }
      50% { box-shadow: 0 0 0 5px rgba(247,27,0,0.08); }
    }
    .ev-stat-verdi {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; line-height: 1; margin-top: 8px;
      color: var(--text); letter-spacing: 0.01em;
    }
    .ev-stat-kort.tone-red .ev-stat-verdi { color: #fff; }
    .ev-stat-delta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .ev-stat-kort.tone-red .ev-stat-delta { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-delta { color: var(--amber-text); }

    /* Klikkbar variant — brukes f.eks. for "Personer"-KPI på landingen */
    button.ev-stat-kort, .ev-stat-knapp {
      display: block; width: 100%; text-align: left;
      font-family: inherit; cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    }
    button.ev-stat-kort:hover, .ev-stat-knapp:hover {
      transform: translateY(-1px);
      border-color: var(--line-soft);
      box-shadow: 0 4px 14px rgba(29,29,29,0.07);
    }
    .ev-stat-knapp .ev-stat-label { gap: 6px; }
    .ev-stat-knapp .ev-stat-pil { color: var(--text-muted); transition: transform 0.15s, color 0.15s; }
    .ev-stat-knapp:hover .ev-stat-pil { color: var(--primary); transform: translateX(2px); }

    .ev-kort-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    }
    @media (max-width: 1100px) {
      .ev-kort-grid { grid-template-columns: 1fr; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
    }
    .ev-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px;
      position: relative; overflow: hidden; cursor: pointer;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .ev-kort:hover {
      border-color: var(--line-soft);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(29,29,29,0.06);
    }
    .ev-kort-rail {
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: var(--primary);
    }
    .ev-kort-topp {
      display: flex; align-items: flex-start; gap: 12px;
    }
    .ev-kort-tittelblokk { flex: 1; min-width: 0; }
    .ev-kort-tittelrad {
      display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
      flex-wrap: wrap;
    }
    .ev-kort-navn {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px; font-weight: 400; line-height: 1; margin: 0;
      color: var(--text); letter-spacing: 0.02em; text-transform: uppercase;
    }
    .ev-kort-pille-live {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: 0.06em;
    }
    .ev-kort-pille-live::before {
      content: ''; width: 5px; height: 5px; border-radius: 999px;
      background: #fff;
      animation: ev-pulse-dot 1.4s ease-in-out infinite;
    }
    @keyframes ev-pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    .ev-kort-pille-arkiv {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--border); color: var(--text-muted);
      letter-spacing: 0.06em;
    }
    .ev-kort-id {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ev-kort-mer {
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid var(--line-soft); background: var(--surface);
      color: var(--text); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.12s, border-color 0.12s;
    }
    .ev-kort-mer:hover,
    .ev-kort-mer.aapen {
      background: var(--bg2); border-color: var(--text);
    }
    /* Tre prikker tegnet med CSS — alltid synlig, uansett SVG-cache */
    .ev-kort-mer-prikker {
      position: relative; display: inline-block;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--text);
    }
    .ev-kort-mer-prikker::before,
    .ev-kort-mer-prikker::after {
      content: ''; position: absolute; top: 0;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--text);
    }
    .ev-kort-mer-prikker::before { left: -7px; }
    .ev-kort-mer-prikker::after  { left: 7px; }

    /* Popover-meny for event-kort */
    .ev-kort-pop {
      position: fixed; z-index: 9999;
      min-width: 180px;
      background: var(--surface); border: 1px solid var(--line-soft);
      border-radius: 10px; padding: 6px;
      box-shadow: 0 8px 28px rgba(29,29,29,0.14);
      display: flex; flex-direction: column; gap: 2px;
      font-size: 13px;
    }
    .ev-kort-pop button {
      background: transparent; border: none;
      padding: 8px 10px; border-radius: 6px;
      text-align: left; cursor: pointer; color: var(--text);
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 500;
      transition: background 0.1s;
    }
    .ev-kort-pop button:hover { background: var(--bg2); }
    .ev-kort-pop button svg { stroke: var(--text-muted); flex-shrink: 0; }
    .ev-kort-pop button.fare { color: #DC2626; }
    .ev-kort-pop button.fare:hover { background: rgba(220,38,38,0.08); }
    .ev-kort-pop button.fare svg { stroke: #DC2626; }
    .ev-kort-pop hr {
      border: none; border-top: 1px solid var(--border); margin: 4px 0;
    }
    .ev-kort-meta {
      display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
      font-size: 11.5px; color: var(--ink-soft);
    }
    .ev-kort-meta-item {
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ev-kort-meta-item svg { stroke: var(--text-muted); flex-shrink: 0; }

    /* «Kom i gang»-stripa — står kun på kort der noe faktisk mangler.
       Obs-tonen (ikke rød): dette er noe som gjenstår, ikke noe som er galt.
       Tekstfargen er --amber-text, samme par som .ev-kort-konflikt rett
       under: --st-obs-tekst finnes KUN i lys utgave, så en obs-tone bygget
       på den blir uleselig i mørk modus. Tinten er translucent amber og
       virker på begge grunner. */
    .ev-oppsett {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-top: 12px; padding: 8px 10px; border-radius: 9px;
      background: var(--amber-soft);
      border: 1px solid rgba(var(--st-obs-tint), 0.28);
    }
    .ev-oppsett-label {
      font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--amber-text);
    }
    .ev-oppsett-teller {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; color: var(--amber-text); opacity: 0.75;
    }
    .ev-oppsett-steg-rad { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
    .ev-oppsett-steg {
      background: var(--surface); color: var(--text);
      border: 1px solid var(--border); border-radius: 7px;
      padding: 4px 9px; font-size: 11.5px; font-weight: 600;
      cursor: pointer; font-family: inherit;
    }
    .ev-oppsett-steg:hover { border-color: var(--primary); color: var(--primary); }
    .ev-oppsett-steg:focus-visible {
      outline: none; border-color: var(--primary); box-shadow: var(--fokus-ring);
    }

    .ev-kort-footer {
      display: flex; align-items: center; gap: 10px;
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .ev-kort-prog { flex: 1; min-width: 0; }
    .ev-kort-prog-label {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
    }
    .ev-kort-prog-label > span:first-child {
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ev-kort-prog-label > span:last-child { font-family: 'JetBrains Mono', monospace; }
    .ev-kort-prog-bar {
      height: 4px; background: var(--border); border-radius: 999px; overflow: hidden;
    }
    .ev-kort-prog-fill {
      height: 100%; background: var(--primary); border-radius: 999px;
      transition: width 0.3s ease;
    }
    .ev-kort-konflikt {
      font-size: 10.5px; font-weight: 700;
      padding: 3px 8px; border-radius: 6px;
      background: var(--amber-soft); color: var(--amber-text);
      display: inline-flex; align-items: center; gap: 4px;
      flex-shrink: 0;
    }

    .ev-tom-state {
      grid-column: 1 / -1;
      padding: 32px; text-align: center;
      color: var(--text-muted); font-size: 13px;
      border: 1px dashed var(--line-soft); border-radius: 12px;
      background: var(--surface);
    }

    .ev-tips {
      margin-top: 22px; padding: 12px 16px;
      /* Halvgjennomsiktig --surface, ikke rgba(255,255,255,.5): den siste er
         hvit uansett tema, så boksen ble en lys stripe med lys tekst i mørk
         modus. color-mix gir samme mykhet på begge grunner. */
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      border: 1px dashed var(--line-soft);
      border-radius: 10px;
      display: flex; align-items: center; gap: 12px;
      font-size: 12px; color: var(--ink-soft);
    }
    .ev-tips a { color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: none; }
    .ev-tips a:hover { text-decoration: underline; }
    .ev-tips-lukk {
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; font-size: 16px; padding: 4px; line-height: 1;
      margin-left: auto;
    }

    /* Inline opprett/rediger event-skjema */
    .ev-form-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
    }
    .ev-form-panel.skjult { display: none; }
    .ev-form-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; letter-spacing: 0.04em;
      margin: 0 0 12px; color: var(--text);
    }
    /* Utgangspunkt for et nytt event: tomt / fra maler / kopi */
    .ev-kilde-velger { margin-bottom: 14px; }
    .ev-kilde-label {
      font-size: 11px; font-weight: 700; color: var(--ink-soft);
      letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
    }
    .ev-kilde-kort-rad {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .ev-kilde-kort {
      display: flex; flex-direction: column; gap: 2px; text-align: left;
      background: var(--bg); color: var(--text);
      border: 1.5px solid var(--border); border-radius: 10px;
      padding: 10px 12px; cursor: pointer; font-family: inherit;
      transition: border-color 0.15s, background 0.15s;
    }
    .ev-kilde-kort:hover { border-color: var(--line-soft); background: var(--surface); }
    /* Aktiv tilstand er merkerød med hvit tekst — samme som faner og
       segmentkontroller ellers i appen (DESIGN.md §4). */
    .ev-kilde-kort.aktiv {
      background: var(--primary); border-color: var(--primary); color: #fff;
    }
    .ev-kilde-kort:focus-visible {
      outline: none; border-color: var(--primary); box-shadow: var(--fokus-ring);
    }
    .ev-kilde-tittel { font-size: 13px; font-weight: 700; }
    .ev-kilde-tekst { font-size: 11.5px; color: var(--text-muted); }
    .ev-kilde-kort.aktiv .ev-kilde-tekst { color: rgba(255, 255, 255, 0.82); }
    @media (max-width: 720px) {
      .ev-kilde-kort-rad { grid-template-columns: 1fr; }
    }

    .ev-form-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .ev-form-grid label {
      display: block; font-size: 11px; font-weight: 700;
      color: var(--ink-soft); margin-bottom: 4px;
    }
    .ev-form-grid input, .ev-form-grid select {
      width: 100%; padding: 9px 12px; box-sizing: border-box;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg); color: var(--text);
      font-size: 13px; font-family: inherit;
    }
    .ev-form-grid input:focus, .ev-form-grid select:focus {
      outline: none; border-color: var(--primary);
    }
    .ev-form-knapper {
      display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
      align-items: center;
    }
    .ev-form-status {
      font-size: 12px; color: var(--text-muted); margin-right: auto;
      min-height: 18px;
    }
    .ev-form-avbryt {
      background: transparent; color: var(--ink-soft);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .ev-form-avbryt:hover { background: var(--bg2); }
    .ev-form-lagre {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 8px 18px; font-size: 12.5px; font-weight: 700;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-form-lagre:hover { background: var(--primary-dark); }
    .ev-form-lagre:disabled {
      background: var(--border); color: var(--text-muted);
      box-shadow: none; cursor: not-allowed;
    }

    @media (max-width: 720px) {
      .orgp-header { padding: 0 12px; gap: 8px; }
      .orgp-org-pille-meta { display: none; }
      .orgp-tittel { display: none; }
      .orgp-header-soek { display: none; }
      .orgp-support-btn span:not(.orgp-badge) { display: none; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
      .ev-form-grid { grid-template-columns: 1fr; }
      .ev-dash-tittel { font-size: 28px; }
    }
    @media (max-width: 680px) {
      .orgp-nav { width: 44px; padding: 10px 4px; gap: 4px; }
      .orgp-nav-soek { display: none; }
      .orgp-nav-gruppe-tittel { display: none; }
      .orgp-nav-btn { padding: 9px; justify-content: center; gap: 0; }
      .orgp-nav-btn > span:first-of-type, .orgp-nav-btn-badge { display: none; }
      .orgp-nav-btn.active::before { left: -2px; top: 4px; bottom: 4px; }
      .orgp-nav-footer-info, .orgp-nav-footer-logout { display: none; }
      .orgp-nav-footer { justify-content: center; padding: 10px 4px 0; }
      .orgp-content { padding: 14px 16px; }
    }

    /* ==========================================
       MITT ARBEID — på tvers av events
       ========================================== */
    /* Toggle: Åpne / Fullførte */
    .mitt-arbeid-toggle-rad {
      display: inline-flex;
      background: rgba(128,128,128,0.12);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
      margin-bottom: 16px;
    }
    .mitt-arbeid-toggle-btn {
      flex: 0 0 auto;
      background: transparent !important;
      border: none !important;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 18px !important;
      border-radius: 999px !important;
      cursor: pointer;
      font-family: inherit;
      min-height: 0 !important;
      transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    }
    .mitt-arbeid-toggle-btn:hover {
      background: rgba(128,128,128,0.08) !important;
      color: var(--text);
    }
    .mitt-arbeid-toggle-btn.aktiv {
      background: var(--bg-panel, var(--surface)) !important;
      color: var(--primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }

    .mitt-arbeid-header {
      padding: 8px 0 24px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .mitt-arbeid-tittel {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .mitt-arbeid-summary {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .mitt-arbeid-summary strong { color: var(--text); font-weight: 700; }
    .mitt-arbeid-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mitt-arbeid-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      background: rgba(128,128,128,0.08);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .mitt-arbeid-chip-tall {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
    }
    .mitt-arbeid-chip[data-type="oppgave"] .mitt-arbeid-chip-tall  { color: #1A73E8; }
    .mitt-arbeid-chip[data-type="hendelse"] .mitt-arbeid-chip-tall { color: #34A853; }
    .mitt-arbeid-chip[data-type="under"] .mitt-arbeid-chip-tall    { color: #B06000; }
    .mitt-arbeid-chip[data-type="ai"] .mitt-arbeid-chip-tall       { color: #6F42C1; }

    /* ── Min side: fokus-stripe (frister) ───────────────────── */
    .mitt-fokus {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 22px;
    }
    .mitt-fokus-kort {
      display: flex; flex-direction: column; gap: 3px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .mitt-fokus-tall { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
    .mitt-fokus-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .mitt-fokus-kort.fare { border-color: rgba(217,48,37,0.4); background: rgba(217,48,37,0.06); }
    .mitt-fokus-kort.fare .mitt-fokus-tall { color: #D93025; }
    .mitt-fokus-kort.naa  { border-color: rgba(26,115,232,0.4); background: rgba(26,115,232,0.06); }
    .mitt-fokus-kort.naa .mitt-fokus-tall { color: #1A73E8; }

    /* ── Min side: "Nevnt deg" ──────────────────────────────── */
    .mitt-omtale-liste { display: flex; flex-direction: column; gap: 8px; }
    .mitt-omtale-kort {
      padding: 11px 13px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.12s, box-shadow 0.12s;
    }
    .mitt-omtale-kort:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-color: rgba(128,128,128,0.35); border-left-color: var(--primary); }
    .mitt-omtale-topp { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
    .mitt-omtale-navn { font-size: 13px; font-weight: 700; color: var(--text); }
    .mitt-omtale-event { font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(128,128,128,0.12); padding: 1px 7px; border-radius: 10px; }
    .mitt-omtale-tid { font-size: 11px; color: var(--text-muted); margin-left: auto; }
    .mitt-omtale-tekst { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

    /* ── Kommentartråd med @-omtale (oppgave-modal) ─────────── */
    .komm-laasthint { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
    .komm-seksjon { display: flex; flex-direction: column; gap: 12px; }
    .komm-traad { display: flex; flex-direction: column; gap: 12px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
    .komm-laster, .komm-tom, .komm-feil { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
    .komm-feil { color: #D93025; }
    .komm-rad { display: flex; gap: 10px; }
    .komm-avatar {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .komm-boble { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; }
    .komm-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
    .komm-navn { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .komm-tid { font-size: 11px; color: var(--text-muted); }
    .komm-slett { margin-left: auto; border: none; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.5; }
    .komm-slett:hover { opacity: 1; color: #D93025; }
    .komm-tekst { font-size: 13px; color: var(--text); line-height: 1.45; word-wrap: break-word; }
    .komm-omtale { color: var(--primary); font-weight: 600; }
    .komm-ny { position: relative; }
    .komm-input-wrap { position: relative; }
    .komm-input {
      width: 100%; resize: none; min-height: 40px; max-height: 140px;
      padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); line-height: 1.4;
    }
    .komm-input:focus { outline: none; border-color: var(--primary); }
    .komm-mention-pop {
      position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30;
      width: min(280px, 100%); max-height: 220px; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px;
    }
    .komm-mention-valg {
      display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
      padding: 7px 9px; border: none; background: none; border-radius: 7px; cursor: pointer;
      font-size: 13px; color: var(--text);
    }
    .komm-mention-valg:hover, .komm-mention-valg.hl { background: rgba(var(--primary-rgb, 247,27,0), 0.1); }
    .komm-mention-av {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
      background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .komm-ny-bunn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
    .komm-hint { font-size: 11px; color: var(--text-muted); }
    .komm-hint kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 10px; }
    .komm-send {
      flex-shrink: 0; padding: 8px 16px; border: none; border-radius: 9px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff;
      font-size: 13px; font-weight: 700; cursor: pointer; transition: filter 0.15s;
    }
    .komm-send:hover { filter: brightness(1.06); }
    .komm-send:disabled { opacity: 0.5; cursor: default; }

    /* ── "Mitt ansvar"-overlay (åpnes fra event-headeren) ───── */
    .mittansvar-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 9600;
      background: rgba(0,0,0,0.45);
      align-items: flex-start; justify-content: center;
      padding: 40px 20px; overflow-y: auto;
    }
    .mittansvar-modal {
      width: 100%; max-width: 760px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
      overflow: hidden;
      animation: mittansvarInn 0.18s ease;
    }
    @keyframes mittansvarInn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .mittansvar-modal-hdr {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--bg); z-index: 1;
    }
    .mittansvar-modal-tittel { font-size: 20px; font-weight: 800; color: var(--text); margin: 0; }
    .mittansvar-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
    .mittansvar-modal-luk {
      flex-shrink: 0; border: none; background: var(--surface); color: var(--text-muted);
      width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .mittansvar-modal-luk:hover { background: rgba(128,128,128,0.18); color: var(--text); }
    .mittansvar-modal-body { padding: 20px 24px 28px; }
    .mitt-arbeid-naa-badge {
      display: inline-block; vertical-align: middle; margin-left: 8px;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--primary); background: rgba(var(--primary-rgb, 247,27,0), 0.12);
      padding: 2px 8px; border-radius: 10px;
    }
    .mitt-arbeid-type-badge {
      display: inline-block; vertical-align: middle; margin-left: 8px;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: #6F42C1; background: rgba(111,66,193,0.12);
      padding: 2px 8px; border-radius: 10px;
    }

    .mitt-arbeid-tom {
      padding: 80px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    .mitt-arbeid-seksjon {
      margin-bottom: 28px;
    }
    .mitt-arbeid-seksjon-hdr {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
    }
    .mitt-arbeid-eventnavn {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.005em;
    }
    .mitt-arbeid-eventdato {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-aapn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 6px;
      transition: background 0.12s;
      flex-shrink: 0;
    }
    .mitt-arbeid-aapn:hover { background: rgba(var(--primary-rgb, 247,27,0), 0.08); }

    .mitt-arbeid-kort-rad {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }
    .mitt-arbeid-kort {
      display: flex;
      gap: 10px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .mitt-arbeid-kort[data-event-slug=""] { cursor: default; }
    .mitt-arbeid-kort:hover {
      border-color: rgba(128,128,128,0.35);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .mitt-arbeid-kort[data-event-slug]:not([data-event-slug=""]):hover {
      border-color: var(--primary);
      box-shadow: 0 4px 14px rgba(247,27,0,0.08);
    }
    .mitt-arbeid-kort-tag {
      flex-shrink: 0;
      width: 3px;
      align-self: stretch;
      border-radius: 2px;
      background: #DADCE0;
    }
    /* Sjekk-sirkel — matcher .mob-opp-check (Google Tasks-stil) */
    .mitt-arbeid-kort-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px !important;
      height: 22px !important;
      flex: 0 0 22px;
      align-self: flex-start;
      margin-top: 14px;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      border: 2px solid var(--text-muted) !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: #FFFFFF;
      cursor: pointer;
      padding: 0 !important;
      outline: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
      min-height: 0 !important;
    }
    .mitt-arbeid-kort-check svg {
      display: block;
      width: 14px;
      height: 14px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .mitt-arbeid-kort-check:hover {
      background: rgba(128,128,128,0.12) !important;
      border-color: var(--text) !important;
    }
    .mitt-arbeid-kort-check:active {
      background: rgba(128,128,128,0.18) !important;
      border-color: var(--text) !important;
      transform: scale(0.90);
    }
    .mitt-arbeid-kort.fullfort-anim {
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.28s, transform 0.28s;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check {
      background: var(--text-muted) !important;
      border-color: var(--text-muted) !important;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check svg { opacity: 1; }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-kort-tag { background: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-kort-tag { background: #34A853; }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-kort-tag { background: #FBBC04; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-kort-tag { background: #6F42C1; }
    .mitt-arbeid-kort-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mitt-arbeid-kort-topp {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .mitt-arbeid-typetag {
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 800;
      letter-spacing: 0.08em;
      background: rgba(128,128,128,0.12);
      color: var(--text-muted);
    }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-typetag { background: rgba(26,115,232,0.12); color: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-typetag { background: rgba(52,168,83,0.13);  color: var(--st-ok-tekst); }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-typetag { background: rgba(251,188,4,0.16);  color: #B06000; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-typetag { background: rgba(111,66,193,0.13); color: #6F42C1; }
    .mitt-arbeid-chip[data-type="mote"] .mitt-arbeid-chip-tall    { color: #7C3AED; }
    .mitt-arbeid-kort[data-type="mote"]     .mitt-arbeid-kort-tag { background: #7C3AED; }
    .mitt-arbeid-kort[data-type="mote"]     .mitt-arbeid-typetag  { background: rgba(124,58,237,0.13); color: #6D28D9; }
    .mitt-arbeid-kort[data-type="mote"]     { cursor: pointer; }
    .mitt-arbeid-mote-bekreftet { font-size: 10px; font-weight: 700; color: var(--st-ok-tekst); margin-left: 6px; }
    .mitt-arbeid-prio {
      color: #D93025;
      font-size: 10px;
      font-weight: 700;
    }
    .mitt-arbeid-kort-tittel {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-besk {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-kort-meta .sep { color: rgba(128,128,128,0.5); margin: 0 2px; }
    .mitt-arbeid-forfalt { color: #D93025; font-weight: 600; }

    /* Vis/skjul: kort utover MAX_VIST gjemmes til seksjonen utvides */
    .mitt-arbeid-kort.skjult { display: none; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-kort.skjult { display: flex; }
    .mitt-arbeid-vis-mer {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .mitt-arbeid-vis-mer:hover {
      background: rgba(128,128,128,0.08);
      color: var(--text);
      border-color: rgba(128,128,128,0.35);
    }
    .mitt-arbeid-vis-mer svg { transition: transform 0.18s ease; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-vis-mer svg { transform: rotate(180deg); }

    /* ==========================================
       EVENT-INNSTILLINGER — SIDEBAR-LAYOUT (estab-)
       ========================================== */
    .estab-layout {
      display: flex;
      gap: 0;
      height: 100%;
    }
    .estab-nav {
      width: 176px;
      flex-shrink: 0;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 1px;
      padding: 6px 8px;
      background: var(--surface);
      overflow-y: auto;
    }
    .estab-nav-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 9px 11px;
      border-radius: 8px;
      border: none !important;
      background: transparent !important;
      color: var(--text-muted) !important;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .estab-nav-btn:hover {
      background: rgba(128,128,128,0.1) !important;
      color: var(--text) !important;
    }
    .estab-nav-btn.active {
      background: rgba(247,27,0,0.1) !important;
      color: var(--primary) !important;
      font-weight: 700 !important;
    }
    .estab-nav-btn.active svg { stroke: var(--primary); }
    .estab-content {
      flex: 1;
      min-width: 0;
      padding: 20px 24px;
      overflow-y: auto;
    }
    /* db-innstillinger overrides — replace old tab-bar rules */
    #db-innstillinger .tab-bar { display: none; }
    #db-innstillinger .estab-layout { min-height: 500px; height: auto; }
    #db-innstillinger .estab-nav { background: transparent; border-right-color: var(--border); }
    #db-innstillinger .estab-content { padding: 0 0 0 20px; }
    @media (max-width: 680px) {
      .estab-nav { width: 44px !important; padding: 6px 4px !important; }
      .estab-nav-btn { padding: 9px !important; justify-content: center !important; font-size: 0 !important; }
      .estab-nav-btn svg { flex-shrink: 0; }
      .estab-content { padding: 14px 0 14px 12px !important; }
    }

    /* ==========================================
       SETTINGS MODAL – ADMIN TABLE & ICON BTNS
       ========================================== */
    .settings-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px;
    }
    .settings-modal-header h2 {
      margin: 0; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }
    .settings-close-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px;
      border: none !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer; transition: background 0.15s, color 0.15s;
      font-size: 18px; line-height: 1; padding: 0 !important;
    }
    .settings-close-btn:hover { background: var(--border) !important; color: var(--text) !important; }

    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 6px;
      border: none !important; cursor: pointer;
      transition: background 0.15s, color 0.15s; padding: 0 !important; flex-shrink: 0;
    }
    .icon-btn-edit  { background: rgba(247,27,0,0.08) !important; color: var(--primary) !important; }
    .icon-btn-edit:hover  { background: rgba(247,27,0,0.18) !important; }
    .icon-btn-delete { background: rgba(var(--st-feil-tint),0.08) !important; color: rgb(var(--st-feil-tint)) !important; }
    .icon-btn-delete:hover { background: rgba(var(--st-feil-tint),0.18) !important; color: #DC2626 !important; }

    .admin-table { width: 100%; border-collapse: collapse; background: var(--bg); font-size: 13px; min-width: 600px; border-radius: 10px; overflow: hidden; }
    .admin-table thead th {
      background: rgba(128,128,128,0.12); color: var(--text-muted);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 10px 14px; border-bottom: 2px solid #E5E7EB; text-align: left;
    }
    .admin-table thead th:last-child { text-align: right; width: 80px; }
    .admin-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
    .admin-table tbody tr:last-child { border-bottom: none; }
    .admin-table tbody tr:hover { background: rgba(128,128,128,0.07); }
    .admin-table tbody td { padding: 10px 14px; color: var(--text); }
    .admin-table tbody td:last-child { text-align: right; white-space: nowrap; }

    .admin-form-box {
      background: rgba(128,128,128,0.06); border: 1px solid var(--border); padding: 20px 24px; border-radius: 12px;
      margin-bottom: 20px; border: 1.5px solid var(--border);
    }
    .admin-form-title {
      margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em;
    }

    .bruker-kort {
      transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .bruker-kort:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    .bruker-kort select:hover,
    .bruker-kort input[type="date"]:hover { filter: brightness(0.98); }

    /* ==========================================
       PERSON POPUP (inni innstillinger)
       ========================================== */
    .person-back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent !important; border: none !important; box-shadow: none !important;
      color: var(--text-muted) !important; font-size: 13px; font-weight: 600;
      cursor: pointer; padding: 0 0 16px !important; transition: color 0.15s;
    }
    .person-back-btn:hover { color: var(--text) !important; background: transparent !important; }
    .person-popup-hero {
      display: flex; align-items: center; gap: 16px;
      padding-bottom: 20px; border-bottom: 1.5px solid var(--border); margin-bottom: 20px;
    }
    .person-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, #FFD0A2 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; font-weight: 800; color: white; flex-shrink: 0; letter-spacing: -0.01em;
    }
    .person-popup-name { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .person-popup-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
    .person-contact-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
    .person-contact-chip {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
      padding: 7px 13px; font-size: 13px; color: var(--text);
    }
    .person-contact-chip a { color: inherit; text-decoration: none; }
    .person-contact-chip a:hover { text-decoration: underline; }
    .person-events-title {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    }
    .person-count-badge {
      background: var(--primary); color: white; border-radius: 20px;
      padding: 1px 8px; font-size: 11px; font-weight: 700;
    }
    .person-day-label {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 8px;
    }
    .person-event-card {
      display: flex; align-items: stretch; gap: 0;
      border-radius: 8px; margin-bottom: 0; overflow: hidden;
      background: var(--bg); border: 1.5px solid var(--border); transition: border-color 0.15s;
    }
    .person-event-card:hover { border-color: #C8B8AD; }
    .person-event-accent { width: 4px; flex-shrink: 0; }
    .person-event-body { padding: 9px 13px; flex: 1; min-width: 0; }
    .person-event-title { font-size: 13px; font-weight: 600; color: var(--text); }
    .person-event-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .person-events-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 4px;
    }
    .person-hero-edit-btn {
      margin-left: auto; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(247,27,0,0.08) !important; color: var(--primary) !important;
      border: none !important; border-radius: 8px; padding: 7px 14px;
      font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
    }
    .person-hero-edit-btn:hover { background: rgba(247,27,0,0.18) !important; }
    .status-badge-avlyst {
      display: inline-block; font-size: 10px; font-weight: 700;
      background: rgba(var(--st-feil-tint),0.1); color: rgb(var(--st-feil-tint));
      border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
    }
    .person-name-link {
      color: var(--primary); cursor: pointer; font-weight: 600;
      border-bottom: 1px dashed rgba(247,27,0,0.35); transition: border-color 0.15s;
    }
    .person-name-link:hover { border-bottom-color: var(--primary); }

    /* ==========================================
       SAMMENDRAGSKOLONNE
       ========================================== */
    .summary-column {
      position: sticky;
      left: 65px;
      z-index: 980;
      width: 280px;
      height: var(--timeline-height, 11520px);
      flex-shrink: 0;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      box-shadow: 4px 0 16px rgba(29,29,29,0.09);
      transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .summary-column.collapsed {
      width: 26px;
      cursor: pointer;
      background: color-mix(in srgb, var(--text) 4%, transparent);
      box-shadow: 2px 0 8px rgba(0,0,0,0.07);
      overflow: hidden;
    }
    .summary-column.collapsed:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
    .summary-header {
      position: sticky;
      top: 0;
      z-index: 981;
      box-sizing: border-box;
      height: calc(var(--area-header-height) + var(--loc-header-height) + 4px);
      background: var(--header-dark, #374151);
      color: white;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 8px 10px 12px;
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.1em;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(0,0,0,0.20);
    }
    .summary-toggle-btn {
      background: rgba(255,255,255,0.12) !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      color: white !important;
      font-size: 11px !important;
      padding: 2px 8px !important;
      border-radius: 6px !important;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s !important;
      font-family: 'Inter', sans-serif;
    }
    .summary-toggle-btn:hover { background: rgba(255,255,255,0.26) !important; }
    .summary-column.collapsed .summary-header {
      height: 160px !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      align-items: center;
      justify-content: flex-end;
      padding: 12px 6px;
      font-size: 11px;
      letter-spacing: 0.14em;
      color: var(--text-muted);
      background: transparent;
      box-shadow: none;
    }
    .summary-column.collapsed .summary-toggle-btn { display: none; }
    .summary-column.collapsed .summary-grid { opacity: 0; pointer-events: none; }
    .summary-grid {
      position: relative;
      height: var(--timeline-height, 11520px);
      transition: opacity 0.2s;
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }
    .summary-event {
      position: absolute;
      border-radius: 7px;
      padding: 4px 7px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
      color: white;
      font-size: 11px;
      line-height: 1.2;
      box-shadow: 0 1px 4px rgba(15,23,42,0.2), inset 0 1px 0 rgba(255,255,255,0.14);
      border: none;
      transition: filter 0.1s, box-shadow 0.12s;
    }
    .summary-event:hover { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(15,23,42,0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
    .summary-event-title { font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
    .summary-event-meta { font-size: 10px; opacity: 0.85; margin-top: 1px; }
    .summary-resize-handle {
      position: absolute;
      top: 0; right: 0;
      width: 5px;
      height: 100%;
      cursor: col-resize;
      z-index: 990;
      background: transparent;
      transition: background 0.15s;
    }
    .summary-resize-handle:hover,
    .summary-resize-handle.dragging { background: rgba(0,0,0,0.25); }

    /* ==========================================
       COLLAPSED LOCATION COLUMNS
       ========================================== */
    .location-column.collapsed {
      min-width: 26px !important;
      max-width: 26px !important;
      flex: 0 0 26px !important;
      overflow: clip;
      cursor: pointer;
      background: color-mix(in srgb, var(--text) 5%, transparent) !important;
      transition: background 0.15s;
    }
    .location-column.collapsed:hover {
      background: color-mix(in srgb, var(--text) 11%, transparent) !important;
    }
    .location-column.collapsed .location-header {
      position: sticky !important;
      top: var(--area-header-height, 48px);
      height: 120px !important;
      line-height: 1 !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 9px;
      padding: 10px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      background: transparent;
      backdrop-filter: none; -webkit-backdrop-filter: none;
      color: var(--text-muted);
      border-bottom: none;
      transition: color 0.15s;
      z-index: 701;
      display: block;
    }
    .location-column.collapsed:hover .location-header {
      color: var(--text);
    }
    .location-column.collapsed .grid-container {
      pointer-events: none;
      opacity: 0;
    }
    .ny-hendelse-ghost {
      position: absolute; left: 3px; right: 3px;
      background: rgba(247,27,0,0.15);
      border: 2px solid var(--primary);
      border-radius: 6px;
      pointer-events: none;
      z-index: 500;
      box-sizing: border-box;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 5px 6px;
      font-size: 11px; font-weight: 700; color: var(--primary);
      overflow: hidden; white-space: nowrap;
      min-height: 4px;
      transition: none;
    }

    /* ==========================================
       PROGRAM FLYT MODAL
       ========================================== */
    #pfModal {
      display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #pfModal .modal-content {
      background: var(--surface); margin: 3% auto; padding: 28px 32px;
      border-radius: 16px; width: 960px; max-width: 96%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .pf-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .pf-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .pf-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .pf-lukk:hover { color: var(--text); background: none; }
    .pf-dag-select { padding: 5px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; }
    .pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
    .pf-stat {
      background: var(--bg); border-radius: 12px; padding: 14px 16px;
      border: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 4px;
    }
    .pf-stat-tall { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
    .pf-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .pf-stat.grønn .pf-stat-tall { color: var(--st-ok-tekst); }
    .pf-stat.oransje .pf-stat-tall { color: #D4500A; }
    .pf-stat.rød .pf-stat-tall { color: var(--primary); }
    .pf-stat.grå .pf-stat-tall { color: var(--text-muted); }
    .pf-snitt { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; padding: 10px 14px; background: var(--bg); border-radius: 8px; border: 1.5px solid var(--border); }
    .pf-dag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 20px 0 8px; }
    .pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .pf-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 6px 10px; text-align: left; border-bottom: 1.5px solid var(--border); }
    .pf-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-table tr:last-child td { border-bottom: none; }
    .pf-table tr:hover td { background: var(--bg); }
    .pf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .pf-forsinkelse { font-weight: 700; font-size: 13px; }
    .pf-forsinkelse.grønn { color: var(--st-ok-tekst); }
    .pf-forsinkelse.oransje { color: #D4500A; }
    .pf-forsinkelse.rød { color: var(--primary); }
    .pf-forsinkelse.grå { color: var(--text-muted); }
    .pf-status-chip {
      display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px;
      font-size: 11px; font-weight: 700;
    }
    .pf-ingen-logg { text-align: center; padding: 40px 0; color: var(--text-muted); }
    .pf-setup-btn { margin-top: 12px; background: var(--primary) !important; color: white !important; border: none !important; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
    .pf-sammendrag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
    .pf-sammendrag-boks { background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; }
    .pf-sammendrag-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
    .pf-s-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .pf-s-table th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
    .pf-s-table th:not(:first-child) { text-align: right; }
    .pf-s-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-s-table tr:last-child td { border-bottom: none; }
    .pf-s-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
    .pf-s-navn { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-s-snitt { font-weight: 700; }
    .pf-s-snitt.grønn { color: var(--st-ok-tekst); }
    .pf-s-snitt.oransje { color: #D4500A; }
    .pf-s-snitt.rød { color: var(--primary); }
    .pf-s-snitt.grå { color: var(--text-muted); }
    .pf-mini-bar-wrap { width: 50px; height: 5px; background: var(--border); border-radius: 3px; display: inline-block; vertical-align: middle; margin-left: 4px; }
    .pf-mini-bar { height: 100%; border-radius: 3px; }
    .pf-detaljer-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 10px; }

    /* ==========================================
       SKRIV UT MODAL
       ========================================== */
    #skrivUtModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #skrivUtModal .modal-content {
      background: var(--surface); margin: 8% auto; padding: 28px 32px;
      border-radius: 16px; width: 520px; max-width: 96%;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .su-header { display: flex; align-items: center; margin-bottom: 22px; }
    .su-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .su-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .su-lukk:hover { color: var(--text); background: none; }
    .su-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
    .su-filter-group { display: flex; flex-direction: column; gap: 5px; }
    .su-filter-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .su-filter-group select { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 500; color: var(--text); font-family: inherit; cursor: pointer; }
    .su-filter-group select:focus { outline: none; border-color: var(--primary); }
    .su-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 18px; }
    .su-layout-row { display: flex; gap: 8px; margin-bottom: 16px; }
    .su-layout-btn { flex: 1; padding: 8px 6px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); transition: all 0.15s; text-align: center; }
    .su-layout-btn.aktiv { border-color: var(--primary); background: rgba(247,27,0,0.06); color: var(--primary); }
    .su-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .su-preview-count { font-size: 12px; color: var(--text-muted); align-self: center; margin-right: auto; }

    /* ==========================================
       AI MASSE-OPPRETTELSE MODAL
       ========================================== */
    #aiMasseModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #aiMasseModal .modal-content {
      background: var(--surface); margin: 5% auto; padding: 28px 32px;
      border-radius: 16px; width: 640px; max-width: 96%; max-height: 88vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22);
    }
    .aim-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .aim-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .aim-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
    .aim-lukk:hover { color: var(--text); background: none; }
    .aim-ingress { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
    #aiMasse-tekst {
      width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px solid var(--border);
      border-radius: 10px; font-size: 13px; font-family: inherit; resize: vertical;
      background: var(--bg); color: var(--text); line-height: 1.5;
    }
    #aiMasse-tekst:focus { outline: none; border-color: var(--primary); }
    .aim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
    .aim-kort-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .aim-kort {
      background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
      transition: border-color 0.15s;
    }
    .aim-kort:has(input:checked) { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-kort-checkbox-row { display: flex; align-items: center; gap: 10px; }
    .aim-kort-checkbox-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
    .aim-kort-tittel { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .aim-kort-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
    .aim-kort-meta span::before { content: '· '; }
    .aim-kort-meta span:first-child::before { content: ''; }
    .aim-loading { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: 14px; }
    .aim-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .aim-tab {
      flex: 1; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
      background: var(--bg); color: var(--text-muted); border: none; border-radius: 0;
      transition: all 0.15s; font-family: inherit;
    }
    .aim-tab + .aim-tab { border-left: 1.5px solid var(--border); }
    .aim-tab.aktiv { background: var(--surface); color: var(--text); }
    .aim-dropzone {
      border: 2px dashed var(--border); border-radius: 10px; padding: 32px 20px;
      text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg);
    }
    .aim-dropzone:hover, .aim-dropzone.dragover { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-dropzone-ikon { font-size: 32px; margin-bottom: 8px; }
    .aim-dropzone-tekst { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .aim-dropzone-sub { font-size: 12px; color: var(--text-muted); }
    .aim-fil-valgt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(247,27,0,0.06); border: 1.5px solid var(--primary); border-radius: 10px; margin-top: 10px; }
    .aim-fil-navn { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aim-fil-fjern { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; }
    .aim-formater { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; justify-content: center; }
    .aim-format-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); letter-spacing: 0.04em; }

    /* Tale-inndata */
    .aim-tale-rad {
      display: flex; align-items: center; gap: 12px; margin: 10px 0 4px;
    }
    .aim-tale-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 18px; border-radius: 10px;
      background: var(--bg); border: 1.5px solid var(--border);
      color: var(--text-muted); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: all 0.18s; flex-shrink: 0;
    }
    .aim-tale-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-tale-btn.tale-aktiv {
      background: rgba(247,27,0,0.08);
      border-color: var(--primary);
      color: var(--primary);
      animation: tale-puls 1.4s ease-in-out infinite;
    }
    .aim-tale-btn.tale-aktiv svg { animation: tale-mic-puls 1.4s ease-in-out infinite; }
    .aim-tale-status {
      font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px;
    }
    .aim-tale-status.lytter { color: var(--primary); }
    .aim-tale-status.lytter::before {
      content: '';
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary);
      animation: tale-dot-puls 1s ease-in-out infinite;
    }
    .aim-tale-status.feil { color: rgb(var(--st-feil-tint)); }
    @keyframes tale-puls {
      0%, 100% { box-shadow: 0 0 0 0 rgba(247,27,0,0.25); }
      50%       { box-shadow: 0 0 0 6px rgba(247,27,0,0); }
    }
    @keyframes tale-mic-puls {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.6; }
    }
    @keyframes tale-dot-puls {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.75); }
    }
    .aim-kort-tittel-input {
      width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 700; color: var(--text);
      border: none; border-bottom: 1.5px solid transparent; background: transparent; padding: 0 0 2px;
      font-family: inherit; outline: none; transition: border-color 0.15s;
    }
    .aim-kort-tittel-input:focus { border-bottom-color: var(--primary); }
    .aim-edit-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .aim-input-sm {
      padding: 3px 7px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .aim-input-sm:focus { border-color: var(--primary); }
    .aim-input-sm.dato { width: 155px; }
    .aim-select-sm {
      padding: 3px 6px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; cursor: pointer; transition: border-color 0.15s;
    }
    .aim-select-sm:focus { border-color: var(--primary); }

    /* ==========================================
       AI-ASSISTENT SIDEPANEL (push-layout)
       Tar plass på skjermen — dytter innholdet i stedet for å dekke det.
       ========================================== */
    :root { --ai-w: 440px; }

    #aiPanel {
      /* Lås panelets palett til det varme event-temaet uansett kontekst, slik at
         det ser likt ut på org-nivå (body.light-mode) og på event-dashboard. */
      --bg: #FFF2E9;
      --surface: #FFFFFF;
      --text: #1D1D1D;
      --text-muted: #7A6E68;
      --border: #E5D8CF;
      --primary: #F71B00;
      --primary-dark: #CC1500;
      /* Pinnes fordi paletten over er pinnet: uten denne arver panelet mørk
         modus sin lyse rødfarge og setter den på sitt eget hvite kort. */
      --primary-dark-adaptiv: #CC1500;
      position: fixed; top: 0; right: 0;
      width: var(--ai-w);
      height: 100vh; height: 100dvh; /* dvh = synlig viewport (mobil-verktøylinje teller ikke med) */
      z-index: 8000;
      background: var(--surface);
      border-left: 1px solid var(--border);
      box-shadow: -16px 0 48px rgba(0,0,0,0.16);
      display: flex; flex-direction: column;
      box-sizing: border-box;
      transform: translateX(100%);
      transition: transform 0.30s cubic-bezier(0.32,0.72,0,1);
    }
    body.med-ai-panel #aiPanel { transform: translateX(0); }

    /* Push: gjør plass til panelet. In-flow innhold (tidslinje) krymper via
       padding-right; faste flater (header/overlays) skyves via right/width. */
    body { transition: padding-right 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel { padding-right: var(--ai-w); }
    .header-panel {
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                  box-shadow 0.28s ease,
                  right 0.30s cubic-bezier(0.32,0.72,0,1);
    }
    body.med-ai-panel .header-panel { right: var(--ai-w); }
    #org-page, #kp-dashboard { transition: width 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel #org-page,
    body.med-ai-panel #kp-dashboard:not(.kpd-embed) { width: calc(100% - var(--ai-w)) !important; }
    #eventModal, #infoModal { transition: right 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel #eventModal,
    body.med-ai-panel #infoModal { right: var(--ai-w); }

    /* ── Panel-innhold ── */
    .aip-header {
      display: flex; align-items: center; gap: 8px;
      padding: 16px 18px 14px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }
    .aip-tittel {
      font-family: 'Bebas Neue', sans-serif; font-size: 22px;
      letter-spacing: 0.05em; color: var(--text); flex: 1;
      display: flex; align-items: center; gap: 8px;
    }
    .aip-tittel .aip-dot { width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary); box-shadow: 0 0 0 3px rgba(247,27,0,0.18); }
    .aip-ikon-btn {
      background: none; border: 1px solid transparent; border-radius: 8px;
      color: var(--text-muted); cursor: pointer; padding: 5px 8px; font-size: 16px;
      line-height: 1; transition: all 0.15s;
    }
    .aip-ikon-btn:hover { color: var(--text); background: var(--bg); border-color: var(--border); }

    /* Proaktiv helsesjekk-banner */
    .aip-helse {
      flex-shrink: 0; padding: 10px 16px;
      border-bottom: 1px solid var(--border); background: rgba(247,27,0,0.045);
    }
    .aip-helse-tittel {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px;
    }
    .aip-helse-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .aip-helse-pill {
      font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
      background: var(--surface); border: 1px solid rgba(247,27,0,0.35);
      color: var(--primary); cursor: pointer; transition: background 0.15s;
    }
    .aip-helse-pill:hover { background: rgba(247,27,0,0.08); }

    /* «AI ikke konfigurert»-varsel — vises før brukeren prøver å sende */
    .aip-konfig {
      flex-shrink: 0; padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--amber-soft, rgba(251, 191, 36, 0.14));
    }
    .aip-konfig-tittel {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--amber-text, var(--st-obs-tekst)); margin-bottom: 4px;
    }
    .aip-konfig-tekst { font-size: 12px; color: var(--text); line-height: 1.45; }
    .aip-konfig-btn {
      margin-top: 8px; font-size: 11.5px; font-weight: 600;
      padding: 5px 11px; border-radius: 20px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .aip-konfig-btn:hover { border-color: var(--primary); color: var(--primary); }

    .aip-chat {
      flex: 1 1 auto; overflow-y: auto; min-height: 0;
      -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      display: flex; flex-direction: column; gap: 12px;
      padding: 16px 18px;
    }
    /* Viktig: barna må ikke krympe — ellers klemmer flex-kolonnen sammen
       meldinger/kort i stedet for at chatten scroller. */
    .aip-chat > * { flex-shrink: 0; }
    .aip-tom {
      margin: auto; text-align: center; color: var(--text-muted);
      font-size: 13px; line-height: 1.6; padding: 0 12px; max-width: 280px;
    }
    .aip-tom svg { opacity: 0.4; margin-bottom: 10px; }

    .aip-msg {
      font-size: 13px; line-height: 1.55; max-width: 88%;
      padding: 9px 13px; border-radius: 14px;
    }
    .aip-msg-bruker {
      align-self: flex-end; background: var(--primary); color: #fff;
      border-bottom-right-radius: 4px;
    }
    .aip-msg-ai {
      align-self: flex-start; background: var(--bg); color: var(--text);
      border: 1px solid var(--border); border-bottom-left-radius: 4px;
      white-space: pre-wrap;
    }
    .aip-msg-feil { align-self: flex-start; color: var(--primary);
      border-color: rgba(247,27,0,0.3); background: rgba(247,27,0,0.05); }

    /* ── Markdown-formatert AI-svar ── */
    .aip-msg-ai.aip-md { white-space: normal; align-self: stretch; max-width: 100%; }
    .aip-md > :first-child { margin-top: 0; }
    .aip-md > :last-child { margin-bottom: 0; }
    .aip-md p { margin: 0 0 8px; }
    .aip-md .aip-h { font-weight: 700; line-height: 1.3; margin: 12px 0 6px; color: var(--text); }
    .aip-md .aip-h1 { font-size: 16px; }
    .aip-md .aip-h2 { font-size: 14.5px; }
    .aip-md .aip-h3, .aip-md .aip-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .aip-md .aip-ul, .aip-md .aip-ol { margin: 4px 0 8px; padding-left: 20px; }
    .aip-md .aip-ul li, .aip-md .aip-ol li { margin: 2px 0; }
    .aip-md code {
      font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 12px;
      background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 5px;
    }
    .aip-md a { color: var(--primary); text-decoration: underline; }
    .aip-md strong { font-weight: 700; }
    .aip-tabell-wrap { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--border); border-radius: 8px; }
    .aip-tabell { border-collapse: collapse; width: 100%; font-size: 12px; }
    .aip-tabell th, .aip-tabell td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .aip-tabell th { background: var(--surface); font-weight: 700; color: var(--text); position: sticky; top: 0; }
    .aip-tabell tr:last-child td { border-bottom: none; }
    .aip-tabell tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

    .aip-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
    .aip-typing span {
      width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
      animation: aip-blink 1.2s infinite ease-in-out;
    }
    .aip-typing span:nth-child(2) { animation-delay: 0.2s; }
    .aip-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes aip-blink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }

    /* ── Forslags-/utkast-kort ── */
    .aip-kort {
      align-self: stretch; background: var(--surface);
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden;
    }
    .aip-kort-topp {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 14px; background: var(--bg);
      border-bottom: 1px solid var(--border);
      font-weight: 700; font-size: 12.5px; color: var(--text);
      letter-spacing: 0.01em;
    }
    .aip-kort-topp .aip-merke {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--primary);
      background: rgba(247,27,0,0.09); padding: 2px 7px; border-radius: 20px;
    }
    .aip-kort-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
    .aip-kort-footer {
      display: flex; gap: 8px; padding: 11px 14px;
      border-top: 1px solid var(--border); background: var(--bg);
    }
    .aip-kort-footer .aip-btn-primar { flex: 1; }

    /* Redigerbar hendelse-rad i utkast */
    .aip-hrad {
      border: 1px solid var(--border); border-radius: 10px;
      padding: 9px 10px; display: flex; gap: 9px; align-items: flex-start;
      background: var(--bg);
    }
    .aip-hrad.av { opacity: 0.45; }
    .aip-hrad > input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
    .aip-hrad-felt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .aip-inp, .aip-sel {
      width: 100%; box-sizing: border-box;
      padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
      font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text);
    }
    .aip-inp:focus, .aip-sel:focus { outline: none; border-color: var(--primary); }
    .aip-inp-tittel { font-weight: 600; }
    .aip-rad2 { display: flex; gap: 6px; }
    .aip-rad2 > * { flex: 1; min-width: 0; }
    /* Tid-/feltkolonne: stable felt vertikalt i full bredde slik at datetime-local
       viser både dato og klokkeslett (to side-om-side blir for smale). */
    .aip-rad-tid, .aip-felt-kol { display: flex; flex-direction: column; gap: 8px; }
    .aip-rad-tid > *, .aip-felt-kol > * { min-width: 0; }
    .aip-felt-merke { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; display: block; }

    /* Knapper */
    .aip-btn-primar {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff; border: none; border-radius: 9px; cursor: pointer;
      font-weight: 700; font-size: 13px; padding: 9px 14px; transition: filter 0.15s;
    }
    .aip-btn-primar:hover { filter: brightness(1.06); }
    .aip-btn-primar:disabled { opacity: 0.5; cursor: default; filter: none; }
    .aip-btn-sekundar {
      background: var(--surface); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
      font-weight: 600; font-size: 13px; padding: 9px 14px; transition: all 0.15s;
    }
    .aip-btn-sekundar:hover { color: var(--text); border-color: var(--text-muted); }

    /* Input + chips */
    .aip-bunn { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 14px; }
    .aip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .aip-chip {
      font-size: 11px; padding: 5px 11px; border-radius: 20px;
      background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .aip-chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }
    .aip-input-rad { display: flex; gap: 8px; align-items: flex-end; }
    #aip-input {
      flex: 1; resize: none; max-height: 120px; min-height: 40px;
      padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 11px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
      line-height: 1.4;
    }
    #aip-input:focus { outline: none; border-color: var(--primary); }
    .aip-send {
      flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; border: none;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: filter 0.15s;
    }
    .aip-send:hover { filter: brightness(1.08); }
    .aip-send:disabled { opacity: 0.5; cursor: default; }

    /* Mobil: panelet blir full-skjerm overlay og dytter ikke layouten */
    @media (max-width: 768px) {
      #aiPanel { width: 100vw; z-index: 9500; }
      body.med-ai-panel { padding-right: 0; }
      body.med-ai-panel .header-panel,
      body.med-ai-panel #eventModal,
      body.med-ai-panel #infoModal { right: 0; }
      body.med-ai-panel #org-page,
      body.med-ai-panel #kp-dashboard:not(.kpd-embed) { width: 100% !important; }

      /* Respekter notch/safe-area: header (med reset/lukk) under notch,
         input over home-indikatoren — så hjørner/knapper ikke kuttes. */
      #aiPanel .aip-header { padding-top: max(16px, env(safe-area-inset-top)); }
      #aiPanel .aip-bunn { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
      /* 16px hindrer at iOS zoomer inn når man fokuserer et felt. */
      #aiPanel #aip-input,
      #aiPanel .aip-inp,
      #aiPanel .aip-sel { font-size: 16px; }
      /* Skjul de forhåndsdefinerte forslags-chipsene på mobil — de stjeler plass. */
      #aiPanel .aip-chips { display: none; }
    }

    /* ==========================================
       KJØREPLAN / UNDERHENDELSER
       ========================================== */
    .kp-seksjon { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
    /* infoModal er en 600 px sidebar (ikke en bred modal), og .info-layout er
       låst til én kolonne der. Verktøyraden har derfor ~536 px å gå på uansett
       skjermbredde, mens de seks knappene trenger ~525. Tittelen på egen linje
       er det som gjør at raden får plass — «space-between» ga den bare ~470 og
       tvang fram en brekt knapp. Samme oppsett som ≤768 px alt hadde. */
    .kp-header {
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 8px; margin-bottom: 12px;
    }
    .kp-tittel {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.09em; color: var(--text-muted);
    }
    /* Verktøyraden i infoModal. Seks knapper fra tre ulike stilfamilier
       (.kp-btn-print/-mal, .kp-live-btn, .kp-monitor-btn fra stil-landing,
       .kp-legg-til-btn) med hver sin font-size og padding ga fem ulike høyder:
       23, 25, 27, 32 og 70 px i samme rad.
       De 70 er den egentlige feilen: .kp-legg-til-btn var den ENESTE uten
       white-space:nowrap, altså det eneste krympbare elementet i en nowrap-rad.
       Kolonnen er 600 px fast på desktop og raden trenger 580 + tittelen, så
       flexboxen la hele underskuddet på den ene knappen — 118 px ble til 60, og
       «+ Legg til punkt» brakk over tre linjer mot kanten.
       Fikses to steder: alle får samme høyde og nowrap, og raden får lov til å
       brekke i stedet for å presse én knapp. Scopet hit med vilje —
       kjøreplan-overlayet bruker .kpd-panel-knappar og røres ikke. */
    .kp-header-actions {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    }
    /* Barnevelger, ikke klassevelger: de samme knappeklassene brukes i
       kjøreplan-overlayet (.kpd-panel-knappar) og skal ikke røres der.
       «> div > button» treffer bare mal-knappene som ligger i en
       position:relative-wrapper — panelinnholdet ligger et nivå dypere. */
    .kp-header-actions > button,
    .kp-header-actions > div > button {
      height: 28px; padding: 0 9px; font-size: 11px; border-radius: 7px;
      display: inline-flex; align-items: center; gap: 5px;
      white-space: nowrap; flex-shrink: 0;
    }
    .kp-header-actions > div { flex-shrink: 0; }
    /* «Reset buttons inside modals to light theme» (.modal button, ca. linje 956)
       er 0,1,1 og slår hver av knappeklassene under, som alle er 0,1,0. Inne i
       infoModal ble derfor Live-gradienten, Monitor-blåen og primærfyllet vasket
       til samme hvite pille — seks like knapper der fargen var det eneste som
       skilte dem, og «+ Legg til punkt» (border:none) så ut som ren tekst.
       Utenfor modalen, i .kpd-panel-knappar, har de alltid vært riktige.
       Verdiene under er de samme som i .kp-live-btn (her) og .kp-monitor-btn
       (stil-landing.css) — endres de der, må de endres her.
       :hover må stå eksplisitt: .modal button:hover er 0,2,1 og ville ellers
       vunnet tilbake på hover. */
    .kp-header-actions > .kp-live-btn,
    .kp-header-actions > .kp-live-btn:hover {
      background: linear-gradient(135deg, #CC1500, #F71B00);
      color: #fff; border-color: rgba(255,255,255,0.15);
    }
    .kp-header-actions > .kp-monitor-btn,
    .kp-header-actions > .kp-monitor-btn:hover {
      background: var(--accent);
      color: #fff; border-color: transparent;
    }
    .kp-header-actions > .kp-legg-til-btn,
    .kp-header-actions > .kp-legg-til-btn:hover {
      background: var(--primary); color: #fff; border-color: transparent;
      /* Live-gradienten ender på nøyaktig samme --primary-rød, så de to smeltet
         sammen til én klump side om side. Auto-margin skyver primærhandlingen ut
         til høyre kant og bruker slakken raden har igjen. */
      margin-left: auto;
    }
    .kp-legg-til-btn {
      font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 7px;
      background: var(--primary); border: none; color: #fff;
      cursor: pointer; transition: opacity 0.15s;
    }
    .kp-legg-til-btn:hover { opacity: 0.85; }
    .kp-loading { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
    .kp-tom {
      font-size: 13px; color: var(--text-muted); font-style: italic;
      padding: 20px 0; text-align: center;
    }
    .kp-liste { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
    .kp-fase-gruppe { margin-bottom: 16px; }
    .kp-fase-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .kp-fase-header-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); white-space: nowrap;
    }
    .kp-fase-header-tid {
      font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
      white-space: nowrap; opacity: 0.7;
    }
    .kp-fase-header-linje { flex: 1; height: 1px; background: var(--border); }
    .kp-rad {
      display: grid; grid-template-columns: 16px 54px 1fr auto auto;
      align-items: center; gap: 10px;
      padding: 10px 12px 10px 10px; border-radius: 8px; background: var(--bg);
      border: 1px solid var(--border);
      border-left-width: 3px;
      transition: box-shadow 0.15s, opacity 0.15s;
      position: relative;
    }
    .kp-rad:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
    .kp-rad:hover .kp-aksjoner { opacity: 1; }
    .kp-rad.dragging { opacity: 0.3; }
    .kp-rad { position: relative; }
    .kp-rad.drag-over-top::before,
    .kp-rad.drag-over-bottom::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 3px;
      background: var(--primary);
      border-radius: 2px;
      z-index: 10;
    }
    .kp-rad.drag-over-top::before  { top: -2px; }
    .kp-rad.drag-over-bottom::after { bottom: -2px; }
    .kp-drag {
      cursor: grab; color: var(--text-muted); font-size: 15px; line-height: 1;
      user-select: none; text-align: center; transition: color 0.15s, background 0.15s;
      padding: 3px 2px; border-radius: 4px; opacity: 0.45;
    }
    .kp-rad:hover .kp-drag { opacity: 1; background: var(--border); }
    .kp-drag:active { cursor: grabbing; }
    .kp-tid {
      font-size: 14px; font-weight: 700; color: var(--text);
      font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em;
    }
    .kp-innhold { min-width: 0; }
    .kp-rad-tittel {
      font-size: 14px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .kp-rad-meta {
      font-size: 11px; color: var(--text-muted);
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px;
    }
    .kp-rad-meta span { display: flex; align-items: center; gap: 2px; }
    .kp-status-badge {
      font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; cursor: pointer;
      white-space: nowrap; transition: opacity 0.15s; flex-shrink: 0;
    }
    .kp-status-badge:hover { opacity: 0.7; }
    .kp-aksjoner {
      display: flex; gap: 4px; align-items: center;
      opacity: 0; transition: opacity 0.15s;
    }
    .kp-btn-sm {
      font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer;
      border: 1px solid; transition: all 0.12s; white-space: nowrap;
    }
    .kp-btn-rediger {
      background: transparent; border-color: var(--border); color: var(--text-muted);
    }
    .kp-btn-rediger:hover { background: rgba(0,0,0,0.05); border-color: var(--text-muted); color: var(--text); }
    .kp-btn-slett {
      background: transparent; border-color: transparent; color: #9CA3AF;
    }
    .kp-btn-slett:hover { background: rgba(var(--st-feil-tint),0.08); border-color: rgba(var(--st-feil-tint),0.3); color: #DC2626; }
    .kp-btn-print {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-print:hover { border-color: var(--text-muted); color: var(--text); }
    .kp-btn-mal {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-mal:hover { border-color: var(--primary); color: var(--primary); }
    /* Kjøreplan-popoverne (mal/kopier/historikk/knytt): ÉN definisjon.
       Halvparten hadde egne inline-stiler (radius 8, tyngre skygge) som vant
       over denne — inline-stilene er fjernet fra markupen, alle bærer nå
       .kp-popover (+ modifikator). Id-lista står for ev. gammel markup. */
    .kp-popover,
    #kp-mal-panel, #kpd-mal-panel,
    #kp-lagre-mal-panel, #kpd-lagre-mal-panel {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
      min-width: 320px; max-width: min(440px, calc(100vw - 32px));
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    /* Liste-innhold (historikk) styrer egen luft per rad */
    .kp-popover--liste { min-width: 340px; padding: 6px; }
    /* Knytt til hendelse trenger litt mer bredde til hendelsesvelgeren */
    .kp-popover--bred { min-width: 360px; max-width: min(460px, calc(100vw - 32px)); }
    /* Live-familien: ÉN definisjon for begge flatene (infoModal .kp-live-btn,
       kjøreplan-panelets .live-start-btn). Solid rød fyllfarge — rød er
       reservert for LIVE i hele appen, og en «faded» startknapp leste som
       sekundær handling. Gradienten starter mørkere enn --primary så den
       skilles fra «+ Legg til punkt» når de står i samme rad. */
    .kp-live-btn, .live-start-btn {
      font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 7px;
      background: linear-gradient(135deg, #CC1500, #F71B00); border: 1px solid rgba(255,255,255,0.15);
      color: white; cursor: pointer; box-shadow: 0 2px 8px rgba(247,27,0,0.35);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-live-btn:hover, .live-start-btn:hover { box-shadow: 0 3px 14px rgba(247,27,0,0.5); opacity: 0.92; }
    .kp-live-btn svg, .live-start-btn svg { color: #fff; flex-shrink: 0; }

    /* Kjøreplan-skjema */
    .kp-skjema {
      background: var(--surface); border: 1.5px solid var(--primary);
      border-radius: 10px; padding: 16px; margin-top: 10px;
    }
    .kp-skjema-rad { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .kp-skjema-felt { display: flex; flex-direction: column; gap: 4px; }
    .kp-skjema-felt label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--text-muted);
    }
    .kp-input {
      padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 7px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .kp-input:focus { border-color: var(--primary); }
    .kp-input.w-full { width: 100%; box-sizing: border-box; }
    .kp-teknisk-toggle {
      background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text-muted);
      padding: 4px 0; text-align: left; margin: 2px 0 4px; display: flex; align-items: center; gap: 4px;
    }
    .kp-teknisk-toggle:hover { color: var(--text); }
    .kp-teknisk-seksjon { display: none; }
    .kp-teknisk-seksjon.apen { display: block; }
    .kp-skjema-knapper { display: flex; gap: 8px; margin-top: 14px; }
    .kp-lagre-btn {
      padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 700;
      background: var(--primary); color: #fff; border: none;
      cursor: pointer; transition: opacity 0.15s;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .kp-lagre-btn:hover { opacity: 0.85; }
    .kp-avbryt-btn {
      padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
      background: transparent; border: 1.5px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .kp-avbryt-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* ─── KJØREPLAN DASHBOARD ──────────────────────────────────────────────
   Flaten fulgte sin egen grønnpalett (#1B3A2D/#EEF2EC) til 2026-08-23 —
   utenfor tokensystemet og derfor lys-only. Nå: mørk topbar i orgp-språket
   (--header-dark), --bg-arbeidsflate, merkerød aktiv-markering og --pult-*
   for det mørke statkortet (samme token som .evo-hero). .kpd-embed lenger
   ned beholder KUN det som faktisk er annerledes i fane-modus. */
    .kpd-header {
      display: flex; align-items: center; gap: 16px;
      padding: 14px 24px;
      background: var(--header-dark, #1D1D1D); flex-shrink: 0;
    }
    .kpd-tilbake-btn {
      display: flex; align-items: center; gap: 6px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88); font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 8px;
      cursor: pointer; flex-shrink: 0; transition: all 0.12s; font-family: inherit;
    }
    .kpd-tilbake-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: white;
    }
    .kpd-header-tittelblokk { display: flex; flex-direction: column; gap: 1px; }
    .kpd-overskrift {
      font-size: 17px; font-weight: 800; color: white;
      margin: 0; letter-spacing: -0.02em;
    }
    .kpd-header-meta { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 400; }

    /* Event picker in header */
    .kpd-event-picker-seksjon { display: flex; align-items: center; }
    .kpd-event-velger {
      border: 1px solid rgba(255,255,255,0.25); border-radius: 8px;
      padding: 7px 12px; font-size: 13px; font-weight: 600;
      background: rgba(255,255,255,0.1); color: white;
      font-family: inherit; cursor: pointer; outline: none;
      transition: border-color 0.15s; max-width: 280px;
    }
    .kpd-event-velger:focus { border-color: rgba(255,255,255,0.5); }
    .kpd-event-velger option { background: var(--header-dark, #1D1D1D); color: white; }

    /* ── Statistikk-rad ─────────────────────────────────── */
    .kpd-stat-rad {
      display: flex; gap: 12px; align-items: stretch;
      padding: 16px 24px; flex-shrink: 0;
      background: var(--bg);
    }
    .kpd-stat-kort {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; /* kort-primitivens radius — 16 finnes ikke i skalaen */
      padding: 16px 20px; flex: 1;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-stat-mork { background: var(--pult-bg); border-color: var(--pult-kant); }
    .kpd-stat-mork .kpd-stat-num { color: white; }
    .kpd-stat-mork .kpd-stat-etikett { color: rgba(255,255,255,0.55); }
    .kpd-stat-ikonboks {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.15); color: white;
    }
    .kpd-stat-ikon-gronn { background: rgba(var(--st-ok-tint),0.12); color: var(--st-ok-tekst); }
    .kpd-stat-ikon-muted { background: var(--bg); color: var(--text-muted); }
    .kpd-stat-num {
      font-size: 26px; font-weight: 800; color: var(--text);
      line-height: 1; letter-spacing: -0.03em;
    }
    .kpd-stat-num-gronn { color: var(--st-ok-tekst); }
    .kpd-stat-etikett { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 3px; white-space: nowrap; }
    .kpd-stat-sok-kort { gap: 10px; padding: 13px 18px; flex: 1.4; }
    .kpd-sok-ikon { color: var(--text-muted); flex-shrink: 0; }
    .kpd-sok-input {
      flex: 1; border: none; outline: none;
      font-size: 13px; font-family: inherit;
      color: var(--text); background: transparent; width: 100%;
    }
    .kpd-sok-input::placeholder { color: var(--text-muted); }

    /* ── Body ──────────────────────────────────────────── */
    .kpd-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
      padding: 0 24px 24px; gap: 12px; background: var(--bg);
    }

    /* ── Venstre panel ─────────────────────────────────── */
    .kpd-venstre {
      width: 280px; flex-shrink: 0;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-hendelse-liste { flex: 1; overflow-y: auto; padding-bottom: 16px; }

    /* Seksjonsoverskrift (Med kjøreplan / Øvrige hendelser) */
    .kpd-seksjon-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; white-space: nowrap;
      padding: 14px 16px 6px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--text);
      background: var(--surface); position: sticky; top: 0; z-index: 2;
    }
    /* Venstredelen (etikett + teller): ellipser heller enn å brekke over to
       linjer — «Frittstående kjøreplaner» brakk i 280px-lista. */
    .kpd-seksjon-venstre { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .kpd-seksjon-etikett { overflow: hidden; text-overflow: ellipsis; }
    .kpd-seksjon-header-dim { color: var(--text-muted); }
    .kpd-seksjon-header-border { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
    .kpd-seksjon-teller {
      background: var(--text); color: var(--surface);
      font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    }
    .kpd-seksjon-teller-dim { background: var(--bg2); color: var(--text-muted); }

    .kpd-dag-header {
      padding: 6px 16px 3px; font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; color: var(--text-muted); background: var(--surface);
    }
    .kpd-hendelse-rad {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; cursor: pointer;
      border-left: 3px solid transparent;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
      transition: background 0.1s;
    }
    .kpd-hendelse-rad:hover { background: var(--bg); }
    .kpd-hendelse-rad.aktiv {
      background: color-mix(in srgb, var(--primary) 6%, transparent);
      border-left-color: var(--primary);
    }
    .kpd-hendelse-info { flex: 1; min-width: 0; }
    .kpd-hendelse-tittel {
      font-size: 13px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .kpd-hendelse-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .kpd-antall-badge {
      flex-shrink: 0; background: var(--text); color: var(--surface);
      font-size: 10px; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; min-width: 20px; text-align: center;
    }
    .kpd-antall-tom { background: var(--bg2); color: var(--text-muted); }

    /* ── Høyre panel ───────────────────────────────────── */
    .kpd-hoyre {
      flex: 1; min-width: 0; display: flex;
      flex-direction: column; overflow: hidden;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-tom-panel {
      flex: 1; display: flex; align-items: center; justify-content: center;
    }
    .kpd-tom-innhold { text-align: center; padding: 40px 20px; }
    .kpd-tom-ikon-wrapper {
      width: 72px; height: 72px; border-radius: 50%;
      background: var(--bg); display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; color: var(--text-muted);
    }
    .kpd-tom-tittel { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
    .kpd-tom-tekst { font-size: 13px; color: var(--text-muted); max-width: 240px; margin: 0 auto; line-height: 1.5; }

    .kpd-panel-header {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px;
      padding: 20px 24px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface); flex-shrink: 0;
      /* Tittelblokka har min-width i markupen; blir raden for bred, brekker
         verktøyraden ned på egen linje i stedet for å klemme tittelen flat. */
      flex-wrap: wrap;
    }
    .kpd-panel-tilbake { display: none; }
    .kpd-panel-tittel {
      font-size: 20px; font-weight: 800; color: var(--text);
      line-height: 1.2; letter-spacing: -0.02em;
    }
    .kpd-panel-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
    /* Verktøyraden: samme normalisering som .kp-header-actions i infoModal —
       knappene kommer fra fire stilfamilier (.kp-btn-print/-mal, .live-start-btn,
       .live-monitor-btn, .kp-legg-til-btn) med hver sin font/padding og dermed
       hver sin høyde. Barnevelgeren gir alle 28 px og nowrap, og raden får
       brekke i stedet for å klemme én knapp («> div > button» treffer
       mal-knappene som ligger i position:relative-wrappere). */
    .kpd-panel-knappar {
      display: flex; gap: 6px; align-items: center; flex-shrink: 0; padding-top: 2px;
      flex-wrap: wrap; justify-content: flex-end;
    }
    .kpd-panel-knappar > button,
    .kpd-panel-knappar > div > button {
      height: 28px; padding: 0 11px; font-size: 11.5px; border-radius: 7px;
      display: inline-flex; align-items: center; gap: 5px;
      white-space: nowrap; flex-shrink: 0;
    }
    .kpd-panel-knappar > div { flex-shrink: 0; }
    /* .kpd-kjoreplan-scroll-blokka (gammel kort-editor med egne fasefarger) er
       SLETTET 2026-08-23 — containeren forsvant fra Index.html da høyre panel
       gikk over til den delte fkpx-editoren, så reglene traff ingenting. */

/* ─── Innebygd Kjøreplaner-fane (.kpd-embed, dashboard-fane) ─────────────
   Basisstilen over er nå token-basert, så remapen her er KUN det som er
   annerledes når modulen lever som fane: dashboardet har allerede en mørk
   topbar, så headeren blir lys flate; kortene mister skygge og det mørke
   statkortet flates ut (ett hero-kort per skjerm er nok — fanen har evo-hero). */
    .kpd-embed .kpd-header {
      background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .kpd-embed .kpd-tilbake-btn { display: none; }
    /* Som fane er tittelen fanens øverste nivå → fanetittel-primitiven
       (Bebas 26), ikke Inter 17. Fullskjerm beholder orgp-topbarens uttrykk. */
    .kpd-embed .kpd-overskrift {
      color: var(--text);
      font-family: 'Bebas Neue', sans-serif; font-size: 26px; font-weight: 400;
      letter-spacing: .03em; text-transform: uppercase; line-height: 1;
    }
    .kpd-embed .kpd-header-tittelblokk { gap: 3px; }
    .kpd-embed .kpd-header-meta { color: var(--text-muted); }
    .kpd-embed .kpd-event-velger {
      border-color: var(--border); background: var(--surface); color: var(--text);
    }
    .kpd-embed .kpd-event-velger:focus { border-color: var(--primary); }
    .kpd-embed .kpd-event-velger option { background: var(--surface); color: var(--text); }
    .kpd-embed .kpd-stat-rad { background: transparent; }
    .kpd-embed .kpd-stat-mork { background: var(--surface); border-color: var(--border); }
    .kpd-embed .kpd-stat-mork .kpd-stat-num { color: var(--text); }
    .kpd-embed .kpd-stat-mork .kpd-stat-etikett { color: var(--text-muted); }
    .kpd-embed .kpd-stat-ikonboks { background: var(--bg); color: var(--text-muted); }
    .kpd-embed .kpd-body { background: transparent; }
    .kpd-embed .kpd-venstre,
    .kpd-embed .kpd-hoyre { box-shadow: none; }



    /* ══════════════════════════════════════════════════════════════════
       DIALOGER (app-core.js: bekreft/varsle/sporTekst, prefiks `dlg-`)

       Erstatter native alert()/confirm()/prompt(). Dialogen ligger direkte
       på <body>, ikke inne i `.modal`, så `.modal button` (0,1,1) treffer
       den ikke — men den globale `button`-regelen gjør det. Alt er derfor
       skopet `.dlg .x` (0,2,0), samme lærdom som dtp- og mb-komponentene.

       Fare-tonen (sletting) er den eneste som får rødt. Native confirm()
       ga ingen forskjell på «slett for alltid» og «last inn på nytt?»,
       og det er nettopp der brukeren trenger å stoppe opp.
       ══════════════════════════════════════════════════════════════════ */
    .dlg-overlay {
      position: fixed; inset: 0; z-index: var(--z-dialog, 100000);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.55);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .dlg-overlay .dlg {
      width: min(420px, 100%);
      background: var(--surface, #fff);
      border: 1px solid var(--border, #E5D8CF);
      border-radius: var(--modal-r, 14px);
      box-shadow: var(--modal-shadow, 0 28px 90px rgba(0,0,0,.38));
      padding: 20px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }
    .dlg .dlg-hode { display: flex; gap: 13px; align-items: flex-start; }
    .dlg .dlg-ikon {
      flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg, #FAF6F2); color: var(--text-muted, #7A6E68);
    }
    .dlg .dlg-ikon svg { width: 18px; height: 18px; }
    .dlg--fare .dlg-ikon { background: var(--st-feil-bg, #FEE2E2); color: var(--st-feil-tekst, #B91C1C); }
    .dlg--feil .dlg-ikon { background: var(--st-feil-bg, #FEE2E2); color: var(--st-feil-tekst, #B91C1C); }
    .dlg .dlg-hode-tekst { min-width: 0; flex: 1; }
    .dlg .dlg-tittel {
      margin: 3px 0 0; font-size: 15.5px; font-weight: 700;
      color: var(--text, #1D1D1D); line-height: 1.35;
    }
    .dlg .dlg-tekst {
      margin: 7px 0 0; font-size: 13px; line-height: 1.5;
      color: var(--text-muted, #7A6E68); overflow-wrap: anywhere;
    }
    .dlg .dlg-felt { display: block; margin: 15px 0 0; }
    .dlg .dlg-etikett {
      display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7A6E68);
    }
    .dlg .dlg-input {
      width: 100%; box-sizing: border-box;
      padding: var(--felt-pad, 9px 11px); border-radius: var(--felt-r, 9px);
      border: 1.5px solid var(--border, #E5D8CF);
      background: var(--surface, #fff); color: var(--text, #1D1D1D);
      font-family: inherit; font-size: 14px;
    }
    .dlg .dlg-input:focus { outline: none; border-color: var(--primary, #F71B00); box-shadow: var(--fokus-ring, 0 0 0 3px rgba(247,27,0,.16)); }
    .dlg .dlg-bunn { display: flex; gap: 8px; justify-content: flex-end; margin-top: 19px; }
    .dlg .dlg-knapp {
      padding: 9px 16px; border-radius: 9px; cursor: pointer;
      border: 1.5px solid var(--border, #E5D8CF);
      background: var(--surface, #fff); color: var(--text, #1D1D1D);
      font-family: inherit; font-size: 13px; font-weight: 700;
    }
    .dlg .dlg-knapp:hover { background: var(--bg, #FAF6F2); }
    .dlg .dlg-knapp:focus-visible { outline: none; box-shadow: var(--fokus-ring, 0 0 0 3px rgba(247,27,0,.16)); }
    .dlg .dlg-knapp--primar {
      background: var(--text, #1D1D1D); border-color: var(--text, #1D1D1D); color: #fff;
    }
    .dlg .dlg-knapp--primar:hover { background: #000; }
    .dlg .dlg-knapp--fare {
      background: var(--primary, #F71B00); border-color: var(--primary, #F71B00); color: #fff;
    }
    .dlg .dlg-knapp--fare:hover { background: #d81700; }
    @media (prefers-reduced-motion: no-preference) {
      .dlg-overlay .dlg {
        animation: dlgInn calc(var(--anim-varighet, 180ms)) var(--anim-kurve, cubic-bezier(.22,1,.36,1)) backwards;
      }
      @keyframes dlgInn {
        from { opacity: 0; transform: translateY(8px) scale(.97); }
        to   { opacity: 1; transform: none; }
      }
    }
    /* Små skjermer uten mobilappen (nettleser på nettbrett, delelenker):
       full bredde og større treffflater, men fortsatt sentrert modal. */
    @media (max-width: 480px) {
      .dlg .dlg-bunn { flex-direction: column-reverse; }
      .dlg .dlg-knapp { width: 100%; padding: 12px 16px; font-size: 14px; }
      .dlg .dlg-input { font-size: 16px; }
    }

    /* ══════════════════════════════════════════════════════════════════
       DATO/TID-VELGER (app-datotid.js, prefiks `dtp-`)

       Erstatter native date/time/datetime-local på de arrangements-scopede
       flatene. Kontrakt og bruk: se toppen av app-datotid.js.

       Merk: time = firkanter i rutenett, minutt = piller. Med lik form ble
       de seks rader identiske celler, og man så ikke hvor det ene sluttet
       og det andre begynte. Formforskjellen ER informasjonen.

       Alt er token-basert, så mørk modus følger med uten egne regler i
       stil-tema.css — bortsett fra at `.dtp-panel` og `.dtp-bunn` MÅ ha
       eksplisitt `--surface`-bakgrunn: panelet ligger over annet innhold,
       og den sticky bunnlinja skal ikke slippe innhold gjennom.
       ══════════════════════════════════════════════════════════════════ */
    .dtp-skjult {
      position: absolute!important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
    .dtp-vert {
      position: relative;
      display: block;
    }

    /* ── Lukket tilstand: ser ut som .felt, oppfører seg som en knapp ── */
    .dtp-knapp {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px/1.35 Inter,system-ui,sans-serif;
      text-align: left;
      cursor: pointer;
      transition: border-color .12s,box-shadow .12s;
    }
    .dtp-knapp:hover:not(:disabled) {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-knapp:disabled {
      opacity: .6;
      cursor: default;
    }
    .dtp-knapp:focus-visible,
    .dtp-vert.apen .dtp-knapp {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.15));
    }
    .dtp-knapp svg {
      flex: 0 0 auto;
      opacity: .5;
    }
    .dtp-knapp-tekst {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
    }
    .dtp-knapp-dato {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Klokkeslettet krymper aldri — det er den presise delen av verdien.
       Datoen er den som skal kortes ned: «Fre 24. j… · 10:00» er brukbart,
       «Fre 24. jul · 10:…» er ikke. */
    .dtp-knapp-tid {
      flex: 0 0 auto;
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .dtp-knapp-dato + .dtp-knapp-tid::before {
      content: '·';
      margin-right: 6px;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-knapp.tom .dtp-knapp-tekst {
      color: var(--text-muted,#7A6E68);
      font-weight: 400;
    }
    .dtp-knapp-etter {
      flex: 0 0 auto;
      font: 600 11px/1 Inter,sans-serif;
      color: var(--text-muted,#7A6E68);
      font-variant-numeric: tabular-nums;
      background: var(--bg,#FFF2E9);
      padding: 4px 7px;
      border-radius: 999px;
    }
    .dtp-vert.ugyldig .dtp-knapp {
      border-color: var(--st-feil-tekst,#C62828);
    }
    /* `.modal button, .modal-content button` (0,1,1) i modal-seksjonen over
       slår komponentens egne (0,1,0)-regler — samme felle som mb-komponentene
       gikk i. Alt INNE i panelet er derfor scopet `.dtp-panel .x` (0,2,0),
       som også er sant: de elementene finnes ikke andre steder. Kun den
       lukkede knappen står utenfor panelet og må gjentas her. */
    .modal .dtp-knapp,
    .modal-content .dtp-knapp {
      background: var(--surface,#fff);
      border-color: var(--border,#E5D8CF);
      color: var(--text,#1D1D1D);
    }
    .modal .dtp-knapp:hover:not(:disabled),
    .modal-content .dtp-knapp:hover:not(:disabled) {
      background: var(--surface,#fff);
      border-color: var(--text-muted,#7A6E68);
    }
    .modal .dtp-vert.apen .dtp-knapp,
    .modal-content .dtp-vert.apen .dtp-knapp {
      border-color: var(--primary,#F71B00);
    }

    .dtp-panel {
      position: absolute;
      z-index: var(--z-popover,9000);
      top: calc(100% + 6px);
      left: 0;
      width: 328px;
      max-width: calc(100vw - 24px);
      max-height: min(78vh,640px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--surface,#fff);
      border: 1px solid var(--border,#E5D8CF);
      border-radius: var(--modal-r,14px);
      box-shadow: var(--modal-shadow,0 18px 48px rgba(66,43,28,.18));
      padding: 12px 12px 0;
      box-sizing: border-box;
    }
    .dtp-panel[hidden] {
      display: none;
    }
    .dtp-panel.opp {
      top: auto;
      bottom: calc(100% + 6px);
    }
    .dtp-panel.hoyre {
      left: auto;
      right: 0;
    }
    .dtp-panel .dtp-seksjon+.dtp-seksjon {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border,#E5D8CF);
    }
    .dtp-panel .dtp-merke {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font: 700 10px/1 Inter,sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      margin-bottom: 8px;
    }
    .dtp-panel .dtp-merke-verdi {
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      font-size: 11px;
    }

    /* Dagstripe — speiler tidslinjas dagknapper */
    .dtp-panel .dtp-dager {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: thin;
      padding-bottom: 2px;
      scroll-snap-type: x proximity;
    }
    .dtp-panel .dtp-dag {
      flex: 0 0 auto;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      min-width: 52px;
      padding: 7px 9px;
      border-radius: 10px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
      transition: background .12s,color .12s,border-color .12s;
    }
    .dtp-panel .dtp-dag-uke {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag-nr {
      font: 500 15px/1.1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
    }
    .dtp-panel .dtp-dag-mnd {
      font: 600 9px/1 Inter,sans-serif;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag:hover {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-dag.valgt .dtp-dag-uke, .dtp-panel .dtp-dag.valgt .dtp-dag-mnd {
      color: rgba(255,255,255,.82);
    }
    .dtp-panel .dtp-dag.idag:not(.valgt) .dtp-dag-nr {
      position: relative;
    }
    .dtp-panel .dtp-dag.idag:not(.valgt) .dtp-dag-nr::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -3px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--primary,#F71B00);
    }
    .dtp-panel .dtp-dag.utenfor {
      opacity: .55;
    }
    .dtp-panel .dtp-dag--annen {
      justify-content: center;
      gap: 4px;
      color: var(--text-muted,#7A6E68);
      border-style: dashed;
    }
    .dtp-panel .dtp-dag--annen:hover {
      color: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
    }

    /* Månedsrutenett (fri dato) */
    .dtp-panel .dtp-mnd-topp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .dtp-panel .dtp-mnd-navn {
      font: 700 12.5px/1 Inter,sans-serif;
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .dtp-pil {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
    }
    .dtp-panel .dtp-pil:hover {
      background: var(--bg,#FFF2E9);
    }
    .dtp-panel .dtp-rutenett {
      display: grid;
      grid-template-columns: repeat(7,1fr);
      gap: 2px;
    }
    .dtp-panel .dtp-ukenavn {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      text-align: center;
      padding: 4px 0;
    }
    .dtp-panel .dtp-celle {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: none;
      background: none;
      border-radius: 8px;
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      color: var(--text,#1D1D1D);
      cursor: pointer;
    }
    .dtp-panel .dtp-celle:hover {
      background: var(--bg,#FFF2E9);
    }
    .dtp-panel .dtp-celle.blank {
      visibility: hidden;
      cursor: default;
    }
    .dtp-panel .dtp-celle.utenfor-mnd {
      color: var(--text-muted,#7A6E68);
      opacity: .5;
    }
    .dtp-panel .dtp-celle.valgt {
      background: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-celle.idag:not(.valgt) {
      box-shadow: inset 0 0 0 1.5px var(--primary,#F71B00);
    }
    .dtp-panel .dtp-celle.eventdag:not(.valgt) {
      background: var(--primary-pill,rgba(247,27,0,.12));
    }

    /* Tid — stort felt + to rutenett */
    .dtp-panel .dtp-tid-topp {
      display: flex;
      align-items: stretch;
      gap: 6px;
      margin-bottom: 10px;
    }
    .dtp-panel .dtp-tid-felt {
      flex: 1;
      min-width: 0;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 19px/1.15 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
      text-align: center;
    }
    .dtp-panel .dtp-tid-felt:focus {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.15));
    }
    .dtp-panel .dtp-tid-felt::placeholder {
      color: var(--text-muted,#7A6E68);
      opacity: .6;
    }
    .dtp-panel .dtp-steg {
      display: grid;
      place-items: center;
      width: 38px;
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
      padding: 0;
    }
    .dtp-panel .dtp-steg:hover {
      background: var(--bg,#FFF2E9);
    }

    /* Time og minutt må LESES som to forskjellige ting: timene er firkanter
    i et rutenett, minuttene er piller. Med lik form ble de seks rader
    identiske celler, og man så ikke hvor det ene sluttet og det andre begynte. */
    .dtp-panel .dtp-undermerke {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      margin: 0 0 5px;
    }
    .dtp-panel .dtp-grid {
      display: grid;
      gap: 3px;
    }
    .dtp-panel .dtp-grid.timer {
      grid-template-columns: repeat(6,1fr);
    }
    .dtp-panel .dtp-grid.min {
      grid-template-columns: repeat(6,1fr);
      gap: 4px;
    }
    .dtp-panel .dtp-tall {
      padding: 6px 0;
      border: 1px solid transparent;
      border-radius: 7px;
      background: var(--bg,#FFF2E9);
      color: var(--text,#1D1D1D);
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: background .1s;
    }
    .dtp-panel .dtp-grid.min .dtp-tall {
      border-radius: 999px;
      background: transparent;
      border-color: var(--border,#E5D8CF);
    }
    .dtp-panel .dtp-tall:hover {
      background: var(--primary-pill,rgba(247,27,0,.12));
    }
    .dtp-panel .dtp-tall.valgt, .dtp-panel .dtp-grid.min .dtp-tall.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-tall.avvik {
      border-color: var(--primary,#F71B00);
      border-style: dashed;
    }

    /* Varighet */
    .dtp-panel .dtp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .dtp-panel .dtp-chip {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 600 11.5px/1 Inter,sans-serif;
      cursor: pointer;
    }
    .dtp-panel .dtp-chip:hover {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-chip.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-hint {
      margin-top: 7px;
      font: 500 11px/1.4 Inter,sans-serif;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-hint.advar {
      color: var(--st-feil-tekst,#C62828);
    }

    /* Sticky: «Ferdig» skal ALDRI havne under bretten. Panelet er høyere enn
    en liten telefon, og en primærhandling man må rulle til er ingen
    primærhandling. */
    .dtp-panel .dtp-bunn {
      position: sticky;
      bottom: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
      padding: 10px 0 12px;
      border-top: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
    }
    .dtp-panel .dtp-lenke {
      border: none;
      background: none;
      padding: 4px 2px;
      color: var(--text-muted,#7A6E68);
      font: 600 11.5px/1 Inter,sans-serif;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .dtp-panel .dtp-lenke:hover {
      color: var(--primary,#F71B00);
    }
    .dtp-panel .dtp-ferdig {
      padding: 7px 14px;
      border-radius: 9px;
      border: none;
      background: var(--primary,#F71B00);
      color: #fff;
      font: 600 12.5px/1 Inter,sans-serif;
      cursor: pointer;
    }

    /* ── Mobil: bunnark i stedet for popover ── */
    @media (max-width:768px) {
      .dtp-bakteppe {
        position: fixed;
        inset: 0;
        z-index: var(--z-popover,9000);
        background: rgba(20,12,8,.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
      .dtp-bakteppe[hidden] {
        display: none;
      }
      .dtp-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-radius: 18px 18px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 8px 16px 0;
        max-height: 88dvh;
        overflow-y: auto;
      }
      .dtp-panel.opp, .dtp-panel.hoyre {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .dtp-panel .dtp-håndtak {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--border,#E5D8CF);
        margin: 2px auto 8px;
      }
      .dtp-panel .dtp-tittel {
        font: 400 26px/1 'Bebas Neue',Inter,sans-serif;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text,#1D1D1D);
        margin: 0 0 14px;
      }

      /* 16 px iOS-gulv: alt under zoomer inn ved fokus */
      .dtp-panel .dtp-tid-felt {
        font-size: 21px;
        padding: 10px;
      }
      .dtp-panel .dtp-grid.timer, .dtp-panel .dtp-grid.min {
        gap: 5px;
      }
      .dtp-panel .dtp-tall {
        padding: 10px 0;
        font-size: 14px;
        border-radius: 9px;
      }
      .dtp-panel .dtp-grid.min .dtp-tall {
        border-radius: 999px;
      }
      .dtp-panel .dtp-dag {
        min-width: 58px;
        padding: 8px 10px;
      }
      .dtp-panel .dtp-celle {
        font-size: 14px;
        border-radius: 9px;
      }
      .dtp-panel .dtp-chip {
        padding: 8px 13px;
        font-size: 12.5px;
      }
      .dtp-panel .dtp-ferdig {
        padding: 11px 20px;
        font-size: 14px;
      }
      .dtp-panel .dtp-steg {
        width: 44px;
      }

      /* Sticky bunn må dekke helt ut til panelkanten, ellers blør innholdet
      gjennom sidegutterne når man ruller. */
      .dtp-panel .dtp-bunn {
        margin: 12px -16px 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      }
    }
    @media (min-width:769px) {
      .dtp-panel .dtp-håndtak, .dtp-panel .dtp-tittel {
        display: none;
      }
    }

    /* ── Varighetsvelger (`vgt-`, samme fil/komponent som dtp) ──────────
       Gjenbruker .dtp-panel/.dtp-bunn/.dtp-merke så det er ÉN paneltype i
       appen. Formspråket er også dtp sitt: minutt = firkanter, sekund =
       piller — den forskjellen er det som gjør at man ser hvor det ene
       rutenettet slutter og det andre begynner.
       Alt inne i panelet er skopet `.dtp-panel .x`, se blokka over. */
    .vgt-knapp {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px/1.35 Inter,system-ui,sans-serif;
      text-align: left;
      cursor: pointer;
      transition: border-color .12s,box-shadow .12s;
    }
    .vgt-knapp svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      color: var(--text-muted,#7A6E68);
    }
    .vgt-knapp-tekst {
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
    }
    .vgt-knapp.tom .vgt-knapp-tekst {
      font-family: Inter,system-ui,sans-serif;
      color: var(--text-muted,#7A6E68);
    }
    .vgt-knapp:hover:not(:disabled) { border-color: var(--text-muted,#7A6E68); }
    .vgt-knapp:disabled { opacity: .6; cursor: default; }
    .vgt-knapp:focus-visible {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.16));
    }
    /* `.modal button` (0,1,1) maler om knapper inne i modaler — gjentas her
       med modal-spesifisitet, samme felle som dtp- og mb-komponentene. */
    .modal .vgt-knapp,
    .modal-content .vgt-knapp {
      background: var(--surface,#fff);
      border-color: var(--border,#E5D8CF);
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .vgt-topp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .dtp-panel .vgt-na {
      font: 500 21px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .vgt-just { display: flex; gap: 5px; }
    .dtp-panel .vgt-pm {
      padding: 5px 9px;
      border-radius: 7px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text-muted,#7A6E68);
      font: 600 11px/1 Inter,sans-serif;
      cursor: pointer;
    }
    .dtp-panel .vgt-pm:hover { border-color: var(--text-muted,#7A6E68); color: var(--text,#1D1D1D); }
    .dtp-panel .vgt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .dtp-panel .vgt-chip {
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: transparent;
      color: var(--text,#1D1D1D);
      font: 500 12px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-chip:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-chip.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .vgt-rute {
      display: grid;
      grid-template-columns: repeat(8,1fr);
      gap: 4px;
    }
    .dtp-panel .vgt-celle {
      padding: 7px 0;
      border-radius: 7px;
      border: 1px solid transparent;
      background: var(--bg,#FAF6F2);
      color: var(--text,#1D1D1D);
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-celle:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-celle.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    /* Verdi utenfor rutenettet (importert 23 min) — vises heller enn å
       forsvinne stille, samme regel som dtp sitt avvikende minutt. */
    .dtp-panel .vgt-celle.avvik,
    .dtp-panel .vgt-pille.avvik { border-style: dashed; }
    .dtp-panel .vgt-piller { display: flex; flex-wrap: wrap; gap: 5px; }
    .dtp-panel .vgt-pille {
      min-width: 38px;
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: transparent;
      color: var(--text,#1D1D1D);
      font: 500 12px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-pille:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-pille.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .vgt-fri {
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px Inter,system-ui,sans-serif;
    }
    .dtp-panel .vgt-fri:focus {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.16));
    }
    .dtp-panel .vgt-fri.ugyldig { border-color: var(--st-feil-tekst,#B42318); }
    @media (max-width:768px) {
      .dtp-panel .vgt-rute { grid-template-columns: repeat(6,1fr); }
      .dtp-panel .vgt-celle { padding: 10px 0; }
      .dtp-panel .vgt-pille { padding: 9px 12px; }
      .dtp-panel .vgt-fri { font-size: 16px; }
    }
    @media (prefers-reduced-motion:no-preference) {
      .dtp-panel:not([hidden]) {
        animation: dtpInn var(--anim-tid-hurtig,.18s) var(--anim-kurve,cubic-bezier(.2,.8,.3,1)) backwards;
      }
      @keyframes dtpInn {
        from {
          opacity: 0;
          transform: translateY(calc(var(--anim-avstand,10px)*-.5));
        }
      }
      @media (max-width:768px) {
        .dtp-panel:not([hidden]) {
          animation: dtpArkInn var(--anim-tid-panel,.26s) var(--anim-kurve,cubic-bezier(.2,.8,.3,1)) backwards;
        }
        @keyframes dtpArkInn {
          from {
            transform: translateY(16px);
            opacity: .4;
          }
        }
      }
    }