/* Sphere Breathing Categories - frontend v2.1.20 (asset v305) */

/* Forhindrer rubber-band / overscroll på mobil — ingen body-kollaps */
@media (max-width: 960px) {
    html, body {
        overscroll-behavior: none;
    }
    /* Låser scroll på hele siden når sbc-appen er aktiv (forside + session) */
    html.sbc-page, body.sbc-page {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }
}

.sbc-app {
    --sbc-bg: #05060b;
    --sbc-panel: rgba(12, 14, 22, 0.78);
    --sbc-border: rgba(255, 255, 255, 0.08);
    --sbc-text: #f1f4ff;
    --sbc-muted: rgba(241, 244, 255, 0.65);
    --sbc-accent: #7dd3fc;
    --sbc-danger: #ff6b81;
    --sbc-warn: #ffb86c;
    color: var(--sbc-text);
    background: #000;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    box-sizing: border-box;
}
.sbc-app *, .sbc-app *::before, .sbc-app *::after { box-sizing: border-box; }
.sbc-app[data-theme="light"] {
    --sbc-bg: #f6f8ff;
    --sbc-panel: rgba(255, 255, 255, 0.88);
    --sbc-border: rgba(20, 22, 40, 0.14);
    --sbc-text: #121625;
    --sbc-muted: rgba(18, 22, 37, 0.64);
}

/* ── Desktop: sidebar + main ── */
.sbc-shell {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
}


/* v2.0.7: midlertidig snap-lås mens JS flytter loop-kopier usynligt */
.sbc-categories.is-repositioning {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

/* ── Category cards — compact ── */
.sbc-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sbc-card {
    background: var(--sbc-panel);
    border: 1px solid var(--sbc-border);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--sbc-text);
    text-align: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
    font-family: inherit;
    flex-shrink: 0;
}
.sbc-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }

/* v2.0.81: Farvede hover-borders pr. kategori — kun på desktop med ægte hover.
   Sort baggrund + fuld farvet ramme rundt om kortet inkl. top. */
@media (hover: hover) and (min-width: 641px) {
    .sbc-card[data-special="instructions"]:hover {
        background: rgba(0, 0, 0, 0.88);
        border-color: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 16px -2px rgba(255, 255, 255, 0.35);
    }
    .sbc-card[data-category="energy"]:hover {
        background: rgba(0, 0, 0, 0.88);
        border-color: rgba(255, 179, 71, 0.85);
        box-shadow: 0 0 16px -2px rgba(255, 179, 71, 0.45);
    }
    .sbc-card[data-category="focus"]:hover {
        background: rgba(0, 0, 0, 0.88);
        border-color: rgba(72, 202, 228, 0.85);
        box-shadow: 0 0 16px -2px rgba(72, 202, 228, 0.45);
    }
    .sbc-card[data-category="calm"]:hover {
        background: rgba(0, 0, 0, 0.88);
        border-color: rgba(224, 170, 255, 0.85);
        box-shadow: 0 0 16px -2px rgba(224, 170, 255, 0.45);
    }
    .sbc-card[data-category="sleep"]:hover {
        background: rgba(0, 0, 0, 0.88);
        border-color: rgba(91, 46, 255, 0.9);
        box-shadow: 0 0 16px -2px rgba(91, 46, 255, 0.55);
    }
}
.sbc-card.is-active {
    background: rgba(0, 0, 0, 0.88);
    border-color: var(--sbc-active-color, rgba(125, 211, 252, 0.85));
    box-shadow: 0 0 18px -3px var(--sbc-active-color, rgba(125, 211, 252, 0.5));
}
.sbc-card-badge { font-size: 16px; }
.sbc-card-title { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.sbc-card-subtitle { font-size: 11px; color: var(--sbc-muted); }
.sbc-card-description { font-size: 11px; color: var(--sbc-muted); line-height: 1.45; }
.sbc-card-cta { margin-top: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sbc-accent); }

/* ── Sphere guide-card — separat hvid tilstand; kategori-kort bevarer deres design ── */
.sbc-card--sphere-guide {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.025);
}
.sbc-card--sphere-guide .sbc-card-cta { color: var(--sbc-accent); }
.sbc-card--sphere-guide .sbc-card-badge--sphere {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.96) 0 2px, transparent 2.5px),
        radial-gradient(circle at 84% 15%, rgba(255,255,255,0.90) 0 2px, transparent 2.5px),
        radial-gradient(circle at 100% 50%, rgba(255,255,255,0.84) 0 2px, transparent 2.5px),
        radial-gradient(circle at 84% 85%, rgba(255,255,255,0.90) 0 2px, transparent 2.5px),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.96) 0 2px, transparent 2.5px),
        radial-gradient(circle at 16% 85%, rgba(255,255,255,0.90) 0 2px, transparent 2.5px),
        radial-gradient(circle at 0% 50%, rgba(255,255,255,0.84) 0 2px, transparent 2.5px),
        radial-gradient(circle at 16% 15%, rgba(255,255,255,0.90) 0 2px, transparent 2.5px);
    opacity: 0.92;
}
.sbc-card--sphere-guide.is-active {
    background: rgba(255,255,255,0.065);
    border-color: rgba(255,255,255,0.96);
    box-shadow: 0 0 22px -3px rgba(255,255,255,0.70), 0 0 60px -18px rgba(255,255,255,0.38);
}
.sbc-card--sphere-guide.is-active .sbc-card-title,
.sbc-card--sphere-guide.is-active .sbc-card-subtitle { color: rgba(255,255,255,0.98); }
.sbc-card--sphere-guide.is-active .sbc-card-cta { color: var(--sbc-accent); }

.sbc-stage { display: flex; flex-direction: column; gap: 18px; }

/* ── Karrusel-prikker ── */
.sbc-carousel-dots {
    display: none; /* skjult på desktop */
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
}
.sbc-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}
.sbc-carousel-dot.is-active {
    background: rgba(255, 255, 255, 0.80);
    transform: scale(1.25);
}

/* ── Velkommen/Sphere-start: erstatter topkarrusellen uden at flytte kuglen ── */
.sbc-welcome-greeting {
    display: none;
    width: 100%;
    min-height: 98px;
    padding: 16px 22px 14px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: var(--sbc-text);
}
.sbc-welcome-kicker {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.46);
    margin-bottom: 8px;
}
.sbc-welcome-title {
    font-size: clamp(24px, 4.6vw, 34px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.96);
}
.sbc-welcome-subtitle {
    margin-top: 18px;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 300;
    color: rgba(255,255,255,0.56);
}
.sbc-shell { position: relative; }
.sbc-app.is-welcome-start .sbc-categories,
.sbc-app.is-welcome-start .sbc-carousel-dots {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* v2.0.76: Quick Guide init — opacity:0 (ikke visibility:hidden) så scrollLeft virker korrekt.
   Elementet har fuld layout, scroll kan sættes pålideligt i RAF. */
.sbc-app.is-quick-guide-init .sbc-categories,
.sbc-app.is-quick-guide-init .sbc-carousel-dots {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}
/* v2.0.78: Sphere/guide-kortet fjernes fra flex-layoutet under Quick Guide.
   display:none = kortet er ude af flow → Energy er første kort → ingen Sphere synlig.
   Scroll-target beregnes EFTER dette er aktiv, så positionerne er korrekte. */
.sbc-app.is-quick-guide .sbc-card[data-special="instructions"] {
    display: none !important;
}
.sbc-app.is-welcome-start .sbc-welcome-greeting {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sbc-welcome-top-height, 120px);
    min-height: 0;
    z-index: 3;
}

/* ── Canvas wrap ──
   ╔══════════════════════════════════════════════════════╗
   ║  KUGLE-STØRRELSE — MÅ IKKE ÆNDRES                   ║
   ║  height / min-height / max-height er fastlåst       ║
   ║  til v1.7.52-reference. Ændr IKKE disse værdier     ║
   ║  uden eksplicit godkendelse.                        ║
   ╚══════════════════════════════════════════════════════╝ */
.sbc-canvas-wrap {
    position: relative;
    width: 100%;
    height: 70vh;        /* LÅST — ref v1.7.52 */
    min-height: 520px;   /* LÅST — ref v1.7.52 */
    max-height: 820px;   /* LÅST — ref v1.7.52 */
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--sbc-border);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: min-height 0.4s ease, border-radius 0.4s ease;
}
.sbc-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; pointer-events: none;
}

/* ── Phase text ── */
.sbc-phase {
    position: absolute;
    bottom: 32px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.95);
    font-size: clamp(1rem, 3vw, 1.4rem);
    letter-spacing: 0.4em;
    font-weight: 300; text-transform: uppercase;
    z-index: 4; pointer-events: none;
    white-space: nowrap;
}

