/* CSS CUSTOM PROPERTIES */
:root {
    --color-primary: #26a69a;
    --color-primary-light: #4db6ac;
    --color-primary-dark: #004d40;
    --color-primary-bg: #e0f2f1;
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-bg: rgba(16, 185, 129, 0.12);
    --color-success-border: rgba(16, 185, 129, 0.3);
    --color-danger: #ef4444;
    --color-danger-light: #fca5a5;
    --color-danger-bg: rgba(239, 68, 68, 0.08);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-hover: #f8fafb;
    --color-text: #1a2332;
    --color-text-secondary: #5f6d7e;
    --color-text-tertiary: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,30,25,0.05);
    --shadow-md: 0 4px 12px -2px rgba(0,30,25,0.08), 0 2px 4px -2px rgba(0,30,25,0.04);
    --shadow-lg: 0 12px 24px -4px rgba(0,30,25,0.1), 0 4px 8px -4px rgba(0,30,25,0.05);
    --shadow-xl: 0 24px 48px -8px rgba(0,30,25,0.12), 0 8px 16px -6px rgba(0,30,25,0.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 72px;
    --nav-height: 44px;
    /* Høyden på demo-stripen øverst i eksempelkontoen (/demo). 0 i den ekte
       appen; demo-mode.css setter den. Header, nav og scroll-offsets bygger
       på den, så all fast kant øverst regnes ut på ett sted. */
    --demo-bar-h: 0px;
    /* Samlet høyde på det som ligger fast øverst mens man scroller (stripe +
       header + nav på desktop, stripe + nav på mobil). Brukes til
       scroll-padding, sticky innholdsfortegnelse og scroll-offsets i JS. */
    --sticky-top: calc(var(--demo-bar-h) + var(--header-height) + var(--nav-height));
    --max-width: 1400px;
}
/* Registrert som lengde slik at getComputedStyle gir en ferdig utregnet
   px-verdi (app.js leser den for scroll-offsets). Eldre nettlesere ignorerer
   regelen og JS faller tilbake til en fast verdi. */
@property --sticky-top { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* RESET & BASE */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: hidden ligger KUN på html. Ligger den også på body, blir body
   sin egen scroll-container og position: sticky på header, nav og demo-stripe
   slutter å virke (de fester seg til body, som aldri scroller). html alene
   stopper horisontal scrolling i viewporten. scroll-padding-top gjør at
   scrollIntoView, ankere og tastaturfokus lander under den faste kanten. */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: calc(var(--sticky-top) + 12px); }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app > main { flex: 1; }
.hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; font-size: 16px; }
svg { flex-shrink: 0; }

/* AUTH SCREEN */
#auth-screen {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; justify-content: center;
    background:
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(38,166,154,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0,77,64,0.08) 0%, transparent 60%),
        #f5f7fa;
    background-attachment: fixed;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.login-bg-pattern { display: none; }

.auth-container { position: relative; z-index: 1; width: 100%; max-width: 580px; padding: 24px; margin: auto 0; }

.auth-card {
    background: #ffffff; position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 40px 36px; text-align: center;
    box-shadow: 0 4px 24px rgba(0,30,25,0.06), 0 1px 3px rgba(0,30,25,0.04);
    animation: loginSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
/* .auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
} */
@keyframes loginSlideUp { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.login-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.login-logo-img { height: 52px; width: auto; }
.login-title { font-size: 1.4rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; margin-bottom: 4px; }
.login-subtitle { font-size: 0.88rem; color: var(--color-text-secondary); margin-bottom: 24px; font-weight: 400; }

.auth-field { text-align: left; margin-bottom: 16px; }
.auth-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.auth-field input, .auth-field select {
    width: 100%; padding: 12px 14px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    color: var(--color-text); font-size: 0.92rem; outline: none; transition: all var(--transition-base);
}
.auth-field input:focus { border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px rgba(38,166,154,0.12); }
.auth-field input::placeholder { color: var(--color-text-tertiary); }

.auth-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.auth-row > .auth-field { min-width: 0; overflow: hidden; }
.dob-select-row {
    display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px;
}
.dob-select-row select {
    width: 100%; padding: 12px 10px; font-size: 0.9rem; font-family: inherit;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text);
    cursor: pointer; outline: none; transition: border-color var(--transition-fast);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    padding-right: 28px;
}
.dob-select-row select:focus { border-color: var(--color-primary); }
.dob-select-row select option[value=""] { color: var(--color-text-tertiary); }

.input-wrapper { position: relative; display: flex; align-items: center; }
.toggle-pw-btn { position: absolute; right: 8px; background: none; border: none; color: var(--color-text-tertiary); padding: 8px; border-radius: var(--radius-sm); transition: color var(--transition-fast); }
.toggle-pw-btn:hover { color: var(--color-text-secondary); }

.auth-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.auth-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--color-text-secondary); cursor: pointer; }
.auth-checkbox input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; }
.auth-link { color: var(--color-text-tertiary); font-size: 0.82rem; text-decoration: none; transition: color var(--transition-fast); }
.auth-link:hover { color: var(--color-primary); }
.auth-link-strong { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.auth-link-strong:hover { color: var(--color-primary-dark); }

/* GDPR consent block */
.auth-consent {
    display: flex; align-items: flex-start; gap: 12px;
    text-align: left; margin-bottom: 20px;
    padding: 14px 16px; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.auth-consent-toggle {
    flex-shrink: 0; position: relative; cursor: pointer;
    width: 22px; height: 22px; margin-top: 1px;
}
.auth-consent-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-check {
    display: block; width: 22px; height: 22px;
    border: 2px solid var(--color-border); border-radius: 6px;
    background: #fff; transition: all var(--transition-fast);
}
.consent-check::after {
    content: ''; display: block; opacity: 0;
    width: 6px; height: 10px; margin: 3px auto 0;
    border: solid white; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
    transition: opacity var(--transition-fast);
}
.auth-consent-toggle input:checked + .consent-check {
    background: var(--color-primary); border-color: var(--color-primary);
}
.auth-consent-toggle input:checked + .consent-check::after { opacity: 1; }
.auth-consent-toggle input:focus-visible + .consent-check {
    box-shadow: 0 0 0 3px rgba(38,166,154,0.2);
}
.auth-consent-text {
    font-size: 0.82rem; line-height: 1.55; color: var(--color-text-secondary);
}
.auth-consent-error {
    border-color: var(--color-danger) !important;
    background: var(--color-danger-bg);
    animation: consentShake 0.4s ease;
}
.auth-consent-error .consent-check { border-color: var(--color-danger); }
@keyframes consentShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Login type selector — prominent card-style buttons */
.login-type-label {
    font-size: 0.72rem; font-weight: 600; color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.login-type-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 24px;
}
.login-type-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 12px; background: var(--color-bg);
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
    transition: all var(--transition-base); cursor: pointer; white-space: nowrap;
}
.login-type-btn svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-text-tertiary); transition: color var(--transition-base); }
.login-type-btn:hover { border-color: rgba(38,166,154,0.3); background: var(--color-primary-bg); color: var(--color-text); }
.login-type-btn:hover svg { color: var(--color-primary); }
.login-type-btn.active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    color: var(--color-primary-dark); box-shadow: 0 0 0 3px rgba(38,166,154,0.1);
}
.login-type-btn.active svg { color: var(--color-primary); }

.doctor-login-hint { font-size: 0.8rem; color: var(--color-text-secondary); text-align: left; margin-bottom: 16px; line-height: 1.5; background: var(--color-primary-bg); padding: 10px 14px; border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); }

.auth-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border-light); }
.auth-footer p { font-size: 0.85rem; color: var(--color-text-secondary); }

.auth-message { padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.85rem; margin-bottom: 16px; text-align: left; animation: loginSlideUp 0.3s ease; }
.auth-message-error { background: var(--color-danger-bg); border: 1px solid rgba(239,68,68,0.2); color: #b91c1c; }
.auth-message-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: #065f46; }
.auth-resend-link { display: inline-block; margin-top: 6px; font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; transition: opacity 0.15s; }
.auth-resend-link:hover { opacity: 0.75; }

.auth-age-notice { text-align: left; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 22px 22px 18px; margin-bottom: 18px; box-shadow: 0 6px 22px rgba(12,20,33,0.07); animation: loginSlideUp 0.3s ease; }
.auth-age-notice-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-age-notice-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-bg); color: var(--color-primary-dark); }
.auth-age-notice-icon svg { width: 22px; height: 22px; }
.auth-age-notice-title { font-size: 1.02rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.auth-age-notice-fact { font-size: 0.9rem; font-weight: 600; color: #b45309; background: var(--color-warning-bg); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 14px; }
.auth-age-notice p { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 12px; }
.auth-age-notice-foot { font-size: 0.8rem; color: var(--color-text-tertiary); line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.auth-age-notice-foot a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; }
.auth-age-notice-foot a:hover { opacity: 0.8; }

.login-btn {
    width: 100%; padding: 14px; background: linear-gradient(135deg, #26a69a, #004d40);
    color: white; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--transition-base); position: relative; overflow: hidden;
}
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.12)); opacity: 0; transition: opacity var(--transition-base); }
.login-btn:hover:not(:disabled)::before { opacity: 1; }
.login-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(0,77,64,0.3); }

/* SUBSCRIPTION BANNER */
.subscription-banner { background: linear-gradient(135deg, #fef3c7, #fde68a); border-bottom: 1px solid #f59e0b; }
.subscription-banner.trial-banner { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); border-bottom: 1px solid #26a69a; }
.subscription-banner.trial-banner .sub-banner-text { color: #004d40; }
.subscription-banner.trial-banner .sub-banner-text svg { color: #26a69a; }
.subscription-banner.trial-banner .trial-sub-btn { background: #26a69a; }
.subscription-banner.trial-banner .trial-sub-btn:hover { background: #00897b; }
.sub-banner-content { max-width: var(--max-width); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sub-banner-text { display: flex; align-items: flex-start; gap: 12px; color: #92400e; min-width: 0; }
.sub-banner-text svg { flex-shrink: 0; color: #d97706; margin-top: 1px; }
.sub-banner-text > div { min-width: 0; }
.sub-banner-text strong { font-size: 0.9rem; }
.sub-banner-text p { font-size: 0.82rem; margin: 0; overflow-wrap: anywhere; }
.sub-banner-btn { padding: 8px 20px; background: #d97706; color: white; border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem; white-space: nowrap; transition: all var(--transition-base); }
.sub-banner-btn:hover { background: #b45309; }

.sub-price-tag { display: block; margin-top: 3px; font-weight: 600; opacity: 0.85; }
.app-locked #page-dashboard,
.app-locked #page-biomarkorer,
.app-locked #page-admin { pointer-events: none; opacity: 0.35; filter: blur(2px); user-select: none; transition: opacity 0.3s, filter 0.3s; }
.app-locked .nav-tab:not([data-page="mine-sider"]) { opacity: 0.4; pointer-events: none; }

/* HEADER */
#main-header { position: sticky; top: var(--demo-bar-h); z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0,77,64,0.08); height: var(--header-height); padding: env(safe-area-inset-top, 0px) 24px 0; }
.header-content { max-width: var(--max-width); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 16px; }
.header-left { flex-shrink: 0; }
.header-brand { display: flex; align-items: center; }
.header-logo { display: flex; align-items: center; height: 36px; text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.2s; }
.header-logo:hover { opacity: 0.85; }
.header-logo-img { display: block; height: 36px; width: auto; }
.search-container { position: relative; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; z-index: 1; }
.dashboard-search { flex: 1; min-width: 0; max-width: 100%; }
#marker-search { width: 100%; padding: 9px 14px 9px 38px; background: #ffffff; border: 1.5px solid var(--color-border); border-radius: 999px; font-size: 0.85rem; color: var(--color-text); outline: none; transition: all var(--transition-base); }
#marker-search:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.12); }
#marker-search::placeholder { color: var(--color-text-tertiary); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); max-height: 360px; overflow-y: auto; z-index: 200; }
.search-result-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--color-border-light); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--color-primary-bg); }
.search-result-item.on-dashboard { background: var(--color-success-bg); }
.search-result-name { font-weight: 500; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.search-result-meta { font-size: 0.78rem; color: var(--color-text-tertiary); }
.search-alias-hint { font-size: 0.7rem; font-weight: 500; color: var(--color-text-tertiary); background: var(--color-bg); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--color-border-light); white-space: nowrap; }
.search-result-badge { font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; font-weight: 500; background: var(--color-primary-bg); color: var(--color-primary); }
.search-result-badge.added { background: var(--color-success-bg); color: var(--color-success); }
.search-no-results { padding: 20px 16px; text-align: center; color: var(--color-text-tertiary); font-size: 0.9rem; }
.search-no-results svg { display: block; margin: 0 auto 8px; opacity: 0.5; }
.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.search-overlay.active { opacity: 1; pointer-events: auto; }
.search-container { z-index: 200; }
.header-right { flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.role-badge { font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.role-badge.user { background: var(--color-primary-bg); color: var(--color-primary); }
.role-badge.admin { background: var(--color-warning-bg); color: var(--color-warning); }
.admin-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition-base); }
.admin-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
.beta-badge { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-primary); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 4px; line-height: 1; white-space: nowrap; border: 1.5px solid rgba(38,166,154,0.5); margin-right: 4px; }
.logout-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-tertiary); transition: all var(--transition-base); }
.logout-btn:hover { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.info-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-tertiary); transition: all var(--transition-base); }
.info-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }

/* MAIN CONTENT */
/* overflow-x: clip (ikke hidden): klipper brede diagrammer uten å gjøre
   #main-content til en scroll-container, slik at sticky-elementer inni
   (f.eks. innholdsfortegnelsen i AI-analysen) faktisk fester seg. hidden
   står først som reserve for nettlesere uten clip. */
#main-content { width: 100%; padding: 28px 24px 60px; overflow-x: hidden; overflow-x: clip; }
.main-content-inner { max-width: var(--max-width); margin: 0 auto; }

/* PERSONAL INFO */
.personal-info-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 28px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); }
.personal-info-section:hover { box-shadow: var(--shadow-md); }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; user-select: none; transition: background var(--transition-fast); }
.section-header:hover { background: #e2f2f1; }

.section--no-collapse .section-header { cursor: default; }
.section--no-collapse .section-header:hover { background: transparent; }
.section-title-group { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.section-title-group h2 { font-size: 1rem; font-weight: 600; }
.section-title-group svg { color: var(--color-primary); }

/* Personal info completion badge */
.pi-completion-badge { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; position: relative; cursor: default; }
.pi-badge-count { font-size: 0.73rem; font-weight: 600; color: var(--color-text-tertiary); white-space: nowrap; }
.pi-badge-bar { width: 56px; height: 5px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.pi-badge-bar-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.4s ease; }
.pi-badge-tip { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.76rem; font-weight: 400; padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); white-space: nowrap; z-index: 50; pointer-events: none; line-height: 1.4; }
.pi-completion-badge:hover .pi-badge-tip { display: block; }

.collapse-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: all var(--transition-base); }
.collapse-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.collapse-btn svg { transition: transform var(--transition-base); }
.collapse-btn.collapsed svg { transform: rotate(-90deg); }
.section-content { padding: 20px 24px 24px; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow), opacity var(--transition-base); max-height: none; opacity: 1; }
.section-content.collapsed { max-height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.info-card { background: var(--color-bg); border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--color-border-light); }
.info-card-wide { grid-column: 1 / -1; }
.info-card h3 { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-light); }
.info-card h3 svg { color: var(--color-primary); }
.info-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item { display: flex; flex-direction: column; gap: 2px; }
.info-label { font-size: 0.75rem; color: var(--color-text-tertiary); font-weight: 500; }
.info-value { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.info-text { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.65; }
.info-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-light); }
.info-card-header h3 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.info-edit-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-tertiary); transition: all var(--transition-fast); flex-shrink: 0; }
.info-edit-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }


.info-item-interactive { position: relative; transition: background var(--transition-fast); }
.info-item-interactive:hover { background: var(--color-surface-hover); }
.info-item-interactive .info-item-content { display: flex; flex-direction: column; gap: 2px; }
.info-item-interactive.inline-editing { grid-column: 1 / -1; padding: 16px; background: var(--color-surface); border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1), var(--shadow-md); z-index: 2; }
.info-item-interactive .inline-edit-wrap { flex: 1; min-width: 120px; }
.info-item-interactive .inline-edit-value { width: 100%; padding: 8px 10px; font-size: 0.88rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; background: var(--color-surface); }
.info-item-interactive .inline-edit-value:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.15); }
.grunn-inline-edit { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.grunn-inline-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.grunn-inline-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grunn-inline-field select { padding: 8px 10px; font-size: 0.88rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; background: var(--color-surface); appearance: auto; cursor: pointer; }
.grunn-inline-field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.15); }
.grunn-inline-field input { padding: 8px 10px; font-size: 0.88rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; background: var(--color-surface); flex: 1; min-width: 120px; }
.grunn-inline-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.15); }
.grunn-inline-source-row { display: flex; flex-direction: column; gap: 6px; }
.grunn-source-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.source-toggle { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.source-toggle-opt { flex: 1; padding: 8px 14px; font-size: 0.82rem; font-weight: 500; border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; min-height: 40px; white-space: nowrap; }
.source-toggle-opt:not(:last-child) { border-right: 1px solid var(--color-border-light); }
.source-toggle-opt.active { background: var(--color-primary); color: white; font-weight: 600; }
.source-toggle-opt:not(.active):hover { background: var(--color-surface-hover); }
.source-toggle-opt:disabled { opacity: 0.6; cursor: default; }
.source-toggle-opt.loading { opacity: 0.7; }
.gender-toggle { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); flex: 1; min-width: 180px; }
.gender-toggle-opt { flex: 1; padding: 10px 20px; font-size: 0.88rem; font-weight: 500; border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; min-height: 44px; }
.gender-toggle-opt.active { background: var(--color-primary); color: white; font-weight: 600; }
.gender-toggle-opt:not(.active):hover { background: var(--color-surface-hover); }

.item-actions-overlay { position: absolute; top: 13px; right: 105px; display: flex; align-items: center; gap: 2px; z-index: 2; }
.item-actions-overlay .item-action-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
/* Desktop: show only on hover */
@media (hover: hover) {
    .item-actions-overlay { opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
    .info-item-interactive:hover .item-actions-overlay { opacity: 1; pointer-events: auto; }
    .med-item-interactive:hover .item-actions-overlay { opacity: 1; pointer-events: auto; }
}
/* Mobile: tap row to reveal actions */
@media (hover: none) {
    .item-actions-overlay { opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
    .item-actions-overlay .item-action-btn { min-width: 44px; min-height: 44px; }
    .info-item-interactive.actions-visible .item-actions-overlay { opacity: 1; pointer-events: auto; }
    .med-item-interactive.actions-visible .item-actions-overlay { opacity: 1; pointer-events: auto; }
}
.item-action-btn { display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(255,255,255,0.95); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-tertiary); box-shadow: var(--shadow-sm); transition: all var(--transition-fast); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.item-action-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
.item-action-btn.item-delete:hover { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.item-action-btn.item-save-inline:hover { background: var(--color-success-bg); color: var(--color-success); }

.med-item-interactive { position: relative; }
.med-item-interactive.inline-editing { padding: 16px; background: var(--color-surface); border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1), var(--shadow-md); z-index: 2; }
.med-item-inline-edit { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.med-inline-fields { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.med-inline-fields input, .med-inline-fields select { padding: 8px 10px; font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 80px; }
.med-inline-fields input:focus, .med-inline-fields select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px rgba(38, 166, 154, 0.1); }
.med-inline-fields input[data-field="navn"] { min-width: 120px; }
.med-inline-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.med-inline-action-right { display: flex; gap: 10px; flex: 1; justify-content: flex-end; }
.med-inline-delete-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 14px; background: none; color: var(--color-danger); border: 1px solid var(--color-danger-bg); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); min-height: 44px; -webkit-tap-highlight-color: transparent; }
.med-inline-delete-btn:hover { background: var(--color-danger-bg); border-color: var(--color-danger); }
.med-inline-delete-btn:active { transform: scale(0.98); }
.med-inline-save-btn { flex: 1.5; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 20px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); min-height: 44px; -webkit-tap-highlight-color: transparent; }
.med-inline-save-btn:hover { background: var(--color-primary-dark); }
.med-inline-save-btn:active { transform: scale(0.98); }
.med-inline-save-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.med-inline-cancel-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 16px; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); min-height: 44px; -webkit-tap-highlight-color: transparent; }
.med-inline-cancel-btn:hover { background: var(--color-surface-hover); border-color: var(--color-text-tertiary); }
.med-inline-cancel-btn:active { transform: scale(0.98); }
.med-inline-cancel-btn:disabled { opacity: 0.7; cursor: default; transform: none; }


.bio-age-subsection { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border-light); }
.bio-age-subsection-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); cursor: pointer; user-select: none; transition: background var(--transition-fast), border-color var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.bio-age-subsection-header:hover { background: var(--color-surface-hover); border-color: var(--color-border); }
.bio-age-subsection-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bio-age-subsection-title { display: flex; align-items: center; gap: 12px; }
.bio-age-subsection-title svg { color: var(--color-primary); flex-shrink: 0; }
.bio-age-subsection-title h3 { font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin: 0; }
.bio-age-subsection-hint { display: block; font-size: 0.75rem; color: var(--color-text-tertiary); margin-top: 2px; }
.bio-age-collapse-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: all var(--transition-base); flex-shrink: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bio-age-collapse-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.bio-age-collapse-btn svg { transition: transform var(--transition-base); }
.bio-age-collapse-btn.collapsed svg { transform: rotate(-90deg); }
.bio-age-subsection-content { overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow), opacity var(--transition-base); max-height: none; padding-top: 16px; opacity: 1; }
.bio-age-subsection-content.collapsed { max-height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* Biological Age Page */
.bio-age-page-card { animation: cardFadeIn 0.3s ease; }
.bio-age-page-method { text-align: center; font-size: 0.75rem; color: var(--color-text-tertiary); margin-top: 12px; font-style: italic; }

/* BIO AGE - Educational section (bottom of page) */
.bio-edu {
    margin-top: 28px;
    padding: 22px 24px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    position: relative;
}
.bio-edu-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
}
.bio-edu-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(38,166,154,0.28);
    flex-shrink: 0;
}
.bio-edu-title {
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.bio-edu-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.bio-edu-intro {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--color-text);
    position: relative;
}

.bio-edu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.bio-edu-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bio-edu-item[open] {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border-light));
    box-shadow: 0 2px 10px rgba(38,166,154,0.08);
    background: var(--color-surface);
}
.bio-edu-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition-fast);
}
.bio-edu-summary::-webkit-details-marker { display: none; }
.bio-edu-summary::marker { display: none; content: ''; }
.bio-edu-summary:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.bio-edu-summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.bio-edu-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-primary);
    flex-shrink: 0;
}
.bio-edu-summary-text {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.bio-edu-chevron {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bio-edu-item[open] .bio-edu-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.bio-edu-body {
    padding: 4px 16px 18px;
    animation: bioEduFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bio-edu-body p {
    margin: 0 0 10px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}
.bio-edu-body p:last-child { margin-bottom: 0; }
.bio-edu-body strong {
    color: var(--color-text);
    font-weight: 600;
}
.bio-edu-points {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bio-edu-points li {
    position: relative;
    padding-left: 22px;
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.bio-edu-points li::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.55em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}
.bio-edu-tagline {
    margin-top: 12px !important;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-light);
    font-size: 0.87rem;
    font-style: italic;
    color: var(--color-text);
}
.bio-edu-footnote {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    line-height: 1.55;
    text-align: center;
    position: relative;
}

@keyframes bioEduFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .bio-edu { padding: 18px 16px 16px; margin-top: 22px; }
    .bio-edu-header { gap: 11px; }
    .bio-edu-header-icon { width: 36px; height: 36px; border-radius: 10px; }
    .bio-edu-title { font-size: 1rem; }
    .bio-edu-subtitle { font-size: 0.82rem; }
    .bio-edu-intro { font-size: 0.85rem; padding: 12px 14px; }
    .bio-edu-summary { padding: 11px 12px; font-size: 0.87rem; gap: 10px; }
    .bio-edu-summary-icon { width: 28px; height: 28px; }
    .bio-edu-body { padding: 2px 14px 14px; }
    .bio-edu-body p, .bio-edu-points li { font-size: 0.85rem; }
}


.bio-retest {
    margin-top: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    animation: cardFadeIn 0.3s ease;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bio-retest[open] {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border-light));
    box-shadow: 0 2px 10px rgba(38,166,154,0.08);
}
.bio-retest-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--transition-fast);
}
.bio-retest-summary::-webkit-details-marker { display: none; }
.bio-retest-summary::marker { display: none; content: ''; }
.bio-retest-summary:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.bio-retest-summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.bio-retest-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(38,166,154,0.28);
    flex-shrink: 0;
}
.bio-retest-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.bio-retest-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.bio-retest-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.bio-retest-badge svg { flex-shrink: 0; }
.bio-retest-badge-ready {
    background: rgba(38,166,154,0.12);
    color: #00897b;
}
.bio-retest-badge-need {
    background: rgba(217,119,6,0.1);
    color: #d97706;
}
.bio-retest-chevron {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color var(--transition-fast);
}
.bio-retest[open] .bio-retest-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}
.bio-retest-body {
    padding: 4px 22px 20px;
    animation: bioEduFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bio-retest-desc {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text);
}
.bio-retest-checklist-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 10px;
}
.bio-retest-checklist-label svg {
    color: var(--color-primary);
    flex-shrink: 0;
}
.bio-retest-checklist {
    margin-bottom: 16px;
}
.bio-retest-body .bio-action-btn { margin-top: 4px; margin-bottom: 4px; }
.bio-retest-tip { margin-top: 16px; }

@media (max-width: 640px) {
    .bio-retest { margin-top: 16px; border-radius: var(--radius-md); }
    .bio-retest-summary { padding: 14px 16px; gap: 11px; }
    .bio-retest-body { padding: 2px 16px 16px; }
    .bio-retest-header-icon { width: 36px; height: 36px; border-radius: 10px; }
    .bio-retest-title { font-size: 1rem; }
    .bio-retest-desc { font-size: 0.85rem; padding: 12px 14px; line-height: 1.55; }
    .bio-retest-badge { font-size: 0.7rem; padding: 3px 8px; }
    .bio-retest-checklist-label { font-size: 0.78rem; }
    .bio-retest-body .bio-action-btn { padding: 13px 18px; min-height: 46px; font-size: 0.9rem; }
}

/* Biological Age Card */
.bio-age-card { padding: 4px 0; margin-bottom: 8px; }
.bio-age-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary); flex-shrink: 0; }
.bio-age-icon.bio-icon-muted { background: var(--color-bg); color: var(--color-text-tertiary); }
.bio-age-header h3 { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin: 0; border: none; padding: 0; text-transform: none; letter-spacing: 0; }
.bio-age-method { font-size: 0.76rem; color: var(--color-text-tertiary); }
.bio-ready-badge { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(38,166,154,0.12); color: var(--color-primary); }
.bio-age-display { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px 0; flex-wrap: wrap; }
.bio-age-main { text-align: center; }
.bio-age-number { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.bio-older .bio-age-number { color: #e57373; }
.bio-age-unit { font-size: 1rem; font-weight: 600; margin-left: 2px; opacity: 0.7; }
.bio-age-label { font-size: 0.78rem; color: var(--color-text-tertiary); margin-top: 4px; font-weight: 500; }
.bio-age-vs { font-size: 0.85rem; color: var(--color-text-tertiary); font-weight: 600; }
.bio-age-chrono { text-align: center; }
.bio-age-chrono-number { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-text-secondary); }
.bio-age-diff { display: flex; align-items: center; gap: 4px; padding: 6px 16px; border-radius: 999px; font-size: 0.95rem; font-weight: 700; }
.bio-age-diff.bio-younger { background: rgba(38,166,154,0.12); color: #26a69a; }
.bio-age-diff.bio-older { background: rgba(229,115,115,0.12); color: #e57373; }
.bio-diff-icon { font-size: 1.1rem; }
.bio-age-motiv { padding: 16px; border-radius: var(--radius-md); margin: 12px 0; font-size: 0.86rem; line-height: 1.55; }
.bio-age-motiv.bio-younger { background: rgba(38,166,154,0.06); color: var(--color-text-secondary); border-left: 3px solid #26a69a; }
.bio-age-motiv.bio-older { background: rgba(229,115,115,0.06); color: var(--color-text-secondary); border-left: 3px solid #e57373; }
.bio-age-date { text-align: center; font-size: 0.78rem; color: var(--color-text-tertiary); margin: 12px 0; }
.bio-chart-section {
    margin: 20px 0 8px;
    background: linear-gradient(135deg, rgba(38,166,154,0.03), rgba(38,166,154,0.01));
    border: 1px solid rgba(38,166,154,0.1);
    border-radius: 12px;
    padding: 18px 16px 14px;
}
.bio-chart-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.bio-chart-section h4 {
    font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
    margin: 0; letter-spacing: 0.01em;
}
.bio-trend {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 600; padding: 3px 10px;
    border-radius: 20px; white-space: nowrap;
}
.bio-trend svg { flex-shrink: 0; }
.bio-trend-good { background: rgba(38,166,154,0.1); color: #26a69a; }
.bio-trend-warn { background: rgba(239,68,68,0.08); color: #ef4444; }
.bio-chart-wrapper {
    position: relative; width: 100%; height: 220px;
}
.bio-chart-wrapper canvas { width: 100% !important; height: 100% !important; }

/* Bio Age Trend AI Insight */
.bio-trend-insight { margin: 16px 0 4px; }
.bio-trend-loading { display: flex; align-items: center; gap: 8px; color: var(--color-text-tertiary); font-size: 0.84rem; padding: 12px 0; }
.bio-trend-insight-card { background: linear-gradient(135deg, #f0faf9, #e8f5f3); border: 1px solid rgba(38,166,154,0.18); border-radius: var(--radius-md); padding: 18px 20px; animation: cardFadeIn 0.4s ease; }
.bio-trend-insight-header { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.bio-trend-insight-header svg { color: var(--color-primary); flex-shrink: 0; }
.bio-trend-insight-text { font-size: 0.88rem; line-height: 1.7; color: var(--color-text); margin: 0; }

/* Bio Age Share */
.bio-share-trigger { text-align: center; margin-top: 20px; }
.bio-share-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(135deg, #26a69a, #1a8a7f); border: none; border-radius: 12px;
    padding: 13px 28px; font-size: 0.88rem; font-weight: 600; color: #fff;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(38,166,154,0.3);
}
.bio-share-btn:hover { background: linear-gradient(135deg, #1a8a7f, #157a70); box-shadow: 0 5px 18px rgba(38,166,154,0.4); transform: translateY(-1px); }
.bio-share-btn:active { transform: translateY(0); }
.bio-share-btn svg { flex-shrink: 0; }

.bio-share-modal.modal {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeIn 0.25s ease;
}
.bio-share-modal-content {
    max-width: 540px; width: 100%; max-height: 92vh; overflow-y: auto;
    background: #ffffff; border-radius: 20px; padding: 28px 24px;
    position: relative; animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.bio-share-close {
    position: absolute; top: 14px; right: 16px; background: none; border: none;
    font-size: 1.6rem; color: #9ca3af; cursor: pointer; line-height: 1;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.15s;
}
.bio-share-close:hover { background: #f3f4f6; color: #374151; }
.bio-share-title {
    font-size: 1.1rem; font-weight: 700; color: #111827; margin-bottom: 18px;
}

.bio-share-tabs {
    display: flex; gap: 6px; margin-bottom: 18px;
    background: #f3f4f6; border-radius: 10px; padding: 4px;
}
.bio-share-tab {
    flex: 1; padding: 8px 12px; border: none; background: none;
    border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    color: #9ca3af; cursor: pointer; transition: all 0.2s;
}
.bio-share-tab.active {
    background: #ffffff; color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.bio-share-preview-wrap {
    background: #0f172a; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.bio-share-preview-wrap canvas {
    width: 100%; height: auto; display: block;
    max-height: 420px; object-fit: contain;
}

.bio-share-actions {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.bio-share-dl {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 10px; border: none;
    background: #26a69a; color: #fff;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.bio-share-dl:hover { background: #1a8a7f; }
.bio-share-dl svg { flex-shrink: 0; }
.bio-share-socials { display: flex; gap: 8px; margin-left: auto; }
.bio-social-btn {
    width: 42px; height: 42px; border-radius: 10px; border: 1px solid #e5e7eb;
    background: #f9fafb; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.bio-social-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.bio-social-x:hover { background: #000; color: #fff; border-color: #000; }
.bio-social-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; border-color: transparent; }

.bio-share-ig-tip {
    width: 100%; margin-top: 8px; padding: 8px 14px;
    background: #ecfdf5; color: #26a69a;
    font-size: 0.78rem; font-weight: 500; border-radius: 8px; text-align: center;
    animation: fadeIn 0.3s ease;
}

.bio-share-caption-wrap { margin-top: 4px; }
.bio-share-caption-label {
    display: block; font-size: 0.78rem; font-weight: 600; color: #6b7280; margin-bottom: 6px;
}
.bio-share-caption {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #f9fafb; color: #111827;
    font-size: 0.82rem; line-height: 1.5; padding: 12px 14px; resize: none;
    font-family: Inter, system-ui, sans-serif;
}
.bio-share-caption:focus { outline: none; border-color: #26a69a; box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.bio-share-copy-btn {
    display: inline-flex; align-items: center; margin-top: 8px;
    padding: 7px 16px; border-radius: 8px; border: 1px solid #e5e7eb;
    background: #ffffff; color: #6b7280;
    font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.bio-share-copy-btn:hover { border-color: #26a69a; color: #26a69a; }

.bio-share-modal.closing { animation: fadeOut 0.2s ease forwards; }
.bio-share-modal.closing .bio-share-modal-content { animation: modalSlideOut 0.2s ease forwards; }
@keyframes modalSlideOut { to { opacity: 0; transform: translateY(20px); } }

/* AI Analyse Share */
.ai-share-trigger {
    text-align: center; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}
.ai-share-open-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--color-border-light); border-radius: 10px;
    padding: 10px 22px; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; transition: all 0.2s;
}
.ai-share-open-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.ai-share-open-btn svg { flex-shrink: 0; }
.ai-share-privacy-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 0; padding: 10px 24px 14px; font-size: 0.72rem; color: #9ca3af;
    line-height: 1.45; max-width: 100%;
}
.ai-share-privacy-note svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }

/* AI Share Top Bar */
.ai-share-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ai-share-bar-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 10px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: none;
    background: linear-gradient(135deg, #26a69a, #1a8a7f); color: #fff;
    box-shadow: 0 2px 8px rgba(38,166,154,0.25);
}
.ai-share-bar-btn:hover { background: linear-gradient(135deg, #1a8a7f, #157a70); box-shadow: 0 4px 14px rgba(38,166,154,0.35); transform: translateY(-1px); }
.ai-share-bar-btn-alt {
    background: #f3f4f6; color: #374151; box-shadow: none;
    border: 1px solid #e5e7eb;
}
.ai-share-bar-btn-alt:hover { background: #e5e7eb; color: #111827; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.ai-share-bar-btn svg { flex-shrink: 0; }

/* AI Share Bottom CTA */
.ai-share-cta {
    margin-top: 28px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 50%, #f0f9ff 100%);
    border: 1px solid #ccfbf1;
}
.ai-share-cta-inner {
    padding: 22px 24px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ai-share-cta-text { flex: 1; min-width: 180px; }
.ai-share-cta-text strong { display: block; font-size: 0.92rem; color: #111827; margin-bottom: 3px; }
.ai-share-cta-text span { font-size: 0.78rem; color: #6b7280; line-height: 1.4; }
.ai-share-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-share-cta-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 10px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: none;
}
.ai-share-cta-primary {
    background: linear-gradient(135deg, #26a69a, #1a8a7f); color: #fff;
    box-shadow: 0 2px 10px rgba(38,166,154,0.3);
}
.ai-share-cta-primary:hover { background: linear-gradient(135deg, #1a8a7f, #157a70); box-shadow: 0 4px 16px rgba(38,166,154,0.4); transform: translateY(-1px); }
.ai-share-cta-secondary {
    background: #fff; color: #374151; border: 1px solid #e5e7eb;
}
.ai-share-cta-secondary:hover { background: #f9fafb; border-color: #d1d5db; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.ai-share-cta-btn svg { flex-shrink: 0; }

.ai-share-privacy-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 18px;
    font-size: 0.78rem; color: #166534; line-height: 1.45;
}
.ai-share-privacy-banner svg { flex-shrink: 0; margin-top: 1px; color: #16a34a; }
.ai-share-privacy-banner strong { font-weight: 700; }

.ai-share-modal-content { max-width: 580px; }

.ai-share-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: #f3f4f6; border-radius: 10px; padding: 4px;
}
.ai-share-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px; border: none; background: none; border-radius: 8px;
    font-size: 0.78rem; font-weight: 600; color: #9ca3af; cursor: pointer; transition: all 0.2s;
}
.ai-share-tab.active { background: #ffffff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ai-share-tab svg { flex-shrink: 0; }

.ai-share-panel.hidden { display: none; }
.ai-share-panel-desc { font-size: 0.82rem; color: #6b7280; margin-bottom: 16px; line-height: 1.5; }
.ai-share-field { margin-bottom: 14px; }
.ai-share-field label { display: block; font-size: 0.78rem; font-weight: 600; color: #6b7280; margin-bottom: 5px; }
.ai-share-input {
    width: 100%; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #f9fafb; color: #111827; font-size: 0.85rem; font-family: Inter, system-ui, sans-serif;
    transition: border-color 0.15s;
}
.ai-share-input:focus { outline: none; border-color: #26a69a; box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.ai-share-email-btn { width: 100%; justify-content: center; margin-top: 4px; }
.ai-share-email-error { display: block; margin-top: 10px; font-size: 0.78rem; color: #ef4444; }
.ai-share-email-ok { display: block; margin-top: 10px; font-size: 0.78rem; color: #26a69a; font-weight: 600; }

.ai-share-pdf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ai-share-pdf-actions .bio-share-dl { flex: 1; justify-content: center; min-width: 160px; }
.ai-share-print-btn { background: #f3f4f6 !important; color: #374151 !important; }
.ai-share-print-btn:hover { background: #e5e7eb !important; }

.bio-desc { font-size: 0.88rem; line-height: 1.55; color: var(--color-text-secondary); margin-bottom: 8px; }
.bio-desc-sub { font-size: 0.82rem; color: var(--color-text-tertiary); margin-bottom: 12px; }
.bio-marker-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-bottom: 16px; }
.bio-marker-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; padding: 6px 0; }
.bio-marker-item.bio-found svg { color: #26a69a; }
.bio-marker-item.bio-missing svg { color: #bdbdbd; }
.bio-marker-item.bio-missing span { color: var(--color-text-tertiary); }
.bio-marker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 16px; padding: 12px; background: var(--color-surface); border-radius: var(--radius-md); }
.bio-marker-list .bio-marker-item { font-size: 0.8rem; }

.bio-marker-item-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bio-marker-date { font-size: 0.72rem; color: var(--color-text-tertiary); }
.bio-marker-date.bio-stale { color: #d97706; }

.bio-marker-item.bio-stale svg { color: #d97706; }
.bio-marker-item.bio-stale span { color: var(--color-text-secondary); }

.bio-stale-section { grid-column: 1 / -1; padding: 10px 12px; margin: 4px 0; background: rgba(217,119,6,0.06); border: 1px solid rgba(217,119,6,0.18); border-radius: var(--radius-md); }
.bio-stale-header { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: #d97706; margin-bottom: 8px; }
.bio-stale-header svg { flex-shrink: 0; }
.bio-stale-section .bio-marker-item { padding: 3px 0; }

.bio-age-stale-note { color: #d97706; font-weight: 500; }
.bio-tip { font-size: 0.82rem; color: var(--color-text-tertiary); font-style: italic; margin-top: 8px; }
.bio-tip-details { margin-top: 16px; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.bio-tip-summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--color-primary-dark); background: var(--color-primary-bg); list-style: none; user-select: none; }
.bio-tip-summary::-webkit-details-marker { display: none; }
.bio-tip-summary svg:first-child { color: var(--color-primary); flex-shrink: 0; width: 16px; height: 16px; min-width: 16px; }
.bio-tip-chevron { margin-left: auto; transition: transform var(--transition-base); flex-shrink: 0; color: var(--color-primary); }
.bio-tip-details[open] .bio-tip-chevron { transform: rotate(180deg); }
.bio-tip-body { padding: 14px 16px; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.65; }
.bio-tip-body p { margin: 0 0 10px; }
.bio-tip-body p:last-child { margin-bottom: 0; }
.bio-dob-note { font-size: 0.82rem; color: #e57373; margin: 8px 0; font-weight: 500; }
.bio-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); border: none; margin-top: 8px; }
.bio-buy-btn { background: linear-gradient(135deg, #26a69a, #00897b); color: white; }
.bio-buy-btn:hover { background: linear-gradient(135deg, #00897b, #00695c); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(38,166,154,0.3); }
.bio-calc-btn { background: var(--color-primary); color: white; }
.bio-calc-btn:hover { background: var(--color-primary-dark); }
.bio-coming-soon { text-align: center; font-size: 0.85rem; color: var(--color-text-tertiary); font-style: italic; }
.bio-new-available { display: flex; align-items: flex-start; gap: 8px; padding: 12px; background: rgba(38,166,154,0.06); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--color-primary); margin-bottom: 8px; }
.bio-new-available svg { flex-shrink: 0; margin-top: 1px; }
.bio-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Medication/Supplement lists */
.med-list { display: flex; flex-direction: column; }
.med-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--color-border-light); gap: 8px; }
.med-item:last-child { border-bottom: none; }
.med-item-left { flex: 1; min-width: 0; }
.med-name { font-size: 0.85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-details { font-size: 0.73rem; color: var(--color-text-tertiary); margin-top: 1px; }
.med-freq { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.med-freq.daglig { background: rgba(38,166,154,0.1); color: var(--color-primary); }
.med-freq.ukentlig { background: rgba(245,158,11,0.1); color: #d97706; }
.med-freq.månedlig { background: rgba(139,92,246,0.1); color: #7c3aed; }
.med-freq.ved-behov { background: rgba(107,114,128,0.1); color: #6b7280; }
.med-freq.av-og-til { background: rgba(107,114,128,0.1); color: #6b7280; }
.med-expand-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 8px; padding: 8px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.25); border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all var(--transition-fast); }
.med-expand-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.med-expand-btn svg { transition: transform var(--transition-base); }
.med-expand-btn.expanded svg { transform: rotate(180deg); }
.med-hidden { display: none; }
.med-hidden.med-visible { display: flex; }

/* DASHBOARD EMPTY STATE */
.dashboard-empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 24px; background: linear-gradient(135deg, var(--color-surface), var(--color-primary-bg)); border: 2px dashed rgba(38,166,154,0.25); border-radius: var(--radius-xl); }

.dashboard-empty-state h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; margin-top: 20px; color: var(--color-text); }
.dashboard-empty-state p { font-size: 0.9rem; color: var(--color-text-secondary); max-width: 440px; margin: 0 auto 24px; line-height: 1.6; }
.add-data-btn-large { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: all var(--transition-base); }
.add-data-btn-large:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,166,154,0.3); }


.ds-subtabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 5px;
    margin: 0 0 32px 0;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 12px;
    z-index: 80;
    
    background: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.ds-subtabs::-webkit-scrollbar { display: none; }
.ds-subtab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                background 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 120ms ease;
    white-space: nowrap;
    position: relative;
}
.ds-subtab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.ds-subtab:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.ds-subtab:hover .ds-subtab__icon { color: var(--color-primary); }
.ds-subtab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ds-subtab[aria-selected="true"] {
    color: var(--color-primary-dark);
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.04),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.ds-subtab[aria-selected="true"] .ds-subtab__icon {
    color: var(--color-primary);
    transform: scale(1.05);
}
.ds-subtab[aria-selected="true"] .ds-subtab__label {
    color: var(--color-primary-dark);
}
.ds-subtab:active { transform: scale(0.985); }
.ds-subtab[hidden] { display: none !important; }


@media (max-width: 640px) {
    .ds-subtabs {
        padding: 4px;
        margin: 0 0 22px 0;
        border-radius: 14px;
        top: 8px;
        gap: 3px;
    }
    .ds-subtab {
        padding: 8px 10px;
        font-size: 0.86rem;
        gap: 6px;
        min-width: 0;
        min-height: 44px;
        border-radius: 10px;
        
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ds-subtab__icon svg { width: 16px; height: 16px; }
}


.ds-subtab__label-short { display: none; }
@media (max-width: 540px) {
    .ds-subtab__label-full { display: none; }
    .ds-subtab__label-short { display: inline; }
}


@media (max-width: 380px) {
    .ds-subtabs {
        padding: 3px;
        gap: 2px;
        border-radius: 12px;
    }
    .ds-subtab {
        padding: 7px 6px;
        font-size: 0.78rem;
        gap: 5px;
        letter-spacing: -0.01em;
    }
    .ds-subtab__icon svg { width: 15px; height: 15px; }
}


@media (max-width: 320px) {
    .ds-subtab__icon { display: none; }
    .ds-subtab { padding: 8px 8px; gap: 0; }
}


.ds-panel[hidden] { display: none !important; }
.ds-panel {
    animation: dsPanelFadeIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dsPanelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


.ds-welcome {
    margin: 0 0 24px 0;
}
.ds-welcome[hidden] { display: none !important; }
.ds-welcome__inner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) 0%, var(--color-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border-light));
    border-radius: 18px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(38, 166, 154, 0.06);
}
.ds-welcome__icon {
    /* display: inline-flex; */
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.ds-welcome__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px 0;
}
.ds-welcome__lead {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0 auto 24px auto;
    max-width: 560px;
    line-height: 1.55;
}
.ds-welcome__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 580px;
    margin: 0 auto;
    text-align: left;
}
.ds-welcome__step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    cursor: pointer;
    transition: all 180ms ease;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.ds-welcome__step:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-light));
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.08);
}
.ds-welcome__step:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.ds-welcome__step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}
.ds-welcome__step-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ds-welcome__step-body strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.ds-welcome__step-body span {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.ds-welcome__step-arrow {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    transition: transform 180ms ease, color 180ms ease;
}
.ds-welcome__step:hover .ds-welcome__step-arrow {
    color: var(--color-primary);
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .ds-welcome__inner {
        padding: 22px 16px;
        border-radius: 16px;
    }
    .ds-welcome__title { font-size: 1.2rem; }
    .ds-welcome__lead { font-size: 0.9rem; margin-bottom: 18px; }
    .ds-welcome__step { padding: 12px 14px; gap: 12px; }
    .ds-welcome__step-num { width: 28px; height: 28px; font-size: 0.88rem; }
    .ds-welcome__step-body strong { font-size: 0.9rem; }
    .ds-welcome__step-body span { font-size: 0.78rem; }
}

/* DASHBOARD TABS BAR */


.dash-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    flex-wrap: wrap;
}

.dash-selector__label {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 4px 0 0;
    margin-right: 2px;
}
.dash-selector__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    border-radius: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 40px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 320px;
}
.dash-selector__trigger:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.dash-selector__trigger[aria-expanded="true"] {
    border-color: var(--color-border-light, var(--color-border));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--color-surface);
    background-clip: padding-box;
    box-shadow:
        0 -4px 12px rgba(15, 23, 42, 0.04),
        -4px 0 12px rgba(15, 23, 42, 0.03),
        4px 0 12px rgba(15, 23, 42, 0.03);
    position: relative;
    z-index: 10002;
}

@media (max-width: 640px) {
    .dash-selector__trigger[aria-expanded="true"] {
        z-index: auto;
        
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-color: var(--color-border-light, var(--color-border));
        box-shadow: none;
    }
}
.dash-selector__trigger[aria-expanded="true"] .dash-selector__name {
    color: var(--color-primary);
    font-weight: 600;
}
.dash-selector__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.dash-selector__trigger.is-passive {
    cursor: default;
}
.dash-selector__trigger.is-passive:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}
.dash-selector__name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.dash-selector__star {
    flex-shrink: 0;
    color: var(--color-primary);
}
.dash-selector__chev {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    transition: transform var(--transition-fast);
}
.dash-selector__trigger[aria-expanded="true"] .dash-selector__chev {
    transform: rotate(180deg);
    color: var(--color-primary);
}


.dash-selector__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.dash-selector__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
}
.dash-selector__action svg { flex-shrink: 0; }
.dash-selector__action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.dash-selector__action--save {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.dash-selector__action--save:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.dash-selector__action--new {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(38, 166, 154, 0.22);
}
.dash-selector__action--new:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(38, 166, 154, 0.32);
}
.dash-selector__action--new:active { transform: translateY(0); }

/* Dropdown / bottom-sheet panel */
.dash-panel {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
}
.dash-panel.is-open { pointer-events: auto; }
.dash-panel__inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.14),
        0 4px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.dash-panel.is-open .dash-panel__inner {
    opacity: 1;
    transform: translateY(0);
}

.dash-panel__inner[data-anchored="exact"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
    
    margin-top: -1px;
    
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.14),
        4px 0 12px rgba(15, 23, 42, 0.03),
        -4px 0 12px rgba(15, 23, 42, 0.03);
}
.dash-panel__inner[data-anchored="left"] {
    border-top-left-radius: 0;
}
.dash-panel__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--color-border-light);
}
.dash-panel__search-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.dash-panel__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
    padding: 4px 0;
}
.dash-panel__search input::placeholder { color: var(--color-text-tertiary); }
.dash-panel__list {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
    min-height: 0;
    /* Smooth-scroll for tastatur-navigasjon */
    scroll-behavior: smooth;
}
.dash-panel__empty {
    padding: 30px 14px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
}
.dash-panel__footer {
    border-top: 1px solid var(--color-border-light);
    padding: 8px;
    background: color-mix(in srgb, var(--color-primary) 2%, var(--color-surface));
}
.dash-panel__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dash-panel__new-btn:hover { background: var(--color-primary-dark); }
.dash-panel__new-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Rad i dashboard-listen */
.dash-row {
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition: background var(--transition-fast);
    margin-bottom: 2px;
}
.dash-row:last-child { margin-bottom: 0; }
.dash-row:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.dash-row.is-active {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.dash-row__main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 10px 8px 10px 12px;
    min-width: 0;
    cursor: pointer;
}
.dash-row__star {
    color: var(--color-primary);
    flex-shrink: 0;
}
.dash-row__star-placeholder {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: inline-block;
}
.dash-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-row__name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-row.is-active .dash-row__name {
    font-weight: 700;
    color: var(--color-primary-dark);
}
.dash-row__meta {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-row__count { font-variant-numeric: tabular-nums; }
.dash-row__pinned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.dash-row__pinned svg { opacity: 0.8; }
.dash-row__check {
    color: var(--color-primary);
    flex-shrink: 0;
}
.dash-row__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.dash-row__menu:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}
.dash-row__menu:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


.dash-action-menu {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 4px;
    z-index: 10002;
    animation: dashMenuFadeIn 0.15s ease;
}
@keyframes dashMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.dash-action-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}
.dash-action-menu__item:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.dash-action-menu__item svg {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}
.dash-action-menu__item--danger { color: var(--color-danger); }
.dash-action-menu__item--danger svg { color: var(--color-danger); }
.dash-action-menu__item--danger:hover {
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}
.dash-action-menu__divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 4px 6px;
}


.dash-panel--sheet {
    background: transparent;
}
.dash-panel--sheet .dash-panel__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 0;
}
.dash-panel--sheet.is-open .dash-panel__backdrop {
    opacity: 1;
}
.dash-panel--sheet .dash-panel__inner {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateY(8%);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 1;
    box-shadow: none;
    border: none;
}
.dash-panel--sheet.is-open .dash-panel__inner {
    transform: translateY(0);
    opacity: 1;
}

.dash-panel__handle {
    display: none;
}
.dash-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 8px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.dash-panel--sheet .dash-panel__list {
    max-height: none;
    flex: 1;
}
.dash-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}
.dash-panel__close {
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.dash-panel__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}

/* Mobil-justering av action-knapper og trigger i header */
@media (max-width: 540px) {
    .dash-selector {
        gap: 8px;
        align-items: stretch;
    }
    .dash-selector__label {
        flex: 1 1 100%;
        order: 0;
        margin: 10px 0 4px;
        padding: 0;
        font-size: 0.76rem;
    }
    .dash-selector__trigger {
        order: 1;
        font-size: 0.875rem;
        padding: 10px 12px;
        flex: 1 1 100%;
        max-width: none;
    }
    .dash-selector__actions {
        order: 2;
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        margin-top: 2px;
    }
    .dash-selector__action {
        height: 40px;
        padding: 0 12px;
    }
    
    .dash-row__main { padding: 12px 8px 12px 14px; }
    .dash-row__name { font-size: 0.9375rem; }
    .dash-row__menu { width: 44px; height: 44px; }
}


.dashboard-tabs-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    position: relative;
}
.dtabs-scroll {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dtabs-scroll::-webkit-scrollbar { display: none; }
.dtabs-list {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: min-content;
    flex-wrap: wrap;
}
.dtab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    position: relative;
}
.dtab:hover {
    background: rgba(38,166,154,0.04);
    border-color: var(--color-primary-dark);
    color: var(--color-text);
}
.dtab-active {
    background: rgba(38,166,154,0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(38,166,154,0.15);
}
.dtab-name { pointer-events: none; }
.dtab-star-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    pointer-events: none;
}
.dtab-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}
.dtab:hover .dtab-menu-btn { opacity: 1; }
.dtab-menu-btn:hover { background: rgba(0,0,0,0.06); color: var(--color-text); }

.dtab-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-start;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid var(--color-border-light);
}
.dtab-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    background: transparent;
}
.dtab-action svg { flex-shrink: 0; }
.dtab-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Primary "Nytt dashboard" button - solid primary color */
.dtab-action-new {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(38,166,154,0.25);
}
.dtab-action-new:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(38,166,154,0.28);
}
.dtab-action-new:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(38,166,154,0.2); }

/* Secondary "Lagre" button - ghost style */
.dtab-action-save {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border-light);
}
.dtab-action-save:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.dtab-action-save:active { transform: translateY(0); }


.dtab-action-save.has-changes {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}

/* Tab context menu */
.dtab-context-menu {
    position: fixed;
    z-index: 10001;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 180px;
    animation: menuFadeIn 0.15s ease;
}
@keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dtab-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}
.dtab-ctx-item:hover { background: var(--color-bg); color: var(--color-text); }
.dtab-ctx-danger { color: var(--color-danger); }
.dtab-ctx-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.dtab-ctx-divider { height: 1px; background: var(--color-border-light); margin: 4px 0; }

/* Dashboard create/edit dialog */
.dtab-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: overlayFadeIn 0.2s ease;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dtab-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    animation: dialogSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dialogSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dtab-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.dtab-dialog-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.dtab-dialog-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dtab-dialog-close:hover { background: var(--color-bg); color: var(--color-text); }
.dtab-dialog-body {
    padding: 16px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.dtab-dialog-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}
.dtab-dialog-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}
.dtab-dialog-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.10); }
.dtab-dialog-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.dtab-dialog-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
}
.dtab-dialog-search {
    width: 100%;
    padding: 9px 14px 9px 34px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--color-text);
    background: var(--color-bg);
    box-sizing: border-box;
}
.dtab-dialog-search:focus { outline: none; border-color: var(--color-primary); }
.dtab-marker-list {
    height: 280px;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 4px;
    background: var(--color-bg);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dtab-field { display: flex; flex-direction: column; }
.dtab-field + .dtab-field,
.dtab-field + .dtab-collapsible,
.dtab-collapsible + .dtab-field { margin-top: 16px; }

.dtab-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.dtab-section-head .dtab-dialog-label { margin-bottom: 0; }

/* Collapsible panel (2026-style disclosure) */
.dtab-collapsible {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dtab-collapsible[open] {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border-light));
    background: var(--color-surface);
}
.dtab-collapsible-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition-fast);
}
.dtab-collapsible-summary::-webkit-details-marker { display: none; }
.dtab-collapsible-summary::marker { display: none; content: ''; }
.dtab-collapsible-summary:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.dtab-collapsible-summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.dtab-collapsible-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dtab-collapsible-icon { color: var(--color-primary); flex-shrink: 0; }
.dtab-collapsible-chevron {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dtab-collapsible[open] .dtab-collapsible-chevron { transform: rotate(180deg); }
.dtab-collapsible-content {
    padding: 4px 14px 14px;
    animation: dtabCollapsibleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dtabCollapsibleIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.dtab-marker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 0.82rem;
    color: var(--color-text);
}
.dtab-marker-item:hover { background: var(--color-bg); }
.dtab-marker-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.dtab-marker-name { flex: 1; min-width: 0; }
.dtab-marker-tag {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 999px;
    flex-shrink: 0;
}
.dtab-marker-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-weight: 400;
}
.dtab-marker-selected {
    background: rgba(38,166,154,0.06);
}
.dtab-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    margin-top: 10px;
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
    max-height: 90px;
    overflow-y: auto;
    min-height: 36px;
    align-items: flex-start;
    align-content: flex-start;
}
.dtab-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px 3px 8px;
    background: rgba(38,166,154,0.10);
    border: 1px solid rgba(38,166,154,0.20);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
}
.dtab-chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dtab-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all var(--transition-fast);
}
.dtab-chip-remove:hover {
    background: rgba(0,0,0,0.08);
    color: var(--color-danger);
}
.dtab-chips-empty {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-style: italic;
    padding: 2px 4px;
}
.dtab-dialog-wide {
    max-width: 560px;
}
.sharing-excluded-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sharing-excluded-chip {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-danger-bg);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--color-danger);
    font-weight: 500;
}
/* Personal info section sharing toggles */
.sharing-pi-toggles { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
@media (min-width: 1024px) { .sharing-pi-toggles { grid-template-columns: repeat(2, 1fr); } }
.sharing-pi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); transition: all var(--transition-base); }
.sharing-pi-row:hover { border-color: var(--color-border); }
.sharing-pi-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sharing-pi-info strong { font-size: 0.85rem; color: var(--color-text); }
.sharing-pi-info span { font-size: 0.72rem; color: var(--color-text-tertiary); }

.sharing-access-log .sharing-label {
    display: flex; align-items: center; gap: 6px;
}
.sharing-access-empty {
    display: flex; align-items: center; gap: 6px; font-style: italic;
}
.access-log-list {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 10px; max-height: 280px; overflow-y: auto;
    border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
}
.access-log-entry {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}
.access-log-entry:last-child { border-bottom: none; }
.access-log-entry:hover { background: var(--color-bg); }
.access-log-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(38,166,154,0.1); border-radius: 50%;
    color: var(--color-primary);
}
.access-log-details {
    display: flex; flex-direction: column;
    flex: 1; min-width: 0; gap: 2px;
}
.access-log-name {
    font-size: 0.88rem; font-weight: 600; color: var(--color-text);
}
.access-log-role {
    font-size: 0.78rem; color: var(--color-text-secondary);
}
.access-log-date {
    font-size: 0.82rem; color: var(--color-text-tertiary);
}
.access-log-ago {
    font-size: 0.78rem; color: var(--color-text-tertiary);
}
.access-log-views {
    font-size: 0.78rem; color: var(--color-primary); font-weight: 500;
}
.spinner-sm {
    width: 18px; height: 18px; border: 2px solid var(--color-border);
    border-top-color: var(--color-primary); border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@media (max-width: 480px) {
    .access-log-details { flex-direction: column; align-items: flex-start; gap: 2px; }
    .access-log-entry { padding: 10px 12px; }
}
.dtab-dialog-quick {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.dtab-quick-btn {
    padding: 4px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    background: var(--color-bg);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dtab-quick-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dtab-quick-date { display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary-bg); color: var(--color-primary); border-color: rgba(38,166,154,0.3); font-weight: 500; }
.dtab-quick-date:hover { background: var(--color-primary); color: #fff; }
.dtab-quick-date svg { flex-shrink: 0; }
.dtab-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-light);
}
.dtab-dialog-btn {
    padding: 9px 20px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}
.dtab-btn-cancel { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border-light); }
.dtab-btn-cancel:hover { background: var(--color-surface); }
.dtab-btn-save { background: var(--color-primary); color: white; }
.dtab-btn-save:hover { background: var(--color-primary-dark); }
.dtab-btn-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* Sharing select for dashboards */
.sharing-select {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg);
    cursor: pointer;
    margin-top: 4px;
}
.sharing-select:focus { outline: none; border-color: var(--color-primary); }

/* DASHBOARD / MARKERS GRID */
.markers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.marker-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-base); animation: cardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
@keyframes cardFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.marker-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(38,166,154,0.15); transform: translateY(-2px); }
@media (min-width: 969px) {
    .marker-card { cursor: grab; }
    .marker-card .marker-info-btn,
    .marker-card .marker-remove-btn,
    .marker-card .marker-add-dash-btn,
    .marker-card .marker-table-toggle,
    .marker-card .marker-chart-container,
    .marker-card .marker-table-container { cursor: pointer; }
    .marker-card .marker-chart-container canvas { cursor: default; }
}
.marker-card-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px 0; }

.drag-placeholder {
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-lg);
    background: rgba(38,166,154,0.06);
    transition: height 0.15s ease;
}
.drag-ghost { border-radius: var(--radius-lg); }
body.is-dragging { cursor: grabbing !important; user-select: none; }
body.is-dragging * { cursor: grabbing !important; }
.marker-info h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: 4px; }
.marker-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marker-unit, .marker-ref { font-size: 0.78rem; color: var(--color-text-tertiary); font-weight: 500; }
.marker-ref { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--color-success-bg); border-radius: 999px; color: var(--color-success); }
.marker-opt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(59,130,246,0.08); border-radius: 999px; color: #3b82f6; font-size: 0.78rem; font-weight: 500; }
.marker-remove-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); font-size: 1.1rem; transition: all var(--transition-fast); opacity: 0; }
.marker-card:hover .marker-remove-btn { opacity: 1; }
.marker-remove-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.marker-latest { display: flex; align-items: baseline; gap: 8px; padding: 8px 24px 4px; flex-wrap: wrap; }
.marker-latest-value { font-size: 1.8rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; line-height: 1; }
.marker-latest-value.in-range { color: var(--color-success); }
.marker-latest-value.out-of-range { color: var(--color-danger); }
.marker-latest-value.optimal { color: #3b82f6; }
.marker-latest-date { font-size: 0.78rem; color: var(--color-text-tertiary); }
.optimal-badge { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.optimal-yes { background: rgba(59,130,246,0.10); color: #3b82f6; }
.optimal-no { background: rgba(245,158,11,0.10); color: #d97706; }
.marker-chart-container { padding: 8px 16px 0; height: 220px; }
.marker-chart-container canvas { width: 100% !important; height: 100% !important; }
.marker-table-container { border-top: 1px solid var(--color-border-light); max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.marker-table-container.expanded { max-height: 600px; overflow-y: auto; }
.marker-table-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: var(--color-surface-hover); border: none; border-top: 1px solid var(--color-border-light); font-size: 0.78rem; font-weight: 500; color: var(--color-text-tertiary); transition: all var(--transition-fast); }
.marker-table-toggle:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.marker-table-toggle svg { transition: transform var(--transition-base); }
.marker-table-toggle.expanded svg { transform: rotate(180deg); }
.marker-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.marker-table th { position: sticky; top: 0; background: var(--color-bg); padding: 10px 16px; text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.th-ref-short { display: none; }
.marker-table th.sortable { cursor: pointer; user-select: none; }
.marker-table th.sortable:hover { color: var(--color-primary); }
.marker-table th .sort-icon { display: inline-block; margin-left: 4px; font-size: 0.7rem; opacity: 0.5; }
.marker-table td { padding: 10px 16px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text-secondary); }
.marker-table tr:last-child td { border-bottom: none; }
.marker-table tr:hover td { background: var(--color-surface-hover); }
.marker-table .value-cell { font-weight: 600; color: var(--color-text); }
.marker-table .value-cell.patologisk { color: var(--color-danger); }
.marker-table .value-cell.normal { color: var(--color-success); }
.marker-table .value-cell.optimal { color: #3b82f6; }
.marker-table tr.pinned-row td { background: #fef3c7; }
.marker-table tr.pinned-row:hover td { background: #fde68a; }
.opt-cell-yes { color: var(--color-primary); font-weight: 600; }
.opt-cell-no { color: var(--color-text-muted); font-weight: 400; }

/* Result source badges */
.result-date-source { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.source-furst {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.15);
}
.source-manual {
    background: rgba(107, 114, 128, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(107, 114, 128, 0.15);
}
.source-pdf {
    background: rgba(168, 85, 247, 0.08);
    color: #7c3aed;
    border: 1px solid rgba(168, 85, 247, 0.15);
}
.marker-latest .source-badge {
    font-size: 0.6rem;
    vertical-align: middle;
}
.upload-preview-source {
    margin: 8px 0 4px;
}
.upload-preview-source .source-badge {
    font-size: 0.72rem;
    padding: 3px 9px;
    /* I forhåndsvisningen skal HELE laboratorie-/klinikknavnet vises — den
       generelle .source-badge-regelen kutter med ellipsis (max-width 120px,
       80px på mobil), som her ga «Volvat - Ber…». Tillat full bredde + ombrekk. */
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}


.ms-imports-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.ms-imports-error {
    padding: 14px 16px;
    background: var(--color-danger-bg);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin: 0;
}

/* Sammendrag-tiles på toppen */
.ms-imports-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.ms-imports-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: var(--radius-md);
    min-width: 0;
}
.ms-imports-tile-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-imports-tile-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

/* Seksjon per kilde (Fürst / PDF / Manuelt) */
.ms-imports-section {
    margin-top: 22px;
}
.ms-imports-section:first-of-type {
    margin-top: 0;
}
.ms-imports-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ms-imports-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.ms-imports-section-title .source-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    flex-shrink: 0;
}
.ms-imports-section-count {
    padding: 3px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ms-imports-section-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}
.ms-imports-section-info svg {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

/* Liste med importkort */
.ms-imports-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ms-import-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-import-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.06);
}
.ms-import-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ms-import-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.ms-import-card-lab {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}
.ms-import-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.ms-import-card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ms-import-card-date svg { opacity: 0.6; }
.ms-import-card-count {
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Markør-chips (preview) */
.ms-import-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ms-import-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 9px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
}
.ms-import-chip-name {
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.ms-import-chip-value {
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ms-import-chip-more {
    color: var(--color-text-tertiary);
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

/* Footer + slett-knapp / låst-hint */
.ms-import-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}
.ms-import-card-footer-locked {
    justify-content: flex-start;
}
.ms-import-locked-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
    font-size: 0.78rem;
    font-weight: 500;
}
.ms-import-locked-hint svg { opacity: 0.7; }

.ms-import-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-danger, #dc2626);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 36px;
}
.ms-import-delete-btn:hover,
.ms-import-delete-btn:focus-visible {
    background: var(--color-danger-bg);
    border-color: var(--color-danger, #dc2626);
    outline: none;
}
.ms-import-delete-btn:active { transform: translateY(1px); }
.ms-import-delete-btn svg { flex-shrink: 0; }

/* Manuelt-seksjon (sammendrag, ikke kortliste) */
.ms-imports-section-manual .ms-manual-summary {
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: var(--radius-lg);
}
.ms-manual-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.ms-manual-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ms-manual-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-manual-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.ms-manual-sources {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
}
.ms-manual-sources-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.ms-manual-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ms-manual-sources-list li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: 999px;
    font-size: 0.78rem;
}
.ms-manual-source-name {
    color: var(--color-text);
    font-weight: 500;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-manual-source-count {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.ms-manual-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}
.ms-manual-hint svg {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

/* Ekstra forklaring i slett-bekreftelse */
.confirm-delete-extra {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--color-danger-bg);
    border-radius: var(--radius-sm);
    color: #b91c1c;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: left;
}


.ms-import-request-link {
    appearance: none;
    background: none;
    border: none;
    padding: 4px 0;
    margin: 5px 10px 0;
    color: var(--color-text-tertiary);
    font-size: 0.60rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
    text-align: left;
    align-self: flex-start;
    font-style: italic;
}
.ms-import-request-link:hover,
.ms-import-request-link:focus-visible {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}


.ms-import-req-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: msImportReqFadeIn 0.18s ease;
}
.ms-import-req-overlay.ms-import-req-closing {
    animation: msImportReqFadeOut 0.18s ease forwards;
}
@keyframes msImportReqFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes msImportReqFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.ms-import-req-dialog {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 26px 22px;
    animation: msImportReqSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes msImportReqSlideUp {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ms-import-req-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ms-import-req-close:hover,
.ms-import-req-close:focus-visible {
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
}
.ms-import-req-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 32px;
}
.ms-import-req-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg, rgba(67, 165, 153, 0.1));
    color: var(--color-primary);
    border-radius: 50%;
}
.ms-import-req-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}
.ms-import-req-intro {
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.ms-import-req-summary {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 18px;
    display: grid;
    gap: 6px;
    font-size: 0.85rem;
}
.ms-import-req-summary-row {
    display: flex;
    gap: 8px;
}
.ms-import-req-summary-label {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    min-width: 110px;
    font-weight: 500;
}
.ms-import-req-summary-value {
    color: var(--color-text);
    font-weight: 500;
    word-break: break-word;
}
.ms-import-req-form { display: flex; flex-direction: column; gap: 6px; }
.ms-import-req-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}
.ms-import-req-required { color: var(--color-danger, #dc2626); }
.ms-import-req-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    resize: vertical;
    min-height: 90px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-import-req-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(67, 165, 153, 0.12);
}
.ms-import-req-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    flex-wrap: wrap;
}
.ms-import-req-counter { font-variant-numeric: tabular-nums; }
.ms-import-req-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.ms-import-req-cancel,
.ms-import-req-submit {
    flex: 1;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ms-import-req-cancel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.ms-import-req-cancel:hover {
    background: var(--color-surface);
    border-color: var(--color-text-tertiary);
}
.ms-import-req-submit {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
.ms-import-req-submit:hover:not(:disabled) {
    filter: brightness(0.95);
}
.ms-import-req-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ms-import-req-submit-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Bekreftelse-tilstand etter sending */
.ms-import-req-success {
    text-align: center;
    padding: 16px 8px 4px;
}
.ms-import-req-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(67, 165, 153, 0.12);
    color: var(--color-primary);
    border-radius: 50%;
}
.ms-import-req-success-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.ms-import-req-success-text {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.ms-import-req-success-btn {
    min-height: 42px;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.ms-import-req-success-btn:hover { filter: brightness(0.95); }

@media (max-width: 540px) {
    .ms-import-req-dialog {
        padding: 20px 18px 18px;
        max-height: 95vh;
        border-radius: var(--radius-md);
    }
    .ms-import-req-title { font-size: 1rem; }
    .ms-import-req-intro { font-size: 0.85rem; }
    .ms-import-req-summary-label { min-width: 90px; }
    .ms-import-req-actions { flex-direction: column-reverse; }
    .ms-import-req-cancel,
    .ms-import-req-submit { width: 100%; min-height: 46px; }
}


.admin-ud-imports-section {
    transition: background var(--transition-base), box-shadow var(--transition-base);
    border-radius: var(--radius-md);
}
.admin-ud-imports-section.admin-ud-imports-highlight {
    background: rgba(67, 165, 153, 0.08);
    box-shadow: 0 0 0 4px rgba(67, 165, 153, 0.12);
    padding: 12px;
    margin: -12px;
}
.admin-ud-import-group { margin-top: 14px; }
.admin-ud-import-group:first-child { margin-top: 6px; }
.admin-ud-import-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-ud-import-group-count {
    padding: 2px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
.admin-ud-import-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.admin-ud-import-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}
.admin-ud-import-card:hover { border-color: rgba(168, 85, 247, 0.4); }
.admin-ud-import-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-ud-import-head .source-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    flex-shrink: 0;
}
.admin-ud-import-lab {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    word-break: break-word;
}
.admin-ud-import-meta {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.admin-ud-import-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.74rem;
}
.admin-ud-import-chips li {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: 999px;
    line-height: 1.3;
    max-width: 220px;
}
.admin-ud-import-chips li span:first-child {
    color: var(--color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.admin-ud-import-chips li span:last-child {
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.admin-ud-import-chip-more {
    color: var(--color-text-tertiary) !important;
    font-style: italic;
    border-style: dashed !important;
    background: transparent !important;
}
.admin-ud-import-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}
.admin-ud-import-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-danger, #dc2626);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.admin-ud-import-delete-btn:hover,
.admin-ud-import-delete-btn:focus-visible {
    background: var(--color-danger-bg);
    border-color: var(--color-danger, #dc2626);
    outline: none;
}
.admin-ud-import-delete-btn svg { flex-shrink: 0; }

@media (max-width: 600px) {
    .admin-ud-import-head { gap: 6px; }
    .admin-ud-import-meta { width: 100%; margin-left: 0; }
    .admin-ud-import-chips li { max-width: 100%; }
    .admin-ud-import-delete-btn { width: 100%; justify-content: center; min-height: 38px; }
    .admin-ud-import-actions { justify-content: stretch; }
}


@media (max-width: 720px) {
    .ms-imports-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ms-manual-stats  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}


@media (max-width: 640px) {
    .ms-imports-tile { padding: 10px 12px; }
    .ms-imports-tile-value { font-size: 0.95rem; }
    .ms-imports-section-title { font-size: 0.9rem; }
    .ms-imports-section-info { font-size: 0.78rem; padding: 9px 10px; }
    .ms-import-card { padding: 14px; gap: 10px; }
    .ms-import-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ms-import-card-meta { gap: 8px; font-size: 0.78rem; flex-wrap: wrap; }
    .ms-import-card-lab { font-size: 0.92rem; }
    .ms-import-chip { font-size: 0.74rem; padding: 3px 8px; }
    .ms-import-chip-name { max-width: 110px; }
    .ms-import-card-footer { margin-top: 4px; }
    .ms-import-delete-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 11px 14px;
        font-size: 0.88rem;
    }
    .ms-import-card-footer-locked { justify-content: center; }
    .ms-import-locked-hint { width: 100%; justify-content: center; min-height: 40px; }
    .ms-manual-source-name { max-width: 140px; }
}

/* Veldig smale telefoner */
@media (max-width: 380px) {
    .ms-imports-tiles { grid-template-columns: 1fr; }
    .ms-manual-stats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-import-card { padding: 12px; }
    .ms-import-chip-name { max-width: 90px; }
    .ms-import-chip { font-size: 0.72rem; padding: 3px 7px; }
}

/* Result Action Cell (edit + delete + note) */
.result-action-cell { width: 90px; text-align: center; padding: 4px 6px !important; white-space: nowrap; }
.result-action-cell.result-note-only { width: 36px; }
.result-edit-btn, .result-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast); opacity: 0; vertical-align: middle; }
tr:hover .result-edit-btn, tr:hover .result-delete-btn,
tr:focus-within .result-edit-btn, tr:focus-within .result-delete-btn { opacity: 1; }
.result-edit-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.result-delete-btn:hover { background: rgba(239,68,68,0.08); color: var(--color-danger); }
.spinner-xs { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }

/* Note indicator button */
.result-note-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; color: var(--color-primary); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast); vertical-align: middle; opacity: 0.7; }
.result-note-btn:hover { background: var(--color-primary-bg); opacity: 1; }
.result-note-btn svg { fill: var(--color-primary); fill-opacity: 0.15; stroke: var(--color-primary); }

/* Result Edit Modal */
.rem-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; }
.rem-overlay.rem-closing { animation: fadeOut 0.2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.rem-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.rem-dialog { position: relative; width: 100%; max-width: 480px; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.rem-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.rem-header h3 { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0; }
.rem-close { background: none; border: none; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: var(--radius-sm); transition: all var(--transition-fast); }
.rem-close:hover { color: var(--color-text); background: var(--color-bg); }
.rem-body { padding: 24px; overflow-y: auto; max-height: calc(90vh - 70px); }
.rem-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px 14px; background: var(--color-bg); border-radius: var(--radius-md); }
.rem-marker { font-weight: 600; color: var(--color-text); }
.rem-date { color: var(--color-text-secondary); font-size: 0.9rem; }
.rem-field { margin-bottom: 16px; }
.rem-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.rem-optional { font-weight: 400; text-transform: none; color: var(--color-text-muted); letter-spacing: 0; }
.rem-field input[type="text"] { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; color: var(--color-text); background: var(--color-surface); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; }
.rem-field input[type="text"]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.15); }
.rem-field textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.95rem; color: var(--color-text); background: var(--color-surface); outline: none; resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; }
.rem-field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.15); }
.rem-field textarea::placeholder { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.5; }
.rem-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.rem-cancel-btn { padding: 10px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); }
.rem-cancel-btn:hover { background: var(--color-bg); color: var(--color-text); }
.rem-save-btn { padding: 10px 24px; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: white; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 6px; }
.rem-save-btn:hover { background: var(--color-primary-dark); }
.rem-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.rem-field-readonly .rem-value-readonly { padding: 10px 14px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; color: var(--color-text); background: var(--color-bg); box-sizing: border-box; opacity: 0.85; }
.rem-field-readonly .rem-readonly-hint { margin-top: 6px; font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; }
.result-edit-btn.result-note-edit { color: var(--color-primary); }
.result-edit-btn.result-note-edit:hover { background: var(--color-primary-bg); color: var(--color-primary); }

/* Note view modal */
.rem-note-view .rem-dialog { max-width: 440px; }
.rem-note-display { padding: 14px 16px; background: var(--color-bg); border-radius: var(--radius-md); border-left: 3px solid var(--color-primary); color: var(--color-text); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.rem-note-timestamp { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 16px; }
.rem-note-edit-btn { padding: 10px 24px; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: white; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.rem-note-edit-btn:hover { background: var(--color-primary-dark); }
.rem-note-delete-link { display: block; width: 100%; margin-top: 10px; padding: 8px; border: none; background: none; color: var(--color-danger); font-size: 0.85rem; cursor: pointer; text-align: center; border-radius: var(--radius-sm); transition: all var(--transition-fast); opacity: 0.7; }
.rem-note-delete-link:hover { background: rgba(239,68,68,0.06); opacity: 1; }

/* Delete Confirmation Dialog */
.confirm-delete-dialog { text-align: center; max-width: 400px; padding: 28px 24px; }
.confirm-delete-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(239,68,68,0.08); color: var(--color-danger); margin-bottom: 16px; }
.confirm-delete-dialog .confirm-title { text-align: center; margin-bottom: 16px; }
.confirm-delete-detail { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); margin-bottom: 12px; }
.confirm-delete-marker { font-weight: 600; font-size: 0.92rem; color: var(--color-text); }
.confirm-delete-value { font-size: 0.84rem; color: var(--color-text-secondary); }
.confirm-delete-warning { font-size: 0.82rem; color: var(--color-danger); margin-bottom: 16px; font-weight: 500; }
.confirm-input-label { display: block; font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 8px; text-align: left; }
.confirm-input-label strong { color: var(--color-text); }
.confirm-input { width: 100%; padding: 11px 14px; border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-text); background: var(--color-bg); outline: none; transition: border-color var(--transition-base); box-sizing: border-box; margin-bottom: 20px; text-align: center; letter-spacing: 0.05em; font-weight: 600; }
.confirm-input:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.confirm-delete-dialog .confirm-actions { justify-content: center; }
.confirm-delete-dialog .confirm-ok-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Sticky Date Indicator */
.sticky-date-indicator { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; background: rgba(38,166,154,0.08); border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-sm); animation: slideDown 0.2s ease-out; }
.sticky-date-indicator.hidden { display: none; }
.sticky-date-text { font-size: 0.76rem; color: var(--color-primary-dark); flex: 1; }
.sticky-date-reset { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; border-radius: 50%; font-size: 1rem; line-height: 1; transition: all var(--transition-fast); flex-shrink: 0; padding: 0; }
.sticky-date-reset:hover { background: rgba(0,0,0,0.08); color: var(--color-text); }

/* CONFIRM DIALOG */
.confirm-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; }
.confirm-overlay.confirm-closing { animation: fadeOut 0.15s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.confirm-dialog { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; max-width: 380px; width: 100%; box-shadow: var(--shadow-xl); animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.confirm-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--color-text); }
.confirm-message { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-cancel-btn { padding: 10px 20px; background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.confirm-cancel-btn:hover { background: var(--color-surface-hover); }
.confirm-ok-btn { padding: 10px 20px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.confirm-ok-btn:hover { background: var(--color-primary-dark); }
.confirm-ok-btn.confirm-danger { background: var(--color-danger); }
.confirm-ok-btn.confirm-danger:hover { background: #dc2626; }

/* Ikon-variant (f.eks. utlogging) — sentrert, luftig, thumb-vennlig */
.confirm-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 2px auto 14px; border-radius: 50%; background: var(--color-primary-bg, rgba(38,166,154,0.12)); color: var(--color-primary); }
.confirm-dialog--icon { text-align: center; }
.confirm-dialog--icon .confirm-message { text-align: center; }
.confirm-dialog--icon .confirm-actions { justify-content: center; }
@media (max-width: 400px) {
    .confirm-dialog--icon .confirm-actions button { flex: 1; }
}

/* MODAL */
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease, backdropEnableClick 0s 0.35s both; pointer-events: none; }
@keyframes backdropEnableClick { to { pointer-events: auto; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog { position: relative; width: 100%; max-width: 800px; max-height: 90vh; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.modal-header h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; }
.modal-header h2 svg { color: var(--color-primary); }
.modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: var(--radius-sm); font-size: 1.4rem; color: var(--color-text-tertiary); transition: all var(--transition-fast); }
.modal-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.modal-tabs { display: flex; padding: 0 24px; border-bottom: 1px solid var(--color-border); gap: 4px; }
.tab-btn { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.85rem; font-weight: 500; color: var(--color-text-tertiary); transition: all var(--transition-fast); margin-bottom: -1px; cursor: pointer; }
.tab-btn svg,
.tab-btn .tab-icon { width: 16px; height: 16px; flex-shrink: 0; }
.tab-icon { display: inline-block; background: currentColor; }
.tab-icon-helsenorge {
    -webkit-mask: url('/assets/img/helsenorge-safari-pinned-tab.svg') center / contain no-repeat;
    mask: url('/assets/img/helsenorge-safari-pinned-tab.svg') center / contain no-repeat;
}
.tab-btn:hover { color: var(--color-text-secondary); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: tabFadeIn 0.2s ease; }
@keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* FORMS */
.form-group { margin-bottom: 16px; min-width: 0; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.form-group input[type="text"], .form-group input[type="date"] { width: 100%; max-width: 100%; min-width: 0; padding: 11px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-text); outline: none; transition: all var(--transition-base); }
.form-group input[type="date"] { appearance: none; -webkit-appearance: none; }
.form-group input:focus { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.form-row > .form-group { min-width: 0; }
.autocomplete-wrapper { position: relative; }
.autocomplete-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; z-index: 50; }
.autocomplete-item { padding: 10px 14px; font-size: 0.85rem; cursor: pointer; transition: background var(--transition-fast); display: flex; align-items: center; gap: 10px; }
.autocomplete-item:hover { background: var(--color-primary-bg); }
.autocomplete-item .ac-marker-name { font-weight: 600; color: var(--color-text); }
.autocomplete-item .marker-type-tag { flex-shrink: 0; }
.autocomplete-item .ac-marker-unit { font-size: 0.78rem; color: var(--color-text-tertiary); white-space: nowrap; margin-left: auto; }

#tab-manual { min-height: 320px; }
.manual-selected-marker { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.25); border-radius: var(--radius-md); margin-bottom: 16px; }
.manual-selected-marker .msm-name { font-weight: 600; font-size: 0.9rem; color: var(--color-primary-dark); flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.manual-selected-marker .msm-info { font-size: 0.78rem; color: var(--color-text-secondary); }
.manual-selected-marker .msm-clear { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; border-radius: 50%; transition: all var(--transition-fast); flex-shrink: 0; }
.manual-selected-marker .msm-clear:hover { background: rgba(0,0,0,0.08); color: var(--color-text); }

.manual-extra-fields { animation: slideDown 0.3s ease-out; }
.manual-extra-fields.hidden { display: none; }

.manual-missing-footer {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 24px; padding: 14px 0 0;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.manual-missing-btn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    background: none;
    border: none;
    padding: 6px 2px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: color 0.15s;
}
.manual-missing-btn:hover { color: var(--color-primary); }
.manual-missing-btn:hover .manual-missing-btn-text strong { color: var(--color-primary); }
.manual-missing-btn svg { flex-shrink: 0; opacity: 0.7; margin-top: 2px; }
.manual-missing-btn-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.manual-missing-btn-text strong {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.manual-missing-form { animation: slideDown 0.25s ease-out; }
.manual-missing-form-header {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px;
}
.manual-missing-desc {
    flex: 1; font-size: 0.78rem; color: var(--color-text-secondary);
    margin-bottom: 0; line-height: 1.45;
}
.manual-missing-close {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: none; border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1;
    color: var(--color-text-tertiary); cursor: pointer;
    transition: all 0.15s;
}
.manual-missing-close:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.manual-missing-input-row { display: flex; gap: 8px; }
.manual-missing-input {
    flex: 1; padding: 9px 12px; font-size: 0.82rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text);
    transition: border-color 0.15s;
}
.manual-missing-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.12); }
.manual-missing-send {
    padding: 9px 18px; font-size: 0.8rem; font-weight: 600;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); cursor: pointer; white-space: nowrap;
    transition: background 0.15s;
}
.manual-missing-send:hover { background: var(--color-primary-dark); }
.manual-missing-send:disabled { opacity: 0.6; cursor: not-allowed; }
.manual-missing-error { display: block; margin-top: 6px; font-size: 0.76rem; color: #ef4444; }
.manual-extra-fields .form-group input[readonly] { background: var(--color-bg); color: var(--color-text-secondary); cursor: default; border-style: dashed; }
.manual-source-group { margin-top: 4px; }
.manual-source-group label .label-optional { font-weight: 400; font-size: 0.78rem; color: var(--color-text-tertiary); }
.manual-source-group input { font-size: 0.88rem; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.submit-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; transition: all var(--transition-base); margin-top: 8px; }
.submit-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,166,154,0.3); }

/* File Upload */
.upload-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; transition: all var(--transition-base); cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.upload-zone svg { color: var(--color-text-tertiary); margin-bottom: 12px; }
.upload-zone p { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 12px; }
.upload-hint { font-size: 0.78rem !important; margin-top: 10px; color: var(--color-text-tertiary) !important; }
.upload-zone .upload-text-desktop { display: block; }
.upload-zone .upload-text-mobile { display: none !important; }
@media (max-width: 768px) {
    .upload-zone .upload-text-desktop { display: none !important; }
    .upload-zone .upload-text-mobile { display: block !important; }
}
.file-btn { display: inline-flex; padding: 8px 20px; background: var(--color-primary); color: white; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition-base); }
.file-btn:hover { background: var(--color-primary-dark); }
.upload-preview { margin-top: 16px; padding: 16px; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
/* Import Guide (collapsible) */
.import-guide {
    margin-bottom: 20px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--color-surface);
}
.import-guide-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--color-bg); border: none;
    cursor: pointer; gap: 12px; text-align: left;
    transition: background var(--transition-fast);
}
.import-guide-toggle:hover { background: var(--color-primary-bg); }
.import-guide-toggle-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.import-guide-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary-dark);
}
.import-guide-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.import-guide-toggle-text strong { font-size: 0.88rem; font-weight: 700; color: var(--color-text); }
.import-guide-toggle-text span { font-size: 0.76rem; color: var(--color-text-tertiary); }
.import-guide-chevron {
    flex-shrink: 0; color: var(--color-text-tertiary);
    transition: transform var(--transition-base);
}
.import-guide.expanded .import-guide-chevron { transform: rotate(180deg); }
.import-guide-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.import-guide.expanded .import-guide-body { max-height: 2400px; }
.import-guide-intro {
    font-size: 0.84rem; color: var(--color-text-secondary);
    line-height: 1.55; padding: 14px 16px 10px; margin: 0;
}
.import-steps {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 12px 14px;
}
.import-step {
    display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
    background: var(--color-bg); border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.import-step:hover { background: var(--color-primary-bg); }
.import-step-num {
    width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.72rem; font-weight: 700;
    background: var(--color-primary-bg); color: var(--color-primary-dark);
    border: 1.5px solid var(--color-primary);
}
.import-step-text {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.84rem; line-height: 1.4;
}
.import-step-text strong { color: var(--color-text); font-weight: 600; }
.import-step-text span { color: var(--color-text-secondary); }
.import-step-text a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.import-step-text a:hover { text-decoration: underline; }

.upload-preview h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.upload-preview-list { max-height: 300px; overflow-y: auto; }
.upload-preview-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--color-surface); border-radius: var(--radius-sm); margin-bottom: 4px; font-size: 0.82rem; }
.upload-converted { font-size: 0.7rem; color: var(--color-primary); font-weight: 600; margin-left: 2px; cursor: help; }

/* Import-overlapp: viser om et prøvesvar er nytt, finnes fra før, eller har
   en avvikende verdi på samme dato/markør. Hjelper brukeren å unngå at samme
   blodprøve importeres dobbelt. */
.upload-overlap-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.upload-overlap-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.upload-overlap-chip .uoc-dot { width: 7px; height: 7px; border-radius: 50%; }
.upload-overlap-chip.uoc-new { background: var(--color-success-bg, #ecfdf5); color: #047857; border-color: #a7f3d0; }
.upload-overlap-chip.uoc-new .uoc-dot { background: #10b981; }

/* Nye prøvesvar (ikke importert fra før) løftes til toppen og fremheves med
   svak grønn bakgrunn + grønn aksent, slik at de skiller seg klart fra rader
   som allerede finnes. Aktiveres kun når importen FAKTISK har overlapp med
   eksisterende data (ellers er «alt nytt» og fremheving gir ingen mening). */
.upload-preview-item.upload-row-new { background: var(--color-success-bg, #ecfdf5); border-left: 3px solid #10b981; padding-left: 9px; }
.upload-status-tag.ust-new { background: #ffffff; color: #047857; border: 1px solid #a7f3d0; }
.upload-overlap-chip.uoc-exists { background: var(--color-bg); color: var(--color-text-secondary); border-color: var(--color-border); }
.upload-overlap-chip.uoc-exists .uoc-dot { background: var(--color-text-tertiary, #9ca3af); }
.upload-overlap-chip.uoc-conflict { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.upload-overlap-chip.uoc-conflict .uoc-dot { background: #f59e0b; }

.upload-preview-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; line-height: 1.4; padding: 9px 11px; border-radius: var(--radius-sm); margin: 0 0 10px; }
.upload-preview-note svg { flex-shrink: 0; margin-top: 1px; }
.upload-preview-note.upn-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.upload-preview-note.upn-info { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

.upload-status-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 4px; white-space: nowrap; margin-left: 6px; }
.upload-status-tag.ust-exists { background: var(--color-bg); color: var(--color-text-tertiary, #9ca3af); border: 1px solid var(--color-border); }
.upload-status-tag.ust-conflict { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.upload-preview-item.upload-row-exists { opacity: 0.62; }
.upload-preview-item.upload-row-conflict { background: #fffbeb; }
.upload-conflict-prev { color: var(--color-text-tertiary, #9ca3af); text-decoration: line-through; margin-right: 4px; }

/* Når en forhåndsvisning er aktiv (fil tolket, men ikke importert ennå),
   kollapses det store opplastingsområdet (dropzone + guide + metoder) slik at
   resultatet blir hovedfokus. En kompakt «Last opp en annen fil»-knapp øverst
   i forhåndsvisningen lar brukeren bytte fil uten å miste oversikten. */
.tab-content.has-active-preview .upload-zone,
.tab-content.has-active-preview .import-guide,
.tab-content.has-active-preview .hn-method { display: none; }

/* «Last opp en annen fil» ligger i en egen bar OVER resultatboksen (ikke inni
   den), høyrejustert med luft. Baren vises kun når en forhåndsvisning er aktiv
   (kollapset/fokusert tilstand) — styrt av .has-active-preview. */
.upload-reupload-bar { display: none; }
.tab-content.has-active-preview .upload-reupload-bar {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 14px;
}
.upload-reupload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-base);
}
.upload-reupload-btn:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-text-tertiary, #9ca3af); }
.upload-reupload-btn svg { flex-shrink: 0; }

/* «Tilbake til resultatet»-bar: vises når brukeren har trykket «Last opp en
   annen fil», men det allerede finnes et ferdig behandlet resultat klart til
   import. Lar et utilsiktet klikk angres uten å miste resultatet. */
.upload-resume-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--color-success-bg, #ecfdf5);
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-md);
}
.upload-resume-text { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #047857; }
.upload-resume-text svg { flex-shrink: 0; }
.upload-resume-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-base);
}
.upload-resume-btn:hover { background: #059669; }
.upload-preview-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-confirm { flex: 1; padding: 10px; background: var(--color-success); color: white; border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all var(--transition-base); }
.btn-confirm:hover { background: #059669; }
.btn-cancel { flex: 1; padding: 10px; background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all var(--transition-base); }
.btn-cancel:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.loading-indicator { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner-sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }


.import-processing-overlay {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
    background: var(--color-surface);
    animation: fadeIn 0.18s ease;
}
.import-processing-overlay.hidden { display: none; }
.import-processing-card {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center; max-width: 380px;
}
.import-processing-card .spinner {
    width: 48px; height: 48px; border-width: 4px;
}
.import-processing-title {
    margin: 0; font-size: 1.15rem; font-weight: 700;
    color: var(--color-text-primary);
}
.import-processing-sub {
    margin: 0; font-size: 0.95rem; line-height: 1.55;
    color: var(--color-text-secondary);
}
@media (max-width: 768px) {
    .import-processing-title { font-size: 1.05rem; }
    .import-processing-sub { font-size: 0.92rem; }
}

/* FEEDBACK FAB & MODAL */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: 28px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: padding var(--transition-base), gap var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    -webkit-tap-highlight-color: transparent;
}
.feedback-fab span {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.feedback-fab:hover {
    padding: 12px 18px;
    gap: 10px;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(38, 166, 154, 0.35);
}
.feedback-fab:hover span {
    max-width: 140px;
    opacity: 1;
}
.feedback-fab:active { transform: translateY(0); }
.feedback-fab svg { flex-shrink: 0; }

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.feedback-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
.feedback-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}
.feedback-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}
.feedback-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.feedback-modal-close:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.feedback-modal-body { padding: 24px; }
.feedback-intro {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}
.feedback-user-info,
.feedback-doctor-fields {
    margin-bottom: 20px;
}
.feedback-doctor-fields .feedback-field { margin-bottom: 14px; }
.feedback-doctor-fields .feedback-field:last-child { margin-bottom: 0; }
.feedback-user-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
.feedback-user-label { color: var(--color-text-tertiary); }
.feedback-field { margin-bottom: 18px; }
.feedback-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feedback-field input,
.feedback-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
    outline: none;
    transition: all var(--transition-base);
    resize: vertical;
}
.feedback-field input:focus,
.feedback-field textarea:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.12);
}
.feedback-field textarea { min-height: 120px; }
.feedback-char-count {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 6px;
    text-align: right;
}
.feedback-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.feedback-cancel-btn {
    flex: 1;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.feedback-cancel-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-text-tertiary);
}
.feedback-submit-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}
.feedback-submit-btn:hover:not(:disabled) {
    background: var(--color-primary-dark);
}
.feedback-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.feedback-success {
    padding: 32px 24px;
    text-align: center;
}
.feedback-success-icon {
    color: var(--color-success);
    margin-bottom: 16px;
}
.feedback-success h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}
.feedback-success p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}
.feedback-close-success {
    padding: 12px 28px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}
.feedback-close-success:hover { background: var(--color-primary-dark); }

@media (max-width: 768px) {
    .feedback-fab { display: none !important; }
    .feedback-modal { padding: 0; align-items: stretch; }
    .feedback-modal-backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
    .feedback-modal-dialog {
        max-width: 100%; max-height: 100vh; max-height: 100dvh;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0;
        animation: fadeIn 0.3s ease;
        display: flex; flex-direction: column;
    }
    .feedback-modal-header {
        padding-top: max(20px, env(safe-area-inset-top, 0px));
    }
    .feedback-modal-body { flex: 1; overflow-y: auto; }
}

/* TOAST */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.85rem; font-weight: 500; min-width: 280px; max-width: 420px; animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
.toast.success { border-left: 3px solid var(--color-success); }
.toast.error { border-left: 3px solid var(--color-danger); }
.toast.info { border-left: 3px solid var(--color-primary); }
.toast-icon { flex-shrink: 0; width: 20px; height: 20px; }
.toast.success .toast-icon { color: var(--color-success); }
.toast.error .toast-icon { color: var(--color-danger); }
.toast.info .toast-icon { color: var(--color-primary); }

/* NAVIGATION */
/* Desktop: naven fester seg rett under headeren (og under demo-stripen i /demo). */
.main-nav { background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); position: sticky; top: calc(var(--demo-bar-h) + var(--header-height, 72px)); z-index: 90; padding: 0 24px; }
.nav-content { max-width: var(--max-width); margin: 0 auto; }
.nav-tabs { display: flex; gap: 4px; }
.nav-tab { display: flex; align-items: center; gap: 7px; padding: 12px 20px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.88rem; font-weight: 500; color: var(--color-text-tertiary); transition: all var(--transition-fast); margin-bottom: -1px; cursor: pointer; }
.nav-tab:hover { color: var(--color-text-secondary); }
.nav-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.nav-tab svg { flex-shrink: 0; }
.nav-label { white-space: nowrap; }
.nav-tab[data-page="mine-sider"],
.nav-tab[data-page="admin"] { display: none; }
#role-badge { display: none; }

/* DASHBOARD TOOLBAR */
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.dashboard-toolbar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.dashboard-label { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.dashboard-toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Date filter */
.date-filter { position: relative; }
.date-filter-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.date-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.date-filter-btn svg:first-child { color: var(--color-text-tertiary); flex-shrink: 0; }
.date-filter-chevron { color: var(--color-text-tertiary); flex-shrink: 0; transition: transform var(--transition-fast); }
.date-filter.active .date-filter-btn { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
.date-filter.active .date-filter-btn svg { color: var(--color-primary); }
.date-filter-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); z-index: 210; animation: tabFadeIn 0.15s ease; }
.df-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--color-border-light); gap: 12px; }
.df-item:last-child { border-bottom: none; }
.df-item:hover { background: var(--color-primary-bg); }
.df-item.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 600; }
.df-date-text { font-size: 0.85rem; }
.df-count { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-tertiary); }
.df-item.active .df-count { background: rgba(38,166,154,0.15); color: var(--color-primary); }
.df-empty { padding: 16px; text-align: center; font-size: 0.85rem; color: var(--color-text-tertiary); }

/* Date filter banner */
.date-filter-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; margin-bottom: 14px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-lg); animation: tabFadeIn 0.2s ease; }
.dfb-content { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 500; color: var(--color-text-secondary); }
.dfb-content svg { color: var(--color-primary); flex-shrink: 0; }
.dfb-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: white; border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.dfb-toggle:hover { background: var(--color-primary); color: white; }
.dfb-toggle:hover svg { color: white; }
.dfb-toggle svg { color: var(--color-primary); flex-shrink: 0; }
.dfb-toggle.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.dfb-toggle.active svg { color: white; }
.dfb-toggle.active:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* Pinned date banner */

.status-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    align-items: center;
    animation: statusFilterFadeIn 0.2s ease;
}
@keyframes statusFilterFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.status-filter-bar.hidden { display: none; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 11px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 36px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.status-pill:hover {
    background: var(--color-bg);
    border-color: var(--color-text-tertiary);
    color: var(--color-text);
}
.status-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 165, 153, 0.18);
}
.status-pill:active { transform: translateY(1px); }
.status-pill .status-pill-icon { display: inline-flex; color: var(--color-text-tertiary); }
.status-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--status-pill-color, var(--color-text-tertiary));
    box-shadow: 0 0 0 2px var(--status-pill-color-soft, transparent);
}
.status-pill-count {
    margin-left: 4px;
    padding: 2px 7px;
    background: var(--color-bg);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    transition: background var(--transition-fast), color var(--transition-fast);
}


.status-pill-optimal    { --status-pill-color: #3b82f6; --status-pill-color-soft: rgba(59, 130, 246, 0.18); --status-pill-tint: rgba(59, 130, 246, 0.10);  --status-pill-text: #1d4ed8; }
.status-pill-in-range   { --status-pill-color: #10b981; --status-pill-color-soft: rgba(16, 185, 129, 0.18); --status-pill-tint: rgba(16, 185, 129, 0.10);  --status-pill-text: #047857; }
.status-pill-low        { --status-pill-color: #ef4444; --status-pill-color-soft: rgba(239, 68, 68, 0.18);  --status-pill-tint: rgba(239, 68, 68, 0.10);   --status-pill-text: #b91c1c; }
.status-pill-high       { --status-pill-color: #ef4444; --status-pill-color-soft: rgba(239, 68, 68, 0.18);  --status-pill-tint: rgba(239, 68, 68, 0.10);   --status-pill-text: #b91c1c; }


.status-pill .status-icon-low,
.status-pill .status-icon-high {
    display: inline-flex;
    color: var(--status-pill-color, var(--color-text-tertiary));
}
.status-pill.active .status-icon-low,
.status-pill.active .status-icon-high {
    color: var(--status-pill-color);
}


.status-pill.active {
    background: var(--status-pill-tint, var(--color-primary-bg, rgba(67, 165, 153, 0.08)));
    border-color: var(--status-pill-color, var(--color-primary));
    color: var(--status-pill-text, var(--color-primary));
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.status-pill.active .status-pill-count {
    background: var(--status-pill-color, var(--color-primary));
    color: #fff;
}
.status-pill.active .status-pill-icon { color: var(--status-pill-color, var(--color-primary)); }
.status-pill.active.status-pill-all {
    background: var(--color-primary-bg, rgba(67, 165, 153, 0.08));
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.status-pill.active.status-pill-all .status-pill-count {
    background: var(--color-primary);
    color: #fff;
}

/* Kort/lang label: viser kort versjon på smale skjermer */
.status-pill-label-short { display: none; }

/* Tom-state når status-filter ikke matcher noe */
.status-filter-empty {
    text-align: center;
    padding: 32px 20px;
}
.status-filter-empty h3 { margin: 8px 0 6px; font-size: 1rem; }
.status-filter-empty p { color: var(--color-text-secondary); margin-bottom: 14px; }
.oversikt-empty.status-filter-empty .oversikt-empty-reset {
    margin-top: 4px;
    padding: 8px 18px;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}
.oversikt-empty.status-filter-empty .oversikt-empty-reset:hover {
    background: var(--color-primary);
    color: #fff;
}


@media (max-width: 640px) {
    .status-filter-bar { gap: 6px; margin-bottom: 12px; }
    .status-pill {
        padding: 8px 12px 8px 10px;
        font-size: 0.8rem;
        min-height: 38px;
        flex: 0 0 auto;
    }
    .status-pill-label-long  { display: none; }
    .status-pill-label-short { display: inline; }
    .status-pill-count { padding: 1px 6px; font-size: 0.68rem; }
}
@media (max-width: 380px) {
    .status-pill {
        gap: 5px;
        padding: 7px 10px 7px 9px;
        font-size: 0.76rem;
    }
}

.pinned-date-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; margin-bottom: 14px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #f59e0b33; border-radius: var(--radius-lg); animation: tabFadeIn 0.2s ease; flex-wrap: wrap; }
.pdb-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #f59e0b1a; border-radius: var(--radius-md); flex-shrink: 0; color: #d97706; }
.pdb-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; color: #92400e; flex: 1 1 200px; min-width: 0; }
.pdb-text strong { font-weight: 600; font-size: 0.92rem; color: #78350f; }
.pdb-sub { font-size: 0.78rem; color: #a16207; }


.pdb-hidden-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #f59e0b55;
    border-radius: 999px;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: auto;
    flex-shrink: 0;
    min-height: 32px;
}
.pdb-hidden-chip:hover,
.pdb-hidden-chip:focus-visible {
    background: #ffffff;
    border-color: #d97706;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
    outline: none;
}
.pdb-hidden-chip svg { color: #d97706; flex-shrink: 0; }
.pdb-hidden-chip-text { white-space: nowrap; }
.pdb-hidden-chip-text strong { color: #78350f; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 2px; }
.pdb-hidden-chip-arrow { opacity: 0.6; transition: transform var(--transition-fast); }
.pdb-hidden-chip:hover .pdb-hidden-chip-arrow { transform: translateX(2px); opacity: 1; }


.pdb-hidden-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background-color 0.22s ease;
    padding: 16px;
}
.pdb-hidden-overlay.pdb-hidden-open { background: rgba(15, 23, 42, 0.45); }
.pdb-hidden-overlay.pdb-hidden-closing { background: rgba(15, 23, 42, 0); }

.pdb-hidden-sheet {
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 12px 18px 24px;
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pdb-hidden-overlay.pdb-hidden-open .pdb-hidden-sheet { transform: translateY(0); }
.pdb-hidden-overlay.pdb-hidden-closing .pdb-hidden-sheet { transform: translateY(100%); }

.pdb-hidden-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border);
    margin: 4px auto 6px;
    flex-shrink: 0;
}
.pdb-hidden-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 6px;
}
.pdb-hidden-title-wrap { flex: 1; min-width: 0; }
.pdb-hidden-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.pdb-hidden-subtitle {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.pdb-hidden-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.pdb-hidden-close:hover,
.pdb-hidden-close:focus-visible {
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
}

.pdb-hidden-add-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition-fast), transform var(--transition-fast);
    min-height: 42px;
    align-self: stretch;
}
.pdb-hidden-add-all:hover { filter: brightness(0.95); }
.pdb-hidden-add-all:active { transform: translateY(1px); }
.pdb-hidden-add-all svg { flex-shrink: 0; }

.pdb-hidden-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pdb-hidden-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light, var(--color-border));
    border-radius: var(--radius-md);
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.22s ease;
    overflow: hidden;
}
.pdb-hidden-row-removed {
    opacity: 0;
    transform: translateX(8px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-top: -6px;
}
.pdb-hidden-row-info { flex: 1; min-width: 0; }
.pdb-hidden-row-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pdb-hidden-row-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.pdb-hidden-row-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.pdb-hidden-row-value.value-optimal       { color: #3b82f6; }
.pdb-hidden-row-value.value-in-range      { color: var(--color-success, #10b981); }
.pdb-hidden-row-value.value-out-of-range  { color: var(--color-danger, #ef4444); }
.pdb-hidden-row-value.value-low           { color: var(--color-danger, #ef4444); }
.pdb-hidden-row-value.value-high          { color: var(--color-danger, #ef4444); }
.pdb-hidden-row-unit { color: var(--color-text-tertiary); }
.pdb-hidden-row-ref { color: var(--color-text-tertiary); font-size: 0.74rem; }
.pdb-hidden-row-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
    min-height: 32px;
}
.pdb-hidden-row-add:hover { filter: brightness(0.95); }
.pdb-hidden-row-add:active { transform: translateY(1px); }
.pdb-hidden-row-add svg { flex-shrink: 0; }


@media (min-width: 720px) {
    .pdb-hidden-overlay { align-items: center; padding: 24px; }
    .pdb-hidden-sheet {
        border-radius: var(--radius-lg);
        max-height: 75vh;
        transform: translateY(12px) scale(0.985);
        padding: 18px 22px 22px;
    }
    .pdb-hidden-overlay.pdb-hidden-open .pdb-hidden-sheet { transform: translateY(0) scale(1); }
    .pdb-hidden-overlay.pdb-hidden-closing .pdb-hidden-sheet { transform: translateY(12px) scale(0.985); }
    .pdb-hidden-handle { display: none; }
    .pdb-hidden-header { padding-bottom: 10px; }
}


@media (max-width: 640px) {
    .pdb-hidden-chip { width: 100%; justify-content: space-between; min-height: 38px; margin-left: 0; }
    .pdb-hidden-row { padding: 11px 12px; }
    .pdb-hidden-row-add { padding: 9px 14px; min-height: 38px; font-size: 0.82rem; }
}
@media (max-width: 380px) {
    .pdb-hidden-row { flex-wrap: wrap; gap: 8px; }
    .pdb-hidden-row-add { width: 100%; justify-content: center; }
}

/* Pinned date indicator on tabs */
.dtab-pinned .dtab-pin-icon { color: #d97706; margin-right: 2px; flex-shrink: 0; }
.dtab-pinned.dtab-active { border-color: #f59e0b; }

/* Pinned value styles on marker card */
.marker-latest-pinned { position: relative; }
.marker-latest-miss { opacity: 0.5; }
.marker-latest-miss .marker-latest-value { font-size: 1.3rem; color: var(--color-text-muted); }
.pinned-miss-label { font-size: 0.72rem; color: var(--color-text-muted); font-style: italic; }

/* Guest marker cards (not on dashboard) */
.marker-card-guest { border-style: dashed; border-color: var(--color-border); opacity: 0.88; }
.marker-card-guest:hover { opacity: 1; border-color: var(--color-primary); }
.marker-add-dash-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; }
.marker-add-dash-btn:hover { background: var(--color-primary); color: white; transform: scale(1.08); }

/* Onboarding steps */
.onboarding-steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; text-align: left; max-width: 340px; }
.onboarding-step { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--color-text-secondary); }
.onboarding-step-num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: white; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.dashboard-empty-hint { margin-top: 12px; font-size: 0.8rem; color: var(--color-text-tertiary); }

/* Dashboard Category Suggestions */
.dash-cat-suggest { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-light); width: 100%; max-width: 480px; }
.dash-cat-suggest-label { font-size: 0.8rem; color: var(--color-text-tertiary); margin-bottom: 8px; font-weight: 500; }
.dash-cat-suggest-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dash-cat-quick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.78rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition-fast); white-space: nowrap; }
.dash-cat-quick-btn:hover { border-color: var(--cat-color, var(--color-primary)); color: var(--cat-color, var(--color-primary)); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 6%, var(--color-surface)); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dash-cat-quick-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-cat-quick-count { font-size: 0.68rem; opacity: 0.5; }

/* FÜRST GUIDE – EMPTY STATE CARD */
.furst-guide-card { grid-column: 1 / -1; margin-top: 28px; padding: 28px 28px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); text-align: left; margin-left: auto; margin-right: auto; width: 100%; }
.furst-guide-prominent { border: 1.5px solid rgba(38,166,154,0.2); }
.furst-guide-prominent.hidden { display: none; }
.furst-guide-prominent .furst-steps { padding: 0; }
.furst-guide-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.furst-guide-header svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.furst-guide-header h4 { font-size: 1.08rem; font-weight: 700; color: var(--color-text); margin: 0; }
.furst-guide-sub { font-size: 0.84rem; color: var(--color-text-secondary); margin: 2px 0 0; }
.furst-guide-intro { font-size: 0.87rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 18px; }

/* FÜRST GUIDE – SHARED COMPONENTS */
.furst-disclaimer { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: 16px; line-height: 1.5; opacity: 0.7; font-style: italic; }
.furst-details { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); margin-bottom: 10px; margin-top: 30px; overflow: hidden; }
.furst-details summary { padding: 13px 16px; font-size: 0.87rem; font-weight: 600; color: var(--color-text); cursor: pointer; background: var(--color-bg); transition: background var(--transition-fast); list-style: none; display: flex; align-items: center; gap: 8px; }
.furst-details summary::-webkit-details-marker { display: none; }
.furst-details summary::before { content: '\25B8'; font-size: 0.75rem; transition: transform 0.2s ease; color: var(--color-text-tertiary); flex-shrink: 0; }
.furst-details[open] summary::before { transform: rotate(90deg); }
.furst-details summary:hover { background: var(--color-primary-bg); }

.furst-steps { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.furst-step { display: flex; align-items: flex-start; gap: 12px; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.55; }
.furst-step-num { display: flex; align-items: center; justify-content: center; min-width: 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: white; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.furst-step a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.furst-step a:hover { color: var(--color-primary-dark); }

.furst-stations { padding: 14px 18px; display: flex; flex-direction: column; gap: 18px; }
.furst-station { display: flex; flex-direction: column; gap: 3px; }
.furst-station strong { font-size: 0.88rem; color: var(--color-text); }
.furst-station > span { font-size: 0.82rem; color: var(--color-text-secondary); }
.furst-station em { font-style: normal; color: var(--color-text-tertiary); }
.furst-station a { font-size: 0.8rem; color: var(--color-primary); text-decoration: none; font-weight: 500; }
.furst-station a:hover { text-decoration: underline; }

/* FÜRST TIP BANNER – HAS DATA STATE */
.furst-tip-banner { margin-bottom: 18px; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.furst-tip-banner.hidden { display: none; }
.furst-tip-summary { padding: 13px 18px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; transition: background var(--transition-fast); }
.furst-tip-summary::-webkit-details-marker { display: none; }
.furst-tip-summary:hover { background: #e2f2f1; }
.furst-tip-left { display: flex; align-items: center; gap: 10px; color: var(--color-text-secondary); font-weight: 500; }
.furst-tip-left svg { color: var(--color-primary); flex-shrink: 0; }
.furst-tip-chevron { color: var(--color-text-tertiary); transition: transform 0.2s ease; flex-shrink: 0; }
.furst-tip-banner[open] .furst-tip-chevron { transform: rotate(180deg); }
.furst-tip-body { padding: 2px 20px 20px; border-top: 1px solid var(--color-border-light); }
.furst-tip-body > p { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.65; margin: 16px 0; }

.add-data-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--transition-base); white-space: nowrap; }
.add-data-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,166,154,0.25); }
.doctor-view .add-data-btn { display: none !important; }
.doctor-view .add-data-btn-large { display: none !important; }
.doctor-view .furst-guide-card { display: none !important; }
.doctor-view .furst-tip-banner { display: none !important; }

/* Fürst help button */
.furst-step-help { padding-left: 36px; margin-top: -2px; margin-bottom: 6px; }
.furst-help-btn { background: none; border: none; color: var(--color-primary); font-size: 0.8rem; font-weight: 500; cursor: pointer; padding: 3px 0; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: rgba(38,166,154,0.5); font-family: inherit; transition: all var(--transition-fast); }
.furst-help-btn:hover { color: var(--color-primary-dark); text-decoration-style: solid; text-decoration-color: var(--color-primary-dark); }
.furst-help-btn svg { flex-shrink: 0; }

/* Fürst tips modal */
.furst-tips-modal.modal { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fadeIn 0.25s ease; }
.furst-tips-content { max-width: 1110px; width: 100%; padding: 32px 28px 24px; text-align: left; max-height: 85vh; overflow-y: auto; background: #ffffff; border-radius: var(--radius-xl); box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; color: #1a1a2e; }
.furst-tips-content .modal-close { position: absolute; top: 16px; right: 16px; z-index: 1; color: #94a3b8; }
.furst-tips-content .modal-close:hover { background: #f1f5f9; color: #475569; }
.furst-tips-content h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; color: #1a1a2e; }
.furst-tips-intro { font-size: 0.87rem; color: #64748b; line-height: 1.7; margin-bottom: 24px; }
.furst-tips-section { margin-bottom: 24px; }
.furst-tips-section h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; color: #1a1a2e; }
.furst-tips-section > p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 10px; }
.furst-tips-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.furst-tips-cat { padding: 10px 14px; background: #f8fafc; border-radius: var(--radius-md); border: 1px solid #e2e8f0; }
.furst-tips-cat strong { display: block; font-size: 0.83rem; color: #334155; margin-bottom: 2px; }
.furst-tips-cat span { font-size: 0.78rem; color: #94a3b8; line-height: 1.4; }
.furst-tips-bioage { background: #f0fdfa; border: 1px solid rgba(38,166,154,0.18); border-radius: var(--radius-lg); padding: 20px; }
.furst-tips-bioage h4 { color: #0d9488; }
.furst-tips-bioage-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.furst-tips-bioage-list span { display: inline-flex; padding: 5px 12px; background: #ffffff; color: #0d9488; font-size: 0.8rem; font-weight: 600; border-radius: 20px; border: 1px solid rgba(38,166,154,0.25); }
.furst-tips-bioage-note { font-size: 0.82rem; color: #64748b; line-height: 1.55; margin: 0; font-style: italic; }
.furst-tips-footer { font-size: 0.85rem; color: #64748b; line-height: 1.6; padding-top: 16px; border-top: 1px solid #e2e8f0; margin: 0; }

.view-modes { display: flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.view-mode-btn { display: flex; align-items: center; gap: 5px; padding: 7px 14px; background: none; border: none; border-right: 1px solid var(--color-border); font-size: 0.78rem; font-weight: 500; color: var(--color-text-tertiary); transition: all var(--transition-fast); white-space: nowrap; }
.view-mode-btn:last-child { border-right: none; }
.view-mode-btn:hover { background: var(--color-surface); color: var(--color-text-secondary); }
.view-mode-btn.active { background: var(--color-primary); color: white; }

/* View modes */
.markers-grid.view-compact { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.view-compact .marker-card { border-radius: var(--radius-md); }
.view-compact .marker-card-header { padding: 16px 18px 0; }
.view-compact .marker-info h3 { font-size: 0.92rem; }
.view-compact .marker-latest { padding: 6px 18px 15px; }
.view-compact .marker-latest-value { font-size: 1.4rem; }
.view-compact .marker-opt, .view-compact .marker-ref { font-size: 0.60rem; }
.view-compact .marker-chart-container { display: none; }
.view-compact .compact-history { display: block; }
.view-compact .marker-table-container { display: none; }
.compact-history { display: none; max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); border-top: 1px solid var(--color-border-light); }
.compact-history.expanded { max-height: 500px; overflow-y: auto; }
.compact-history-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 18px; border-bottom: 1px solid var(--color-border-light); font-size: 0.82rem; }
.compact-history-item:last-child { border-bottom: none; }
.compact-history-date { color: var(--color-text-tertiary); font-weight: 500; min-width: 90px; }
.compact-history-value { font-weight: 600; color: var(--color-text); }
.compact-history-value.patologisk { color: var(--color-danger); }
.compact-history-value.normal { color: var(--color-success); }
.compact-history-value.optimal { color: #3b82f6; }
.markers-grid.view-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.view-grid .marker-card-header { padding: 14px 14px 0; }
.view-grid .marker-info h3 { font-size: 0.88rem; }
.view-grid .marker-meta { gap: 6px; }
.view-grid .marker-unit, .view-grid .marker-ref, .view-grid .marker-opt { font-size: 0.7rem; }
.view-grid .marker-latest { padding: 4px 14px 2px; }
.view-grid .marker-latest-value { font-size: 1.3rem; }
.view-grid .marker-latest-date { font-size: 0.72rem; }
.view-grid .optimal-badge { font-size: 0.62rem; padding: 1px 5px; }
.view-grid .marker-chart-container { padding: 4px 8px 0; height: 140px; }
.view-grid .marker-table-toggle { font-size: 0.72rem; padding: 8px; }

/* ANALYSEOVERSIKT */
.analyseoversikt-section { animation: cardFadeIn 0.3s ease; }
.oversikt-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.oversikt-search-wrapper { position: relative; flex: 1; max-width: 400px; }
.oversikt-search-wrapper .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; }
#oversikt-filter { width: 100%; padding: 9px 14px 9px 38px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.85rem; color: var(--color-text); outline: none; transition: all var(--transition-base); }
#oversikt-filter:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.oversikt-count { font-size: 0.82rem; color: var(--color-text-tertiary); font-weight: 500; white-space: nowrap; }
.oversikt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding-top: 20px; }
.oversikt-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); gap: 12px; animation: cardFadeIn 0.3s ease; }
.oversikt-card:hover { border-color: rgba(38,166,154,0.3); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.oversikt-card-left { flex: 1; min-width: 0; }
.oversikt-card-name { font-size: 0.80rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.oversikt-card-sub { font-size: 0.72rem; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 8px; }
.oversikt-card-right { text-align: right; flex-shrink: 0; }
.oversikt-card-value { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.oversikt-card-value.in-range { color: var(--color-success); }
.oversikt-card-value.out-of-range { color: var(--color-danger); }
.oversikt-card-value.optimal { color: #3b82f6; }
.oversikt-card-date { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: 2px; }
.oversikt-card.on-dashboard { border-left: 3px solid var(--color-primary); }
.oversikt-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--color-text-tertiary); }

/* Toolbar right section */
.oversikt-toolbar-right { display: flex; align-items: center; gap: 12px; }

/* View Toggle */
.oversikt-view-toggle { display: flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.oversikt-view-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: none; border: none; cursor: pointer; font-size: 0.78rem; font-weight: 500; color: var(--color-text-tertiary); transition: all var(--transition-fast); white-space: nowrap; }
.oversikt-view-btn:hover { color: var(--color-text); background: var(--color-surface); }
.oversikt-view-btn.active { background: var(--color-surface); color: var(--color-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.oversikt-view-btn svg { flex-shrink: 0; }
.oversikt-sort-arrow { transition: transform 0.2s ease; margin-left: -2px; }
.oversikt-view-btn.sort-desc .oversikt-sort-arrow { transform: rotate(180deg); }
.oversikt-view-label { display: inline; }

/* Category Chips Bar */
.oversikt-category-chips { margin-bottom: 16px; animation: cardFadeIn 0.25s ease; }
.oversikt-category-chips.hidden { display: none; }
.cat-mobile-toggle { display: none; }
.cat-chips-grid { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 4px; }
.category-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; font-size: 0.76rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition-fast); white-space: nowrap; }
.category-chip:hover { border-color: var(--cat-color, var(--color-primary)); color: var(--cat-color, var(--color-primary)); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 6%, var(--color-surface)); }
.category-chip.active { border-color: var(--cat-color, var(--color-primary)); color: var(--cat-color, var(--color-primary)); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 10%, var(--color-surface)); font-weight: 600; }
.category-chip-icon { display: flex; align-items: center; color: inherit; }
.category-chip-icon svg { width: 13px; height: 13px; }
.category-chip-label { line-height: 1; }
.category-chip-count { font-size: 0.68rem; opacity: 0.6; }

/* Category Grouped View */
.oversikt-category-group { margin-bottom: 24px; animation: cardFadeIn 0.3s ease; }
.oversikt-category-header { margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--cat-color, var(--color-border)); }
.oversikt-category-title { display: flex; align-items: center; gap: 8px; }
.oversikt-category-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 12%, var(--color-surface)); color: var(--cat-color, var(--color-primary)); }
.oversikt-category-icon svg { width: 16px; height: 16px; }
.oversikt-category-name { font-size: 0.85rem; font-weight: 700; color: var(--color-text); }
.oversikt-category-count { font-size: 0.72rem; font-weight: 500; color: var(--color-text-tertiary); background: var(--color-bg); padding: 1px 7px; border-radius: 999px; }
.oversikt-category-desc { font-size: 0.76rem; color: var(--color-text-tertiary); margin: 2px 0 0 36px; line-height: 1.3; min-height: 35px; }
.oversikt-category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* Dashboard Category Presets */
.dtab-category-presets { margin-top: 0; }
.dtab-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dtab-cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.75rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition-fast); white-space: nowrap; }
.dtab-cat-chip:hover { border-color: var(--cat-color, var(--color-primary)); color: var(--cat-color, var(--color-primary)); }
.dtab-cat-chip.active { border-color: var(--cat-color, var(--color-primary)); color: white; background: var(--cat-color, var(--color-primary)); }
.dtab-cat-chip-icon { display: flex; align-items: center; }
.dtab-cat-chip-icon svg { width: 13px; height: 13px; }
.dtab-cat-chip-count { font-size: 0.67rem; opacity: 0.55; }

/* DETAIL MODAL */
/* Detail Category Tags (in meta line) */
.detail-category-tags { display: inline-flex; gap: 4px; margin-left: auto; }
.detail-category-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 500; color: var(--cat-color, var(--color-text-secondary)); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 8%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--cat-color, var(--color-primary)) 20%, transparent); white-space: nowrap; }
.detail-category-tag svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Dashboard card category badge */
.marker-cat-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 0.65rem; font-weight: 500; color: var(--cat-color, var(--color-text-tertiary)); background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 7%, var(--color-surface)); margin-left: auto; white-space: nowrap; align-self: center; }
.marker-cat-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

.detail-dialog { position: relative; width: 100%; max-width: 800px; max-height: 92vh; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.detail-header { display: flex; flex-direction: column; padding: 0; border-bottom: 1px solid var(--color-border); }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 0; gap: 16px; }
.detail-title-row h2 { flex: 1; min-width: 0; }
.detail-header h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0; }
.detail-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 28px 18px; }
#detail-mobile-cta { display: none; }
.detail-opt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(59,130,246,0.08); border-radius: 999px; color: #3b82f6; font-size: 0.78rem; font-weight: 500; }
.detail-add-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; transition: all var(--transition-base); white-space: nowrap; }
.detail-add-btn:hover { background: var(--color-primary-dark); }
.detail-add-btn.added { background: var(--color-success); pointer-events: none; }
.detail-body { padding: 24px 28px; overflow-y: auto; flex: 1; }
.detail-latest-row { display: flex; gap: 32px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-light); }
.detail-latest-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-latest-value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.detail-latest-value.in-range { color: var(--color-success); }
.detail-latest-value.out-of-range { color: var(--color-danger); }
.detail-latest-value.optimal { color: #3b82f6; }
.detail-latest-block:has(#detail-optimal-badge:not([style*="display: none"])) {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.detail-latest-block:has(#detail-optimal-badge:not([style*="display: none"])) .detail-label {
    flex-basis: 100%;
}
#detail-optimal-badge { align-self: center; }
.detail-latest-date { font-size: 1rem; font-weight: 600; }
.detail-latest-count { font-size: 1rem; font-weight: 600; }
.detail-chart-wrapper { height: 280px; margin-bottom: 20px; }
.detail-chart-wrapper canvas { width: 100% !important; height: 100% !important; }
#detail-table-container { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; max-height: 320px; overflow-y: auto; }

/* MINE SIDER */
.mine-sider-section { animation: cardFadeIn 0.3s ease; }
.page-title { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; color: var(--color-text); }
.page-title svg { color: var(--color-primary); }
.ms-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); }
.ms-card:hover { box-shadow: var(--shadow-md); }
.ms-card-header { padding: 18px 24px; border-bottom: 1px solid var(--color-border-light); }
.ms-card-header h3 { font-size: 0.95rem; font-weight: 600; }
.ms-card-body { padding: 24px; }
.ms-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ms-info-item { display: flex; flex-direction: column; gap: 3px; }
.ms-label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.ms-value { font-size: 0.92rem; font-weight: 600; color: var(--color-text); }
.ms-text { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.6; }
.ms-bankid-linked {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-success, #16a34a);
}

/* Mine sider: BankID link prompt card */
.ms-bankid-card {
    margin-top: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)) 0%, var(--color-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border-light));
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.ms-bankid-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.ms-bankid-card-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}
.ms-bankid-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-primary);
    box-shadow: 0 4px 14px rgba(38,166,154,0.28);
    flex-shrink: 0;
}
.ms-bankid-card-icon img {
    width: 24px; height: 24px; display: block;
}
.ms-bankid-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ms-bankid-card-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}
.ms-bankid-card-text span {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.ms-bankid-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(38,166,154,0.22);
    position: relative;
    min-height: 48px;
}
.ms-bankid-link-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(38,166,154,0.32);
}
.ms-bankid-link-btn:active { transform: translateY(0); }
.ms-bankid-link-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.ms-bankid-link-btn .spinner-sm {
    width: 16px; height: 16px;
    border-top-color: #fff;
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

@media (max-width: 640px) {
    .ms-bankid-card { padding: 16px; gap: 14px; }
    .ms-bankid-card-icon { width: 40px; height: 40px; border-radius: 10px; }
    .ms-bankid-card-icon img { width: 22px; height: 22px; }
    .ms-bankid-card-text strong { font-size: 0.95rem; }
    .ms-bankid-card-text span { font-size: 0.83rem; }
}
.ms-loading { display: flex; justify-content: center; padding: 24px; }
.ms-status { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--radius-md); }
.ms-status strong { font-size: 0.95rem; display: block; margin-bottom: 2px; }
.ms-status p { font-size: 0.85rem; margin: 0; color: var(--color-text-secondary); }
.ms-status svg { flex-shrink: 0; margin-top: 2px; }
.ms-status-active { background: var(--color-success-bg); border: 1px solid var(--color-success-border); }
.ms-status-active svg { color: var(--color-success); }
.ms-status-inactive { background: var(--color-danger-bg); border: 1px solid rgba(239,68,68,0.2); }
.ms-status-inactive svg { color: var(--color-danger); }
.ms-status-admin { background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.2); }
.ms-status-admin svg { color: var(--color-primary); }
.ms-status-trial { background: linear-gradient(135deg, #e0f2f1, #f0faf9); border: 1px solid rgba(38,166,154,0.3); }
.ms-status-trial svg { color: #26a69a; }
.ms-cancel-note { font-size: 0.85rem; color: var(--color-warning); font-weight: 500; margin-top: 12px; padding: 12px 16px; background: var(--color-warning-bg); border-radius: var(--radius-md); }
.ms-price-highlight { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 16px; padding: 14px 18px; background: linear-gradient(135deg, var(--color-primary-bg), #e0f5f3); border: 1px solid rgba(38,166,154,0.25); border-radius: var(--radius-md); }
.ms-price-amount { font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dark); letter-spacing: -0.02em; line-height: 1; }
.ms-price-period { font-size: 0.95rem; font-weight: 500; color: var(--color-text-secondary); }
.ms-price-note { width: 100%; font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px; }
.ms-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ms-btn { display: inline-flex; align-items: center; height: 45px; gap: 8px; padding: 10px 20px; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; transition: all var(--transition-base); cursor: pointer; border: none; }
.ms-btn-primary { background: var(--color-primary); color: white; }
.ms-btn-primary:hover { background: var(--color-primary-dark); }
.ms-btn-outline { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.ms-btn-outline:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.ms-btn-danger { background: var(--color-surface); color: var(--color-danger); border: 1px solid rgba(239,68,68,0.3); }
.ms-btn-danger:hover { background: var(--color-danger-bg); border-color: var(--color-danger); }
.ms-btn-cancel { color: var(--color-danger); border-color: rgba(239,68,68,0.3); }
.ms-btn-cancel:hover { background: var(--color-danger-bg); border-color: var(--color-danger); }
.ms-btn-reactivate { background: var(--color-primary); color: white; border: none; gap: 8px; }
.ms-btn-reactivate:hover { background: var(--color-primary-dark, #1e8e82); box-shadow: 0 2px 8px rgba(38,166,154,0.3); }
.ms-btn-reactivate:disabled { opacity: 0.7; cursor: not-allowed; }
.ms-btn-reactivate svg { flex-shrink: 0; }
.ms-btn-reactivate .spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.ms-btn-sm { padding: 5px 12px; font-size: 0.78rem; text-decoration: none; background: var(--color-primary-bg); color: var(--color-primary); border-radius: var(--radius-sm); }
.ms-btn-sm:hover { background: var(--color-primary); color: white; }
.ms-invoice-list { display: flex; flex-direction: column; gap: 0; }
.ms-invoice-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.88rem; gap: 12px; flex-wrap: wrap; }
.ms-invoice-item:last-child { border-bottom: none; }
.ms-invoice-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-invoice-date { font-size: 0.9rem; }
.ms-invoice-desc { font-size: 0.82rem; color: var(--color-text-secondary); }
.ms-invoice-number { font-size: 0.75rem; color: var(--color-text-tertiary); }
.ms-invoice-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ms-invoice-amount { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.ms-invoice-link { flex-shrink: 0; }

/* BETALINGSMETODE (kort/Vipps i abonnementskortet) */
.ms-paymethod { margin-top: 16px; padding: 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ms-paymethod:empty { display: none; padding: 0; margin: 0; border: none; }
.ms-paymethod-loading { display: flex; justify-content: center; padding: 6px; }
.ms-paymethod-head { margin-bottom: 10px; }
.ms-paymethod-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); }
.ms-paymethod-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ms-paymethod-method { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ms-paymethod-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); flex-shrink: 0; }
.ms-paymethod-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-paymethod-text strong { font-size: 0.9rem; color: var(--color-text); }
.ms-paymethod-text span { font-size: 0.78rem; color: var(--color-text-secondary); }
.ms-paymethod-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-paymethod-actions .ms-btn { width: auto; }
.ms-paymethod-note { font-size: 0.8rem; color: var(--color-text-secondary); margin: 0; }


.ms-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-pay-item { padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.ms-pay-item:first-child { padding-top: 0; }
.ms-pay-item:last-child { border-bottom: none; padding-bottom: 0; }
.ms-pay-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ms-pay-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-pay-desc { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.ms-pay-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-pay-date { font-size: 0.78rem; color: var(--color-text-secondary); }
.ms-pay-number { font-size: 0.72rem; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.ms-pay-prov { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.02em; }
.ms-pay-prov-vipps { background: #ff5b24; color: #fff; }
.ms-pay-prov-stripe { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.ms-pay-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ms-pay-amount { font-weight: 700; font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-pay-amount-credit { color: var(--color-success); }
.ms-pay-status { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.02em; white-space: nowrap; }
.ms-pay-paid { background: var(--color-success-bg); color: var(--color-success); }
.ms-pay-pending { background: var(--color-warning-bg); color: var(--color-warning); }
.ms-pay-refunded { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.ms-pay-free { background: var(--color-bg); color: var(--color-text-tertiary); border: 1px solid var(--color-border); }
.ms-pay-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.ms-pay-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.ms-pay-link svg { flex-shrink: 0; }

/* INTEGRATIONS (Tilkoblede enheter) */
.intg-grid { display: flex; flex-direction: column; gap: 12px; }
.intg-card { display: flex; gap: 16px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--transition-base); background: var(--color-surface); }
.intg-card:hover { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.intg-card-connected { border-color: rgba(16,185,129,0.25); background: linear-gradient(135deg, rgba(16,185,129,0.03), transparent); }
.intg-card-connected:hover { border-color: rgba(16,185,129,0.4); }
.intg-card-soon { opacity: 0.55; }
.intg-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-bg); border-radius: var(--radius-md); color: var(--color-primary); flex-shrink: 0; }
.intg-card-connected .intg-card-icon { background: var(--color-success-bg); color: var(--color-success); }
.intg-card-soon .intg-card-icon { background: var(--color-bg); color: var(--color-text-tertiary); }
.intg-card-body { flex: 1; min-width: 0; }
.intg-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.intg-card-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.intg-card-desc { font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 10px; }

.intg-card-device { font-size: 0.78rem; font-weight: 600; color: var(--color-text); margin: -4px 0 8px; letter-spacing: 0.01em; }
.intg-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.02em; }
.intg-status-active { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.intg-status-inactive { background: var(--color-bg); color: var(--color-text-tertiary); border: 1px solid var(--color-border); }
.intg-status-soon { background: var(--color-bg); color: var(--color-text-tertiary); border: 1px solid var(--color-border); font-style: italic; }
.intg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.intg-disconnect-btn { background: var(--color-surface) !important; color: var(--color-text-tertiary) !important; border: 1px solid var(--color-border) !important; }
.intg-disconnect-btn:hover { color: var(--color-danger) !important; border-color: rgba(239,68,68,0.3) !important; background: var(--color-danger-bg) !important; }
.intg-sync-info { font-size: 0.73rem; color: var(--color-text-tertiary); }

/* WEARABLE DATA TILES */
.wd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.wd-tile { text-align: center; padding: 18px 12px 14px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); transition: all var(--transition-base); container-type: inline-size; min-width: 0; }
.wd-tile:hover { border-color: var(--color-border); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.wd-tile-emoji { font-size: 1.4rem; margin-bottom: 6px; line-height: 1; }
.wd-tile-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.wd-tile-value.wd-text-val { font-size: clamp(0.95rem, 9cqi, 1.35rem); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.wd-tile-unit { font-size: 0.65rem; font-weight: 500; opacity: 0.7; margin-left: 1px; }
.wd-tile-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.wd-tile-date { font-size: 0.68rem; color: var(--color-text-tertiary); margin-top: 4px; }
.wd-sync-info { font-size: 0.78rem; color: var(--color-text-tertiary); margin-top: 16px; text-align: right; }

@media (max-width: 600px) {
    .intg-card { padding: 14px; gap: 12px; }
    .intg-card-icon { width: 38px; height: 38px; }
    .intg-card-icon svg { width: 18px; height: 18px; }
    .wd-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .wd-tile { padding: 14px 8px 10px; }
    .wd-tile-value { font-size: 1.25rem; }
    .wd-tile-value.wd-text-val { font-size: clamp(0.8rem, 9cqi, 1.1rem); }
    .wd-tile-emoji { font-size: 1.2rem; }
}

/* WEARABLES PAGE */
.wb-coming-soon { text-align: center; padding: 60px 24px; animation: cardFadeIn 0.4s ease; }
.wb-coming-icon { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; background: var(--color-primary-bg); border-radius: 50%; margin-bottom: 24px; color: var(--color-primary); }
.wb-coming-soon h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.02em; }
.wb-coming-soon p { font-size: 0.95rem; color: var(--color-text-secondary); max-width: 500px; margin: 0 auto 24px; line-height: 1.7; }
.wb-coming-sub { font-size: 0.85rem !important; color: var(--color-text-tertiary) !important; margin-top: 8px !important; }
.wb-coming-providers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.wb-coming-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 40px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-secondary); box-shadow: var(--shadow-sm); }
.wb-coming-chip svg { color: var(--color-primary); }
/* Collapsible devices */
.wb-devices-collapsed .wb-devices-body { display: none; }
.wb-devices-collapsed .wb-devices-chevron { transform: rotate(-90deg); }
.wb-devices-chevron { transition: transform var(--transition-base); color: var(--color-text-tertiary); flex-shrink: 0; }
.wb-devices-toggle { display: flex; align-items: center; justify-content: space-between; }
.wb-devices-toggle:hover { background: var(--color-surface-hover); }

/* Dashboard card */
.wb-dash-card .ms-card-header { display: flex; align-items: center; justify-content: space-between; }
.wb-header-actions { display: flex; align-items: center; gap: 8px; }
.wb-sync-stamp { font-size: 0.72rem; color: var(--color-text-tertiary); font-weight: 400; white-space: nowrap; }
.wb-refresh-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.wb-refresh-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.wb-refresh-btn.spinning svg { animation: wbSpin 0.8s linear infinite; }
.wb-refresh-btn:disabled { opacity: 0.5; cursor: default; }
@keyframes wbSpin { to { transform: rotate(360deg); } }
.wb-stale-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 16px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.15); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--color-primary-dark); line-height: 1.5; animation: cardFadeIn 0.4s ease; }
.wb-stale-tip svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.wb-stale-tip span { flex: 1; }
.wb-stale-tip-close { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: all var(--transition-fast); }
.wb-stale-tip-close:hover { background: rgba(0,0,0,0.06); color: var(--color-text); }

/* AI Daily Insight Card */
.wb-insight-card { background: linear-gradient(135deg, #f0faf9, #e8f5f3); border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px; animation: cardFadeIn 0.4s ease; }
.wb-insight-header { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.wb-insight-header svg { color: var(--color-primary); flex-shrink: 0; }
.wb-insight-text { font-size: 0.92rem; line-height: 1.7; color: var(--color-text); }
.wb-insight-loading { display: flex; align-items: center; gap: 8px; color: var(--color-text-tertiary); font-size: 0.85rem; }
.wb-insight-refreshing { display: flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); font-size: 0.75rem; margin-top: 6px; }
.wb-insight-muted { color: var(--color-text-tertiary); font-style: italic; }
.wb-insight-disclaimer { margin-top: 10px; font-size: 0.65rem; color: var(--color-text-tertiary); line-height: 1.4; font-style: italic; }

/* Inline source select (Personal Info inline edit) */
.inline-source-select { display: block; width: 100%; margin-top: 6px; padding: 5px 8px; font-size: 0.78rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.inline-source-select:focus { border-color: var(--color-primary); outline: none; }

/* Field sources card (Wearables page) */
.wb-field-desc { font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 16px; line-height: 1.5; }
.wb-field-list { display: flex; flex-direction: column; gap: 10px; }
.wb-field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); transition: all var(--transition-base); }
.wb-field-row:hover { border-color: var(--color-border); }
.wb-field-row-synced { background: linear-gradient(135deg, rgba(16,185,129,0.04), transparent); border-color: rgba(16,185,129,0.2); }
.wb-field-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-field-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.wb-field-value { font-size: 0.75rem; color: var(--color-text-tertiary); }
.wb-field-synced-badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 600; color: var(--color-success); background: var(--color-success-bg); padding: 1px 8px; border-radius: 12px; width: fit-content; }
/* Field sources collapsed */
.wb-fields-collapsed .wb-fields-body { display: none; }
.wb-fields-collapsed .wb-fields-chevron { transform: rotate(-90deg); }
.wb-fields-chevron { transition: transform var(--transition-base); color: var(--color-text-tertiary); flex-shrink: 0; }
.wb-fields-toggle { display: flex; align-items: center; justify-content: space-between; }
.wb-fields-toggle:hover { background: var(--color-surface-hover); }

/* Pill toggles */
.wb-field-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-pill { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); user-select: none; white-space: nowrap; }
.wb-pill input { display: none; }
.wb-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wb-pill-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.wb-pill-active:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

/* Field link modal */
.wb-link-modal-content { max-width: 520px; }
.wb-link-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wb-link-modal-header svg { color: var(--color-primary); flex-shrink: 0; }
.wb-link-modal-header h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.wb-link-modal-desc { font-size: 0.88rem; color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.5; }
.wb-link-modal-list { margin-bottom: 24px; }
.wb-link-modal-list .wb-field-row { margin-bottom: 12px; }
.wb-link-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 500px) {
    .wb-field-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .wb-field-pills { gap: 4px; }
    .wb-pill { padding: 6px 10px; font-size: 0.72rem; }
    .wb-link-modal-actions { flex-direction: column; }
    .wb-link-modal-actions .ms-btn { width: 100%; justify-content: center; }
}
.wb-auto-sync-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 12px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--color-primary); font-weight: 500; animation: cardFadeIn 0.3s ease; }


.wb-onb-card { max-width: 620px; }
.wb-onb-loading { text-align: center; padding: 40px 24px 32px; }
.wb-onb-loading-title { font-weight: 700; color: var(--color-text); font-size: 1.05rem; margin-top: 12px; }
.wb-onb-loading-sub { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; }

.wb-onb-hero {
    padding: 28px 28px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(38,166,154,0.06), transparent);
}
.wb-onb-hero-icon {
    width: 58px; height: 58px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(38,166,154,0.5);
}
.wb-onb-title {
    font-size: 1.25rem; font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    line-height: 1.3;
}
.wb-onb-sub {
    font-size: 0.9rem; color: var(--color-text-secondary);
    line-height: 1.55; margin: 0;
}

.wb-onb-body {
    padding: 16px 24px 8px;
    overflow-y: auto;
    flex: 1;
}
.wb-onb-fields { display: flex; flex-direction: column; gap: 14px; }

.wb-onb-field {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: border-color var(--transition-fast);
}
.wb-onb-field:hover { border-color: var(--color-border); }

.wb-onb-field-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.wb-onb-field-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
}
.wb-onb-field-title strong {
    font-size: 1.02rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.01em;
}

.wb-onb-row {
    display: flex; align-items: stretch; gap: 10px;
    padding: 12px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    margin-bottom: 12px;
}
.wb-onb-compare { justify-content: space-between; }

.wb-onb-source-col { flex: 1; min-width: 0; }
.wb-onb-source-label {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-text-tertiary);
    margin-bottom: 4px;
}
.wb-onb-source-name {
    font-size: 0.88rem; font-weight: 600; color: var(--color-text);
    margin-bottom: 2px;
}
.wb-onb-source-value {
    font-size: 1.1rem; font-weight: 700; color: var(--color-primary);
    letter-spacing: -0.01em;
}
.wb-onb-source-current .wb-onb-source-value { color: var(--color-text-secondary); }
.wb-onb-source-new .wb-onb-source-value { color: var(--color-primary); }
.wb-onb-source-divider {
    display: flex; align-items: center;
    color: var(--color-text-tertiary);
}

.wb-onb-choice { display: flex; flex-direction: column; gap: 8px; }
.wb-onb-opt {
    display: flex; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--color-surface);
}
.wb-onb-opt:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}
.wb-onb-opt input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--color-border);
    background: transparent;
    flex-shrink: 0; margin-top: 2px;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}
.wb-onb-opt input[type="radio"]:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.wb-onb-opt input[type="radio"]:checked::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
}
.wb-onb-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wb-onb-opt-title {
    font-size: 0.9rem; font-weight: 600; color: var(--color-text);
    line-height: 1.35;
}
.wb-onb-opt-sub {
    font-size: 0.78rem; color: var(--color-text-secondary);
    line-height: 1.45;
}
.wb-onb-opt-active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.wb-onb-linked-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--color-success-bg);
    border-radius: var(--radius-md);
    font-size: 0.82rem; color: var(--color-success);
    line-height: 1.5;
}
.wb-onb-linked-note svg { flex-shrink: 0; margin-top: 1px; }

.wb-onb-footer {
    padding: 14px 24px 20px;
    display: flex; gap: 10px; justify-content: flex-end;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.wb-onb-footer .ob-btn-primary {
    min-width: 200px;
}
.wb-onb-save-label { display: inline-flex; align-items: center; gap: 8px; }


@media (max-width: 640px) {
    .wb-onb-card { max-width: 100%; }
    .wb-onb-hero { padding: 24px 18px 10px; }
    .wb-onb-hero-icon { width: 52px; height: 52px; margin-bottom: 12px; }
    .wb-onb-title { font-size: 1.1rem; }
    .wb-onb-sub { font-size: 0.85rem; }
    .wb-onb-body { padding: 12px 16px 8px; }
    .wb-onb-field { padding: 14px; }
    .wb-onb-field-icon { width: 36px; height: 36px; }
    .wb-onb-compare { flex-direction: column; gap: 8px; }
    .wb-onb-source-divider { transform: rotate(90deg); align-self: center; }
    .wb-onb-footer {
        position: sticky; bottom: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        flex-direction: column-reverse;
    }
    .wb-onb-footer .ob-btn { width: 100%; min-width: 0; justify-content: center; }
}

/* Score ring tiles (Readiness, Sleep, Activity) */
.wb-scores { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.wb-score-tile { flex: 1; min-width: 130px; text-align: center; padding: 20px 12px 16px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); transition: all var(--transition-base); }
.wb-score-tile:hover { border-color: var(--color-border); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.wb-score-ring { position: relative; width: 90px; height: 90px; margin: 0 auto 10px; }
.wb-score-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.wb-score-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.wb-score-feedback { font-size: 0.72rem; font-weight: 600; margin-bottom: 4px; }
.wb-score-trend { font-size: 0.68rem; font-weight: 600; margin-bottom: 4px; }
.wb-score-trend.up { color: var(--color-success); }
.wb-score-trend.down { color: var(--color-danger); }
.wb-score-trend.stable { color: var(--color-text-tertiary); }
.wb-score-source { font-size: 0.62rem; color: var(--color-text-tertiary); font-weight: 500; }
.wb-score-date { font-size: 0.62rem; color: var(--color-text-tertiary); }

/* Section labels */
.wb-section-label { font-size: 0.99rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; margin-top: 25px; }

/* Data tile source badge */
.wd-tile-source { font-size: 0.6rem; color: var(--color-text-tertiary); margin-top: 2px; }
.wd-tile.has-sparkline { cursor: pointer; }
.wb-sparkline { width: 100%; height: 30px; margin-top: 6px; opacity: 0.85; }
.wb-sparkline canvas { width: 100% !important; height: 30px !important; }

/* Wearable Tabs */
.wb-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--color-border-light); padding-bottom: 0; }
.wb-tab { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.wb-tab:hover { color: var(--color-text-secondary); }
.wb-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.wb-tab svg { flex-shrink: 0; }
.wb-tab-content { display: none; animation: cardFadeIn 0.3s ease; }
.wb-tab-content.active { display: block; }

/* Trends Section */
.wb-trends-section { animation: cardFadeIn 0.4s ease; }
.wb-trends-loading { display: flex; align-items: center; gap: 8px; color: var(--color-text-tertiary); font-size: 0.85rem; padding: 20px 0; }
.wb-trends-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.wb-trends-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.wb-trends-title svg { color: var(--color-primary); }
.wb-period-toggle { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.wb-period-btn { padding: 7px 16px; font-size: 0.78rem; font-weight: 600; border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.wb-period-btn:not(:last-child) { border-right: 1px solid var(--color-border-light); }
.wb-period-btn.active { background: var(--color-primary); color: white; }
.wb-period-btn:not(.active):hover { background: var(--color-surface-hover); }


.wb-avg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    min-height: 34px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
}
.wb-avg-toggle svg { flex-shrink: 0; opacity: 0.75; transition: opacity var(--transition-fast); }
.wb-avg-toggle:hover { background: var(--color-surface-hover); }
.wb-avg-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.wb-avg-toggle[data-active="true"] {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.wb-avg-toggle[data-active="true"] svg { opacity: 1; }
.wb-avg-toggle[data-active="true"]:hover {
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.10);
}
.wb-avg-toggle:active { transform: translateY(1px); }
.wb-trend-category { margin-bottom: 24px; }
.wb-trend-cat-title { font-size: 0.75rem; font-weight: 700; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.wb-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb-trend-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 16px; transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.wb-trend-card:hover { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.wb-trend-card.highlighted { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.12); }


.wb-trend-card-selected {
    border: 1.5px solid var(--color-primary);
    box-shadow:
        0 0 0 4px rgba(38, 166, 154, 0.08),
        0 8px 22px -10px rgba(38, 166, 154, 0.28);
    position: relative;
    z-index: 1;
}


.wb-trend-card-flash {
    animation: wb-trend-flash 1.5s ease;
}
@keyframes wb-trend-flash {
    0%   { box-shadow: 0 0 0 0 rgba(38,166,154,0); }
    25%  { box-shadow: 0 0 0 8px rgba(38,166,154,0.30); }
    100% { box-shadow: 0 0 0 4px rgba(38,166,154,0.08), 0 8px 22px -10px rgba(38,166,154,0.28); }
}


.wb-tile-clickable {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(38,166,154,0.08);
    position: relative;
}
.wb-tile-clickable:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px -4px rgba(38,166,154,0.18) !important;
    transform: translateY(-2px);
}
.wb-tile-clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -2px rgba(38,166,154,0.15) !important;
}
.wb-tile-clickable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.wb-tile-clickable::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 14px; height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326a69a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 6 13.5 15.5 8.5 10.5 1 18'/><polyline points='17 6 23 6 23 12'/></svg>") no-repeat center / contain;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
.wb-tile-clickable:hover::after,
.wb-tile-clickable:focus-visible::after {
    opacity: 0.7;
}
.wb-trend-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; row-gap: 4px; }
.wb-trend-card-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text); }
.wb-trend-card-latest { font-size: 0.78rem; font-weight: 600; color: var(--color-primary); margin-left: auto; }

.wb-trend-card-source { font-size: 0.66rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border-light); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.wb-trend-card-source[data-provider="garmin"] { color: var(--color-text-secondary); background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.12); }
.wb-trend-chart { position: relative; height: 160px; }
.wb-trend-chart canvas { width: 100% !important; height: 160px !important; }

.wb-trends-empty { text-align: center; padding: 48px 24px; }
.wb-trends-empty-icon { color: var(--color-text-tertiary); opacity: 0.4; margin-bottom: 16px; }
.wb-trends-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--color-text-secondary); margin: 0 0 8px; }
.wb-trends-empty-desc { font-size: 0.82rem; color: var(--color-text-tertiary); line-height: 1.6; margin: 0 auto; max-width: 380px; }
.wb-trend-empty { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--color-text-tertiary); font-size: 0.82rem; }

/* Empty dashboard */
.wb-empty-dash { text-align: center; padding: 48px 24px; color: var(--color-text-tertiary); }
.wb-empty-dash svg { margin-bottom: 16px; opacity: 0.4; }
.wb-empty-dash h3 { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
.wb-empty-dash p { font-size: 0.88rem; max-width: 400px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 600px) {
    .wb-coming-soon { padding: 40px 16px; }
    .wb-coming-soon h2 { font-size: 1.2rem; }
    .wb-coming-icon { width: 72px; height: 72px; }
    .wb-coming-icon svg { width: 44px; height: 44px; }
    .wb-scores { gap: 10px; }
    .wb-score-tile { min-width: 100px; padding: 16px 8px 12px; }
    .wb-score-ring { width: 76px; height: 76px; }
    .wb-score-ring svg { width: 76px; height: 76px; }
    .wb-score-number { font-size: 1.3rem; }
    .wb-tabs { gap: 0; }
    .wb-tab { padding: 10px 14px; font-size: 0.82rem; flex: 1; justify-content: center; }
    .wb-trend-grid { grid-template-columns: 1fr; gap: 12px; }
    .wb-trend-card { padding: 14px 12px; }
    .wb-trend-chart { height: 140px; }
    .wb-trend-chart canvas { height: 140px !important; }
    .wb-trends-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 10px; }
    .wb-period-toggle { flex: 0 0 auto; }
    .wb-period-btn { padding: 8px 14px; min-height: 40px; }
    
    .wb-avg-toggle { min-height: 40px; padding: 8px 14px; }
}


@media (max-width: 360px) {
    .wb-avg-toggle .wb-avg-toggle-label { display: none; }
    .wb-avg-toggle { padding: 8px 10px; }
}

/* WEARABLE FIELD SYNC (locked fields) */
.info-item-synced { background: linear-gradient(135deg, rgba(38,166,154,0.04), transparent); border-left: 3px solid var(--color-primary); padding-left: 12px; }
.wfs-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-bg); padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; cursor: help; white-space: nowrap; }
.wfs-badge svg { flex-shrink: 0; }
.edit-grunn-synced { position: relative; background: linear-gradient(135deg, rgba(38,166,154,0.04), transparent); border: 1px solid rgba(38,166,154,0.15); border-radius: var(--radius-sm); padding: 10px; }
.edit-grunn-synced .edit-grunn-value { opacity: 0.6; cursor: not-allowed; background: var(--color-bg); }
.wfs-source-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wfs-source-select { font-size: 0.78rem; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; min-width: 140px; }
.wfs-source-select:focus { border-color: var(--color-primary); outline: none; }
.wfs-synced-hint { font-size: 0.7rem; color: var(--color-primary); font-weight: 500; white-space: nowrap; }

/* Delete account confirmation */
.delete-confirm-box { margin-top: 20px; padding: 20px; background: var(--color-danger-bg); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-md); animation: cardFadeIn 0.3s ease; }
.delete-confirm-warning { display: flex; align-items: flex-start; gap: 14px; }
.delete-confirm-warning svg { flex-shrink: 0; color: var(--color-danger); margin-top: 2px; }
.delete-confirm-warning strong { display: block; font-size: 0.95rem; color: var(--color-danger); margin-bottom: 4px; }
.delete-confirm-warning p { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; }

/* DOCTOR VIEW BANNER */
.doctor-view-banner { background: linear-gradient(135deg, var(--color-primary-bg), #b2dfdb); border-bottom: 1px solid #80cbc4; }
.doctor-banner-content { max-width: var(--max-width); margin: 0 auto; padding: 12px 0px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--color-primary-dark); }
.dbc-left { display: flex; align-items: center; gap: 10px; }
.dbc-left svg { flex-shrink: 0; color: var(--color-primary); }
.dbc-left strong { font-size: 0.88rem; white-space: nowrap; }
.dbc-title-short { display: none; }
.dbc-right { display: flex; align-items: center; gap: 12px; text-align: right; }
.dbc-patient-name { font-weight: 700; font-size: 0.9rem; color: var(--color-primary-dark); }
.dbc-patient-dob { font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 500; padding: 2px 10px; background: rgba(255,255,255,0.5); border-radius: var(--radius-sm); white-space: nowrap; }
.dbc-patient-wrap { position: relative; display: flex; align-items: center; gap: 12px; cursor: default; }

.dbc-popover { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08); border: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1000; pointer-events: none; }
.dbc-popover::before { content: ''; position: absolute; top: -14px; right: 0; width: 100%; height: 16px; background: transparent; }
.dbc-patient-wrap:hover .dbc-popover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.dbc-popover-arrow { position: absolute; top: -6px; right: 24px; width: 12px; height: 12px; background: var(--color-surface); border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); transform: rotate(45deg); }
.dbc-popover-body { padding: 18px 20px; }
.dbc-popover-intro { font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 16px; }
.dbc-popover-contact h4 { font-size: 0.82rem; font-weight: 700; color: var(--color-text); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.dbc-contact-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: var(--radius-md); background: var(--color-bg); text-decoration: none; color: var(--color-text); font-size: 0.84rem; font-weight: 500; transition: all var(--transition-fast); }
.dbc-contact-row:last-child { margin-bottom: 0; }
.dbc-contact-row:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.dbc-contact-row svg { color: var(--color-text-muted); flex-shrink: 0; transition: color var(--transition-fast); }
.dbc-contact-row:hover svg { color: var(--color-primary); }

/* Doctor patient modal (mobile) */
.dbc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; animation: fadeIn 0.15s ease; }
.dbc-modal { position: relative; width: 100%; max-width: 340px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 28px 24px; animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; }
.dbc-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.4rem; color: var(--color-text-muted); cursor: pointer; line-height: 1; padding: 4px; }
.dbc-modal-name { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.dbc-modal-dob { font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 14px; }
.dbc-modal-intro { font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 18px; }
.dbc-modal-contact-section h4 { font-size: 0.8rem; font-weight: 700; color: var(--color-text); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.dbc-modal .dbc-contact-row { justify-content: center; }

.role-badge.doctor { background: rgba(38,166,154,0.12); color: var(--color-primary); }


.doctor-view .info-edit-btn { display: none !important; }
.doctor-view .item-actions { display: none !important; }

/* SHARING SECTION (Mine Sider) */
.sharing-section { display: flex; flex-direction: column; gap: 0; }
.sharing-master-toggle { padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border-light); }
.sharing-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sharing-toggle-info strong { font-size: 0.92rem; display: block; margin-bottom: 3px; color: var(--color-text); }
.sharing-toggle-info p { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-border); border-radius: 26px; transition: all var(--transition-base); }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: all var(--transition-base); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toggle-switch input:checked + .toggle-slider { background: var(--color-success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

/* Collapsible sharing card */
.ms-card-collapsible > .ms-card-header { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.ms-card-collapsible > .ms-card-header h3 { flex: 1; min-width: 0; }
.ms-card-chevron { transition: transform var(--transition-base); color: var(--color-text-tertiary); flex-shrink: 0; }
.ms-card-collapsed > .ms-card-header { border-bottom-color: transparent; }
.ms-card-collapsed .ms-card-chevron { transform: rotate(-90deg); }
.ms-card-collapsed > .ms-card-body { display: none; }
.ms-card-hidden { display: none !important; }
.ms-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    margin-left: auto;
    margin-right: 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
}
.ms-card-badge:empty { display: none; }

/* Two-column grid */
.sharing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.sharing-col { display: flex; flex-direction: column; gap: 16px; }
.sharing-col-access .sharing-group:last-child { flex: 1; display: flex; flex-direction: column; }
.sharing-col-access .sharing-group:last-child .sharing-group-body { display: flex; flex-direction: column; flex: 1; }
.sharing-col-access .sharing-group:last-child .sharing-note-textarea { flex: 1; min-height: 80px; }

/* Group cards */
.sharing-group { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.sharing-group:hover { border-color: var(--color-border); }
.sharing-group-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #43a599; flex-shrink: 0; }
.sharing-group-header h4 { font-size: 0.85rem; font-weight: 600; color: #ffffff; margin: 0; }
.sharing-group-header svg { color: #ffffff; flex-shrink: 0; }
.sharing-group-body { padding: 16px 18px; }
.sharing-group-full { margin-top: 16px; }

.sharing-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.sharing-hint { font-size: 0.8rem; color: var(--color-text-secondary); margin: 0 0 10px; line-height: 1.5; }

/* Password display */
.sharing-password-display { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sharing-password-display code { display: inline-flex; align-items: center; padding: 10px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; font-family: 'Courier New', monospace; color: var(--color-text); user-select: all; flex: 1; justify-content: center; }
.sharing-pw-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sharing-custom-pw-details { margin-top: 0; }
.sharing-custom-pw-details summary { font-size: 0.8rem; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 0; transition: color var(--transition-fast); }
.sharing-custom-pw-details summary:hover { color: var(--color-primary); }
.sharing-custom-pw-details .sharing-inline-input { margin-top: 8px; }

.sharing-inline-input { display: flex; gap: 8px; align-items: center; }
.sharing-inline-input input { flex: 1; padding: 9px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast); }
.sharing-inline-input input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }

.sharing-invite-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sharing-invite-input { width: 100%; padding: 9px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast); box-sizing: border-box; }
.sharing-invite-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.sharing-invite-send { width: 100%; justify-content: center; }

/* Note to doctor */
.sharing-note-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); resize: vertical; min-height: 80px; outline: none; transition: border-color var(--transition-fast); line-height: 1.55; box-sizing: border-box; }
.sharing-note-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.sharing-note-textarea::placeholder { color: var(--color-text-tertiary); font-size: 0.82rem; }
.sharing-note-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sharing-note-date { font-size: 0.75rem; color: var(--color-text-tertiary); }
.sharing-note-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sharing-note-delete { background: none; border: none; font-size: 0.8rem; color: var(--color-danger); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: all var(--transition-fast); }
.sharing-note-delete:hover { background: var(--color-danger-bg); }

/* Privacy section items */
.sharing-privacy-item { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border-light); }
.sharing-privacy-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sharing-privacy-item.sharing-toggle-row { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

/* Doctor note button (desktop — in banner) */
.dbc-note-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; background: rgba(255,255,255,0.65); border: 1px solid rgba(38,166,154,0.3); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; backdrop-filter: blur(4px); }
.dbc-note-btn:hover { background: rgba(255,255,255,0.9); border-color: var(--color-primary); }
.dbc-note-btn svg { color: var(--color-primary); flex-shrink: 0; }
.dbc-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; animation: dpn-pulse 2s ease-in-out infinite; }
@keyframes dpn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Doctor note bar (mobile — full width below banner) */
.dbc-note-bar { background: rgba(38,166,154,0.08); border-bottom: 1px solid rgba(38,166,154,0.15); display: none; }
.dbc-note-bar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; background: none; border: none; font-size: 0.82rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; transition: background var(--transition-fast); }
.dbc-note-bar-btn:hover { background: rgba(38,166,154,0.06); }
.dbc-note-bar-btn svg { color: var(--color-primary); flex-shrink: 0; }
.dbc-note-bar-arrow { opacity: 0.5; }

/* Doctor switch patient button */
.dbc-switch-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; background: rgba(255,255,255,0.65); border: 1px solid rgba(38,166,154,0.3); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; backdrop-filter: blur(4px); }
.dbc-switch-btn:hover { background: rgba(255,255,255,0.9); border-color: var(--color-primary); }
.dbc-switch-btn svg { color: var(--color-primary); flex-shrink: 0; }

/* Doctor switch patient bar (inline below banner) */
.dbc-switch-bar { background: rgba(38,166,154,0.06); border-bottom: 1px solid rgba(38,166,154,0.15); overflow: hidden; transition: max-height 0.25s ease, opacity 0.25s ease; }
.dbc-switch-bar.hidden { display: none; }
.dbc-switch-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; max-width: 600px; margin: 0 auto; }
.dbc-switch-form label { font-size: 0.8rem; font-weight: 500; color: var(--color-primary-dark); }
.dbc-switch-input-row { display: flex; gap: 6px; }
.dbc-switch-input-row input { flex: 1; padding: 9px 14px; border: 1.5px solid rgba(38,166,154,0.3); border-radius: 8px; font-size: 0.9rem; background: #fff; color: var(--color-text); outline: none; transition: border-color 0.15s; }
.dbc-switch-input-row input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.dbc-switch-submit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.dbc-switch-submit:hover { background: var(--color-primary-dark); }
.dbc-switch-cancel { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; color: var(--color-text-tertiary); border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.dbc-switch-cancel:hover { background: var(--color-bg); color: var(--color-text); }
.dbc-switch-error { font-size: 0.82rem; color: #ef4444; margin: 0; }

@media (max-width: 640px) {
    .dbc-switch-btn span { display: none; }
    .dbc-switch-form { padding: 10px 14px; }
}

/* Doctor note modal overlay */
.dpn-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); backdrop-filter: blur(0); transition: background 0.25s ease, backdrop-filter 0.25s ease; padding: 24px; }
.dpn-overlay.dpn-visible { background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); }
.dpn-modal { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08); max-width: 480px; width: 100%; max-height: min(85vh, 85dvh); transform: translateY(16px) scale(0.97); opacity: 0; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; display: flex; flex-direction: column; overflow: hidden; }
.dpn-visible .dpn-modal { transform: translateY(0) scale(1); opacity: 1; }
.dpn-modal-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; }
.dpn-modal-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-primary-bg); border-radius: 50%; color: var(--color-primary); }
.dpn-modal-title { flex: 1; min-width: 0; }
.dpn-modal-title h3 { font-size: 0.92rem; font-weight: 700; color: var(--color-text); margin: 0; }
.dpn-modal-date { font-size: 0.72rem; color: var(--color-text-tertiary); display: block; margin-top: 2px; }
.dpn-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--color-bg); color: var(--color-text-tertiary); font-size: 1.3rem; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; line-height: 1; }
.dpn-modal-close:hover { background: var(--color-border-light); color: var(--color-text); }
.dpn-modal-body { padding: 20px 24px 24px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.dpn-modal-text { font-size: 0.92rem; line-height: 1.7; color: var(--color-text); margin: 0; white-space: pre-wrap; word-break: break-word; }

/* EDIT MODALS */
.edit-list-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.edit-list-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); align-items: start; }
.edit-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-item-fields input, .edit-item-fields select { padding: 8px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast); }
.edit-item-fields input:focus, .edit-item-fields select:focus { border-color: var(--color-primary); }
.edit-item-fields input::placeholder { color: var(--color-text-tertiary); }
.edit-remove-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); font-size: 1.2rem; cursor: pointer; transition: all var(--transition-fast); margin-top: 4px; }
.edit-remove-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.edit-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: none; border: 1px dashed var(--color-border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); margin-bottom: 16px; }
.edit-add-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }

/* Compact med/supp edit list */
.eml-add-section { margin-bottom: 20px; }
.eml-add-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.eml-existing-section { margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.eml-existing-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: var(--color-bg); border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); }
.eml-existing-toggle:hover { color: var(--color-text); }
.eml-toggle-arrow { transition: transform 0.2s ease; color: var(--color-text-tertiary); }
.eml-existing-section:not(.eml-collapsed) .eml-toggle-arrow { transform: rotate(180deg); }
.eml-existing-list { padding: 14px 14px 10px; }
.eml-collapsed .eml-existing-list { display: none; }
.eml-section-label { font-size: 0.72rem; color: var(--color-text-tertiary); margin-bottom: 6px; }

.eml-item { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); margin-bottom: 6px; overflow: hidden; transition: border-color var(--transition-fast); }
.eml-item:last-child { margin-bottom: 0; }

.eml-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px; }
.eml-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eml-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eml-detail { font-size: 0.75rem; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eml-actions { display: flex; gap: 2px; flex-shrink: 0; }
.eml-edit-btn, .eml-del-btn, .eml-cancel-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); }
.eml-edit-btn:hover, .eml-cancel-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.eml-cancel-btn.hidden { display: none; }
.eml-edit-btn.hidden { display: none; }
.eml-del-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.eml-fields { padding: 0 12px 12px; }
.eml-fields.hidden { display: none; }
.eml-done-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); min-height: 44px; -webkit-tap-highlight-color: transparent; }
.eml-done-btn:hover { background: var(--color-primary-dark); }
.eml-done-btn:active { transform: scale(0.98); }
.eml-done-btn:disabled { opacity: 0.7; cursor: default; transform: none; }

.eml-new { border-color: var(--color-primary); border-style: dashed; }
.eml-new .eml-fields { padding: 12px; }
.eml-new .edit-item-fields { position: relative; }
.eml-new-del { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: var(--color-danger-bg); border-radius: 50%; color: var(--color-danger); cursor: pointer; transition: all var(--transition-fast); }
.eml-new-del:hover { background: var(--color-danger); color: #fff; }

.edit-grunnleggende-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.edit-grunn-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.edit-grunn-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); }
.edit-grunn-label, .edit-grunn-value { padding: 8px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast); }
select.edit-grunn-value { appearance: auto; cursor: pointer; }
.edit-grunn-label:focus, .edit-grunn-value:focus { border-color: var(--color-primary); }
.edit-grunn-label { font-weight: 600; }
.edit-field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.edit-field-group label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.edit-field-group input, .edit-field-group select, .edit-field-group textarea { padding: 9px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast); }
.edit-field-group input:focus, .edit-field-group select:focus, .edit-field-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.1); }
.edit-field-group select { cursor: pointer; appearance: auto; }
.edit-field-group textarea { min-height: clamp(120px, 20vh, 240px); resize: vertical; line-height: 1.6; }
.edit-check-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.edit-check-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--color-text); cursor: pointer; }
.edit-check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); }
.info-empty { color: var(--color-text-tertiary) !important; font-style: italic; margin: 0; }
.edit-actions { display: flex; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 4px; margin-top: 12px; background: var(--color-surface); box-shadow: 0 -8px 16px var(--color-surface); z-index: 5; }
.edit-save-btn { flex: 1; padding: 11px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-base); }
.edit-save-btn:hover { background: var(--color-primary-dark); }
.edit-cancel-btn { flex: 1; padding: 11px; background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.edit-cancel-btn:hover { background: var(--color-surface-hover); }
.pi-simple-editor { display: flex; flex-direction: column; min-height: 100%; }
.pi-simple-editor .edit-field-group { flex: 1; display: flex; flex-direction: column; margin-bottom: 16px; }
.pi-simple-editor .edit-field-group textarea { flex: 1; }
.pi-simple-editor .edit-actions { position: static; flex-shrink: 0; }

.edit-hint { border: 1px solid rgba(38,166,154,0.15); border-radius: var(--radius-md); margin-bottom: 16px; flex-shrink: 0; overflow: hidden; background: var(--color-primary-bg); }
.edit-hint summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 500; color: var(--color-primary-dark); user-select: none; -webkit-tap-highlight-color: transparent; }
.edit-hint summary::-webkit-details-marker { display: none; }
.edit-hint summary svg:first-child { color: var(--color-primary); width: 16px; height: 16px; min-width: 16px; }
.edit-hint-chevron { margin-left: auto; color: var(--color-primary); opacity: 0.5; transition: transform var(--transition-base); }
.edit-hint[open] .edit-hint-chevron { transform: rotate(180deg); }
.edit-hint-body { padding: 0 14px 12px; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.6; }
.edit-hint-body strong { color: var(--color-text); font-weight: 600; }
.edit-hint-examples { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(38,166,154,0.12); font-size: 0.78rem; color: var(--color-text-tertiary); line-height: 1.55; }

/* INFO MODAL */
.info-modal-body { display: flex; flex-direction: column; gap: 0; }
.info-modal-section { padding: 20px 0; border-bottom: 1px solid var(--color-border-light); }
.info-modal-section:first-child { padding-top: 0; }
.info-modal-section:last-child { border-bottom: none; padding-bottom: 0; }
.info-modal-section h3 { font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.info-modal-section p { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 8px; }
.info-modal-section p:last-child { margin-bottom: 0; }
.info-modal-contact { display: flex; flex-direction: column; gap: 12px; }
.info-modal-contact-item { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; }
.info-modal-contact-item svg { color: var(--color-primary); flex-shrink: 0; }
.info-modal-contact-item div { display: flex; flex-direction: column; }
.info-modal-contact-item strong { font-weight: 600; color: var(--color-text); }
.info-modal-contact-item span { font-size: 0.8rem; color: var(--color-text-tertiary); }
.info-modal-contact-item a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.info-modal-contact-item a:hover { text-decoration: underline; }
.info-modal-privacy-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; background: var(--color-primary-bg); color: var(--color-primary); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.info-modal-privacy-link:hover { background: var(--color-primary); color: white; }
.info-modal-legal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.info-modal-legal-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-primary-bg); color: var(--color-primary); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.info-modal-legal-link:hover { background: var(--color-primary); color: white; }
.info-modal-legal-link:hover .info-modal-legal-arrow { opacity: 1; }
.info-modal-legal-link svg:first-child { flex-shrink: 0; }
.info-modal-legal-link span { flex: 1; }
.info-modal-legal-arrow { opacity: 0.5; flex-shrink: 0; transition: opacity 0.15s; }
@media (max-width: 400px) { .info-modal-legal-links { grid-template-columns: 1fr; } }
.info-modal-feedback-section { display: none; }
.info-modal-feedback-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; width: 100%;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; justify-content: center;
}
.info-modal-feedback-btn:hover { background: var(--color-primary-dark); }
.info-modal-feedback-btn svg { flex-shrink: 0; }

@media (max-width: 768px) {
    .info-modal-feedback-section { display: block; }
    #info-modal .modal-backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
    #info-modal .modal-dialog {
        max-width: 100% !important; max-height: 100vh; max-height: 100dvh;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0 !important;
        animation: fadeIn 0.3s ease;
    }
    #info-modal { padding: 0; align-items: stretch; }
    #info-modal .modal-header {
        padding: 20px 20px; padding-top: max(20px, env(safe-area-inset-top, 0px));
    }
    #info-modal .modal-body { padding: 20px; }
}

/* FOOTER */
.app-footer { border-top: 1px solid rgba(0,77,64,0.08); background: var(--color-surface); padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.footer-content { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-content p { font-size: 0.8rem; color: var(--color-text-tertiary); margin: 0; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-link { font-size: 0.8rem; color: var(--color-text-tertiary); text-decoration: none; transition: color var(--transition-fast); }
.footer-link:hover { color: var(--color-primary); }

/* MARKER PICKER ONBOARDING */
.marker-picker-overlay {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.marker-picker-container {
    width: 100%; max-width: 720px; max-height: 90vh; max-height: 90dvh;
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.marker-picker-header {
    text-align: center; padding: 32px 28px 24px;
    background: linear-gradient(180deg, var(--color-primary-bg) 0%, var(--color-surface) 100%);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.marker-picker-logo { height: 36px; width: auto; margin-bottom: 16px; }
.marker-picker-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 6px; letter-spacing: -0.01em; }
.marker-picker-header p { font-size: 0.88rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; max-width: 460px; margin: 0 auto; }

.marker-picker-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 24px; border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.marker-picker-search-wrap {
    flex: 1; position: relative; display: flex; align-items: center;
}
.marker-picker-search-wrap svg {
    position: absolute; left: 12px; color: var(--color-text-tertiary); pointer-events: none;
}
#marker-picker-search {
    width: 100%; padding: 10px 14px 10px 38px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.88rem; color: var(--color-text); outline: none;
    transition: all var(--transition-base);
}
#marker-picker-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.marker-picker-toggle-btn {
    padding: 8px 16px; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600;
    color: var(--color-text-secondary); white-space: nowrap;
    transition: all var(--transition-base); cursor: pointer;
}
.marker-picker-toggle-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }

.marker-picker-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    -webkit-overflow-scrolling: touch;
}
.marker-picker-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}
.marker-picker-section-title svg { color: var(--color-warning); flex-shrink: 0; }
.marker-picker-section-title.all svg { color: var(--color-primary); }
.marker-picker-section + .marker-picker-section { margin-top: 24px; }

.marker-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.marker-pick-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: var(--radius-md);
    border: 2px solid var(--color-border); background: var(--color-surface);
    cursor: pointer; transition: all var(--transition-base);
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.marker-pick-card:hover { border-color: rgba(38,166,154,0.3); background: var(--color-surface-hover); }
.marker-pick-card.selected { border-color: var(--color-primary); background: var(--color-primary-bg); }
.marker-pick-card.selected .marker-pick-check { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.marker-pick-card.selected .marker-pick-check svg { opacity: 1; }
.marker-pick-card.recommended { border-color: rgba(245,158,11,0.3); }
.marker-pick-card.recommended.selected { border-color: var(--color-primary); }

.marker-pick-check {
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-border); border-radius: 6px;
    background: var(--color-surface); transition: all var(--transition-fast);
}
.marker-pick-check svg { opacity: 0; transition: opacity var(--transition-fast); }

.marker-pick-info { flex: 1; min-width: 0; }
.marker-pick-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marker-pick-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.marker-pick-value { font-size: 0.78rem; font-weight: 600; }
.marker-pick-value.in-range { color: var(--color-success); }
.marker-pick-value.out-of-range { color: var(--color-danger); }
.marker-pick-value.optimal { color: #3b82f6; }
.marker-pick-unit { font-size: 0.72rem; color: var(--color-text-tertiary); }
.marker-pick-badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px; letter-spacing: 0.03em;
}
.marker-pick-badge.warning { background: rgba(245,158,11,0.12); color: #d97706; }

.marker-picker-empty {
    text-align: center; padding: 32px 16px; color: var(--color-text-tertiary); font-size: 0.88rem;
}

.marker-picker-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px; border-top: 1px solid var(--color-border);
    background: var(--color-surface); flex-shrink: 0;
}
.marker-picker-count {
    font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
}
.marker-picker-done-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: linear-gradient(135deg, #26a69a, #004d40);
    color: white; border: none; border-radius: var(--radius-md);
    font-size: 0.92rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition-base);
}
.marker-picker-done-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(0,77,64,0.35); }
.marker-picker-done-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ADMIN PANEL */
.admin-invite-form { display: flex; flex-direction: column; gap: 12px; }
.admin-invite-form .auth-field { margin-bottom: 0; }
.admin-invite-row { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-invite-type { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.85rem; color: var(--color-text-secondary); transition: all var(--transition-base); }
.admin-invite-type:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary-dark); }
.admin-invite-type input[type="radio"] { accent-color: var(--color-primary); }


.admin-invite-discount-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    overflow: hidden;
    transition: opacity .2s ease, transform .2s ease;
}
.admin-invite-discount-panel[hidden] {
    display: none !important;
}
.admin-invite-discount-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    transition: background .15s ease;
}
.admin-invite-discount-toggle:hover {
    background: rgba(245, 158, 11, 0.08);
}
.admin-invite-discount-toggle:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}
.admin-invite-discount-toggle-icon {
    width: 38px;
    height: 38px;
    background: #f59e0b;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.admin-invite-discount-toggle-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-invite-discount-toggle-label strong {
    font-size: 0.92rem;
    color: #7c2d12;
    font-weight: 700;
}
.admin-invite-discount-toggle-label small {
    font-size: 0.74rem;
    color: #9a3412;
    line-height: 1.35;
}
.admin-invite-discount-toggle-chev {
    color: #9a3412;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.admin-invite-discount-toggle.expanded .admin-invite-discount-toggle-chev {
    transform: rotate(180deg);
}
.admin-invite-discount-fields {
    padding: 4px 16px 16px;
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(245, 158, 11, 0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-invite-discount-fields[hidden] {
    display: none !important;
}

.admin-invite-discount-presets-wrap {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-invite-discount-presets-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a3412;
}
.admin-invite-discount-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.admin-invite-discount-preset {
    padding: 10px 4px;
    background: white;
    border: 1.5px solid #fde68a;
    border-radius: 8px;
    color: #7c2d12;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.admin-invite-discount-preset:hover {
    background: #fff7ed;
    border-color: #fcd34d;
    transform: translateY(-1px);
}
.admin-invite-discount-preset:active {
    transform: translateY(0);
}
.admin-invite-discount-preset.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}
.admin-invite-discount-preset.active:hover {
    background: #d97706;
    border-color: #d97706;
}
.admin-invite-discount-preset:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

.admin-invite-discount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 4px;
}
.admin-invite-discount-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-invite-discount-field label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a3412;
}
.admin-invite-discount-input-wrap {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-invite-discount-input-wrap:focus-within {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.admin-invite-discount-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    padding: 11px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #7c2d12;
    min-width: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.admin-invite-discount-input-wrap input::-webkit-outer-spin-button,
.admin-invite-discount-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.admin-invite-discount-input-wrap input::placeholder {
    color: #d97706;
    font-weight: 500;
    opacity: 0.5;
}
.admin-invite-discount-suffix {
    color: #9a3412;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    padding-left: 6px;
}
.admin-invite-discount-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: #7c2d12;
    line-height: 1.45;
}
.admin-invite-discount-preview[hidden] {
    display: none !important;
}
.admin-invite-discount-preview svg {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}
.admin-invite-discount-preview strong {
    color: #9a3412;
    font-weight: 700;
}
.admin-invite-discount-note {
    margin: 0;
    font-size: 0.7rem;
    color: #9a3412;
    line-height: 1.45;
    font-style: italic;
    opacity: 0.85;
}

/* Mobil-optimalisering: stack rabatt-feltene */
@media (max-width: 480px) {
    .admin-invite-discount-toggle {
        padding: 12px 14px;
        gap: 10px;
    }
    .admin-invite-discount-toggle-icon {
        width: 34px;
        height: 34px;
    }
    .admin-invite-discount-toggle-label strong {
        font-size: 0.85rem;
    }
    .admin-invite-discount-toggle-label small {
        font-size: 0.7rem;
    }
    .admin-invite-discount-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .admin-invite-discount-input-wrap input {
        font-size: 16px; /* Hindrer iOS-zoom på fokus */
    }
    
    .admin-invite-discount-presets {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }
    .admin-invite-discount-preset {
        padding: 9px 2px;
        font-size: 0.82rem;
    }
}

/* Ekstra liten skjerm (320px): 5 kolonner trygt */
@media (max-width: 360px) {
    .admin-invite-discount-preset {
        font-size: 0.75rem;
        padding: 8px 1px;
    }
}
.admin-users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-users-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); flex: 1; max-width: 340px; transition: border-color var(--transition-fast); }
.admin-users-search-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.1); }
.admin-users-search-wrap svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.admin-users-search-wrap input { border: none; background: none; outline: none; font-size: 0.85rem; color: var(--color-text); width: 100%; }
.admin-users-search-wrap input::placeholder { color: var(--color-text-tertiary); }
.admin-users-count { font-size: 0.82rem; color: var(--color-text-tertiary); font-weight: 500; white-space: nowrap; }
.admin-sortable { cursor: pointer; user-select: none; }
.admin-sortable:hover { color: var(--color-primary); }
.admin-sortable svg { vertical-align: middle; margin-left: 4px; }
.admin-delete-user-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); }
.admin-delete-user-btn:hover { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; }
.admin-page-btn { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.admin-page-btn:hover:not(:disabled):not(.active) { background: var(--color-surface-hover); border-color: var(--color-primary); color: var(--color-primary); }
.admin-page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.admin-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-page-dots { font-size: 0.85rem; color: var(--color-text-tertiary); padding: 0 4px; }
.admin-users-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.admin-users-table th { background: var(--color-bg); color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.admin-users-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text); vertical-align: middle; }
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-users-table tr:hover td { background: var(--color-surface-hover); }
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.admin-badge-success { background: var(--color-success-bg); color: #065f46; }
.admin-badge-danger { background: var(--color-danger-bg); color: #b91c1c; }
.admin-badge-warning { background: var(--color-warning-bg); color: #92400e; }
.admin-badge-info { background: rgba(38,166,154,0.1); color: var(--color-primary-dark); }
.admin-badge-primary { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.admin-badge-muted { background: var(--color-bg); color: var(--color-text-tertiary); }
.admin-col-type { min-width: 90px; }
.admin-col-last-login { min-width: 110px; white-space: nowrap; color: var(--color-text-secondary); font-size: 0.8rem; }
.admin-col-select { width: 1%; white-space: nowrap; }
.admin-users-table th.admin-col-select, .admin-users-table td.admin-col-select { text-align: right; }
.admin-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-user-checkbox { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--color-primary); flex-shrink: 0; }
.admin-users-table tr.admin-row-selected td { background: var(--color-primary-bg); }
.admin-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; background: var(--color-primary-bg); border: 1px solid var(--color-primary); border-radius: var(--radius-md); }
.admin-bulk-info { display: flex; align-items: center; gap: 12px; }
.admin-bulk-count { font-size: 0.85rem; font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }
.admin-bulk-clear { background: none; border: none; padding: 0; font-size: 0.8rem; color: var(--color-text-secondary); text-decoration: underline; cursor: pointer; }
.admin-bulk-clear:hover { color: var(--color-text); }
.admin-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-bulk-label { font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 500; }
.admin-bulk-btn { padding: 6px 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); }
.admin-bulk-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.admin-bulk-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.admin-bulk-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.admin-bulk-btn:disabled, .admin-bulk-clear:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-user-link {
    color: var(--color-text); font-weight: 600; text-decoration: none;
    border-bottom: 1px dashed var(--color-border); padding-bottom: 1px;
    transition: all 0.15s;
}
.admin-user-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Admin User Detail Modal */
.admin-user-detail-content { max-width: 620px; }
.admin-ud-loading { text-align: center; padding: 40px 0; color: #6b7280; }
.admin-ud-loading .spinner { margin: 0 auto 10px; }

.admin-ud-header {
    display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.admin-ud-avatar {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, #26a69a, #1a8a7f);
    color: #fff; font-weight: 800; font-size: 20px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-ud-name { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0; }
.admin-ud-email { font-size: 0.82rem; color: #6b7280; }

.admin-ud-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 20px;
}
.admin-ud-stat {
    text-align: center; padding: 12px 8px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
}
.admin-ud-stat-val { display: block; font-size: 1.2rem; font-weight: 800; color: #111827; }
.admin-ud-stat-label { display: block; font-size: 0.68rem; color: #9ca3af; font-weight: 500; margin-top: 2px; }

.admin-ud-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
    margin-bottom: 20px; padding: 14px 16px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
}
.admin-ud-meta-item { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; padding: 4px 0; }
.admin-ud-meta-item span { color: #9ca3af; }
.admin-ud-meta-item strong { color: #374151; font-weight: 600; text-align: right; }

.admin-ud-section { margin-bottom: 16px; }
.admin-ud-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 700; color: #374151;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.admin-ud-section-title svg { color: #9ca3af; flex-shrink: 0; }
.admin-ud-empty { font-size: 0.78rem; color: #9ca3af; padding: 6px 0; }
.admin-ud-wearable-toggle { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.admin-ud-wearable-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); }
.admin-ud-wearables-section { background: linear-gradient(135deg, rgba(38,166,154,0.04), transparent); border-radius: var(--radius-md); padding: 12px; margin-bottom: 16px; }

/* Wearable connection list */
.admin-ud-wearable-list-title {
    margin-top: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
}
.admin-ud-wearable-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-ud-wearable-list-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}
.admin-ud-wearable-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}
.admin-ud-wearable-item[data-status="active"] {
    border-color: color-mix(in srgb, var(--color-success, #10b981) 25%, var(--color-border-light));
}
.admin-ud-wearable-item[data-status="expired"],
.admin-ud-wearable-item[data-status="error"] {
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 25%, var(--color-border-light));
}
.admin-ud-wearable-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
    color: var(--color-primary);
    flex-shrink: 0;
}
.admin-ud-wearable-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.admin-ud-wearable-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-ud-wearable-item-top strong {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 700;
}
.admin-ud-wearable-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.admin-ud-wearable-status-success {
    background: color-mix(in srgb, var(--color-success, #10b981) 12%, transparent);
    color: var(--color-success, #10b981);
}
.admin-ud-wearable-status-danger {
    background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent);
    color: var(--color-danger, #ef4444);
}
.admin-ud-wearable-status-muted {
    background: var(--color-bg);
    color: var(--color-text-tertiary);
}
.admin-ud-wearable-item-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}
.admin-ud-wearable-item-meta strong {
    color: var(--color-text);
    font-weight: 600;
}
.admin-ud-wearable-sep { color: var(--color-text-tertiary); }
.admin-ud-wearable-error {
    margin-top: 4px;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--color-danger, #ef4444) 6%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    color: var(--color-danger, #ef4444);
}

/* BankID status card */
.admin-ud-bankid-section {
    background: linear-gradient(135deg, rgba(38,166,154,0.04), transparent);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 16px;
}
.admin-ud-bankid-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
}
.admin-ud-bankid-active {
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-success, #10b981) 28%, var(--color-border-light));
    border-radius: var(--radius-md);
}
.admin-ud-bankid-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-ud-bankid-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-success, #10b981) 15%, transparent);
    color: var(--color-success, #10b981);
    flex-shrink: 0;
}
.admin-ud-bankid-status {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.admin-ud-bankid-status strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}
.admin-ud-bankid-status span {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}
.admin-ud-bankid-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary-dark, var(--color-primary));
    white-space: nowrap;
}
.admin-ud-bankid-badge-muted {
    background: var(--color-bg);
    color: var(--color-text-tertiary);
}
.admin-ud-bankid-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    font-size: 0.78rem;
}
.admin-ud-bankid-meta div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-ud-bankid-meta span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}
.admin-ud-bankid-meta strong {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}


.admin-acq-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-acq-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    width: fit-content;
}
.admin-acq-channel-dot {
    width: 9px; height: 9px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
}
.admin-acq-channel-label { font-weight: 700; }
.admin-acq-paid-pill {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(0,0,0,0.08);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.admin-acq-channel-detail {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-left: 6px;
    font-style: italic;
}
.admin-acq-funnel {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.admin-acq-funnel-step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.admin-acq-funnel-dot {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
    flex-shrink: 0;
}
.admin-acq-funnel-text { min-width: 0; }
.admin-acq-funnel-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-acq-funnel-time {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-acq-funnel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 600;
    position: relative;
}
.admin-acq-funnel-arrow::before {
    content: '→';
    position: absolute;
    top: -14px;
    color: #cbd5e1;
    font-size: 0.95rem;
}
.admin-acq-funnel-arrow span {
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.admin-acq-block {
    padding: 10px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-acq-block-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
}
.admin-acq-utm-row,
.admin-acq-click-row,
.admin-acq-landing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.76rem;
    padding: 3px 0;
}
.admin-acq-utm-label,
.admin-acq-click-label,
.admin-acq-landing-label {
    color: var(--color-text-tertiary);
    font-weight: 600;
    flex-shrink: 0;
}
.admin-acq-utm-value,
.admin-acq-landing-url {
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.admin-acq-click-id {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}


.admin-rev-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-rev-beta-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #1e3a8a;
}
.admin-rev-beta-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}
.admin-rev-beta-banner strong { color: #1e40af; font-weight: 700; }
.admin-rev-beta-banner code {
    background: rgba(30, 64, 175, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.74rem;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
.admin-rev-beta-banner em { font-style: italic; color: #1e3a8a; }


.admin-rev-discount-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #7c2d12;
}
.admin-rev-discount-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: #fb923c;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.admin-rev-discount-banner strong { color: #9a3412; }
.admin-rev-discount-pill {
    font-size: 0.62rem;
    font-weight: 700;
    background: #fb923c;
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Free months-banner (grønn — vervings-belønning) */
.admin-rev-freemonths-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #14532d;
}
.admin-rev-freemonths-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.admin-rev-freemonths-banner strong { color: #166534; }

/* Provider-tag (Stripe/Vipps merkelapp) */
.admin-rev-provider-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.admin-rev-provider-stripe { background: #635BFF; color: white; }
.admin-rev-provider-vipps  { background: #FF5B24; color: white; }
.admin-rev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.admin-rev-stat {
    padding: 12px 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.admin-rev-stat-primary {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}
.admin-rev-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}
.admin-rev-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.admin-rev-stat-primary .admin-rev-stat-val { color: #047857; }
.admin-rev-stat-sub {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}
.admin-rev-bar-wrap {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.admin-rev-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.admin-rev-bar-label strong {
    color: var(--color-text);
    font-weight: 700;
}
.admin-rev-bar {
    position: relative;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.admin-rev-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
.admin-rev-bar-overshoot {
    position: absolute;
    right: 0;
    top: -2px;
    height: 12px;
    padding: 0 6px;
    font-size: 0.6rem;
    font-weight: 800;
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.admin-rev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}
.admin-rev-meta strong { color: var(--color-text); font-weight: 600; }


.admin-conv-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-conv-row {
    padding: 8px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.admin-conv-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-conv-name {
    font-size: 0.82rem;
    color: var(--color-text);
}
.admin-conv-value {
    font-size: 0.76rem;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    padding: 1px 7px;
    border-radius: 4px;
}
.admin-conv-time {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    margin-left: auto;
}
.admin-conv-row-platforms {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.admin-conv-pill {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.admin-conv-pill-success { background: #d1fae5; color: #065f46; }
.admin-conv-pill-warning { background: #fef3c7; color: #92400e; }
.admin-conv-pill-danger  { background: #fee2e2; color: #991b1b; }
.admin-conv-pill-muted   { background: #f1f5f9; color: #64748b; }

/* Tidlig kansellering → rød ramme + flag */
.admin-conv-row-warning {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}
.admin-conv-flag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #991b1b;
    background: #fee2e2;
    padding: 2px 7px;
    border-radius: 4px;
}


.admin-rev-ltv-model {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.72rem;
}
.admin-rev-ltv-channel {
    font-weight: 600;
    color: var(--color-text);
}
.admin-rev-ltv-cohort {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
}
.admin-rev-ltv-details {
    margin-top: -4px;
    padding: 0 12px;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}
.admin-rev-ltv-details summary {
    cursor: pointer;
    padding: 4px 0;
    color: #3b82f6;
    font-weight: 600;
    user-select: none;
}
.admin-rev-ltv-details summary:hover { color: #2563eb; }
.admin-rev-ltv-details p {
    margin: 6px 0 8px;
    line-height: 1.45;
}
.admin-rev-ltv-details ul {
    margin: 0;
    padding-left: 18px;
    line-height: 1.55;
}
.admin-rev-ltv-details ul strong { color: var(--color-text); }
.admin-rev-ltv-details code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* Mobil: kollaps funnel-grid til vertikal stack */
@media (max-width: 540px) {
    .admin-acq-funnel {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .admin-acq-funnel-arrow {
        justify-content: flex-start;
        padding-left: 6px;
    }
    .admin-acq-funnel-arrow::before {
        content: '↓';
        position: static;
        margin-right: 4px;
    }
}


.admin-ud-free-credits-section { background: linear-gradient(135deg, rgba(99,102,241,0.04), transparent); border-radius: var(--radius-md); padding: 12px; margin-bottom: 16px; }
.admin-ud-free-credits-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.admin-ud-free-credit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-ud-free-credit-row label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); min-width: 110px; }
.admin-ud-number-input { display: flex; align-items: center; gap: 0; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
.admin-ud-number-btn { width: 32px; height: 32px; border: none; background: #f9fafb; color: #374151; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; user-select: none; line-height: 1; }
.admin-ud-number-btn:hover { background: #e5e7eb; color: #111827; }
.admin-ud-number-btn:active { background: #d1d5db; }
.admin-ud-number-input input[type="number"] { width: 48px; height: 32px; border: none; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; text-align: center; font-size: 0.82rem; font-weight: 600; color: #374151; background: #fff; -moz-appearance: textfield; appearance: textfield; outline: none; }
.admin-ud-number-input input[type="number"]::-webkit-outer-spin-button,
.admin-ud-number-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.admin-ud-number-input input[type="number"]:focus { background: #f0f4ff; }

.admin-ud-sub-row, .admin-ud-credit-row, .admin-ud-analysis-row, .admin-ud-bio-row, .admin-ud-ref-row, .admin-ud-access-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; font-size: 0.78rem; color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.admin-ud-sub-row:last-child, .admin-ud-credit-row:last-child, .admin-ud-analysis-row:last-child,
.admin-ud-bio-row:last-child, .admin-ud-ref-row:last-child, .admin-ud-access-row:last-child { border-bottom: none; }

.admin-ud-credit-type { font-weight: 600; min-width: 110px; }
.admin-ud-credit-date { color: #9ca3af; margin-left: auto; font-size: 0.72rem; }
.admin-ud-sub-date { color: #9ca3af; margin-left: auto; font-size: 0.72rem; }
.admin-ud-used { color: #26a69a; font-weight: 500; }
.admin-ud-available { color: #3b82f6; font-weight: 600; }
.admin-ud-tokens { color: #9ca3af; margin-left: auto; font-size: 0.72rem; }
.admin-ud-bio-age { font-weight: 700; min-width: 50px; }
.admin-ud-bio-diff { font-weight: 600; min-width: 70px; }
.admin-ud-younger { color: #26a69a; }
.admin-ud-older { color: #ef4444; }

.admin-type-select { padding: 5px 8px; font-size: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; min-width: 80px; -webkit-appearance: auto; appearance: auto; }
.admin-type-select:hover { border-color: var(--color-primary); }
.admin-type-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.15); }
.admin-type-na { color: var(--color-text-tertiary); font-size: 0.9rem; }
.admin-invite-row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; flex-wrap: wrap; }
.admin-invite-row-item:last-child { border-bottom: none; }
.admin-invite-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.admin-invite-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-invite-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-invite-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.admin-invite-action-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.admin-invite-action-btn.admin-invite-resend:hover { border-color: var(--color-primary); color: var(--color-primary); }
.admin-invite-action-btn.admin-invite-revoke:hover { border-color: var(--color-danger); color: var(--color-danger); }
.admin-invite-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
    .admin-invite-row-item { flex-direction: column; align-items: flex-start; }
    .admin-invite-actions { width: 100%; }
    .admin-users-toolbar { flex-direction: column; align-items: stretch; }
    .admin-users-search-wrap { max-width: 100%; }
    .admin-page-btn { min-width: 40px; height: 40px; }
    .admin-type-select { min-height: 40px; padding: 8px 10px; font-size: 16px; }
    .admin-bulk-bar { flex-direction: column; align-items: stretch; }
    .admin-bulk-actions { justify-content: space-between; }
    .admin-user-checkbox { width: 20px; height: 20px; }
}

/* ADMIN — DOCTOR ACCESS LOG */
.admin-empty-hint { font-size: 0.85rem; color: var(--color-text-tertiary); padding: 8px 0; }
.adal-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.adal-search { flex: 1; padding: 10px 14px 10px 36px; border: 1.5px solid var(--color-border); border-radius: 10px; font-size: 0.85rem; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat; color: var(--color-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.adal-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.1); }
.adal-search::placeholder { color: var(--color-text-tertiary); }
.adal-count { font-size: 0.78rem; color: var(--color-text-tertiary); white-space: nowrap; flex-shrink: 0; }
.adal-mode-bar { display: flex; gap: 4px; margin-bottom: 14px; background: var(--color-bg); padding: 3px; border-radius: 10px; border: 1px solid var(--color-border-light); }
.adal-mode-btn { flex: 1; padding: 7px 12px; border: none; border-radius: 8px; background: transparent; color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.adal-mode-btn:hover { color: var(--color-text); }
.adal-mode-btn.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Grouped by doctor */
.adal-group { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.adal-group-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.adal-group-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adal-group-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.adal-group-stat { font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); }
.adal-group-stat-sub { font-size: 0.72rem; color: var(--color-text-tertiary); }
.adal-group-patients { border-top: 1px solid var(--color-border-light); padding: 8px 16px 8px 62px; display: flex; flex-direction: column; gap: 6px; }
.adal-group-patient { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: 0.8rem; }
.adal-group-patient-name { font-weight: 500; color: var(--color-text); }
.adal-group-patient-email { color: var(--color-text-tertiary); font-size: 0.75rem; }
.adal-group-patient-visits { font-size: 0.72rem; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border-light); padding: 1px 7px; border-radius: 6px; }
.adal-group-patient-tags { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; padding-top: 2px; }

.adal-org-doctor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.adal-org-doctor:last-child { border-bottom: none; }
.adal-org-doctor-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adal-org-doctor-info { display: flex; flex-direction: column; min-width: 0; }
.adal-org-doctor-name { font-weight: 500; font-size: 0.82rem; color: var(--color-text); }
.adal-org-doctor-role { font-size: 0.72rem; color: var(--color-text-tertiary); }
.adal-org-doctor-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.adal-org-doctor-patients { font-size: 0.73rem; color: var(--color-text-tertiary); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adal-list { display: flex; flex-direction: column; gap: 8px; }
.adal-entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.adal-entry:hover { border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.adal-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--color-primary-bg); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; font-weight: 700; flex-shrink: 0;
}
.adal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adal-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.adal-doctor-name { font-weight: 600; font-size: 0.88rem; color: var(--color-text); }
.adal-doctor-role { font-size: 0.75rem; color: var(--color-text-tertiary); }
.adal-connection { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--color-text-secondary); }
.adal-connection svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.adal-connection-patient { font-weight: 500; color: var(--color-text); }
.adal-connection-email { color: var(--color-text-tertiary); font-size: 0.75rem; }
.adal-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.adal-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--color-primary-bg); color: var(--color-primary); border-radius: 6px; font-size: 0.7rem; font-weight: 600; }
.adal-footer { display: flex; align-items: center; gap: 10px; font-size: 0.73rem; color: var(--color-text-tertiary); margin-top: 2px; }
.adal-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; }

/* User detail modal access entries */
.admin-ud-access-entry { padding: 12px; background: var(--color-bg); border-radius: 10px; margin-bottom: 6px; }
.admin-ud-access-entry:last-child { margin-bottom: 0; }
.admin-ud-access-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.admin-ud-access-top strong { font-size: 0.84rem; color: var(--color-text); }
.admin-ud-access-role { font-size: 0.73rem; color: var(--color-text-tertiary); }
.admin-ud-access-time { font-size: 0.73rem; color: var(--color-text-secondary); margin-left: auto; }
.admin-ud-access-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-ud-access-tag { display: inline-flex; padding: 2px 7px; background: var(--color-primary-bg); color: var(--color-primary); border-radius: 5px; font-size: 0.68rem; font-weight: 600; }
.admin-ud-access-ip { font-size: 0.7rem; color: var(--color-text-tertiary); font-family: monospace; margin-top: 4px; }

@media (max-width: 640px) {
    .adal-entry { flex-direction: column; gap: 8px; padding: 12px; }
    .adal-footer { flex-wrap: wrap; }
    .adal-toolbar { flex-wrap: wrap; }
    .adal-mode-btn { font-size: 0.72rem; padding: 6px 8px; }
    .adal-group-patients { padding-left: 16px; }
    .adal-group-header { flex-wrap: wrap; }
    .adal-group-stats { align-items: flex-start; width: 100%; padding-left: 48px; }
    .adal-group-patient { flex-direction: column; align-items: flex-start; gap: 3px; }
    .adal-org-doctor { flex-direction: column; align-items: flex-start; gap: 4px; }
    .adal-org-doctor-patients { max-width: 100%; }
}

/* ADMIN — ANALYTICS DASHBOARD */
.admin-dashboard { margin-bottom: 20px; }
.admin-dash-loading { display: flex; justify-content: center; padding: 40px; }

.adb-section { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: 14px; padding: 20px; margin-bottom: 14px; }
.adb-section-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.adb-section.adb-section-metrics { background: #e3f3f2; border: 1px solid #c5e0e3; }

.adb-grid { display: grid; gap: 10px; }
.adb-grid-6 { grid-template-columns: repeat(6, 1fr); }
.adb-grid-4 { grid-template-columns: repeat(4, 1fr); }

.adb-stat { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 10px; padding: 14px 16px; text-align: center; transition: border-color 0.15s, box-shadow 0.15s; }
.adb-stat:hover { border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.adb-stat-val { font-size: 1.5rem; font-weight: 800; color: var(--color-text); line-height: 1.2; letter-spacing: -0.02em; }
.adb-stat-label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; }
.adb-stat-sub { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: 3px; }
.adb-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-right: 6px; animation: adb-pulse 2s ease-in-out infinite; vertical-align: middle; }
@keyframes adb-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(16,185,129,0); } }

/* Interaktivt "Aktive nå"-kort + live-hover-popover */
.adb-stat-live { cursor: pointer; position: relative; }
.adb-stat-live::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 0 rgba(16,185,129,0.35); transition: box-shadow 0.2s ease; pointer-events: none; }
.adb-stat-live:hover, .adb-stat-live:focus-visible { outline: none; border-color: #10b981; box-shadow: 0 6px 18px rgba(16,185,129,0.16); transform: translateY(-1px); }
.adb-stat-live:hover::after, .adb-stat-live:focus-visible::after { box-shadow: 0 0 0 3px rgba(16,185,129,0.14); }
.adb-live-hint { color: #10b981; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; }
.adb-stat-live:hover .adb-live-hint, .adb-stat-live:focus-visible .adb-live-hint { opacity: 0.9; }

.adb-live-pop {
    position: fixed; z-index: 2147483000; width: 320px; max-width: calc(100vw - 24px);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.08);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
    transform-origin: top center; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    pointer-events: none;
}
.adb-live-pop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity 0.16s ease, transform 0.16s ease; }
.adb-live-pop[data-placement="top"] { transform-origin: bottom center; transform: translateY(6px) scale(0.98); }
.adb-live-pop[data-placement="top"].is-visible { transform: translateY(0) scale(1); }

.adb-live-pop-arrow { position: absolute; left: var(--an-arrow-x, 50%); top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--color-surface); border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.adb-live-pop[data-placement="top"] .adb-live-pop-arrow { top: auto; bottom: -6px; border-left: none; border-top: none; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0 0 2px 0; }

.adb-live-pop-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; }
.adb-live-pop-title { font-size: 0.78rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; }
.adb-live-pop-count { margin-left: auto; font-size: 0.74rem; font-weight: 700; color: #0f766e; background: rgba(16,185,129,0.12); padding: 2px 9px; border-radius: 999px; }

.adb-live-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.adb-live-list::-webkit-scrollbar { width: 6px; }
.adb-live-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.adb-live-list { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

.adb-live-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; transition: background 0.12s ease; }
.adb-live-row:hover { background: var(--color-bg); }
.adb-live-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; background: linear-gradient(135deg, hsl(var(--an-hue,175) 55% 52%), hsl(calc(var(--an-hue,175) + 24) 60% 44%)); }
.adb-live-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.adb-live-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb-live-meta { font-size: 0.72rem; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb-live-time { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; color: var(--color-text-tertiary); white-space: nowrap; }
.adb-live-time.is-now { color: #0f766e; display: inline-flex; align-items: center; gap: 5px; }
.adb-live-time.is-now::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: adb-pulse 2s ease-in-out infinite; }

.adb-live-pop-loading { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 22px 12px; font-size: 0.82rem; color: var(--color-text-secondary); }
.adb-live-spinner { width: 15px; height: 15px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: appSpin 0.7s linear infinite; }
.adb-live-pop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; text-align: center; font-size: 0.82rem; color: var(--color-text-tertiary); }
.adb-live-pop-empty svg { color: var(--color-text-tertiary); opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
    .adb-live-pop, .adb-live-pop.is-visible { transition: opacity 0.12s ease; transform: none; }
    .adb-stat-live:hover, .adb-stat-live:focus-visible { transform: none; }
}
@media (max-width: 700px) {
    .adb-live-hint { display: none; }
}

.adb-up { color: #10b981; font-weight: 600; }
.adb-down { color: #ef4444; font-weight: 600; }
.adb-muted { font-size: 0.82rem; color: var(--color-text-tertiary); }

.adb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.adb-two-col .adb-section { margin-bottom: 0; }

/* Wearables list */
.adb-wear-list { display: flex; flex-direction: column; gap: 6px; }
.adb-wear-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--color-bg); border-radius: 8px; font-size: 0.84rem; }
.adb-wear-name { font-weight: 500; color: var(--color-text); }
.adb-wear-count { font-weight: 700; color: var(--color-primary); background: var(--color-primary-bg); padding: 2px 10px; border-radius: 6px; font-size: 0.8rem; }

/* Top users */
.adb-top-list { display: flex; flex-direction: column; gap: 4px; }
.adb-top-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 0.82rem; transition: background 0.1s; }
.adb-top-row:hover { background: var(--color-bg); }
.adb-top-rank { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-bg); color: var(--color-primary); border-radius: 6px; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.adb-top-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adb-top-name { font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.adb-top-detail { font-size: 0.7rem; color: var(--color-text-tertiary); }
.adb-top-score { font-size: 0.78rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-bg); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.adb-top-last { font-size: 0.72rem; color: var(--color-text-tertiary); white-space: nowrap; }
.adb-show-all-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 8px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.2); border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all 0.15s; }
.adb-show-all-btn:hover { background: var(--color-primary); color: #fff; }

/* Period bar */
.adb-period-bar { display: flex; gap: 4px; margin-bottom: 14px; background: var(--color-bg); padding: 3px; border-radius: 10px; border: 1px solid var(--color-border-light); }
.adb-period-btn { flex: 1; padding: 7px 10px; border: none; border-radius: 8px; background: transparent; color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.adb-period-btn:hover { color: var(--color-text); }
.adb-period-btn.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Revenue rows */
.adb-rev-grid { display: flex; flex-direction: column; gap: 8px; }
.adb-rev-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 10px; }
.adb-rev-row:first-child { background: linear-gradient(135deg, var(--color-primary-bg), var(--color-surface)); border-color: rgba(38,166,154,0.2); }
.adb-rev-label { font-size: 0.84rem; font-weight: 500; color: var(--color-text-secondary); min-width: 120px; }
.adb-rev-val { font-size: 1.1rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.01em; }
.adb-rev-change { font-size: 0.78rem; font-weight: 600; }
.adb-rev-prev { font-size: 0.73rem; color: var(--color-text-tertiary); margin-left: auto; }

@media (max-width: 1024px) {
    .adb-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .adb-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .adb-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .adb-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .adb-two-col { grid-template-columns: 1fr; }
    .adb-stat-val { font-size: 1.3rem; }
    .adb-section { padding: 16px 14px; }
    .adb-rev-row { flex-wrap: wrap; gap: 6px; }
    .adb-rev-label { min-width: auto; }
    .adb-rev-prev { margin-left: 0; width: 100%; }
    .adb-period-btn { font-size: 0.72rem; padding: 6px 6px; }
}
@media (max-width: 400px) {
    .adb-grid-6, .adb-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — NETTSTEDANALYSE (GA4 + Google Search Console)
   Tre flatenivåer: canvas (shell) → panel (kort) → inset (innhold i kort).
   ══════════════════════════════════════════════════════════════════════════ */

.aga-shell {
    --aga-r-xl: 20px;
    --aga-r-lg: 16px;
    --aga-r-md: 12px;
    --aga-r-sm: 9px;

    --aga-ink: #17202e;
    --aga-muted: #57657a;
    --aga-faint: #8a97a8;

    --aga-canvas: #f4f7fa;
    --aga-panel: #ffffff;
    --aga-inset: #f7f9fc;
    --aga-inset-2: #eef2f7;
    --aga-line: #e5ebf2;
    --aga-line-soft: #f0f4f8;

    --aga-accent: #10998c;
    --aga-accent-ink: #0b7268;
    --aga-accent-soft: rgba(16, 153, 140, 0.10);

    --aga-blue: #2563eb;
    --aga-blue-soft: rgba(37, 99, 235, 0.09);
    --aga-amber: #d97706;
    --aga-amber-soft: rgba(217, 119, 6, 0.10);
    --aga-violet: #7c3aed;
    --aga-violet-soft: rgba(124, 58, 237, 0.09);
    --aga-green: #059669;
    --aga-green-soft: rgba(5, 150, 105, 0.10);
    --aga-red: #dc2626;
    --aga-red-soft: rgba(220, 38, 38, 0.09);

    --aga-gap: 12px;
    --aga-shadow: 0 1px 2px rgba(16, 32, 48, 0.04), 0 1px 3px rgba(16, 32, 48, 0.03);
}

#admin-card-analytics .ms-card-body.aga-shell {
    background: var(--aga-canvas);
    padding: 20px 22px 22px;
}

/* ── Kortheader ── */
#admin-card-analytics > .ms-card-header {
    padding: 15px 22px;
}
.aga-card-header h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.aga-card-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
}
.aga-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(16, 153, 140, 0.11);
    color: #0b7268;
    flex-shrink: 0;
}
.aga-source-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aga-source-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(16, 153, 140, 0.09);
    color: #0b7268;
    border: 1px solid rgba(16, 153, 140, 0.18);
}
.aga-source-badge.is-gsc {
    background: rgba(37, 99, 235, 0.07);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.16);
}
.aga-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.10);
    border: 1px solid rgba(5, 150, 105, 0.2);
    color: #047857;
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.aga-live-badge[hidden] { display: none !important; }
.aga-live-badge .adb-live-dot { margin-right: 0; width: 7px; height: 7px; }

/* ── Navigasjon (faner + periode) ── */
.aga-sticky-chrome {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.aga-tabs-wrap { position: relative; }
.aga-tabs-wrap::before,
.aga-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 32px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: var(--aga-r-md);
}
.aga-tabs-wrap::before {
    left: 1px;
    background: linear-gradient(90deg, var(--aga-inset) 30%, transparent);
}
.aga-tabs-wrap::after {
    right: 1px;
    background: linear-gradient(270deg, var(--aga-inset) 30%, transparent);
}
.aga-tabs-wrap.has-left::before,
.aga-tabs-wrap.has-right::after { opacity: 1; }

.aga-tabs {
    display: flex;
    gap: 2px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px;
    background: var(--aga-inset);
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-md);
}
.aga-tabs::-webkit-scrollbar { display: none; }
.aga-tab {
    flex: 1 0 auto;
    scroll-snap-align: center;
    min-height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--aga-muted);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.aga-tab-short { display: none; }
.aga-tab:hover { color: var(--aga-ink); }
.aga-tab.active {
    background: var(--aga-panel);
    color: var(--aga-ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 32, 48, 0.07), 0 0 0 1px rgba(16, 32, 48, 0.04);
}
.aga-tab:focus-visible {
    outline: 2px solid var(--aga-accent);
    outline-offset: 2px;
}

.aga-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.aga-toolbar.is-realtime #aga-range-group { display: none; }
.aga-range {
    display: inline-flex;
    gap: 2px;
    background: var(--aga-panel);
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--aga-line);
    box-shadow: var(--aga-shadow);
}
.aga-range-btn {
    min-height: 36px;
    padding: 0 15px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--aga-muted);
    font-size: 0.79rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.aga-range-short { display: none; }
.aga-range-btn:hover { color: var(--aga-ink); }
.aga-range-btn.active {
    background: var(--aga-ink);
    color: #fff;
}
.aga-range-btn:focus-visible {
    outline: 2px solid var(--aga-accent);
    outline-offset: 2px;
}
.aga-toolbar-spacer { flex: 1 1 auto; min-width: 0; }
.aga-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    min-width: 38px;
    padding: 0 14px;
    border: 1px solid var(--aga-line);
    background: var(--aga-panel);
    color: var(--aga-muted);
    font-size: 0.78rem;
    font-weight: 650;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--aga-shadow);
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.aga-refresh-btn:hover { border-color: var(--color-border); color: var(--aga-ink); }
.aga-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aga-refresh-btn:disabled svg { animation: aga-spin 0.9s linear infinite; }
@keyframes aga-spin { to { transform: rotate(360deg); } }

/* ── Metabar: kompakte fakta-chips ── */
.aga-metabar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.aga-metabar[hidden] { display: none !important; }
.aga-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--aga-panel);
    border: 1px solid var(--aga-line);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--aga-muted);
    white-space: nowrap;
}
.aga-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aga-accent);
    flex-shrink: 0;
}
.aga-chip.is-gsc .aga-chip-dot { background: var(--aga-blue); }
.aga-chip.is-warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.aga-chip.is-warn .aga-chip-dot { background: var(--aga-amber); }

/* ── Bannere ── */
.aga-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--aga-r-md);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 12px;
}
.aga-banner[hidden] { display: none !important; }
.aga-banner svg { flex-shrink: 0; opacity: 0.8; }
.aga-banner-stale {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.aga-banner-partial {
    background: var(--aga-panel);
    border: 1px dashed var(--aga-line);
    color: var(--aga-muted);
}
.aga-banner-digest {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    justify-content: space-between;
    flex-wrap: wrap;
}
.aga-banner-digest.is-high {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.aga-banner-text { min-width: 0; }
.aga-digest-action {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.aga-digest-action:hover { background: rgba(255, 255, 255, 0.6); }

/* ── Sub-navigasjon (inne i en fane) ── */
.aga-subnav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 16px;
    padding-bottom: 2px;
}
.aga-subnav::-webkit-scrollbar { display: none; }
.aga-subnav-btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--aga-line);
    background: var(--aga-panel);
    color: var(--aga-muted);
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.aga-subnav-btn:hover { color: var(--aga-ink); border-color: var(--color-border); }
.aga-subnav-btn.active {
    background: var(--aga-ink);
    border-color: var(--aga-ink);
    color: #fff;
}
.aga-subnav-btn:focus-visible {
    outline: 2px solid var(--aga-accent);
    outline-offset: 2px;
}

/* ── Panel (seksjonskort) ── */
.aga-panel {
    background: var(--aga-panel);
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-lg);
    box-shadow: var(--aga-shadow);
    margin-bottom: 14px;
}
.aga-panel:last-child { margin-bottom: 0; }
.aga-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 0;
}
.aga-panel-titles { min-width: 0; flex: 1 1 auto; }
.aga-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--aga-ink);
    margin: 0;
}
.aga-panel-count {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--aga-inset-2);
    color: var(--aga-muted);
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.aga-panel-desc {
    font-size: 0.78rem;
    color: var(--aga-muted);
    line-height: 1.5;
    margin: 5px 0 0;
    max-width: 74ch;
}
.aga-panel-actions { flex-shrink: 0; }
.aga-panel-body { padding: 14px 18px 18px; }
.aga-panel-body > *:last-child { margin-bottom: 0; }
.aga-panel-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--aga-line-soft);
    font-size: 0.73rem;
    color: var(--aga-faint);
    line-height: 1.5;
}

/* Undertittel inne i panel */
.aga-sub {
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--aga-faint);
    margin: 0 0 10px;
}
.aga-sub-group + .aga-sub-group { margin-top: 18px; }

/* ── Notater ── */
.aga-note {
    font-size: 0.77rem;
    color: var(--aga-muted);
    line-height: 1.55;
    margin: 0 0 12px;
}
.aga-note-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.79rem;
    color: var(--aga-muted);
    line-height: 1.65;
}
.aga-note-list li + li { margin-top: 3px; }
.aga-footnote {
    font-size: 0.73rem;
    color: var(--aga-faint);
    line-height: 1.5;
    margin: 12px 0 0;
}

/* ── Metrikkort ── */
.aga-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--aga-gap);
    margin-bottom: 14px;
}
.aga-metrics.is-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.aga-metrics.is-compact { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.aga-metrics:last-child { margin-bottom: 0; }
.aga-metric {
    background: var(--aga-panel);
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-lg);
    box-shadow: var(--aga-shadow);
    padding: 15px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.aga-panel-body .aga-metric {
    background: var(--aga-inset);
    box-shadow: none;
    border-color: var(--aga-line-soft);
}
.aga-metric-label {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aga-faint);
    line-height: 1.3;
}
.aga-metric-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.aga-metric-value {
    font-size: clamp(1.3rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--aga-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.aga-metric-sub {
    font-size: 0.72rem;
    color: var(--aga-muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ── Delta-pille ── */
.aga-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aga-delta.up { color: #047857; background: var(--aga-green-soft); }
.aga-delta.down { color: #b91c1c; background: var(--aga-red-soft); }
.aga-delta.flat { color: var(--aga-faint); background: var(--aga-inset-2); }

/* ── Endringsliste ── */
.aga-changes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aga-change-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--aga-inset);
    border: 1px solid var(--aga-line-soft);
    border-radius: var(--aga-r-md);
    min-height: 46px;
}
.aga-change-label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--aga-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.aga-change-kind {
    flex-shrink: 0;
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aga-faint);
}
.aga-change-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 0.83rem;
    font-weight: 650;
    color: var(--aga-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Hurtiglenker ── */
.aga-jumps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--aga-gap);
    margin-bottom: 14px;
}
.aga-jump {
    position: relative;
    background: var(--aga-panel);
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-lg);
    box-shadow: var(--aga-shadow);
    padding: 15px 40px 15px 16px;
    text-align: left;
    width: 100%;
    min-height: 76px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.aga-jump::after {
    content: '';
    position: absolute;
    right: 17px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--aga-faint);
    border-top: 2px solid var(--aga-faint);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.15s;
}
.aga-jump:hover {
    border-color: color-mix(in srgb, var(--aga-accent) 40%, var(--aga-line));
    box-shadow: 0 4px 14px -4px rgba(16, 32, 48, 0.12);
    transform: translateY(-1px);
}
.aga-jump:hover::after { border-color: var(--aga-accent); }
.aga-jump:focus-visible {
    outline: 2px solid var(--aga-accent);
    outline-offset: 2px;
}
.aga-jump-kicker {
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--aga-faint);
    margin-bottom: 6px;
}
.aga-jump-title {
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--aga-ink);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aga-jump-meta {
    font-size: 0.75rem;
    color: var(--aga-muted);
    line-height: 1.4;
}
.aga-jump.is-wide { padding-right: 44px; }

/* ── Segmentert bryter (trendmetrikk / sider vs. søk) ── */
.aga-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--aga-line);
    background: var(--aga-inset);
}
.aga-seg-btn {
    border: none;
    background: transparent;
    color: var(--aga-muted);
    font-size: 0.73rem;
    font-weight: 700;
    min-height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.aga-seg-btn:hover { color: var(--aga-ink); }
.aga-seg-btn.active { background: var(--aga-accent); color: #fff; }
.aga-seg-btn:focus-visible {
    outline: 2px solid var(--aga-accent);
    outline-offset: 2px;
}

/* ── Diagram ── */
.aga-chart {
    position: relative;
    height: 250px;
    background: var(--aga-inset);
    border: 1px solid var(--aga-line-soft);
    border-radius: var(--aga-r-md);
    padding: 14px 12px 10px;
}
.aga-chart.is-sm { height: 170px; }
.aga-chart-summary {
    font-size: 0.77rem;
    color: var(--aga-muted);
    margin: 10px 0 0;
    line-height: 1.45;
}

/* ── Tabell ── */
.aga-tablewrap {
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-md);
    overflow: hidden;
    background: var(--aga-panel);
}
.aga-tablescroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.aga-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
    min-width: 560px;
}
.aga-table th {
    text-align: left;
    padding: 9px 14px;
    background: var(--aga-inset);
    color: var(--aga-faint);
    font-size: 0.665rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--aga-line);
}
.aga-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--aga-line-soft);
    color: var(--aga-ink);
    vertical-align: middle;
}
.aga-table tbody tr:last-child td { border-bottom: none; }
.aga-table tbody tr:hover td { background: var(--aga-inset); }
.aga-table th.num, .aga-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aga-table td.num { font-weight: 650; }
.aga-table td.lead {
    font-weight: 650;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aga-table td.soft { color: var(--aga-muted); font-weight: 500; }
.aga-table td.wrap { white-space: normal; line-height: 1.4; min-width: 160px; }
.aga-nowrap {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ── Rangert liste (mobil-erstatning for tabell + kompakt topplister) ── */
.aga-rank {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aga-rank-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: start;
    padding: 11px 13px;
    background: var(--aga-inset);
    border: 1px solid var(--aga-line-soft);
    border-radius: var(--aga-r-md);
    min-height: 50px;
}
.aga-rank-n {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--aga-accent-soft);
    color: var(--aga-accent-ink);
    font-size: 0.7rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.aga-rank-title {
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--aga-ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Egen rad under tittel og verdi, slik at lange undertekster får full bredde
   og ikke etterlater enkeltord på egen linje. */
.aga-rank-sub {
    grid-column: 2 / -1;
    margin-top: -3px;
    font-size: 0.72rem;
    color: var(--aga-faint);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.aga-rank-val {
    text-align: right;
    font-size: 0.88rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--aga-accent-ink);
    white-space: nowrap;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.aga-rank-unit {
    margin-left: 4px;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--aga-faint);
}
.aga-rank-bar {
    grid-column: 1 / -1;
    margin-top: 3px;
    height: 4px;
    background: var(--aga-inset-2);
    border-radius: 999px;
    overflow: hidden;
}
.aga-rank-fill {
    height: 100%;
    background: var(--aga-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ── Mulighetsmatrise (2×2) ── */
.aga-quads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aga-gap);
}
.aga-quad {
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-md);
    background: var(--aga-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.aga-quad-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
}
.aga-quad-mark {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--aga-faint);
}
.aga-quad-name {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--aga-ink);
    min-width: 0;
}
.aga-quad-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--aga-inset-2);
    color: var(--aga-muted);
    font-size: 0.7rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.aga-quad-hint {
    padding: 0 14px 10px;
    font-size: 0.75rem;
    color: var(--aga-muted);
    line-height: 1.45;
}
.aga-quad-list {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.aga-quad-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--aga-line-soft);
    font-size: 0.78rem;
}
.aga-quad-path {
    min-width: 0;
    color: var(--aga-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aga-quad-num {
    flex-shrink: 0;
    color: var(--aga-muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.aga-quad-empty {
    padding: 0 14px 14px;
    font-size: 0.75rem;
    color: var(--aga-faint);
}
.aga-quad.is-serp .aga-quad-mark { background: var(--aga-amber); }
.aga-quad.is-serp .aga-quad-count { background: var(--aga-amber-soft); color: #b45309; }
.aga-quad.is-content .aga-quad-mark { background: var(--aga-violet); }
.aga-quad.is-content .aga-quad-count { background: var(--aga-violet-soft); color: #6d28d9; }
.aga-quad.is-funnel .aga-quad-mark { background: var(--aga-blue); }
.aga-quad.is-funnel .aga-quad-count { background: var(--aga-blue-soft); color: #1d4ed8; }
.aga-quad.is-winners .aga-quad-mark { background: var(--aga-green); }
.aga-quad.is-winners .aga-quad-count { background: var(--aga-green-soft); color: #047857; }

/* ── Varselliste ── */
.aga-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aga-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: var(--aga-inset);
    border: 1px solid var(--aga-line-soft);
    border-left: 3px solid var(--aga-faint);
    border-radius: var(--aga-r-sm);
}
.aga-alert.is-high { border-left-color: var(--aga-red); background: #fef6f6; }
.aga-alert.is-medium { border-left-color: var(--aga-amber); background: #fffdf5; }
.aga-alert.is-low { border-left-color: var(--aga-blue); }
.aga-alert-body { min-width: 0; }
.aga-alert-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aga-ink);
    line-height: 1.35;
}
.aga-alert-detail {
    font-size: 0.76rem;
    color: var(--aga-muted);
    line-height: 1.45;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* ── Statuspiller ── */
.aga-pill {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
}
.aga-pill.ok { background: var(--aga-green-soft); color: #047857; }
.aga-pill.warn { background: var(--aga-amber-soft); color: #b45309; }
.aga-pill.err { background: var(--aga-red-soft); color: #b91c1c; }
.aga-pill.muted { background: var(--aga-inset-2); color: var(--aga-muted); }

/* ── Trakt ── */
.aga-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aga-funnel-step {
    background: var(--aga-inset);
    border: 1px solid var(--aga-line-soft);
    border-radius: var(--aga-r-md);
    padding: 13px 15px;
}
.aga-funnel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.aga-funnel-name {
    font-weight: 650;
    font-size: 0.86rem;
    color: var(--aga-ink);
    min-width: 0;
}
.aga-funnel-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    border-radius: 6px;
    background: var(--aga-inset-2);
    color: var(--aga-muted);
    font-size: 0.68rem;
    font-weight: 750;
}
.aga-funnel-val {
    font-weight: 800;
    font-size: 1rem;
    color: var(--aga-accent-ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.aga-funnel-bar {
    height: 7px;
    background: var(--aga-inset-2);
    border-radius: 999px;
    overflow: hidden;
}
.aga-funnel-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aga-accent), color-mix(in srgb, var(--aga-accent) 65%, #5eead4));
    border-radius: 999px;
    transition: width 0.4s ease;
}
.aga-funnel-meta {
    font-size: 0.72rem;
    color: var(--aga-faint);
    margin-top: 7px;
}

/* ── Sanntid ── */
.aga-live-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(16, 153, 140, 0.10), rgba(16, 153, 140, 0.03) 60%, var(--aga-panel));
    border: 1px solid rgba(16, 153, 140, 0.20);
    border-radius: var(--aga-r-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.aga-live-main { min-width: 140px; }
.aga-live-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--aga-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.aga-live-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aga-muted);
    margin-top: 7px;
}
.aga-live-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aga-gap);
    flex: 1 1 200px;
    min-width: 180px;
}
.aga-live-side .aga-metric {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(16, 153, 140, 0.14);
    box-shadow: none;
    padding: 12px 14px;
}

/* ── Tomtilstander / degradert ── */
.aga-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 26px 16px;
    text-align: center;
    color: var(--aga-faint);
    font-size: 0.8rem;
    line-height: 1.5;
    background: var(--aga-inset);
    border: 1px dashed var(--aga-line);
    border-radius: var(--aga-r-md);
}
.aga-blank svg { color: var(--aga-line); }
.aga-blank strong { color: var(--aga-muted); font-weight: 650; }
.aga-degraded {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--aga-r-md);
    padding: 16px;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.5;
}
.aga-degraded strong { display: block; margin-bottom: 3px; }

/* ── Utvidbart (disclosure) ── */
.aga-details {
    border: 1px solid var(--aga-line);
    border-radius: var(--aga-r-md);
    background: var(--aga-panel);
    overflow: hidden;
    margin-bottom: 10px;
}
.aga-panel-body > .aga-details { background: var(--aga-inset); border-color: var(--aga-line-soft); }
.aga-details:last-child { margin-bottom: 0; }
.aga-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 13px 16px;
    min-height: 46px;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--aga-muted);
    display: flex;
    align-items: center;
    gap: 9px;
}
.aga-details > summary::-webkit-details-marker { display: none; }
.aga-details > summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.7;
}
.aga-details[open] > summary::before { transform: rotate(45deg); }
.aga-details > summary:hover { color: var(--aga-ink); }
.aga-details[open] > summary { border-bottom: 1px solid var(--aga-line-soft); }
.aga-details-body { padding: 14px 16px 16px; }
.aga-details-body > *:last-child { margin-bottom: 0; }

/* ── Teknisk fotnote ── */
.aga-tech { margin-top: 16px; }
.aga-tech > summary {
    font-size: 0.72rem;
    min-height: 38px;
    padding: 9px 14px;
    color: var(--aga-faint);
}
.aga-tech .aga-details-body {
    padding: 10px 14px 14px;
    font-size: 0.72rem;
    color: var(--aga-faint);
    line-height: 1.6;
    word-break: break-word;
}

/* ── Synlighet etter viewport ── */
.aga-wide-only { display: block; }
.aga-narrow-only { display: none; }

.aga-tab-content { min-height: 140px; }
.aga-tab-content > .ms-loading { padding: 48px 24px; }
.admin-empty-hint + .aga-tech,
#aga-tech-slot:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════
   Nettbrett
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .aga-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aga-quads { grid-template-columns: 1fr; }
    .aga-jumps { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Mobil
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    #admin-card-analytics > .ms-card-header { padding: 14px 16px; }
    #admin-card-analytics .ms-card-body.aga-shell {
        padding: 14px max(13px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left));
    }
    .aga-card-title { font-size: 0.95rem; gap: 8px; }
    .aga-card-icon { width: 27px; height: 27px; border-radius: 8px; }

    .aga-sticky-chrome {
        position: sticky;
        top: 0;
        z-index: 8;
        gap: 8px;
        margin: -14px -13px 14px;
        padding: 12px 13px 11px;
        background: color-mix(in srgb, var(--aga-canvas) 90%, transparent);
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        border-bottom: 1px solid var(--aga-line);
    }
    .aga-tab-full { display: none; }
    .aga-tab-short {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Seks faner får ikke plass på én linje. To rader viser alle uten skjult sidescroll. */
    .aga-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .aga-tabs-wrap::before,
    .aga-tabs-wrap::after { content: none; }
    .aga-tab {
        min-width: 0;
        padding: 0 8px;
        min-height: 38px;
        font-size: 0.78rem;
    }
    .aga-toolbar { gap: 8px; flex-wrap: nowrap; }
    .aga-range { flex: 1 1 auto; min-width: 0; }
    .aga-range-btn {
        flex: 1;
        padding: 0 6px;
        min-height: 40px;
        font-size: 0.78rem;
    }
    .aga-range-full { display: none; }
    .aga-range-short { display: inline; }
    .aga-toolbar-spacer { display: none; }
    .aga-refresh-label { display: none; }
    .aga-refresh-btn {
        padding: 0;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 11px;
    }

    .aga-metabar { gap: 5px; margin-bottom: 14px; }
    .aga-chip { height: 25px; font-size: 0.69rem; padding: 0 9px; }

    .aga-banner { font-size: 0.77rem; padding: 11px 12px; }
    .aga-banner-digest { flex-direction: column; align-items: stretch; gap: 10px; }
    .aga-digest-action { width: 100%; min-height: 42px; }

    /* Undervisningene i rutenett i stedet for å forsvinne ut til høyre */
    .aga-subnav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 5px;
        overflow-x: visible;
        margin: 0 0 14px;
        padding: 0;
    }
    .aga-subnav-btn {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
    }

    /* Alle nøkkeltall synlige i to kolonner — ingen skjult sidescroll */
    .aga-metrics,
    .aga-metrics.is-auto,
    .aga-metrics.is-compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 14px;
        padding: 0;
    }
    .aga-metric {
        border-radius: var(--aga-r-lg);
        padding: 13px 13px 12px;
        gap: 5px;
    }
    .aga-metric-value { font-size: 1.35rem; }
    .aga-metric-label { font-size: 0.63rem; }
    .aga-metric-sub { font-size: 0.71rem; }

    .aga-panel { border-radius: var(--aga-r-lg); margin-bottom: 12px; }
    .aga-panel-head { padding: 15px 15px 0; }
    .aga-panel-title { font-size: 0.88rem; }
    .aga-panel-desc { font-size: 0.76rem; }
    .aga-panel-body { padding: 12px 15px 15px; }
    .aga-panel-foot { padding: 10px 15px; }
    .aga-panel-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .aga-panel-actions { align-self: stretch; }
    .aga-panel-actions .aga-seg { width: 100%; }
    .aga-panel-actions .aga-seg-btn { flex: 1; min-height: 38px; }

    .aga-chart { height: 210px; padding: 12px 8px 8px; }
    .aga-chart.is-sm { height: 160px; }

    .aga-change-row { padding: 12px 13px; gap: 8px; }
    .aga-change-label { font-size: 0.83rem; }

    .aga-jump { padding: 14px 38px 14px 15px; min-height: 74px; }
    .aga-jump-title { white-space: normal; }

    /* Tabeller byttes ut med rangerte rader */
    .aga-wide-only { display: none !important; }
    .aga-narrow-only { display: flex !important; }
    .aga-rank-row {
        padding: 13px;
        min-height: 54px;
        gap: 6px 10px;
    }
    .aga-rank-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.3;
    }
    .aga-rank-sub {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .aga-quad-head { padding: 12px 13px 9px; }
    .aga-quad-hint, .aga-quad-list, .aga-quad-empty { padding-left: 13px; padding-right: 13px; }

    .aga-live-hero { padding: 16px; gap: 14px; border-radius: var(--aga-r-lg); }
    .aga-live-count { font-size: 2rem; }
    .aga-live-side { grid-template-columns: 1fr 1fr; }
    .aga-live-side .aga-metric { flex: 1 1 auto; min-width: 0; }

    .aga-funnel-step { padding: 13px; }
    .aga-details > summary { min-height: 48px; padding: 14px 15px; }
    .aga-details-body { padding: 13px 15px 15px; }
    .aga-note, .aga-note-list { font-size: 0.77rem; }
}

/* Små telefoner */
@media (max-width: 380px) {
    .aga-metrics,
    .aga-metrics.is-auto,
    .aga-metrics.is-compact { gap: 8px; }
    .aga-metric { padding: 12px; }
    .aga-metric-value { font-size: 1.25rem; }
    .aga-tab { padding: 0 6px; font-size: 0.76rem; }
    .aga-live-count { font-size: 1.8rem; }
    .aga-live-side { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .aga-funnel-fill, .aga-tab, .aga-range-btn, .aga-refresh-btn, .aga-seg-btn,
    .aga-rank-fill, .aga-jump, .aga-subnav-btn, .aga-details > summary::before,
    .eco-tab, .eco-trend-toggle {
        transition: none !important;
    }
    .aga-jump:hover { transform: none; }
    .aga-refresh-btn:disabled svg { animation: none; }
    .aga-sticky-chrome {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--aga-canvas);
    }
}

/* Delte admin chart/KPI-tokens (aga + eco) */
:root {
    --admin-chart-teal: #26a69a;
    --admin-chart-tick: #94a3b8;
    --admin-chart-grid: rgba(0, 0, 0, 0.04);
}

/* ADMIN — ØKONOMI */
.eco-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.eco-month-wrap { display: inline-flex; align-items: center; gap: 8px; }
.eco-month-label { font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 600; }
.eco-month-select { padding: 8px 12px; border: 1px solid var(--color-border-light); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.eco-tabs { display: inline-flex; gap: 4px; background: var(--color-bg); padding: 3px; border-radius: 10px; border: 1px solid var(--color-border-light); }
.eco-tab { padding: 7px 16px; border: none; border-radius: 8px; background: transparent; color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.eco-tab.active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* KPI-kort */
.eco-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.eco-kpi { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.eco-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); font-weight: 700; }
.eco-kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--color-text); line-height: 1.1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eco-kpi-sub { font-size: 0.74rem; color: var(--color-text-secondary); }
.eco-delta { font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.eco-delta.up { color: #047857; background: #d1fae5; }
.eco-delta.down { color: #b91c1c; background: #fee2e2; }
.eco-delta.flat { color: var(--color-text-secondary); background: var(--color-bg); }
.eco-drift { font-weight: 700; }
.eco-drift.ok { color: #047857; }
.eco-drift.warn { color: #b45309; }

/* Trend-graf */
.eco-trend { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 16px; padding: 16px 16px 8px; margin-bottom: 18px; }
.eco-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.eco-trend-head .eco-panel-title { margin-bottom: 0; }
.eco-trend-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-border-light); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.eco-trend-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; opacity: 0.35; transition: opacity 0.15s; }
.eco-trend-toggle.active { background: rgba(245,158,11,0.12); border-color: #f59e0b; color: #b45309; }
.eco-trend-toggle.active::before { opacity: 1; }
.eco-trend-canvas-wrap { position: relative; width: 100%; height: 280px; }
.eco-trend-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* Paneler med stolper */
.eco-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.eco-panel { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 14px; padding: 16px; }
.eco-panel-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text); margin: 0 0 12px; }
.eco-bars { display: flex; flex-direction: column; gap: 12px; }
.eco-bar-row { display: flex; flex-direction: column; gap: 5px; }
.eco-bar-head { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-text); gap: 8px; }
.eco-bar-val { font-weight: 700; white-space: nowrap; }
.eco-bar-sub { color: var(--color-text-tertiary); font-weight: 500; font-size: 0.72rem; }
.eco-bar-track { height: 8px; background: var(--color-border-light); border-radius: 999px; overflow: hidden; }
.eco-bar-fill { height: 100%; border-radius: 999px; background: #3b82f6; transition: width 0.4s ease; min-width: 2px; }
.eco-bar-fill.c1 { background: #14b8a6; } .eco-bar-fill.c2 { background: #6366f1; } .eco-bar-fill.c3 { background: #f59e0b; }
.eco-bar-fill.vipps { background: #ff5b24; } .eco-bar-fill.stripe { background: #635bff; }
.eco-bar-fill.cost { background: #ef4444; }
.eco-note { font-size: 0.74rem; color: var(--color-text-tertiary); margin: 14px 0 0; line-height: 1.5; }
.eco-empty { font-size: 0.84rem; color: var(--color-text-secondary); padding: 16px; text-align: center; }

/* Filter / søk */
.eco-filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.eco-input { padding: 9px 12px; border: 1px solid var(--color-border-light); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.82rem; flex: 1 1 160px; min-width: 0; }
.eco-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--color-border-light); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.eco-export-btn:hover { background: var(--color-bg); border-color: var(--color-primary, #14b8a6); color: var(--color-primary, #14b8a6); }

/* Tabeller */
.eco-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border-light); border-radius: 12px; }
.eco-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 520px; }
.eco-table th { text-align: left; padding: 10px 12px; background: var(--color-bg); color: var(--color-text-tertiary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; }
.eco-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text); vertical-align: middle; }
.eco-table tbody tr:last-child td { border-bottom: none; }
.eco-table tfoot td { font-weight: 800; background: var(--color-bg); border-top: 2px solid var(--color-border-light); }
.eco-row.clickable { cursor: pointer; transition: background 0.12s; }
.eco-row.clickable:hover { background: var(--color-bg); }
.eco-td-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.eco-td-date { white-space: nowrap; color: var(--color-text-secondary); font-size: 0.78rem; }
.eco-td-user { font-weight: 600; }
.eco-td-email { display: block; font-weight: 400; font-size: 0.72rem; color: var(--color-text-tertiary); }
.eco-cost { color: #b91c1c; }
.eco-margin.pos { color: #047857; } .eco-margin.neg { color: #b91c1c; }
.eco-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.eco-chip.ok { color: #047857; background: #d1fae5; } .eco-chip.err { color: #b91c1c; background: #fee2e2; }
.eco-chip.warn { color: #b45309; background: #fef3c7; } .eco-chip.info { color: #1d4ed8; background: #dbeafe; }
.eco-chip.muted { color: var(--color-text-secondary); background: var(--color-bg); }
.eco-prov { font-size: 0.74rem; font-weight: 700; }
.eco-prov.vipps { color: #ff5b24; } .eco-prov.stripe { color: #635bff; } .eco-prov.muted { color: var(--color-text-tertiary); }
.eco-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 0.64rem; font-weight: 700; background: var(--color-bg); color: var(--color-text-secondary); text-transform: uppercase; }
.eco-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; font-size: 0.8rem; color: var(--color-text-secondary); }
.eco-pager-btn { padding: 7px 14px; border: 1px solid var(--color-border-light); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.eco-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.eco-sortbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.78rem; color: var(--color-text-secondary); }
.eco-sort { padding: 6px 12px; border: 1px solid var(--color-border-light); border-radius: 8px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.eco-sort.active { background: var(--color-primary, #14b8a6); color: #fff; border-color: transparent; }

/* Bilag / kvitteringer */
.eco-rcp-totals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.eco-rcp-tot { flex: 1 1 130px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.eco-rcp-tot span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); font-weight: 700; }
.eco-rcp-tot strong { font-size: 1.05rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.eco-receipts { min-width: 720px; }
.eco-td-num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-td-open { text-align: right; white-space: nowrap; }
.eco-open-link { color: var(--color-primary, #0f766e); font-weight: 700; text-decoration: none; font-size: 0.8rem; }
.eco-open-link:hover { text-decoration: underline; }
.eco-rcp-credit td { background: rgba(245,158,11,0.06); }

/* Per-bruker modal */
.eco-ud { display: flex; flex-direction: column; gap: 12px; }
.eco-ud-block { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 12px; padding: 14px; }
.eco-ud-block-title { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-tertiary); margin-bottom: 10px; }
.eco-ud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.eco-ud-stat { display: flex; flex-direction: column; gap: 2px; }
.eco-ud-stat-label { font-size: 0.7rem; color: var(--color-text-tertiary); }
.eco-ud-stat-val { font-size: 1.05rem; font-weight: 800; color: var(--color-text); }
.eco-ud-feats { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--color-border-light); padding-top: 10px; }
.eco-ud-feat { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text); }
.eco-ud-feat-val { font-weight: 600; }
.eco-ud-feat-val em { color: var(--color-text-tertiary); font-style: normal; font-weight: 400; }
.eco-ud-empty { font-size: 0.78rem; color: var(--color-text-tertiary); }
.eco-ud-note { font-size: 0.72rem; color: var(--color-text-tertiary); line-height: 1.5; margin: 0; }

@media (max-width: 640px) {
    .eco-toolbar { gap: 10px; }
    .eco-month-wrap { width: 100%; }
    .eco-month-select { flex: 1; }
    .eco-tabs { width: 100%; }
    .eco-tab { flex: 1; padding: 8px 6px; }
    .eco-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .eco-kpi { padding: 13px; }
    .eco-kpi-value { font-size: 1.25rem; }
    .eco-input { flex: 1 1 100%; }
    .eco-export-btn { flex: 1 1 100%; justify-content: center; }
    .eco-trend { padding: 14px 12px 6px; }
    .eco-trend-canvas-wrap { height: 220px; }
    .eco-ud-stats { grid-template-columns: 1fr; gap: 8px; }
    .eco-ud-stat { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (max-width: 400px) {
    .eco-kpi-grid { grid-template-columns: 1fr; }
}

/* ADMIN — E-POST COMPOSER */
.admin-email-mode-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.admin-email-mode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-bg);
    color: var(--color-text-secondary); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition-fast);
}
.admin-email-mode-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.admin-email-mode-btn.active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    color: var(--color-primary-dark); font-weight: 600;
}
.admin-email-recipients-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.admin-email-search-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); flex: 1; min-width: 180px;
    transition: border-color var(--transition-fast);
}
.admin-email-search-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.1); }
.admin-email-search-wrap svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.admin-email-search-wrap input { border: none; background: none; outline: none; font-size: 0.85rem; color: var(--color-text); width: 100%; }
.admin-email-search-wrap input::placeholder { color: var(--color-text-tertiary); }
.admin-email-select-actions { display: flex; gap: 6px; }
.admin-email-select-btn {
    padding: 6px 12px; font-size: 0.75rem; font-weight: 500;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text-secondary);
    cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
}
.admin-email-select-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.admin-email-user-list {
    max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-bg);
}
.admin-email-user-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.82rem;
}
.admin-email-user-item:last-child { border-bottom: none; }
.admin-email-user-item:hover { background: var(--color-surface-hover); }
.admin-email-user-item.selected { background: var(--color-primary-bg); }
.admin-email-user-item input[type="checkbox"] { accent-color: var(--color-primary); flex-shrink: 0; cursor: pointer; }
.admin-email-user-name { font-weight: 500; color: var(--color-text); }
.admin-email-user-email { color: var(--color-text-tertiary); font-size: 0.78rem; margin-left: auto; }
.admin-email-user-optout {
    flex-shrink: 0; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--color-danger); background: rgba(220,38,38,0.10);
    border: 1px solid rgba(220,38,38,0.25);
}
.admin-email-selected-count {
    margin-top: 8px; font-size: 0.78rem; font-weight: 500;
    color: var(--color-text-tertiary);
}

.admin-email-newsletter-box {
    padding: 16px; background: var(--color-primary-bg);
    border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-md);
}
.admin-email-newsletter-text {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: var(--color-primary-dark); margin-bottom: 12px;
}
.admin-email-newsletter-text svg { flex-shrink: 0; }
.admin-email-filter-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; flex-wrap: wrap;
}
.admin-email-filter-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }
.admin-email-filter-select {
    padding: 7px 12px; font-size: 0.82rem;
    border: 1px solid rgba(38,166,154,0.3); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-primary-dark);
    cursor: pointer; -webkit-appearance: auto; appearance: auto;
    min-width: 160px;
}
.admin-email-filter-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.15); }
.admin-email-member-count { font-size: 0.78rem; font-weight: 500; color: var(--color-primary-dark); margin-top: 8px; }
.admin-email-optout-note { font-weight: 500; color: var(--color-text-tertiary); }
.admin-email-optout-note.warn { color: var(--color-danger); }

.admin-email-editor-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; }
.admin-email-editor-wrap { margin-bottom: 16px; }
.admin-email-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 8px; background: var(--color-bg);
    border: 1px solid var(--color-border); border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    flex-wrap: wrap;
}
.admin-email-toolbar-group { display: flex; align-items: center; gap: 2px; }
.admin-email-toolbar-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; flex-shrink: 0; }
.admin-email-tb-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-secondary);
    cursor: pointer; transition: all var(--transition-fast);
    font-size: 0.85rem;
}
.admin-email-tb-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.admin-email-tb-btn.active { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.admin-email-editor {
    min-height: 220px; max-height: 500px; overflow-y: auto;
    padding: 16px 18px; border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--color-surface); color: var(--color-text);
    font-size: 0.9rem; line-height: 1.7; outline: none;
    transition: border-color var(--transition-fast);
}
.admin-email-editor:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.08); }
.admin-email-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-tertiary); pointer-events: none;
}
.admin-email-editor h2 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 16px 0 8px; }
.admin-email-editor h3 { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 12px 0 6px; }
.admin-email-editor p { margin: 0 0 10px; }
.admin-email-editor ul, .admin-email-editor ol { margin: 8px 0; padding-left: 24px; }
.admin-email-editor li { margin-bottom: 4px; }
.admin-email-editor a { color: var(--color-primary); text-decoration: underline; }
.admin-email-editor img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }
.admin-email-editor hr { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; }
.admin-email-editor table[data-email-cta] {
    pointer-events: auto;
    cursor: default;
    margin: 0;
    border-collapse: collapse;
}
.admin-email-editor table[data-email-cta] td {
    background-color: #26a69a;
    border-radius: 8px;
    padding: 14px 28px;
    text-align: center;
}
.admin-email-editor table[data-email-cta] a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 20px !important;
    pointer-events: none;
    /* Padding lives on <td> for bulletproof email rendering */
}
.admin-email-editor td[style*="text-align:center"] > table[data-email-cta],
.admin-email-editor td[style*="text-align: center"] > table[data-email-cta],
.admin-email-editor th[style*="text-align:center"] > table[data-email-cta],
.admin-email-editor th[style*="text-align: center"] > table[data-email-cta] {
    margin-left: auto;
    margin-right: auto;
}
.admin-email-editor td[style*="text-align:right"] > table[data-email-cta],
.admin-email-editor td[style*="text-align: right"] > table[data-email-cta],
.admin-email-editor th[style*="text-align:right"] > table[data-email-cta],
.admin-email-editor th[style*="text-align: right"] > table[data-email-cta] {
    margin-left: auto;
    margin-right: 0;
}
.admin-email-editor table[data-email-table] {
    border-radius: var(--radius-sm);
    margin: 10px 0;
    cursor: default;
}
.admin-email-editor table[data-email-table] td,
.admin-email-editor table[data-email-table] th {
    min-width: 40px;
    outline: none;
    position: relative;
}
.admin-email-editor table[data-email-table] td:focus,
.admin-email-editor table[data-email-table] th:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.admin-email-editor table[data-email-table] td,
.admin-email-editor table[data-email-table] th {
    position: relative;
}
.admin-table-resize-handle {
    position: absolute;
    right: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
}
.admin-table-resize-handle:hover {
    background: rgba(38, 166, 154, 0.25);
}
.admin-table-resize-handle::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s;
}
.admin-table-resize-handle:hover::after {
    opacity: 1;
}
.admin-table-row-resize {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 6px;
    cursor: row-resize;
    z-index: 2;
}
.admin-table-row-resize:hover {
    background: rgba(38, 166, 154, 0.25);
}
.admin-table-row-resize::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s;
}
.admin-table-row-resize:hover::after {
    opacity: 1;
}

/* Table insert dialog */
.admin-table-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}
.admin-table-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.2));
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.2s ease;
}
.admin-table-dialog.admin-html-dialog-wide { max-width: 820px; }
.admin-html-dialog-hint {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.admin-html-textarea {
    width: 100%;
    min-height: 400px;
    max-height: 65vh;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    tab-size: 2;
    -moz-tab-size: 2;
    box-sizing: border-box;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}
.admin-html-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.admin-html-dialog-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.admin-html-dialog-charcount {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
    .admin-table-dialog.admin-html-dialog-wide { max-width: 100%; }
    .admin-html-textarea { min-height: 300px; font-size: 0.78rem; }
}
.admin-table-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
}
.admin-table-dialog-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.admin-table-dialog-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.admin-table-dialog-close:hover { background: var(--color-bg); color: var(--color-text); }
.admin-table-dialog-body { padding: 20px; }
.admin-table-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-table-dialog-field {
    margin-bottom: 12px;
}
.admin-table-dialog-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.admin-table-dialog-field input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 4px;
}
.admin-table-dialog-field input[type="number"],
.admin-table-dialog-field select {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}
.admin-table-dialog-field input:focus,
.admin-table-dialog-field select:focus {
    border-color: var(--color-primary);
}
.admin-table-dialog-preview-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.admin-table-dialog-preview {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 12px;
    max-height: 180px;
    overflow: auto;
    font-size: 0.82rem;
}
.admin-table-dialog-preview table {
    font-size: 0.78rem;
}
.admin-table-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border-light);
}

/* Table context menu */
.admin-table-ctx-menu {
    position: fixed;
    z-index: 10001;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.15));
    padding: 4px 0;
    min-width: 200px;
    animation: fadeIn 0.1s ease;
}
.admin-table-ctx-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 0.82rem;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.1s;
}
.admin-table-ctx-menu button:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.04));
}
.admin-table-ctx-label {
    padding: 5px 14px 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.admin-table-ctx-sep {
    height: 1px;
    background: var(--color-border-light);
    margin: 4px 0;
}

@media (max-width: 480px) {
    .admin-table-dialog { max-width: 100%; }
    .admin-table-dialog-grid { grid-template-columns: 1fr; }
}

.admin-email-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.admin-email-actions-left { display: flex; align-items: center; gap: 8px; }
.admin-email-actions-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Draft indicator bar */
.admin-email-draft-bar {
    margin-bottom: 12px;
}
.admin-email-draft-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: #92400e;
}
.admin-email-draft-indicator svg { flex-shrink: 0; color: #d97706; }
.admin-email-draft-indicator strong { font-weight: 600; }
.admin-email-draft-discard-btn {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.admin-email-draft-discard-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Draft count badge */
.admin-email-draft-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

/* Drafts panel */
.admin-email-drafts-panel {
    margin-top: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}
.admin-email-drafts-header {
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.admin-email-drafts-list {
    max-height: 240px;
    overflow-y: auto;
}
.admin-email-drafts-empty {
    display: flex; align-items: center; gap: 8px;
    padding: 20px;
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
    justify-content: center;
}
.admin-email-draft-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}
.admin-email-draft-item:last-child { border-bottom: none; }
.admin-email-draft-item:hover { background: var(--color-surface-hover); }
.admin-email-draft-item.active { background: rgba(38, 166, 154, 0.06); border-left: 3px solid var(--color-primary); }
.admin-email-draft-item-main {
    flex: 1; min-width: 0; cursor: pointer;
}
.admin-email-draft-item-subject {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-email-draft-item-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.admin-email-draft-item-date { margin-left: auto; white-space: nowrap; }
.admin-email-draft-delete-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.admin-email-draft-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.admin-email-draft-duplicate-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.admin-email-draft-duplicate-btn:hover {
    background: rgba(38, 166, 154, 0.1);
    color: var(--color-primary);
}

/* Scheduled draft states */
.admin-email-draft-indicator.scheduled {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: #3730a3;
}
.admin-email-draft-indicator.scheduled svg { color: #6366f1; }

.admin-email-draft-item.scheduled {
    border-left: 3px solid #6366f1;
}
.admin-email-draft-scheduled-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.admin-email-draft-scheduled-badge svg { flex-shrink: 0; }

/* Schedule panel */
.admin-email-schedule-panel {
    margin-top: 12px;
}
.admin-email-schedule-inner {
    padding: 16px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-md);
    background: rgba(99, 102, 241, 0.04);
}
.admin-email-schedule-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3730a3;
    margin-bottom: 12px;
}
.admin-email-schedule-header svg { flex-shrink: 0; color: #6366f1; }
.admin-email-schedule-fields {
    display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.admin-email-schedule-field {
    flex: 1; min-width: 140px;
}
.admin-email-schedule-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.admin-email-schedule-field input {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-sizing: border-box;
}
.admin-email-schedule-field input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.admin-email-schedule-actions {
    display: flex; gap: 8px; justify-content: flex-end;
}

.ms-btn-sm {
    padding: 6px 14px;
    font-size: 0.78rem;
}

.ms-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ms-btn-ghost:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.admin-email-preview-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.admin-email-preview-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.admin-email-preview-content {
    position: relative; width: 100%; max-width: 660px;
    max-height: 90vh; background: var(--color-surface);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column; overflow: hidden;
}
.admin-email-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.admin-email-preview-header h3 { font-size: 0.95rem; font-weight: 600; margin: 0; }
.admin-email-preview-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: none; background: none; font-size: 1.3rem; cursor: pointer;
    color: var(--color-text-tertiary); border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.admin-email-preview-close:hover { background: var(--color-bg); color: var(--color-text); }
.admin-email-preview-iframe-wrap { flex: 1; overflow: auto; padding: 20px; background: #e5e7eb; }
.admin-email-preview-iframe {
    width: 100%; min-height: 500px; border: none;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.admin-email-preview-footer {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 20px; border-top: 1px solid var(--color-border);
}

/* Send-test-email modal */
.admin-email-test-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.admin-email-test-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.admin-email-test-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dialogSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-email-test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
}
.admin-email-test-header h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.admin-email-test-header h3 svg { color: var(--color-primary); flex-shrink: 0; }
.admin-email-test-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: none; border: none;
    border-radius: var(--radius-sm);
    font-size: 1.4rem; line-height: 1;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.admin-email-test-close:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.admin-email-test-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    min-width: 0;
}
.admin-email-test-hint {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.admin-email-test-hint strong { color: var(--color-text); font-weight: 600; }
.admin-email-test-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.admin-email-test-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
    min-width: 0;
}
.admin-email-test-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(38,166,154,0.1);
}
.admin-email-test-selected {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}
.admin-email-test-selected .admin-email-test-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
}
.admin-email-test-selected input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.admin-email-test-selected-names {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.admin-email-test-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-primary-dark, var(--color-primary));
}
.admin-email-test-chip-more {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}
.admin-email-test-note {
    margin: 14px 0 0;
    font-size: 0.76rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}
.admin-email-test-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.admin-email-test-footer .ms-btn { min-height: 40px; }

@media (max-width: 640px) {
    .admin-email-test-modal { padding: 0; align-items: stretch; }
    .admin-email-test-content {
        max-width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        border-radius: 0;
    }
    .admin-email-test-header {
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top, 0px));
    }
    .admin-email-test-body { padding: 16px; }
    .admin-email-test-footer {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        flex-direction: column-reverse;
    }
    .admin-email-test-footer .ms-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
    .admin-email-test-input { font-size: 16px; padding: 13px 14px; }
}

@media (max-width: 640px) {
    .admin-email-mode-tabs { flex-direction: column; }
    .admin-email-mode-btn { justify-content: center; }
    .admin-email-recipients-header { flex-direction: column; align-items: stretch; }
    .admin-email-select-actions { justify-content: flex-end; }
    .admin-email-actions { flex-direction: column; }
    .admin-email-actions-left { width: 100%; }
    .admin-email-actions-right { width: 100%; flex-direction: column; }
    .admin-email-actions .ms-btn { width: 100%; justify-content: center; }
    .admin-email-actions-right .ms-btn { width: 100%; justify-content: center; }
    .admin-email-toolbar { gap: 1px; padding: 4px; }
    .admin-email-toolbar-sep { display: none; }
    .admin-email-tb-btn { width: 28px; height: 28px; }
    .admin-email-preview-content { max-width: 100%; }
    .admin-email-preview-iframe-wrap { padding: 10px; }
    .admin-email-draft-indicator { font-size: 0.78rem; flex-wrap: wrap; }
    .admin-email-schedule-fields { flex-direction: column; }
    .admin-email-schedule-actions { flex-direction: column; }
    .admin-email-schedule-actions .ms-btn { width: 100%; justify-content: center; }
}

/* ADMIN — COLLAPSIBLE CARDS + ORDERING */
#page-admin .mine-sider-section {
    display: flex;
    flex-direction: column;
}
#page-admin .mine-sider-section > .page-title { order: 0; }
#admin-card-invite { order: 1; }
#admin-card-beta-apps { order: 2; }
#admin-card-markers { order: 3; }
#admin-card-catalog { order: 4; }
#admin-card-users { order: 5; }
#admin-card-email { order: 6; }
#admin-card-email-log { order: 7; }
#admin-card-invitations { order: 8; }


.admin-card-deeplink-highlight {
    box-shadow: 0 0 0 4px rgba(67, 165, 153, 0.18) !important;
    transition: box-shadow 0.3s ease;
}

.admin-card-collapsible > .ms-card-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.admin-card-collapsible > .ms-card-header h3 {
    flex: 1;
    min-width: 0;
}
.admin-card-chevron {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    transition: transform 0.25s ease;
    margin-left: 8px;
}
.admin-card-collapsed > .ms-card-header {
    border-bottom-color: transparent;
}
.admin-card-collapsed .admin-card-chevron {
    transform: rotate(-90deg);
}
.admin-card-collapsed > .ms-card-body {
    display: none;
}

/* Header actions area (e.g. hide-button next to chevron) */
.admin-card-header-actions {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}
.admin-card-hide-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; background: transparent;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}
.admin-card-hide-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* Restore-banner shown when an admin section is hidden */
.admin-restore-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.admin-restore-banner svg {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}
.admin-restore-banner > span {
    flex: 1; min-width: 0;
}
.admin-restore-banner strong {
    color: var(--color-text);
    font-weight: 600;
}
.admin-restore-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.admin-restore-btn:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
}

/* ADMIN — SIKKERHETS-DASHBOARD (P3-runde 2) */
#admin-card-security { order: 99; } /* Plasseres nederst */

.admin-security-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 1px solid var(--color-border-light);
}
.admin-security-tab {
    padding: 8px 14px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-bg);
    color: var(--color-text-secondary); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition-fast);
}
.admin-security-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.admin-security-tab.active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    color: var(--color-primary-dark); font-weight: 600;
}
.admin-security-tab-content { padding-top: 4px; }

/* KPI-kort-grid */
.security-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.security-kpi-card {
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.security-kpi-card .label {
    font-size: 0.74rem; color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.security-kpi-card .value {
    font-size: 1.3rem; font-weight: 700; color: var(--color-text);
    margin-bottom: 4px;
}
.security-kpi-card .sub {
    font-size: 0.78rem; color: var(--color-text-secondary);
}
.security-kpi-card.status-ok      { border-left: 3px solid #22c55e; }
.security-kpi-card.status-warning { border-left: 3px solid #f59e0b; }
.security-kpi-card.status-critical{ border-left: 3px solid #dc2626; }

/* Charts container */
.security-chart-container {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px; margin-bottom: 16px;
}
.security-chart-container h4 {
    margin: 0 0 12px; font-size: 0.92rem; font-weight: 600;
    color: var(--color-text);
}
.security-chart-canvas-wrap {
    position: relative; height: 240px;
}

/* Tabeller */
.security-table {
    width: 100%; border-collapse: collapse; font-size: 0.84rem;
}
.security-table th, .security-table td {
    padding: 9px 10px; text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}
.security-table th {
    background: var(--color-bg); color: var(--color-text-secondary);
    font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.security-table tbody tr:hover { background: var(--color-bg); }
.security-table .ip { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-secondary); }
.security-table .severity-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 600;
}
.severity-info     { background: #dbeafe; color: #1e40af; }
.severity-low      { background: #e0f2fe; color: #075985; }
.severity-medium   { background: #fef3c7; color: #92400e; }
.severity-high     { background: #ffedd5; color: #9a3412; }
.severity-critical { background: #fee2e2; color: #991b1b; }

/* Action-knapper */
.security-action-btn {
    padding: 5px 10px; font-size: 0.78rem; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-primary); cursor: pointer; transition: all var(--transition-fast);
}
.security-action-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
.security-action-btn.danger { color: #dc2626; }
.security-action-btn.danger:hover { background: #fee2e2; border-color: #dc2626; }
.security-action-btn.outline { background: transparent; }
.security-action-btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.security-action-btn.primary:hover { filter: brightness(0.92); }
.security-action-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Cron-jobber dashboard (Sikkerhet) ───────────────────────── */
.cron-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
    border-radius: 999px; font-size: 0.68rem; font-weight: 700;
    background: #fef3c7; color: #92400e; line-height: 1;
}
.cron-tab-badge.is-error { background: #fee2e2; color: #b91c1c; }

.cron-dash-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.cron-dash-title {
    margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--color-text);
}
.cron-dash-sub {
    margin: 0; font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.45; max-width: 52ch;
}
#cron-refresh-btn { display: inline-flex; align-items: center; gap: 6px; }

.cron-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.cron-attention {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-md);
    font-size: 0.86rem; line-height: 1.4;
}
.cron-attention strong { display: block; margin-bottom: 2px; }
.cron-attention span { color: inherit; opacity: 0.9; }
.cron-attention.is-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.cron-attention.is-critical { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.cron-attention-icon {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; background: currentColor; color: #fff;
    /* invert: use bg from parent via filter trick — solid pill instead */
    background: #f59e0b; color: #fff;
}
.cron-attention.is-critical .cron-attention-icon { background: #dc2626; }
.cron-attention .security-action-btn { margin-left: auto; }

.cron-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-bottom: 12px;
}
.cron-search-wrap {
    position: relative; flex: 1 1 220px; min-width: 180px; max-width: 340px;
}
.cron-search-wrap > svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-tertiary); pointer-events: none;
}
.cron-search {
    width: 100%; padding: 9px 12px 9px 34px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text);
    font-size: 0.86rem; outline: none; transition: border-color var(--transition-fast);
}
.cron-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }

.cron-filter-pills, .cron-cat-pills {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cron-cat-pills { margin-bottom: 14px; }
.cron-pill, .cron-cat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 500;
    transition: all var(--transition-fast);
}
.cron-pill:hover:not([disabled]), .cron-cat-pill:hover {
    border-color: var(--color-primary); color: var(--color-primary);
}
.cron-pill.is-active, .cron-cat-pill.is-active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    color: var(--color-primary-dark); font-weight: 600;
}
.cron-pill[disabled] { opacity: 0.35; cursor: not-allowed; }
.cron-pill-n {
    display: inline-flex; min-width: 16px; justify-content: center;
    font-variant-numeric: tabular-nums; font-size: 0.72rem; opacity: 0.75;
}
.cron-pill.status-error.is-active { border-color: #dc2626; background: #fee2e2; color: #b91c1c; }
.cron-pill.status-stale.is-active { border-color: #d97706; background: #fef3c7; color: #92400e; }
.cron-pill.status-ok.is-active { border-color: #16a34a; background: #dcfce7; color: #15803d; }

.cron-result-meta {
    font-size: 0.78rem; color: var(--color-text-tertiary);
    margin: 0 0 10px;
}

.cron-group { margin-bottom: 18px; }
.cron-group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 8px; padding: 0 2px;
}
.cron-group-head h4 {
    margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.cron-group-count { font-size: 0.74rem; color: var(--color-text-tertiary); }
.cron-group-list {
    display: flex; flex-direction: column; gap: 6px;
}

.cron-job {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
.cron-job:hover, .cron-job:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cron-job.is-open {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.cron-job.status-error { border-left: 3px solid #dc2626; }
.cron-job.status-stale { border-left: 3px solid #f59e0b; }
.cron-job.status-ok { border-left: 3px solid #22c55e; }
.cron-job.status-unknown { border-left: 3px solid #94a3b8; }

.cron-job-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px 14px;
    padding: 12px 14px; cursor: pointer;
}
.cron-status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px; padding: 3px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap;
}
.cron-status-pill.status-ok { background: #dcfce7; color: #15803d; }
.cron-status-pill.status-error { background: #fee2e2; color: #b91c1c; }
.cron-status-pill.status-stale { background: #fef3c7; color: #92400e; }
.cron-status-pill.status-unknown { background: #e2e8f0; color: #475569; }

.cron-job-title {
    font-size: 0.9rem; font-weight: 600; color: var(--color-text);
    line-height: 1.3;
}
.cron-job-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
    margin-top: 3px; font-size: 0.78rem; color: var(--color-text-secondary);
}
.cron-dot { margin: 0 6px; opacity: 0.5; }

.cron-job-metrics { justify-self: end; }
.cron-chevron {
    color: var(--color-text-tertiary); transition: transform 0.18s ease;
    flex-shrink: 0;
}
.cron-job.is-open .cron-chevron { transform: rotate(180deg); }

.cron-chips {
    display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end;
}
.cron-chip {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    background: var(--color-bg); border: 1px solid var(--color-border-light);
    font-size: 0.72rem; line-height: 1.2; white-space: nowrap;
}
.cron-chip-k { color: var(--color-text-tertiary); text-transform: lowercase; }
.cron-chip-v { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.cron-chip.tone-good .cron-chip-v { color: #15803d; }
.cron-chip.tone-bad .cron-chip-v { color: #b91c1c; }

.cron-history {
    border-top: 1px solid var(--color-border-light);
    padding: 10px 14px 14px; background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}
.cron-history-head {
    font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-text-tertiary); margin-bottom: 8px;
}
.cron-history-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.cron-history-item {
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px; align-items: start;
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: var(--color-surface); border: 1px solid var(--color-border-light);
    border-left: 3px solid #22c55e;
}
.cron-history-item.status-error { border-left-color: #dc2626; }
.cron-history-item time {
    font-family: var(--font-mono); font-size: 0.74rem;
    color: var(--color-text-secondary); padding-top: 2px;
}
.cron-history-item .cron-chips { justify-content: flex-start; }

.cron-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 20px; text-align: center;
    border: 1px dashed var(--color-border); border-radius: var(--radius-md);
    color: var(--color-text-secondary); font-size: 0.88rem;
}
.cron-empty strong { color: var(--color-text); font-size: 0.95rem; }
.cron-empty-inline { margin: 0; font-size: 0.82rem; color: var(--color-text-tertiary); }

.cron-system-teaser-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}

@media (max-width: 720px) {
    .cron-job-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "status title chev"
            "metrics metrics metrics";
    }
    .cron-status-pill { grid-area: status; min-width: 0; }
    .cron-job-info { grid-area: title; }
    .cron-chevron { grid-area: chev; }
    .cron-job-metrics { grid-area: metrics; justify-self: start; }
    .cron-chips { justify-content: flex-start; }
    .cron-history-item { grid-template-columns: 1fr; gap: 6px; }
    .cron-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.security-info-box {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-primary-bg);
    border-left: 3px solid var(--color-primary);
    color: var(--color-text);
}
.security-info-box h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
}
.security-info-box.warmup {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.security-info-box.warmup h4 { color: #92400e; }
.security-info-box.ready {
    background: #d1fae5;
    border-left-color: #10b981;
}
.security-info-box.ready h4 { color: #065f46; }

/* Paginering-rad (CSP, audit, security-events) */
.security-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 640px) {
    .admin-security-tabs { gap: 4px; padding-bottom: 8px; }
    .admin-security-tab {
        padding: 8px 12px;
        font-size: 0.78rem;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .security-kpi-grid { grid-template-columns: 1fr; }
    .security-table { font-size: 0.78rem; }
    .security-table th, .security-table td { padding: 7px 6px; }
    .security-chart-canvas-wrap { height: 200px; }

    

    
    .admin-user-link,
    .admin-ip-link {
        display: inline-block;
        min-height: 30px;
        padding: 4px 2px;
        line-height: 1.35;
    }

    /* IP-details-modal: kompakt padding + responsiv grid */
    .admin-ip-details-modal .modal-dialog {
        max-width: 100% !important;
    }
    .admin-ip-details-modal .modal-dialog > div[style*="padding:24px"] {
        padding: 16px !important;
    }
    .admin-ip-details-modal h3 { font-size: 1rem; word-break: break-all; }
    .admin-ip-details-modal h4 { font-size: 0.86rem; }
    /* Grid inni IP-details — stable felter i én kolonne */
    .admin-ip-details-modal div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    /* Sparkline: scale ned bar-bredden */
    .admin-ip-details-modal div[style*="height:60px"] > div {
        width: 8px !important;
    }

    /* Cross-tab filter banner: stable knapper på mobil */
    #cross-tab-filter-banner {
        flex-direction: column;
        align-items: flex-start !important;
    }
    #cross-tab-filter-banner button {
        margin-left: 0 !important;
        min-height: 36px;
        padding: 6px 12px;
    }

    /* Live-feed kontroller — stable vertikalt, touch-friendly */
    [data-sec-content="live-feed"] .security-chart-container > div[style*="display:flex"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
    }
    [data-sec-content="live-feed"] select#live-feed-min-sev {
        width: 100%;
        min-height: 40px;
        font-size: 16px; /* iOS-zoom-prevent */
    }
    [data-sec-content="live-feed"] label[for="live-feed-active"],
    [data-sec-content="live-feed"] label:has(#live-feed-active) {
        font-size: 0.92rem;
    }
    [data-sec-content="live-feed"] #live-feed-active {
        min-width: 22px;
        min-height: 22px;
    }
    [data-sec-content="live-feed"] #live-feed-status {
        margin-left: 0 !important;
        text-align: left;
    }
    /* Live-feed-items mer kompakte */
    .live-feed-item {
        padding: 12px !important;
    }

    
    .security-chart-container .security-table {
        display: block;
    }
    .security-chart-container .security-table thead { display: none; }
    .security-chart-container .security-table tbody { display: block; }
    .security-chart-container .security-table tr {
        display: block;
        margin-bottom: 12px;
        background: var(--color-bg);
        border-radius: 8px;
        border: 1px solid var(--color-border-light, #f3f4f6);
        padding: 8px;
    }
    .security-chart-container .security-table td {
        display: block;
        padding: 6px 4px !important;
        border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    }
    .security-chart-container .security-table td:last-child {
        border-bottom: none;
        text-align: center;
    }
    /* Knapper i siste celle blir touch-friendly */
    .security-chart-container .security-table td button {
        min-height: 36px;
        padding: 6px 14px;
        margin: 2px;
    }
    
    .audit-cards-wrap .security-table { display: table; }
    .audit-cards-wrap .security-table thead { display: table-header-group; }
    .audit-cards-wrap .security-table tbody { display: table-row-group; }
    .audit-cards-wrap .security-table tr { display: table-row; margin: 0; background: transparent; border: 0; padding: 0; }
    .audit-cards-wrap .security-table td { display: table-cell; border-bottom: 1px solid var(--color-border); }

    
    .admin-ip-details-modal .security-table { display: block; }
    .admin-ip-details-modal .security-table thead { display: none; }
    .admin-ip-details-modal .security-table tbody { display: block; }
    .admin-ip-details-modal .security-table tr {
        display: block;
        margin-bottom: 10px;
        background: var(--color-bg);
        border-radius: 6px;
        border: 1px solid var(--color-border-light, #f3f4f6);
        padding: 8px;
    }
    .admin-ip-details-modal .security-table td {
        display: block;
        padding: 4px 0 !important;
        border: 0;
    }
}


@media (min-width: 641px) and (max-width: 768px) {
    .admin-ip-details-modal div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


.audit-filter-row {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.5fr 1fr 1fr auto;
    gap: 10px; margin-bottom: 12px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.audit-filter-row input,
.audit-filter-row select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.86rem;
}
.audit-filter-row input:focus,
.audit-filter-row select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(38,166,154,0.1);
}
.audit-filter-row .audit-search {
    grid-column: 1 / -1;
}
.audit-filter-clear {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.audit-filter-clear:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Action-kategori-badge */
.audit-action-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.audit-cat-auth         { background: #dbeafe; color: #1e40af; }
.audit-cat-admin        { background: #ede9fe; color: #5b21b6; }
.audit-cat-ai           { background: #cffafe; color: #155e75; }
.audit-cat-payment      { background: #d1fae5; color: #065f46; }
.audit-cat-integrations { background: #fce7f3; color: #9d174d; }
.audit-cat-sharing      { background: #fef3c7; color: #92400e; }
.audit-cat-data         { background: #dcfce7; color: #166534; }
.audit-cat-security     { background: #fee2e2; color: #991b1b; }
.audit-cat-system       { background: #f3f4f6; color: #374151; }
.audit-cat-other        { background: #f3f4f6; color: #374151; }

/* Audit-log: kort-visning på mobil */
.audit-card {
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}
.audit-card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.audit-card-time {
    font-size: 0.78rem; color: var(--color-text-tertiary);
    font-family: var(--font-mono);
}
.audit-card-action {
    font-weight: 600; color: var(--color-text); font-size: 0.92rem;
    margin: 4px 0;
}
.audit-card-meta {
    font-size: 0.82rem; color: var(--color-text-secondary);
    margin-top: 6px;
}
.audit-card-meta .label { color: var(--color-text-tertiary); }
.audit-card-details {
    margin-top: 8px; padding: 8px 10px;
    background: var(--color-bg);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
}

/* Pagination */
.audit-pagination {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 16px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.audit-page-info {
    font-size: 0.84rem; color: var(--color-text-secondary);
}
.audit-page-buttons {
    display: flex; gap: 6px;
}
.audit-page-btn {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.audit-page-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.audit-page-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* Mobile */
@media (max-width: 768px) {
    .audit-filter-row {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
    }
    .audit-filter-row .audit-search { grid-column: 1 / -1; }
    .audit-filter-row [data-audit-user-email] { grid-column: 1 / -1; }
    .audit-filter-row select,
    .audit-filter-row input { font-size: 16px; } /* unngå iOS auto-zoom */
    .audit-filter-clear { grid-column: 1 / -1; }

    /* Skjul tabell, vis kort-visning */
    .audit-table-wrap { display: none; }
    .audit-cards-wrap { display: block; }
}
@media (min-width: 769px) {
    .audit-cards-wrap { display: none; }
    .audit-table-wrap { display: block; }
}

/* Tablet — 3 kolonner */
@media (min-width: 769px) and (max-width: 1100px) {
    .audit-filter-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .audit-filter-row .audit-search { grid-column: 1 / -1; }
    .audit-filter-row [data-audit-user-email] { grid-column: 1 / -1; }
}

/* ADMIN — BANKID-BRUKERE (pre-launch oversikt) */
#admin-card-bankid-users { order: 9; }

.admin-bankid-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-bankid-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: calc(var(--radius-md) - 4px);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.admin-bankid-tab:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}
.admin-bankid-tab.active {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.admin-bankid-tab.active svg { color: var(--color-primary); }
.admin-bankid-tab svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.admin-bankid-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    line-height: 1;
}
.admin-bankid-tab.active .admin-bankid-tab-count {
    background: var(--color-primary-bg);
    border-color: transparent;
    color: var(--color-primary-dark);
}

.admin-bankid-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.admin-bankid-search-wrap {
    position: relative;
    display: flex; align-items: center;
    flex: 1; min-width: 200px;
    max-width: 360px;
}
.admin-bankid-search-wrap svg {
    position: absolute; left: 12px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}
.admin-bankid-search-wrap input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.85rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-bankid-search-wrap input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.admin-bankid-count {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.admin-bankid-table th { white-space: nowrap; }
.admin-bankid-email {
    color: var(--color-text-secondary);
    word-break: break-all;
}
.admin-bankid-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.admin-bankid-date span { display: block; }
.admin-bankid-ago {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    margin-top: 2px;
}

.admin-bankid-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-secondary);
}
.admin-bankid-empty svg {
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
    opacity: 0.7;
}
.admin-bankid-empty h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.admin-bankid-empty p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
}

/* Responsive — hide secondary columns on small screens */
@media (max-width: 900px) {
    .admin-bankid-table .admin-bankid-col-account,
    .admin-bankid-table .admin-bankid-col-provider {
        display: none;
    }
}
@media (max-width: 600px) {
    .admin-bankid-table .admin-bankid-col-last { display: none; }
    .admin-bankid-toolbar { gap: 8px; }
    .admin-bankid-search-wrap { max-width: 100%; }
}

/* ADMIN — E-POSTHISTORIKK */
.admin-email-log-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.admin-email-log-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
}
.admin-email-log-search-wrap svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.admin-email-log-search-wrap input {
    border: none;
    background: transparent;
    font-size: 0.82rem;
    width: 100%;
    outline: none;
    color: var(--color-text);
}
.admin-email-log-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.admin-email-log-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-email-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.admin-email-log-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--color-border-light);
    white-space: nowrap;
}
.admin-email-log-table thead th.admin-sortable {
    cursor: pointer;
    user-select: none;
}
.admin-email-log-table thead th.admin-sortable:hover {
    color: var(--color-primary);
}
.admin-email-log-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
    cursor: pointer;
}
.admin-email-log-table tbody tr:last-child { border-bottom: none; }
.admin-email-log-table tbody tr:hover { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
.admin-email-log-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    color: var(--color-text);
}
.admin-email-log-date {
    display: block;
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.82rem;
}
.admin-email-log-time {
    display: block;
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    margin-top: 1px;
}
.admin-email-log-subject {
    font-weight: 500;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-email-log-recipients {
    color: var(--color-text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}
.admin-email-log-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.admin-email-log-badge.newsletter {
    background: rgba(38, 166, 154, 0.12);
    color: var(--color-primary-dark, #00796b);
}
.admin-email-log-badge.individual {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}
.admin-email-log-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.admin-email-log-status.success {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.admin-email-log-status.partial {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* ADMIN — E-POST ÅPNINGSSPORING (track_opens) */
.admin-email-track-row {
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}
.admin-email-track-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.admin-email-track-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.admin-email-track-switch {
    flex-shrink: 0;
    margin-top: 2px;
    width: 36px; height: 20px;
    background: var(--color-border);
    border-radius: 99px;
    position: relative;
    transition: background var(--transition-fast);
}
.admin-email-track-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--transition-fast);
}
.admin-email-track-toggle input[type="checkbox"]:checked + .admin-email-track-switch {
    background: var(--color-primary);
}
.admin-email-track-toggle input[type="checkbox"]:checked + .admin-email-track-switch::after {
    transform: translateX(16px);
}
.admin-email-track-toggle input[type="checkbox"]:focus-visible + .admin-email-track-switch {
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.admin-email-track-label {
    display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.admin-email-track-label strong {
    font-size: 0.88rem; font-weight: 600; color: var(--color-text);
}
.admin-email-track-hint {
    font-size: 0.75rem; color: var(--color-text-secondary); line-height: 1.45;
}
.admin-email-override-row {
    border: 1px solid rgba(220,38,38,0.20);
    background: rgba(220,38,38,0.04);
    border-radius: 10px; padding: 12px 14px; margin-top: 10px;
}
.admin-email-override-row .admin-email-track-toggle input:checked ~ .admin-email-track-switch {
    background: var(--color-danger);
}

/* Banner i test-modal som forteller at sporing er aktiv */
.admin-email-test-track-banner {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 12px;
    background: var(--color-primary-bg);
    border: 1px solid rgba(38, 166, 154, 0.25);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: var(--color-primary-dark);
    line-height: 1.45;
}
.admin-email-test-track-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-primary);
}
.admin-email-test-track-banner > div { display: flex; flex-direction: column; gap: 2px; }
.admin-email-test-track-banner strong { font-weight: 700; }

/* Opens-pille i sendt-liste */
.admin-email-log-opens {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 0.74rem; font-weight: 600;
    white-space: nowrap;
}
.admin-email-log-opens svg { flex-shrink: 0; }
.admin-email-log-opens.opens-high { background: var(--color-success-bg); color: #065f46; }
.admin-email-log-opens.opens-mid  { background: rgba(38, 166, 154, 0.1); color: var(--color-primary-dark); }
.admin-email-log-opens.opens-low  { background: var(--color-warning-bg); color: #92400e; }
.admin-email-log-opens.opens-zero { background: var(--color-bg); color: var(--color-text-tertiary); border: 1px dashed var(--color-border); }
.admin-email-log-opens.opens-disabled { color: var(--color-text-tertiary); font-weight: 400; }

/* Tabs i e-post-detalj-modal */
.admin-email-preview-tabs {
    display: flex; gap: 4px;
    padding: 8px 16px 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
}
.admin-email-preview-tab {
    background: transparent; border: none;
    padding: 10px 16px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition-fast);
}
.admin-email-preview-tab:hover { color: var(--color-text); }
.admin-email-preview-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.admin-email-preview-tab-content {
    display: none;
    overflow-y: auto;
    flex: 1; min-height: 0;
}
.admin-email-preview-tab-content.active { display: flex; flex-direction: column; }

/* Per-mottaker åpningstabell */
.admin-email-opens-summary {
    padding: 14px 20px;
    font-size: 0.88rem; color: var(--color-text-secondary);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
}
.admin-email-opens-summary strong {
    color: var(--color-success);
    font-size: 1rem;
}
.opens-pending {
    color: var(--color-text-tertiary);
    font-size: 0.78rem; margin-left: 8px;
}
.admin-email-opens-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-email-opens-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.admin-email-opens-table th {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 0.72rem;
    padding: 10px 14px; text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0;
}
.admin-email-opens-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
    vertical-align: top;
}
.admin-email-opens-table tr.opens-row-not-opened { background: var(--color-bg); }
.opens-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 0.72rem; font-weight: 600;
    white-space: nowrap;
}
.opens-status-opened { background: var(--color-success-bg); color: #065f46; }
.opens-status-not-opened {
    background: var(--color-bg);
    color: var(--color-text-tertiary);
    border: 1px dashed var(--color-border);
}
.opens-recipient-name { font-weight: 600; color: var(--color-text); }
.opens-recipient-email {
    font-size: 0.74rem; color: var(--color-text-tertiary);
    margin-top: 2px;
    word-break: break-all;
}
.opens-count-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    border-radius: 99px;
    font-size: 0.68rem; font-weight: 700;
    margin-left: 4px;
}
.opens-meta { font-size: 0.74rem; color: var(--color-text-tertiary); line-height: 1.4; }
.opens-meta-col { max-width: 220px; }
.opens-dim { color: var(--color-text-tertiary); }
.admin-email-opens-footnote {
    padding: 12px 20px 16px;
    font-size: 0.72rem; color: var(--color-text-tertiary);
    line-height: 1.5;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-light);
    margin: 0;
}

@media (max-width: 640px) {
    .admin-email-opens-table th,
    .admin-email-opens-table td { padding: 10px 8px; }
    .opens-meta-col { display: none; }
    .admin-email-track-row { padding: 12px; }
}

.admin-email-log-view-btn {
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.admin-email-log-view-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.admin-email-log-actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap;
}
.admin-email-log-copy-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.admin-email-log-copy-btn:hover {
    background: rgba(38, 166, 154, 0.08);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.admin-email-log-copy-btn svg { flex-shrink: 0; }
@media (max-width: 640px) {
    .admin-email-log-table thead { display: none; }
    .admin-email-log-table,
    .admin-email-log-table tbody,
    .admin-email-log-table tr,
    .admin-email-log-table td { display: block; width: 100%; }
    .admin-email-log-table tbody tr {
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
    }
    .admin-email-log-table tbody td {
        padding: 2px 0;
        text-align: left;
    }
    .admin-email-log-subject { max-width: 100%; white-space: normal; }
    .admin-email-log-recipients { max-width: 100%; }
}

/* ADMIN — BETA APPLICATIONS */
.beta-apps-count { margin-left: 8px; font-size: 0.7rem; vertical-align: middle; }
.beta-apps-group { margin-bottom: 16px; }
.beta-apps-group:last-child { margin-bottom: 0; }
.beta-apps-group-header { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 10px; }
.beta-apps-group-header-handled { color: var(--color-text-tertiary); }
.beta-app-row { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); margin-bottom: 8px; background: var(--color-surface); transition: var(--transition-fast); overflow: hidden; }
.beta-app-row:last-child { margin-bottom: 0; }
.beta-app-row:not(.beta-app-handled):hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(38,166,154,0.1); }
.beta-app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.beta-app-summary { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; cursor: pointer; min-width: 0; }
.beta-app-name-email { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beta-app-name-email strong { font-size: 0.88rem; color: var(--color-text); }
.beta-app-email { font-size: 0.78rem; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-app-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.beta-app-date { font-size: 0.72rem; color: var(--color-text-tertiary); white-space: nowrap; }
.beta-reviewed { font-size: 0.72rem; color: var(--color-text-tertiary); white-space: nowrap; }
.beta-chevron { transition: transform 0.2s ease; color: var(--color-text-tertiary); flex-shrink: 0; }
.beta-app-actions { display: flex; gap: 6px; flex-shrink: 0; }
.beta-app-actions .beta-approve-btn:hover { border-color: var(--color-success); color: #065f46; background: var(--color-success-bg); }
.beta-app-actions .beta-reject-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }
.beta-app-actions .beta-resend-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.beta-app-details { padding: 0 16px 16px; border-top: 1px solid var(--color-border-light); }
.beta-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding-top: 14px; }
.beta-app-field { display: flex; flex-direction: column; gap: 3px; }
.beta-field-label { font-size: 0.7rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.beta-app-field span:last-child { font-size: 0.84rem; color: var(--color-text); }
.beta-app-other { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.beta-app-other p { font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.5; margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }
.beta-app-handled { opacity: 0.7; }
.beta-app-handled:hover { opacity: 1; }
@media (max-width: 640px) {
    .beta-app-header { flex-direction: column; align-items: flex-start; }
    .beta-app-summary { flex-direction: column; align-items: flex-start; }
    .beta-app-actions { width: 100%; }
    .beta-app-actions .admin-invite-action-btn { flex: 1; justify-content: center; }
    .beta-app-grid { grid-template-columns: repeat(2, 1fr); }
    .beta-app-meta { width: 100%; }
}

/* ADMIN — MISSING MARKERS */
.amm-group { margin-bottom: 16px; }
.amm-group:last-child { margin-bottom: 0; }
.amm-group-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-light);
}
.amm-group-header-handled { color: var(--color-text-tertiary); }
.amm-group-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 12px; font-size: 0.72rem; font-weight: 700;
}
.amm-badge-new { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.amm-badge-handled { background: var(--color-bg); color: var(--color-text-tertiary); }
.amm-toggle-handled {
    margin-left: auto; background: none; border: none; padding: 4px;
    cursor: pointer; color: var(--color-text-tertiary); transition: color 0.15s;
}
.amm-toggle-handled:hover { color: var(--color-text); }
.amm-toggle-handled svg { transition: transform 0.2s ease; }
.amm-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; margin-bottom: 4px;
    background: var(--color-bg); border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.15s, border-color 0.15s;
    flex-wrap: wrap;
}
.amm-row:hover { border-color: var(--color-border); box-shadow: 0 1px 4px rgba(0,30,25,0.06); }
.amm-row-handled { opacity: 0.65; }
.amm-row-main { flex: 1; min-width: 0; }
.amm-marker-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); word-break: break-word; }
.amm-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.amm-user { font-size: 0.76rem; color: var(--color-text-secondary); }
.amm-date { font-size: 0.76rem; color: var(--color-text-tertiary); }
.amm-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.amm-add-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; font-size: 0.78rem; font-weight: 600;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s; white-space: nowrap;
}
.amm-add-btn:hover { background: var(--color-primary-dark); box-shadow: 0 2px 6px rgba(0,77,64,0.15); }
.amm-dismiss-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--color-text-tertiary); transition: all 0.15s;
}
.amm-dismiss-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.amm-dismiss-btn:disabled, .amm-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.amm-form {
    width: 100%; margin-top: 10px; padding: 16px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); animation: slideDown 0.2s ease-out;
}
.amm-form-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
.amm-form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.amm-field label {
    display: block; font-size: 0.74rem; font-weight: 600;
    color: var(--color-text-secondary); margin-bottom: 4px;
}
.amm-req { color: var(--color-danger); }
.amm-input {
    width: 100%; padding: 8px 10px; font-size: 0.82rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg); color: var(--color-text);
    transition: border-color 0.15s;
}
.amm-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.12); }
select.amm-input { cursor: pointer; }
.amm-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.amm-submit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; font-size: 0.82rem; font-weight: 600;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.amm-submit-btn:hover { background: var(--color-primary-dark); }
.amm-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.amm-cancel-btn {
    padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-text-secondary); transition: all 0.15s;
}
.amm-cancel-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.amm-form-error {
    margin-top: 8px; padding: 8px 12px; font-size: 0.78rem;
    color: var(--color-danger); background: var(--color-danger-bg);
    border-radius: var(--radius-sm);
}
.amm-map-info { font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 10px; line-height: 1.5; }
.amm-map-search { width: 100%; }
.amm-map-results { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.amm-map-result { display: block; width: 100%; text-align: left; padding: 9px 12px; font-size: 0.85rem; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); color: var(--color-text); }
.amm-map-result:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
.amm-map-result:disabled { opacity: 0.6; cursor: default; }
.amm-map-empty { padding: 12px; text-align: center; font-size: 0.82rem; color: var(--color-text-tertiary); }
.admin-badge-info { background: rgba(38,166,154,0.1); color: var(--color-primary-dark); }
.amm-map-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; background: var(--color-primary-bg); color: var(--color-primary); border: 1px solid rgba(38,166,154,0.2); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.amm-map-btn:hover { background: var(--color-primary); color: #fff; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }

@media (max-width: 640px) {
    .amm-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .amm-row-actions { width: 100%; justify-content: flex-end; }
    .amm-form-grid { grid-template-columns: 1fr; }
    .amm-form-grid-4 { grid-template-columns: 1fr 1fr; }
    .amm-form-actions { flex-wrap: wrap; }
}

/* ADMIN — BIOMARKER CATALOG */
.abmc-toolbar {
    display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
.abmc-search {
    flex: 1; min-width: 180px; padding: 9px 12px; font-size: 0.84rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-text);
    transition: border-color 0.15s;
}
.abmc-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.12); }
.abmc-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; font-size: 0.82rem; font-weight: 600;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); cursor: pointer; white-space: nowrap;
    transition: background 0.15s;
}
.abmc-add-btn:hover { background: var(--color-primary-dark); }
.abmc-count {
    font-size: 0.78rem; color: var(--color-text-tertiary); white-space: nowrap;
}
.abmc-list { display: flex; flex-direction: column; gap: 3px; }
.abmc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; background: var(--color-bg); border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light); transition: border-color 0.15s, box-shadow 0.15s;
}
.abmc-row:hover { border-color: var(--color-border); box-shadow: 0 1px 4px rgba(0,30,25,0.06); }
.abmc-row-info { flex: 1; min-width: 0; }
.abmc-row-name { font-size: 0.86rem; font-weight: 600; color: var(--color-text); word-break: break-word; }
.abmc-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.abmc-row-unit { font-size: 0.74rem; color: var(--color-text-tertiary); }
.abmc-badge {
    display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.68rem; font-weight: 600;
    border-radius: 8px; white-space: nowrap;
}
.abmc-badge-info { background: rgba(99,102,241,0.1); color: #6366f1; }
.abmc-badge-opt { background: rgba(59,130,246,0.1); color: #3b82f6; }
.abmc-badge-alias { background: rgba(245,158,11,0.1); color: #d97706; }
.abmc-badge-cat { background: rgba(16,185,129,0.1); color: #059669; }
.abmc-badge-nocat { background: rgba(239,68,68,0.06); color: #dc2626; opacity: 0.7; }
.abmc-edit-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; font-size: 0.76rem; font-weight: 600;
    background: var(--color-surface); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.abmc-edit-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.abmc-empty { padding: 20px; text-align: center; font-size: 0.84rem; color: var(--color-text-tertiary); }

.abmc-drafts-wrap { position: relative; }
.abmc-drafts-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
    background: var(--color-surface); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.abmc-drafts-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.abmc-drafts-btn.has-drafts { border-color: var(--color-warning); color: var(--color-warning); }
.abmc-drafts-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
    min-width: 260px; max-height: 320px; overflow-y: auto;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,30,25,0.12);
}
.abmc-drafts-empty {
    padding: 16px; text-align: center; font-size: 0.8rem; color: var(--color-text-tertiary);
}
.abmc-draft-item {
    display: flex; align-items: center; border-bottom: 1px solid var(--color-border-light);
}
.abmc-draft-item:last-child { border-bottom: none; }
.abmc-draft-load {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border: none; background: none;
    cursor: pointer; text-align: left; transition: background 0.12s;
}
.abmc-draft-load:hover { background: var(--color-surface-hover); }
.abmc-draft-name { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.abmc-draft-date { font-size: 0.72rem; color: var(--color-text-tertiary); }
.abmc-draft-delete {
    padding: 8px 12px; border: none; background: none;
    font-size: 1.1rem; color: var(--color-text-tertiary);
    cursor: pointer; transition: color 0.12s;
}
.abmc-draft-delete:hover { color: var(--color-danger); }

/* ADMIN — MARKER EDITOR MODAL */
.ame-overlay {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; pointer-events: none;
}
.ame-overlay:not(.hidden) { pointer-events: auto; }
.ame-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0); backdrop-filter: blur(0px);
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.ame-overlay.open .ame-backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); }
.ame-card {
    position: relative; width: 100%; max-width: 680px; max-height: 90vh;
    background: var(--color-surface); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex; flex-direction: column;
    opacity: 0; transform: scale(0.95) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.ame-overlay.open .ame-card { opacity: 1; transform: scale(1) translateY(0); }
.ame-header {
    padding: 20px 24px 14px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0;
}
.ame-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ame-title-row h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0; }
.ame-close-btn {
    flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--color-text-tertiary);
    border-radius: var(--radius-sm); transition: all 0.15s;
}
.ame-close-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.ame-subtitle { font-size: 0.78rem; color: var(--color-text-tertiary); margin-top: 4px; }
.ame-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.ame-section { margin-bottom: 22px; }
.ame-section:last-child { margin-bottom: 0; }
.ame-section-title {
    font-size: 0.8rem; font-weight: 700; color: var(--color-text);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.ame-section-title::after {
    content: ''; flex: 1; height: 1px; background: var(--color-border-light);
}
.ame-field { margin-bottom: 10px; }
.ame-field label {
    display: block; font-size: 0.74rem; font-weight: 600;
    color: var(--color-text-secondary); margin-bottom: 4px;
}
.ame-field .ame-req { color: var(--color-danger); }
.ame-input {
    width: 100%; padding: 8px 10px; font-size: 0.84rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg); color: var(--color-text);
    transition: border-color 0.15s; font-family: inherit;
}
.ame-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.12); }
select.ame-input { cursor: pointer; }
textarea.ame-input { resize: vertical; min-height: 80px; line-height: 1.6; }
.ame-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ame-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.ame-range-list { display: flex; flex-direction: column; gap: 8px; }
.ame-range-row {
    display: flex; gap: 6px; align-items: flex-end; padding: 10px;
    background: var(--color-bg); border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light); flex-wrap: wrap;
}
.ame-range-row .ame-field { margin-bottom: 0; flex: 1; min-width: 70px; }
.ame-range-row .ame-field-gender { min-width: 90px; max-width: 110px; }
.ame-range-row .ame-field-age { min-width: 55px; max-width: 75px; }
.ame-range-row .ame-field-val { min-width: 65px; max-width: 90px; }
.ame-range-row .ame-field-op { min-width: 55px; max-width: 70px; }
.ame-range-row .ame-field-opval { min-width: 65px; max-width: 90px; }
.ame-range-type-toggle {
    display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    overflow: hidden; font-size: 0.7rem; margin-bottom: 4px;
}
.ame-range-type-toggle button {
    padding: 3px 8px; background: none; border: none; cursor: pointer;
    color: var(--color-text-tertiary); font-weight: 600; transition: all 0.15s; font-size: 0.7rem;
}
.ame-range-type-toggle button.active {
    background: var(--color-primary); color: #fff;
}
.ame-range-remove {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--color-text-tertiary); transition: all 0.15s; flex-shrink: 0;
    align-self: flex-end; margin-bottom: 1px;
}
.ame-range-remove:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.ame-add-row-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; font-size: 0.76rem; font-weight: 600;
    background: none; border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--color-text-secondary); transition: all 0.15s; margin-top: 4px;
}
.ame-add-row-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }

.ame-chips-container {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 38px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg); cursor: text; align-items: center;
}
.ame-chips-container:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(38,166,154,0.12); }
.ame-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; font-size: 0.76rem; font-weight: 500;
    background: var(--color-primary-bg); color: var(--color-primary);
    border-radius: 12px; white-space: nowrap;
}
.ame-chip-remove {
    width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--color-primary);
    border-radius: 50%; font-size: 0.7rem; padding: 0; transition: all 0.15s;
    line-height: 1;
}
.ame-chip-remove:hover { background: var(--color-danger); color: #fff; }
.ame-category-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ame-cat-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.78rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition-fast); user-select: none; }
.ame-cat-item:hover { border-color: var(--cat-color, var(--color-primary)); color: var(--cat-color, var(--color-primary)); }
.ame-cat-item.ame-cat-active { border-color: var(--cat-color, var(--color-primary)); color: white; background: var(--cat-color, var(--color-primary)); }
.ame-cat-item input[type="checkbox"] { display: none; }
.ame-cat-icon { display: flex; align-items: center; }
.ame-cat-icon svg { width: 13px; height: 13px; }
.ame-cat-name { line-height: 1; }

.ame-chip-input {
    border: none; outline: none; background: none; font-size: 0.82rem;
    color: var(--color-text); flex: 1; min-width: 100px; padding: 2px 0;
    font-family: inherit;
}

.ame-links-list { display: flex; flex-direction: column; gap: 6px; }
.ame-link-row { display: flex; gap: 6px; align-items: center; }
.ame-link-row .ame-input { flex: 1; }
.ame-link-remove {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--color-text-tertiary); transition: all 0.15s; flex-shrink: 0;
}
.ame-link-remove:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }

.ame-ai-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ame-ai-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 0.8rem; font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
    border: none; border-radius: var(--radius-md); cursor: pointer;
    transition: opacity 0.15s, transform 0.15s; white-space: nowrap;
}
.ame-ai-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ame-ai-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ame-ai-status { font-size: 0.76rem; color: var(--color-text-tertiary); }

.ame-preview-pane {
    flex: 1; overflow-y: auto; padding: 24px;
}
.ame-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.ame-preview-header span {
    font-size: 0.92rem; font-weight: 700; color: var(--color-text);
}
.ame-preview-close {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--color-surface-hover); border-radius: 50%;
    font-size: 1.2rem; color: var(--color-text-secondary);
    cursor: pointer; transition: all 0.15s;
}
.ame-preview-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.ame-preview-content .mi-alt-names {
    font-size: 0.8rem; color: var(--color-text-tertiary); margin-bottom: 12px;
}
.ame-preview-table {
    width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 4px;
}
.ame-preview-table th {
    text-align: left; padding: 6px 10px; font-weight: 600; font-size: 0.74rem;
    color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ame-preview-table td {
    padding: 6px 10px; border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}
.ame-footer {
    padding: 14px 24px; border-top: 1px solid var(--color-border-light); flex-shrink: 0;
}
.ame-footer-error {
    padding: 8px 12px; font-size: 0.78rem; margin-bottom: 10px;
    color: var(--color-danger); background: var(--color-danger-bg);
    border-radius: var(--radius-sm);
}
.ame-footer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ame-footer-spacer { flex: 1; }
.ame-draft-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-text-secondary); transition: all 0.15s; white-space: nowrap;
}
.ame-draft-btn:hover { background: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-text-tertiary); }
.ame-preview-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-text-secondary); transition: all 0.15s; white-space: nowrap;
}
.ame-preview-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.ame-cancel-btn {
    padding: 9px 16px; font-size: 0.84rem; font-weight: 500;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-text-secondary); transition: all 0.15s;
}
.ame-cancel-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ame-save-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; font-size: 0.84rem; font-weight: 600;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.ame-save-btn:hover { background: var(--color-primary-dark); }
.ame-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 640px) {
    .ame-overlay { padding: 0; }
    .ame-card { max-width: 100%; max-height: 100vh; border-radius: 0; }
    .ame-header { padding: 16px 16px 10px; }
    .ame-body { padding: 16px; }
    .ame-footer { padding: 12px 16px; }
    .ame-footer-actions { flex-wrap: wrap; }
    .ame-footer-spacer { flex-basis: 100%; height: 0; }
    .ame-draft-btn, .ame-preview-btn, .ame-cancel-btn, .ame-save-btn { flex: 1; justify-content: center; min-width: 0; }
    .ame-preview-pane { padding: 16px; }
    .ame-grid-2, .ame-grid-3 { grid-template-columns: 1fr; }
    .ame-range-row { flex-direction: column; align-items: stretch; }
    .ame-range-row .ame-field { max-width: none; }
    .ame-range-remove { align-self: flex-end; }
    .abmc-toolbar { flex-direction: column; align-items: stretch; }
    .abmc-drafts-dropdown { left: 0; right: auto; }
    .abmc-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .abmc-edit-btn { align-self: flex-end; }
    .ame-ai-row { flex-direction: column; align-items: flex-start; }
}

/* REFERRAL SECTION */
.referral-counter { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 12px; padding: 10px 14px; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); }
.referral-period-info { font-size: 0.78rem; color: var(--color-text-tertiary); margin-left: auto; }
.referral-reward-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--color-success-bg); border: 1px solid rgba(5,150,105,0.15);
    border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; color: #065f46;
}
.referral-info-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.referral-info-toggle:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.referral-info-toggle.active { color: var(--color-primary); }
.referral-info-box { margin-bottom: 16px; padding: 14px 16px; background: var(--color-primary-bg); border: 1px solid rgba(38,166,154,0.15); border-radius: var(--radius-md); }
.referral-info-box.hidden { display: none; }
.referral-info-box h4 { font-size: 0.82rem; font-weight: 600; color: var(--color-primary-dark); margin: 0 0 8px; }
.referral-info-box ul { margin: 0; padding: 0 0 0 18px; }
.referral-info-box li { font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.7; }
.referral-info-more { margin: 10px 0 0; font-size: 0.82rem; }
.referral-info-more a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.referral-exhausted { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; margin-bottom: 12px; background: var(--color-warning-bg); border: 1px solid rgba(245,158,11,0.15); border-radius: var(--radius-md); font-size: 0.82rem; color: #92400e; line-height: 1.5; }
.referral-exhausted svg { flex-shrink: 0; margin-top: 1px; }
.referral-list { margin-top: 8px; }
.referral-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; }
.referral-row:last-child { border-bottom: none; }
.referral-row-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.referral-email { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.referral-status { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.referral-status-success { background: var(--color-success-bg); color: #065f46; }
.referral-status-warning { background: var(--color-warning-bg); color: #92400e; }
.referral-status-info { background: rgba(38,166,154,0.1); color: var(--color-primary-dark); }
.referral-row-actions { display: flex; gap: 2px; flex-shrink: 0; }
.referral-action-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.referral-action-btn.referral-copy-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.referral-action-btn.referral-del-btn:hover { background: var(--color-danger-bg); color: var(--color-danger); }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .markers-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .markers-grid.view-compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 968px) {
    /* Mobil og tablet i portrett: headeren (logo, Mine sider, info) scroller
       med innholdet, mens hovednavigasjonen fester seg øverst. Begge festet
       ville tatt 130 px av en liten skjerm; naven er den man faktisk trenger
       underveis. Målt nav-høyde er 63 px. */
    :root { --header-height: auto; --sticky-top: calc(var(--demo-bar-h) + 64px); }
    #main-header { position: static; height: auto; padding-left: 16px; padding-right: 16px; }
    .header-content { height: auto; padding: 14px 0; gap: 10px; }
    .main-nav { padding: 0 16px; }
    .header-left { order: 1; }
    .header-right { order: 2; }
    .markers-grid { grid-template-columns: 1fr; gap: 16px; }
    .info-grid { grid-template-columns: 1fr 1fr; }
    #main-content { padding: 20px 16px 100px; }
    /* env(): i frittstående PWA på iPhone må naven stoppe under statuslinjen. */
    .main-nav { position: sticky; top: calc(var(--demo-bar-h) + env(safe-area-inset-top, 0px)); z-index: 95; }
    .nav-tabs { justify-content: stretch; }
    .nav-tab { flex: 1; justify-content: center; padding: 14px 8px; font-size: 0.82rem; min-height: 48px; gap: 5px; flex-direction: column; }
    .nav-tab svg { width: 18px; height: 18px; }
    .nav-label { font-size: 0.62rem; line-height: 1; }
    .markers-grid.view-grid { grid-template-columns: repeat(2, 1fr); }
    .markers-grid.view-compact { grid-template-columns: repeat(2, 1fr); }
    .detail-dialog { max-width: 100%; max-height: 100vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .detail-latest-row { flex-wrap: wrap; gap: 16px; }
    .view-mode-btn span { display: none; }
    .add-data-btn span { display: none; }
    .dashboard-toolbar-right { gap: 6px; }
    .sub-banner-content { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 12px; }
    .sub-banner-btn { width: 100%; padding: 12px 20px; }
    .ms-price-highlight { padding: 12px 14px; }
    .ms-price-amount { font-size: 1.3rem; }
    .doctor-banner-content { padding: 10px 16px; flex-wrap: nowrap; gap: 8px; }
    .dbc-left { gap: 8px; }
    .dbc-left strong { font-size: 0.60rem; }
    .dbc-title-full { display: none; }
    .dbc-title-short { display: inline; }
    .dbc-right { width: 100%; justify-content: flex-end; gap: 8px; }
    .dbc-patient-name { font-size: 0.60rem; }
    .dbc-patient-dob { font-size: 0.60rem; }
    .dbc-popover { display: none; }
    .dbc-patient-name { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
    .dbc-note-btn { display: none; }
    .dbc-note-bar:not(.hidden) { display: block; }
    .dpn-overlay { padding: 20px; }
    .dpn-modal { max-width: 100%; max-height: 80vh; max-height: 80dvh; }
    .dpn-modal-header { padding: 16px; }
    .dpn-modal-body { padding: 16px; }
    .dpn-modal-text { font-size: 0.9rem; }
    .admin-btn { padding: 8px 10px; }
    .beta-badge { font-size: 0.5rem; padding: 2px 5px; margin-right: 0; }
    .logout-btn { width: 42px; height: 42px; }
    .info-btn { width: 42px; height: 42px; }
    .section-header { padding: 16px; }
    .section-content { padding: 0 16px 20px; }
    .personal-info-section { border-radius: var(--radius-md); margin-bottom: 20px; }
    .oversikt-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .oversikt-toolbar-right { justify-content: space-between; }
    .oversikt-search-wrapper { max-width: 100%; }
    #oversikt-filter { font-size: 16px; padding: 12px 14px 12px 38px; }
    .oversikt-view-label { display: none; }
    .oversikt-view-btn { padding: 6px 10px; }

    /* Mobile category picker: collapsible panel */
    .cat-mobile-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast);
    }
    .cat-mobile-toggle-left { display: flex; align-items: center; gap: 6px; }
    .cat-mobile-toggle-icon { display: flex; align-items: center; color: var(--cat-color, var(--color-primary)); }
    .cat-mobile-toggle-icon svg { width: 16px; height: 16px; }
    .cat-mobile-toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--cat-color, var(--color-text)); }
    .cat-mobile-toggle-count { font-size: 0.72rem; color: var(--color-text-tertiary); font-weight: 500; }
    .cat-mobile-toggle-arrow { color: var(--color-text-tertiary); transition: transform 0.25s ease; flex-shrink: 0; }
    .cat-expanded .cat-mobile-toggle { border-color: var(--color-primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .cat-expanded .cat-mobile-toggle-arrow { transform: rotate(180deg); }

    .cat-chips-grid {
        display: none; flex-wrap: wrap; gap: 6px; padding: 12px;
        background: var(--color-surface); border: 1px solid var(--color-border); border-top: none;
        border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
    }
    .cat-expanded .cat-chips-grid { display: flex; animation: cardFadeIn 0.2s ease; }
    .category-chip { padding: 8px 12px; font-size: 0.8rem; border-radius: var(--radius-md); flex: 0 0 auto; }
    .oversikt-category-chips { margin-bottom: 12px; }

    .oversikt-category-cards { grid-template-columns: 1fr; }
    .oversikt-category-desc { display: none; }
    .dtab-cat-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .dtab-cat-chip { justify-content: flex-start; min-width: 0; overflow: hidden; }
    .dtab-cat-chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .modal-tabs { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: 12px 12px; font-size: 0.82rem; white-space: nowrap; min-height: 48px; }
    .modal-body { padding: 20px 16px; }
    .modal-header { padding: 16px; }
    .dashboard-tabs-bar { margin-bottom: 12px; gap: 4px; }
    .dtab { padding: 7px 10px; font-size: 0.78rem; }
    .dtab-menu-btn { opacity: 1; width: 20px; height: 20px; }

    /* Icon-only action buttons on mobile */
    .dtab-actions { padding-left: 8px; margin-left: 2px; gap: 6px; }
    .dtab-action { height: 40px; width: 40px; padding: 0; }
    .dtab-action-label { display: none; }

    
    #admin-modal {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }
    #admin-modal .modal-backdrop { display: none; }
    #admin-modal .modal-dialog {
        max-width: 100% !important;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        margin: 0;
        animation: fadeIn 0.25s ease;
    }
    #admin-modal .modal-header {
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top, 0px));
    }
    #admin-modal .modal-close {
        width: 38px;
        height: 38px;
        background: var(--color-bg);
        border-radius: 50%;
        font-size: 1.5rem;
    }
    #admin-modal .modal-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 16px;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        background: var(--color-surface);
    }
    #admin-modal .tab-btn {
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 8px 10px;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
        background: var(--color-bg);
        margin-bottom: 0;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
    #admin-modal .tab-btn.active {
        background: var(--color-primary-bg);
        border-color: rgba(38,166,154,0.36);
        box-shadow: 0 1px 0 rgba(38,166,154,0.08);
    }
    #admin-modal .modal-body {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        min-width: 0;
    }

    /* Full-screen dashboard dialog on mobile */
    .dtab-dialog-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        overflow: hidden;
    }
    .dtab-dialog, .dtab-dialog-wide {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        margin: 0;
        animation: fadeIn 0.25s ease;
    }
    .dtab-dialog-header {
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--color-border-light);
    }
    .dtab-dialog-close {
        width: 38px;
        height: 38px;
        background: var(--color-bg);
        border-radius: 50%;
        font-size: 1.5rem;
    }
    .dtab-dialog-body {
        padding: 16px;
        padding-bottom: 20px;
        min-width: 0;
        overflow-x: hidden;
    }
    .dtab-dialog-footer {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        gap: 10px;
        background: var(--color-surface);
    }
    .dtab-dialog-btn { flex: 1; padding: 13px 16px; font-size: 0.92rem; min-height: 48px; }
}

/* Telefon i landskap: skjermen er så lav at en festet nav ville tatt en
   fjerdedel av den. Da scroller naven med, og bare en eventuell demo-stripe
   ligger fast. */
@media (max-width: 968px) and (max-height: 480px) {
    :root { --sticky-top: var(--demo-bar-h); }
    .main-nav { position: static; }
}

@media (max-width: 640px) {
    #auth-screen { padding: 16px; }
    .auth-container { max-width: 95%; padding: 0; }
    .auth-card { padding: 32px 24px; }
    .auth-field input, .auth-field select { padding: 14px 16px; font-size: 16px; }
    .login-type-btn { padding: 14px 10px; min-height: 48px; font-size: 0.8rem; }
    .login-type-btn svg { width: 20px; height: 20px; }
    .login-btn { padding: 16px; min-height: 52px; font-size: 1rem; border-radius: var(--radius-lg); }
    .login-logo-img { height: 44px; }
    .login-title { font-size: 1.3rem; }
    .login-subtitle { font-size: 0.85rem; }

    .header-logo-img { height: 28px; }
    #main-header { padding-left: 12px; padding-right: 12px; }
    .header-content { padding: 12px 0; gap: 8px; }
    .main-nav { padding: 0 12px; }
    .footer-content { flex-direction: column; text-align: center; gap: 8px; }
    .app-footer { padding: 20px 12px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .admin-btn span { display: none; }

    #main-content { padding: 16px 12px 100px; }
    .info-grid { grid-template-columns: 1fr; }
    .info-card { padding: 16px; }
    .section-header { padding: 14px 12px; }
    .section-content { padding: 0 12px 16px; }
    .pi-completion-badge { margin-left: 8px; gap: 6px; }
    .pi-badge-count { font-size: 0.68rem; }
    .pi-badge-bar { width: 44px; height: 4px; }
    .pi-badge-tip { left: 0; transform: none; white-space: normal; min-width: 180px; max-width: 240px; }

    #personal-info .info-grid { margin-top: 20px; }

    .dashboard-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .dashboard-toolbar-left { flex-direction: column; align-items: stretch; gap: 10px; }
    .dashboard-label { margin-top: 15px; text-align: center; }
    .dashboard-search { max-width: 100%; margin-bottom: 20px; }
    #marker-search { padding: 12px 16px 12px 40px; font-size: 16px; }
    .dashboard-toolbar-right { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
    .date-filter { flex-basis: 100%; }
    .date-filter-btn { width: 100%; justify-content: center; min-height: 44px; font-size: 0.85rem; }
    .date-filter-dropdown { right: 0; left: 0; min-width: auto; }
    .add-data-btn { flex: 1; justify-content: center; min-height: 44px; }
    .add-data-btn span { display: inline; }
    .view-modes { flex: 1; }
    .view-mode-btn { flex: 1; justify-content: center; min-height: 40px; }
    .dashboard-empty-state { padding: 40px 16px; }
    .furst-guide-card { padding: 22px 18px 16px; margin-top: 20px; }
    .furst-guide-header h4 { font-size: 0.95rem; }
    .furst-guide-intro { font-size: 0.84rem; }
    .furst-steps { padding: 14px 14px; }
    .furst-step { font-size: 0.82rem; gap: 10px; }
    .furst-stations { padding: 12px 14px; gap: 16px; }
    .furst-tip-summary { padding: 12px 14px; font-size: 0.82rem; }
    .furst-tip-body { padding: 2px 14px 16px; }
    .furst-tip-body > p { font-size: 0.82rem; }
    .furst-tips-modal.modal { align-items: stretch; justify-content: stretch; padding: 0; }
    .furst-tips-content { max-width: 100%; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; padding: 24px 18px 20px; animation: fadeIn 0.3s ease; }
    .furst-tips-content .modal-close { top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 50%; }
    .furst-tips-content h3 { font-size: 1.05rem; margin-top: 8px; }
    .furst-tips-intro { font-size: 0.84rem; }
    .furst-tips-categories { grid-template-columns: 1fr; }
    .furst-tips-bioage { padding: 16px; }
    .furst-tips-bioage-list span { font-size: 0.76rem; padding: 4px 10px; }
    .furst-step-help { padding-left: 36px; }
    .date-filter-banner { flex-direction: column; text-align: center; gap: 8px; padding: 10px 14px; }
    .dfb-toggle { width: 100%; justify-content: center; min-height: 40px; }
    .pinned-date-banner { flex-direction: row; gap: 10px; padding: 10px 14px; }
    .pdb-text { font-size: 0.82rem; }
    .pdb-text strong { font-size: 0.85rem; }
    .pdb-sub { font-size: 0.74rem; }
    .onboarding-steps { align-self: center; }
    .add-data-btn-large { width: 100%; justify-content: center; padding: 15px 24px; }
    .dashboard-tabs-bar { margin-bottom: 10px; }
    .dtab { padding: 6px 8px; font-size: 0.75rem; }
    /* Full-screen mode inherited from ≤968px breakpoint */
    .dtab-dialog-search { font-size: 16px; padding: 11px 14px 11px 34px; }
    .dtab-dialog-input { font-size: 16px; padding: 12px 14px; }
    .dtab-marker-list { height: auto; max-height: 42vh; min-height: 200px; }
    .dtab-cat-chips { grid-template-columns: 1fr; }

    .marker-card { border-radius: var(--radius-md); }
    .marker-card-header { padding: 16px 14px 0; }
    .marker-info h3 { font-size: 0.95rem; }
    .marker-latest { padding: 6px 14px 2px; }
    .marker-latest-value { font-size: 1.5rem; }
    .marker-chart-container { padding: 4px 6px 0; height: 180px; }
    .marker-table-toggle { padding: 12px; min-height: 44px; font-size: 0.8rem; }
    .marker-table td, .marker-table th { padding: 10px 10px; font-size: 0.78rem; }
    .th-ref-full { display: none; }
    .th-ref-short { display: inline; }
    .marker-remove-btn { opacity: 1; width: 32px; height: 32px; }
    .source-badge { font-size: 0.56rem; padding: 1px 4px; max-width: 80px; }
    .result-date-source { gap: 4px; }
    .marker-latest .source-badge { font-size: 0.54rem; }

    .bio-age-subsection { margin-top: 16px; padding-top: 16px; }
    .bio-age-subsection-header { padding: 14px 14px; min-height: 52px; }
    .bio-age-collapse-btn { width: 40px; height: 40px; min-width: 44px; min-height: 44px; }
    .bio-age-subsection-content:not(.collapsed) { padding-top: 12px; }
    .bio-age-card { padding: 18px 14px; }
    .bio-age-display { gap: 12px; padding: 16px 0; }
    .bio-age-number { font-size: 2.2rem; }
    .bio-age-chrono-number { font-size: 1.6rem; }
    .bio-chart-section { padding: 14px 12px 10px; }
    .bio-chart-wrapper { height: 180px; }
    .bio-chart-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bio-trend { font-size: 0.7rem; }
    
    .bio-share-modal.modal {
        align-items: stretch;
        padding: 0;
    }
    .bio-share-modal-content {
        max-width: 100%; width: 100%;
        max-height: 100vh; max-height: 100dvh;
        min-height: 100vh; min-height: 100dvh;
        margin: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: fadeIn 0.25s ease;
    }
    .bio-share-modal-content > .bio-share-title {
        position: sticky; top: 0; z-index: 3;
        margin: 0;
        padding: max(16px, env(safe-area-inset-top, 0px)) 60px 14px 18px;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        font-size: 1.02rem; line-height: 1.35;
    }
    .bio-share-modal-content > .bio-share-close {
        position: fixed;
        top: max(10px, env(safe-area-inset-top, 6px));
        right: 10px;
        z-index: 4;
        width: 40px; height: 40px;
        background: var(--color-bg);
        border-radius: 50%;
        font-size: 1.5rem;
        color: var(--color-text-secondary);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .bio-share-modal-content > .bio-share-close:hover {
        background: var(--color-danger-bg); color: var(--color-danger);
    }
    
    .bio-share-modal-content > .bio-share-tabs,
    .bio-share-modal-content > .bio-share-preview-wrap,
    .bio-share-modal-content > .bio-share-actions,
    .bio-share-modal-content > .bio-share-caption-wrap {
        margin-left: 16px; margin-right: 16px;
    }
    .bio-share-modal-content > .bio-share-tabs { margin-top: 14px; }
    .bio-share-modal-content > .bio-share-preview-wrap { margin-top: 14px; }
    .bio-share-modal-content > .bio-share-actions { margin-top: 14px; }
    .bio-share-modal-content > .bio-share-caption-wrap {
        margin-top: 14px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 16px));
    }
    .bio-share-modal-content .bio-share-tab {
        padding: 10px 12px; min-height: 40px;
    }
    .bio-share-modal-content .bio-share-actions {
        flex-direction: column; align-items: stretch;
    }
    .bio-share-modal-content .bio-share-dl {
        justify-content: center; padding: 13px 22px; min-height: 48px; font-size: 0.88rem;
    }
    .bio-share-modal-content .bio-share-socials {
        margin-left: 0; justify-content: center; gap: 12px;
    }
    .bio-share-modal-content .bio-social-btn {
        width: 48px; height: 48px;
    }
    .bio-share-modal-content .bio-share-preview-wrap canvas {
        max-height: 380px;
    }

    
    .ai-share-modal-content > .ai-share-privacy-banner {
        margin: 14px 16px 0;
    }
    .ai-share-modal-content > .ai-share-tabs {
        margin: 14px 16px 0;
        gap: 4px;
    }
    .ai-share-modal-content > .ai-share-panel {
        margin: 16px 16px 0;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 16px));
    }
    .ai-share-modal-content .ai-share-tab {
        font-size: 0.78rem; padding: 10px 8px; min-height: 42px; gap: 4px;
    }
    .ai-share-modal-content .ai-share-pdf-actions {
        flex-direction: column;
    }
    .ai-share-modal-content .ai-share-pdf-actions .bio-share-dl {
        min-width: 0; width: 100%;
    }
    .admin-user-detail-content { max-width: 100%; }
    .admin-ud-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-ud-meta { grid-template-columns: 1fr; }
    .ai-share-bar { gap: 6px; }
    .ai-share-bar-btn { padding: 8px 14px; font-size: 0.75rem; }
    .ai-share-cta-inner { flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 14px; }
    .ai-share-cta-actions { flex-direction: column; }
    .ai-share-cta-btn { justify-content: center; }
    .bio-marker-checklist { grid-template-columns: 1fr; }
    .bio-marker-list { grid-template-columns: 1fr; }

    .markers-grid.view-grid { grid-template-columns: 1fr; }

    .oversikt-grid { grid-template-columns: 1fr; }
    .oversikt-card { padding: 14px 14px; }
    .oversikt-card-name { font-size: 0.85rem; }

    .modal:not(#admin-modal):not(#pi-edit-modal):not(#detail-modal) { padding: 0; padding-top: env(safe-area-inset-top, 0px); align-items: flex-end; }
    .modal:not(#admin-modal):not(#pi-edit-modal):not(#detail-modal) > .modal-dialog { max-height: calc(100vh - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: modalSlideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes modalSlideUpMobile { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
    .modal-header { padding: 16px 16px; }
    .modal-header h2 { font-size: 1rem; }
    .modal-body { padding: 16px; }
    #pi-edit-modal { padding: 0; align-items: stretch; }
    #pi-edit-modal .modal-dialog { max-width: 100% !important; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; animation: fadeIn 0.3s ease; }
    #pi-edit-modal .modal-header { padding: 16px 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
    #pi-edit-modal .modal-body { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
    .form-group input[type="text"], .form-group input[type="date"] { padding: 13px 14px; font-size: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .submit-btn { padding: 15px; min-height: 50px; }

    #detail-modal { padding: 0; align-items: stretch; }
    #detail-modal .modal-backdrop { display: none; }
    .detail-dialog { max-width: 100%; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; animation: fadeIn 0.25s ease; }

    .detail-title-row {
        padding: 14px 16px 0; padding-top: max(14px, env(safe-area-inset-top, 0px)); gap: 10px;
    }
    .detail-title-row #detail-close {
        display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px;
        background: var(--color-bg); border-radius: 50%; flex-shrink: 0;
        color: var(--color-text-tertiary);
    }
    .detail-title-row #detail-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }
    .detail-header h2 { font-size: 1.1rem; }
    .detail-title-row {
        padding: 14px 16px 0; padding-top: max(14px, env(safe-area-inset-top, 0px)); gap: 10px;
    }
    .detail-title-actions #detail-close {
        display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px;
        background: var(--color-bg); border-radius: 50%;
        color: var(--color-text-tertiary);
    }
    .detail-title-actions #detail-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }
    .detail-title-actions .detail-add-btn { display: none; }
    .detail-meta { gap: 6px; padding: 10px 16px 12px; }
    #detail-mobile-cta {
        display: flex; padding: 0 16px 14px;
        border-bottom: 1px solid var(--color-border-light);
    }
    #detail-mobile-cta .detail-add-btn-mobile {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 11px 16px; min-height: 44px; font-size: 0.85rem; font-weight: 600;
        background: var(--color-primary); color: white; border: none;
        border-radius: var(--radius-md); transition: all var(--transition-base); white-space: nowrap;
    }
    #detail-mobile-cta .detail-add-btn-mobile:hover { background: var(--color-primary-dark); }
    #detail-mobile-cta .detail-add-btn-mobile.added { background: var(--color-success); pointer-events: none; flex: 0; padding: 11px 16px; }

    .detail-body {
        padding: 20px 16px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    .detail-latest-row { gap: 20px; margin-bottom: 20px; padding-bottom: 16px; }
    .detail-latest-value { font-size: 1.6rem; }
    .detail-chart-wrapper { height: 220px; margin-bottom: 20px; }
    #detail-table-container { max-height: none; }

    .result-edit-btn, .result-delete-btn { opacity: 1; width: 30px; height: 30px; }
    .result-action-cell { width: auto; min-width: 80px; padding: 4px 2px !important; }
    .result-action-cell.result-note-only { width: 36px; min-width: 36px; }
    .result-note-btn { opacity: 1; width: 28px; height: 28px; }
    .confirm-delete-dialog { padding: 24px 20px; }
    .confirm-input { font-size: 16px; padding: 13px 14px; }

    .rem-overlay { padding: 0; align-items: stretch; }
    .rem-dialog { max-width: 100% !important; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; animation: fadeIn 0.3s ease; }
    .rem-header { padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
    .rem-body { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); max-height: none; }
    .rem-field input[type="text"], .rem-field textarea { font-size: 16px; }
    .rem-actions { flex-direction: column; }
    .rem-save-btn, .rem-cancel-btn { width: 100%; justify-content: center; padding: 14px; min-height: 48px; }
    .rem-note-edit-btn { width: 100%; justify-content: center; padding: 14px; min-height: 48px; text-align: center; }

    .sticky-date-indicator { padding: 8px 12px; }
    .sticky-date-text { font-size: 0.78rem; }

    #toast-container { bottom: env(safe-area-inset-bottom, 12px); right: 12px; left: 12px; }
    .toast { min-width: auto; font-size: 0.82rem; padding: 12px 16px; }

    .page-title { font-size: 1.15rem; margin-bottom: 16px; }
    .ms-card { border-radius: var(--radius-md); margin-bottom: 12px; }
    .ms-card-header { padding: 14px 16px; }
    .ms-card-body { padding: 16px; }
    .ms-info-grid { grid-template-columns: 1fr; }
    .ms-actions { flex-direction: column; }
    .ms-btn { min-height: 44px; justify-content: center; width: 100%; }
    .ms-invoice-item { flex-direction: column; align-items: flex-start; padding: 12px 0; gap: 8px; }
    .ms-invoice-right { width: 100%; justify-content: space-between; padding-top: 4px; border-top: 1px dashed var(--color-border-light); }
    .ms-invoice-link { min-height: 36px; padding: 6px 14px; }

    .sharing-grid { grid-template-columns: 1fr; gap: 16px; }
    .sharing-password-display { flex-direction: column; align-items: stretch; }
    .sharing-password-display code { text-align: center; font-size: 1rem; }
    .sharing-pw-actions { justify-content: center; }
    .sharing-inline-input { flex-direction: column; }
    .sharing-inline-input input { font-size: 16px; padding: 13px 14px; width: 100%; box-sizing: border-box; }
    .sharing-invite-input { font-size: 16px; padding: 13px 14px; }
    .sharing-toggle-row:not(.sharing-master-toggle) { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sharing-master-toggle { gap: 12px; }
    .sharing-group-body { padding: 14px; }
    .sharing-group-header { padding: 12px 14px; }
    .sharing-note-textarea { font-size: 16px; min-height: 100px; }
    .sharing-note-footer { flex-direction: column; align-items: flex-start; }
    .sharing-note-actions { width: 100%; justify-content: space-between; }

    .edit-grunn-item { grid-template-columns: 1fr auto; }
    .edit-grunn-value { grid-column: 1; }
    .edit-grunn-label, .edit-grunn-value { font-size: 16px; padding: 12px 12px; }
    .edit-item-fields { grid-template-columns: 1fr; }
    .edit-item-fields input, .edit-item-fields select { font-size: 16px; padding: 12px 10px; }
    .edit-field-group input, .edit-field-group select, .edit-field-group textarea { font-size: 16px; padding: 12px 12px; width: 100%; box-sizing: border-box; }
    .edit-save-btn, .edit-cancel-btn { padding: 14px; min-height: 48px; }
    .eml-edit-btn, .eml-del-btn, .eml-cancel-btn { width: 36px; height: 36px; }
    .med-inline-action-bar { flex-wrap: wrap; }
    .med-inline-delete-btn { min-height: 48px; font-size: 0.85rem; }
    .med-inline-action-right { flex: 1 1 100%; }
    .referral-action-btn { width: 36px; height: 36px; }
    .referral-row { flex-wrap: wrap; }
    .referral-row-info { flex: 1 1 100%; }
    .eml-new-del { width: 28px; height: 28px; }
    .med-inline-fields { flex-direction: column; }
    .med-inline-fields input, .med-inline-fields select { font-size: 16px; padding: 12px 10px; width: 100%; box-sizing: border-box; min-width: 0; }
    .med-inline-action-bar { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); border-radius: 0; z-index: 100; }
    .med-inline-save-btn, .med-inline-cancel-btn { min-height: 48px; font-size: 0.92rem; }
    .med-item-inline-edit, .grunn-inline-edit { padding-bottom: 68px; }
    .med-item-interactive.inline-editing { padding: 16px 12px; border-radius: var(--radius-sm); }
    .info-item-interactive.inline-editing { padding: 16px 12px; border-radius: var(--radius-sm); }
    .grunn-inline-field { flex-direction: column; }
    .grunn-inline-field input, .grunn-inline-field select { font-size: 16px; padding: 12px 10px; width: 100%; box-sizing: border-box; }
    .gender-toggle { min-width: 0; }
    .gender-toggle-opt { min-height: 48px; font-size: 0.92rem; padding: 12px 16px; }
    .source-toggle { flex-wrap: wrap; }
    .source-toggle-opt { min-height: 44px; font-size: 0.82rem; padding: 10px 12px; }
    .eml-done-btn { min-height: 48px; font-size: 0.88rem; }

    .delete-confirm-box { padding: 16px; }
    .delete-confirm-box .auth-field input { font-size: 16px; padding: 13px 14px; }

    .marker-picker-overlay { padding: 0; padding-top: env(safe-area-inset-top, 0px); align-items: flex-end; }
    .marker-picker-container { max-width: 100%; max-height: calc(100vh - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    .marker-picker-header { padding: 24px 20px 20px; }
    .marker-picker-header h2 { font-size: 1.15rem; }
    .marker-picker-header p { font-size: 0.85rem; }
    .marker-picker-logo { height: 30px; margin-bottom: 12px; }
    .marker-picker-toolbar { padding: 12px 16px; }
    #marker-picker-search { font-size: 16px; padding: 12px 14px 12px 38px; }
    .marker-picker-body { padding: 16px; }
    .marker-picker-grid { grid-template-columns: 1fr; gap: 8px; }
    .marker-pick-card { padding: 14px; min-height: 56px; }
    .marker-picker-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .marker-picker-done-btn { padding: 14px 24px; min-height: 50px; font-size: 0.95rem; flex: 1; justify-content: center; }
    .marker-picker-count { font-size: 0.82rem; white-space: nowrap; }
}

@media (max-width: 380px) {
    .auth-container { max-width: 90%; }
    .auth-card { padding: 28px 16px; }
    .login-type-toggle { gap: 8px; }
    .login-type-btn { padding: 12px 8px; font-size: 0.76rem; }
    .login-type-btn svg { width: 18px; height: 18px; }
    #main-header { padding-left: 10px; padding-right: 10px; }
    .header-content { padding: 8px 0; }
    .main-nav { padding: 0 10px; }
    #main-content { padding: 12px 10px 100px; }
    .section-header { padding: 12px 10px; }
    .section-content { padding: 0 10px 14px; }
    .pi-badge-bar { width: 36px; }
    .pi-badge-tip { min-width: 160px; max-width: 200px; font-size: 0.72rem; }
    .marker-card-header { padding: 14px 12px 0; }
    .marker-latest { padding: 6px 12px 2px; }
    .nav-tab { padding: 10px 4px; }
    .nav-label { font-size: 0.55rem; }
}

@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
    .admin-users-search-wrap input { font-size: 16px !important; }
}

/* ONBOARDING WIZARD */
.onboarding-wizard {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.ob-card {
    position: relative; width: 100%; max-width: 560px;
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 92vh; max-height: 92dvh;
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: none;
    color: var(--color-text-tertiary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.ob-close:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ob-progress {
    display: flex; gap: 4px; padding: 16px 24px 0;
}
.ob-progress-seg {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--color-border-light); transition: background 0.4s ease;
}
.ob-progress-seg.active { background: var(--color-primary); }
.ob-progress-seg.done { background: var(--color-success); }
.ob-step-indicator {
    padding: 12px 24px 0; font-size: 0.72rem; font-weight: 600;
    color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
}
.ob-body {
    padding: 20px 24px 24px; overflow-y: auto; flex: 1;
    animation: tabFadeIn 0.25s ease;
}
.ob-title {
    font-size: 1.35rem; font-weight: 800; color: var(--color-text);
    letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.3;
}
.ob-subtitle {
    font-size: 0.88rem; color: var(--color-text-secondary);
    line-height: 1.55; margin-bottom: 24px;
}
.ob-section-label {
    font-size: 0.75rem; font-weight: 700; color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 20px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-light);
}
.ob-section-label:first-child { margin-top: 0; }
.ob-field { margin-bottom: 14px; }
.ob-field label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--color-text-secondary); margin-bottom: 5px;
}
.ob-field label .ob-req { color: var(--color-danger); margin-left: 2px; }
.ob-field input, .ob-field select, .ob-field textarea {
    width: 100%; padding: 11px 14px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text);
    font-size: 0.92rem; font-family: inherit;
    outline: none; transition: all var(--transition-base);
}
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus {
    border-color: var(--color-primary); background: #fff;
    box-shadow: 0 0 0 3px rgba(38,166,154,0.12);
}
.ob-field textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.ob-field input::placeholder, .ob-field textarea::placeholder { color: var(--color-text-tertiary); }
.ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ob-gender-group { display: flex; gap: 10px; margin-bottom: 14px; }
.ob-gender-btn {
    flex: 1; padding: 14px 16px;
    background: var(--color-bg); border: 2px solid var(--color-border);
    border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 600;
    color: var(--color-text-secondary); cursor: pointer;
    transition: all var(--transition-base);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ob-gender-btn:hover { border-color: var(--color-primary-light); color: var(--color-text); }
.ob-gender-btn.selected {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    color: var(--color-primary-dark); box-shadow: 0 0 0 3px rgba(38,166,154,0.12);
}
.ob-med-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ob-med-row {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 12px; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); margin-bottom: 8px;
}
.ob-med-fields {
    flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.ob-med-row-inline {
    display: flex; gap: 6px;
}
.ob-med-row-inline input { flex: 1; }
.ob-med-row-inline .dose-combo { flex: 1; }

/* Dose combo: amount input + unit dropdown */
.dose-combo {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.dose-combo .dose-amount {
    flex: 1;
    min-width: 60px;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.dose-combo .dose-unit {
    width: auto;
    min-width: 70px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    cursor: pointer;
    color: var(--color-text-secondary);
    background-color: var(--color-bg);
}
.dose-combo .dose-unit:focus { border-color: var(--color-primary); }
.dose-combo .dose-amount:focus { border-color: var(--color-primary); z-index: 1; }
.dose-combo .dose-amount:focus + .dose-unit { border-left-color: var(--color-primary); }

.med-inline-fields .dose-combo { min-width: 160px; }
.med-inline-fields .dose-combo .dose-amount,
.med-inline-fields .dose-combo .dose-unit {
    padding: 8px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.med-inline-fields .dose-combo .dose-amount { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 60px; }
.med-inline-fields .dose-combo .dose-unit { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.edit-item-fields .dose-combo { grid-column: 1 / -1; }
.edit-item-fields .dose-combo .dose-amount,
.edit-item-fields .dose-combo .dose-unit {
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition-fast);
}
.edit-item-fields .dose-combo .dose-amount { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; }
.edit-item-fields .dose-combo .dose-unit { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.edit-item-fields .dose-combo .dose-amount::placeholder { color: var(--color-text-tertiary); }

.ob-med-row .dose-combo .dose-amount,
.ob-med-row .dose-combo .dose-unit {
    width: auto;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.ob-med-row .dose-combo .dose-amount { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 50px; }
.ob-med-row .dose-combo .dose-unit { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 65px; }

@media (max-width: 600px) {
    .med-inline-fields .dose-combo { min-width: 0; width: 100%; }
    .med-inline-fields .dose-combo .dose-amount,
    .med-inline-fields .dose-combo .dose-unit { font-size: 16px; padding: 12px 10px; }
    .edit-item-fields .dose-combo .dose-amount,
    .edit-item-fields .dose-combo .dose-unit { font-size: 16px; padding: 12px 10px; }
    .ob-med-row-inline { flex-wrap: wrap; }
    .ob-med-row-inline .dose-combo { flex: 1 1 100%; }
    .ob-med-row .dose-combo .dose-amount,
    .ob-med-row .dose-combo .dose-unit { font-size: 16px; padding: 12px 10px; }
    .freq-combo .freq-main { flex-wrap: wrap; }
    .freq-combo .freq-ganger,
    .freq-combo .freq-intervall { font-size: 16px; padding: 10px 6px; width: 48px; }
    .freq-combo .freq-periode { font-size: 16px; padding: 10px 8px; }
    .freq-combo .freq-sep { font-size: 0.78rem; }

    /* "Startet" row — app-like mobile layout */
    .freq-combo .freq-started {
        gap: 10px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--color-border);
        align-items: center;
    }
    .freq-combo .freq-started-label {
        flex: 0 0 auto;
        font-size: 0.82rem;
        color: var(--color-text-secondary);
        font-weight: 600;
    }
    .freq-combo .freq-started-selects {
        flex: 1 1 100%;
        order: 3;
        gap: 6px;
    }
    .freq-combo .freq-started-select {
        font-size: 16px;
        padding: 10px 8px;
        flex: 1 1 0;
        min-width: 0;
        background: var(--color-surface);
    }
    .freq-combo .freq-started-day { flex: 0 0 22%; max-width: 84px; }
    .freq-combo .freq-started-month { flex: 1 1 44%; min-width: 0; }
    .freq-combo .freq-started-year { flex: 0 0 26%; max-width: 96px; }
    .freq-combo .freq-today-btn {
        margin-left: auto;
        padding: 9px 15px 9px 13px;
        font-size: 0.85rem;
        min-height: 38px;
        order: 2;
    }
    .freq-combo .freq-today-btn svg { width: 14px; height: 14px; }
}

/* Frequency combo widget */
.freq-combo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.freq-main {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.freq-main.freq-disabled { opacity: 0.4; pointer-events: none; }
.freq-ganger, .freq-intervall {
    width: 44px;
    padding: 7px 4px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition: border-color var(--transition-fast);
    -moz-appearance: textfield;
    appearance: textfield;
}
.freq-ganger::-webkit-inner-spin-button,
.freq-ganger::-webkit-outer-spin-button,
.freq-intervall::-webkit-inner-spin-button,
.freq-intervall::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.freq-ganger:focus, .freq-intervall:focus { border-color: var(--color-primary); }
.freq-sep {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    user-select: none;
}
.freq-periode {
    padding: 7px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
}
.freq-periode:focus { border-color: var(--color-primary); }
.freq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.freq-behov-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-shrink: 0; }
.freq-behov-toggle input { display: none; }
.freq-behov-track { position: relative; width: 36px; height: 20px; background: var(--color-border); border-radius: 20px; transition: background var(--transition-fast); flex-shrink: 0; }
.freq-behov-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform var(--transition-fast); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.freq-behov-toggle input:checked + .freq-behov-track { background: var(--color-primary); }
.freq-behov-toggle input:checked + .freq-behov-track .freq-behov-thumb { transform: translateX(16px); }
.freq-behov-label { font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; }
.freq-behov-toggle input:checked ~ .freq-behov-label { color: var(--color-primary); }
.freq-started {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.freq-started-label {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.freq-started-selects {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}
.freq-started-select {
    padding: 4px 6px;
    font-size: 0.78rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.freq-started-select:focus { border-color: var(--color-primary); outline: none; }
.freq-started-day { min-width: 56px; }
.freq-started-month { min-width: 92px; }
.freq-started-year { min-width: 68px; }

.freq-today-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    border: 1px solid rgba(38, 166, 154, 0.28);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    line-height: 1.1;
}
.freq-today-btn:hover {
    background: rgba(38, 166, 154, 0.16);
    border-color: rgba(38, 166, 154, 0.45);
}
.freq-today-btn:active { transform: scale(0.96); }
.freq-today-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.freq-today-btn svg { color: currentColor; flex-shrink: 0; }
.freq-today-btn.is-active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 30, 25, 0.15);
}
.freq-today-btn.is-active:hover {
    background: var(--color-primary-light, var(--color-primary));
    border-color: var(--color-primary-light, var(--color-primary));
}
.freq-today-btn.is-active svg { color: #fff; }

.med-inline-fields .freq-combo { min-width: 200px; flex: 1 1 100%; }
.edit-item-fields .freq-combo { grid-column: 1 / -1; }

.ob-med-fields .freq-combo { margin-top: 2px; }
.ob-med-fields .freq-ganger,
.ob-med-fields .freq-intervall {
    padding: 9px 6px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.ob-med-fields .freq-periode {
    padding: 9px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.ob-med-fields .freq-started-select {
    width: auto;
    background: #fff;
    padding: 6px 8px;
    font-size: 0.82rem;
}
.ob-med-fields .freq-today-btn { background: var(--color-primary-bg); }
.ob-med-fields .freq-today-btn.is-active { background: var(--color-primary); color: #fff; }

.ob-med-row input, .ob-med-row select {
    width: 100%; padding: 9px 11px;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text);
    font-size: 0.85rem; font-family: inherit; outline: none;
    transition: all var(--transition-base); box-sizing: border-box;
}
.ob-med-row input:focus, .ob-med-row select:focus { border-color: var(--color-primary); }
.ob-med-remove {
    width: 30px; height: 30px; flex-shrink: 0; margin-top: 1px;
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text-tertiary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--transition-fast);
}
.ob-med-remove:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: rgba(239,68,68,0.2); }
.ob-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: none; border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-primary);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition-fast);
}
.ob-add-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary-light); }
.ob-final-icon {
    text-align: center; margin-bottom: 16px; color: var(--color-primary);
}
.ob-final-steps {
    display: flex; flex-direction: column; gap: 10px;
    margin: 20px 0;
}
.ob-final-step {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--color-bg);
    border-radius: var(--radius-md); font-size: 0.88rem;
}
.ob-final-step-num {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.78rem; font-weight: 700;
    background: var(--color-primary-bg); color: var(--color-primary-dark);
}
.ob-final-step-done .ob-final-step-num {
    background: var(--color-success-bg); color: var(--color-success);
}
.ob-footer {
    display: flex; gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.ob-btn {
    flex: 1; padding: 13px 20px; border: none;
    border-radius: var(--radius-md); font-size: 0.92rem;
    font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--transition-base);
}
.ob-btn-primary {
    background: linear-gradient(135deg, #26a69a, #004d40);
    color: #fff; box-shadow: 0 2px 8px rgba(0,77,64,0.2);
}
.ob-btn-primary:hover { box-shadow: 0 4px 12px rgba(0,77,64,0.3); transform: translateY(-1px); }
.ob-btn-primary:disabled {
    opacity: 0.5; cursor: not-allowed;
    transform: none; box-shadow: none;
}
.ob-btn-secondary {
    background: var(--color-bg); color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.ob-btn-secondary:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ob-btn-import {
    background: linear-gradient(135deg, #26a69a, #004d40);
    color: #fff; box-shadow: 0 2px 8px rgba(0,77,64,0.2);
    padding: 15px 24px; font-size: 0.95rem;
}
.ob-btn-import:hover { box-shadow: 0 4px 12px rgba(0,77,64,0.3); transform: translateY(-1px); }
.ob-btn-finish {
    background: none; color: var(--color-text-secondary);
    border: 1px solid var(--color-border); padding: 13px 20px;
}
.ob-btn-finish:hover { background: var(--color-bg); }
.ob-hint {
    font-size: 0.78rem; color: var(--color-text-tertiary);
    line-height: 1.5; margin-top: -6px; margin-bottom: 14px;
}
.ob-field .ob-hint {
    margin-top: 6px; margin-bottom: 0;
}
.ob-hint-inline {
    font-size: 0.78rem; color: var(--color-text-tertiary);
    font-weight: 400;
}
.ob-import-guide {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.ob-import-step {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; font-size: 0.84rem; color: var(--color-text-secondary);
    line-height: 1.4;
}
.ob-import-num {
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.7rem; font-weight: 700;
    background: var(--color-primary-bg); color: var(--color-primary-dark);
}
.ob-marker-info {
    display: flex; gap: 10px; padding: 12px 14px;
    background: var(--color-primary-bg);
    border-radius: var(--radius-md); margin-bottom: 16px;
    font-size: 0.82rem; line-height: 1.5; color: var(--color-primary-dark);
    align-items: flex-start;
}
.ob-marker-info .mi-icon { flex-shrink: 0; margin-top: 2px; }
.ob-marker-info p { margin: 0; }

/* Onboarding AI-booster card (step 5) */
.ob-ai-boost {
    position: relative;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    overflow: hidden;
}
.ob-ai-boost::before {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.ob-ai-boost-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    position: relative;
}
.ob-ai-boost-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--color-primary); color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(38,166,154,0.28);
}
.ob-ai-boost-header h3 {
    margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--color-text);
    line-height: 1.3;
}
.ob-ai-boost-body {
    margin: 0 0 12px; font-size: 0.85rem; line-height: 1.55;
    color: var(--color-text-secondary); position: relative;
}
.ob-ai-boost-list {
    list-style: none; padding: 0; margin: 0 0 10px;
    display: flex; flex-direction: column; gap: 7px;
    position: relative;
}
.ob-ai-boost-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.82rem; line-height: 1.45; color: var(--color-text);
}
.ob-ai-boost-list svg {
    color: var(--color-primary); flex-shrink: 0; margin-top: 3px;
}
.ob-ai-boost-footer {
    margin: 0; font-size: 0.76rem; font-style: italic;
    color: var(--color-text-tertiary); position: relative;
}

/* Personal Info AI-banner (above PI grid) */
.pi-ai-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 44px 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width: 0;
    overflow: hidden;
}
.pi-ai-banner-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--color-primary); color: #fff; flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(38,166,154,0.25);
}
.pi-ai-banner-body {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.pi-ai-banner-body strong {
    font-size: 0.9rem; font-weight: 700; color: var(--color-text);
    line-height: 1.35;
}
.pi-ai-banner-body span {
    font-size: 0.8rem; line-height: 1.5; color: var(--color-text-secondary);
}
.pi-ai-banner-close {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: none;
    border-radius: 50%; cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: 1.3rem; line-height: 1;
    transition: all var(--transition-fast);
}
.pi-ai-banner-close:hover {
    background: rgba(0,0,0,0.06); color: var(--color-text);
}

@media (max-width: 640px) {
    .pi-ai-banner { padding: 13px 40px 13px 14px; gap: 10px; margin-top: 20px; }
    .pi-ai-banner-icon { width: 32px; height: 32px; }
    .pi-ai-banner-body strong { font-size: 0.87rem; }
    .pi-ai-banner-body span { font-size: 0.78rem; }
    .ob-ai-boost { padding: 14px 15px; margin-bottom: 14px; }
    .ob-ai-boost-header h3 { font-size: 0.9rem; }
    .ob-ai-boost-body { font-size: 0.82rem; }
    .ob-ai-boost-list li { font-size: 0.8rem; }
}

@media (max-width: 640px) {
    .onboarding-wizard {
        padding: 0; align-items: stretch; justify-content: stretch;
    }
    .ob-card {
        max-width: 100%; max-height: 100vh; max-height: 100dvh;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0;
        animation: fadeIn 0.3s ease;
    }
    .ob-close {
        top: max(10px, env(safe-area-inset-top, 0px));
        right: 10px;
        width: 40px; height: 40px;
        background: var(--color-bg);
    }
    .ob-progress {
        padding: max(16px, env(safe-area-inset-top, 10px)) 16px 0;
        padding-right: 56px;
    }
    .ob-step-indicator { padding: 10px 16px 0; }
    .ob-body { padding: 16px 16px 20px; }
    .ob-title { font-size: 1.2rem; }
    .ob-footer {
        padding: 14px 16px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--color-border-light);
        background: var(--color-surface);
    }
    .ob-row, .ob-row-3 { grid-template-columns: 1fr; }
    .ob-field input, .ob-field select, .ob-field textarea { font-size: 16px; padding: 13px 14px; }
    .ob-gender-btn { padding: 16px; font-size: 0.95rem; }
    .ob-btn { min-height: 48px; }
}

/* MARKER NAME TYPE TAG */
.marker-type-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-tertiary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

/* BEREGNET BIOMARKØR — distinct visuell stil */
.marker-type-tag.tag-calculated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
    padding: 2px 7px;
}
.marker-type-tag.tag-calculated .tag-calc-icon {
    flex-shrink: 0;
    opacity: 0.95;
    margin-top: -1px;
}
.dtab-marker-tag.tag-calculated {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
}
.dtab-marker-tag.tag-calculated .tag-calc-icon {
    flex-shrink: 0;
    opacity: 0.95;
}

/* Beregnet-info banner (sub-header strip i markør-kort) */
.calc-info-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 10px;
    padding: 8px 12px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #4338ca;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 8px;
}
.calc-info-strip-icon {
    flex-shrink: 0;
    color: #6366f1;
}
.calc-info-strip-text {
    flex: 1;
    min-width: 0;
}
.calc-info-strip-text strong {
    font-weight: 600;
    color: #4338ca;
}

/* Detalj-modal-variant: full bredde over header-rekken */
.calc-info-strip-detail {
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 0.82rem;
}


.calculated-marker-card .marker-card-header h3 {
    align-items: center;
}

/* Beregnet kort i analyseoversikt */
.oversikt-card.calculated-card {
    position: relative;
}


/* "calculated" source-badge på rad-nivå */
.source-calculated {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: #5b50e8;
    border: 1px solid rgba(99, 102, 241, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}


.calc-pct-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: help;
}

/* Liten "%"-suffiks i tabellraden */
.value-cell-pct {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    cursor: help;
    vertical-align: 1px;
}

/* Mobile-tilpasning */
@media (max-width: 600px) {
    .calc-info-strip {
        margin: 0 12px 8px;
        padding: 7px 10px;
        font-size: 0.7rem;
        gap: 6px;
    }
    .calc-info-strip-detail {
        margin: 0 0 10px;
        padding: 8px 10px;
        font-size: 0.74rem;
    }
    .marker-type-tag.tag-calculated {
        font-size: 0.6rem;
        padding: 1px 5px;
        gap: 3px;
    }
    .marker-type-tag.tag-calculated .tag-calc-icon {
        width: 9px;
        height: 9px;
    }
    .calc-pct-badge {
        font-size: 0.62rem;
        padding: 1px 6px;
    }
    .value-cell-pct {
        font-size: 0.66rem;
        padding: 1px 4px;
        margin-left: 4px;
    }
}

/* INFO ICON (SVG) */
.mi-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* MARKER INFO BUTTON */
.marker-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--color-text-tertiary);
    border-radius: 50%;
    transition: color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.marker-info-btn:hover {
    color: var(--color-primary);
    transform: scale(1.15);
}
.marker-card-header .marker-info h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}
.oversikt-card-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}
.detail-info-btn {
    margin-left: 8px;
}
#detail-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}

/* MARKER INFO MODAL (centered popup) */
.mi-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
}
.mi-overlay:not(.hidden) {
    pointer-events: auto;
}
.mi-overlay .marker-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.mi-overlay.open .marker-info-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.mi-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mi-overlay.open .mi-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.mi-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mi-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mi-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.mi-title-group h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.marker-info-close {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.marker-info-close:hover {
    color: var(--color-text);
    background: var(--color-bg);
}
.mi-alt {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    margin-top: 4px;
    line-height: 1.4;
}
.mi-alt:empty { display: none; }

.mi-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 20px;
}


.mi-section {
    margin-bottom: 18px;
}
.mi-section:last-child {
    margin-bottom: 0;
}
.mi-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}
.mi-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mi-dot-ind  { background: #10b981; }
.mi-dot-tolk { background: #6366f1; }
.mi-dot-merk { background: #f59e0b; }
.mi-dot-opt  { background: #3b82f6; }

.mi-optimal-section {
    background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(59,130,246,0.02) 100%);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 4px;
}
.mi-optimal-range {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.mi-optimal-note {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.mi-section-body {
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    padding-left: 16px;
    border-left: 2px solid var(--color-border);
}
.mi-section-body p {
    margin: 0 0 8px;
}
.mi-section-body p:last-child {
    margin-bottom: 0;
}

.mi-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
}
.mi-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: mi-spin 0.6s linear infinite;
}
@keyframes mi-spin {
    to { transform: rotate(360deg); }
}
.mi-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--color-text-tertiary);
    font-size: 0.87rem;
}

/* Mobile */
@media (max-width: 640px) {
    .mi-overlay {
        padding: 12px;
        align-items: center;
    }
    .mi-card {
        max-height: 85vh;
        border-radius: 16px;
        transform: scale(0.95) translateY(8px);
        opacity: 0;
    }
    .mi-overlay.open .mi-card {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    .mi-header {
        padding: 16px 18px 12px;
    }
    .mi-title-group h3 {
        font-size: 1.05rem;
    }
    .mi-body {
        padding: 14px 18px 16px;
    }
    .mi-section-body {
        padding-left: 14px;
    }
    .marker-type-tag {
        font-size: 0.6rem;
    }
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* UTILITY */
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-muted { color: var(--color-text-tertiary) !important; }
.font-bold { font-weight: 700 !important; }

/* AI ANALYSE */
.ai-analyse-section { max-width: 100%; margin: 0 auto; padding: 0 16px; }

.ai-analyse-header { margin-bottom: 28px; }
.ai-analyse-header .page-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 8px;
}
.ai-analyse-subtitle { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0; line-height: 1.5; }

/* Data tip banner */
.ai-tip {
    border-radius: 12px; padding: 16px 20px; margin-bottom: 20px;
    font-size: 0.88rem; line-height: 1.55; color: var(--color-text-secondary);
}
.ai-tip-improve {
    background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.2);
}
.ai-tip-critical {
    background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2);
}
.ai-tip-critical .ai-warn-icon { color: var(--color-danger); }
.ai-tip-ready {
    background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.2);
    display: flex; align-items: center; gap: 14px;
}
.ai-tip-ready .ai-tip-icon { color: var(--color-success); flex-shrink: 0; }
.ai-tip-ready strong { display: block; color: var(--color-text); font-size: 0.9rem; margin-bottom: 2px; }
.ai-tip-top { display: flex; align-items: flex-start; gap: 12px; }
.ai-tip-top svg { flex-shrink: 0; margin-top: 1px; color: var(--color-warning); }
.ai-tip-top strong { display: block; color: var(--color-text); font-size: 0.9rem; margin-bottom: 4px; }
.ai-tip-link { color: var(--color-primary); text-decoration: underline; font-weight: 500; }
.ai-tip-link:hover { opacity: 0.8; }
.ai-tip-missing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-left: 32px; }
.ai-tip-chip {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
    background: rgba(245, 158, 11, 0.1); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.2);
}
.ai-tip-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-left: 32px; }
.ai-tip-bar { flex: 1; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.ai-tip-bar-fill { height: 100%; background: var(--color-warning); border-radius: 3px; transition: width 0.4s ease; }
.ai-tip-count { font-size: 0.78rem; color: var(--color-text-tertiary); white-space: nowrap; }

.ai-analyse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }

.ai-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 14px; overflow: hidden;
}
.ai-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.ai-card-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-text); }
.ai-card-header svg { color: var(--color-primary); flex-shrink: 0; }
.ai-card-body { padding: 20px; }

.ai-feature-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.ai-feature { display: flex; gap: 14px; align-items: flex-start; }
.ai-feature-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, 0.08); border-radius: 10px; color: var(--color-primary);
}
.ai-feature strong { display: block; font-size: 0.9rem; color: var(--color-text); margin-bottom: 2px; }
.ai-feature p { margin: 0; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.45; }

.ai-data-status {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px; background: var(--color-surface); border-radius: 10px;
}
.ai-data-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--color-text-secondary); }
.ai-check-icon { color: var(--color-success); flex-shrink: 0; }
.ai-warn-icon { color: var(--color-warning); flex-shrink: 0; }
.ai-info-icon-sm { color: var(--color-primary); flex-shrink: 0; }

/* Action card */
.ai-action-card { display: flex; flex-direction: column; }
.ai-action-card .ai-card-body { flex: 1; display: flex; align-items: center; justify-content: center; }

.ai-run-ready, .ai-empty-state, .ai-processing { text-align: center; width: 100%; }
.ai-run-icon { margin-bottom: 16px; }
.ai-run-icon svg { opacity: 0.8; }
.ai-run-ready h3, .ai-empty-state h3, .ai-processing h3 {
    margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--color-text);
}
.ai-run-ready p, .ai-empty-state p, .ai-processing p {
    margin: 0 0 20px; font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.5;
}

.ai-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px; border-radius: 10px; font-size: 0.92rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.2s ease;
}
.ai-btn-primary {
    background: var(--color-primary); color: #fff;
}
.ai-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.ai-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-btn-secondary {
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); margin-top: 10px;
}
.ai-btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ai-btn-sm {
    padding: 6px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 500;
    background: var(--color-primary); color: #fff; border: none; cursor: pointer;
    transition: all 0.15s ease;
}
.ai-btn-sm:hover { background: var(--color-primary-dark); }

.ai-price-tag {
    background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 500; margin-left: 4px;
}

/* Processing view (full-width, two-column on desktop) */
.ai-processing-view {
    max-width: 100%; margin: 0 auto; padding: 20px 0;
}
.ai-processing-layout {
    display: grid; grid-template-columns: auto 1fr; gap: 48px;
    align-items: center; margin-bottom: 28px;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px;
    padding: 36px 40px;
}

.ai-processing-visual {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.ai-processing-details { text-align: left; }

.ai-orb-container {
    position: relative; width: 140px; height: 140px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.ai-orb {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}
.ai-orb-core { color: var(--color-primary); animation: ai-orb-breathe 3s ease-in-out infinite; }
@keyframes ai-orb-breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

.ai-orb-ring {
    position: absolute; border-radius: 50%;
    border: 1.5px solid var(--color-primary); opacity: 0;
}
.ai-orb-ring-1 { inset: 10px; animation: ai-ring-expand 3s ease-out infinite; }
.ai-orb-ring-2 { inset: 10px; animation: ai-ring-expand 3s ease-out 1s infinite; }
.ai-orb-ring-3 { inset: 10px; animation: ai-ring-expand 3s ease-out 2s infinite; }
@keyframes ai-ring-expand {
    0% { transform: scale(0.5); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.ai-orb-dots { position: absolute; inset: 0; animation: ai-dots-rotate 12s linear infinite; }
.ai-orb-dots span {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-primary); opacity: 0.35;
}
.ai-orb-dots span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.ai-orb-dots span:nth-child(2) { top: 20%; right: 3%; }
.ai-orb-dots span:nth-child(3) { bottom: 20%; right: 3%; }
.ai-orb-dots span:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
.ai-orb-dots span:nth-child(5) { bottom: 20%; left: 3%; }
.ai-orb-dots span:nth-child(6) { top: 20%; left: 3%; }
@keyframes ai-dots-rotate { to { transform: rotate(360deg); } }

.ai-processing-title {
    font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 8px;
}
.ai-processing-desc {
    font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6;
    margin: 0 0 20px; max-width: 480px;
}

.ai-processing-elapsed {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 20px; padding: 8px 18px;
    font-size: 0.88rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.ai-processing-elapsed svg { color: var(--color-primary); }

.ai-processing-stages {
    display: flex; flex-direction: column; gap: 0;
    text-align: left;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
    overflow: hidden;
}
.ai-stage {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.ai-stage:last-child { border-bottom: none; }
.ai-stage-indicator {
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ai-stage-done .ai-stage-indicator { color: var(--color-success); }
.ai-stage-active .ai-stage-indicator .spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.ai-stage-circle {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--color-border);
}
.ai-stage-content strong {
    display: block; font-size: 0.88rem; color: var(--color-text); margin-bottom: 2px;
}
.ai-stage-done .ai-stage-content strong { color: var(--color-success); }
.ai-stage-active .ai-stage-content strong { color: var(--color-primary); }
.ai-stage-waiting .ai-stage-content strong { color: var(--color-text-tertiary); }
.ai-stage-content span {
    font-size: 0.8rem; color: var(--color-text-tertiary); line-height: 1.4;
}

.ai-processing-info {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px; padding: 16px 20px;
}
.ai-processing-info svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.ai-processing-info strong {
    display: block; font-size: 0.88rem; color: var(--color-text); margin-bottom: 4px;
}
.ai-processing-info p {
    margin: 0; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.5;
}

/* History */
.ai-history-card { margin-top: 0; }
.ai-history-list { display: flex; flex-direction: column; }
.ai-history-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}
.ai-history-row[role="button"] { cursor: pointer; }
.ai-history-row[role="button"]:hover { background: var(--color-surface); }
.ai-history-row:last-child { border-bottom: none; }
.ai-history-date { display: flex; flex-direction: column; min-width: 120px; }
.ai-history-day { font-size: 0.88rem; font-weight: 500; color: var(--color-text); }
.ai-history-time { font-size: 0.78rem; color: var(--color-text-tertiary); }
.ai-history-meta { display: flex; align-items: center; gap: 10px; flex: 1; }
.ai-history-actions { margin-left: auto; }

.ai-status {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.ai-status-done { background: rgba(16, 185, 129, 0.1); color: var(--color-success); }
.ai-status-running { background: rgba(37, 99, 235, 0.1); color: var(--color-primary); animation: ai-status-blink 1.5s ease-in-out infinite; }
.ai-status-failed { background: rgba(239, 68, 68, 0.1); color: var(--color-danger); }
@keyframes ai-status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Result page (inline) */
.ai-result-page { max-width: 100%; margin: 0 auto; }
.ai-result-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--color-primary); font-size: 0.88rem; font-weight: 500;
    padding: 6px 0; margin-bottom: 16px; transition: opacity 0.15s;
}
.ai-result-back:hover { opacity: 0.7; }

.ai-result-disclaimer {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
    font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.5;
}
.ai-result-disclaimer svg { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }

.ai-result-title-bar {
    margin-bottom: 24px; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ai-result-title-bar h2 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 4px; font-size: 1.3rem; font-weight: 700; color: var(--color-text);
}
.ai-result-date { font-size: 0.82rem; color: var(--color-text-tertiary); display: block; margin-left: 34px; }

/* ── Layout: side-ved-side TOC + content på desktop ── */
.ai-result-layout { display: block; }
.ai-result-layout--with-toc {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px;
    align-items: flex-start;
}

.ai-result-content {
    background-color: #ffffff; border: 1px solid var(--color-border);
    border-radius: 16px; padding: 32px 36px;
    min-width: 0;
}

/* ── In-page innholdsfortegnelse (TOC) ── */
.ai-toc {
    position: sticky; top: calc(var(--sticky-top, 116px) + 16px);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 14px; padding: 16px 18px;
    max-height: calc(100vh - var(--sticky-top, 116px) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.ai-toc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.ai-toc-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-text-tertiary);
}
.ai-toc-toggle {
    display: none; background: none; border: none; padding: 4px;
    color: var(--color-text-secondary); border-radius: 6px;
    transition: transform 0.2s ease, background 0.15s ease;
}
.ai-toc-toggle:hover { background: var(--color-border-light); }
.ai-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-toc-link {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: var(--color-text-secondary);
    font-size: 0.84rem; line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 2px solid transparent;
}
.ai-toc-link:hover { background: var(--color-border-light); color: var(--color-text); }
.ai-toc-link.active {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    border-left-color: var(--color-primary);
    font-weight: 600;
}
.ai-toc-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: var(--color-border-light); color: var(--color-text-tertiary);
    border-radius: 6px; font-size: 0.72rem; font-weight: 700;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.ai-toc-link.active .ai-toc-num { background: var(--color-primary); color: #fff; }
.ai-toc-text { flex: 1; }

/* ── Markdown content (felles for view og print) ── */
.ai-markdown {
    font-size: 0.95rem; line-height: 1.7; color: var(--color-text);
    font-feature-settings: "ss01", "cv11";
}
.ai-markdown > *:first-child { margin-top: 0 !important; }
.ai-markdown > *:last-child { margin-bottom: 0 !important; }

/* H2 — store seksjonsoverskrifter med ikon og aksent */
.ai-markdown h2,
.ai-markdown .ai-h2 {
    display: flex; align-items: center; gap: 14px;
    font-size: 1.35rem; font-weight: 700; line-height: 1.3;
    margin: 44px 0 18px; color: var(--color-text);
    padding-bottom: 14px; border-bottom: 2px solid var(--color-border);
    scroll-margin-top: calc(var(--sticky-top, 116px) + 24px);
}
.ai-markdown h2:first-child { margin-top: 0; }
.ai-h2-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-bg), #fff);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-success-border);
}
.ai-h2-icon svg { width: 20px; height: 20px; }
.ai-h2-text { flex: 1; min-width: 0; }
.ai-h2-changes .ai-h2-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), #fff);
    color: #1d4ed8; border-color: rgba(59, 130, 246, 0.25);
}

/* H3 — underseksjoner */
.ai-markdown h3 {
    font-size: 1.08rem; font-weight: 700; margin: 28px 0 10px;
    color: var(--color-text); line-height: 1.35;
    scroll-margin-top: calc(var(--sticky-top, 116px) + 24px);
}

/* Numrerte H3 — store nummer-sirkler for hovedfunn */
.ai-markdown h3.ai-numbered-h3 {
    display: flex; align-items: center; gap: 14px;
    margin: 32px 0 14px; padding: 10px 0;
}
.ai-numbered-h3 .ai-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff; border-radius: 50%;
    font-size: 0.92rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px -1px rgba(38, 166, 154, 0.4);
}
.ai-numbered-h3 .ai-num-title { flex: 1; min-width: 0; line-height: 1.35; }

/* H4 — sub-subseksjoner (#### Kaffe, #### Mounjaro, osv.) */
.ai-markdown h4 {
    font-size: 0.95rem; font-weight: 700;
    margin: 22px 0 8px; color: var(--color-text);
    text-transform: none; letter-spacing: -0.005em;
    line-height: 1.4; padding-left: 12px;
    border-left: 3px solid var(--color-primary);
}

/* Avsnitt og inline */
.ai-markdown p { margin: 0 0 14px; }
.ai-markdown strong { color: var(--color-text); font-weight: 700; }
.ai-markdown em { font-style: italic; color: var(--color-text); }
.ai-markdown code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.86em; padding: 2px 6px;
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: 5px; color: var(--color-text);
}
.ai-markdown a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.ai-markdown a:hover { color: var(--color-primary); }

/* Lister */
.ai-markdown ul, .ai-markdown ol { margin: 8px 0 18px; padding-left: 24px; }
.ai-markdown li { margin: 6px 0; padding-left: 4px; }
.ai-markdown ul > li::marker { color: var(--color-primary); }
.ai-markdown ol > li::marker { color: var(--color-text-secondary); font-weight: 600; }
.ai-markdown li > ul, .ai-markdown li > ol { margin: 6px 0; }

/* HR — pen seksjonsskiller */
.ai-markdown hr {
    border: none; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
    margin: 32px 0;
}

/* ── Callouts ── */
.ai-markdown .ai-callout {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 18px 0; padding: 14px 18px;
    border-left: 4px solid; border-radius: 10px;
    background: var(--color-bg);
    break-inside: avoid;
}
.ai-callout-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
}
.ai-callout-icon svg { width: 20px; height: 20px; }
.ai-callout-body { flex: 1; min-width: 0; }
.ai-callout-body p { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.6; }
.ai-callout-body p:last-child { margin-bottom: 0; }
.ai-callout--info { background: rgba(59, 130, 246, 0.06); border-color: #3b82f6; }
.ai-callout--info .ai-callout-icon { color: #1d4ed8; }
.ai-callout--tip { background: var(--color-primary-bg); border-color: var(--color-primary); }
.ai-callout--tip .ai-callout-icon { color: var(--color-primary-dark); }
.ai-callout--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.ai-callout--warning .ai-callout-icon { color: #b45309; }
.ai-callout--danger { background: var(--color-danger-bg); border-color: var(--color-danger); }
.ai-callout--danger .ai-callout-icon { color: #b91c1c; }
.ai-callout--note { background: var(--color-border-light); border-color: var(--color-text-tertiary); }
.ai-callout--note .ai-callout-icon { color: var(--color-text-secondary); }

/* ── Biomarkør-rader (chips) ── */
.ai-markdown ul.ai-bio-list {
    list-style: none; padding: 0; margin: 16px 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ai-markdown li.ai-bio-row {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(150px, max-content) auto 1fr;
    align-items: baseline; gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0;
}
.ai-markdown li.ai-bio-row + li.ai-bio-row:not(.ai-bio-list li) { margin-top: 6px; }
.ai-markdown li.ai-bio-row:hover { background: var(--color-surface-hover); }
.ai-bio-row .ai-bio-name {
    font-weight: 700; color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem; line-height: 1.4;
}
.ai-bio-row .ai-bio-detail {
    color: var(--color-text-secondary); line-height: 1.55;
    font-size: 0.9rem; min-width: 0;
}
.ai-bio-row .ai-bio-detail strong { color: var(--color-text); }
.ai-bio-status {
    display: inline-flex; align-items: center; align-self: center;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.02em; white-space: nowrap;
    line-height: 1.4;
}

.ai-bio-status--optimal { background: rgba(59, 130, 246, 0.10); color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.22); }
.ai-bio-status--normal { background: var(--color-success-bg); color: #047857; border: 1px solid var(--color-success-border); }
.ai-bio-status--over-opt,
.ai-bio-status--under-opt { background: rgba(245, 158, 11, 0.10); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.25); }
.ai-bio-status--over-ref,
.ai-bio-status--under-ref { background: var(--color-danger-bg); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.25); }

/* ── Endringer siden forrige analyse: spesialstyling ── */
.ai-markdown ul.ai-changes-list { padding-left: 0; list-style: none; }
.ai-markdown ul.ai-changes-list > li {
    position: relative; padding: 10px 14px 10px 36px;
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-left: 3px solid #3b82f6;
    border-radius: 8px; margin-bottom: 8px;
}
.ai-markdown ul.ai-changes-list > li::before {
    content: '↻'; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #3b82f6; font-weight: 700; font-size: 1rem;
    line-height: 1;
}
.ai-markdown ul.ai-changes-list > li::marker { content: ''; }

/* ── Trender-over-tid ── */
.ai-markdown ul.ai-trend-list { padding-left: 0; list-style: none; }
.ai-markdown ul.ai-trend-list > li {
    position: relative; padding: 8px 12px 8px 32px;
    margin-bottom: 6px; border-radius: 6px;
}
.ai-markdown ul.ai-trend-list > li::marker { content: ''; }
.ai-markdown ul.ai-trend-list > li::before {
    content: '–'; position: absolute; left: 12px; top: 8px;
    width: 14px; text-align: center; font-weight: 700;
    color: var(--color-text-tertiary);
}

.ai-trend-row--up::before { content: '↑' !important; color: var(--color-text-secondary) !important; }
.ai-trend-row--down::before { content: '↓' !important; color: var(--color-text-secondary) !important; }
.ai-trend-row--stable::before { content: '=' !important; color: var(--color-text-tertiary) !important; }

/* ── Anbefalinger: handlingsrettede kort ── */
.ai-markdown ol.ai-recommend-ol {
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
    margin: 16px 0;
}
.ai-markdown ol.ai-recommend-ol > li {
    position: relative;
    padding: 14px 18px 14px 56px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    line-height: 1.6;
}
.ai-markdown ol.ai-recommend-ol > li::marker { content: ''; }

.ai-markdown ol.ai-recommend-ol > li::before {
    content: attr(data-num);
    position: absolute; left: 14px; top: 14px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    border-radius: 8px; font-weight: 700; font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.ai-markdown ol.ai-recommend-ol > li > ul,
.ai-markdown ol.ai-recommend-ol > li > ol {
    margin-top: 8px;
}

/* ── Disclaimer-linje (siste italic-paragraf) ── */
.ai-markdown .ai-disclaimer-line {
    margin-top: 32px; padding: 14px 18px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.82rem; color: var(--color-text-secondary);
    line-height: 1.55;
}
.ai-markdown .ai-disclaimer-line em { font-style: normal; }

/* Loading state */
.ai-loading-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; gap: 16px;
}
.ai-loading-state p { color: var(--color-text-secondary); font-size: 0.9rem; }
.ai-error { text-align: center; color: var(--color-danger); padding: 40px 20px; }

/* Responsive */
@media (max-width: 1024px) {
    .ai-result-layout--with-toc { grid-template-columns: 1fr; gap: 16px; }
    .ai-toc {
        position: static; max-height: none;
        padding: 12px 14px;
    }
    .ai-toc-toggle { display: inline-flex; }
    .ai-toc-list {
        display: none;
        margin-top: 8px;
        max-height: 60vh; overflow-y: auto;
    }
    .ai-toc.ai-toc-open .ai-toc-list { display: flex; }
    .ai-toc.ai-toc-open .ai-toc-toggle { transform: rotate(180deg); }
}

@media (max-width: 768px) {
    .ai-analyse-grid { grid-template-columns: 1fr; }
    .ai-card-body { padding: 16px; }
    .ai-card-header { padding: 14px 16px; }
    .ai-history-row { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
    .ai-history-date { min-width: auto; flex-direction: row; gap: 8px; }
    .ai-history-actions { width: 100%; }
    .ai-btn-sm { width: 100%; text-align: center; }
    .ai-result-content { padding: 22px 20px; border-radius: 12px; }
    .ai-result-title-bar { flex-direction: column; }
    .ai-result-title-bar h2 { font-size: 1.15rem; }
    .ai-share-bar { width: 100%; }
    .ai-share-bar-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 0.72rem; }
    .ai-result-date { margin-left: 30px; }

    /* Markdown — mobil */
    .ai-markdown { font-size: 0.92rem; }
    .ai-markdown h2,
    .ai-markdown .ai-h2 { font-size: 1.18rem; gap: 12px; padding-bottom: 12px; margin: 36px 0 14px; }
    .ai-h2-icon { width: 34px; height: 34px; }
    .ai-h2-icon svg { width: 18px; height: 18px; }
    .ai-markdown h3 { font-size: 1.02rem; }
    .ai-markdown h4 { font-size: 0.92rem; }
    .ai-numbered-h3 .ai-num { width: 32px; height: 32px; font-size: 0.85rem; }

    .ai-markdown li.ai-bio-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 10px; padding: 10px 12px;
    }
    .ai-bio-row .ai-bio-name { grid-column: 1; grid-row: 1; }
    .ai-bio-row .ai-bio-status { grid-column: 2; grid-row: 1; align-self: center; }
    .ai-bio-row .ai-bio-detail { grid-column: 1 / -1; grid-row: 2; font-size: 0.86rem; }

    .ai-markdown .ai-callout { padding: 12px 14px; gap: 10px; }
    .ai-markdown ol.ai-recommend-ol > li { padding: 12px 14px 12px 50px; }
    .ai-markdown ol.ai-recommend-ol > li::before { width: 26px; height: 26px; font-size: 0.8rem; }

    .ai-processing-layout {
        grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; text-align: center;
    }
    .ai-processing-details { text-align: center; }
    .ai-processing-desc { margin-left: auto; margin-right: auto; }
    .ai-orb-container { width: 120px; height: 120px; }
    .ai-orb { width: 60px; height: 60px; }
    .ai-processing-title { font-size: 1.1rem; }
    .ai-processing-desc { font-size: 0.85rem; }
    .ai-stage { padding: 14px 16px; gap: 12px; }
}

@media (max-width: 480px) {
    .ai-analyse-header .page-title { font-size: 1.25rem; }
    .ai-analyse-subtitle { font-size: 0.88rem; }
    .ai-btn { padding: 11px 20px; font-size: 0.86rem; width: 100%; }
    .ai-feature { gap: 10px; }
    .ai-feature-icon { width: 32px; height: 32px; }
    .ai-result-content { padding: 18px 14px; border-radius: 10px; }
    .ai-result-disclaimer { padding: 12px 14px; font-size: 0.8rem; }
    .ai-tip { padding: 14px 16px; font-size: 0.84rem; }
    .ai-tip-missing { padding-left: 0; }
    .ai-tip-progress { padding-left: 0; }

    /* Markdown — small mobile */
    .ai-markdown { font-size: 0.9rem; line-height: 1.65; }
    .ai-markdown h2,
    .ai-markdown .ai-h2 { font-size: 1.08rem; gap: 10px; margin: 30px 0 12px; padding-bottom: 10px; }
    .ai-h2-icon { width: 30px; height: 30px; border-radius: 8px; }
    .ai-h2-icon svg { width: 16px; height: 16px; }
    .ai-markdown h3 { font-size: 0.98rem; margin: 22px 0 8px; }
    .ai-numbered-h3 .ai-num { width: 28px; height: 28px; font-size: 0.78rem; }
    .ai-markdown h4 { font-size: 0.88rem; padding-left: 10px; border-left-width: 2px; }
    .ai-markdown ul, .ai-markdown ol { padding-left: 20px; }
    .ai-markdown li.ai-bio-row { padding: 9px 10px; }
    .ai-bio-row .ai-bio-name { font-size: 0.88rem; }
    .ai-bio-row .ai-bio-detail { font-size: 0.84rem; }
    .ai-bio-status { font-size: 0.66rem; padding: 2px 8px; }
    .ai-toc { padding: 10px 12px; }
    .ai-toc-link { padding: 7px 8px; font-size: 0.82rem; }
    .ai-toc-num { min-width: 20px; height: 20px; font-size: 0.68rem; }

    .ai-processing-layout { padding: 20px 16px; gap: 20px; }
    .ai-orb-container { width: 100px; height: 100px; }
    .ai-orb { width: 50px; height: 50px; }
    .ai-orb-core svg { width: 24px; height: 24px; }
    .ai-processing-view { padding: 12px 0; }
    .ai-processing-elapsed { padding: 6px 14px; font-size: 0.82rem; }
    .ai-stage { padding: 12px 14px; gap: 10px; }
    .ai-stage-content strong { font-size: 0.84rem; }
    .ai-stage-content span { font-size: 0.76rem; }
    .ai-processing-info { padding: 14px 16px; gap: 10px; }
    .ai-processing-info strong { font-size: 0.84rem; }
    .ai-processing-info p { font-size: 0.78rem; }
}

/* AI PRINT OVERLAY */
#ai-print-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: #f1f5f9; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ai-print-toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.ai-print-toolbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #26a69a; color: #fff; }
.ai-print-toolbar-btn:hover { background: #004d40; }
.ai-print-toolbar-close { background: #e2e8f0; color: #5f6d7e; }
.ai-print-toolbar-close:hover { background: #cbd5e1; }
body.ai-print-active > *:not(#ai-print-overlay) { display: none !important; }
.ai-print-page { max-width: 820px; margin: 0 auto; padding: 44px 40px 60px; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.ai-print-doc-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 2px solid #26a69a; margin-bottom: 24px; }
.ai-print-doc-logo { height: 34px; width: auto; }
.ai-print-doc-header-right { text-align: right; font-size: 0.78rem; color: #475569; line-height: 1.6; }
.ai-print-doc-header-right strong { color: #0f172a; font-weight: 600; }
.ai-print-doc-meta { display: flex; gap: 24px; flex-wrap: wrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 20px; margin-bottom: 18px; font-size: 0.82rem; color: #475569; }
.ai-print-doc-meta strong { color: #0f172a; font-weight: 600; }
.ai-print-doc-disclaimer { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 13px 18px; margin-bottom: 26px; font-size: 0.84rem; color: #78350f; line-height: 1.55; }
.ai-print-doc-disclaimer strong { color: #6b2e0f; font-weight: 700; }

/* TOC i PDF */
.ai-print-toc {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 18px 22px;
    margin-bottom: 28px; break-after: page;
    page-break-after: always;
}
.ai-print-toc-title {
    font-size: 1.05rem; font-weight: 700; color: #0f172a;
    margin: 0 0 12px; padding: 0; border: none;
    display: block;
}
.ai-print-toc-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    counter-reset: toc;
}
.ai-print-toc-list > li { counter-increment: toc; }
.ai-print-toc-list a {
    display: flex; align-items: baseline; gap: 8px;
    text-decoration: none; color: #1e293b;
    padding: 6px 4px; font-size: 0.92rem;
    border-radius: 4px;
}
.ai-print-toc-list a::before {
    content: counter(toc) ".";
    color: #26a69a; font-weight: 700;
    min-width: 22px; font-variant-numeric: tabular-nums;
}
.ai-print-toc-text { flex-shrink: 0; }
.ai-print-toc-leader {
    flex: 1; align-self: end;
    border-bottom: 1px dotted #cbd5e1;
    margin-bottom: 4px;
}


.ai-print-doc-content { color: #1e293b; }

.ai-print-doc-footer {
    margin-top: 40px; padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    text-align: center; font-size: 0.76rem;
    color: #64748b; line-height: 1.6;
}

@media print {
    body.ai-print-active > *:not(#ai-print-overlay) { display: none !important; }
    body.ai-print-active { background: #fff; }
    #ai-print-overlay { position: static; overflow: visible; background: #fff; }
    .ai-print-toolbar { display: none !important; }
    .ai-print-page {
        box-shadow: none; padding: 0; max-width: none; margin: 0;
    }

    
    .ai-print-page,
    .ai-print-page .ai-markdown {
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
        color: #0f172a;
        font-size: 10.5pt; line-height: 1.6;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Sideskift mellom hovedseksjoner */
    .ai-print-doc-content > h2,
    .ai-print-doc-content > .ai-h2 {
        break-before: page; page-break-before: always;
    }
    .ai-print-doc-content > h2:first-of-type,
    .ai-print-doc-content > .ai-h2:first-of-type {
        break-before: auto; page-break-before: auto;
    }

    /* Unngå at element blir delt midt i */
    .ai-markdown h2, .ai-markdown h3, .ai-markdown h4 {
        break-after: avoid; page-break-after: avoid;
    }
    .ai-markdown li, .ai-markdown li.ai-bio-row,
    .ai-markdown .ai-callout,
    .ai-markdown ol.ai-recommend-ol > li {
        break-inside: avoid; page-break-inside: avoid;
    }
    .ai-markdown p { orphans: 3; widows: 3; }

    /* Fontstørrelser for print */
    .ai-print-doc-content h2,
    .ai-print-doc-content .ai-h2 { font-size: 16pt; gap: 10pt; padding-bottom: 8pt; margin: 0 0 14pt; }
    .ai-print-doc-content .ai-h2-icon {
        width: 28pt; height: 28pt; border-radius: 6pt;
        background: #e0f2f1; border: 1px solid #b2dfdb;
    }
    .ai-print-doc-content .ai-h2-icon svg { width: 16pt; height: 16pt; }
    .ai-print-doc-content h3 { font-size: 12pt; margin: 14pt 0 6pt; }
    .ai-print-doc-content h3.ai-numbered-h3 { gap: 10pt; }
    .ai-print-doc-content .ai-numbered-h3 .ai-num { width: 24pt; height: 24pt; font-size: 10pt; box-shadow: none; }
    .ai-print-doc-content h4 { font-size: 10.5pt; margin: 10pt 0 4pt; }
    .ai-print-doc-content p { margin: 0 0 8pt; }
    .ai-print-doc-content ul, .ai-print-doc-content ol { margin: 6pt 0 10pt; padding-left: 18pt; }
    .ai-print-doc-content li { margin: 3pt 0; }

    /* Bio-rader i print: hold som compact rader */
    .ai-print-doc-content li.ai-bio-row {
        padding: 7pt 10pt; gap: 8pt; margin-bottom: 4pt;
        border-radius: 6pt; background: #f8fafc; border: 1px solid #e2e8f0;
    }
    .ai-print-doc-content .ai-bio-status {
        font-size: 7.5pt; padding: 1pt 6pt;
        border-radius: 999px;
    }

    /* Callouts i print */
    .ai-print-doc-content .ai-callout {
        padding: 9pt 12pt; gap: 9pt; margin: 10pt 0;
        border-radius: 6pt; border-left-width: 3pt;
    }
    .ai-print-doc-content .ai-callout-body p { font-size: 10pt; }

    /* Anbefalingskort i print */
    .ai-print-doc-content ol.ai-recommend-ol > li {
        padding: 10pt 12pt 10pt 36pt; border-radius: 6pt;
    }
    .ai-print-doc-content ol.ai-recommend-ol > li::before {
        width: 20pt; height: 20pt; font-size: 9pt; left: 10pt; top: 10pt;
    }

    /* Disclaimer-line i print */
    .ai-print-doc-content .ai-disclaimer-line {
        font-size: 9pt; padding: 9pt 12pt; margin-top: 18pt;
    }

    /* Topp- og bunntekst på hver side */
    @page {
        margin: 18mm 14mm 22mm 14mm;
    }
    @page :first {
        margin-top: 14mm;
    }
}

@media (max-width: 600px) {
    .ai-print-page { padding: 22px 16px 40px; margin: 0; box-shadow: none; }
    .ai-print-toolbar { padding: 10px 12px; gap: 8px; }
    .ai-print-toolbar-btn { padding: 8px 14px; font-size: 0.8rem; }
    .ai-print-doc-header { flex-direction: column; gap: 12px; text-align: center; }
    .ai-print-doc-header-right { text-align: center; }
    .ai-print-doc-meta { flex-direction: column; gap: 8px; }
    .ai-print-toc { padding: 14px 16px; }
    .ai-print-toc-title { font-size: 0.98rem; }
}

/* BANKID INTEGRATION */

/* Rollout phases (controlled by BANKID_ENABLED + BANKID_EMAIL_LOGIN in config.php): */

/* Phase 1 & 2: show BankID button when feature is on */
body[data-bankid-enabled="1"] #bankid-login-section:not(.hidden),
body[data-bankid-enabled="1"] #bankid-register-section:not(.hidden) {
    display: block !important;
}

/* Phase 2 only: hide email/password forms entirely */
body[data-bankid-only="1"] #login-form,
body[data-bankid-only="1"] .auth-options,
body[data-bankid-only="1"] #auth-register #register-form {
    display: none !important;
}
body[data-bankid-only="1"] #bankid-login-section .bankid-divider,
body[data-bankid-only="1"] #bankid-register-section .bankid-divider {
    display: none !important;
}

.bankid-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.bankid-divider::before,
.bankid-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.bankid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 9999px;
    background: #39134C;
    color: #fff;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
.bankid-btn:hover {
    background: #470D70;
}
.bankid-btn:active {
    background: #2d0e3b;
}
.bankid-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.bankid-btn .bankid-dna {
    height: 20px;
    width: auto;
    flex-shrink: 0;
}

/* BankID verified info in registration complete form */
.bankid-verified-info {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}
.bankid-verified-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #10b981;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.bankid-field-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 10px;
}
.bankid-field-locked:last-child {
    margin-bottom: 0;
}
.bankid-field-locked label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.bankid-field-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bankid-field-value::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
}

.auth-field-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.bankid-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.bankid-option-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 14px;
    line-height: 1.45;
}

/* BankID admin test section */
.bankid-test-info {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.bankid-test-info a {
    color: var(--primary-color);
}
.bankid-test-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.bankid-test-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bankid-test-btn:hover:not(:disabled) {
    border-color: #003b6f;
    color: #003b6f;
    background: rgba(0, 59, 111, 0.05);
}
.bankid-test-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.bankid-test-result {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}
.bankid-test-result h4 {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.bankid-test-result pre {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    line-height: 1.5;
}

/* BankID re-auth modal */
.bankid-reauth-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bankid-reauth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.bankid-reauth-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: bankidModalIn 0.25s ease;
}
@keyframes bankidModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bankid-reauth-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.bankid-reauth-header svg {
    color: #003b6f;
    flex-shrink: 0;
}
.bankid-reauth-header h3 {
    font-size: 1.1rem;
    margin: 0;
}
.bankid-reauth-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.55;
}
.bankid-reauth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bankid-reauth-cancel {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bankid-reauth-cancel:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .bankid-test-actions {
        grid-template-columns: 1fr;
    }
    .bankid-reauth-card {
        padding: 24px 20px;
    }
}

/* PAYMENT METHOD MODAL */
.pm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
    padding: 16px;
}
.pm-modal-overlay.pm-modal-visible {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}
.pm-modal-overlay.pm-modal-closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
}
.pm-modal {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.pm-modal-visible .pm-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.pm-modal-closing .pm-modal {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
}
.pm-modal h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    text-align: center;
}

.pm-modal.card-modal { max-width: 440px; text-align: left; }
.pm-modal.card-modal h3 { text-align: left; margin-bottom: 6px; }
.card-modal-sub { font-size: 0.82rem; color: var(--color-text-secondary, #5f6d7e); margin: 0 0 18px; line-height: 1.5; }
.card-element-wrap { padding: 14px; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 12px); background: var(--color-surface, #fff); transition: border-color 150ms ease, box-shadow 150ms ease; }
.card-element-wrap:focus-within { border-color: var(--color-primary, #26a69a); box-shadow: 0 0 0 3px rgba(38,166,154,0.12); }
.card-modal-error { min-height: 18px; margin-top: 8px; font-size: 0.8rem; color: var(--color-danger, #ef4444); line-height: 1.4; }
.card-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.card-modal-actions .ms-btn { flex: 1; width: auto; justify-content: center; }
.card-modal-actions .spinner-sm { width: 16px; height: 16px; border-width: 2px; }

.eco-refund-btn { margin-left: 10px; padding: 4px 11px; font-size: 0.74rem; font-weight: 600; border: 1px solid var(--color-danger, #ef4444); color: var(--color-danger, #ef4444); background: transparent; border-radius: var(--radius-sm, 8px); cursor: pointer; transition: background 150ms ease; }
.eco-refund-btn:hover { background: rgba(239,68,68,0.08); }
.eco-rcp-refunded { display: block; font-size: 0.7rem; color: var(--color-text-tertiary, #94a3b8); margin-top: 2px; }
.eco-refund-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary, #5f6d7e); margin: 14px 0 6px; }
.eco-refund-input, .eco-refund-reason { width: 100%; }
.eco-refund-input:disabled { background: var(--color-bg, #f5f7fa); color: var(--color-text-tertiary, #94a3b8); }
.eco-refund-checkrow { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-text, #1a2332); margin-top: 8px; cursor: pointer; }
.eco-refund-checkrow input { width: auto; }
.pm-price-block {
    text-align: center;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0faf9, #e0f5f3);
    border: 1px solid rgba(38, 166, 154, 0.2);
    border-radius: 10px;
}
.pm-price-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary-dark, #00796b);
    letter-spacing: -0.02em;
}
.pm-price-detail {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}
.pm-price-note {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}
.pm-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pm-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.pm-option:hover, .pm-option:focus-visible {
    border-color: var(--primary, #2563eb);
    background: var(--primary-bg, rgba(37, 99, 235, 0.04));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pm-option:active {
    transform: scale(0.98);
}
.pm-icon {
    flex-shrink: 0;
    color: var(--text-secondary, #64748b);
}
.pm-vipps-icon {
    border-radius: 6px;
    object-fit: contain;
}
.pm-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pm-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}
.pm-desc {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.pm-cancel {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.pm-cancel:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #1a1a2e);
}

/* Provider badges */
.ms-provider-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
    letter-spacing: 0.02em;
}
.ms-provider-vipps {
    background: rgba(255, 91, 36, 0.1);
    color: #FF5B24;
}
.ms-provider-stripe {
    background: rgba(99, 91, 255, 0.1);
    color: #635BFF;
}
.ms-inv-provider-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ms-inv-vipps {
    background: rgba(255, 91, 36, 0.12);
    color: #FF5B24;
}

@media (max-width: 600px) {
    .pm-modal {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 24px 20px 20px;
    }
    .pm-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .pm-modal-visible .pm-modal {
        transform: translateY(0);
    }
    .pm-modal-overlay:not(.pm-modal-visible) .pm-modal,
    .pm-modal-closing .pm-modal {
        transform: translateY(100%);
    }
}

/* DOCTOR IDENTITY MODAL */

.doctor-id-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.doctor-id-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.doctor-id-card {
    position: relative;
    background: var(--color-surface, #fff);
    border-radius: 14px;
    padding: 32px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: doctorIdIn 0.25s ease;
}
@keyframes doctorIdIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.doctor-id-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.doctor-id-header svg {
    color: var(--color-primary, #26a69a);
    flex-shrink: 0;
}
.doctor-id-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.doctor-id-text {
    font-size: 0.88rem;
    color: var(--color-text-secondary, #64748b);
    margin-bottom: 20px;
    line-height: 1.55;
}
.doctor-id-card .auth-field { margin-bottom: 14px; }
.doctor-id-card select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.92rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1a2332);
    appearance: auto;
}
.doctor-id-cancel {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary, #5f6d7e);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.doctor-id-cancel:hover {
    background: var(--color-bg, #f5f7fa);
    color: var(--color-text, #1a2332);
}
@media (max-width: 500px) {
    .doctor-id-card { padding: 24px 20px; }
}

/* COOKIE CONSENT MANAGER (CMP) */
.cmp-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.cmp-banner.cmp-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.cmp-inner {
    max-width: 680px;
    margin: 0 auto 16px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cmp-main { display: flex; flex-direction: column; gap: 14px; }
.cmp-text { font-size: 0.84rem; color: #374151; line-height: 1.55; margin: 0; }
.cmp-link { color: var(--color-primary, #26a69a); font-weight: 500; text-decoration: none; }
.cmp-link:hover { text-decoration: underline; }
.cmp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-btn { padding: 9px 20px; border: none; border-radius: 10px; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.cmp-btn-primary { background: var(--color-primary, #26a69a); color: #fff; margin-left: auto; }
.cmp-btn-primary:hover { background: var(--color-primary-dark, #1e8e82); }
.cmp-btn-secondary { background: transparent; color: #374151; border: 1.5px solid #d1d5db; }
.cmp-btn-secondary:hover { border-color: #9ca3af; background: #f9fafb; }
.cmp-customize { font-size: 0.8rem; color: #6b7280; text-decoration: none; font-weight: 500; margin-left: 4px; }
.cmp-customize:hover { color: var(--color-primary, #26a69a); }

.cmp-details { border-top: 1px solid #e5e7eb; margin-top: 16px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cmp-details.cmp-hidden { display: none; }
.cmp-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #f9fafb; border-radius: 10px; }
.cmp-cat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-cat-name { font-size: 0.84rem; font-weight: 600; color: #1f2937; }
.cmp-cat-desc { font-size: 0.73rem; color: #6b7280; }
.cmp-always-on { font-size: 0.72rem; font-weight: 600; color: var(--color-primary, #26a69a); background: rgba(38, 166, 154, 0.1); padding: 3px 10px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }

.cmp-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.cmp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cmp-toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: background 0.2s; }
.cmp-toggle-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.cmp-toggle input:checked + .cmp-toggle-slider { background: var(--color-primary, #26a69a); }
.cmp-toggle input:checked + .cmp-toggle-slider::before { transform: translateX(20px); }

.cmp-btn-save { width: 100%; margin-top: 4px; }

/* Mine sider: cookie settings */
.ms-cookie-settings { margin-top: 20px; padding: 16px; background: var(--color-bg, #f5f7fa); border: 1px solid var(--color-border-light, #f1f5f9); border-radius: 12px; }
.ms-email-hf-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; }
.ms-email-hf-divider::before, .ms-email-hf-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border-light, #e5e7eb); }
.ms-email-hf-divider span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary, #9ca3af); white-space: nowrap; }
.ms-cookie-title { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--color-text, #1a2332); margin-bottom: 14px; }
.ms-cookie-title svg { color: var(--color-primary, #26a69a); flex-shrink: 0; }
.ms-cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--color-surface, #fff); border-radius: 8px; margin-bottom: 6px; }
.ms-cookie-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-cookie-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text, #1a2332); }
.ms-cookie-desc { font-size: 0.73rem; color: var(--color-text-tertiary, #94a3b8); }
.ms-cookie-always { font-size: 0.72rem; font-weight: 600; color: var(--color-primary, #26a69a); background: rgba(38,166,154,0.1); padding: 3px 10px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.admin-ud-consent-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-ud-consent-date { font-size: 0.73rem; color: var(--color-text-tertiary); }

/* Admin daily-insight diagnosis modal */
.admin-di-diag-modal {
    position: fixed; inset: 0; z-index: 10020;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.admin-di-diag-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.admin-di-diag-content {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dialogSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-di-diag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
}
.admin-di-diag-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.admin-di-diag-close {
    width: 32px; height: 32px;
    border: none; background: none;
    border-radius: var(--radius-sm);
    font-size: 1.4rem; line-height: 1;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.admin-di-diag-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.admin-di-diag-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    min-width: 0;
}
.admin-di-user {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
}
.admin-di-user strong { font-size: 0.95rem; color: var(--color-text); }
.admin-di-user span { font-size: 0.8rem; color: var(--color-text-tertiary); }

.admin-di-conclusion {
    padding: 14px 16px;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 18px;
}
.admin-di-conclusion-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.admin-di-conclusion p {
    margin: 0 0 6px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text);
}
.admin-di-rec {
    font-size: 0.83rem !important;
    color: var(--color-text-secondary) !important;
    margin-top: 8px !important;
}

.admin-di-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-di-step {
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}
.admin-di-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.admin-di-step-header strong {
    font-size: 0.88rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text);
}
.admin-di-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.admin-di-step-detail {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.admin-di-step-json {
    margin-top: 8px;
}
.admin-di-step-json summary {
    cursor: pointer;
    font-size: 0.76rem;
    color: var(--color-text-tertiary);
    padding: 4px 0;
    user-select: none;
}
.admin-di-step-json summary:hover { color: var(--color-primary); }
.admin-di-step-json pre {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text);
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-di-diag-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.admin-di-force {
    margin-top: 20px;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
    border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    border-radius: var(--radius-md);
}
.admin-di-force-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}
.admin-di-force-desc {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.admin-di-force-btn { align-self: flex-start; }
.admin-di-force-result { margin-top: 12px; }
.admin-di-force-result:empty { display: none; }
.admin-di-force-success {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-success, #10b981) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-success, #10b981) 30%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-success, #10b981);
}
.admin-di-force-success strong { display: block; margin-bottom: 4px; }
.admin-di-force-preview {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-style: italic;
    font-size: 0.83rem;
    line-height: 1.55;
}
.admin-di-force-fail {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-danger, #ef4444) 6%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-danger, #ef4444) 28%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-danger, #ef4444);
}
.admin-di-force-fail.admin-di-force-warn {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
    color: var(--color-warning, #d97706);
}
.admin-di-force-steps {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
.admin-di-force-steps li { margin-bottom: 4px; line-height: 1.45; }

@media (max-width: 640px) {
    .admin-di-diag-modal { padding: 0; align-items: stretch; }
    .admin-di-diag-content {
        max-width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        border-radius: 0;
    }
    .admin-di-diag-header {
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top, 0px));
    }
    .admin-di-diag-body { padding: 14px 16px; }
    .admin-di-diag-footer {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
    .admin-di-step-header strong { font-size: 0.82rem; }
    .admin-di-step-detail { font-size: 0.82rem; }
}

@media (max-width: 700px) {
    .cmp-inner { margin: 0 8px 8px; padding: 16px 18px; border-radius: 14px; }
    .cmp-actions { flex-direction: column; width: 100%; }
    .cmp-btn { width: 100%; text-align: center; }
    .cmp-customize { text-align: center; width: 100%; margin-left: 0; margin-top: 2px; }
}

/* DASHBOARD PICKER (legg til biomarkør på dashboard) */
.dpicker-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.dpicker-overlay.dpicker-closing { animation: fadeOut 0.18s ease forwards; }
.dpicker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}
.dpicker-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    background: var(--color-surface);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.dpicker-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
}
.dpicker-header-text { flex: 1; min-width: 0; }
.dpicker-header h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.dpicker-marker-line {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.dpicker-marker-name { font-weight: 600; color: var(--color-text); }
.dpicker-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}
.dpicker-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.dpicker-body {
    padding: 14px 20px 18px;
    overflow-y: auto;
    flex: 1;
}
.dpicker-hint {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}
.dpicker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dpicker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    min-height: 56px;
}
.dpicker-item:hover {
    border-color: rgba(38, 166, 154, 0.4);
    background: var(--color-surface);
    transform: translateY(-1px);
}
.dpicker-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
}
.dpicker-item input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.dpicker-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.dpicker-item input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(38, 166, 154, 0.3);
    outline-offset: 2px;
}
.dpicker-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
    background: var(--color-primary);
    border-color: var(--color-primary);
    opacity: 0.6;
}

.dpicker-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dpicker-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dpicker-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--color-text-tertiary);
}
.dpicker-item-count { font-weight: 500; }

.dpicker-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.dpicker-tag-default {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.dpicker-tag-default svg { color: #d97706; }
.dpicker-tag-active {
    background: rgba(38, 166, 154, 0.12);
    color: var(--color-primary-dark);
}
.dpicker-tag-added {
    background: rgba(38, 166, 154, 0.18);
    color: var(--color-primary-dark);
}

.dpicker-check-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.dpicker-item input[type="checkbox"]:checked ~ .dpicker-check-indicator { opacity: 1; }

.dpicker-item-active {
    border-color: rgba(38, 166, 154, 0.45);
    background: linear-gradient(180deg, rgba(38, 166, 154, 0.05) 0%, var(--color-bg) 100%);
}
.dpicker-item-already {
    cursor: default;
    background: rgba(38, 166, 154, 0.06);
    border-color: rgba(38, 166, 154, 0.25);
}
.dpicker-item-already:hover { transform: none; }
.dpicker-item-already .dpicker-item-name { color: var(--color-text-secondary); }

.dpicker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--color-border-light, var(--color-border));
    background: var(--color-bg);
}
.dpicker-btn {
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.dpicker-btn-cancel {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.dpicker-btn-cancel:hover {
    background: var(--color-bg);
    color: var(--color-text);
}
.dpicker-btn-save {
    background: var(--color-primary);
    color: white;
}
.dpicker-btn-save:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.3);
}
.dpicker-btn-save:disabled {
    background: var(--color-border);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}
.dpicker-btn-save .spinner { width: 14px; height: 14px; border-width: 2px; }


.detail-add-btn.partially-added,
.detail-add-btn-mobile.partially-added {
    background: linear-gradient(135deg, var(--color-primary) 50%, rgba(38, 166, 154, 0.5) 100%);
}

/* Mobile (≤600px): bottom sheet style */
@media (max-width: 600px) {
    .dpicker-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .dpicker-dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        animation: dpickerSlideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    @keyframes dpickerSlideUpMobile {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .dpicker-header { padding: 16px 18px 12px; }
    .dpicker-header h3 { font-size: 1rem; }
    .dpicker-body { padding: 12px 18px 16px; }
    .dpicker-footer { padding: 12px 18px 16px; }
    .dpicker-btn { flex: 1; padding: 12px 16px; }
    .dpicker-item { padding: 12px; min-height: 60px; }
    .dpicker-item-name { font-size: 0.92rem; }
    .dpicker-item-meta { font-size: 0.72rem; }
    /* Drag-handle øverst som visuell hint for bottom sheet */
    .dpicker-dialog::before {
        content: '';
        display: block;
        margin: 8px auto 0;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--color-border);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dpicker-overlay, .dpicker-dialog { animation: none; }
}


.modal-dialog.modal-shake {
    animation: modalShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes modalShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.modal-close.modal-close-pulse {
    animation: modalClosePulse 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalClosePulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); background: var(--color-danger-bg, rgba(239, 68, 68, 0.08)); color: var(--color-danger, #ef4444); }
    35%  { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); background: var(--color-danger-bg, rgba(239, 68, 68, 0.12)); color: var(--color-danger, #ef4444); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog.modal-shake,
    .modal-close.modal-close-pulse { animation: none; }
    
    .modal-close.modal-close-pulse {
        outline: 2px solid var(--color-danger, #ef4444);
        outline-offset: 2px;
    }
}


/* === HEALTH CHAT (Chat med din egen helse) === */


.health-chat-fab {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(0, 77, 64, 0.28);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms;
    -webkit-tap-highlight-color: transparent;
}
.health-chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 77, 64, 0.36);
}
.health-chat-fab:focus-visible {
    outline: 2px solid var(--color-primary-dark, #004d40);
    outline-offset: 3px;
}
.health-chat-fab:active { transform: translateY(0); }
.health-chat-fab.hidden { display: none !important; }

/* Pulserende ring kun ved første gang */
.health-chat-fab-pulse {
    display: none;
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--color-primary, #26a69a);
    opacity: 0;
    pointer-events: none;
}
.health-chat-fab.pulse .health-chat-fab-pulse {
    display: block;
    animation: healthChatFabPulse 2s ease-out infinite;
}
@keyframes healthChatFabPulse {
    0%   { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}


.health-chat-fab.has-new-response::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    z-index: 2;
    animation: healthChatNewResponsePulse 1.8s ease-out infinite;
}
.health-chat-fab.has-new-response {
    /* Gjør hele FAB-en litt mer fremtredende ved varsel */
    box-shadow: 0 8px 24px rgba(0, 77, 64, 0.40), 0 0 0 4px rgba(38, 166, 154, 0.10);
}
@keyframes healthChatNewResponsePulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .health-chat-fab.has-new-response::before { animation: none; }
}


body[data-health-chat-fab="1"] #toast-container {
    bottom: calc(96px + env(safe-area-inset-bottom));
}
/* Når drawer er åpen — gjem FAB */
body.health-chat-drawer-open .health-chat-fab { display: none !important; }


body:has(.modal:not(#health-chat-drawer):not(.hidden)) .health-chat-fab,
body:has(.feedback-modal:not(.hidden)) .health-chat-fab,
body:has(.dbc-modal-overlay) .health-chat-fab,
body:has(.pm-modal-overlay.pm-modal-visible) .health-chat-fab,
body:has(.furst-tips-modal:not(.hidden)) .health-chat-fab {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}


.health-chat-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
}
.health-chat-drawer.hidden { display: none; }
.health-chat-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: healthChatFade 200ms ease-out;
}
.health-chat-drawer-panel {
    position: relative;
    width: min(480px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    background: var(--color-surface, #ffffff);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    animation: healthChatSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom);
    
    overscroll-behavior: contain;
}
@keyframes healthChatFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes healthChatSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes healthChatMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


.health-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: max(14px, env(safe-area-inset-top, 0px)) 16px 14px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    flex-shrink: 0;
}
.health-chat-title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    text-align: center;
}
.health-chat-iconbtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, color 150ms;
}
.health-chat-iconbtn:hover {
    background: var(--color-primary-bg, #e0f2f1);
    color: var(--color-primary-dark, #004d40);
}
.health-chat-iconbtn:focus-visible {
    outline: 2px solid var(--color-primary, #26a69a);
    outline-offset: 2px;
}


.health-chat-quota-bar {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    flex-shrink: 0;
}
.health-chat-quota-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-primary-bg, #e0f2f1);
    color: var(--color-primary-dark, #004d40);
    font-size: 0.75rem;
    font-weight: 600;
}
.health-chat-quota-pill.is-empty {
    background: #fef2f2;
    color: #991b1b;
}
.health-chat-quota-pill.health-chat-quota-unlimited {
    background: #fef9c3;
    color: #854d0e;
}


.health-chat-quota-info {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-primary-light, #4db6ac);
    background: transparent;
    color: var(--color-primary-dark, #004d40);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 150ms, transform 100ms;
    flex-shrink: 0;
}
.health-chat-quota-info:hover {
    background: var(--color-primary-bg, #e0f2f1);
}
.health-chat-quota-info:active { transform: scale(0.92); }

/* Eksport-dialog (samme posisjonering som quota-popover) */
.health-chat-export-popover {
    position: absolute;
    top: 60px;
    left: 14px;
    right: 14px;
    z-index: 10;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 18px 18px 14px;
    animation: healthChatFade 200ms ease-out;
}
.health-chat-export-popover.hidden { display: none; }
.health-chat-export-popover h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--color-primary-dark, #004d40);
}
.health-chat-export-popover > p {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--color-text-primary, #111827);
    line-height: 1.5;
}
.health-chat-export-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.health-chat-export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--color-text-primary, #111827);
    transition: border-color 150ms, background 150ms;
    flex-wrap: wrap;
}
.health-chat-export-option:hover {
    border-color: var(--color-primary-light, #4db6ac);
    background: rgba(38, 166, 154, 0.04);
}
.health-chat-export-option input[type="radio"] {
    margin: 0;
    accent-color: var(--color-primary, #26a69a);
    flex-shrink: 0;
}
.health-chat-export-option input[type="radio"]:checked + span {
    color: var(--color-primary-dark, #004d40);
}
.health-chat-export-option span em {
    color: var(--color-text-secondary, #6b7280);
    font-style: normal;
    font-size: 0.78rem;
    margin-left: 4px;
}
.health-chat-export-month {
    flex: 1 1 100%;
    margin-top: 4px;
    margin-left: 28px;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
}
.health-chat-export-month:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}
.health-chat-export-note {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 14px;
    line-height: 1.5;
}
.health-chat-export-note a {
    color: var(--color-primary-dark, #004d40);
    text-decoration: underline;
}
.health-chat-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.health-chat-export-cancel {
    padding: 8px 16px;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 150ms;
}
.health-chat-export-cancel:hover {
    background: #f9fafb;
}
.health-chat-export-confirm {
    padding: 8px 18px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 150ms;
}
.health-chat-export-confirm:hover {
    background: var(--color-primary-dark, #004d40);
}

/* Popover som forklarer kvoten */
.health-chat-quota-popover {
    position: absolute;
    top: 60px;
    left: 14px;
    right: 14px;
    z-index: 10;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 18px 18px 14px;
    animation: healthChatFade 200ms ease-out;
}
.health-chat-quota-popover.hidden { display: none; }
.health-chat-quota-popover h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--color-primary-dark, #004d40);
}
.health-chat-quota-popover p {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary, #111827);
}
.health-chat-quota-popover-reset {
    color: var(--color-text-secondary, #6b7280) !important;
    font-size: 0.78rem !important;
    font-style: italic;
}
.health-chat-quota-popover-close {
    margin-top: 4px;
    padding: 8px 18px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 150ms;
}
.health-chat-quota-popover-close:hover {
    background: var(--color-primary-dark, #004d40);
}

/* Info-card i message-list når kvote er brukt opp */
.health-chat-quota-card {
    display: flex;
    gap: 14px;
    margin: 12px 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--color-primary-bg, #e0f2f1) 0%, #f0fdfa 100%);
    border: 1px solid var(--color-primary-light, #4db6ac);
    border-radius: 14px;
    animation: healthChatMsgIn 250ms ease-out;
}
.health-chat-quota-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary, #26a69a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.health-chat-quota-card-body { flex: 1; min-width: 0; }
.health-chat-quota-card-body h4 {
    margin: 0 0 8px;
    font-size: 0.96rem;
    color: var(--color-primary-dark, #004d40);
}
.health-chat-quota-card-body p {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary, #111827);
}
.health-chat-quota-card-reset {
    color: var(--color-primary-dark, #004d40) !important;
    font-weight: 500;
}
.health-chat-quota-card-cta {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.health-chat-quota-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 150ms, transform 100ms;
}
.health-chat-quota-cta-primary:hover {
    background: var(--color-primary-dark, #004d40);
}
.health-chat-quota-cta-primary:active { transform: scale(0.98); }
.health-chat-quota-cta-hint {
    font-size: 0.74rem;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 2px;
}
@media (max-width: 420px) {
    .health-chat-quota-card {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }
    .health-chat-quota-card-icon { width: 32px; height: 32px; }
}
.health-chat-quota-progress {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.health-chat-quota-progress span {
    display: block;
    height: 100%;
    background: var(--color-primary, #26a69a);
    transition: width 200ms ease-out;
}


.health-chat-disclaimer {
    padding: 8px 16px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.7rem;
    text-align: center;
    border-bottom: 1px solid #fef3c7;
    line-height: 1.4;
    flex-shrink: 0;
}


.health-chat-network-banner {
    padding: 8px 16px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}
.health-chat-network-banner.hidden { display: none; }
.health-chat-network-warn    { background: #fef3c7; color: #92400e; }
.health-chat-network-success { background: #d1fae5; color: #065f46; }
.health-chat-network-info    { background: var(--color-primary-bg, #e0f2f1); color: var(--color-primary-dark, #004d40); }


.health-chat-pane {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    
    overscroll-behavior: contain;
}
.health-chat-pane.hidden { display: none; }


.health-chat-pane-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.health-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.health-chat-threads-list,
.health-chat-search-results {
    overscroll-behavior: contain;
}
.health-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 92%;
    animation: healthChatMsgIn 200ms ease-out;
}
.health-chat-msg-user {
    align-self: flex-end;
    align-items: flex-end;
}
.health-chat-msg-assistant {
    align-self: flex-start;
    align-items: flex-start;
    max-width: 96%;
}
.health-chat-bubble {
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.health-chat-msg-user .health-chat-bubble {
    background: var(--color-primary, #26a69a);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.health-chat-msg-assistant .health-chat-bubble {
    background: var(--color-primary-bg, #e0f2f1);
    color: var(--color-text-primary, #111827);
    border-bottom-left-radius: 4px;
}
.health-chat-bubble p { margin: 0 0 10px; }
.health-chat-bubble p:last-child { margin-bottom: 0; }
.health-chat-bubble ul, .health-chat-bubble ol {
    margin: 10px 0;
    padding-left: 22px;
}
.health-chat-bubble li {
    margin-bottom: 6px;
}
.health-chat-bubble li:last-child { margin-bottom: 0; }
.health-chat-bubble li > ul, .health-chat-bubble li > ol {
    margin: 6px 0;
}
.health-chat-bubble strong { font-weight: 700; }
.health-chat-bubble em { font-style: italic; }
.health-chat-bubble s {
    text-decoration: line-through;
    opacity: 0.7;
}
.health-chat-bubble h3 {
    margin: 16px 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-primary-dark, #004d40);
}
.health-chat-bubble h4 {
    margin: 14px 0 6px;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-primary, #111827);
}
.health-chat-bubble h3:first-child,
.health-chat-bubble h4:first-child { margin-top: 0; }

/* Horisontal divider — diskret seksjonsskille */
.health-chat-bubble hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 14px 0;
}
.health-chat-msg-user .health-chat-bubble hr {
    border-top-color: rgba(255,255,255,0.25);
}
.health-chat-bubble code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}
.health-chat-msg-user .health-chat-bubble code {
    background: rgba(255, 255, 255, 0.2);
}
.health-chat-bubble blockquote {
    border-left: 3px solid var(--color-primary, #26a69a);
    padding: 4px 0 4px 12px;
    margin: 10px 0;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
    background: rgba(38, 166, 154, 0.05);
    border-radius: 0 6px 6px 0;
}
.health-chat-bubble a {
    color: var(--color-primary-dark, #004d40);
    text-decoration: underline;
}
.health-chat-msg-user .health-chat-bubble a {
    color: #fff;
    text-decoration: underline;
}


.health-chat-bubble .health-chat-table-wrap {
    margin: 12px 0;
    width: 100%;
    
    overflow: visible;
}
.health-chat-bubble .health-chat-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    
    table-layout: auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden; /* så avrundede hjørner respekteres */
}
.health-chat-bubble .health-chat-table th,
.health-chat-bubble .health-chat-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: top;
    /* Tillat wrap så lange ord/tekst ikke sprenger boblen. */
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
.health-chat-bubble .health-chat-table th {
    background: var(--color-primary-bg, #e0f2f1);
    color: var(--color-primary-dark, #004d40);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.health-chat-bubble .health-chat-table td {
    color: var(--color-text-primary, #111827);
}

.health-chat-bubble .health-chat-table th.num,
.health-chat-bubble .health-chat-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
/* Alternative rader */
.health-chat-bubble .health-chat-table tbody tr:nth-child(even) td {
    background: rgba(38, 166, 154, 0.04);
}
.health-chat-bubble .health-chat-table tbody tr:hover td {
    background: rgba(38, 166, 154, 0.09);
}
.health-chat-bubble .health-chat-table tbody tr:last-child td {
    border-bottom: none;
}


@media (max-width: 599px) {
    .health-chat-bubble .health-chat-table {
        font-size: 0.8rem;
    }
    .health-chat-bubble .health-chat-table th,
    .health-chat-bubble .health-chat-table td {
        padding: 7px 8px;
    }
    .health-chat-bubble .health-chat-table th {
        font-size: 0.68rem;
        letter-spacing: 0.3px;
    }
}


@media (max-width: 480px) {
    .health-chat-bubble .health-chat-table-wrap {
        background: transparent;
    }
    .health-chat-bubble .health-chat-table {
        display: block;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    .health-chat-bubble .health-chat-table thead { display: none; }
    .health-chat-bubble .health-chat-table tbody { display: block; }
    .health-chat-bubble .health-chat-table tr {
        display: block;
        background: var(--color-surface, #fff);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .health-chat-bubble .health-chat-table tr:last-child {
        margin-bottom: 0;
    }
    .health-chat-bubble .health-chat-table tbody tr:nth-child(even) td,
    .health-chat-bubble .health-chat-table tbody tr:hover td {
        background: transparent;
    }
    .health-chat-bubble .health-chat-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        text-align: left;
        white-space: normal;
    }
    .health-chat-bubble .health-chat-table td:last-child {
        border-bottom: none;
    }
    .health-chat-bubble .health-chat-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--color-text-secondary, #6b7280);
        font-weight: 600;
        flex-shrink: 0;
        min-width: 70px;
    }
    
    .health-chat-bubble .health-chat-table td[data-label=""]::before,
    .health-chat-bubble .health-chat-table td[data-label="&nbsp;"]::before {
        content: "";
        min-width: 0;
    }
    .health-chat-bubble .health-chat-table td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
}

/* For user-bubble (sjelden — bruker paster en tabell) */
.health-chat-msg-user .health-chat-bubble .health-chat-table {
    border-color: rgba(255, 255, 255, 0.15);
}
.health-chat-msg-user .health-chat-bubble .health-chat-table th {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.health-chat-msg-user .health-chat-bubble .health-chat-table td {
    color: #fff;
}

/* Sending / error / cancelled state */
.health-chat-msg[data-msg-state="sending"] .health-chat-bubble { opacity: 0.7; }
.health-chat-msg[data-msg-state="error"] .health-chat-bubble {
    background: #fef2f2;
    color: #991b1b;
}
.health-chat-msg[data-msg-state="cancelled"] .health-chat-bubble {
    background: #f3f4f6;
    color: #6b7280;
    font-style: italic;
}
.health-chat-msg-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #991b1b;
}
.health-chat-msg-retry {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}
.health-chat-msg-retry:hover { background: var(--color-primary-dark, #004d40); }


.health-chat-pending-prompt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 4px;
    padding: 10px 14px;
    background: var(--color-primary-bg, #e0f2f1);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    font-size: 0.84rem;
    color: var(--color-primary-dark, #004d40);
    align-self: flex-start;
    max-width: 80%;
}
.health-chat-pending-prompt-text {
    font-weight: 500;
}


.health-chat-retry-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 4px;
    padding: 10px 14px;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    font-size: 0.84rem;
    color: #78350f;
    flex-wrap: wrap;
}
.health-chat-retry-prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    flex-shrink: 0;
}
.health-chat-retry-prompt-text {
    flex: 1;
    line-height: 1.4;
    min-width: 0;
}
.health-chat-retry-prompt .health-chat-msg-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    flex-shrink: 0;
}
.health-chat-retry-prompt .health-chat-msg-retry svg {
    flex-shrink: 0;
}


.health-chat-msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 150ms;
}
.health-chat-msg-assistant:hover .health-chat-msg-actions,
.health-chat-msg-assistant:focus-within .health-chat-msg-actions {
    opacity: 1;
}
@media (hover: none) {
    .health-chat-msg-actions { opacity: 1; }
}
.health-chat-msg-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, color 150ms, transform 100ms;
}
.health-chat-msg-action:hover {
    background: var(--color-primary-bg, #e0f2f1);
    color: var(--color-primary-dark, #004d40);
}
.health-chat-msg-action:active {
    transform: scale(0.92);
}
/* Aktiv tommel opp — grønn, fylt */
.health-chat-msg-action[data-msg-action="up"].active {
    background: #10b981;
    color: #fff;
}
.health-chat-msg-action[data-msg-action="up"].active svg path {
    fill: rgba(255,255,255,0.18);
}
/* Aktiv tommel ned — rød, fylt */
.health-chat-msg-action[data-msg-action="down"].active {
    background: #ef4444;
    color: #fff;
}
.health-chat-msg-action[data-msg-action="down"].active svg path {
    fill: rgba(255,255,255,0.18);
}
/* Fallback for andre actions (regenerate, copy) */
.health-chat-msg-action.active:not([data-msg-action="up"]):not([data-msg-action="down"]) {
    background: var(--color-primary, #26a69a);
    color: #fff;
}

/* Typing-indicator */
.health-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.health-chat-typing-status {
    font-size: 0.88rem;
    color: var(--color-primary-dark, #004d40);
    font-weight: 500;
    
    transition: opacity 0.25s ease;
    
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    min-width: 0;
}
.health-chat-typing-status.is-fading {
    opacity: 0;
}

@media (max-width: 380px) {
    .health-chat-typing-status {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
@media (prefers-reduced-motion: reduce) {
    .health-chat-typing-status { transition: none; }
}
.health-chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.health-chat-typing-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-dark, #004d40);
    opacity: 0.3;
    animation: healthChatTypingPulse 1.4s ease-in-out infinite;
}
.health-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.health-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes healthChatTypingPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.2); }
}


.health-chat-msg-streaming .health-chat-bubble {
    
    line-height: 1.55;
}
.health-chat-stream-text {
    
    text-wrap: pretty;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.health-chat-stream-cursor {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--color-primary-dark, #004d40);
    border-radius: 1px;
    animation: healthChatStreamCursor 1.05s steps(2, end) infinite;
    
    pointer-events: none;
    
    transform: translateY(-1px);
}
@keyframes healthChatStreamCursor {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .health-chat-stream-cursor {
        animation: none;
        opacity: 0.6;
    }
}

.health-chat-msg-streaming {
    /* Mild left-border for å vise at meldingen er aktiv */
    position: relative;
}

/* Stream-feilmelding (vist når strømmen brytes midt-i) */
.health-chat-stream-error,
.health-chat-stream-cancelled {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.4);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
    font-style: italic;
    line-height: 1.45;
}
.health-chat-stream-cancelled {
    background: rgba(107, 114, 128, 0.06);
    border-left-color: rgba(107, 114, 128, 0.4);
}


.health-chat-msg[data-msg-state="replaced"] .health-chat-bubble {
    position: relative;
}

/* Suggestions + follow-ups */
.health-chat-suggestions,
.health-chat-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 4px 0 8px;
}
.health-chat-suggestion-chip,
.health-chat-followup-chip {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-primary, #26a69a);
    color: var(--color-primary-dark, #004d40);
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    transition: background 150ms, transform 100ms;
    min-height: 36px;
}
.health-chat-suggestion-chip:hover,
.health-chat-followup-chip:hover {
    background: var(--color-primary-bg, #e0f2f1);
}
.health-chat-suggestion-chip:active,
.health-chat-followup-chip:active {
    transform: scale(0.98);
}
.health-chat-followup-chip {
    background: rgba(38, 166, 154, 0.04);
    border-color: var(--color-primary-light, #4db6ac);
}

.health-chat-ai-analyse-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 8px;
    padding: 12px 14px;
    max-width: 96%;
    align-self: flex-start;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(38, 166, 154, 0.25);
    border-radius: 14px;
}
.health-chat-ai-analyse-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--color-text-primary, #111827);
}
.health-chat-ai-analyse-cta-text span {
    color: var(--color-text-secondary, #6b7280);
}
.health-chat-ai-analyse-cta button {
    flex-shrink: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 480px) {
    .health-chat-ai-analyse-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Scroll-to-bottom pill */
.health-chat-scroll-bottom {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-primary, #26a69a);
    color: #fff;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 77, 64, 0.24);
    font-weight: 600;
    z-index: 1;
}
.health-chat-scroll-bottom.hidden { display: none; }
.health-chat-scroll-bottom:hover { background: var(--color-primary-dark, #004d40); }


.health-chat-input-bar {
    padding: 20px 22px calc(25px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    flex-shrink: 0;
}
.health-chat-input-bar.hidden { display: none; }
.health-chat-input-bar form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.health-chat-input {
    flex: 1;
    min-height: 44px;
    max-height: 200px;
    padding: 11px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 22px;
    font-family: inherit;
    
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    outline: none;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111827);
    transition: border-color 150ms;
    
    overflow-y: hidden;
    
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}

.health-chat-input::-webkit-scrollbar {
    width: 6px;
}
.health-chat-input::-webkit-scrollbar-track {
    background: transparent;
}
.health-chat-input::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.health-chat-input::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.32);
}
.health-chat-input:focus {
    border-color: var(--color-primary, #26a69a);
}
.health-chat-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}


.health-chat-input::placeholder {
    text-wrap: pretty;
    
    opacity: 0.85;
}


.health-chat-input.is-quota-empty {
    min-height: 72px;
    field-sizing: content;
}
.health-chat-send {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary, #26a69a);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, transform 100ms;
    flex-shrink: 0;
}
svg.health-chat-send-icon {
    margin-left: -2px;
}
.health-chat-send:hover { background: var(--color-primary-dark, #004d40); }
.health-chat-send:active { transform: scale(0.94); }
.health-chat-send:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}
.health-chat-send.is-stop {
    background: #ef4444;
}
.health-chat-send.is-stop:hover { background: #dc2626; }


.health-chat-pane-threads {
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.health-chat-threads-search {
    position: sticky;
    top: 0;
    background: var(--color-surface, #fff);
    padding-bottom: 12px;
    z-index: 1;
}
.health-chat-search-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111827);
    outline: none;
    transition: border-color 150ms;
}
.health-chat-search-input:focus {
    border-color: var(--color-primary, #26a69a);
}


.health-chat-threads-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 8px;
}
.health-chat-threads-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #6b7280);
    cursor: pointer;
    transition: color 150ms, border-color 150ms, background 150ms;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
}
.health-chat-threads-tab:hover {
    color: var(--color-text-secondary, #374151);
    background: var(--color-bg, #f9fafb);
}
.health-chat-threads-tab.active {
    color: var(--color-primary, #26a69a);
    border-bottom-color: var(--color-primary, #26a69a);
    font-weight: 600;
}
.health-chat-threads-tab:focus-visible {
    outline: 2px solid var(--color-primary, #26a69a);
    outline-offset: 2px;
}
.health-chat-threads-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-border, #e5e7eb);
    color: var(--color-text-secondary, #4b5563);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.health-chat-threads-tab.active .health-chat-threads-tab-count {
    background: var(--color-primary, #26a69a);
    color: #fff;
}
.health-chat-threads-tab-count[hidden] { display: none; }

.health-chat-threads-list,
.health-chat-search-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.health-chat-threads-list.hidden,
.health-chat-search-results.hidden { display: none; }
.health-chat-thread-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}
.health-chat-thread-row:hover {
    background: var(--color-primary-bg, #e0f2f1);
    border-color: var(--color-primary-light, #4db6ac);
}

.health-chat-thread-row.is-archived {
    background: var(--color-bg, #f9fafb);
    cursor: default;
    opacity: 0.85;
}
.health-chat-thread-row.is-archived:hover {
    background: var(--color-bg, #f9fafb);
    border-color: var(--color-border, #e5e7eb);
}
.health-chat-thread-row.is-archived .health-chat-thread-title {
    color: var(--color-text-secondary, #4b5563);
}
.health-chat-thread-main {
    flex: 1;
    min-width: 0;
}
.health-chat-thread-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.health-chat-thread-preview {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.health-chat-thread-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.health-chat-thread-time {
    font-size: 0.7rem;
    color: var(--color-text-secondary, #6b7280);
}
.health-chat-thread-actions {
    display: flex;
    gap: 2px;
}
.health-chat-thread-actbtn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
}
.health-chat-thread-actbtn:hover { background: rgba(0, 0, 0, 0.06); }
.health-chat-thread-actbtn-danger:hover {
    background: #fef2f2;
    color: #991b1b;
}
.health-chat-search-row {
    padding: 12px;
    border-radius: 10px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    cursor: pointer;
    transition: background 150ms;
}
.health-chat-search-row:hover { background: var(--color-primary-bg, #e0f2f1); }
.health-chat-search-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}
.health-chat-search-snippet {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 4px 0;
    line-height: 1.4;
}
.health-chat-search-meta {
    font-size: 0.7rem;
    color: var(--color-text-secondary, #9ca3af);
}
.health-chat-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.9rem;
}
.health-chat-pane-back {
    padding: 12px 14px;
    margin-top: 12px;
    border: none;
    background: transparent;
    color: var(--color-primary-dark, #004d40);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}
.health-chat-pane-back:hover {
    text-decoration: underline;
}


.health-chat-pane-settings {
    display: flex;
    flex-direction: column;
    padding: 16px;
}
.health-chat-settings-content { flex: 1; }
.health-chat-settings-content h3 {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--color-text-primary, #111827);
}
.health-chat-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 8px;
    background: var(--color-surface, #fff);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-primary, #111827);
    font-size: 0.92rem;
    transition: background 150ms;
    width: 100%;
    text-align: left;
}
.health-chat-setting-row:hover {
    background: var(--color-primary-bg, #e0f2f1);
}
.health-chat-setting-danger {
    color: #991b1b;
    border-color: #fecaca;
}
.health-chat-setting-danger:hover {
    background: #fef2f2;
}
.health-chat-settings-about {
    margin-top: 24px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
}
.health-chat-settings-about h4 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--color-text-primary, #111827);
}
.health-chat-settings-about p { margin: 0 0 8px; }
.health-chat-settings-about p:last-child { margin-bottom: 0; }
.health-chat-shortcuts {
    font-size: 0.75rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


@media (max-width: 768px) {
    .health-chat-drawer-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        box-shadow: none;
    }
    .health-chat-drawer-backdrop { display: none; }
    .health-chat-msg-user, .health-chat-msg-assistant { max-width: 92%; }
    .health-chat-fab {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: 20px;
    }
    body[data-health-chat-fab="1"] #toast-container {
        bottom: calc(90px + env(safe-area-inset-bottom));
        right: 16px;
        left: 16px;
        align-items: center;
    }
}
@media (max-width: 480px) {
    .health-chat-header { padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px; }
    .health-chat-title { font-size: 0.95rem; }
    .health-chat-messages { padding: 12px; }
    .health-chat-bubble { font-size: 0.9rem; padding: 9px 12px; }
    .health-chat-input-bar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
    .health-chat-iconbtn { width: 36px; height: 36px; min-width: 36px; }
    .health-chat-title { font-size: 0.9rem; }
    .health-chat-quota-pill { font-size: 0.7rem; padding: 3px 8px; }
}


@media (prefers-reduced-motion: reduce) {
    .health-chat-drawer-panel,
    .health-chat-drawer-backdrop,
    .health-chat-msg {
        animation: none !important;
        transition: none !important;
    }
    .health-chat-fab.pulse .health-chat-fab-pulse {
        animation: none !important;
        opacity: 0;
    }
    .health-chat-messages { scroll-behavior: auto; }
}


.admin-ud-healthchat-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--color-primary-bg, #e0f2f1);
    border-radius: 10px;
    border: 1px solid #b2dfdb;
}
.admin-ud-healthchat-section h4 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: var(--color-primary-dark, #004d40);
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-ud-hc-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-ud-hc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


.admin-healthchat-settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}
.admin-hc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-hc-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}
.admin-hc-field-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}
.admin-hc-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-hc-usage-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.85rem;
}
.admin-hc-usage-table th, .admin-hc-usage-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.admin-hc-usage-table th {
    background: #f9fafb;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.hf-section.is-hidden { display: none !important; }
.hf-section[hidden] { display: none !important; }
.doctor-view .hf-section { display: none !important; }


.hf-section.personal-info-section { overflow: visible; }


.hf-section .section-header.hf-header { padding-bottom: 14px; }
.hf-title-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hf-title-stack h2 { margin: 0; line-height: 1.2; }
.hf-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.hf-header-actions { display: inline-flex; align-items: center; gap: 8px; }


.hf-icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.hf-icon-btn:hover { background: var(--color-surface); color: var(--color-text); }
.hf-icon-btn:active { transform: scale(0.96); }
.hf-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Varsel-bjelle med ulest-badge */
.hf-bell-btn { position: relative; }
.hf-bell-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.625rem; font-weight: 700; line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* In-app varsel-innboks — liste i modalen */

.hf-notif-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.hf-notif-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-tertiary);
    background: transparent;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.hf-notif-clear:hover { color: var(--color-danger); border-color: var(--color-danger); }
.hf-notif-clear:active { transform: scale(0.97); }
.hf-notif-clear__icon { display: inline-flex; }
.hf-notif-clear.is-armed { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.hf-notiflist { display: flex; flex-direction: column; gap: 8px; }
.hf-notif {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.hf-notif--unread {
    border-color: rgba(38, 166, 154, 0.30);
    background: var(--color-primary-bg);
}
.hf-notif--clickable { cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.hf-notif--clickable:hover { transform: translateY(-1px); border-color: var(--color-primary); }
.hf-notif--clickable:active { transform: translateY(0); }
.hf-notif--clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-notif__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary-bg);
    color: var(--color-primary);
}
.hf-notif--unread .hf-notif__icon { background: var(--color-primary); color: #fff; }
.hf-notif__icon svg { width: 17px; height: 17px; }
.hf-notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hf-notif__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.hf-notif__text { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.45; }
.hf-notif__time { font-size: 0.6875rem; color: var(--color-text-tertiary); margin-top: 2px; }

.hf-content { padding-top: 8px; }
.hf-body { display: flex; flex-direction: column; gap: 16px; }


.hf-hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(38, 166, 154, 0.10) 0%, rgba(38, 166, 154, 0.02) 60%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.hf-hero::after {
    
    content: "";
    position: absolute;
    top: -40%; right: -20%;
    width: 280px; height: 280px;
    background: radial-gradient(circle at center, rgba(38,166,154,0.18) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}
.hf-hero > * { position: relative; z-index: 1; }

.hf-hero__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hf-hero__main { flex: 1; min-width: 0; }
.hf-hero__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.hf-hero__status {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}
.hf-hero__sub {
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 56ch;
}

.hf-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}
.hf-chip svg { width: 12px; height: 12px; }
.hf-chip--info { background: rgba(38, 166, 154, 0.08); border-color: rgba(38, 166, 154, 0.25); color: var(--color-primary-dark); }
.hf-chip--neutral { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.25); color: var(--color-text-secondary); }
.hf-chip--paused { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #a16207; }
.hf-chip--beta { background: rgba(168, 85, 247, 0.10); border-color: rgba(168, 85, 247, 0.25); color: #7e22ce; }

.hf-streak {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.8125rem; font-weight: 600;
    color: var(--color-text);
}
.hf-streak svg { width: 14px; height: 14px; color: var(--color-primary); }


.hf-basis { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hf-basis__head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.8125rem; color: var(--color-text-secondary); font-weight: 500;
}
.hf-basis__head strong {
    color: var(--color-text); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hf-basis__bar {
    height: 6px;
    background: var(--color-border-light);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.hf-basis__fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 6px;
}
.hf-basis__hint {
    font-size: 0.75rem; color: var(--color-text-tertiary);
    margin-top: 2px;
}


.hf-basis__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hf-basis__toggle:hover { background: var(--color-primary-bg); border-color: rgba(38,166,154,0.3); }
.hf-basis__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-basis__toggle--done { color: var(--color-text-secondary); }
.hf-basis__toggle-text { flex: 1; min-width: 0; }
.hf-basis__chev {
    flex: 0 0 auto; display: inline-flex; color: var(--color-text-tertiary);
    transition: transform 240ms cubic-bezier(0.4,0,0.2,1);
}
.hf-basis__chev svg { width: 16px; height: 16px; }
.hf-basis__toggle[aria-expanded="true"] .hf-basis__chev { transform: rotate(180deg); }

.hf-basis__details { margin-top: 4px; }
.hf-basis__list { display: flex; flex-direction: column; gap: 8px; }

.hf-basis-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
    animation: hfBasisItemIn 280ms cubic-bezier(0.4,0,0.2,1) both;
}
.hf-basis-item--todo {
    border-color: rgba(38,166,154,0.28);
    background: linear-gradient(180deg, var(--color-primary-bg) 0%, var(--color-surface) 140%);
}
.hf-basis-item--done { opacity: 0.92; }

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

.hf-basis-item__icon {
    flex: 0 0 auto;
    width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.hf-basis-item__icon--done {
    background: var(--color-success); color: #fff;
}
.hf-basis-item__icon--done svg { width: 13px; height: 13px; }
.hf-basis-item__icon--todo {
    background: transparent;
    border: 2px dashed rgba(38,166,154,0.55);
}

.hf-basis-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hf-basis-item__label {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 0.875rem; font-weight: 700; color: var(--color-text);
}
.hf-basis-item__weight {
    font-size: 0.6875rem; font-weight: 700; color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}
.hf-basis-item--done .hf-basis-item__weight { color: var(--color-success); }
.hf-basis-item__hint {
    font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.45;
}
.hf-basis-item__done {
    font-size: 0.75rem; font-weight: 600; color: var(--color-success);
}

.hf-basis-item__cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    padding: 7px 12px;
    background: var(--color-primary);
    color: #fff;
    border: none; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.hf-basis-item__cta:hover { filter: brightness(1.05); }
.hf-basis-item__cta:active { transform: scale(0.97); }
.hf-basis-item__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-basis-item__cta-chev { display: inline-flex; transform: rotate(-90deg); }
.hf-basis-item__cta-chev svg { width: 14px; height: 14px; }


.hf-signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.hf-signal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.hf-signal:hover { box-shadow: var(--shadow-md); }
.hf-signal__head { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); }
.hf-signal__head svg { width: 16px; height: 16px; flex-shrink: 0; }
.hf-signal__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hf-signal__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.hf-signal__value--placeholder { color: var(--color-text-tertiary); font-weight: 500; font-size: 1rem; }
.hf-signal__unit {
    font-size: 0.875rem; font-weight: 500;
    color: var(--color-text-secondary);
    margin-left: 4px;
}
.hf-signal__sub {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.hf-signal__source {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-border-light);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: capitalize;
}
.hf-signal__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.hf-signal--near .hf-signal__dot { color: var(--color-success); }
.hf-signal--variable .hf-signal__dot { color: var(--color-warning); }
.hf-signal--neutral .hf-signal__dot { color: var(--color-text-tertiary); }


.hf-focus {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex; gap: 14px; align-items: flex-start;
}
.hf-focus__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(38, 166, 154, 0.12);
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hf-focus__icon svg { width: 18px; height: 18px; }
.hf-focus__body { flex: 1; min-width: 0; }
.hf-focus__title { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; margin: 0 0 4px 0; }
.hf-focus__text { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.55; margin: 0; }


.hf-week {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.hf-week__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}
.hf-week__head-left {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; flex: 1;
}
.hf-week__head-right {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.hf-week__title {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1.0625rem;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.hf-week__subtitle {
    display: inline-flex; align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.hf-week__week-label {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hf-week__date-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    letter-spacing: 0.005em;
}
.hf-week__count {
    
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.hf-week__count-pill {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.01em;
}


.hf-daily-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 0 6px;
    padding: 20px 24px;
    border-radius: 22px;
    border: 1px solid rgba(38, 166, 154, 0.18);
    background:
        radial-gradient(110% 130% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
        linear-gradient(135deg, rgba(38, 166, 154, 0.10) 0%, rgba(38, 166, 154, 0.04) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 8px 28px -16px rgba(38, 166, 154, 0.40);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hf-daily-cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.18) 0%, transparent 40%);
    mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
    padding: 1px;
    z-index: -1;
}
.hf-daily-cta__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.hf-daily-cta__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.hf-daily-cta__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.hf-daily-cta__btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 14px -4px rgba(38, 166, 154, 0.55);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    letter-spacing: 0.005em;
    white-space: nowrap;
}
.hf-daily-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(38, 166, 154, 0.62);
}
.hf-daily-cta__btn:active { transform: translateY(0); }
.hf-daily-cta__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}
.hf-daily-cta__icon-svg { width: 16px; height: 16px; flex-shrink: 0; }
.hf-daily-cta__icon-svg svg { width: 100%; height: 100%; display: block; }


.hf-daily-cta--done {
    background:
        radial-gradient(110% 130% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
        linear-gradient(135deg, rgba(148, 163, 184, 0.10) 0%, rgba(148, 163, 184, 0.04) 100%);
    border-color: rgba(148, 163, 184, 0.20);
}
.hf-daily-cta--done .hf-daily-cta__btn {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
    box-shadow: 0 4px 14px -4px rgba(100, 116, 139, 0.55);
}

/* Mobile-responsive: stack vertikalt, full-bredde CTA */
@media (max-width: 640px) {
    .hf-daily-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 14px;
        padding: 18px 18px;
    }
    .hf-daily-cta__title { font-size: 1rem; }
    .hf-daily-cta__btn {
        width: 100%;
        padding: 13px 18px;
        font-size: 0.9375rem;
    }
}


.hf-week__cta {
    display: none;
}
.hf-week__cta:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.hf-week__cta svg { width: 14px; height: 14px; flex-shrink: 0; }


.hf-week__hero-title-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.hf-week__delta-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.hf-week__delta-pill--up {
    background: rgba(38, 166, 154, 0.12);
    color: var(--color-primary-dark);
}
.hf-week__delta-pill--down {
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text-secondary);
}
.hf-week__delta-pill--same {
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
}

@media (max-width: 540px) {
    .hf-week__head { flex-direction: column; align-items: stretch; }
    .hf-week__head-left { width: 100%; }
    .hf-week__head-right {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .hf-week__hero-title-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.hf-week__bar {
    height: 8px;
    background: var(--color-border-light);
    border-radius: 999px;
    overflow: hidden;
}
.hf-week__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
    border-radius: 999px;
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}


.hf-tasks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.hf-task {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hf-task:hover { background: var(--color-surface-hover); }
.hf-task__check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
    line-height: 0;             /* fjern baseline-offset */
}
.hf-task__check:hover { border-color: var(--color-primary); background: rgba(38, 166, 154, 0.06); }
.hf-task__check:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-task__check svg {
    width: 14px; height: 14px;
    color: transparent;
    transition: color var(--transition-fast);
    display: block;
    
    transform: translateY(1px);
}
.hf-task--completed .hf-task__check {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.hf-task--completed .hf-task__check svg { color: white; }
.hf-task__body { flex: 1; min-width: 0; }
.hf-task__title {
    font-size: 0.9375rem; font-weight: 600; color: var(--color-text);
    margin: 0;
    line-height: 1.35;
    transition: color var(--transition-fast);
}
.hf-task__copy {
    font-size: 0.8125rem; color: var(--color-text-secondary);
    margin: 4px 0 0 0;
    line-height: 1.5;
}
.hf-task--completed .hf-task__title,
.hf-task--completed .hf-task__copy {
    color: var(--color-text-tertiary);
}
.hf-task--completed .hf-task__title { text-decoration: line-through; text-decoration-color: var(--color-text-tertiary); }
.hf-task--dismissed { opacity: 0.55; }
.hf-task__dismiss {
    background: transparent; border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-top: -2px;
}
.hf-task__dismiss:hover { background: var(--color-border-light); color: var(--color-text-secondary); }
.hf-task__dismiss:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-task__dismiss svg { width: 14px; height: 14px; }
.hf-task[aria-busy="true"] { opacity: 0.5; pointer-events: none; }


.hf-quick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
}
.hf-quick__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.005em;
}
.hf-quick__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.hf-quick__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.hf-quick__action:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}
.hf-quick__action:active { transform: translateY(0); }
.hf-quick__action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-quick__action-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    flex-shrink: 0;
}
.hf-quick__action-icon svg { width: 19px; height: 19px; }
.hf-quick__action-label { line-height: 1.25; }
@media (min-width: 560px) {
    .hf-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.hf-sources {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
}
.hf-sources__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success);
}
.hf-sources--stale .hf-sources__dot { background: var(--color-warning); }
.hf-sources--none .hf-sources__dot { background: var(--color-text-tertiary); }


.hf-history {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.hf-history__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    transition: background var(--transition-fast);
}
.hf-history__toggle:hover { background: var(--color-surface-hover); }
.hf-history__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hf-history__chev { transition: transform var(--transition-base); flex-shrink: 0; }
.hf-history__toggle[aria-expanded="true"] .hf-history__chev { transform: rotate(180deg); }

.hf-history__body {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--color-border-light);
    display: none;
}
.hf-history__toggle[aria-expanded="true"] + .hf-history__body { display: block; }


.hf-history__head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px;
    font-size: 0.9375rem; font-weight: 600; color: var(--color-text);
}
.hf-history__head-icon { display: inline-flex; color: var(--color-primary); }
.hf-history__head-icon svg { width: 16px; height: 16px; }
.hf-history--open .hf-history__body { display: flex; flex-direction: column; gap: 14px; }

/* «Last flere uker» — inkrementell paginering */
.hf-history__more {
    align-self: center;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.hf-history__more:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-primary-light); }
.hf-history__more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-history__more:disabled { opacity: 0.6; cursor: default; }
.hf-history__more-chev { display: inline-flex; }
.hf-history__more-chev svg { width: 15px; height: 15px; }
.hf-history__full { align-self: flex-start; }


.hf-history__list { display: flex; flex-direction: column; gap: 12px; }
.hf-histitem__head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hf-histitem__date { font-size: 0.72rem; font-weight: 500; color: var(--color-text-tertiary); }
.hf-histitem__right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hf-histitem__tasks { margin: 12px 0 0; font-size: 0.82rem; color: var(--color-text-secondary); }

.hf-histitem__go { display: inline-flex; color: var(--color-text-tertiary); transition: transform var(--transition-fast), color var(--transition-fast); }
.hf-histitem__go svg { width: 18px; height: 18px; }
.hf-summary--link .hf-summary__toggle:hover .hf-histitem__go { color: var(--color-primary); transform: translateX(2px); }

.hf-history__strip {
    display: flex; gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 12px 0 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.hf-history__week {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 88px;
    padding: 10px 12px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    text-align: center;
    display: flex; flex-direction: column; gap: 4px;
}
.hf-history__week--current { border-color: var(--color-primary); background: rgba(38, 166, 154, 0.06); }
.hf-history__week-label { font-size: 0.6875rem; color: var(--color-text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hf-history__week-state { font-size: 0.8125rem; color: var(--color-text); font-weight: 600; }
.hf-history__week-meta { font-size: 0.6875rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.hf-history__empty {
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    padding: 20px 0;
    text-align: center;
}


.hf-summary-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hf-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
}
.hf-summary__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    transition: background var(--transition-fast);
    gap: 12px;
}
.hf-summary__toggle:hover { background: var(--color-surface-hover); }
.hf-summary__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hf-summary__week-label { font-weight: 700; flex-shrink: 0; }
.hf-summary__badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    font-size: 0.6875rem;
    font-weight: 600;
    flex-shrink: 0;
}
.hf-summary__badge--low { background: rgba(245, 158, 11, 0.10); color: #92400e; }
.hf-summary__badge--blocked { background: rgba(148, 163, 184, 0.10); color: var(--color-text-secondary); }
.hf-summary__chev {
    transition: transform var(--transition-base);
    flex-shrink: 0;
    color: var(--color-text-secondary);
}
.hf-summary__toggle[aria-expanded="true"] .hf-summary__chev { transform: rotate(180deg); }

.hf-summary__body {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--color-border-light);
    display: none;
}
.hf-summary__toggle[aria-expanded="true"] + .hf-summary__body { display: block; }

.hf-summary__text {
    color: var(--color-text);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 12px 0 8px;
    white-space: pre-line;
    max-width: 56ch;
}
.hf-summary__meta {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    margin-top: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hf-summary__disclaimer {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    margin-top: 8px;
    font-style: italic;
}
.hf-summary__placeholder {
    padding: 14px 16px;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.hf-summary__actions { display: flex; justify-content: flex-end; margin-top: 8px; }


.hf-onboarding {
    position: relative;
    padding: 24px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(38, 166, 154, 0.10), rgba(38, 166, 154, 0.02)),
        var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.hf-onboarding::after {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 240px; height: 240px;
    background: radial-gradient(circle at center, rgba(38,166,154,0.16) 0%, transparent 70%);
    pointer-events: none; z-index: 0; border-radius: 50%;
}
.hf-onboarding > * { position: relative; z-index: 1; }
.hf-onboarding__hero {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 18px;
}
.hf-onboarding__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(38, 166, 154, 0.16);
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hf-onboarding__icon svg { width: 22px; height: 22px; }
.hf-onboarding__title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.hf-onboarding__text  { margin: 4px 0 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-secondary); max-width: 52ch; }

.hf-goals { display: flex; flex-direction: column; gap: 12px; }
.hf-goals__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.hf-goals__hint {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    margin: 0;
}
.hf-goals__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: 8px;
}
.hf-goal-btn {
    position: relative;
    padding: 13px 8px 11px;
    min-height: 84px;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 8px;
    font-family: inherit;
}
.hf-goal-btn__icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--color-surface-hover);
    color: var(--color-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.hf-goal-btn__icon svg { width: 21px; height: 21px; }
.hf-goal-btn__label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.22;
    color: var(--color-text);
}
.hf-goal-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
}
.hf-goal-btn[aria-pressed="true"] {
    background: rgba(38, 166, 154, 0.10);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}
.hf-goal-btn[aria-pressed="true"] .hf-goal-btn__icon {
    background: var(--color-primary);
    color: #fff;
}
.hf-goal-btn[aria-pressed="true"] .hf-goal-btn__label { color: var(--color-primary-dark); }
.hf-goal-btn[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    top: 7px; right: 7px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-primary)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.hf-goal-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Mål-blokk: head med live antall-teller */
.hf-goals__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hf-goals__count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: rgba(38, 166, 154, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.hf-goals__count:empty { display: none; }

/* Smart biomarkør-kobling under mål-grid */
.hf-goals__smart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--color-primary-light);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.07), rgba(38, 166, 154, 0.02));
}
.hf-goals__smart[hidden] { display: none; }
.hf-goals__smart-head { display: flex; align-items: flex-start; gap: 11px; }
.hf-goals__smart-icon { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.hf-goals__smart-icon svg { width: 20px; height: 20px; }
.hf-goals__smart-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hf-goals__smart-txt strong { font-size: 0.84rem; font-weight: 700; color: var(--color-text); }
.hf-goals__smart-txt span { font-size: 0.76rem; line-height: 1.5; color: var(--color-text-secondary); }

.hf-goals__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-goals__chip {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-light);
    font-size: 0.74rem;
    max-width: 100%;
}
.hf-goals__chip-label { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.hf-goals__chip-val { color: var(--color-primary-dark); font-weight: 700; white-space: nowrap; }
.hf-goals__chip--more {
    background: transparent;
    border-style: dashed;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.hf-goals__smart-cta {
    align-self: flex-start;
    padding: 0;
    background: none; border: none;
    color: var(--color-primary-dark);
    font-family: inherit; font-size: 0.78rem; font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hf-goals__smart-cta:hover { color: var(--color-primary); }
/* «Rask innsjekk» — mål-relevante typer øverst */
.hf-type-grid-wrap { display: flex; flex-direction: column; gap: 8px; }
.hf-type-grouplabel {
    margin: 4px 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-dark);
}
.hf-type-grouplabel--muted { color: var(--color-text-tertiary); }

/* Settings-accordion (kollapsbare sekundære seksjoner) */
.hf-acc {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    overflow: hidden;
}
.hf-acc__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 16px;
    background: none; border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.hf-acc__title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.hf-acc__chev { display: flex; color: var(--color-text-tertiary); transition: transform var(--transition-fast); }
.hf-acc__chev svg { width: 18px; height: 18px; }
.hf-acc__toggle[aria-expanded="true"] .hf-acc__chev { transform: rotate(180deg); }
.hf-acc__toggle:hover { background: var(--color-surface-hover); }
.hf-acc__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hf-acc__body {
    padding: 4px 16px 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.hf-acc__body[hidden] { display: none; }
.hf-acc__hint { font-size: 0.78rem; line-height: 1.5; color: var(--color-text-tertiary); margin: 0; }

.hf-acc__body .hf-source-block,
.hf-acc__body .hf-tasks-block { padding: 0; border: none; background: none; gap: 12px; }


.hf-insights--flash {
    animation: hf-insights-flash 1.6s ease;
    border-radius: 16px;
}
@keyframes hf-insights-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0); }
    25% { box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .hf-goal-btn:hover { transform: none; }
    .hf-insights--flash { animation: none; }
}
.hf-onboarding__actions {
    display: flex; gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    flex-wrap: wrap;
}


.hf-source-block { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.hf-source-block__title { font-size: 0.875rem; font-weight: 700; margin: 0; color: var(--color-text); }
.hf-source-block__hint { font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.5; margin: 0; }
.hf-source-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
.hf-source-row:last-of-type { border-bottom: none; }
.hf-source-row__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
.hf-source-row__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-source-pill {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.hf-source-pill:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.hf-source-pill[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.hf-source-pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-source-pill[disabled] { opacity: 0.5; cursor: not-allowed; }


.hf-tasks-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.hf-tasks-block__title { font-size: 0.875rem; font-weight: 700; margin: 0 0 4px 0; color: var(--color-text); }
.hf-tasks-block__hint { font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.5; margin: 0 0 10px 0; }

/* Pilar-gruppe-card */
.hf-pillar-toggle {
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
}
.hf-pillar-toggle:hover { border-color: var(--color-border); }
.hf-pillar-toggle__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
}
.hf-pillar-toggle__head-text { flex: 1; min-width: 0; }
.hf-pillar-toggle__title {
    margin: 0 0 3px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
}
.hf-pillar-toggle__hint {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.hf-pillar-toggle[data-pillar="a"] { box-shadow: inset 3px 0 0 rgba(38, 166, 154, 0.45); }
.hf-pillar-toggle[data-pillar="b"] { box-shadow: inset 3px 0 0 rgba(99, 102, 241, 0.45); }
.hf-pillar-toggle[data-pillar="c"] { box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.45); }

/* Disclosure-knapp for detaljerte valg */
.hf-pillar-toggle__disclosure {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding: 6px 10px 6px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    font-family: inherit;
    transition: color var(--transition-fast);
}
.hf-pillar-toggle__disclosure:hover { color: var(--color-primary); }
.hf-pillar-toggle__disclosure-chev {
    display: inline-flex; align-items: center;
    width: 14px; height: 14px;
    transition: transform var(--transition-fast);
}
.hf-pillar-toggle__disclosure-chev svg { width: 100%; height: 100%; }
.hf-pillar-toggle__disclosure[aria-expanded="true"] .hf-pillar-toggle__disclosure-chev {
    transform: rotate(180deg);
}
.hf-pillar-toggle__details {
    margin-top: 6px;
    padding: 4px 0 0 0;
    border-top: 1px dashed var(--color-border-light);
}

/* Task-toggle-rader: kompakte rader for detaljerte valg */
.hf-task-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
    gap: 12px;
}
.hf-task-toggle-row--nested { padding: 7px 2px; }
.hf-task-toggle-row:last-of-type { border-bottom: none; }
.hf-task-toggle-row__label { font-size: 0.8125rem; color: var(--color-text); flex: 1; }

/* Mindre switch-variant for nestede detaljerte valg */
.hf-switch--sm { transform: scale(0.85); }
.hf-switch--sm input:indeterminate + .hf-switch__track {
    background: rgba(148, 163, 184, 0.5);
}
/* Indeterminate-state for hoved-pilar-bryteren */
.hf-switch input:indeterminate + .hf-switch__track {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 50%, rgba(148, 163, 184, 0.45) 50%);
}


/* Mobil-justeringer for nye elementer */
@media (max-width: 640px) {
    .hf-onboarding { padding: 18px; }
    .hf-onboarding__title { font-size: 1.0625rem; }
    .hf-onboarding__text { font-size: 0.875rem; }
    .hf-goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .hf-goal-btn { min-height: 80px; padding: 11px 5px 9px; }
    .hf-goal-btn__icon { width: 34px; height: 34px; }
    .hf-goal-btn__label { font-size: 0.72rem; }
    .hf-onboarding__actions { flex-direction: column-reverse; }
    .hf-onboarding__actions .hf-btn { width: 100%; }
    .hf-source-row__pills { gap: 4px; }
    .hf-source-pill { padding: 5px 10px; font-size: 0.6875rem; }
}


.hf-brand-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(38, 166, 154, 0.10);
    border-radius: 12px;
    flex-shrink: 0;
}
.hf-section .section-header.hf-header { padding: 18px 20px 16px; }
.hf-section .section-title-group { gap: 12px; }
.hf-section .section-title-group h2 {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* Hero — større, mer app-aktig */
.hf-hero {
    border-radius: 24px;
    padding: 28px 28px 24px;
}
.hf-hero::after {
    width: 320px; height: 320px;
    top: -45%;
    background: radial-gradient(circle at center, rgba(38,166,154,0.22) 0%, transparent 65%);
}
.hf-hero__label {
    font-size: 0.6875rem;
    color: var(--color-primary-dark);
    letter-spacing: 0.10em;
    font-weight: 700;
    margin-bottom: 6px;
}
.hf-hero__status {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.hf-hero__sub {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 80ch;
    color: var(--color-text-secondary);
}


.hf-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.hf-hero__top .hf-hero__label { margin-bottom: 0; }
.hf-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hf-hero__meta .hf-chips { margin-top: 0; }
/* Diskret kildelinje nederst i heroen: «Data fra Oura» */
.hf-hero__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
}
.hf-hero__source-icon { display: inline-flex; color: var(--color-primary); opacity: 0.85; }
.hf-hero__source-icon svg { width: 14px; height: 14px; }
.hf-hero__source-text { letter-spacing: 0.005em; }

.hf-hero__source { flex-wrap: wrap; row-gap: 8px; }
.hf-hero__sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
    padding: 5px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    background: rgba(38, 166, 154, 0.10);
    border: 1px solid rgba(38, 166, 154, 0.28);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
}
.hf-hero__sync:hover { background: rgba(38, 166, 154, 0.16); }
.hf-hero__sync:active { transform: scale(0.97); }
.hf-hero__sync:disabled { opacity: 0.6; cursor: default; }

.hf-hero__sync.is-done { color: var(--color-success); background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.32); }
.hf-hero__sync.is-done:disabled { opacity: 1; cursor: default; }
.hf-hero__sync-icon { display: inline-flex; }
.hf-hero__sync .spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.hf-hero__sync-meta { color: var(--color-text-tertiary); opacity: 0.9; }

.hf-signal__meta-sync--stale { color: var(--color-warning); opacity: 0.95; font-weight: 600; }
@media (max-width: 480px) {
    
    .hf-hero__top { gap: 10px; }
    .hf-hero__meta { width: 100%; }
}

/* Innsiktsgrunnlag — mer app-aktig */
.hf-basis {
    margin-top: 18px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    gap: 10px;
}
.hf-basis__head { font-size: 0.875rem; font-weight: 600; }
.hf-basis__head strong { font-size: 1rem; }
.hf-basis__bar { height: 8px; }
.hf-basis__hint { font-size: 0.75rem; margin-top: 4px; }
.hf-basis-item__cta { width: 100%; justify-content: center; padding: 10px 14px; }
.hf-basis-item__label { font-size: 0.9375rem; }


.hf-signal {
    position: relative;
    border-radius: 22px;
    padding: 18px 18px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    display: flex; flex-direction: column;
    gap: 12px;
    
}

.hf-signal[data-tone="good"] {
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, var(--color-surface) 55%),
        var(--color-surface);
}
.hf-signal[data-tone="soft"] {
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, var(--color-surface) 55%),
        var(--color-surface);
}

.hf-signal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(38, 166, 154, 0.0) 0%,
        var(--color-primary) 25%,
        var(--color-primary-light) 60%,
        rgba(38, 166, 154, 0.0) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 1;
    border-radius: 22px 22px 0 0;
    pointer-events: none;
}
.hf-signal:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
    border-color: rgba(38, 166, 154, 0.22);
}
.hf-signal:hover::before { opacity: 1; }


.hf-signal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    margin: 0;
}
.hf-signal__icon-circle {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    transition: background var(--transition-fast);
}
.hf-signal__icon-circle > span { display: inline-flex; line-height: 0; }
.hf-signal__icon-circle svg {
    width: 16px; height: 16px;
    display: block;
    
    transform: translateY(1px);
}
/* Tone-tinted icon-bakgrunn pr signal-state */
.hf-signal[data-tone="good"] .hf-signal__icon-circle {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.hf-signal[data-tone="soft"] .hf-signal__icon-circle {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.hf-signal[data-tone="neutral"] .hf-signal__icon-circle {
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
}
.hf-signal__label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
}


.hf-signal__trend {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}
.hf-signal__trend-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.hf-signal__trend--in {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.hf-signal__trend--out {
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text-secondary);
}


.hf-signal__valrow {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
    margin: 2px 0;
}
.hf-signal__bignum {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 0.92;
}
.hf-signal__unit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    letter-spacing: 0;
    margin-left: 2px;
}


.hf-signal__secondary {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    min-height: 24px;
}
.hf-signal__detail-inline {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.hf-signal__qual {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
    flex-shrink: 0;
}
.hf-signal__qual--good {
    background: rgba(16, 185, 129, 0.10);
    color: #065f46;
}
.hf-signal__qual--neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-text-secondary);
}
.hf-signal__qual--soft {
    background: rgba(245, 158, 11, 0.10);
    color: #92400e;
}
.hf-signal__qual--unknown {
    background: var(--color-border-light);
    color: var(--color-text-tertiary);
}
.hf-signal__qual::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Detail-tekst og sync-tidspunkt */
.hf-signal__detail {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}


.hf-signal__devel {
    margin-top: 8px;
    display: flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.3;
}
.hf-signal__devel-icon {
    flex-shrink: 0; display: inline-flex;
    color: var(--color-text-tertiary);
}
.hf-signal__devel-icon svg { width: 14px; height: 14px; }
.hf-signal__devel-text { min-width: 0; }


.hf-patterns {
    margin-top: 18px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
    display: flex; flex-direction: column; gap: 12px;
}
.hf-patterns__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.hf-patterns__title {
    margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.005em;
}
.hf-patterns__meta { font-size: 0.6875rem; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.hf-patterns__list { display: flex; flex-direction: column; gap: 12px; }
.hf-pattern { display: flex; flex-direction: column; gap: 6px; }
.hf-pattern__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hf-pattern__label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.hf-pattern__metrics { display: inline-flex; align-items: center; gap: 6px; }
.hf-pattern__avg {
    font-size: 0.8125rem; font-weight: 700; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.hf-pattern__trend { display: inline-flex; color: var(--color-text-tertiary); }
.hf-pattern__trend svg { width: 14px; height: 14px; }
.hf-pattern__scale { display: flex; gap: 5px; }
.hf-pattern__dot {
    flex: 1 1 0; height: 7px; border-radius: 999px;
    background: var(--color-border-light);
    transition: background var(--transition-fast);
}
.hf-pattern__dot.is-on {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.hf-pattern__detail { font-size: 0.6875rem; color: var(--color-text-tertiary); }

.hf-signal__meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-light);
    display: flex; align-items: center; gap: 8px;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    flex-wrap: wrap;
    letter-spacing: 0.01em;
}
.hf-signal__meta-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: rgba(38, 166, 154, 0.06);
    border: 1px solid rgba(38, 166, 154, 0.12);
    border-radius: 999px;
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 0.6875rem;
    letter-spacing: 0;
}
.hf-signal--empty {
    background: var(--color-surface-hover);
    border-style: dashed;
}
.hf-signal--empty .hf-signal__bignum {
    color: var(--color-text-tertiary);
    font-size: 1rem;
    font-weight: 600;
}

/* Dagens fokus — mer kortlignende */
.hf-focus {
    border-radius: 18px;
    padding: 20px;
    gap: 14px;
}
.hf-focus__icon { width: 40px; height: 40px; }
.hf-focus__title { font-size: 1rem; }


.hf-week {
    border-radius: 22px;
    padding: 24px 24px 20px;
    background:
        linear-gradient(180deg, rgba(38,166,154,0.025) 0%, var(--color-surface) 50%),
        var(--color-surface);
    border: 1px solid var(--color-border-light);
}
.hf-week__bar { height: 10px; }


.hf-task {
    border-radius: 14px;
    padding: 14px 16px;
    gap: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
    
    align-items: center;
}

.hf-task--longbody { align-items: flex-start; }
.hf-task--longbody .hf-task__icon { margin-top: 2px; }
.hf-task--actionable {
    
    cursor: pointer;
    border-color: var(--color-border);
}
.hf-task--actionable:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.hf-task--actionable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.hf-task__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 0;             /* fjern baseline-offset fra inline-flex container */
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hf-task__icon[data-pillar="a"] {
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
}
.hf-task__icon[data-pillar="b"] {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}
.hf-task__icon[data-pillar="c"] {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}
.hf-task[data-pillar="b"].hf-task--actionable:hover {
    border-color: rgba(99, 102, 241, 0.35);
}
.hf-task[data-pillar="b"].hf-task--actionable:focus-visible {
    outline-color: #6366f1;
}
.hf-task__icon svg {
    width: 18px; height: 18px;
    display: block;             /* fjern inline-baseline-effekt */
    
    transform: translateY(1px);
}

.hf-task__icon > span {
    display: inline-flex;
    line-height: 0;
}
.hf-task--completed .hf-task__icon {
    background: var(--color-primary);
    color: white;
}
.hf-task__action-chev {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform var(--transition-fast), color var(--transition-fast);
    margin-left: auto;
}
.hf-task--actionable:hover .hf-task__action-chev {
    color: var(--color-primary);
    transform: translateX(2px);
}
.hf-task__check {
    /* For ikke-interaktive tasks (eks. completed-state) */
    width: 26px; height: 26px;
}
.hf-task__title { font-size: 0.9375rem; font-weight: 700; }
.hf-task__copy  { font-size: 0.8125rem; margin-top: 4px; }


.hf-history {
    border-radius: 20px;
}
.hf-history__toggle {
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 700;
}
.hf-history__toggle > span:first-child {
    display: inline-flex; align-items: center; gap: 10px;
}
.hf-history__strip {
    padding: 14px 0 8px;
    gap: 10px;
}
.hf-history__week {
    min-width: 110px;
    padding: 14px;
    border-radius: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.hf-history__week--current {
    background: linear-gradient(135deg, rgba(38,166,154,0.10), rgba(38,166,154,0.02));
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.15);
}
.hf-history__week--empty {
    background: var(--color-bg);
    border-style: dashed;
    opacity: 0.7;
}
.hf-history__week--empty .hf-history__week-state {
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.hf-history__week-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    margin: 0 auto 8px;
    display: block;
}
.hf-history__week-dot--good { background: var(--color-success); }
.hf-history__week-dot--neutral { background: var(--color-warning); }
.hf-history__week-dot--soft { background: var(--color-text-tertiary); }
.hf-history__week-dot--empty { background: transparent; border: 1.5px dashed var(--color-border); }
.hf-history__week-label {
    font-size: 0.625rem;
    letter-spacing: 0.10em;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}
.hf-history__week-state {
    font-size: 0.8125rem;
    color: var(--color-text);
    font-weight: 700;
    margin-top: 4px;
}
.hf-history__week-meta {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
}


button.hf-history__week {
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hf-history__week--clickable:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 6px 16px -8px rgba(38, 166, 154, 0.5);
}
.hf-history__week--clickable:active { transform: translateY(0); }
.hf-history__week--clickable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* Diskret chevron-hint nederst i klikkbare uke-kort */
.hf-history__week--clickable::after {
    content: 'Detaljer ›';
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
    opacity: 0.85;
}

/* Skjul ukehistorikk-skall helt når den er nesten tom */
.hf-history.is-empty-fresh { display: none; }


/* MÅNEDLIG HELSEREISE-RECAP (Fase 4 #2) */
/* Banner-kort i oversikten */
.hf-recapcard {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(38, 166, 154, 0.22);
    background:
        radial-gradient(130% 140% at 0% 0%, rgba(38, 166, 154, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, rgba(38, 166, 154, 0.10) 0%, rgba(56, 120, 230, 0.05) 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hf-recapcard:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 32px -16px rgba(38, 166, 154, 0.45);
}
.hf-recapcard:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-recapcard__glow {
    position: absolute;
    top: -40%; right: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(38, 166, 154, 0.28), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}
.hf-recapcard__body { position: relative; display: flex; align-items: center; gap: 14px; }
.hf-recapcard__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(38, 166, 154, 0.7);
}
.hf-recapcard__icon svg { width: 24px; height: 24px; }
.hf-recapcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hf-recapcard__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-primary-dark);
}
.hf-recapcard__title { margin: 0; font-size: 1.18rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.hf-recapcard__stats { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.82rem; color: var(--color-text-secondary); flex-wrap: wrap; }
.hf-recapcard__stat strong { color: var(--color-text); font-weight: 700; }
.hf-recapcard__dot { color: var(--color-text-tertiary); }
.hf-recapcard__cta {
    position: relative;
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-family: inherit; font-size: 0.85rem; font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.hf-recapcard__cta:hover { background: var(--color-primary-dark); transform: translateX(2px); }
.hf-recapcard__cta-arrow { display: inline-flex; }
.hf-recapcard__cta-arrow svg { width: 16px; height: 16px; }

/* Recap-modal innhold */

.hf-recap-view { display: flex; flex-direction: column; gap: 18px; }
.hf-recap-view__head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.hf-recap-view__content { display: flex; flex-direction: column; }

.hf-recap { display: flex; flex-direction: column; gap: 22px; }
.hf-recap__empty { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-secondary); text-align: center; padding: 24px 8px; }

.hf-recap__hero {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(38, 166, 154, 0.18);
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(56, 120, 230, 0.08) 0%, transparent 55%),
        linear-gradient(135deg, rgba(38, 166, 154, 0.10) 0%, rgba(38, 166, 154, 0.02) 100%);
    display: flex; flex-direction: column; gap: 16px;
}
.hf-recap__hero-top { display: flex; flex-direction: column; gap: 2px; }
/* Måned-navigasjon i recap-heroen */
.hf-recap__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.hf-recap__nav .hf-recap__hero-top { align-items: center; text-align: center; flex: 1; min-width: 0; }
.hf-recap__nav-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.hf-recap__nav-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-primary-light); }
.hf-recap__nav-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-recap__nav-btn:disabled { opacity: 0.32; cursor: default; }
.hf-recap__nav-btn--prev:hover:not(:disabled) { transform: translateX(-2px); }
.hf-recap__nav-btn--next:hover:not(:disabled) { transform: translateX(2px); }
.hf-recap__nav-chev { display: inline-flex; }
.hf-recap__nav-chev svg { width: 18px; height: 18px; }
.hf-recap__nav-btn--prev .hf-recap__nav-chev { transform: rotate(90deg); }
.hf-recap__nav-btn--next .hf-recap__nav-chev { transform: rotate(-90deg); }
.hf-recap__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-primary-dark);
}
.hf-recap__month { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }

.hf-recap__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: 10px;
}
.hf-recap__metric {
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 13px 8px;
    border-radius: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-align: center;
}
.hf-recap__metric-value { font-size: 1.4rem; font-weight: 800; color: var(--color-primary-dark); line-height: 1.05; }
.hf-recap__metric-label {
    font-size: 0.7rem; color: var(--color-text-tertiary); font-weight: 600;
    line-height: 1.3; overflow-wrap: anywhere;
}
.hf-recap__progress { height: 8px; border-radius: 999px; background: rgba(38, 166, 154, 0.14); overflow: hidden; }
.hf-recap__progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); transition: width 0.6s ease; }
.hf-recap__progress-label { font-size: 0.74rem; color: var(--color-text-tertiary); }

.hf-recap__section { display: flex; flex-direction: column; gap: 12px; }
.hf-recap__section-head { display: flex; align-items: center; gap: 8px; }
.hf-recap__section-icon { color: var(--color-primary); display: inline-flex; }
.hf-recap__section-icon svg { width: 18px; height: 18px; }
.hf-recap__section-title { font-size: 1rem; font-weight: 700; color: var(--color-text); }

/* AI-narrativ */
.hf-recap__narrative {
    padding: 18px 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(38, 166, 154, 0.18);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.06), rgba(38, 166, 154, 0.01));
    display: flex; flex-direction: column; gap: 10px;
}
.hf-recap__narrative-text { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--color-text); white-space: pre-line; max-width: 78ch; }
.hf-recap__narrative-text--muted { color: var(--color-text-secondary); font-size: 0.88rem; }
.hf-recap__narrative-loading { display: flex; flex-direction: column; gap: 9px; }
.hf-recap__narrative-hint { font-size: 0.76rem; color: var(--color-primary-dark); font-weight: 600; }
.hf-recap__narrative-disclaimer {
    margin: 4px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(38, 166, 154, 0.14);
    font-size: 0.72rem; line-height: 1.5; font-style: italic;
    color: var(--color-text-tertiary);
}
.hf-recap__shimmer {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(38,166,154,0.10) 25%, rgba(38,166,154,0.22) 37%, rgba(38,166,154,0.10) 63%);
    background-size: 400% 100%;
    animation: hf-recap-shimmer 1.4s ease infinite;
}
.hf-recap__shimmer--short { width: 60%; }
@keyframes hf-recap-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Signaler */

.hf-recap__signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.hf-recap__signal {
    padding: 13px 14px; border-radius: 14px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    display: flex; flex-direction: column; gap: 7px;
    min-width: 0;
}

.hf-recap__signal-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
.hf-recap__signal-label { font-weight: 700; font-size: 0.9rem; color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.hf-recap__signal-qual { font-size: 0.78rem; color: var(--color-text-tertiary); }

/* Retnings-pills (vennlig farge: down = rav, ikke rødt) */
.hf-recap__pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.hf-recap__pill-icon { display: inline-flex; }
.hf-recap__pill-icon svg { width: 13px; height: 13px; }
.hf-recap__pill--up   { background: rgba(38, 166, 154, 0.14); color: var(--color-primary-dark); }
.hf-recap__pill--down { background: rgba(217, 154, 50, 0.16); color: #9a6b13; }
.hf-recap__pill--flat { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.hf-recap__pill--new  { background: rgba(56, 120, 230, 0.14); color: #2a5fc0; }

/* Innsjekk-rader */
.hf-recap__checkins { display: flex; flex-direction: column; gap: 8px; }
.hf-recap__checkin {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px;
    border: 1px solid var(--color-border); background: var(--color-surface);
}
.hf-recap__checkin-label { font-weight: 600; font-size: 0.88rem; color: var(--color-text); flex: 1; min-width: 0; }
.hf-recap__checkin-avg { font-size: 0.8rem; color: var(--color-text-tertiary); font-weight: 600; }

/* Highlights + fokusområder */
.hf-recap__notes { display: flex; flex-direction: column; gap: 8px; }
.hf-recap__note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 13px;
    font-size: 0.86rem; line-height: 1.5;
}
.hf-recap__note--win   { background: rgba(38, 166, 154, 0.07); border: 1px solid rgba(38, 166, 154, 0.16); }
.hf-recap__note--focus { background: rgba(217, 154, 50, 0.08); border: 1px solid rgba(217, 154, 50, 0.18); }
.hf-recap__note-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.hf-recap__note-icon svg { width: 17px; height: 17px; }
.hf-recap__note--win .hf-recap__note-icon { color: var(--color-primary); }
.hf-recap__note--focus .hf-recap__note-icon { color: #9a6b13; }
.hf-recap__note-text { color: var(--color-text); }

/* Anbefalinger */
.hf-recap__recs { display: flex; flex-direction: column; gap: 10px; }
.hf-recap__rec {
    display: flex; gap: 12px;
    padding: 14px; border-radius: 15px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hf-recap__rec:hover { border-color: var(--color-primary-light); box-shadow: 0 6px 18px -12px rgba(38, 166, 154, 0.5); }
.hf-recap__rec-icon {
    flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(38, 166, 154, 0.10); color: var(--color-primary);
}
.hf-recap__rec-icon svg { width: 21px; height: 21px; }
.hf-recap__rec-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hf-recap__rec-goal {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-primary-dark);
}
.hf-recap__rec-title { font-size: 0.92rem; font-weight: 700; color: var(--color-text); }
.hf-recap__rec-text { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--color-text-secondary); }


.hf-recap__markers-wrap { display: flex; flex-direction: column; gap: 12px; }
.hf-recap__markers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 10px;
}
.hf-recap__marker {
    min-width: 0;
    display: flex; flex-direction: column; gap: 7px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.hf-recap__marker--more {
    cursor: pointer; text-align: left;
    align-items: flex-start;
    gap: 4px;
    border: 1px dashed rgba(38, 166, 154, 0.40);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.07), rgba(38, 166, 154, 0.01));
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    font-family: inherit;
}
.hf-recap__marker--more:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.12), rgba(38, 166, 154, 0.03));
}
.hf-recap__marker--more:active { transform: translateY(1px); }
.hf-recap__marker--more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-recap__more-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 2px;
    background: rgba(38, 166, 154, 0.12); color: var(--color-primary);
}
.hf-recap__more-icon svg { width: 18px; height: 18px; }
.hf-recap__more-count { font-size: 1.35rem; font-weight: 800; color: var(--color-primary-dark); line-height: 1; }
.hf-recap__more-label { font-size: 0.8rem; font-weight: 700; color: var(--color-text); }
.hf-recap__more-label--solo { font-size: 0.95rem; }
.hf-recap__more-text { font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.45; margin-top: 2px; }
.hf-recap__more-cta {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 700; color: var(--color-primary-dark);
}
.hf-recap__more-cta-arrow { display: inline-flex; transition: transform var(--transition-fast); }
.hf-recap__more-cta-arrow svg { width: 15px; height: 15px; }
.hf-recap__marker--more:hover .hf-recap__more-cta-arrow { transform: translateX(2px); }
.hf-recap__marker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hf-recap__marker-name {
    min-width: 0;
    font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary);
    line-height: 1.3; overflow-wrap: anywhere;
}

.hf-recap__marker-relevance {
    display: inline-flex; align-items: center; gap: 5px;
    align-self: flex-start;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--color-primary-dark);
    background: rgba(38, 166, 154, 0.10);
    padding: 2px 8px; border-radius: 999px;
    line-height: 1.3; overflow-wrap: anywhere;
}
.hf-recap__marker-relevance-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-primary); flex-shrink: 0;
}

.hf-recap__marker-status {
    flex-shrink: 0;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.hf-recap__marker-status--optimal { background: rgba(59, 130, 246, 0.10); color: #1d4ed8; }
.hf-recap__marker-status--in      { background: rgba(16, 185, 129, 0.10); color: #047857; }
.hf-recap__marker-status--out     { background: rgba(239, 68, 68, 0.10);  color: #b91c1c; }
.hf-recap__marker-valrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hf-recap__marker-value {
    min-width: 0;
    font-size: 1.18rem; font-weight: 800; color: var(--color-text);
    line-height: 1.12; overflow-wrap: anywhere;
}
.hf-recap__marker-meta {
    font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere;
}
.hf-recap__marker-meta-ref { color: var(--color-text-secondary); }
.hf-recap__marker-meta-opt { color: #3b82f6; font-weight: 600; }

/* «Hva betyr dette?»-utvider */
.hf-recap__marker-info { margin-top: 1px; }
.hf-recap__marker-info-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    cursor: pointer; list-style: none;
    font-size: 0.74rem; font-weight: 600; color: var(--color-primary-dark);
    padding: 2px 0;
}
.hf-recap__marker-info-summary::-webkit-details-marker { display: none; }
.hf-recap__marker-info-summary:hover { color: var(--color-primary); }
.hf-recap__marker-info-chev { display: inline-flex; transition: transform var(--transition-fast); }
.hf-recap__marker-info-chev svg { width: 14px; height: 14px; }
.hf-recap__marker-info[open] .hf-recap__marker-info-chev { transform: rotate(180deg); }
.hf-recap__marker-info-body { padding-top: 4px; }
.hf-recap__marker-info-loading { font-size: 0.76rem; color: var(--color-text-tertiary); }
.hf-recap__marker-info-text {
    margin: 0 0 6px; font-size: 0.8rem; line-height: 1.55; color: var(--color-text-secondary);
}
.hf-recap__marker-info-text:last-child { margin-bottom: 0; }
.hf-recap__marker-info-text--muted { color: var(--color-text-tertiary); font-style: italic; }

.hf-recap__marker-delta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    background: var(--color-surface-hover); color: var(--color-text-secondary);
}
.hf-recap__marker-delta-icon { display: inline-flex; }
.hf-recap__marker-delta-icon svg { width: 12px; height: 12px; }
.hf-recap__marker-tag {
    flex-shrink: 0;
    padding: 3px 8px; border-radius: 999px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
    background: rgba(38, 166, 154, 0.12); color: var(--color-primary-dark);
    white-space: nowrap;
}
.hf-recap__spark { width: 100%; }
.hf-recap__spark-svg { width: 100%; height: 36px; display: block; overflow: visible; }
.hf-recap__marker-prev { font-size: 0.72rem; color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.hf-recap__markers-more { margin: 0; font-size: 0.78rem; color: var(--color-text-tertiary); }
.hf-recap__markers-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: 999px;
    border: 1px solid rgba(38, 166, 154, 0.30);
    background: var(--color-surface);
    color: var(--color-primary-dark); font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.hf-recap__markers-cta:hover { background: rgba(38, 166, 154, 0.08); border-color: rgba(38, 166, 154, 0.45); }
.hf-recap__markers-cta:active { transform: translateY(1px); }
.hf-recap__markers-cta-arrow { display: inline-flex; }
.hf-recap__markers-cta-arrow svg { width: 15px; height: 15px; }

/* Motiverende CTA-callout under nye prøvesvar */
.hf-recap__markers-motiv {
    display: flex; gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(38, 166, 154, 0.18);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.07), rgba(38, 166, 154, 0.01));
}
.hf-recap__markers-motiv-icon {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(38, 166, 154, 0.12); color: var(--color-primary);
}
.hf-recap__markers-motiv-icon svg { width: 19px; height: 19px; }
.hf-recap__markers-motiv-body { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.hf-recap__markers-motiv-text {
    margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--color-text-secondary);
}

.hf-recap__lab { margin: 0; font-size: 0.82rem; color: var(--color-text-secondary); text-align: center; }
.hf-recap__disclaimer {
    margin: 0; padding-top: 4px;
    font-size: 0.74rem; line-height: 1.5; color: var(--color-text-tertiary); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .hf-recapcard:hover { transform: none; }
    .hf-recap__shimmer { animation: none; }
    .hf-recap__progress-fill { transition: none; }
}

@media (max-width: 640px) {
    .hf-recapcard { padding: 16px; }
    .hf-recapcard__cta { width: 100%; justify-content: center; }
    .hf-recap__metric-value { font-size: 1.25rem; }
    
}

/* SMARTE PÅMINNELSER — subtil inline-linje i oversikten */
.hf-remindbar {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.hf-remindbar__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary);
}
.hf-remindbar__icon svg { width: 18px; height: 18px; }
.hf-remindbar__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.hf-remindbar__title { font-size: 0.86rem; font-weight: 700; color: var(--color-text); }
.hf-remindbar__sub { font-size: 0.76rem; line-height: 1.45; color: var(--color-text-tertiary); }
.hf-remindbar__action { flex-shrink: 0; }
.hf-remindbar__dismiss {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: none; background: none;
    color: var(--color-text-tertiary);
    font-size: 1.3rem; line-height: 1;
    cursor: pointer; border-radius: 8px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.hf-remindbar__dismiss:hover { background: var(--color-surface-hover); color: var(--color-text); }
@media (max-width: 480px) {
    .hf-remindbar__sub { display: none; }
}

/* INNSTILLINGER — egen in-page-side i Min helseflyt-fanen */
.hf-settings-view { display: flex; flex-direction: column; gap: 20px; }
.hf-settings-view__head {
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.hf-settings-back {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px 8px 11px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.hf-settings-back:hover { background: var(--color-surface-hover); border-color: var(--color-primary-light); transform: translateX(-2px); }
.hf-settings-back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-settings-back__icon { display: inline-flex; transform: rotate(90deg); }
.hf-settings-back__icon svg { width: 16px; height: 16px; }
.hf-settings-view__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.hf-settings-view__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--color-text); line-height: 1.15; }
.hf-settings-view__sub { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--color-text-tertiary); }
/* God luft mellom hver innstillings-seksjon */
.hf-settings-view__sections { display: flex; flex-direction: column; gap: 16px; }
.hf-settings-view__back-bottom { align-self: flex-start; }
/* «Mine mål» som eget kort (matcher accordion-kortene) */
.hf-settings-view__sections > .hf-source-block {
    margin-top: 0;
    padding: 16px;
    border-top: none;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}


@media (min-width: 768px) {
    .hf-settings-view__sections { gap: 18px; }
    .hf-settings-view .hf-acc__body { padding: 6px 20px 20px; }
    .hf-settings-view .hf-source-block { gap: 14px; }
}
@media (max-width: 640px) {
    .hf-settings-view__head { gap: 10px; flex-wrap: wrap; }
    .hf-settings-view__title { font-size: 1.15rem; }
    .hf-settings-view__back-bottom { align-self: stretch; width: 100%; }
}

.hf-prevsummary {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(38, 166, 154, 0.18);
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        linear-gradient(135deg, rgba(38, 166, 154, 0.08) 0%, rgba(38, 166, 154, 0.02) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hf-prevsummary__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.hf-prevsummary__head-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hf-prevsummary__icon { color: var(--color-primary); display: inline-flex; flex-shrink: 0; }
.hf-prevsummary__icon svg { width: 17px; height: 17px; }
.hf-prevsummary__title {
    font-size: 0.9375rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.005em;
}
.hf-prevsummary__week {
    font-size: 0.75rem; font-weight: 600; color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hf-prevsummary .hf-summary__text {
    margin: 0; white-space: pre-line;
    font-size: 0.9375rem; line-height: 1.6; color: var(--color-text);
}
.hf-prevsummary .hf-summary__disclaimer {
    margin: 0; font-size: 0.6875rem; color: var(--color-text-tertiary);
    font-style: italic;
}
@media (max-width: 640px) {
    .hf-prevsummary { padding: 16px; border-radius: 16px; }
    .hf-prevsummary__head { align-items: flex-start; }
    .hf-prevsummary .hf-summary__text { font-size: 0.9rem; }
}

@media (min-width: 768px) {
    .hf-prevsummary {
        display: grid;
        grid-template-columns: minmax(170px, 230px) 1fr;
        column-gap: 32px;
        row-gap: 10px;
        align-items: start;
        padding: 24px 28px;
    }
    .hf-prevsummary__head {
        grid-column: 1;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-right: 28px;
        border-right: 1px solid rgba(38, 166, 154, 0.16);
        align-self: stretch;
    }
    .hf-prevsummary__head-left { align-items: flex-start; }
    .hf-prevsummary .hf-summary__text {
        grid-column: 2; grid-row: 1;
        max-width: 70ch;
        font-size: 1rem;
        line-height: 1.7;
    }
    .hf-prevsummary .hf-summary__disclaimer { grid-column: 2; grid-row: 2; }
}


.hf-notify {
    margin-top: 18px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(38, 166, 154, 0.22);
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
        linear-gradient(135deg, rgba(38, 166, 154, 0.12) 0%, rgba(38, 166, 154, 0.03) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.hf-notify__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(38, 166, 154, 0.55);
}
.hf-notify__icon svg { width: 22px; height: 22px; }
.hf-notify__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hf-notify__title {
    margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.005em; line-height: 1.3;
}
.hf-notify__text {
    margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.5;
}
.hf-notify__extra {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.8125rem; color: var(--color-text-secondary);
    cursor: pointer; margin: 2px 0;
    user-select: none;
}
.hf-notify__extra input[type="checkbox"] {
    width: 17px; height: 17px; flex-shrink: 0;
    accent-color: var(--color-primary); cursor: pointer; margin: 0;
}
.hf-notify__actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.hf-notify__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff; font-family: inherit; font-size: 0.9375rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(38, 166, 154, 0.55);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.hf-notify__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(38, 166, 154, 0.62); }
.hf-notify__btn:active { transform: translateY(0); }
.hf-notify__btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.hf-notify__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.hf-notify__dismiss {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.875rem; font-weight: 600; color: var(--color-text-tertiary);
    padding: 10px 8px; border-radius: 8px;
    transition: color var(--transition-fast);
}
.hf-notify__dismiss:hover { color: var(--color-text-secondary); }
.hf-notify__dismiss:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-notify__reassure {
    margin: 2px 0 0; font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.45;
}


.hf-ainudge {
    margin-top: 18px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
        linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(38, 166, 154, 0.06) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.hf-ainudge__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, var(--color-primary) 100%);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.55);
}
.hf-ainudge__icon svg { width: 22px; height: 22px; }
.hf-ainudge__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hf-ainudge__eyebrow {
    margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: #4f46e5;
}
.hf-ainudge__title {
    margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.005em; line-height: 1.3;
}
.hf-ainudge__text {
    margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.55;
}
.hf-ainudge__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0; }
.hf-ainudge__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(99, 102, 241, 0.10); color: #4338ca;
    font-size: 0.74rem; font-weight: 600;
}
.hf-ainudge__chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6366f1; flex-shrink: 0;
}
.hf-ainudge__actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.hf-ainudge__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, var(--color-primary) 100%);
    color: #fff; font-family: inherit; font-size: 0.9375rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(99, 102, 241, 0.55);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.hf-ainudge__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.62); }
.hf-ainudge__cta:active { transform: translateY(0); }
.hf-ainudge__cta:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
.hf-ainudge__cta-arrow { display: inline-flex; }
.hf-ainudge__cta-arrow svg { width: 16px; height: 16px; }
.hf-ainudge__dismiss {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.875rem; font-weight: 600; color: var(--color-text-tertiary);
    padding: 10px 8px; border-radius: 8px;
    transition: color var(--transition-fast);
}
.hf-ainudge__dismiss:hover { color: var(--color-text-secondary); }
.hf-ainudge__dismiss:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

@media (max-width: 640px) {
    .hf-ainudge { padding: 16px; gap: 12px; }
    .hf-ainudge__cta { width: 100%; justify-content: center; }
    .hf-ainudge__actions { gap: 6px; }
}

/* Onboarding: e-post-opt-in-seksjon */
.hf-onboarding__notify {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
    display: flex; flex-direction: column; gap: 4px;
}
.hf-onboarding__notify .hf-toggle-row { padding: 8px 0; }

@media (max-width: 640px) {
    .hf-notify { padding: 16px; gap: 13px; border-radius: 16px; }
    .hf-notify__icon { width: 40px; height: 40px; border-radius: 12px; }
    .hf-notify__actions { gap: 6px; }
    .hf-notify__btn { flex: 1; min-width: 0; }
}

/* Highlight når en uke åpnes fra strip-klikk */
.hf-fullhistory__week--focus {
    animation: hfWeekFocus 2.4s ease;
}
@keyframes hfWeekFocus {
    0%, 100% { box-shadow: none; }
    12%      { box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.45); }
    70%      { box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.20); }
}
@media (prefers-reduced-motion: reduce) {
    .hf-fullhistory__week--focus { animation: none; box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.35); }
    button.hf-history__week { transition: none; }
}


.hf-week__hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.hf-ring {
    position: relative;
    width: 92px; height: 92px;
    flex-shrink: 0;
}
.hf-ring__svg {
    width: 92px; height: 92px;
    transform: rotate(-90deg);
}
.hf-ring__track {
    stroke: var(--color-border-light);
    stroke-width: 8;
    fill: none;
}
.hf-ring__fill {
    stroke: url(#hfRingGrad);
    stroke-width: 8;
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hf-ring__center {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
.hf-ring__num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hf-ring__sub {
    font-size: 0.625rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-top: 2px;
}
.hf-week__hero-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.hf-week__hero-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; }
.hf-week__hero-line {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.hf-week__hero-stat {
    display: inline-flex; align-items: baseline; gap: 4px;
}
.hf-week__hero-stat strong {
    font-size: 1rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.hf-achievements {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.hf-achievement {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hf-achievement::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.hf-achievement--good { background: rgba(16,185,129,0.10); color: #047857; }
.hf-achievement--neutral { background: rgba(148,163,184,0.12); color: var(--color-text-secondary); }

@media (max-width: 640px) {
    .hf-week__hero { gap: 14px; }
    .hf-ring, .hf-ring__svg { width: 76px; height: 76px; }
    .hf-ring__num { font-size: 1.0rem; }
    .hf-week__hero-line { gap: 10px; }
}


.hf-insights {
    display: flex; flex-direction: column; gap: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(38,166,154,0.04) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
    overflow: hidden;
}
.hf-insights__title {
    margin: 0 0 10px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; gap: 6px;
}
.hf-insights__title svg { width: 12px; height: 12px; }

.hf-insight {
    
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex; flex-direction: row; align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}
.hf-insight:last-child { margin-bottom: 0; }

.hf-insight__head {
    display: contents;
}
.hf-insight__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hf-insight__icon svg { width: 14px; height: 14px; }
.hf-insight__title-wrap { flex: 1; min-width: 0; }
.hf-insight__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.hf-insight__body {
    margin: 3px 0 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}


.hf-insight__items {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.hf-insight__item {
    background: var(--color-surface-hover);
    border-radius: 999px;
    padding: 4px 10px;
    display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px;
    font-size: 0.75rem;
}
.hf-insight__item-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}
.hf-insight__item-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.hf-insight__item-date {
    display: none; /* date nå implisitt i body-tekst — sparer plass */
}


.hf-insight__items-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.hf-insight__items-wrap .hf-insight__items { margin-top: 0; }


.hf-insight__toggle {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 4px 0 0;
    margin: 0;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 4px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.hf-insight__toggle:hover {
    color: var(--color-text);
    text-decoration-color: currentColor;
}
.hf-insight__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    text-decoration: none;
}


.hf-insight[data-type="trend_below_baseline"] .hf-insight__icon { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.hf-insight[data-type="recent_medication"]    .hf-insight__icon { background: rgba(168, 85, 247, 0.12); color: #7e22ce; }
.hf-insight[data-type="source_conflict"]      .hf-insight__icon { background: rgba(148, 163, 184, 0.12); color: var(--color-text-secondary); }


.hf-normals { display: flex; flex-direction: column; gap: 16px; }
.hf-normals__intro {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}
.hf-normals__range {
    display: inline-flex; gap: 6px;
    background: var(--color-surface-hover);
    padding: 4px;
    border-radius: 999px;
    align-self: flex-start;
}
.hf-normals__range-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.hf-normals__range-btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: white;
}
.hf-normals__range-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hf-trend {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.hf-trend__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
}
.hf-trend__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin: 0; }
.hf-trend__meta { font-size: 0.6875rem; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
/* «Din utvikling»-innsikt øverst i kortet */
.hf-trend__summary {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.45;
}
.hf-trend__summary-dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-primary); margin-top: 5px;
}
.hf-trend__summary--neutral .hf-trend__summary-dot { background: var(--color-text-tertiary); }
.hf-trend__summary-text { flex: 1; min-width: 0; }

/* Graf med akser: [y-skala] [plott + x-datoer] */
.hf-trend__graph {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: stretch;
}
.hf-trend__yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: flex-end; text-align: right;
    padding: 1px 0 20px;            /* bunn ~ x-akse-rad så labels følger plottet */
    font-size: 0.625rem; color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    min-width: 28px;
}
.hf-trend__plot { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hf-trend__xaxis {
    display: flex; justify-content: space-between;
    font-size: 0.625rem; color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}
.hf-trend__chart {
    width: 100%;
    height: 124px;
    position: relative;
}
.hf-trend__svg { width: 100%; height: 100%; display: block; }
.hf-trend__grid { stroke: var(--color-border-light); stroke-width: 1; }
.hf-trend__band {
    fill: rgba(38, 166, 154, 0.10);
    stroke: none;
}
.hf-trend__area {
    fill: rgba(38, 166, 154, 0.09);
    stroke: none;
}
.hf-trend__line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hf-trend__baseline-line {
    fill: none;
    stroke: var(--color-text-tertiary);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.6;
}
.hf-trend__legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    padding-top: 6px;
    border-top: 1px solid var(--color-border-light);
}
.hf-trend__legend-item { display: inline-flex; align-items: center; gap: 4px; }
.hf-trend__legend-dot {
    width: 10px; height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}
.hf-trend__legend-dot--dashed {
    background: repeating-linear-gradient(to right, var(--color-text-tertiary) 0 3px, transparent 3px 6px);
}
.hf-trend__legend-dot--band {
    background: rgba(38, 166, 154, 0.20);
    height: 6px; border-radius: 2px;
}
.hf-trend__empty {
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    padding: 20px 0;
    text-align: center;
}

/* «Se Mine normaler»-knapp i hver signal-card */
.hf-signal__details-btn {
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    align-self: flex-start;
    font-family: inherit;
}
.hf-signal__details-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.hf-signal__details-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }


.hf-signal__spark {
    margin-top: 12px;
    width: 100%;
    height: 52px;
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    background:
        linear-gradient(180deg, transparent 0%, rgba(38, 166, 154, 0.05) 100%);
    transition: background var(--transition-fast), transform var(--transition-fast);
    overflow: hidden;
}
.hf-signal__spark:hover {
    background:
        linear-gradient(180deg, rgba(38, 166, 154, 0.04) 0%, rgba(38, 166, 154, 0.10) 100%);
}
.hf-signal__spark:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.hf-signal__spark-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}

.hf-signal__spark-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.hf-signal__spark-fill {
    fill: rgba(38, 166, 154, 0.10);
    stroke: none;
}
.hf-signal__spark-mean {
    stroke: var(--color-primary);
    stroke-width: 1.2px;
    stroke-dasharray: 4 3;
    opacity: 0.45;
    fill: none;
    vector-effect: non-scaling-stroke;
}


.hf-signal__spark-enddot {
    position: absolute;
    width: 7px; height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-surface), 0 2px 6px rgba(38, 166, 154, 0.30);
    pointer-events: none;
    z-index: 2;
}

.hf-signal__spark-glow {
    position: absolute;
    width: 18px; height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38, 166, 154, 0.30) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: hf-spark-pulse 2.4s ease-in-out infinite;
}
@keyframes hf-spark-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .hf-signal__spark-glow { animation: none; }
}

.hf-signal__spark-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: var(--color-text-tertiary);
    font-size: 0.6875rem;
    font-style: italic;
}
.hf-signal__spark-label {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
    opacity: 0.7;
}


.hf-fullhistory { display: flex; flex-direction: column; gap: 16px; }
.hf-fullhistory__week {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 16px;
}
.hf-fullhistory__week-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-bottom: 10px;
}
.hf-fullhistory__week-title { font-size: 0.9375rem; font-weight: 700; margin: 0; color: var(--color-text); }
.hf-fullhistory__week-meta  { font-size: 0.75rem; color: var(--color-text-tertiary); }
.hf-fullhistory__state-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(38, 166, 154, 0.10);
    color: var(--color-primary-dark);
}
.hf-fullhistory__state-pill--soft { background: rgba(148, 163, 184, 0.12); color: var(--color-text-secondary); }
.hf-fullhistory__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.hf-fullhistory__stat {
    padding: 10px 12px;
    background: var(--color-surface-hover);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.hf-fullhistory__stat-label { font-size: 0.625rem; font-weight: 700; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.hf-fullhistory__stat-value { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.hf-fullhistory__ai {
    margin-top: 12px;
    padding: 12px;
    background: rgba(38, 166, 154, 0.05);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.55;
    white-space: pre-line;
}
.hf-fullhistory__ai-label {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    background: rgba(38, 166, 154, 0.15);
    color: var(--color-primary-dark);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.hf-histpager { display: flex; flex-direction: column; gap: 16px; }
.hf-histpager__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hf-histpager__head-center { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hf-histpager__title { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--color-text); line-height: 1.15; }
.hf-histpager__sub { font-size: 0.78rem; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.hf-histpager__arrow {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.hf-histpager__arrow:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-primary-light); }
.hf-histpager__arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-histpager__arrow:disabled { opacity: 0.3; cursor: default; }
.hf-histpager__arrow--prev:hover:not(:disabled) { transform: translateX(-2px); }
.hf-histpager__arrow--next:hover:not(:disabled) { transform: translateX(2px); }
.hf-histpager__arrow-chev { display: inline-flex; }
.hf-histpager__arrow-chev svg { width: 20px; height: 20px; }
.hf-histpager__arrow--prev .hf-histpager__arrow-chev { transform: rotate(90deg); }
.hf-histpager__arrow--next .hf-histpager__arrow-chev { transform: rotate(-90deg); }
.hf-histpager--single .hf-histpager__arrow { display: none; }

.hf-histpager__stage { position: relative; overflow: hidden; }
.hf-histpager__card--in-right { animation: hf-hp-in-right 0.28s ease; }
.hf-histpager__card--in-left  { animation: hf-hp-in-left 0.28s ease; }
@keyframes hf-hp-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hf-hp-in-left  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }


.hf-fhw-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hf-fhw-data { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hf-fhw-summary { min-width: 0; }
.hf-fhw-summary .hf-fullhistory__ai { margin-top: 0; height: 100%; }
.hf-fhw-empty { margin: 0; font-size: 0.85rem; color: var(--color-text-tertiary); }
.hf-fhw-data .hf-fullhistory__stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

/* Innsjekk-nedbrytning (konkret hva brukeren gjorde) */
.hf-fhw-checkins { display: flex; flex-direction: column; gap: 8px; }
.hf-fhw-checkins__title {
    margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-text-tertiary);
}
.hf-fhw-checkins__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-fhw-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-light);
    font-size: 0.76rem; color: var(--color-text);
}
.hf-fhw-chip__icon { display: inline-flex; color: var(--color-primary); }
.hf-fhw-chip__icon svg { width: 14px; height: 14px; }
.hf-fhw-chip__label { font-weight: 600; }
.hf-fhw-chip__count { font-weight: 700; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }


.hf-fhw-log { display: flex; flex-direction: column; gap: 8px; }
.hf-fhw-log__row {
    padding: 9px 11px;
    border-radius: 11px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-light);
}
.hf-fhw-log__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hf-fhw-log__icon { display: inline-flex; color: var(--color-primary); flex-shrink: 0; }
.hf-fhw-log__icon svg { width: 15px; height: 15px; }
.hf-fhw-log__label { font-weight: 600; font-size: 0.82rem; color: var(--color-text); }
.hf-fhw-log__score {
    font-weight: 800; font-size: 0.82rem; color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}
.hf-fhw-log__extra {
    font-size: 0.74rem; color: var(--color-text-secondary); font-weight: 600;
}
.hf-fhw-log__date {
    margin-left: auto; font-size: 0.72rem; color: var(--color-text-tertiary);
    white-space: nowrap;
}
.hf-fhw-log__note {
    margin: 6px 0 0; font-size: 0.8rem; line-height: 1.5;
    color: var(--color-text-secondary); font-style: italic;
}

@media (min-width: 760px) {
    
    
    .hf-fhw-grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; align-items: start; }
}

/* Tappbar tidslinje-rail — skalerer til mange uker */
.hf-histpager__rail {
    display: flex; gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.hf-histpager__rail::-webkit-scrollbar { height: 4px; }
.hf-histpager__rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.hf-histpager__pill {
    flex-shrink: 0;
    min-width: 40px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: inherit; font-size: 0.75rem; font-weight: 700;
    cursor: pointer;
    scroll-snap-align: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.hf-histpager__pill:hover { background: var(--color-surface-hover); }
.hf-histpager__pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hf-histpager__pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .hf-histpager__card--in-right, .hf-histpager__card--in-left { animation: none; }
    .hf-histpager__arrow:hover:not(:disabled) { transform: none; }
}

@media (max-width: 640px) {
    .hf-trend__chart { height: 100px; }
    .hf-fullhistory__stats { grid-template-columns: 1fr; }
    .hf-fullhistory__week-head { flex-direction: column; align-items: flex-start; }
    .hf-histpager__arrow { width: 40px; height: 40px; }
    .hf-histpager__arrow-chev svg { width: 18px; height: 18px; }
    .hf-histpager .hf-fullhistory__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.hf-signal__qual {
    position: relative;
    cursor: help;
}
.hf-signal__qual[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    
    left: 0;
    transform: none;
    background: #0f172a;
    color: #f8fafc;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    
    z-index: 10000;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.hf-signal__qual[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    transform: rotate(45deg);
    width: 8px; height: 8px;
    background: #0f172a;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 10000;
}
.hf-signal__qual[data-tooltip]:hover::after,
.hf-signal__qual[data-tooltip]:hover::before,
.hf-signal__qual[data-tooltip]:focus-within::after,
.hf-signal__qual[data-tooltip]:focus-within::before {
    opacity: 1;
}


.hf-summary--loading {
    background: var(--color-surface-hover);
    border-style: dashed;
}
.hf-summary--loading .hf-summary__toggle { cursor: default; opacity: 0.7; }
.hf-summary__loading-text {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}
.hf-summary__loading-text::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: hf-spin 1s linear infinite;
    flex-shrink: 0;
}
@keyframes hf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hf-summary__loading-text::before { animation: none; }
}


.hf-welcome-art {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(38,166,154,0.20), rgba(38,166,154,0.05)),
        var(--color-surface);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(38,166,154,0.15);
}
.hf-welcome-art svg { width: 32px; height: 32px; }


@media (max-width: 640px) {
    .hf-section .section-header.hf-header { padding: 14px 16px; }
    .hf-brand-icon { width: 32px; height: 32px; }
    .hf-brand-icon svg { width: 22px; height: 22px; }
    .hf-section .section-title-group h2 { font-size: 1.125rem; }

    .hf-hero { padding: 22px 18px 18px; border-radius: 20px; }
    .hf-hero__status { font-size: 1.625rem; }
    .hf-hero__sub { font-size: 0.9375rem; }

    .hf-signal { padding: 16px; border-radius: 16px; }
    .hf-signal__bignum { font-size: 2rem; }

    .hf-week { padding: 18px; border-radius: 18px; }
    .hf-history__week { min-width: 100px; padding: 12px; }

    .hf-insights { padding: 14px; border-radius: 18px; }
    .hf-insight { padding: 14px; }
    
}


.hf-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.hf-empty__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-border-light);
    color: var(--color-text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.hf-empty__title { font-weight: 700; color: var(--color-text); margin: 0 0 4px 0; font-size: 1rem; }
.hf-empty__text { margin: 0; font-size: 0.875rem; line-height: 1.5; max-width: 44ch; margin-left: auto; margin-right: auto; }


.hf-skeleton-wrap { display: flex; flex-direction: column; gap: 16px; }
.hf-skel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hf-skel {
    background: linear-gradient(90deg, var(--color-border-light) 0%, #eef2f6 50%, var(--color-border-light) 100%);
    background-size: 200% 100%;
    border-radius: 12px;
    animation: hf-shimmer 1.4s ease-in-out infinite;
}
.hf-skel--hero { height: 168px; border-radius: var(--radius-lg); }
.hf-skel--card { height: 108px; }
.hf-skel--row { height: 72px; }

@keyframes hf-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hf-skel { animation: none; }
    .hf-basis__fill, .hf-week__fill { transition: none; }
    .hf-basis__chev { transition: none; }
    .hf-basis-item { animation: none; }
}


.hf-modal-dialog { border-radius: var(--radius-lg); }
.hf-modal-title-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hf-modal-sub { margin: 0; font-size: 0.8125rem; color: var(--color-text-secondary); font-weight: 500; }
.hf-modal-body { padding: 20px 24px 24px; }


@media (max-width: 640px) {
    #hf-checkin-modal,
    #hf-settings-modal,
    #hf-normals-modal,
    #hf-fullhistory-modal,
    #hf-recap-modal,
    #hf-notifications-modal {
        padding: 0;
        align-items: stretch;
    }
    #hf-checkin-modal .modal-dialog,
    #hf-settings-modal .modal-dialog,
    #hf-normals-modal .modal-dialog,
    #hf-fullhistory-modal .modal-dialog,
    #hf-recap-modal .modal-dialog,
    #hf-notifications-modal .modal-dialog {
        max-width: 100% !important;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        margin: 0;
        animation: fadeIn 0.25s ease;
    }
    #hf-checkin-modal .modal-header,
    #hf-settings-modal .modal-header,
    #hf-normals-modal .modal-header,
    #hf-fullhistory-modal .modal-header,
    #hf-recap-modal .modal-header,
    #hf-notifications-modal .modal-header {
        padding: 16px 18px;
        padding-top: max(16px, env(safe-area-inset-top, 0px));
    }
    #hf-checkin-modal .hf-modal-body,
    #hf-settings-modal .hf-modal-body,
    #hf-normals-modal .hf-modal-body,
    #hf-fullhistory-modal .hf-modal-body,
    #hf-recap-modal .hf-modal-body,
    #hf-notifications-modal .hf-modal-body {
        padding: 18px 18px;
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }
    #hf-checkin-modal .modal-close,
    #hf-settings-modal .modal-close,
    #hf-normals-modal .modal-close,
    #hf-fullhistory-modal .modal-close,
    #hf-recap-modal .modal-close,
    #hf-notifications-modal .modal-close {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
    }
}


.hf-prefill-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease;
    align-self: flex-start;
}
.hf-prefill-hint__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    animation: hfPrefillPulse 2.4s ease-in-out infinite;
}
@keyframes hfPrefillPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}
.hf-prefill-hint.is-edited {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-width: 0;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .hf-prefill-hint__dot { animation: none; }
}

.hf-form { display: flex; flex-direction: column; gap: 18px; }
.hf-form-group { display: flex; flex-direction: column; gap: 8px; }
.hf-form-label {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.005em;
}
.hf-form-hint { font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.5; }


.hf-scale { display: flex; gap: 6px; }
.hf-scale__btn {
    flex: 1;
    min-width: 0;
    padding: 12px 4px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition-fast);
    font-variant-numeric: tabular-nums;
}
.hf-scale__btn:hover { background: var(--color-surface-hover); border-color: var(--color-primary-light); }
.hf-scale__btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.12);
}
.hf-scale__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-scale__legend {
    display: flex; justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.hf-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.hf-type-btn {
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    display: flex; align-items: center; gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
}
.hf-type-btn svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.hf-type-btn:hover { background: var(--color-surface-hover); border-color: var(--color-primary-light); }
.hf-type-btn[aria-pressed="true"] {
    background: rgba(38, 166, 154, 0.08);
    border-color: var(--color-primary);
}
.hf-type-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hf-textarea {
    width: 100%;
    min-height: 72px;
    max-height: 200px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hf-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.12); }
.hf-counter {
    display: flex; justify-content: flex-end;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.hf-counter.is-near { color: var(--color-warning); }

.hf-disclaimer {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--color-surface-hover);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}

.hf-modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 8px;
}
.hf-btn {
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.hf-btn:hover { background: var(--color-surface-hover); }
.hf-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hf-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.hf-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.hf-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
.hf-btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.hf-btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
.hf-btn--danger { color: var(--color-danger); border-color: rgba(239, 68, 68, 0.25); }
.hf-btn--danger:hover { background: rgba(239, 68, 68, 0.06); border-color: var(--color-danger); }


.hf-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-light);
    gap: 16px;
}
.hf-toggle-row:last-of-type { border-bottom: none; }
.hf-toggle-row__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hf-toggle-row__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.hf-toggle-row__hint { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.45; }
.hf-toggle-row__action { flex-shrink: 0; }

.hf-toggle-row--sub { padding-left: 2px; }
.hf-select {
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    color: var(--color-text);
    padding: 9px 30px 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface);
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hf-select:hover { border-color: var(--color-primary-light); }
.hf-select:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.18); }
.hf-select:disabled { opacity: 0.6; cursor: default; }

.hf-switch {
    --switch-w: 44px;
    --switch-h: 26px;
    position: relative;
    display: inline-block;
    width: var(--switch-w); height: var(--switch-h);
}
.hf-switch input {
    opacity: 0; width: 0; height: 0;
    position: absolute;
}
.hf-switch__track {
    position: absolute; inset: 0;
    background: var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.hf-switch__track::before {
    content: "";
    position: absolute;
    width: calc(var(--switch-h) - 6px);
    height: calc(var(--switch-h) - 6px);
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: transform var(--transition-fast);
}
.hf-switch input:checked + .hf-switch__track { background: var(--color-primary); }
.hf-switch input:checked + .hf-switch__track::before {
    transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}
.hf-switch input:focus-visible + .hf-switch__track { box-shadow: 0 0 0 3px rgba(38,166,154,0.25); }
.hf-switch input:disabled + .hf-switch__track { opacity: 0.5; cursor: not-allowed; }


@media (max-width: 640px) {
    .hf-section .section-header.hf-header { padding-bottom: 12px; gap: 8px; }
    .hf-subtitle { font-size: 0.8125rem; }
    .hf-icon-btn { width: 32px; height: 32px; }

    .hf-hero { padding: 18px; }
    .hf-hero__row { gap: 12px; }
    .hf-hero__status { font-size: 1.375rem; }
    .hf-hero__sub { font-size: 0.875rem; }
    .hf-streak { padding: 4px 10px; font-size: 0.75rem; }

    .hf-signals { grid-template-columns: 1fr; gap: 8px; }
    .hf-signal { padding: 14px; }
    .hf-signal__value { font-size: 1.375rem; }

    .hf-skel-row { grid-template-columns: 1fr; }
    .hf-skel--card { height: 88px; }

    .hf-focus { padding: 14px; gap: 12px; }
    .hf-focus__icon { width: 32px; height: 32px; }

    .hf-week { padding: 14px; }
    .hf-task { padding: 11px 12px; }

    .hf-modal-body { padding: 18px 18px 20px; }
    .hf-type-grid { grid-template-columns: 1fr; }
    .hf-modal-actions { flex-direction: column-reverse; }
    .hf-modal-actions .hf-btn { width: 100%; }
}


@media print {
    .hf-section { display: none !important; }
}


.admin-hf-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 840px; }

/* Banner — visuell kill-switch-indikator */
.admin-hf-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
}
.admin-hf-banner-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-hf-banner-title { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.25; }
.admin-hf-banner-sub   { font-size: 0.8125rem; line-height: 1.45; }

.admin-hf-banner-on {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
    border-color: rgba(16,185,129,0.35);
}
.admin-hf-banner-on .admin-hf-banner-title { color: #047857; }
.admin-hf-banner-on .admin-hf-banner-sub   { color: #065f46; }

.admin-hf-banner-beta {
    background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(168,85,247,0.03));
    border-color: rgba(168,85,247,0.35);
}
.admin-hf-banner-beta .admin-hf-banner-title { color: #6b21a8; }
.admin-hf-banner-beta .admin-hf-banner-sub   { color: #581c87; }

.admin-hf-banner-off {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02));
    border-color: rgba(239,68,68,0.30);
}
.admin-hf-banner-off .admin-hf-banner-title { color: #991b1b; }
.admin-hf-banner-off .admin-hf-banner-sub   { color: #7f1d1d; }

.admin-hf-kill-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    background: #ffffff;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-hf-kill-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.admin-hf-kill-btn.is-on  { color: #991b1b; border-color: rgba(239,68,68,0.40); }
.admin-hf-kill-btn.is-on:hover  { background: rgba(239,68,68,0.06); }
.admin-hf-kill-btn.is-off { color: #047857; border-color: rgba(16,185,129,0.40); }
.admin-hf-kill-btn.is-off:hover { background: rgba(16,185,129,0.06); }

/* Advarsel-blokk — eks. "seed mangler" */
.admin-hf-warn {
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 10px;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
}
.admin-hf-warn strong { color: #78350f; }

/* Seksjonstitler */
.admin-hf-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 12px 0 4px;
    color: var(--color-text);
}
.admin-hf-section-sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.admin-hf-settings-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.admin-hf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 6px;
}
.admin-hf-grid .admin-hc-field input[type="number"] {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
.admin-hf-grid .admin-hc-field input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(38,166,154,0.15);
}

/* Stats-grid */
.admin-hf-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.admin-hf-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.admin-hf-stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.admin-hf-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.admin-hf-stat-sub   { font-size: 0.7rem; color: var(--color-text-tertiary); }

/* Tabeller (speil .admin-hc-usage-table) */
.admin-hf-table-wrap { overflow-x: auto; }
.admin-hf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-hf-table th, .admin-hf-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
}
.admin-hf-table th {
    background: #f9fafb;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-hf-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--color-text);
}
.admin-hf-table-compact th, .admin-hf-table-compact td { padding: 6px 10px; font-size: 0.8125rem; }

/* User-access-søk */
.admin-hf-access-wrap { display: flex; flex-direction: column; gap: 10px; }
.admin-hf-search-input {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    font-size: 0.9375rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    max-width: 480px;
}
.admin-hf-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(38,166,154,0.15);
}
.admin-hf-user-results { display: flex; flex-direction: column; gap: 6px; }
.admin-hf-user-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.admin-hf-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-hf-user-name { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; }
.admin-hf-user-email { font-size: 0.75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.admin-hf-user-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.admin-hf-hint { font-size: 0.8125rem; color: var(--color-text-tertiary); }

.admin-hf-disclaimer {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    line-height: 1.55;
    padding: 10px 12px;
    background: var(--color-surface-hover);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    margin-top: 12px;
}


.admin-ud-healthflow-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.admin-ud-hf-title { font-size: 0.875rem; font-weight: 700; color: var(--color-text); margin: 0 0 8px 0; letter-spacing: -0.005em; }
.admin-ud-hf-toggle-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
}
.admin-ud-hf-label { font-size: 0.875rem; color: var(--color-text-secondary); }
.admin-ud-hf-stats {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.admin-ud-hf-stats strong { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Mobil-justeringer for admin-tabs */
@media (max-width: 640px) {
    .admin-hf-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
    .admin-hf-kill-btn { width: 100%; padding: 12px; }
    .admin-hf-grid { grid-template-columns: 1fr; }
    .admin-hf-user-row { flex-direction: column; align-items: stretch; }
    .admin-hf-user-actions { width: 100%; justify-content: stretch; }
    .admin-hf-user-actions .hf-btn { flex: 1; text-align: center; }
}


.hn-method { margin-top: 18px; }
.hn-method-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.92rem; color: var(--color-text-primary, #1a1a1a); }
.hn-method-badge { background: var(--color-accent, #2f80ed); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.hn-warning { background: rgba(240, 180, 0, 0.12); border: 1px solid rgba(240, 180, 0, 0.4); color: var(--color-text-secondary, #444); border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; line-height: 1.45; margin: 12px 16px 14px; }
.hn-os-title { margin: 18px 16px 6px; font-size: 0.85rem; font-weight: 700; color: var(--color-text-primary, #1a1a1a); }
.hn-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border, #d9dde3); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; line-height: 1.4; resize: vertical; min-height: 110px; background: var(--color-surface, #fff); color: var(--color-text-primary, #1a1a1a); }
.hn-textarea:focus { outline: none; border-color: var(--color-accent, #2f80ed); }
/* Sekundær, nedtonet «lim inn tekst»-funksjon */
.hn-method-secondary { margin-top: 14px; border-top: 1px solid var(--color-border, #e6e8ec); padding-top: 12px; }
.hn-text-toggle { background: none; border: none; padding: 0; font-size: 0.8rem; color: var(--color-text-tertiary, #8a8f98); text-decoration: underline; cursor: pointer; }
.hn-text-toggle:hover { color: var(--color-text-secondary, #555); }
.hn-text-panel { margin-top: 10px; }
.hn-text-panel.hidden { display: none; }
.hn-textarea-compact { min-height: 78px; font-size: 0.84rem; }
.hn-text-submit-btn { margin-top: 8px; padding: 7px 14px; font-size: 0.82rem; border: 1px solid var(--color-border, #d9dde3); border-radius: 8px; background: var(--color-surface, #fff); color: var(--color-text-secondary, #555); cursor: pointer; }
.hn-text-submit-btn:hover { background: var(--color-bg-subtle, #f4f6f8); }

.app-footer { margin-top: auto; padding: 22px 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.footer-content { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footer-content > p { margin: 0; font-size: 0.82rem; color: var(--color-text-tertiary); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; max-width: 100%; }
.footer-link { font-size: 0.85rem; font-weight: 500; color: var(--color-primary); text-decoration: none; padding: 6px 2px; white-space: nowrap; transition: color var(--transition-fast); }
.footer-link:hover { color: var(--color-primary-dark); }
@media (max-width: 600px) {
    .footer-links { gap: 6px 16px; }
    .footer-link { font-size: 0.8rem; }
}
@media (max-width: 380px) {
    .footer-links { gap: 6px 12px; }
    .footer-link { font-size: 0.75rem; }
}