/* ============================================================
       InsuBot v2.5 — gull-disiplin + to-lags fargedisiplin
       Gold = chrome/merkevare. Klinisk (grønn/oransje/rød) = tilstand.
       (rc2-justering: tekst opp ett hakk, dempet topp-glød)
       ============================================================ */
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
    * { margin:0; padding:0; box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
    *::-webkit-scrollbar { width:0; height:0; display:none; }
    html, body { scrollbar-width:none; -ms-overflow-style:none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; width:0; height:0; }

    html[data-theme="dark"] {
        --app-bg: radial-gradient(135% 78% at 50% 2%,#241a12 0%,#1a1209 48%,#0f0a05 100%);
        --glow: rgba(243,195,74,0.06);
        --hero-bg: linear-gradient(162deg,#2e2715,#221a0c);
        --hero-border: rgba(243,195,74,0.18);
        --card-bg: linear-gradient(160deg,#1e1a13,#15110b);
        --card-border: rgba(255,255,255,0.07);
        --input-bg: linear-gradient(160deg,#221911,#1a120b);
        --input-bg-flat: rgba(0,0,0,0.22);
        --seg-bg: rgba(255,255,255,0.05);
        --seg-border: rgba(255,255,255,0.06);
        --stepper-minus-bg: rgba(255,255,255,0.06);
        --tiltak-bg: linear-gradient(150deg,rgba(251,223,156,0.17),rgba(230,168,46,0.07));
        --tiltak-border: rgba(243,195,74,0.5);
        --gold-grad: linear-gradient(150deg,#fbdf9c,#e6a82e);
        --gold-solid: #f3c34a;
        --on-gold: #2a1c06;
        --text-strong: #fbf3e9;
        --text-mid: #c4ab86;
        --text-muted: #9a8569;
        --text-onhero-unit: #b39c86;
        --tiltak-title: #f7d488;
        --tiltak-label: #c79a4a;
        --divider: rgba(243,195,74,0.13);
        --divider-strong: rgba(243,195,74,0.2);
        --nav-bg: linear-gradient(180deg,rgba(20,14,8,0),rgba(15,10,5,0.95) 42%);
        --nav-scrim: linear-gradient(180deg,rgba(15,10,5,0),rgba(15,10,5,0.95));
        --nav-border: rgba(255,255,255,0.06);
        --hero-ring: #221a0c;
        --clin-green: #34c886;        --clin-green-text:#45dd97; --clin-green-bg:rgba(52,200,130,0.14); --clin-green-bd:rgba(52,200,130,0.34);
        --clin-high: #fb923c;         --clin-high-text:#fb923c;  --clin-high-bg:rgba(251,146,60,0.14);  --clin-high-bd:rgba(251,146,60,0.36);
        --clin-low: #f87171;          --clin-low-text:#f87171;   --clin-low-bg:rgba(248,113,113,0.15);  --clin-low-bd:rgba(248,113,113,0.38);
    }
    html[data-theme="light"] {
        --app-bg: radial-gradient(135% 78% at 50% 2%,#fdf7ec 0%,#f7eeda 48%,#f0e4cb 100%);
        --glow: rgba(230,168,46,0.12);
        --hero-bg: linear-gradient(162deg,#fffdf7,#fbf3e2);
        --hero-border: rgba(180,140,60,0.22);
        --card-bg: #fffdf8;
        --card-border: rgba(180,140,60,0.18);
        --input-bg: linear-gradient(162deg,#fffdf7,#fbf3e2);
        --input-bg-flat: #fffdf8;
        --seg-bg: rgba(120,90,40,0.07);
        --seg-border: rgba(120,90,40,0.14);
        --stepper-minus-bg: rgba(120,90,40,0.08);
        --tiltak-bg: linear-gradient(150deg,#fdeec2,#f8dca0);
        --tiltak-border: rgba(217,148,33,0.5);
        --gold-grad: linear-gradient(150deg,#f0c25f,#d99421);
        --gold-solid: #d99421;
        --on-gold: #fffaf0;
        --text-strong: #2a1f12;
        --text-mid: #8a7858;
        --text-muted: #94815f;
        --text-onhero-unit: #8a7858;
        --tiltak-title: #7a5208;
        --tiltak-label: #a06f10;
        --divider: rgba(180,140,60,0.2);
        --divider-strong: rgba(180,140,60,0.28);
        --nav-bg: linear-gradient(180deg,rgba(247,238,218,0),rgba(247,238,218,0.96) 42%);
        --nav-scrim: linear-gradient(180deg,rgba(247,238,218,0),rgba(247,238,218,0.96));
        --nav-border: rgba(180,140,60,0.16);
        --hero-ring: #fffdf7;
        --clin-green: #1f9d57;        --clin-green-text:#1f9d57; --clin-green-bg:rgba(31,157,87,0.12); --clin-green-bd:rgba(31,157,87,0.32);
        --clin-high: #ea7a1e;         --clin-high-text:#c8690f;  --clin-high-bg:rgba(234,122,30,0.13); --clin-high-bd:rgba(234,122,30,0.4);
        --clin-low: #e2524f;          --clin-low-text:#cc403d;   --clin-low-bg:rgba(226,82,79,0.12);  --clin-low-bd:rgba(226,82,79,0.36);
    }

    html, body { background:#1a1209; }
    html[data-theme="light"], html[data-theme="light"] body { background:#f3e8d2; }
    body {
        font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background:var(--app-bg);
        background-attachment:fixed;
        color:var(--text-strong);
        min-height:100vh;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
    }
    .num { font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; }

    /* soft top glow — low opacity, no hard edge against the status bar */
    .app-glow { position:fixed; width:300px; height:210px; right:-30px; top:0;
        background:radial-gradient(120% 100% at 78% 0%,var(--glow),transparent 60%); pointer-events:none; z-index:0; }

    .app { position:relative; z-index:1; max-width:460px; margin:0 auto;
        padding:calc(16px + env(safe-area-inset-top,0)) 20px calc(110px + env(safe-area-inset-bottom,0)); }

    .view { display:none; animation:fadeUp .28s ease; }
    .view.active { display:block; }

    /* ---------- header (hjem) ---------- */
    .app-header { display:flex; align-items:center; gap:12px; padding:0 2px; margin-bottom:18px; }
    .logo { width:44px; height:44px; border-radius:14px; background:radial-gradient(circle at 32% 28%,#fbdf9c,#e6a82e);
        display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px rgba(243,195,74,0.45); flex-shrink:0; }
    html[data-theme="light"] .logo { background:radial-gradient(circle at 32% 28%,#f0c25f,#d99421); box-shadow:0 6px 16px -6px rgba(217,148,33,0.5); }
    .logo svg { fill:#2a1c06; width:22px; height:22px; }
    html[data-theme="light"] .logo svg { fill:#fffaf0; }
    .brand { flex:1; font:700 19px 'Bricolage Grotesque'; color:var(--text-strong); }

    /* active temporary-message indicator (shown only while a message is live) */
    .msg-ind { display:none; width:30px; height:30px; flex-shrink:0; border-radius:999px;
        border:1.5px solid var(--gold-solid); background:transparent; color:var(--gold-solid);
        cursor:pointer; align-items:center; justify-content:center;
        font:italic 700 16px Georgia, 'Bricolage Grotesque', serif;
        box-shadow:0 0 0 0 rgba(243,195,74,0.5); animation:msgPulse 2.6s ease-in-out infinite; }
    .msg-ind.show { display:flex; }
    @keyframes msgPulse { 0%,100% { box-shadow:0 0 0 0 rgba(243,195,74,0.45); } 50% { box-shadow:0 0 0 5px rgba(243,195,74,0); } }

    .theme-toggle { display:flex; gap:3px; padding:3px; border-radius:999px; background:var(--seg-bg); border:1px solid var(--seg-border); }
    .theme-toggle button { width:33px; height:30px; border:0; background:transparent; border-radius:999px; cursor:pointer;
        display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
    .theme-toggle button svg { width:16px; height:16px; }
    .theme-toggle button.active { background:var(--gold-grad); box-shadow:0 4px 10px -4px rgba(243,195,74,0.6); color:var(--on-gold); }

    /* ---------- registrer header ---------- */
    .reg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding:0 2px; }
    .reg-title { font:700 28px 'Bricolage Grotesque'; color:var(--text-strong); letter-spacing:-0.01em; }
    .chip { display:flex; align-items:center; gap:6px; padding:7px 13px 7px 11px; border-radius:999px;
        border:1.5px solid var(--clin-bd,var(--clin-green-bd)); background:var(--clin-bg,var(--clin-green-bg)); }
    .chip svg { width:15px; height:15px; }
    .chip .v { font:700 19px 'Bricolage Grotesque'; line-height:1; color:var(--clin-color,var(--clin-green-text)); }

    /* ---------- cards ---------- */
    .hero { border-radius:25px; padding:18px 18px; background:var(--hero-bg); border:1px solid var(--hero-border);
        box-shadow:0 16px 38px -22px rgba(0,0,0,0.7); margin-bottom:14px; }
    .hero-top { display:flex; align-items:flex-start; justify-content:space-between; }
    .kicker { font:600 12px 'Hanken Grotesk'; letter-spacing:.13em; color:var(--text-muted); text-transform:uppercase; }
    .bs-row { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
    .bs-val { font:700 52px 'Bricolage Grotesque'; line-height:.85; color:var(--text-strong); letter-spacing:-0.02em; }
    .bs-unit { font:600 16px 'Hanken Grotesk'; color:var(--text-onhero-unit); }
    .statepill { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:5px 11px; border-radius:999px;
        background:var(--clin-bg,var(--clin-green-bg)); border:1px solid var(--clin-bd,var(--clin-green-bd)); }
    .statepill svg { width:15px; height:15px; }
    .statepill span { font:600 13.5px 'Hanken Grotesk'; color:var(--clin-color,var(--clin-green-text)); }
    .spark { width:56%; min-width:170px; text-align:right; }
    .spark .lab { font:500 11px 'Hanken Grotesk'; color:var(--text-muted); margin-top:3px; }
    .trendstrip { display:flex; gap:8px; margin-top:15px; padding-top:14px; border-top:1px solid var(--divider); }
    .fiasp-row { display:flex; align-items:center; gap:12px; margin-top:13px; padding-top:12px; border-top:1px solid var(--divider); }
    .fiasp-row svg { flex-shrink:0; }
    .fiasp-row .fr-text { flex:1; min-width:0; }
    .fiasp-row .fr-t { font:600 13px 'Hanken Grotesk'; color:var(--text-mid); }
    .fiasp-row .fr-s { font:500 11.5px 'Hanken Grotesk'; color:var(--text-muted); margin-top:1px; }
    .trendstrip .col { flex:1; }
    .trendstrip .col.iob { padding-left:10px; border-left:1px solid var(--divider-strong); }
    .trendstrip .t-lab { font:500 11.5px 'Hanken Grotesk'; color:var(--text-muted); }
    .trendstrip .t-val { font:700 17px 'Bricolage Grotesque'; color:var(--text-muted); margin-top:3px; }

    .tiltak { position:relative; border-radius:23px; padding:16px 17px; display:flex; align-items:center; gap:15px;
        background:var(--tiltak-bg); border:1px solid var(--tiltak-border);
        box-shadow:0 0 0 1px rgba(243,195,74,0.1),0 16px 38px -22px rgba(0,0,0,0.7); margin-bottom:13px; }
    .tiltak.actionable { cursor:pointer; }
    .tiltak.actionable .body { padding-right:14px; }
    .tiltak.actionable:active { transform:scale(0.992); }
    .tiltak.actionable::after { content:'\203A'; position:absolute; right:17px; top:50%; transform:translateY(-50%); font:600 30px 'Hanken Grotesk'; line-height:0; color:var(--tiltak-label); }
    .tiltak .ic { width:44px; height:44px; flex-shrink:0; border-radius:14px; background:var(--gold-grad);
        display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(243,195,74,0.55); }
    .tiltak .ic svg { width:23px; height:23px; stroke:var(--on-gold); }
    .tiltak .body { flex:1; min-width:0; }
    .tiltak .label { font:600 11.5px 'Hanken Grotesk'; letter-spacing:.13em; color:var(--tiltak-label); text-transform:uppercase; }
    .tiltak .action { font:700 22px 'Bricolage Grotesque'; color:var(--tiltak-title); letter-spacing:-0.01em; margin-top:3px; }
    .tiltak .sub { font:500 13.5px 'Hanken Grotesk'; color:var(--text-mid); margin-top:3px; }

    .hvorfor { border-radius:25px; padding:18px 19px; background:var(--card-bg); border:1px solid var(--card-border);
        box-shadow:0 18px 40px -22px rgba(0,0,0,0.7); }
    .hvorfor-head { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
    .hvorfor-head .h { font:700 16px 'Bricolage Grotesque'; color:var(--text-mid); }
    .ai-badge { margin-left:auto; font:600 12px 'Hanken Grotesk'; color:var(--on-gold); background:var(--gold-grad); padding:4px 11px; border-radius:999px; }
    .hvorfor-head .hv-when { margin-left:auto; font:600 11.5px 'Hanken Grotesk'; letter-spacing:.04em; color:var(--text-muted); text-align:right; }
    .hvorfor p.reason { margin:0; font:500 16px/1.55 'Hanken Grotesk'; color:var(--text-mid); }
    .quote { margin-top:13px; padding-top:12px; border-top:1px dashed var(--divider-strong); display:flex; gap:10px; align-items:flex-start; }
    .quote .qmark { flex-shrink:0; font:700 46px/0.7 'Bricolage Grotesque', Georgia, serif; color:var(--gold-solid); margin-top:8px; }
    .quote p { margin:0; font:500 14px/1.5 'Hanken Grotesk'; color:var(--text-mid); font-style:italic; }

    /* ---------- segmented tabs ---------- */
    .seg { display:flex; gap:6px; margin-bottom:16px; background:var(--seg-bg); border:1px solid var(--seg-border); border-radius:16px; padding:5px; }
    .seg button { flex:1; text-align:center; padding:12px; border:0; background:transparent; border-radius:12px; cursor:pointer;
        color:var(--text-mid); font:600 15px 'Hanken Grotesk'; }
    .seg button.active { background:var(--gold-grad); color:var(--on-gold); font-weight:700; box-shadow:0 6px 16px -6px rgba(243,195,74,0.5); }

    /* ---------- type radios ---------- */
    .typerow { display:flex; align-items:center; gap:16px; margin-bottom:30px; padding:0 2px; }
    .typerow .tl { font:600 13px 'Hanken Grotesk'; letter-spacing:.07em; color:var(--text-muted); text-transform:uppercase; }
    .radio { display:flex; align-items:center; gap:8px; cursor:pointer; }
    .radio .dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--text-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .radio .dot i { width:9px; height:9px; border-radius:50%; background:transparent; display:block; }
    .radio span { font:700 15px 'Hanken Grotesk'; color:var(--text-muted); }
    .radio.on .dot { border-color:var(--gold-solid); }
    .radio.on .dot i { background:var(--gold-solid); }
    .radio.on span { color:var(--text-strong); }

    /* ---------- search ---------- */
    .searchwrap { position:relative; margin-bottom:13px; }
    .searchbox { display:flex; align-items:center; gap:12px; border-radius:16px; padding:0 16px; height:56px;
        background:var(--input-bg); border:1px solid var(--card-border); }
    .searchbox svg { flex-shrink:0; stroke:var(--text-muted); width:19px; height:19px; }
    .searchbox input { flex:1; border:0; background:transparent; outline:none; color:var(--text-strong);
        font:500 16px 'Hanken Grotesk'; }
    .searchbox input::placeholder { color:var(--text-muted); }
    .searchbox .search-clear { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; background:none; color:var(--text-muted); cursor:pointer; border-radius:50%; }
    .searchbox .search-clear svg { width:16px; height:16px; stroke:currentColor; }
    .searchbox .search-clear:hover { color:var(--text-strong); }
    .searchbox .search-clear[hidden] { display:none; }
    .suggestions { position:absolute; left:0; right:0; top:60px; z-index:20; background:var(--input-bg); border:1px solid var(--card-border);
        border-radius:15px; overflow:hidden; box-shadow:0 18px 40px -18px rgba(0,0,0,0.7); display:none; max-height:280px; overflow-y:auto; }
    .suggestions.open { display:block; }
    .suggestions .opt { padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--seg-border); display:flex; justify-content:space-between; gap:10px; }
    .suggestions .opt:last-child { border-bottom:0; }
    .suggestions .opt:hover, .suggestions .opt.active { background:var(--clin-pick,var(--seg-bg)); }
    .suggestions .opt.active { box-shadow:inset 3px 0 0 var(--gold-solid); }
    .suggestions .opt .n { font:600 15px 'Hanken Grotesk'; color:var(--text-strong); }
    .suggestions .opt .c { font:500 14px 'Hanken Grotesk'; color:var(--text-muted); white-space:nowrap; }

    /* ---------- stepper ---------- */
    .field { border-radius:18px; padding:12px 17px; display:flex; align-items:center; justify-content:space-between;
        background:var(--input-bg); border:1px solid var(--card-border); margin-bottom:12px; }
    .field .flab { font:600 12px 'Hanken Grotesk'; letter-spacing:.07em; color:var(--text-muted); text-transform:uppercase; line-height:1.3; }
    .stepper { display:flex; align-items:center; gap:15px; }
    .stepper .sb { width:46px; height:46px; border-radius:15px; border:0; cursor:pointer; font:600 28px 'Bricolage Grotesque';
        display:flex; align-items:center; justify-content:center; }
    .stepper .minus { background:var(--stepper-minus-bg); color:var(--text-mid); }
    .stepper .plus { background:var(--gold-grad); color:var(--on-gold); box-shadow:0 8px 18px -6px rgba(243,195,74,0.55); }
    .stepper .sv { font:700 38px 'Bricolage Grotesque'; color:var(--text-strong); line-height:1; min-width:62px; text-align:center; }

    /* dose stepper (insulin, larger) */
    .dosecard { border-radius:24px; padding:19px; background:var(--input-bg); border:1px solid var(--card-border); margin-bottom:13px; }
    .dosecard .dl { font:600 13px 'Hanken Grotesk'; letter-spacing:.07em; color:var(--text-muted); text-transform:uppercase; text-align:center; }
    .doserow { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
    .doserow .sb { width:54px; height:54px; border-radius:17px; border:0; cursor:pointer; font:600 30px 'Bricolage Grotesque';
        display:flex; align-items:center; justify-content:center; }
    .doserow .minus { background:var(--stepper-minus-bg); color:var(--text-mid); }
    .doserow .plus { background:var(--gold-grad); color:var(--on-gold); box-shadow:0 8px 18px -6px rgba(243,195,74,0.55); }
    .dosebig { display:flex; align-items:baseline; gap:6px; }
    .dosebig .v { font:700 56px 'Bricolage Grotesque'; color:var(--text-strong); line-height:1; }
    .dosebig .u { font:600 24px 'Hanken Grotesk'; color:var(--text-mid); }

    /* time + toggle rows */
    .rowcard { display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:16px;
        background:var(--input-bg); border:1px solid var(--card-border); margin-bottom:12px; }
    .rowcard svg { stroke:var(--text-mid); flex-shrink:0; width:19px; height:19px; }
    .rowcard .lab { font:500 12px 'Hanken Grotesk'; color:var(--text-muted); }
    .rowcard .val { font:700 22px 'Bricolage Grotesque'; color:var(--text-strong); margin-top:1px; }
    .rowcard.tp-trigger { cursor:pointer; }

    /* custom time picker (matches the gold/dark design, not the iOS modal) */
    .tp-overlay { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
        display:none; align-items:flex-end; justify-content:center; overscroll-behavior:contain; touch-action:manipulation; }
    .tp-overlay.show { display:flex; }
    .tp-sheet { width:100%; max-width:460px; background:var(--card-bg); border:1px solid var(--card-border);
        border-radius:26px 26px 0 0; padding:22px 24px calc(28px + env(safe-area-inset-bottom,0));
        box-shadow:0 -20px 50px -20px rgba(0,0,0,0.6); animation:tpUp .25s ease; }
    @keyframes tpUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
    .tp-title { font:600 13px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); text-align:center; margin-bottom:18px; }
    .tp-cols { display:flex; align-items:center; justify-content:center; gap:14px; }
    .tp-col { display:flex; flex-direction:column; align-items:center; gap:10px; }
    .tp-col button { width:66px; height:44px; border:0; border-radius:14px; cursor:pointer; background:var(--stepper-minus-bg);
        display:flex; align-items:center; justify-content:center; }
    .tp-col button svg { width:22px; height:22px; stroke:var(--text-mid); }
    /* Quick-offset button sits outside the flex flow so HH:MM stays centred */
    .tp-cols { position:relative; }
    .tp-quick { position:absolute; right:0; top:50%; transform:translateY(-50%); }
    .tp-col button.tp-quick-btn { width:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
      font:700 17px 'Bricolage Grotesque'; color:var(--text-strong); line-height:1; }
    .tp-quick-btn small { font:600 10px 'Hanken Grotesk'; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
    .tp-num { font:700 54px 'Bricolage Grotesque'; color:var(--text-strong); min-width:84px; text-align:center; line-height:1; }
    .tp-colon { font:700 46px 'Bricolage Grotesque'; color:var(--text-muted); padding-bottom:4px; }
    .tp-actions { display:flex; gap:12px; margin-top:24px; }
    .tp-actions button { flex:1; border:0; border-radius:15px; padding:16px; cursor:pointer; font:700 16px 'Hanken Grotesk'; }
    .tp-ghost { background:var(--stepper-minus-bg); color:var(--text-strong); }
    .tp-gold { background:var(--gold-grad); color:var(--on-gold); box-shadow:0 12px 26px -10px rgba(243,195,74,0.6); }
    .togglecard { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-radius:18px;
        background:var(--input-bg); border:1px solid var(--card-border); margin-bottom:12px; }
    .togglecard .t1 { font:700 16px 'Hanken Grotesk'; color:var(--text-strong); }
    .togglecard .t2 { font:500 13.5px 'Hanken Grotesk'; color:var(--text-muted); margin-top:2px; }
    .switch { width:52px; height:30px; border-radius:999px; background:var(--stepper-minus-bg); border:1px solid var(--seg-border); position:relative; cursor:pointer; flex-shrink:0; transition:background .2s; }
    .switch i { position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:var(--text-muted); transition:left .2s,background .2s; }
    .switch.on { background:var(--gold-grad); }
    .switch.on i { left:25px; background:var(--on-gold); }

    /* primary button (two-phase) */
    .primary { border:0; width:100%; border-radius:16px; padding:17px; text-align:center; cursor:pointer;
        background:var(--gold-grad); color:var(--on-gold); font:700 18px 'Bricolage Grotesque';
        box-shadow:0 12px 26px -10px rgba(243,195,74,0.6); display:flex; align-items:center; justify-content:center; gap:10px; }
    .primary:disabled { opacity:.5; box-shadow:none; cursor:default; }
    .primary .ring { width:19px; height:19px; flex-shrink:0; }
    .primary .ring circle.bg { stroke:rgba(42,28,6,0.25); }
    .primary .ring circle.fg { stroke:var(--on-gold); transform:rotate(-90deg); transform-origin:center; }

    /* forslag (analysis result) */
    .forslag { margin-top:13px; border-radius:20px; padding:16px 17px; background:var(--card-bg); border:1px solid var(--card-border);
        box-shadow:0 16px 36px -22px rgba(0,0,0,0.7); display:none; animation:fadeUp .3s ease; cursor:pointer; position:relative; }
    .forslag.show { display:block; }
    .forslag .fh { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
    .forslag .fh .t { font:700 15px 'Bricolage Grotesque'; color:var(--text-mid); }
    .forslag .dose { display:flex; align-items:baseline; gap:8px; }
    .forslag .dose .v { font:700 45px 'Bricolage Grotesque'; color:var(--text-strong); line-height:.9; letter-spacing:-0.02em; }
    .forslag .dose .u { font:600 19px 'Hanken Grotesk'; color:var(--text-mid); }
    .forslag .reason { margin:10px 0 0; font:500 14px/1.5 'Hanken Grotesk'; color:var(--text-mid); }
    .forslag .go { margin-top:12px; padding-top:11px; border-top:1px dashed var(--divider-strong);
        font:500 13.5px 'Hanken Grotesk'; color:var(--tiltak-label); }
    .forslag .go b { font-weight:700; }

    #tab-insulin .tiltak { margin-top:14px; }
    .tiltak.compact .sub { color:var(--text-mid); }

    /* ---------- mer (portal) ---------- */
    .mer-list { display:flex; flex-direction:column; gap:12px; }
    .mer-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 17px; border-radius:18px;
        background:var(--input-bg); border:1px solid var(--card-border); cursor:pointer; }
    .mer-row:disabled { cursor:default; opacity:.78; }
    .mer-row .mic { width:46px; height:46px; flex-shrink:0; border-radius:14px; background:var(--seg-bg); display:flex; align-items:center; justify-content:center; }
    .mer-row .mic svg { width:23px; height:23px; stroke:var(--gold-solid); }
    .mer-row .mtext { flex:1; min-width:0; }
    .mer-row .mt { font:700 16px 'Hanken Grotesk'; color:var(--text-strong); }
    .mer-row .ms { font:500 13px 'Hanken Grotesk'; color:var(--text-muted); margin-top:2px; }
    .mer-row .mtag { font:600 11px 'Hanken Grotesk'; letter-spacing:.04em; color:var(--text-muted); background:var(--seg-bg); padding:5px 11px; border-radius:999px; flex-shrink:0; }
    .mer-row .chev { width:18px; height:18px; stroke:var(--text-muted); flex-shrink:0; }
    #view-mer #mer-menu { display:flex; flex-direction:column; }
    .mer-admin { display:flex; align-items:center; gap:14px; margin-top:14px; padding:15px 17px; border-radius:18px; text-decoration:none;
        background:var(--seg-bg); border:1px solid var(--card-border); }
    .mer-admin svg:first-child { width:21px; height:21px; stroke:var(--text-muted); flex-shrink:0; }
    .mer-admin span { flex:1; font:600 15px 'Hanken Grotesk'; color:var(--text-mid); }
    .mer-admin .chev { width:18px; height:18px; stroke:var(--text-muted); flex-shrink:0; }

    /* mer-detail (sub-views) */
    .detail-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
    .back-btn { width:40px; height:40px; flex-shrink:0; border:0; border-radius:13px; cursor:pointer; background:var(--seg-bg);
        display:flex; align-items:center; justify-content:center; }
    .back-btn svg { width:20px; height:20px; stroke:var(--text-strong); }
    .detail-head .reg-title { font:700 24px 'Bricolage Grotesque'; }
    .ta { width:100%; border-radius:16px; padding:15px 16px; background:var(--input-bg); border:1px solid var(--card-border);
        color:var(--text-strong); font:500 15.5px/1.45 'Hanken Grotesk'; outline:none; resize:none; }
    .ta::placeholder { color:var(--text-muted); }
    .answer-card { margin-top:14px; border-radius:20px; padding:17px 18px; background:var(--card-bg); border:1px solid var(--card-border);
        font:500 15px/1.55 'Hanken Grotesk'; color:var(--text-mid); white-space:pre-wrap; animation:fadeUp .3s ease; }
    .answer-card.loading { color:var(--text-muted); font-style:italic; }
    .answer-card.error { color:var(--clin-low-text); }

    /* registreringer list */
    .reg-list { display:flex; flex-direction:column; gap:10px; }
    .reg-day { font:600 11px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin:6px 2px 0; }
    .reg-item { border-radius:18px; background:var(--input-bg); border:1px solid var(--card-border); }
    .reg-item .ri-head { display:flex; align-items:center; gap:14px; padding:14px 17px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .reg-item .ri-ic { width:46px; height:46px; flex-shrink:0; border-radius:14px; background:var(--seg-bg); display:flex; align-items:center; justify-content:center; }
    .reg-item .ri-ic svg { width:23px; height:23px; stroke:var(--gold-solid); }
    .reg-item .ri-body { flex:1; min-width:0; }
    .reg-item .ri-line1 { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
    .reg-item .ri-name { font:700 16px 'Hanken Grotesk'; color:var(--text-strong); }
    .reg-item .ri-qty { font:500 14px 'Hanken Grotesk'; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .reg-item .ri-meta { font:500 13px 'Hanken Grotesk'; color:var(--text-muted); margin-top:2px; }
    .reg-item .ri-chev { width:18px; height:18px; stroke:var(--text-muted); flex-shrink:0; transition:transform .2s ease; }
    .reg-item.expanded .ri-chev { transform:rotate(90deg); }
    .reg-item .ri-detail { display:none; padding:2px 17px 15px; border-top:1px solid var(--card-border); }
    .reg-item.expanded .ri-detail { display:block; animation:fadeUp .25s ease; }
    .ri-row { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; font:500 13.5px 'Hanken Grotesk'; color:var(--text-muted); }
    .ri-row b { font:700 13.5px 'Hanken Grotesk'; color:var(--text-strong); }
    .ri-note { font:500 13px/1.5 'Hanken Grotesk'; color:var(--text-mid); padding:8px 0 2px; }
    /* Battle of the Brains: shadow suggestions — informational tier, muted */
    .ri-shadow-h { margin-top:10px; padding-top:10px; border-top:1px dashed var(--divider);
        font:600 11px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
    .ri-shadow .ri-row { padding:6px 0 1px; }
    .ri-shadow .ri-row b { color:var(--text-mid); }
    .ri-shadow-note { font:500 12px/1.45 'Hanken Grotesk'; color:var(--text-muted); padding:1px 0 5px; }
    .reg-item .ri-del { width:100%; margin-top:10px; border:0; border-radius:12px; padding:11px; cursor:pointer; background:var(--seg-bg);
        color:var(--text-muted); font:700 13px 'Hanken Grotesk'; }

    /* inline editor — Registrer-view controls at list scale */
    .ri-edit { margin-top:12px; padding-top:12px; border-top:1px solid var(--card-border); display:flex; flex-direction:column; gap:9px; }
    .ri-edit-h { font:600 11px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
    .ri-edit .rowcard { padding:11px 14px; }
    .ri-edit .rowcard .val { font-size:18px; }
    .ri-edit .ri-field { padding:9px 14px; }
    .ri-stepper { gap:10px; }
    .ri-stepper .sb { width:36px; height:36px; border-radius:12px; font-size:22px; }
    .ri-stepper .sv { font-size:24px; min-width:52px; }
    .ri-edit .togglecard { padding:11px 14px; }
    .ri-edit .togglecard .t1 { font-size:14.5px; }
    .ri-edit .togglecard .t2 { font-size:12.5px; }
    .ri-edit .switch { width:46px; height:27px; }
    .ri-edit .switch i { width:21px; height:21px; }
    .ri-edit .switch.on i { left:22px; }
    .ri-save { padding:13px; font-size:14.5px; }
    .reg-empty { text-align:center; color:var(--text-muted); font:500 14px 'Hanken Grotesk'; padding:28px 0; }

    /* fingerstikk */
    .fs-lab { display:block; font:600 11px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin:14px 2px 6px; }
    .fs-row { display:flex; align-items:center; gap:12px; padding:13px 17px; }
    .fs-row .ri-body { flex:1; min-width:0; }
    .fs-del { flex-shrink:0; border:0; border-radius:12px; padding:9px 12px; cursor:pointer; background:var(--seg-bg);
        color:var(--text-muted); font:700 12.5px 'Hanken Grotesk'; }

    /* midlertidig melding */
    .active-card { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:15px 16px; border-radius:18px;
        background:var(--tiltak-bg); border:1px solid var(--tiltak-border); }
    .active-card .ac-lab { font:600 10.5px 'Hanken Grotesk'; letter-spacing:.12em; text-transform:uppercase; color:var(--tiltak-label); }
    .active-card .ac-text { font:600 14.5px 'Hanken Grotesk'; color:var(--tiltak-title); margin-top:2px; }
    .active-card > div:first-child { flex:1; min-width:0; }
    .active-card .ac-clear { flex-shrink:0; border:0; border-radius:12px; padding:9px 14px; cursor:pointer; background:rgba(0,0,0,0.18);
        color:var(--on-gold); font:700 13px 'Hanken Grotesk'; }
    .dur-row { display:flex; gap:8px; margin-top:12px; }
    .dur { flex:1; border:0; border-radius:13px; padding:13px; cursor:pointer; background:var(--input-bg); border:1px solid var(--card-border);
        color:var(--text-mid); font:700 15px 'Bricolage Grotesque'; }
    .dur.active { background:var(--gold-grad); color:var(--on-gold); border-color:transparent; box-shadow:0 6px 16px -6px rgba(243,195,74,0.5); }

    /* ---------- statistikk ---------- */
    .seg.sub { margin-top:-4px; }
    .seg.sub button { padding:9px; font-size:13px; }
    .datenav { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
    .dn-arrow { width:42px; height:42px; border:1px solid var(--seg-border); border-radius:13px; cursor:pointer; background:var(--seg-bg); display:flex; align-items:center; justify-content:center; }
    .dn-arrow svg { width:20px; height:20px; stroke:var(--text-mid); }
    .dn-arrow:disabled { opacity:.4; cursor:default; }
    .dn-label { font:700 16px 'Bricolage Grotesque'; color:var(--text-strong); }
    /* Tappable variant: an invisible native date input covers the label so a
       tap opens the OS date picker directly (no showPicker() support needed). */
    .dn-label.tap { position:relative; display:flex; align-items:center; gap:7px; cursor:pointer; }
    .dn-label.tap > svg { width:15px; height:15px; stroke:var(--text-muted); }
    .dn-label.tap input[type=date] { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; cursor:pointer; }
    .chart-card { border-radius:22px; padding:18px 16px; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:0 16px 38px -24px rgba(0,0,0,0.7); }
    .chart-title { font:700 15px 'Bricolage Grotesque'; color:var(--text-mid); margin-bottom:12px; }
    .chart-wrap svg { width:100%; height:auto; display:block; }
    .chart-stats { display:flex; gap:6px; margin-bottom:14px; }
    .chart-stats .cs { flex:1; text-align:center; }
    .chart-stats .cs .v { font:700 18px 'Bricolage Grotesque'; }
    .chart-stats .cs .l { font:500 10.5px 'Hanken Grotesk'; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
    .chart-legend { display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:14px; }
    .chart-legend .li { display:flex; align-items:center; gap:6px; font:500 12px 'Hanken Grotesk'; color:var(--text-muted); }
    .chart-legend .li i { width:10px; height:10px; border-radius:50%; }
    .events-card { border-radius:22px; padding:16px 18px; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:0 16px 38px -24px rgba(0,0,0,0.7); margin-top:14px; }
    .events-card .ev-title { font:600 12px 'Hanken Grotesk'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
    .events-card .ev-row { display:grid; grid-template-columns:50px 12px 1fr; gap:11px; align-items:center; padding:7px 0; border-bottom:1px solid var(--divider); }
    .events-card .ev-row:last-child { border-bottom:0; }
    .events-card .ev-time { font:600 13px 'Hanken Grotesk'; color:var(--text-muted); font-variant-numeric:tabular-nums; }
    .events-card .ev-dot { width:11px; height:11px; border-radius:50%; }
    .events-card .ev-text { font:500 14px 'Hanken Grotesk'; color:var(--text-strong); }
    .events-card .ev-empty { font:500 14px 'Hanken Grotesk'; color:var(--text-muted); text-align:center; padding:14px 0; font-style:italic; }
    .tir-hero { text-align:center; margin-bottom:18px; }
    .tir-hero .l { font:600 11px 'Hanken Grotesk'; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
    .tir-hero .v { font:700 52px 'Bricolage Grotesque'; color:var(--clin-green-text); line-height:1; letter-spacing:-0.02em; }
    .tir-hero .u { font:600 18px 'Hanken Grotesk'; color:var(--text-mid); }
    .tir-hero .d { font:500 13px 'Hanken Grotesk'; color:var(--text-muted); margin-top:6px; }
    .dist-bar { display:flex; height:34px; border-radius:10px; overflow:hidden; margin-bottom:15px; }
    .dist-bar span { display:block; height:100%; }
    .dist-legend { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
    .dist-legend .dl { display:flex; align-items:center; gap:10px; }
    .dist-legend .dl i { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
    .dist-legend .dl .n { font:600 13.5px 'Hanken Grotesk'; color:var(--text-strong); }
    .dist-legend .dl .r { flex:1; font:500 12px 'Hanken Grotesk'; color:var(--text-muted); }
    .dist-legend .dl .p { font:700 14px 'Bricolage Grotesque'; color:var(--text-strong); min-width:46px; text-align:right; }
    .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px; padding-top:15px; border-top:1px solid var(--divider); }
    .stat-grid .sb { text-align:center; }
    .stat-grid .sb .v { font:700 19px 'Bricolage Grotesque'; color:var(--text-strong); }
    .stat-grid .sb .l { font:500 10.5px 'Hanken Grotesk'; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
    .chart-meta { font:500 12.5px 'Hanken Grotesk'; color:var(--text-muted); margin-top:12px; text-align:center; }

    /* ---------- bottom nav ---------- */
    .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; height:86px; padding:11px 20px calc(8px + env(safe-area-inset-bottom,0));
        display:flex; justify-content:space-between; align-items:flex-end; max-width:460px; margin:0 auto;
        background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--nav-border); }
    /* fade content out above the nav so it doesn't collide with the bar */
    .bottom-nav::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:40px;
        background:var(--nav-scrim); pointer-events:none; z-index:-1; }
    .bottom-nav a { text-decoration:none; }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; border:0; background:transparent; cursor:pointer; }
    .nav-item svg { width:24px; height:24px; stroke:var(--text-muted); }
    .nav-item span { font:600 11.5px 'Hanken Grotesk'; color:var(--text-muted); }
    .nav-item.active svg { stroke:var(--gold-solid); }
    .nav-item.active span { color:var(--gold-solid); }
    .nav-fab { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; border:0; background:transparent; cursor:pointer; }
    .nav-fab .plus { width:48px; height:44px; margin-top:-6px; border-radius:16px; background:var(--gold-grad);
        display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -6px rgba(243,195,74,0.6); }
    .nav-fab .plus svg { width:23px; height:23px; stroke:var(--on-gold); }
    .nav-fab span { font:600 11.5px 'Hanken Grotesk'; color:var(--text-mid); }
    .nav-fab.active span { color:var(--gold-solid); }

    /* toast */
    .toast { position:fixed; left:50%; bottom:calc(102px + env(safe-area-inset-bottom,0)); transform:translateX(-50%) translateY(20px);
        background:var(--gold-grad); color:var(--on-gold); padding:14px 21px; border-radius:14px; font:700 15px 'Hanken Grotesk';
        box-shadow:0 14px 30px -10px rgba(243,195,74,0.6); opacity:0; transition:opacity .25s,transform .25s; z-index:50; max-width:90%; text-align:center; }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    
    /* Utfallsrevisjon (Mer) */
    .utfall-intro { font:500 12.5px 'Hanken Grotesk'; color:var(--text-muted); margin:0 0 14px; }
    .utfall-note { color:var(--text-muted); text-align:center; padding:20px 0; font:500 13px 'Hanken Grotesk'; }
    .utfall-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:14px 15px; margin-bottom:10px; }
    .utfall-top { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .utfall-title { font:700 14.5px 'Hanken Grotesk'; color:var(--text-strong); }
    .utfall-adh { font:600 12.5px 'Hanken Grotesk'; }
    .utfall-adh.fulgt { color:var(--clin-green-text); }
    .utfall-adh.delvis { color:var(--clin-high-text); }
    .utfall-adh.ikke_fulgt { color:var(--clin-low-text); }
    .utfall-adh.ukjent { color:var(--text-muted); }
    .utfall-curve { font:500 12.5px 'Hanken Grotesk'; color:var(--text-mid); margin-top:6px; }
    .utfall-attr { margin-top:6px; font:500 11.5px 'Hanken Grotesk'; color:var(--text-muted); }
    .utfall-chip { display:inline-block; padding:2px 9px; border-radius:9px; background:var(--seg-bg); font-size:11px; margin:2px 3px 0 0; }
    .utfall-rb { color:var(--gold-solid); text-decoration:none; font-weight:600; }
    .utfall-konf { font-weight:700; }
    .utfall-konf.hoy { color:var(--clin-green-text); }
    .utfall-konf.middels { color:var(--clin-high-text); }
    .utfall-konf.forurenset { color:var(--clin-low-text); }

    /* ---------- desktop frame ----------
       Mobile-first app; on wide screens the 460px column gets full-height
       hairline edges + a soft lift so it reads as a framed panel instead
       of floating loose on the background. */
    @media (min-width: 700px) {
        .app {
            min-height:100vh;
            border-left:1px solid var(--hero-border);
            border-right:1px solid var(--hero-border);
            box-shadow:0 0 70px -18px rgba(0,0,0,0.45);
        }
        html[data-theme="light"] .app {
            box-shadow:0 0 60px -16px rgba(120,90,40,0.28);
        }
        .bottom-nav {
            border-left:1px solid var(--hero-border);
            border-right:1px solid var(--hero-border);
        }
    }

    /* ---------- login + account (/login, /konto) ---------- */
    .auth-page { padding-bottom:calc(40px + env(safe-area-inset-bottom,0)); }
    .auth-card { border-radius:22px; padding:20px 18px; margin-bottom:16px; background:var(--card-bg); border:1px solid var(--card-border);
        display:flex; flex-direction:column; gap:10px; }
    .auth-card .reg-title { margin:0 0 6px; }
    .auth-card .primary { margin-top:8px; }
    .auth-label { font:600 12px 'Hanken Grotesk'; letter-spacing:.07em; color:var(--text-muted); text-transform:uppercase; margin-top:4px; }
    .auth-input { width:100%; border-radius:14px; padding:14px 15px; background:var(--input-bg); border:1px solid var(--card-border);
        color:var(--text-strong); font:500 17px 'Hanken Grotesk'; outline:none; }
    .auth-input:focus { border-color:var(--gold-solid); box-shadow:0 0 0 3px var(--divider-strong); }
    .auth-code { font:700 26px 'Bricolage Grotesque'; letter-spacing:.3em; text-align:center; }
    .auth-check { display:flex; align-items:center; gap:10px; margin-top:6px; font:500 15px 'Hanken Grotesk'; color:var(--text-mid); cursor:pointer; }
    .auth-check input { width:20px; height:20px; accent-color:var(--gold-solid); flex-shrink:0; }
    .auth-hint, .auth-status { font:500 14px 'Hanken Grotesk'; color:var(--text-mid); line-height:1.45; margin:0; }
    .auth-status { color:var(--text-strong); font-size:15px; }
    .auth-msg { font:600 14px 'Hanken Grotesk'; color:var(--clin-low-text); min-height:1.2em; margin:0; }
    .auth-secret { display:block; padding:12px 14px; border-radius:12px; background:var(--seg-bg); color:var(--text-strong);
        font:600 16px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; word-break:break-all; user-select:all; }
    .auth-link { font:700 15px 'Hanken Grotesk'; color:var(--gold-solid); text-decoration:none; }
    .auth-secondary { width:100%; border-radius:14px; padding:14px; border:1px solid var(--card-border); background:var(--seg-bg);
        color:var(--text-strong); font:600 15px 'Hanken Grotesk'; cursor:pointer; text-align:center; }
    .auth-secondary.danger { color:var(--clin-low-text); border-color:var(--clin-low-bd); margin-top:8px; }
    .auth-details summary { font:600 14px 'Hanken Grotesk'; color:var(--text-muted); cursor:pointer; padding:4px 0; }
    .auth-details[open] { display:flex; flex-direction:column; gap:10px; }
    a.back-btn { text-decoration:none; }