/* ── Session timer (under sphere, hidden by default) ── */
.sbc-session-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
}
.sbc-session-timer[hidden] { display: none; }
.sbc-timer-time {
    font-size: 38px;
    font-weight: 200;
    letter-spacing: 0.06em;
    color: var(--sbc-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sbc-timer-label {
    font-size: 11px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sbc-muted);
}

/* ── Info panel ── */
.sbc-panel {
    background: var(--sbc-panel);
    border: 1px solid var(--sbc-border);
    border-radius: 20px;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 16px;
    align-items: center;
    text-align: center;
    transition: opacity 0.3s ease;
}
.sbc-selected-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.sbc-selected-title { font-size: 20px; font-weight: 600; }
.sbc-selected-description { font-size: 14px; color: var(--sbc-muted); max-width: 420px; line-height: 1.55; }
.sbc-program-strip { display: flex; gap: 12px; justify-content: center; align-items: stretch; }
.sbc-program-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--sbc-border);
    border-radius: 14px; padding: 10px 14px;
    display: flex; flex-direction: column;
    justify-content: space-between; /* label øverst, værdi/knapper nederst */
    flex: 1;           /* begge bokse samme bredde */
    min-width: 120px;
    gap: 10px;         /* luft mellem label og værdi */
    text-align: center;
}
.sbc-program-box-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sbc-muted);
    min-height: 18px; /* fast højde — label i begge bokse på samme linje */
    display: flex; align-items: center; justify-content: center;
}
.sbc-program-box-value { font-size: 16px; font-weight: 600; color: var(--sbc-text); position: relative; top: -4px; }

/* ── Varighed-valgmuligheder ── */
.sbc-duration-options { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center; margin-top: 6px; }
.sbc-dur-btn {
    appearance: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--sbc-border);
    border-radius: 8px;
    color: var(--sbc-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    min-width: 60px;     /* bred nok til "5 min" på én linje */
    white-space: nowrap; /* tal og bogstaver aldrig adskilt */
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sbc-dur-btn.is-active {
    background: rgba(125,211,252,0.18);
    border-color: var(--sbc-active-color, rgba(125,211,252,0.8));
    color: var(--sbc-text);
}
.sbc-dur-btn:hover:not(.is-active) { border-color: rgba(255,255,255,0.2); color: var(--sbc-text); }

.sbc-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sbc-btn {
    appearance: none;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.06);
    color: var(--sbc-text);
    padding: 12px 20px; border-radius: 14px;
    font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
    cursor: pointer; font-family: inherit;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.sbc-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.2); }
.sbc-btn-primary { background: rgba(125, 211, 252, 0.18); border-color: rgba(125, 211, 252, 0.5); }
.sbc-btn-warn { background: rgba(255, 184, 108, 0.14); border-color: rgba(255, 184, 108, 0.4); }
.sbc-btn-danger { background: rgba(255, 107, 129, 0.14); border-color: rgba(255, 107, 129, 0.4); }
.sbc-btn-muted { background: rgba(255,255,255,0.04); }

/* ── Overlays ── */
.sbc-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex; align-items: center; justify-content: center;
    z-index: 20;
}
.sbc-overlay[hidden] { display: none; }
.sbc-countdown { font-size: 96px; font-weight: 200; color: #fff; font-family: 'Inter', sans-serif; }
.sbc-summary-card {
    background: rgba(10, 12, 22, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px; padding: 28px 32px;
    text-align: center; max-width: 360px; color: #fff;
}
.sbc-summary-card h3 { margin: 0 0 8px; font-weight: 500; letter-spacing: 0.1em; }
.sbc-completion-message {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: pre-line;
}
.sbc-summary-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Bekræftelseskort ── */
.sbc-confirm-card {
    background: rgba(10, 12, 22, 0.95);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 28px 32px;
    text-align: center;
    max-width: 320px;
    color: #fff;
}
.sbc-confirm-text {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 22px;
    color: rgba(255,255,255,0.9);
}
.sbc-confirm-buttons { display: flex; gap: 12px; justify-content: center; }
.sbc-empty { padding: 32px; text-align: center; color: var(--sbc-muted); }

/* ═══════════════════════════════════
   SPHERE GUIDE CARD STATE
   ═══════════════════════════════════ */
.sbc-app.is-info-mode .sbc-program-strip,
.sbc-app.is-info-mode .sbc-session-timer { display: none; }
.sbc-app.is-info-mode .sbc-selected-copy { margin-bottom: 6px; }
.sbc-app.is-info-mode .sbc-phase {
    color: rgba(255,255,255,0.96);
    text-shadow: 0 0 18px rgba(255,255,255,0.10);
}
.sbc-btn-guide {
    /* Matcher START ÅNDEDRÆT-knappens blå/turkise farvefamilie */
    background: rgba(125, 211, 252, 0.18);
    border-color: rgba(125, 211, 252, 0.5);
    color: var(--sbc-text);
    box-shadow: 0 0 24px rgba(125, 211, 252, 0.10);
}
.sbc-btn-guide:hover {
    border-color: rgba(125, 211, 252, 0.85);
    background: rgba(125, 211, 252, 0.23);
    box-shadow: 0 0 30px rgba(125, 211, 252, 0.18);
}

/* ═══════════════════════════════════
   SESSION MODE — immersive sphere
   ═══════════════════════════════════ */
.sbc-app.is-session .sbc-categories { display: none; }
.sbc-app.is-session .sbc-selected-copy,
.sbc-app.is-session .sbc-program-strip { display: none; }

/* Full-height chain: app → shell → stage → canvas-wrap all stretch to viewport */
.sbc-app.is-session {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
.sbc-app.is-session .sbc-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    padding: 0;
}
.sbc-app.is-session .sbc-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Canvas fills all remaining space — sphere drawn at its center → visually centered */
.sbc-app.is-session .sbc-canvas-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    border: none;
    margin-top: 100px; /* sphere 100px from top */
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  SESSION PANEL — TID + KNAPPER — MÅ IKKE ÆNDRES        ║
   ║  Timer sidder inde i .sbc-panel, direkte over knapper  ║
   ║  gap: 20px mellem tid og knapper — LÅST ref v1.7.54    ║
   ║  padding-bottom bruger safe-area — LÅST ref v1.7.54    ║
   ╚══════════════════════════════════════════════════════════╝ */
.sbc-app.is-session .sbc-panel {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0 20px max(60px, calc(env(safe-area-inset-bottom, 34px) + 40px)); /* LÅST */
    align-items: center;
    gap: 20px; /* LÅST — 20px mellem tid og knapper, ref v1.7.54 */
}
/* timer sidder nu inde i .sbc-panel — ingen separat placering nødvendig */

/* ── Instruktionsboks i session: teksten er fast oplyst; KUN rammen ånder ── */
.sbc-app.is-session .sbc-timer-label {
    --sbc-session-frame-alpha: 0.52;
    --sbc-session-frame-glow: 0.12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;          /* Fast bredde — styret af "INDÅND", kun tekst skifter */
    border: 2px solid rgba(var(--sbc-active-rgb, 125, 211, 252), var(--sbc-session-frame-alpha));
    border-radius: 10px;
    padding: 6px 20px;
    font-size: 20px;           /* LÅST — ref v1.7.56 */
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.96);
    opacity: 1 !important;     /* teksten er altid oplyst */
    text-shadow: 0 0 8px rgba(255,255,255,0.42);
    box-shadow:
        0 0 10px rgba(var(--sbc-active-rgb, 125, 211, 252), var(--sbc-session-frame-glow)),
        inset 0 0 8px rgba(var(--sbc-active-rgb, 125, 211, 252), calc(var(--sbc-session-frame-glow) * 0.55));
    background: transparent;
    margin-top: 25px;          /* LÅST — ref v1.7.58 */
    margin-bottom: 50px;       /* LÅST — ref v1.7.56 */
    transition: text-shadow 0.25s ease;
}
.sbc-app.is-session .sbc-phase { display: none; }
.sbc-app.is-demo-clean-switch:not(.is-session) .sbc-shell { opacity: 0; }
.sbc-app.is-session .sbc-buttons { justify-content: center; gap: 12px; }

/* ═══════════════════════
   RESPONSIVE — tablet + phone
   ═══════════════════════ */
@media (max-width: 960px) {
    /* Single-column layout, minimal spacing */
    .sbc-shell {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 0 0;
    }
    .sbc-stage { gap: 0; }

    /* Snap carousel */
    .sbc-categories {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 calc(50% - 100px) 8px;
        gap: 10px;
        scrollbar-width: none;
    }
    .sbc-categories::-webkit-scrollbar { display: none; }
    .sbc-card {
        min-width: 170px; max-width: 190px;
        scroll-snap-align: center;
        opacity: 0.5;
        transform: scale(0.95);
        transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
    }
    .sbc-card.is-active { opacity: 1; transform: scale(1); }
    .sbc-card-description { display: none; }

    /* Canvas: no frame, no border, transparent — sphere floats on page bg */
    /* ╔══════════════════════════════════════════════════════╗
       ║  KUGLE-STØRRELSE MOBIL (≤960px) — MÅ IKKE ÆNDRES   ║
       ╚══════════════════════════════════════════════════════╝ */
    .sbc-canvas-wrap {
        height: 42vh;        /* LÅST — ref v1.7.52 */
        min-height: 220px;   /* LÅST — ref v1.7.52 */
        max-height: none;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /* Karrusel-prikker synlige på mobil */
    .sbc-carousel-dots { display: flex; }

    /* Phase text 25px further down */
    .sbc-phase { bottom: 7px; }

    /* Transparent panel — sort baggrund */
    .sbc-panel {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 14px 16px 18px;
        gap: 10px;
        margin-top: 50px;
    }
    .sbc-selected-title { font-size: 20px; }
    .sbc-selected-description { font-size: 13px; }
    /* Mere luft: subtitle → åndedræt/varighed — mobil */
    .sbc-program-strip { gap: 8px; margin-top: 14px; }
    .sbc-program-box { min-width: 110px; padding: 8px 12px; }
    .sbc-program-box-value { font-size: 15px; }
    /* Mere luft: åndedræt/varighed → START-knap — mobil */
    .sbc-buttons { margin-top: 14px; }
    .sbc-btn { padding: 11px 18px; font-size: 12px; }
}

/* ═══════════════════════
   RESPONSIVE — phone
   ═══════════════════════ */
@media (max-width: 640px) {
    .sbc-shell { padding: 6px 0 0; }
    .sbc-categories {
        padding: 0 calc(50% - 75px) 6px;
        gap: 8px;
    }
    .sbc-card {
        min-width: 140px; max-width: 160px;
        padding: 10px 12px; border-radius: 12px;
    }
    .sbc-card-badge { font-size: 14px; }
    .sbc-card-title { font-size: 13px; }
    .sbc-card-subtitle { font-size: 10px; }
    .sbc-card-cta { font-size: 9px; }
    /* KUGLE-STØRRELSE PHONE (≤640px) — LÅST ref v1.7.52 */
    .sbc-canvas-wrap { height: 40vh; min-height: 200px; } /* LÅST */
    .sbc-panel { background: transparent; border: none; padding: 12px 14px 16px; gap: 8px; }
    .sbc-selected-title { font-size: 18px; }
    .sbc-selected-description { font-size: 12px; }
    .sbc-program-box { min-width: 100px; }
    /* SESSION PANEL PHONE — LÅST ref v1.7.54 */
    .sbc-app.is-session .sbc-panel { padding: 0 16px max(60px, calc(env(safe-area-inset-bottom, 34px) + 40px)); gap: 20px; } /* LÅST */
    .sbc-timer-time { font-size: 32px; }
}

/* ═══════════════════════════════════
   DESKTOP (>960px) — samme layout som mobil
   Mobil-CSS (≤960px) ovenfor forbliver uberørt
   ═══════════════════════════════════ */
@media (min-width: 961px) {
    /* Enkelt kolonne */
    .sbc-shell {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 0;
        padding: 8px 0 0;
    }
    .sbc-stage { gap: 0; }

    /* Horisontal snap-karrusel */
    .sbc-categories {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 6px calc(50% - 100px) 8px; /* v2.0.81: 6px top så glow ikke klippes af overflow-y:hidden */
        gap: 10px;
        scrollbar-width: none;
    }
    .sbc-categories::-webkit-scrollbar { display: none; }
    .sbc-card {
        min-width: 175px;
        max-width: 195px;
        scroll-snap-align: center;
        opacity: 0.5;
        transform: scale(0.95);
    }
    .sbc-card.is-active { opacity: 1; transform: scale(1); }
    .sbc-card-description { display: none; }

    /* Rammeløs kugle */
    /* ╔══════════════════════════════════════════════════════╗
       ║  KUGLE-STØRRELSE DESKTOP (≥961px)                  ║
       ║  Gulv: 48vh (ref v1.7.52)                          ║
       ║  Loft: 440px (v2.1.15) — returneret til v2.1.12 efter ║
       ║  brugerens afklaring af "halv skipknap" = button-   ║
       ║  styling, IKKE layout cut-off. Sphere-margin ift.   ║
       ║  perspective: ~19px (clean), ~5px (alive).          ║
       ╚══════════════════════════════════════════════════════╝ */
    .sbc-canvas-wrap {
        height: min(48vh, 440px); /* gulv: 48vh — loft: 440px, ref v2.1.15 */
        min-height: 280px;        /* LÅST — ref v1.7.52 */
        max-height: 440px;        /* v2.1.15 */
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /* Kompakt centreret panel */
    .sbc-panel {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 14px 20px 20px;
        gap: 10px;
    }
    .sbc-selected-title { font-size: 20px; }

    /* Boks uden grå baggrund — kun desktop */
    .sbc-program-box {
        background: transparent;
        border: 1px solid var(--sbc-border);
        border-radius: 14px;
        min-width: 110px;
        padding: 8px 16px;
    }

    /* Mere luft: subtitle → åndedræt/varighed */
    .sbc-program-strip { gap: 8px; margin-top: 14px; }

    /* Mere luft: åndedræt/varighed → START-knap */
    .sbc-buttons { margin-top: 14px; }

    .sbc-btn { padding: 12px 20px; }
}

/* ═══════════════════════════════════════
   INTRO-SIDE
   ═══════════════════════════════════════ */

/* CSS-variabler for de 4 farve-aspekter — sættes af JS */
.sbc-intro {
    --intro-sphere: #d2af37;
    --intro-cycles: #d2af37;
    --intro-tip:    #d2af37;
    --intro-button: #d2af37;
}

/* Overlay der dækker hele .sbc-app */
.sbc-intro {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #f1f4ff;
    /* Smooth ud-transition */
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.sbc-intro::-webkit-scrollbar { display: none; }

/* Skjult tilstand — JS tilføjer klassen */
.sbc-intro.is-leaving {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
}
.sbc-intro.is-gone {
    display: none;
}

/* Pulserende baggrundskugle-glød */
.sbc-intro-bg {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -62%);
    width: min(200px, 50vw);
    height: min(200px, 50vw);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 40% 40%,
        color-mix(in srgb, var(--intro-sphere) 45%, transparent) 0%,
        color-mix(in srgb, var(--intro-sphere) 20%, transparent) 50%,
        transparent 70%);
    animation: sbc-intro-pulse 8s ease-in-out infinite;
    transition: background 0.6s ease;
    z-index: 0;
}
@keyframes sbc-intro-pulse {
    0%, 100% { transform: translate(-50%, -62%) scale(1);    opacity: 0.85; }
    50%       { transform: translate(-50%, -62%) scale(1.07); opacity: 1;    }
}

/* Indholdscontainer */
.sbc-intro-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 32px 48px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    gap: 0;
}

/* Lille titel-label øverst — elementet renderes ikke længere i HTML */
.sbc-intro-title {
    font-size: 12px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(241,244,255,0.40);
    margin-bottom: 44px;
}

/* Stor overskrift */
.sbc-intro-headline {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.35;
    color: rgba(241,244,255,0.92);
    margin: 0 0 66px; /* underoverskrift 50px ned */
    letter-spacing: 0.01em;
}

/* Underoverskrift */
.sbc-intro-sub {
    font-size: 15px;
    font-weight: 300;
    color: rgba(241,244,255,0.50);
    line-height: 1.65;
    max-width: 340px;
    margin: 0 0 403px; /* cirkler 100px ned */
}

/* Cyklus-illustration */
.sbc-intro-cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 215px;
    width: 100%;
}
.sbc-intro-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    flex: 1;
}
.sbc-intro-step-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--intro-cycles) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--intro-cycles) 90%, transparent);
    transition: border-color 0.6s ease, color 0.6s ease;
}
.sbc-intro-step-label {
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(241,244,255,0.38);
}
.sbc-intro-arrow {
    font-size: 14px;
    color: rgba(241,244,255,0.14);
    flex-shrink: 0;
    margin: 0 2px;
    padding-bottom: 20px;
}

/* Tip-boks */
.sbc-intro-tip {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 45px;
    text-align: left;
    width: 100%;
}
.sbc-intro-tip-label {
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--intro-tip) 75%, transparent);
    margin-bottom: 9px;
    transition: color 0.6s ease;
}
.sbc-intro-tip-text {
    font-size: 14px;
    font-weight: 300;
    color: rgba(241,244,255,0.60);
    line-height: 1.6;
}

/* Start-knap */
.sbc-intro-start {
    appearance: none;
    border: 1.5px solid color-mix(in srgb, var(--intro-button) 65%, transparent);
    background: color-mix(in srgb, var(--intro-button) 14%, transparent);
    color: color-mix(in srgb, var(--intro-button) 95%, #fff);
    padding: 15px 46px;
    border-radius: 50px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sbc-intro-start:hover {
    background: color-mix(in srgb, var(--intro-button) 24%, transparent);
    border-color: color-mix(in srgb, var(--intro-button) 95%, transparent);
    transform: translateY(-1px);
}


/* ── Tablet-tilpasning (641px–960px) — retter store margins fra desktop-baseline ── */
@media (min-width: 641px) and (max-width: 960px) {
    .sbc-intro-sub   { margin-bottom: 48px; }
    .sbc-intro-cycle { margin-bottom: 48px; }
}

/* ── Mobil-tilpasning ── */
@media (max-width: 640px) {
    .sbc-intro-wrap { padding: 25px 20px 40px; }
    .sbc-intro-headline { font-size: 24px; }
    .sbc-intro-sub { font-size: 14px; margin-bottom: 40px; }
    .sbc-intro-step-icon { width: 55px; height: 55px; font-size: 12px; }
    .sbc-intro-step-label { font-size: 12px; }

    /* ══ FROSSEN: Cirkler — fast midt i viewport ══ */
    .sbc-intro-cycle {
        position: fixed;
        top: calc(50% - 25px);
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        width: calc(100% - 56px);
        max-width: 384px;
        margin-bottom: 0;
    }

    /* TIP: 215px under sphere-bund (50% + 32.5vw = centrum + halvdelen af 65vw) */
    .sbc-intro-tip {
        position: fixed;
        top: calc(50% + 32.5vw + 0px);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 56px);
        max-width: 384px;
        z-index: 3;
        margin-bottom: 0;
    }

    /* KOM I GANG: 45px under TIP (~120px tip-højde + 45px) */
    .sbc-intro-start {
        position: fixed;
        top: calc(50% + 32.5vw + 165px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        width: 240px;
    }

    /* ══ FROSSEN: Sphere — fast centreret midt i viewport ══ */
    .sbc-intro-bg {
        width: 65vw;
        height: 65vw;
        top: calc(50% - 25px);
        transform: translate(-50%, -50%);
    }
}

/* Mobil: sphere-animation bruger -50% så den matcher cirklernes center */
@media (max-width: 640px) {
    @keyframes sbc-intro-pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
        50%       { transform: translate(-50%, -50%) scale(1.07); opacity: 1;    }
    }
}

/* .sbc-app skal have position:relative for at intro-overlay virker */
.sbc-app { position: relative; }

/* ═══════════════════════════════════════
   v2.0.2 — POSITION LOCK
   Session-siden bevarer samme sphere-placering som forsiden.
   Kategorirækken skjules visuelt, men dens plads bevares, så canvas/sphere ikke hopper.
   ═══════════════════════════════════════ */
.sbc-app.is-session {
    display: block;
    min-height: 0;
}
.sbc-app.is-session .sbc-categories {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.sbc-app.is-session .sbc-carousel-dots {
    visibility: hidden;
    pointer-events: none;
}
.sbc-app.is-session .sbc-shell {
    flex: initial;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    padding: 8px 0 0;
}
.sbc-app.is-session .sbc-stage {
    flex: initial;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.sbc-app.is-session .sbc-canvas-wrap {
    flex: none;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    max-height: 820px;
    margin-top: 0;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--sbc-border);
}

@media (max-width: 960px) {
    .sbc-app.is-session .sbc-shell {
        padding: 8px 0 0;
    }
    .sbc-app.is-session .sbc-canvas-wrap {
        height: 42vh;
        min-height: 220px;
        max-height: none;
        background: transparent;
        border: none;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .sbc-app.is-session .sbc-shell {
        padding: 6px 0 0;
    }
    .sbc-app.is-session .sbc-canvas-wrap {
        height: 40vh;
        min-height: 200px;
    }
}

@media (min-width: 961px) {
    .sbc-app.is-session .sbc-shell {
        padding: 8px 0 0;
    }
    /* v2.1.07 → v2.1.15: Desktop session — cap canvas-højde synkront med den generelle
       regel ovenfor. v2.1.15 returnerer loftet til 440px (var: 350) efter brugerens
       afklaring af at "halv" var button-styling, ikke layout-cut-off. */
    .sbc-app.is-session .sbc-canvas-wrap {
        height: min(48vh, 440px); /* gulv: 48vh — loft: 440px, ref v2.1.15 */
        min-height: 280px;
        max-height: 440px; /* v2.1.15 */
        background: transparent;
        border: none;
        border-radius: 0;
    }
}


/* ═══════════════════════════════════════
   v2.0.11 — INSTRUKTIONSSIDE, TOP CLEAN
   ═══════════════════════════════════════ */
.sbc-instructions {
    position: absolute;
    inset: 0;
    z-index: 180;
    background: #000;
    color: #f1f4ff;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sbc-instructions::-webkit-scrollbar { display: none; }
.sbc-instructions[hidden] { display: none; }
.sbc-instructions-inner {
    width: min(100%, 480px);
    min-height: 100svh;
    margin: 0 auto;
    padding: 0 24px max(42px, calc(env(safe-area-inset-bottom, 0px) + 28px));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.sbc-instructions-top,
.sbc-instructions-back,
.sbc-instructions-info {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Sphere/hero øverst er fjernet, og top-ikoner er skjult i v2.0.11.
   Reglen her skjuler gamle cached markup, hvis den skulle findes. */
.sbc-instructions-hero,
.sbc-instructions-sphere {
    display: none !important;
}
.sbc-instructions-title {
    margin: 0;
    font-size: clamp(34px, 8vw, 46px);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.03;
    text-align: center;
    color: rgba(255,255,255,0.96);
}
.sbc-instructions-subtitle {
    margin: 12px 0 24px;
    max-width: 390px;
    text-align: center;
    font-size: 18px;
    line-height: 1.45;
    color: rgba(241,244,255,0.58);
    font-weight: 300;
}
.sbc-instructions-steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sbc-instruction-card {
    width: 100%;
    min-height: 86px;
    border-radius: 17px;
    border: 1px solid rgba(0, 224, 255, 0.45);
    background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 0 20px rgba(0, 224, 255, 0.045);
    padding: 13px 16px 13px 15px;
    display: grid;
    grid-template-columns: 40px 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.sbc-instruction-card--large { min-height: 108px; }
.sbc-instruction-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(0, 224, 255, 0.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 0 15px rgba(0,224,255,0.16);
}
.sbc-instruction-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(125,211,252,0.20);
    background: rgba(255,255,255,0.026);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 14px rgba(125,211,252,0.035), 0 0 10px rgba(0,224,255,0.045);
}
.sbc-icon-grid::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid rgba(125,211,252,0.95);
    border-radius: 2px;
    box-shadow: 14px 0 0 0 rgba(125,211,252,0.95), 0 14px 0 0 rgba(125,211,252,0.95), 14px 14px 0 0 rgba(125,211,252,0.95);
    transform: translate(-7px, -7px);
}
.sbc-icon-wave::before {
    content: '∿∿';
    color: rgba(125,211,252,0.98);
    font-size: 29px;
    line-height: 1;
    letter-spacing: -0.16em;
    transform: translate(-2px, -1px);
}
.sbc-icon-clock::before {
    content: '';
    width: 26px;
    height: 26px;
    border: 3px solid rgba(125,211,252,0.95);
    border-radius: 50%;
}
.sbc-icon-clock::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 14px;
    border-radius: 999px;
    background: rgba(125,211,252,0.95);
    transform: translate(2px, -4px) rotate(0deg);
    transform-origin: bottom center;
    box-shadow: 6px 10px 0 -1px rgba(125,211,252,0.95);
}
.sbc-icon-play::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 21px solid rgba(125,211,252,0.95);
    margin-left: 5px;
}
.sbc-icon-breathe::before {
    content: '';
    width: 29px;
    height: 29px;
    border-radius: 50%;
    border: 4px dotted rgba(125,211,252,0.95);
    animation: sbc-breathe-icon 4s ease-in-out infinite;
}
@keyframes sbc-breathe-icon {
    0%, 100% { transform: scale(.82); opacity: .62; }
    50% { transform: scale(1.08); opacity: 1; }
}
.sbc-instruction-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sbc-instruction-copy strong {
    font-size: 20px;
    line-height: 1.12;
    color: rgba(255,255,255,0.96);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.sbc-instruction-copy em {
    font-style: normal;
    font-size: 14px;
    line-height: 1.34;
    color: rgba(241,244,255,0.56);
    font-weight: 300;
}
.sbc-instruction-card--large .sbc-instruction-copy em { font-size: 12.8px; }
.sbc-instructions-primary {
    appearance: none;
    width: min(100%, 310px);
    margin: 26px 0 18px;
    border-radius: 18px;
    border: 1.5px solid rgba(0,224,255,0.86);
    background: linear-gradient(135deg, rgba(125,211,252,0.18), rgba(125,211,252,0.08));
    color: rgba(255,255,255,0.92);
    box-shadow: 0 0 34px rgba(0,224,255,0.20), inset 0 0 26px rgba(255,255,255,0.03);
    padding: 22px 24px;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
}
.sbc-instructions-skip {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(125,211,252,0.66);
    font-family: inherit;
    font-size: 15px;
    padding: 6px 12px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .sbc-instructions-inner {
        width: 100%;
        padding-top: 0;
        padding-left: 24px;
        padding-right: 24px;
    }
    .sbc-instructions-title { font-size: 37px; }
    .sbc-instructions-subtitle { font-size: 16px; margin-bottom: 22px; }
    .sbc-instruction-card {
        min-height: 80px;
        grid-template-columns: 36px 50px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 14px 12px 13px;
        border-radius: 15px;
    }
    .sbc-instruction-card--large { min-height: 108px; }
    .sbc-instruction-number { width: 28px; height: 28px; font-size: 14px; }
    .sbc-instruction-icon { width: 46px; height: 46px; }
    .sbc-instruction-copy strong { font-size: 18.5px; }
    .sbc-instruction-copy em { font-size: 13px; }
    .sbc-instruction-card--large .sbc-instruction-copy em { font-size: 12px; line-height: 1.30; }
    .sbc-instructions-primary { margin-top: 24px; }
}

@media (max-width: 390px) {
    .sbc-instructions-inner { padding-top: 0; padding-left: 18px; padding-right: 18px; }
    .sbc-instructions-title { font-size: 34px; }
    .sbc-instructions-subtitle { font-size: 15px; }
    .sbc-instruction-card {
        grid-template-columns: 32px 44px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }
    .sbc-instruction-number { width: 28px; height: 28px; font-size: 14px; }
    .sbc-instruction-icon { width: 44px; height: 44px; }
    .sbc-instruction-copy strong { font-size: 17px; }
    .sbc-instruction-copy em { font-size: 12.2px; }
    .sbc-instruction-card--large .sbc-instruction-copy em { font-size: 11.4px; }
}


/* ═══════════════════════════════════════════════════════
   CARD DEMO OVERLAY — v2.0.15
   Spotlight + callout-boble til live-demo af instruktionskort
   ═══════════════════════════════════════════════════════ */

/* Blokerer al interaktion med appen under demo */
.sbc-demo-blocker {
    position: fixed;
    inset: 0;
    z-index: 498;
    background: transparent;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: all;
}
.sbc-demo-blocker.is-visible { opacity: 1; }

/* Spotlight — kasse der fremhæver et UI-element */
.sbc-demo-spotlight {
    position: fixed;
    z-index: 499;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.28s ease, left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease;
    pointer-events: none;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.76);
}
.sbc-demo-spotlight.is-visible { opacity: 1; }

/* v2.0.81: "Følg kuglen"-demo (canvas spotlight) uden cyan ring — kun mørkt overlay */
.sbc-demo-spotlight--no-ring {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.76);
}

/* v2.0.90: Mobil — fjern cyan ring fra ALLE demo-spotlights */
@media (max-width: 960px) {
    .sbc-demo-spotlight {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.76);
    }
}

/* v2.0.91: Mobil — callout bredere til lang tekst med punktopstilling */
@media (max-width: 960px) {
    .sbc-demo-callout {
        max-width: calc(100vw - 32px);
    }
    .sbc-demo-callout-text strong {
        color: rgba(255, 255, 255, 0.9);
    }
}

/* Callout-boble */
.sbc-demo-callout {
    position: fixed;
    z-index: 510;
    max-width: 300px;
    min-width: 220px;
    background: rgba(10, 16, 38, 0.96);
    border: 1px solid rgba(0, 224, 255, 0.28);
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: all;
}
.sbc-demo-callout.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* v2.1.19 — Quick Guide progress i demo-callout */
.sbc-demo-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -1px 0 10px;
    padding: 0 2px;
}
.sbc-demo-progress[hidden] {
    display: none;
}
.sbc-demo-progress-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(125,211,252,0.74);
    white-space: nowrap;
}
.sbc-demo-progress-dots {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.sbc-demo-progress-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    box-shadow: none;
}
.sbc-demo-progress-dots i.is-active {
    background: rgba(125,211,252,0.95);
    box-shadow: 0 0 10px rgba(0,224,255,0.32);
}

/* v2.1.18 — Videre-knap i Quick Guide-callout (erstatter ×, holder designet kompakt) */
.sbc-demo-callout-close {
    position: static;
    width: fit-content;
    min-height: 32px;
    margin: 14px 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(0,224,255,0.26);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sbc-demo-callout-close:hover {
    background: rgba(0, 224, 255, 0.18);
    border-color: rgba(0,224,255,0.48);
    color: #fff;
    transform: translateY(-1px);
}
.sbc-demo-callout-close span {
    font-size: 13px;
    line-height: 1;
    transform: translateY(-0.5px);
}

/* Pil */
.sbc-demo-arrow {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
.sbc-demo-arrow--up {
    top: -9px;
    border-bottom: 9px solid rgba(0, 224, 255, 0.32);
}
.sbc-demo-arrow--up::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(10, 16, 38, 0.96);
}
.sbc-demo-arrow--down {
    bottom: -9px;
    border-top: 9px solid rgba(0, 224, 255, 0.32);
}
.sbc-demo-arrow--down::after {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(10, 16, 38, 0.96);
}

/* Titel + tekst */
.sbc-demo-callout-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
    padding-right: 0;
}
.sbc-demo-callout-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(200, 215, 255, 0.72);
    font-weight: 300;
}

/* Instruktionskort: cursor pointer + hover glow */
.sbc-instructions .sbc-instruction-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.sbc-instructions .sbc-instruction-card:hover {
    border-color: rgba(0, 224, 255, 0.75);
    box-shadow: 0 0 24px rgba(0, 224, 255, 0.08);
}

/* Mobil — LÅST v2.0.65, godkendt af bruger. Ændr ikke uden eksplicit godkendelse. */
@media (max-width: 640px) {
    .sbc-demo-callout { max-width: calc(100vw - 32px); padding: 14px 16px 12px; }
}

/* ═══════════════════════════════════════════════════════
   v2.0.18/2.0.20 — INDLEJREDE DEMO-FELTER PÅ GUIDESIDEN
   Hvert trin får mini-hands-on demo + forklarende tekstboks.
   ═══════════════════════════════════════════════════════ */
.sbc-instructions-steps {
    gap: 14px;
}
.sbc-instruction-card {
    min-height: 0;
    display: block;
    padding: 14px 15px 15px;
}
.sbc-instruction-card--large {
    min-height: 0;
}
.sbc-instruction-head {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.sbc-instruction-demo {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(125, 211, 252, 0.12);
    display: grid;
    grid-template-columns: minmax(132px, 0.92fr) minmax(0, 1.08fr);
    gap: 10px;
    align-items: stretch;
}
.sbc-demo-visual {
    appearance: none;
    border: 1px solid rgba(0, 224, 255, 0.30);
    background: radial-gradient(circle at 50% 0%, rgba(0,224,255,0.11), rgba(255,255,255,0.025) 48%, rgba(255,255,255,0.01));
    border-radius: 15px;
    min-height: 104px;
    padding: 10px;
    color: rgba(255,255,255,0.86);
    font-family: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(0,224,255,0.035), 0 0 18px rgba(0,224,255,0.035);
}
.sbc-demo-visual::after {
    content: 'Tryk';
    position: absolute;
    right: 8px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0,224,255,0.10);
    border: 1px solid rgba(0,224,255,0.18);
    color: rgba(125,211,252,0.78);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.sbc-demo-visual:hover,
.sbc-demo-live-btn:hover {
    border-color: rgba(0, 224, 255, 0.66);
    box-shadow: 0 0 24px rgba(0,224,255,0.10), inset 0 0 18px rgba(0,224,255,0.05);
}
.sbc-demo-textbox {
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
}
.sbc-demo-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,224,255,0.24);
    color: rgba(125,211,252,0.86);
    background: rgba(0,224,255,0.07);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.sbc-demo-textbox p {
    margin: 0;
    color: rgba(241,244,255,0.62);
    font-size: 12.2px;
    line-height: 1.43;
    font-weight: 300;
}
.sbc-demo-color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 8px;
}
.sbc-demo-color-legend span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sbc-demo-legend-color) 42%, transparent);
    background: color-mix(in srgb, var(--sbc-demo-legend-color) 9%, transparent);
    color: color-mix(in srgb, var(--sbc-demo-legend-color) 78%, white);
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .45;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.sbc-demo-color-legend span.is-active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--sbc-demo-legend-color) 78%, white);
    background: color-mix(in srgb, var(--sbc-demo-legend-color) 18%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--sbc-demo-legend-color) 28%, transparent);
    transform: translateY(-1px);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .sbc-demo-color-legend span {
        border-color: rgba(255,255,255,.14);
        background: rgba(255,255,255,.04);
        color: var(--sbc-demo-legend-color);
    }
    .sbc-demo-color-legend span.is-active {
        border-color: var(--sbc-demo-legend-color);
        background: rgba(255,255,255,.07);
        box-shadow: 0 0 14px rgba(255,255,255,.08);
    }
}
.sbc-demo-live-btn {
    appearance: none;
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,224,255,0.30);
    background: rgba(0,224,255,0.075);
    color: rgba(255,255,255,0.86);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.sbc-demo-visual--choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    align-content: center;
}
.sbc-demo-visual--choice span {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
    padding: 8px 5px;
    text-align: center;
    font-size: 10.5px;
    line-height: 1;
    color: rgba(255,255,255,0.64);
}
.sbc-demo-visual--choice {
    cursor: default;
}
.sbc-demo-visual--choice::after {
    content: none;
}
.sbc-demo-visual--choice span {
    animation: sbc-demo-choice-cycle 8s linear infinite;
}
.sbc-demo-visual--choice span:nth-child(1) { animation-delay: 0s; }
.sbc-demo-visual--choice span:nth-child(2) { animation-delay: 2s; }
.sbc-demo-visual--choice span:nth-child(3) { animation-delay: 4s; }
.sbc-demo-visual--choice span:nth-child(4) { animation-delay: 6s; }
.sbc-demo-visual--rhythm {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    align-content: end;
    padding-top: 31px;
    cursor: default;
    animation: sbc-demo-rhythm-shell 8s linear infinite;
}
.sbc-demo-visual--rhythm::after {
    content: none;
}
.sbc-demo-rhythm-name {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 14px;
    display: block;
    pointer-events: none;
}
.sbc-demo-rhythm-name i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(2px);
    animation: sbc-demo-rhythm-name 8s linear infinite;
}
.sbc-demo-rhythm-name i:nth-child(1) { color: #FFB347; animation-delay: 0s; }
.sbc-demo-rhythm-name i:nth-child(2) { color: #70D6FF; animation-delay: 2s; }
.sbc-demo-rhythm-name i:nth-child(3) { color: #E0AAFF; animation-delay: 4s; }
.sbc-demo-rhythm-name i:nth-child(4) { color: #48CAE4; animation-delay: 6s; }
.sbc-demo-visual--rhythm > span {
    min-width: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    animation: sbc-demo-rhythm-sequence 8s linear infinite;
}
.sbc-demo-visual--rhythm b {
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}
.sbc-demo-visual--rhythm em {
    font-style: normal;
    font-size: 8.7px;
    line-height: 1;
    color: rgba(241,244,255,0.54);
}
.sbc-demo-visual--duration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.sbc-demo-visual--duration span {
    border-radius: 999px;
    padding: 8px 8px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.62);
    font-size: 10.5px;
    line-height: 1;
}
.sbc-demo-visual--duration span:nth-child(2) {
    color: #fff;
    border-color: rgba(0,224,255,0.56);
    background: rgba(0,224,255,0.14);
    animation: sbc-demo-glow 2.2s ease-in-out infinite;
}
.sbc-demo-visual--start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sbc-demo-play-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0,224,255,0.60);
    background: rgba(0,224,255,0.12);
    position: relative;
    flex: 0 0 auto;
    animation: sbc-demo-pulse 1.8s ease-in-out infinite;
}
.sbc-demo-play-dot::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 9px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid rgba(255,255,255,0.92);
}
.sbc-demo-visual--breathe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.sbc-demo-mini-sphere {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: block;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.92), rgba(125,211,252,0.68) 20%, rgba(0,224,255,0.20) 47%, rgba(0,224,255,0.02) 70%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16) 0 1px, transparent 1px 5px);
    border: 1px solid rgba(0,224,255,0.52);
    box-shadow: 0 0 28px rgba(0,224,255,0.22);
    animation: sbc-demo-breathe 4.4s ease-in-out infinite;
}
.sbc-demo-breath-label {
    font-size: 10px;
    color: rgba(241,244,255,0.58);
    letter-spacing: .08em;
    text-transform: uppercase;
}
@keyframes sbc-demo-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,224,255,0); transform: translateY(0); }
    50% { box-shadow: 0 0 16px rgba(0,224,255,0.18); transform: translateY(-1px); }
}
@keyframes sbc-demo-choice-cycle {
    0%, 24.99% {
        color: #fff;
        border-color: rgba(0,224,255,0.56);
        background: rgba(0,224,255,0.13);
        box-shadow: 0 0 16px rgba(0,224,255,0.16);
        transform: translateY(-1px);
    }
    25%, 100% {
        color: rgba(255,255,255,0.64);
        border-color: rgba(255,255,255,0.09);
        background: rgba(255,255,255,0.045);
        box-shadow: none;
        transform: translateY(0);
    }
}
@keyframes sbc-demo-step {
    0%, 100% { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); color: rgba(255,255,255,0.62); }
    20%, 38% { border-color: rgba(0,224,255,0.56); background: rgba(0,224,255,0.14); color: #fff; }
}
@keyframes sbc-demo-rhythm-shell {
    0%, 24.99% { border-color: rgba(255,179,71,.46); box-shadow: inset 0 0 18px rgba(255,179,71,.045), 0 0 18px rgba(255,179,71,.08); }
    25%, 49.99% { border-color: rgba(112,214,255,.48); box-shadow: inset 0 0 18px rgba(112,214,255,.05), 0 0 18px rgba(112,214,255,.08); }
    50%, 74.99% { border-color: rgba(224,170,255,.50); box-shadow: inset 0 0 18px rgba(224,170,255,.05), 0 0 18px rgba(224,170,255,.09); }
    75%, 100% { border-color: rgba(72,202,228,.48); box-shadow: inset 0 0 18px rgba(72,202,228,.05), 0 0 18px rgba(72,202,228,.08); }
}
@keyframes sbc-demo-rhythm-sequence {
    0%, 24.99% { color: #fff; border-color: rgba(255,179,71,.58); background: rgba(255,179,71,.14); box-shadow: 0 0 14px rgba(255,179,71,.12); }
    25%, 49.99% { color: #fff; border-color: rgba(112,214,255,.58); background: rgba(112,214,255,.14); box-shadow: 0 0 14px rgba(112,214,255,.12); }
    50%, 74.99% { color: #fff; border-color: rgba(224,170,255,.60); background: rgba(224,170,255,.14); box-shadow: 0 0 14px rgba(224,170,255,.13); }
    75%, 100% { color: #fff; border-color: rgba(72,202,228,.58); background: rgba(72,202,228,.14); box-shadow: 0 0 14px rgba(72,202,228,.12); }
}
@keyframes sbc-demo-rhythm-name {
    0%, 24.99% { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; transform: translateY(2px); }
}
@keyframes sbc-demo-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(0,224,255,0.10); }
    50% { transform: scale(1.08); box-shadow: 0 0 24px rgba(0,224,255,0.26); }
}
@keyframes sbc-demo-breathe {
    0%, 100% { transform: scale(.78); opacity: .70; }
    42% { transform: scale(1.13); opacity: 1; }
    58% { transform: scale(1.13); opacity: 1; }
}
@media (max-width: 640px) {
    .sbc-instruction-head {
        grid-template-columns: 36px 50px minmax(0, 1fr);
        gap: 12px;
    }
    .sbc-instruction-demo {
        grid-template-columns: 1fr;
    }
    .sbc-demo-visual,
    .sbc-demo-textbox {
        min-height: 92px;
    }
    .sbc-demo-textbox p { font-size: 12px; }
}
@media (max-width: 390px) {
    .sbc-instruction-head {
        grid-template-columns: 32px 44px minmax(0, 1fr);
        gap: 10px;
    }
    .sbc-demo-visual--rhythm { gap: 4px; }
    .sbc-demo-visual--rhythm b { font-size: 14px; }
    .sbc-demo-visual--rhythm em { font-size: 8px; }
}


/* v2.0.20 — Demo-knappen er først “klar”, når punktet er aktivt */
.sbc-instruction-card:not(.is-guide-point-active) .sbc-demo-live-btn {
    opacity: .52;
    filter: saturate(.62);
    box-shadow: none;
}
.sbc-instruction-card.is-guide-point-active .sbc-demo-live-btn {
    border-color: rgba(175, 135, 220, 0.50);
    background: rgba(175, 135, 220, 0.12);
    box-shadow: 0 0 18px rgba(175, 135, 220, 0.12);
}


/* ═══════════════════════════════════════════════════════
   v2.0.19 — AKTIVT GUIDEPUNKT
   Når et punkt vælges, får rammen Indre Ro-farven som visuel aktiv-markering.
   ═══════════════════════════════════════════════════════ */
.sbc-instructions .sbc-instruction-card.is-guide-point-active {
    border-color: rgba(175, 135, 220, 0.96);
    background: linear-gradient(135deg, rgba(175, 135, 220, 0.115), rgba(255,255,255,0.016));
    box-shadow:
        inset 0 0 0 1px rgba(175, 135, 220, 0.22),
        0 0 28px rgba(175, 135, 220, 0.22),
        0 0 62px rgba(175, 135, 220, 0.10);
}
.sbc-instructions .sbc-instruction-card.is-guide-point-active:hover {
    border-color: rgba(175, 135, 220, 1);
    box-shadow:
        inset 0 0 0 1px rgba(175, 135, 220, 0.25),
        0 0 32px rgba(175, 135, 220, 0.28),
        0 0 70px rgba(175, 135, 220, 0.12);
}
.sbc-instruction-card.is-guide-point-active .sbc-instruction-number {
    border-color: rgba(175, 135, 220, 0.98);
    box-shadow: 0 0 18px rgba(175, 135, 220, 0.26);
}
.sbc-instruction-card.is-guide-point-active .sbc-instruction-icon {
    border-color: rgba(175, 135, 220, 0.38);
    box-shadow: inset 0 0 16px rgba(175, 135, 220, 0.08), 0 0 18px rgba(175, 135, 220, 0.16);
}
.sbc-instruction-card.is-guide-point-active .sbc-instruction-demo {
    border-top-color: rgba(175, 135, 220, 0.18);
}



/* ═══════════════════════════════════════════════════════
   v2.0.25 — PUNKT 2: SAMMENHÆNGENDE KATEGORITEKSTER + FOKUS LIVE-DEMO
   Punkt 2: Ind → Hold → Ud → Hold med kategori-farver, farvetekst og sekvenstal.
   ═══════════════════════════════════════════════════════ */
.sbc-demo-visual--choice span {
    animation: none;
}
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span {
    animation: sbc-demo-choice-cycle 8s linear infinite;
}
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span:nth-child(1) { animation-delay: 0s; }
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span:nth-child(2) { animation-delay: 2s; }
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span:nth-child(3) { animation-delay: 4s; }
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span:nth-child(4) { animation-delay: 6s; }

.sbc-demo-visual--rhythm,
.sbc-demo-visual--rhythm > span,
.sbc-demo-rhythm-name i {
    animation: none !important;
}
.sbc-demo-visual--rhythm {
    --sbc-rhythm-color: #FFB347;
    --sbc-rhythm-bg: rgba(255,179,71,.14);
    --sbc-rhythm-border: rgba(255,179,71,.58);
    --sbc-rhythm-shadow: rgba(255,179,71,.12);
    transition: border-color .28s ease, box-shadow .28s ease;
}
.sbc-demo-visual--rhythm.is-category-energy {
    --sbc-rhythm-color: #FFB347;
    --sbc-rhythm-bg: rgba(255,179,71,.14);
    --sbc-rhythm-border: rgba(255,179,71,.60);
    --sbc-rhythm-shadow: rgba(255,179,71,.14);
}
.sbc-demo-visual--rhythm.is-category-focus {
    --sbc-rhythm-color: #48CAE4;
    --sbc-rhythm-bg: rgba(72,202,228,.14);
    --sbc-rhythm-border: rgba(72,202,228,.60);
    --sbc-rhythm-shadow: rgba(72,202,228,.14);
}
.sbc-demo-visual--rhythm.is-category-calm {
    --sbc-rhythm-color: #E0AAFF;
    --sbc-rhythm-bg: rgba(224,170,255,.15);
    --sbc-rhythm-border: rgba(224,170,255,.62);
    --sbc-rhythm-shadow: rgba(224,170,255,.15);
}
.sbc-demo-visual--rhythm.is-category-sleep {
    --sbc-rhythm-color: #5B2EFF;
    --sbc-rhythm-bg: rgba(91,46,255,.16);
    --sbc-rhythm-border: rgba(91,46,255,.64);
    --sbc-rhythm-shadow: rgba(91,46,255,.17);
}
.sbc-demo-visual--rhythm.is-rhythm-playing {
    border-color: var(--sbc-rhythm-border);
    box-shadow:
        inset 0 0 18px var(--sbc-rhythm-shadow),
        0 0 20px var(--sbc-rhythm-shadow);
}
.sbc-demo-rhythm-name i {
    color: var(--sbc-rhythm-color);
    opacity: .95;
    transform: translateY(0);
    transition: color .25s ease, opacity .2s ease;
}
.sbc-demo-visual--rhythm > span {
    color: rgba(255,255,255,0.62);
    transform: translateY(0) scale(1);
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}
.sbc-demo-visual--rhythm > span.is-phase-active {
    color: #fff;
    border-color: var(--sbc-rhythm-border);
    background: var(--sbc-rhythm-bg);
    box-shadow: 0 0 15px var(--sbc-rhythm-shadow);
    transform: translateY(-1px) scale(1.035);
}
.sbc-demo-visual--rhythm > span.is-phase-active em,
.sbc-demo-visual--rhythm > span.is-phase-active b {
    color: #fff;
}
.sbc-demo-visual--rhythm > span b,
.sbc-demo-visual--rhythm > span em {
    transition: color .22s ease;
}
.sbc-instruction-card:not(.is-guide-point-active) .sbc-demo-visual--duration span:nth-child(2),
.sbc-instruction-card:not(.is-guide-point-active) .sbc-demo-play-dot,
.sbc-instruction-card:not(.is-guide-point-active) .sbc-demo-mini-sphere {
    animation-play-state: paused;
}


/* ═══════════════════════════════════════════════════════
   v2.0.25 — Punkt 2: fire sammenhængende kategoritekster over rytmefelterne
   ═══════════════════════════════════════════════════════ */
.sbc-demo-visual--rhythm {
    align-content: center;
    padding-top: 14px;
    grid-template-rows: auto 1fr;
}
.sbc-demo-visual--rhythm .sbc-demo-rhythm-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0 0 7px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
}
.sbc-demo-visual--rhythm .sbc-demo-rhythm-strip span {
    min-width: 0;
    color: #fff;
    border: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding: 5px 2px 4px;
    background: transparent;
    box-shadow: none;
    font-size: 8.7px;
    letter-spacing: .045em;
    white-space: nowrap;
    transform: none;
}
.sbc-demo-visual--rhythm .sbc-demo-rhythm-strip span:last-child {
    border-right: 0;
}
.sbc-demo-visual--rhythm .sbc-demo-rhythm-strip span.is-active {
    color: #fff;
    opacity: 1;
    border-color: rgba(255,255,255,0.08);
    background: color-mix(in srgb, var(--sbc-demo-legend-color) 18%, transparent);
    box-shadow: inset 0 0 15px color-mix(in srgb, var(--sbc-demo-legend-color) 24%, transparent);
    transform: none;
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .sbc-demo-visual--rhythm .sbc-demo-rhythm-strip span.is-active {
        color: #fff;
        background: rgba(255,255,255,.08);
        box-shadow: inset 0 0 15px rgba(255,255,255,.06);
    }
}
@media (max-width: 520px) {
    .sbc-demo-visual--rhythm .sbc-demo-rhythm-strip span {
        font-size: 8px;
        letter-spacing: .02em;
        padding-left: 1px;
        padding-right: 1px;
    }
}

/* ═══════════════════════════════════════════════════════
   v2.0.28 — Punkt 1: grå default-rammer + farvet aktiv markering
   Alle fire tilstande er neutrale, indtil de lyser op i tur.
   ═══════════════════════════════════════════════════════ */
.sbc-demo-visual--choice span {
    color: #fff;
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.13);
    box-shadow: inset 0 0 14px rgba(255,255,255,0.025);
}
.sbc-demo-visual--choice span:nth-child(1) { --sbc-choice-rgb: 255,179,71; }
.sbc-demo-visual--choice span:nth-child(2) { --sbc-choice-rgb: 72,202,228; }
.sbc-demo-visual--choice span:nth-child(3) { --sbc-choice-rgb: 224,170,255; }
.sbc-demo-visual--choice span:nth-child(4) { --sbc-choice-rgb: 91,46,255; }
.sbc-demo-visual--choice span,
.sbc-instruction-card.is-guide-point-active .sbc-demo-visual--choice span {
    color: #fff;
}
@keyframes sbc-demo-choice-cycle {
    0%, 24.99% {
        color: #fff;
        border-color: rgba(var(--sbc-choice-rgb, 255,255,255), 0.95);
        background: rgba(var(--sbc-choice-rgb, 255,255,255), 0.18);
        box-shadow:
            inset 0 0 16px rgba(var(--sbc-choice-rgb, 255,255,255), 0.09),
            0 0 18px rgba(var(--sbc-choice-rgb, 255,255,255), 0.18);
        transform: translateY(-1px);
    }
    25%, 100% {
        color: #fff;
        border-color: rgba(255,255,255,0.13);
        background: rgba(255,255,255,0.045);
        box-shadow: inset 0 0 14px rgba(255,255,255,0.025);
        transform: translateY(0);
    }
}

/* v2.0.31 — Velkommen topområde bevarer kuglens placering på mindre skærme */
@media (max-width: 960px) {
    .sbc-welcome-greeting {
        min-height: 96px;
        padding: 14px 18px 12px;
    }
    .sbc-welcome-title { font-size: 26px; }
    .sbc-welcome-subtitle { font-size: 14.5px; max-width: 330px; }
}
@media (max-width: 640px) {
    .sbc-welcome-greeting {
        min-height: 88px;
        padding: 12px 16px 10px;
    }
    .sbc-welcome-title { font-size: 24px; }
    .sbc-welcome-subtitle { font-size: 14px; max-width: 310px; }
}

/* v2.0.89: Mobil velkomstside — titel+undertekst 20px lavere.
   justify-content:center på containeren gør padding-top ineffektivt,
   så vi bruger transform på de to elementer direkte. */
@media (max-width: 960px) {
    .sbc-app.is-welcome-start .sbc-welcome-title,
    .sbc-app.is-welcome-start .sbc-welcome-subtitle {
        transform: translateY(20px);
    }
}


/* v2.0.32 — Velkommen justering */
.sbc-welcome-skip {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.54);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    padding: 4px 8px 0;
    cursor: pointer;
}
.sbc-welcome-skip:hover {
    color: rgba(255,255,255,0.82);
}
.sbc-app.is-welcome-start .sbc-selected-copy {
    display: none;
}
.sbc-app.is-welcome-start .sbc-buttons {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}
/* v2.0.45 — Welcome-knap-sektion: redesign */

/* ÅBN GUIDE — fremstår som primær CTA i welcome-tilstand */
.sbc-app.is-welcome-start .sbc-btn-guide {
    min-width: 200px;
    position: relative;
    top: -10px; /* v2.0.41 */
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 50px;
    color: #fff;
    font-size: 13px !important;
    letter-spacing: 0.14em;
    padding: 14px 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}
.sbc-app.is-welcome-start .sbc-btn-guide:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.38);
}

/* Guide hint — lille caption under ÅBN GUIDE */
.sbc-guide-hint {
    display: none;
}
.sbc-app.is-welcome-start .sbc-guide-hint {
    display: block !important;
    font-size: 11px !important;
    font-style: italic;
    color: rgba(255,255,255,0.36) !important;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
    max-width: 240px;
    margin: -4px auto 0;
    padding: 0;
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* v2.1.15: skip intro — hel pill-button (var: kun border-top → så halv ud). */
.sbc-app.is-welcome-start .sbc-welcome-skip {
    display: inline-flex;
    margin-top: 18px;
    padding: 8px 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    background: rgba(255,255,255,0.04);
    width: auto;
    min-width: 110px;
    justify-content: center;
    font-size: 12px !important;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.65) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sbc-app.is-welcome-start .sbc-welcome-skip:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.42);
    color: rgba(255,255,255,0.92);
}


/* v2.0.33 — Velkommen: ryk "SÅDAN VIRKER SPHERE" 50px ned */
.sbc-app.is-welcome-start .sbc-phase {
    transform: translateX(-50%) translateY(50px);
}

/* v2.0.34 — Velkommen: Åben guide 25px op */
.sbc-app.is-welcome-start .sbc-buttons {
    transform: translateY(-25px);
}

/* v2.0.35 — Velkommen-overlay bruger samme top-slot som karrusellen,
   så kuglen står præcis samme sted som på forsiden */
@media (max-width: 960px) {
    .sbc-app.is-welcome-start .sbc-welcome-greeting {
        padding: 12px 16px 10px;
    }
}

@media (max-width: 640px) {
    .sbc-app.is-welcome-start .sbc-welcome-greeting {
        padding: 10px 14px 8px;
    }
}


/* v2.0.36 — LÅST SANDHED:
   Velkommen-teksten er et overlay og må IKKE bruges til at skabe afstand til kuglen.
   Kuglens Y-placering styres kun af den skjulte karrusel/top-slot via --sbc-welcome-top-height.
   Fremtidige tekstjusteringer skal ske med --sbc-welcome-text-y eller interne tekst-regler. */
.sbc-app.is-welcome-start {
    --sbc-welcome-text-y: 0px;
}
.sbc-app.is-welcome-start .sbc-welcome-greeting {
    box-sizing: border-box;
    max-height: var(--sbc-welcome-top-height, 120px);
    transform: translateY(var(--sbc-welcome-text-y, 0px));
    contain: layout paint;
}
.sbc-app.is-welcome-start .sbc-stage {
    margin-top: 0 !important;
}
.sbc-app.is-welcome-start .sbc-canvas-wrap {
    transform: none !important;
}

/* v2.0.65 — Desktop: fjern "SÅDAN VIRKER SPHERE" og sort panel-boks på velkomstsiden.
   Mobil (≤640px) er låst og røres ikke. */
@media (min-width: 641px) {
    .sbc-app.is-welcome-start .sbc-phase {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .sbc-app.is-welcome-start .sbc-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}



/* v2.0.37 — Velkommen: fire tilstandsbokse under underteksten, synkroniseret med kuglens farveskift */
.sbc-welcome-mode-strip {
    width: min(560px, 100%);
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
}
.sbc-welcome-mode {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 4px 6px;
    color: #fff;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: .045em;
    white-space: nowrap;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    transition: background .28s ease, box-shadow .28s ease, opacity .28s ease, color .28s ease;
    opacity: .82;
}
.sbc-welcome-mode:last-child {
    border-right: 0;
}
.sbc-welcome-mode.is-energy { --sbc-welcome-mode-color: #FFB347; }
.sbc-welcome-mode.is-focus  { --sbc-welcome-mode-color: #48CAE4; }
.sbc-welcome-mode.is-calm   { --sbc-welcome-mode-color: #E0AAFF; }
.sbc-welcome-mode.is-sleep  { --sbc-welcome-mode-color: #5B2EFF; }
.sbc-welcome-mode.is-active {
    opacity: 1;
    color: #fff;
    background: color-mix(in srgb, var(--sbc-welcome-mode-color) 18%, transparent);
    box-shadow: inset 0 0 15px color-mix(in srgb, var(--sbc-welcome-mode-color) 24%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .sbc-welcome-mode.is-active {
        background: rgba(255,255,255,.09);
        box-shadow: inset 0 0 15px rgba(255,255,255,.06);
    }
}
@media (max-width: 640px) {
    .sbc-welcome-mode-strip {
        width: min(340px, 100%);
        margin-top: 32px;
    }
    .sbc-welcome-mode {
        font-size: 9px;
        letter-spacing: .02em;
        padding: 6px 2px 5px;
    }
}

/* ═══════════════════════════════════════════════════════
   v2.0.51 — PUNKT 3: Ur, centeret viser på kl. 12, fyldt cirkel, cycling bokse
   .sbc-instruction-icon = 52×52px, ur-cirkel = 26px centreret → center = (26,26)
   Viser: 2px bred, 10px høj → left:25px, top:16px → bund i center, peger op (kl.12)
   ═══════════════════════════════════════════════════════ */

/* CSS custom property til animeret conic-gradient (ur-fyldning) */
@property --sbc-clock-fill-deg {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Fjern "Tryk"-label på punkt 3 og 4's demo-visual */
[data-demo-card="3"] .sbc-demo-visual::after,
[data-demo-card="4"] .sbc-demo-visual::after {
    content: none;
    display: none;
}

/* Sluk eksisterende statisk glow på span:nth-child(2) for punkt 3 */
[data-demo-card="3"] .sbc-demo-visual--duration span:nth-child(2) {
    animation: none;
    color: rgba(255,255,255,0.62);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.045);
}

/* ── Ur-viser: altid centreret på kl. 12 (alle skærmstørrelser) ──
   Ikonet skifter størrelse ved breakpoints: 52px → 46px → 44px (alle har border:1px).
   calc(50% - 1px) = center af 2px viser for ethvert ikon
   calc(50% - 10px) = bunden af 10px viser rammer præcis ikon-centeret */
[data-demo-card="3"] .sbc-icon-clock::after {
    position: absolute;
    width: 2px;
    height: 10px;
    left: calc(50% - 1px);
    top: calc(50% - 10px);
    margin: 0;
    transform-origin: bottom center;
    transform: rotate(0deg);   /* kl. 12 som default */
    box-shadow: none;
    background: rgba(125, 211, 252, 0.95);
    border-radius: 999px;
}

/* ── Ur: cirkel fylder hvidt op over 60 sekunder ── */
@keyframes sbc-clock-fill-anim {
    from { --sbc-clock-fill-deg: 0deg; }
    to   { --sbc-clock-fill-deg: 360deg; }
}

.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-icon-clock::before {
    background: conic-gradient(
        rgba(255, 255, 255, 0.92) 0deg,
        rgba(255, 255, 255, 0.92) var(--sbc-clock-fill-deg),
        rgba(125, 211, 252, 0.10) var(--sbc-clock-fill-deg)
    );
    border-color: rgba(125, 211, 252, 0.95);
    animation: sbc-clock-fill-anim 60s linear infinite;
}

/* ── Ur-viser: drejer 1 omgang pr. 60 sekunder ved aktivering ── */
@keyframes sbc-clock-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-icon-clock::after {
    animation: sbc-clock-spin-slow 60s linear infinite;
}

/* ── Cycling animation: én boks lyser op ad gangen, 2s pr. boks, 6s total ── */
@keyframes sbc-duration-highlight {
    0%      { color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); box-shadow: none; transform: scale(1); }
    6%      { color: #fff; border-color: rgba(0,224,255,0.60); background: rgba(0,224,255,0.16); box-shadow: 0 0 14px rgba(0,224,255,0.22); transform: scale(1.06); }
    28%     { color: #fff; border-color: rgba(0,224,255,0.60); background: rgba(0,224,255,0.16); box-shadow: 0 0 14px rgba(0,224,255,0.22); transform: scale(1.06); }
    34%     { color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); box-shadow: none; transform: scale(1); }
    100%    { color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); box-shadow: none; transform: scale(1); }
}

/* Tænd cycling kun når kortet er aktivt */
.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-demo-visual--duration span {
    animation: sbc-duration-highlight 6s linear infinite;
}
.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-demo-visual--duration span:nth-child(1) {
    animation-delay: 0s;
}
.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-demo-visual--duration span:nth-child(2) {
    animation: sbc-duration-highlight 6s linear infinite;
    animation-delay: -4s;
}
.sbc-instruction-card[data-demo-card="3"].is-guide-point-active .sbc-demo-visual--duration span:nth-child(3) {
    animation: sbc-duration-highlight 6s linear infinite;
    animation-delay: -2s;
}

/* ── v2.0.62: Forside — panel 20px op, intet andet rykkes ── */
@media (max-width: 960px) {
    .sbc-app:not(.is-session) .sbc-panel { margin-top: 30px; } /* var 50px */
}
@media (min-width: 961px) {
    .sbc-app:not(.is-session) .sbc-panel { margin-top: -20px; }
}

/* v2.0.71 — Desktop: fjern grå panel-boks på forsiden (ikke i session) */
@media (min-width: 641px) {
    .sbc-app:not(.is-session):not(.is-welcome-start) .sbc-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.1.10 — Desktop only:
   • Intro-siden (welcome-start): REVERTET til original v2.0.34-lock — ingen ekstra
     justering, så halv-skærm ikke får cut-off bunden.
   • Forsiden: KUGLEN bliver hvor den er (samme position som welcome/session).
     Kun phase-tekst og panel rykkes 50px ned. Phase via translateY + overflow:visible
     på canvas-wrap (ellers klippes den); panel via margin-top.
   • Sessionsiden: panel margin-top: 50px (uændret fra v2.1.09).
   Mobil (≤960px) UÆNDRET.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
    /* (1) FORSIDEN — phase-tekst + panel 50px ned, kugle bevarer canvas-position
       (samme placering som velkommen og session). */
    .sbc-app:not(.is-session):not(.is-welcome-start) .sbc-canvas-wrap {
        overflow: visible; /* v2.1.10 — så phase ikke klippes når den translateres */
    }
    .sbc-app:not(.is-session):not(.is-welcome-start) .sbc-phase {
        transform: translateX(-50%) translateY(50px); /* v2.1.10 */
    }
    .sbc-app:not(.is-session):not(.is-welcome-start) .sbc-panel {
        margin-top: 50px; /* v2.1.10 — layout-push */
    }

    /* (1b) VELKOMSTSIDEN (welcome-start) v2.1.15 — ryk hele blokken (QUICK GUIDE
       + hint + skip intro) 50px ned via margin-top på .sbc-buttons.
       Original v2.0.34 transform: translateY(-25px) BEVARES; vi adderer kun margin. */
    .sbc-app.is-welcome-start .sbc-buttons {
        margin-top: 50px; /* v2.1.15 */
    }

    /* (2) SESSIONSIDEN — info-boks (INDÅND/HOLD), tid (00:00) og knapper
       (PAUSE/AFSLUT) rykkes 50px ned via margin-top på .sbc-panel.
       Låste gap 20px og safe-area padding-bottom (ref v1.7.54) er IKKE ændret. */
    .sbc-app.is-session .sbc-panel {
        margin-top: 50px; /* v2.1.09 → bevaret i v2.1.10 */
    }
}