/* study-guide.css -- Module nav, course view, study guide phases, task modal, recall topics, voice blurt, feynman, elaborate, technique picker, session picker, bento grid */

        /* ── Modular Course View ── */
        .module-nav-group { padding: 6px 10px; }
        .module-nav-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--study-text-muted); padding: 8px 12px 5px; }
        .module-nav-item {
            display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
            font-size: 12px; font-weight: 500; color: var(--study-text-secondary); cursor: pointer;
            transition: all 0.15s; width: 100%; border: none; background: transparent; text-align: left; font-family: inherit;
        }
        .module-nav-item:hover { background: rgba(255,255,255,0.06); color: var(--study-text); }
        .module-nav-item.active { background: rgba(255,255,255,0.08); color: var(--study-text); font-weight: 600; }
        .module-nav-item.completed { color: var(--study-text-tertiary); }
        .module-nav-num { font-size: 10px; font-weight: 700; color: var(--study-text-tertiary); min-width: 16px; }
        .module-nav-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .module-nav-kicker { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--study-text-tertiary); }
        .module-nav-item.active .module-nav-num { color: var(--study-accent); }
        .module-nav-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .module-nav-check { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--study-text-tertiary); }
        .module-nav-check i { width: 14px; height: 14px; }

        /* Course view, warm editorial style (Holospark-inspired) */
        /* Course view uses default study-bg, no custom background color */

        .module-hero {
            border-radius: 16px; padding: 40px 44px 36px; margin-bottom: 44px;
            background: linear-gradient(135deg, #faf4ee 0%, #fcf8f3 100%);
            color: #2c1e18; position: relative; overflow: hidden; min-height: 240px;
            display: flex; flex-direction: column; justify-content: flex-end;
        }
        .module-hero-img {
            position: absolute; top: 20px; right: 20px; width: 240px; height: 190px;
            border-radius: 14px; object-fit: cover; box-shadow: 0 8px 22px rgba(168, 80, 37, 0.18);
        }
        .module-hero-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
        .module-hero-badge {
            display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
            border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.06em; width: fit-content;
        }
        .module-hero-badge-subject { background: rgba(168, 80, 37, 0.14); color: #7f3818; }
        .module-hero-badge-source { background: rgba(168, 80, 37, 0.10); color: #7f3818; }
        .module-hero-title { font-size: 36px; font-weight: 700; line-height: 1.15; margin-bottom: 16px; color: #2c1e18; font-family: 'Georgia', 'Times New Roman', serif; max-width: 58%; }
        .module-hero-desc { font-size: 15px; color: #5a463a; line-height: 1.7; max-width: 58%; }

        /* Module title below hero, large serif like Holospark */
        .module-section-title {
            font-size: 2.4rem; font-weight: 700; color: var(--study-text); margin: 0 0 10px;
            font-family: 'Georgia', 'Times New Roman', serif; line-height: 1.2;
        }

        .module-content { max-width: 780px; margin: 0 auto; width: 100%; }
        .module-content .notes-view { padding: 0; font-size: 16px; line-height: 1.85; color: var(--study-text); }
        .module-content .notes-view h2 {
            font-size: 1.8rem; font-weight: 700; margin-top: 48px; margin-bottom: 16px;
            color: var(--study-text); font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: -0.01em;
        }
        .module-content .notes-view h3 {
            font-size: 1.35rem; font-weight: 700; margin-top: 32px; margin-bottom: 12px;
            color: var(--study-text);
        }
        .module-content .notes-view strong { color: var(--study-text); font-weight: 700; }
        [data-theme="dark"] .module-content .notes-view strong { font-weight: 800; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
        /* Blockquote tiering, the AI was wrapping definitions, headers,
           formulas, AND examples in the same orange-bar box, which made
           every paragraph look like a callout. New rules:
             - Default blockquote: light left-bar only, no fill, regular
               body text. Reads as an aside, not a klaxon.
             - Blockquote whose first child is <strong> (callout headers
               like "Cues vs. Inferences"): slightly stronger left bar +
               soft background, slightly bigger label feel.
             - Blockquote that LOOKS like a formula (contains <code>
               or only-one-line monospace): boxed peach background +
               accent bar, the "this is a formula" treatment. Reserved.
             - Consecutive blockquotes get tightened spacing so a
               sequence of related definitions reads as one group, not 7
               islands.
           James 2026-05-12. */
        .module-content .notes-view blockquote {
            border-left: 3px solid #d8b89a;
            padding: 6px 0 6px 16px;
            margin: 14px 0;
            background: transparent;
            border-radius: 0;
            font-style: normal;
            color: var(--study-text);
        }
        .module-content .notes-view blockquote + blockquote {
            margin-top: -2px;
        }
        .module-content .notes-view blockquote:has(> strong:first-child),
        .module-content .notes-view blockquote:has(> b:first-child) {
            border-left: 4px solid var(--study-accent);
            background: rgba(168, 80, 37, 0.04);
            padding: 12px 18px;
            margin: 22px 0 14px;
        }
        .module-content .notes-view blockquote:has(code:only-child),
        .module-content .notes-view blockquote:has(> p > code:only-child) {
            border-left: 4px solid var(--study-accent);
            background: var(--study-accent-dim);
            padding: 14px 20px;
            margin: 18px 0;
            border-radius: 0 12px 12px 0;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        }
        .module-content .notes-view table { margin: 28px 0; border-radius: 12px; overflow: hidden; }
        .module-content .notes-view th { background: var(--study-accent-dim); color: var(--study-accent); }
        .module-content .notes-view ul, .module-content .notes-view ol { margin: 12px 0 20px; }
        .module-content .notes-view li { margin-bottom: 10px; }

        /* Module section numbers, hidden; module header already shows the number */
        .module-content .notes-view .section-num {
            display: none;
        }

        .module-nav-sep { border-top: 1px solid var(--study-border); margin: 6px 12px; }

        /* Study Guide checklist */
        .study-guide-list { display: flex; flex-direction: column; gap: 6px; }
        .study-guide-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--study-border); background: var(--study-bg-secondary); cursor: pointer; transition: all 0.15s; }
        .study-guide-item:hover { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .study-guide-item.done { border-color: rgba(34,197,94,0.2); }
        .study-guide-item.done:hover { border-color: rgba(34,197,94,0.4); }
        .study-guide-check { flex-shrink: 0; padding-top: 1px; }
        .study-guide-text { flex: 1; min-width: 0; }
        .study-guide-step { font-size: 15px; font-weight: 600; color: var(--study-text); line-height: 1.4; }
        .study-guide-desc { font-size: 13px; color: var(--study-text-tertiary); margin-top: 4px; line-height: 1.4; }

        /* Study Guide, phased plan */
        .sg-phase { border-radius: 14px; border: 1.5px solid var(--study-border); background: var(--study-bg-secondary); overflow: hidden; transition: all 0.15s; }
        .sg-phase:hover { border-color: rgba(255,255,255,0.12); }
        .sg-phase-done { opacity: 0.6; }
        .sg-phase-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-left: 5px solid var(--study-accent); }
        .sg-phase-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .sg-phase-meta { flex: 1; min-width: 0; }
        .sg-phase-title { font-size: 15px; font-weight: 700; color: var(--study-text); margin-bottom: 4px; }
        .sg-phase-tags { display: flex; align-items: center; gap: 8px; }
        .sg-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid; text-transform: uppercase; letter-spacing: 0.04em; }
        .sg-tag-time { font-size: 11px; color: var(--study-text-tertiary); display: flex; align-items: center; gap: 3px; }
        .sg-phase-steps { padding: 4px 18px 12px; }
        .sg-phase-steps .study-guide-item { border: none; background: transparent; padding: 10px 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .sg-phase-steps .study-guide-item:last-child { border-bottom: none; }
        .sg-phase-steps .study-guide-item:hover { background: transparent; }
        .sg-phase-tip { padding: 10px 18px 14px; font-size: 12px; color: var(--study-accent); display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.04); }

        /* Study Guide v3, Academic Sanctuary */
        .sg2-shell {
            padding: 40px 48px 60px;
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 1100px;
            margin: 0 auto;
            width: 100%;
        }
        .sg2-hero {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            gap: 20px;
            padding: 0 0 24px;
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }
        .sg2-hero-simple {
            padding: 0 0 24px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--study-border);
        }
        .sg2-subtitle-meta {
            font-size: 13px;
            font-weight: 600;
            color: var(--study-text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .sg2-hero-text { flex: 1; min-width: 0; }
        .sg2-hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
        .sg2-hero-tag {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--study-accent); background: var(--study-accent-dim, rgba(232,133,58,0.08));
            padding: 4px 12px; border-radius: 999px;
        }
        .sg2-hero-exam {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
            color: #ef4444; background: rgba(239,68,68,0.08);
            padding: 4px 12px; border-radius: 999px;
        }
        .sg2-hero-ring {
            position: relative; flex-shrink: 0; width: 72px; height: 72px;
            margin: 0 auto;
        }
        .sg2-ring-progress {
            transition: stroke-dashoffset 0.8s ease-out;
        }
        .sg2-ring-pct {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-size: 16px; font-weight: 900; color: var(--study-text);
        }
        .sg2-stats-row {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
            margin-bottom: 28px;
        }
        .sg2-stat-card {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            padding: 14px 12px; border-radius: 12px;
            background: var(--study-bg-secondary, #fff);
            border: 1px solid var(--study-border);
            aspect-ratio: 1 / 1;
        }
        .sg2-stat-card.has-alert .sg2-stat-value { color: #ef4444; }
        .sg2-stat-value {
            font-size: 20px; font-weight: 900; color: var(--study-text);
        }
        .sg2-stat-label {
            font-size: 10px; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.1em; color: var(--study-text-tertiary); margin-bottom: 8px;
        }
        .sg2-stat-sublabel {
            font-size: 11px; color: var(--study-text-tertiary); margin-top: 2px;
        }
        .sg2-breadcrumb {
            display: none;
        }
        .sg2-eyebrow, .sg2-side-kicker, .sg2-section-kicker, .sg2-next-kicker, .sg2-progress-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--accent-orange);
        }
        .sg2-eyebrow i, .sg2-stat i, .sg2-phase-time i, .sg2-btn i, .sg2-tool-icon i, .sg2-regenerate i {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }
        .sg2-hero-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            flex-wrap: wrap;
        }
        .sg2-title {
            margin: 0;
            font-size: clamp(2.2rem, 2rem + 1.2vw, 3rem);
            line-height: 1.08;
            letter-spacing: -0.03em;
            font-weight: 900;
            color: var(--text-primary);
        }
        .sg2-subtitle {
            margin: 6px 0 0;
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        @media (max-width: 580px) {
            .sg2-hero { flex-direction: column; text-align: center; align-items: center; }
            .sg2-hero-simple { text-align: center; }
            .sg2-subtitle-meta { justify-content: center; }
            .sg2-stats-row { grid-template-columns: repeat(2, 1fr); }
        }
        /* Focus Banner */
        .sg2-focus-banner {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            margin-bottom: 48px;
            background: linear-gradient(135deg, #3d3d3d 0%, #5a4a3a 35%, #8a6b4a 65%, #c4703a 100%);
        }
        .sg2-focus-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
            z-index: 1;
        }
        .sg2-focus-content {
            position: relative;
            z-index: 2;
        }
        .sg2-focus-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 999px;
            background: var(--study-accent-dim, rgba(232,133,58,0.15));
            color: #ffb596;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .sg2-focus-title {
            margin: 0 0 12px;
            font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
            line-height: 1.15;
            letter-spacing: -0.02em;
            font-weight: 800;
            color: #fff;
            max-width: 600px;
        }
        .sg2-focus-desc {
            margin: 0 0 24px;
            font-size: 15px;
            line-height: 1.6;
            color: rgba(255,255,255,0.7);
            max-width: 520px;
        }
        .sg2-focus-meta {
            margin: -12px 0 20px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: rgba(255,255,255,0.82);
            max-width: 520px;
        }
        .sg2-focus-btns {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sg2-focus-btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 8px;
            border: none;
            background: linear-gradient(135deg, var(--study-accent) 0%, #c4703a 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(232,133,58,0.3);
            transition: all 0.15s;
        }
        .sg2-focus-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,133,58,0.4); }
        .sg2-focus-btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.85);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        .sg2-focus-btn-secondary:hover { background: rgba(255,255,255,0.15); }
        /* Study Path */
        .sg2-path-section { width: 100%; }
        .sg2-path-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .sg2-path-title {
            margin: 0;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--study-text-tertiary);
        }
        .sg2-expand-all {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--study-text-tertiary);
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: color 0.15s;
        }
        .sg2-expand-all:hover { color: var(--study-text); }
        .sg2-path-filters {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sg2-filter-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-tertiary);
        }
        .sg2-filter-tabs {
            display: flex;
            background: var(--study-bg-tertiary, #f0eeeb);
            border-radius: 999px;
            padding: 3px;
        }
        .sg2-filter-tab {
            padding: 5px 16px;
            border-radius: 999px;
            border: none;
            background: transparent;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s;
        }
        .sg2-filter-tab.active {
            background: var(--study-bg-secondary, #fff);
            color: var(--study-accent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .sg2-filter-tab:hover:not(.active) { color: var(--study-accent); }
        /* Module Cards */
        .sg2-module-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .sg2-module {
            background: var(--study-bg-secondary, #fff);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
            transition: all 0.2s;
        }
        .sg2-module:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.05); }
        .sg2-module.is-open {
            box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.06);
            outline: 2px solid var(--study-accent-dim, var(--study-accent-dim, rgba(232,133,58,0.08)));
        }
        .sg2-module-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 28px 28px;
            cursor: pointer;
        }
        .sg2-module-left {
            display: flex;
            align-items: center;
            gap: 18px;
            min-width: 0;
        }
        .sg2-module-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--study-bg-tertiary, #f0eeeb);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--study-accent);
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .sg2-module-icon.is-active {
            background: var(--study-accent-dim, var(--study-accent-dim, rgba(232,133,58,0.12)));
        }
        .sg2-module:hover .sg2-module-icon { background: var(--study-accent-dim, var(--study-accent-dim, rgba(232,133,58,0.12))); }
        .sg2-module-info { min-width: 0; }
        .sg2-module-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }
        .sg2-module-num {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-tertiary);
        }
        .sg2-module-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--study-border);
        }
        .sg2-module-status {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .sg2-module-title {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 800;
            line-height: 1.3;
            color: var(--text-primary);
        }
        .sg2-module-right {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-shrink: 0;
        }
        .sg2-module-stats {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        .sg2-module-chevron {
            opacity: 0.4;
            transition: opacity 0.15s;
        }
        .sg2-module:hover .sg2-module-chevron { opacity: 1; }
        /* Module Body (expanded lessons) */
        .sg2-module-body {
            border-top: 1px solid var(--study-border);
            background: rgba(0,0,0,0.015);
            padding: 20px 24px 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .sg2-lesson {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 24px;
            border-radius: 14px;
            background: var(--study-bg-secondary, #fff);
            border: 1px solid var(--study-border);
            transition: all 0.15s;
        }
        .sg2-lesson.is-current {
            border: 1px solid var(--study-border);
            border-left: 3px solid var(--study-accent);
        }
        .sg2-module.is-recommended {
            outline: 2px solid var(--study-accent-dim, rgba(232,133,58,0.18));
        }
        .sg2-module-recommended {
            font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
            color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--study-accent) 92%, #fff), var(--study-accent), color-mix(in srgb, var(--study-accent) 88%, #000)); padding: 2px 8px; border-radius: 999px;
            margin-left: 4px;
        }
        .sg2-module.is-locked {
            opacity: 0.6;
        }
        .sg2-module.is-locked .sg2-module-icon {
            background: var(--study-bg-tertiary);
            color: var(--study-text-tertiary);
        }
        .sg2-module.is-locked:hover .sg2-module-icon {
            background: var(--study-bg-tertiary);
        }
        .sg2-lesson.is-done {
            opacity: 0.7;
        }
        .sg2-lesson-left {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            min-width: 0;
            flex: 1;
        }
        .sg2-lesson-icon {
            border: none;
            background: var(--study-accent-dim, rgba(232,133,58,0.08));
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 50%;
            cursor: pointer;
            color: var(--study-accent);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .sg2-lesson.is-done .sg2-lesson-icon { background: rgba(34,197,94,0.08); color: #22c55e; }
        .sg2-lesson.is-current .sg2-lesson-icon { background: var(--study-accent-dim, rgba(232,133,58,0.12)); color: var(--study-accent); }
        .sg2-lesson-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.35;
        }
        .sg2-lesson.is-done .sg2-lesson-title { text-decoration: line-through; color: var(--text-secondary); }
        .sg2-lesson-action {
            border: none;
            background: transparent;
            padding: 8px 20px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
            transition: all 0.15s;
            border-radius: 999px;
        }
        .sg2-lesson-action:hover { color: var(--study-accent); background: rgba(232,133,58,0.06); }
        .sg2-lesson-action.is-primary {
            color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--study-accent) 92%, #fff), var(--study-accent), color-mix(in srgb, var(--study-accent) 88%, #000));
            padding: 8px 20px; border-radius: 999px;
        }
        .sg2-lesson-action.is-primary:hover { background: var(--study-accent-hover, var(--accent-orange)); }
        .sg2-lesson-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .sg2-lesson-meta {
            display: flex; align-items: center; gap: 8px; margin-top: 2px;
        }
        .sg2-lesson-type {
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--study-text-tertiary);
        }
        .sg2-lesson-time {
            font-size: 11px; color: var(--study-text-tertiary);
        }
        .sg2-lesson-actions {
            display: flex; align-items: center; gap: 8px; flex-shrink: 0;
        }
        .sg2-lesson-status-done {
            font-size: 11px; font-weight: 600; color: var(--study-text-tertiary);
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .sg2-lesson-detail { font-size: 14px; color: var(--study-text-secondary); line-height: 1.55; margin-top: 2px; }
        .sg2-lesson-donewhen { font-size: 12px; font-weight: 600; color: var(--study-accent); line-height: 1.4; margin-top: 4px; }
        /* Key concept checklist */
        .sg2-concept-header {
            font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--study-text-tertiary); padding: 2px 4px 4px;
        }
        .sg2-lesson.sg2-concept {
            padding: 14px 18px;
            cursor: pointer;
            align-items: center;
            gap: 14px;
        }
        .sg2-lesson.sg2-concept:hover {
            border-color: var(--study-accent-dim, rgba(232,133,58,0.35));
            background: var(--study-bg-secondary, #fff);
        }
        .sg2-lesson.sg2-concept.is-done {
            background: rgba(34,197,94,0.04);
            border-color: rgba(34,197,94,0.2);
        }
        .sg2-concept-check {
            border: 2px solid var(--study-border);
            background: var(--study-bg-secondary, #fff);
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 50%;
            cursor: pointer;
            color: transparent;
            flex-shrink: 0;
            margin-top: 0;
            transition: all 0.15s;
        }
        .sg2-concept-check:hover {
            border-color: var(--study-accent);
        }
        .sg2-concept-check.is-done {
            background: #22c55e;
            border-color: #22c55e;
            color: #fff;
        }
        .sg2-concept-title {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
        }
        .sg2-lesson.sg2-concept.is-done .sg2-concept-title {
            text-decoration: line-through;
            color: var(--study-text-secondary);
        }
        .sg2-concept-empty {
            font-size: 13px; color: var(--study-text-tertiary);
            padding: 10px 4px; font-style: italic;
        }
        .sg2-module-tools {
            display: flex; flex-wrap: wrap; gap: 8px;
            padding: 10px 2px 2px;
            margin-top: 4px;
            border-top: 1px dashed var(--study-border);
            padding-top: 14px;
        }
        .sg2-module-tool {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px;
            font-size: 11px; font-weight: 700;
            letter-spacing: 0.06em; text-transform: uppercase;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary, #fff);
            color: var(--text-secondary);
            border-radius: 999px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s;
        }
        .sg2-module-tool:hover {
            border-color: var(--study-accent);
            color: var(--study-accent);
            background: rgba(232,133,58,0.06);
        }
        @media (max-width: 600px) {
            .sg2-lesson.sg2-concept { padding: 12px 14px; gap: 10px; }
            .sg2-concept-check { width: 26px; height: 26px; }
            .sg2-concept-title { font-size: 14px; }
            .sg2-module-tool { font-size: 10px; padding: 6px 10px; }
        }
        /* Task Modal */
        .sg-task-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(4px); padding: 20px;
        }
        .sg-task-modal {
            background: var(--study-bg-secondary, #fff); border-radius: 20px;
            padding: 32px; max-width: 640px; width: 100%;
            max-height: 85vh; overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .sg-task-header {
            display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
        }
        .sg-task-type {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 999px;
            background: var(--study-accent-dim, rgba(232,133,58,0.12)); color: var(--study-accent);
            font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
        }
        .sg-task-stages {
            display: flex; align-items: center; gap: 6px;
        }
        .sg-stage {
            font-size: 14px; font-weight: 700; color: var(--study-text-tertiary);
            padding: 10px 20px; border-radius: 999px; transition: all 0.15s;
            cursor: pointer; user-select: none;
            border: 1px solid transparent;
        }
        .sg-stage:hover {
            color: var(--study-text);
            border-color: var(--study-border);
        }
        .sg-stage:focus-visible {
            outline: 2px solid var(--study-accent);
            outline-offset: 2px;
        }
        .sg-stage.active {
            background: var(--study-accent-dim, rgba(232,133,58,0.12)); color: var(--study-accent);
            border-color: transparent;
        }
        /* Subtle "there's more below, scroll" cue shown on unit open. Fades
           out once the user starts scrolling. */
        .rc-scroll-cue {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            width: fit-content; margin: 10px auto 0;
            font-size: 12px; font-weight: 700; color: var(--study-text-tertiary);
            text-transform: uppercase; letter-spacing: .08em;
            animation: rcScrollCueBob 1.8s ease-in-out infinite;
            opacity: .85;
        }
        .rc-scroll-cue.is-hidden { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
        @keyframes rcScrollCueBob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(6px); }
        }
        .sg-task-lesson-content {
            max-height: 460px; overflow-y: auto; padding: 28px; border-radius: 16px;
            background: var(--study-bg-tertiary); border: 1px solid var(--study-border);
            font-size: 15px; line-height: 1.8; color: var(--study-text-secondary);
            margin-bottom: 24px;
        }
        .sg-task-lesson-content h1, .sg-task-lesson-content h2, .sg-task-lesson-content h3 {
            color: var(--study-text); margin: 16px 0 8px; font-size: 16px;
        }
        .sg-task-lesson-content strong { color: var(--study-accent); }
        .sg-task-lesson-content ul, .sg-task-lesson-content ol { padding-left: 20px; margin: 8px 0; }
        .sg-task-stage { }
        .sg-practice-options { display: flex; flex-direction: column; gap: 8px; }
        .sg-practice-option {
            width: 100%; text-align: left; padding: 14px 18px; border-radius: 12px;
            border: 2px solid var(--study-border); background: var(--study-bg-tertiary);
            color: var(--study-text); font-size: 14px; font-family: inherit; font-weight: 500;
            cursor: pointer; transition: all 0.15s; line-height: 1.4;
        }
        .sg-practice-option:hover:not(:disabled) { border-color: var(--study-accent); background: rgba(232,133,58,0.05); }
        .sg-practice-option:disabled { cursor: default; opacity: 0.7; }
        .sg-practice-option.is-correct { border-color: #22c55e; background: rgba(34,197,94,0.1); color: #22c55e; font-weight: 700; }
        .sg-practice-option.is-wrong { border-color: #ef4444; background: rgba(239,68,68,0.1); color: #ef4444; }
        .sg-task-close {
            border: none; background: transparent; color: var(--study-text-tertiary);
            cursor: pointer; padding: 4px; border-radius: 8px;
        }
        .sg-task-close:hover { background: var(--study-bg-tertiary); }
        .sg-task-title {
            font-size: 28px; font-weight: 800; color: var(--study-text);
            margin: 0 0 12px; line-height: 1.2;
        }
        .sg-task-instruction {
            font-size: 14px; color: var(--study-text-secondary); line-height: 1.6;
            margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
            background: rgba(232,133,58,0.06); border-left: 3px solid var(--study-accent);
        }
        .sg-task-compare-items {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .sg-task-compare-chip {
            padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
            background: var(--study-bg-tertiary); color: var(--study-text);
        }
        .sg-task-textarea {
            width: 100%; border: 2px solid var(--study-border); border-radius: 16px;
            padding: 20px; font-size: 16px; font-family: inherit; line-height: 1.7;
            background: var(--study-bg-tertiary); color: var(--study-text);
            resize: vertical; min-height: 240px; outline: none; transition: border-color 0.15s;
        }
        .sg-task-textarea:focus { border-color: var(--study-accent); }
        .sg-task-textarea::placeholder { color: var(--study-text-tertiary); }
        .sg-task-footer {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-top: 16px; flex-wrap: wrap;
        }
        .sg-task-hint {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; color: var(--study-text-tertiary); font-style: italic;
        }
        .sg-task-submit {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 14px 28px; border-radius: 14px; border: none;
            background: linear-gradient(180deg, color-mix(in srgb, var(--study-accent) 92%, #fff), var(--study-accent), color-mix(in srgb, var(--study-accent) 88%, #000)); color: var(--study-accent-text, var(--bg-base, #fff));
            font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
            transition: all 0.15s;
        }
        .sg-task-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,133,58,0.3); }
        .sg-task-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        /* Task Result */
        .sg-task-result {
            margin-top: 20px;
            padding: 28px;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,247,255,0.96) 100%);
            border: 1px solid color-mix(in srgb, var(--study-border) 78%, var(--study-accent) 22%);
            box-shadow: 0 18px 44px rgba(76, 81, 109, 0.08);
            text-align: center;
        }
        .sg-task-grade {
            display: inline-flex; align-items: center; justify-content: center;
            width: 56px; height: 56px; border-radius: 50%;
            font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 8px;
        }
        .sg-task-score { font-size: 20px; font-weight: 800; color: var(--study-text); margin-bottom: 10px; }
        .sg-task-feedback {
            max-width: 760px;
            margin: 0 auto 18px;
            font-size: 15px;
            color: var(--study-text);
            line-height: 1.75;
            text-align: left;
        }
        .sg-task-feedback p {
            margin: 0 0 12px;
            color: inherit;
        }
        .sg-task-feedback p:last-child { margin-bottom: 0; }
        .sg-task-feedback strong { color: var(--study-text); font-weight: 800; }
        .sg-task-feedback ul, .sg-task-feedback ol {
            margin: 0 0 12px 20px;
            padding: 0;
        }
        .sg-task-feedback li { margin: 4px 0; }
        .sg-task-matched, .sg-task-missed {
            text-align: left;
            margin: 0 auto 12px;
            font-size: 13px;
            max-width: 760px;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid var(--study-border);
            background: rgba(255,255,255,0.68);
        }
        .sg-task-matched strong, .sg-task-missed strong {
            display: block; margin-bottom: 6px; font-size: 11px; text-transform: uppercase;
            letter-spacing: 0.08em; color: var(--study-text-secondary);
        }
        .sg-task-fact-good, .sg-task-fact-bad {
            display: inline-block;
            padding: 7px 12px;
            border-radius: 10px;
            margin: 4px 6px 4px 0;
            font-size: 12px;
            line-height: 1.45;
            font-weight: 700;
            border: 1px solid transparent;
        }
        .sg-task-fact-good {
            background: rgba(34,197,94,0.12);
            border-color: rgba(34,197,94,0.24);
            color: #15803d;
        }
        .sg-task-fact-bad {
            background: rgba(239,68,68,0.12);
            border-color: rgba(239,68,68,0.22);
            color: #c2410c;
        }
        .sg-task-result-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
        .sg-task-complete-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 20px; border-radius: 10px; border: none;
            background: #22c55e; color: #fff; font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: all 0.15s ease;
        }
        .sg-task-complete-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,197,94,0.3); }
        .sg-task-complete-btn:active { transform: translateY(0); filter: brightness(0.95); }
        .sg-task-retry-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 20px; border-radius: 10px;
            border: 1px solid var(--study-border); background: var(--study-bg-secondary);
            color: var(--study-text-secondary); font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit; transition: all 0.15s ease;
        }
        .sg-task-retry-btn:hover { border-color: var(--study-accent); color: var(--study-accent); background: rgba(232,133,58,0.06); transform: translateY(-1px); }
        .sg-task-retry-btn:active { transform: translateY(0); }

        /* Recall topic picker */
        .rc-topic-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
        .rc-topic-card {
            display: flex; align-items: center; gap: 20px;
            padding: 24px 28px; border-radius: 18px;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary, #fff);
            cursor: pointer; font-family: inherit; text-align: left;
            width: 100%; box-sizing: border-box; transition: all 0.2s ease;
        }
        .rc-topic-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-color: var(--study-accent); }
        .rc-topic-card:active { transform: translateY(0); }
        .rc-topic-card.is-done { opacity: 0.5; }
        .rc-topic-card.is-done:hover { opacity: 0.75; }
        .rc-topic-icon {
            width: 50px; height: 50px; border-radius: 50%;
            background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1);
        }
        .rc-topic-card.is-done .rc-topic-icon { background: rgba(34,197,94,0.08); color: #22c55e; border-color: rgba(34,197,94,0.2); }
        .rc-topic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
        .rc-topic-title { font-size: 17px; font-weight: 800; color: var(--study-text); }
        .rc-topic-detail { font-size: 13px; color: var(--study-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .rc-topic-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .rc-topic-badge {
            font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
            padding: 8px 16px; border-radius: 999px; flex-shrink: 0;
        }
        .rc-topic-custom { border-style: dashed; border-color: var(--study-border); }
        .rc-topic-custom:hover { border-style: solid; }
        /* Voice blurt UI */
        .rc-voice-section { margin-top: 16px; }
        .rc-voice-divider { text-align: center; position: relative; margin-bottom: 16px; }
        .rc-voice-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--study-border); }
        .rc-voice-divider span { position: relative; background: var(--study-bg); padding: 0 16px; font-size: 12px; font-weight: 600; color: var(--study-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
        .rc-voice-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; border-radius: 16px; border: 2px dashed var(--study-border); background: var(--study-bg-secondary); cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: left; }
        .rc-voice-btn:hover { border-color: var(--study-accent); border-style: solid; }
        .rc-voice-btn.rc-voice-recording { border-color: #ef4444; border-style: solid; background: rgba(239,68,68,0.06); }
        .rc-voice-btn.rc-voice-processing { border-color: var(--study-accent); border-style: solid; opacity: 0.7; cursor: wait; }
        .rc-voice-btn.rc-voice-speaking { border-color: var(--study-accent); border-style: solid; background: var(--study-accent-dim); }
        .rc-voice-btn-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--study-accent-dim, rgba(232,133,58,0.1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--study-accent); transition: all 0.2s; }
        .rc-voice-recording .rc-voice-btn-icon { background: rgba(239,68,68,0.15); color: #ef4444; animation: rcPulse 1.5s ease infinite; }
        .rc-voice-btn span { font-size: 15px; font-weight: 600; color: var(--study-text-secondary); }
        .rc-voice-status { margin-top: 12px; font-size: 13px; color: var(--study-text-tertiary); display: flex; align-items: center; gap: 8px; }
        .rc-voice-pulse { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; animation: rcPulse 1.5s ease infinite; }
        .rc-voice-feedback { margin-top: 12px; padding: 16px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 12px; }
        @keyframes rcPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }

        /* ═══ Feynman Step-Through ═══ */
        .feynman-flow { width: 100%; }
        .feynman-progress { font-size: 14px; font-weight: 800; color: var(--study-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 28px; }
        .feynman-prompt { font-size: 24px; font-weight: 800; color: var(--study-text); margin-bottom: 20px; }
        .feynman-concept { font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--study-text); padding: 40px 32px; background: var(--study-bg-tertiary); border: 1px solid var(--study-border); border-radius: 20px; margin-bottom: 28px; text-align: center; line-height: 1.3; }
        .feynman-hint { font-size: 16px; color: var(--study-text-tertiary); font-style: italic; margin-bottom: 24px; }
        .feynman-input { width: 100%; min-height: 260px; padding: 24px; border: 2px solid var(--study-border); border-radius: 18px; background: var(--study-bg-tertiary); color: var(--study-text); font-size: 18px; font-family: inherit; line-height: 1.7; resize: vertical; outline: none; box-sizing: border-box; }
        .feynman-input:focus { border-color: var(--study-accent); }
        .feynman-next { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 14px; border: none; background: var(--study-text); color: var(--study-bg, #000); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
        .feynman-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,255,255,0.1); }

        /* ═══ Elaborate Connection Pairs ═══ */
        .elaborate-flow { width: 100%; }
        .elaborate-progress { font-size: 14px; font-weight: 800; color: var(--study-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 28px; }
        .elaborate-pair { display: flex; align-items: stretch; gap: 20px; margin-bottom: 28px; }
        .elaborate-concept { flex: 1; padding: 28px 24px; background: var(--study-bg-tertiary); border: 1px solid var(--study-border); border-radius: 18px; text-align: center; font-size: 18px; font-weight: 700; color: var(--study-text); display: flex; align-items: center; justify-content: center; line-height: 1.4; }
        .elaborate-connector { font-size: 32px; color: var(--study-accent); flex-shrink: 0; display: flex; align-items: center; }
        .elaborate-question { font-size: 22px; font-weight: 800; color: var(--study-text); margin-bottom: 24px; }
        .elaborate-input { width: 100%; min-height: 240px; padding: 24px; border: 2px solid var(--study-border); border-radius: 18px; background: var(--study-bg-tertiary); color: var(--study-text); font-size: 18px; font-family: inherit; line-height: 1.7; resize: vertical; outline: none; box-sizing: border-box; }
        .elaborate-input:focus { border-color: var(--study-accent); }
        .elaborate-next { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 14px; border: none; background: var(--study-text); color: var(--study-bg, #000); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
        .elaborate-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,255,255,0.1); }
        @media (max-width: 600px) { .elaborate-pair { flex-direction: column; } }

        /* ═══ Technique Picker Grid ═══ */
        /* Learn hero banner */
        .learn-hero {
            border-radius: 24px; padding: 80px 48px 56px; margin-bottom: 40px;
            background: #000; position: relative; overflow: hidden;
            min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
        }
        .learn-hero-bg {
            position: absolute; inset: 0; background-size: cover; background-position: center;
            opacity: 0.35; pointer-events: none; filter: grayscale(1);
        }
        .learn-hero::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.75) 100%);
            pointer-events: none;
        }
        .learn-hero > *:not(.learn-hero-bg) { position: relative; z-index: 1; }
        .learn-hero-tags { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .learn-hero-tag {
            font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
            padding: 6px 14px; border-radius: 6px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
        }
        .learn-hero-meta { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500; }
        .learn-hero-title {
            font-size: clamp(32px, 5vw, 52px); font-weight: 900; color: #fff;
            line-height: 1.08; margin-bottom: 14px; letter-spacing: -0.03em;
        }
        .learn-hero-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.6; max-width: 600px; margin-bottom: 20px; }
        .learn-hero-resume {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 12px 24px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
            background: #fff; color: #000; font-size: 14px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: all 0.15s;
        }
        .learn-hero-resume:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,255,255,0.1); }
        /* Session picker hero */
        .session-hero {
            border-radius: 24px; padding: 48px 40px 40px; margin-bottom: 28px;
            background: #000; position: relative; overflow: hidden;
            min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
        }
        .session-hero::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%);
            pointer-events: none;
        }
        .session-hero > * { position: relative; z-index: 1; }
        .session-hero > .learn-hero-bg { position: absolute !important; z-index: 0 !important; }
        .session-hero-tag {
            font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
            padding: 5px 12px; border-radius: 6px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8);
            width: fit-content; margin-bottom: 16px;
        }
        .session-hero-title {
            font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: #fff;
            line-height: 1.1; margin-bottom: 10px; letter-spacing: -0.02em;
        }
        .session-hero-desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.6; max-width: 500px; margin-bottom: 20px; }
        .session-hero-actions { display: flex; gap: 10px; }
        .session-hero-btn {
            padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: all 0.15s; border: 1px solid rgba(255,255,255,0.2);
            background: transparent; color: #fff;
        }
        .session-hero-btn-primary { background: #fff; color: #000; border-color: #fff; }
        .session-hero-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,255,255,0.1); }
        /* Bento grid */
        .session-bento {
            display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px;
        }
        .session-card {
            background: var(--study-bg-secondary); border: 1px solid var(--study-border);
            border-radius: 18px; padding: 24px; cursor: pointer; font-family: inherit;
            text-align: left; transition: all 0.2s; position: relative; display: flex;
            flex-direction: column; min-height: 120px;
        }
        .session-card:hover { transform: translateY(-2px); border-color: var(--study-accent); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        .session-card-hero { min-height: 280px; }
        .session-card-tall { min-height: 280px; }
        .session-card-wide { flex-direction: row; align-items: center; gap: 20px; min-height: auto; padding: 28px 32px; width: 100%; margin-bottom: 14px; }
        .session-row-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        .session-rest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
        .session-card-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; }
        .session-card-icon {
            width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
            color: var(--study-text-tertiary); margin-bottom: 14px;
        }
        .session-card-label {
            font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
            color: var(--study-text-tertiary); margin-bottom: 10px;
        }
        .session-card-title { font-size: 17px; font-weight: 800; color: var(--study-text); line-height: 1.25; margin: 0 0 8px; }
        .session-card-hero .session-card-title { font-size: 24px; line-height: 1.2; }
        .session-card-wide .session-card-title { font-size: 20px; margin: 0; flex: 1; }
        .session-card-desc { font-size: 13px; color: var(--study-text-secondary); line-height: 1.5; flex: 1; margin-bottom: 0; }
        .session-card-row { display: flex; align-items: center; gap: 16px; width: 100%; }
        .session-card-text { flex: 1; min-width: 0; }
        .session-card-text .session-card-label { margin-bottom: 6px; }
        .session-card-text .session-card-title { margin-bottom: 4px; }
        .session-card-num {
            font-size: 42px; font-weight: 900; color: var(--study-text-tertiary);
            background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 18px;
            line-height: 1; flex-shrink: 0; min-width: 70px; text-align: center;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .session-card:hover .session-card-num { color: var(--study-text-secondary); background: rgba(255,255,255,0.08); }
        .session-card-score {
            font-size: 36px; font-weight: 900; color: var(--study-text-tertiary); margin-top: auto; padding-top: 12px;
        }
        .session-card-action {
            width: 36px; height: 36px; border-radius: 10px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            color: var(--study-text-secondary); margin-top: auto; align-self: flex-end;
        }
        .session-card-play {
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
            display: flex; align-items: center; justify-content: center;
            color: var(--study-text); flex-shrink: 0; margin-left: auto;
        }
        .session-card:hover .session-card-action,
        .session-card:hover .session-card-play { background: var(--study-accent); color: #fff; border-color: var(--study-accent); }
        /* Session history */
        .session-history-section { margin-top: 8px; }
        .session-section-title {
            font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--study-text-tertiary); margin-bottom: 14px;
        }
        .session-history-list { display: flex; flex-direction: column; gap: 8px; }
        .session-history-item {
            display: flex; align-items: center; gap: 14px; padding: 14px 18px;
            background: var(--study-bg-secondary); border: 1px solid var(--study-border);
            border-radius: 12px;
        }
        .session-history-grade {
            width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center;
            justify-content: center; font-size: 16px; font-weight: 900; flex-shrink: 0;
        }
        .session-history-info { display: flex; flex-direction: column; gap: 2px; }
        .session-history-topic { font-size: 14px; font-weight: 700; color: var(--study-text); }
        .session-history-meta { font-size: 12px; color: var(--study-text-tertiary); }
        @media (max-width: 700px) {
            .session-bento { grid-template-columns: 1fr; }
            .session-card-hero, .session-card-wide { grid-column: span 1; }
            .session-card-wide { flex-direction: column; }
            .session-rest-grid { grid-template-columns: 1fr; }
        }

        /* Session text hero (no image) */
        .session-text-hero { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--study-border); text-align: center; }
        .session-text-hero-desc { margin-left: auto; margin-right: auto; }
        .session-text-hero-row { justify-content: center; }
        .session-text-hero-img { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 2px solid var(--study-border); }
        .session-text-hero-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.6; }
        .session-text-hero-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--study-text-tertiary); margin-bottom: 14px; }
        .session-text-hero-title { font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: var(--study-text); line-height: 1.08; margin-bottom: 14px; letter-spacing: -0.03em; }
        .session-text-hero-desc { font-size: 15px; color: var(--study-text-secondary); line-height: 1.6; max-width: 560px; margin-bottom: 24px; }
        .session-text-hero-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
        .session-text-hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: 1px solid var(--study-border); background: var(--study-text); color: var(--study-bg, #000); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
        .session-text-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,255,255,0.1); }
        .session-text-hero-meta { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--study-text-tertiary); }
        .session-text-hero-stat { font-size: 13px; font-weight: 800; color: var(--study-text); }

        /* Square topic grid */
        .session-sq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; width: 100%; }
        .session-sq-card {
            background: var(--study-bg-secondary); border: 1px solid var(--study-border);
            border-radius: 20px; padding: 0; cursor: pointer; font-family: inherit;
            text-align: center; transition: all 0.2s; display: flex; flex-direction: column;
            min-height: 240px;
        }
        .session-sq-card:hover { transform: translateY(-3px); border-color: var(--study-accent); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
        .session-sq-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--study-border); }
        .session-sq-card-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--study-text-tertiary); }
.session-sq-card-num { font-size: 14px; font-weight: 900; color: var(--study-text-tertiary); }
.session-sq-card-num.is-complete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
        .session-sq-card-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 24px 28px; }
        .session-sq-card-title { font-size: 19px; font-weight: 800; color: var(--study-text); line-height: 1.3; margin: 0 0 8px; }
        .session-sq-card-desc { font-size: 13px; color: var(--study-text-tertiary); line-height: 1.5; margin: 0; }
        @media (max-width: 700px) { .session-sq-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .session-sq-grid { grid-template-columns: 1fr; } }

        .technique-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        .technique-section-title { font-size: 22px; font-weight: 800; color: var(--study-text); letter-spacing: -0.02em; }
        .technique-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; width: 100%; }
        .technique-card {
            display: flex; flex-direction: column; gap: 0;
            padding: 20px 20px 16px; border-radius: 16px; border: 1px solid var(--study-border);
            background: var(--study-bg-secondary); cursor: pointer; font-family: inherit;
            text-align: left; width: 100%; box-sizing: border-box; transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .technique-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-color: var(--study-accent); }
        .technique-card-icon { margin-bottom: 10px; }
        .technique-card-icon i { width: 22px; height: 22px; }
        .technique-card-name { font-size: 15px; font-weight: 800; color: var(--study-text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
        .technique-card-desc { font-size: 13px; color: var(--study-text-secondary); line-height: 1.5; flex: 1; }
        .technique-card-action { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
        .technique-card-action i { width: 14px; height: 14px; }
        .technique-badge { font-size: 10px; padding: 2px 8px; border-radius: 6px; background: var(--study-accent); color: var(--study-accent-text, #000); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
        .technique-badge-new { background: #ef4444; color: #fff; }
        .technique-change-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--study-text-tertiary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 16px; font-family: inherit; }
        .technique-change-btn:hover { color: var(--study-text); }
        .technique-change-btn i { width: 14px; height: 14px; }
        @media (max-width: 640px) { .technique-grid { grid-template-columns: 1fr; } }
        /* Clean technique-picker header, replaces the old dark `.learn-hero` banner.
           Keeps everything above the fold on short viewports and puts the focus
           on the cards themselves, which is what students actually act on. */
        .technique-picker-head {
            display: flex; align-items: flex-end; justify-content: space-between;
            gap: 24px; padding: 4px 0 22px; margin-bottom: 4px;
            border-bottom: 1px solid var(--study-border);
        }
        .technique-picker-head-text { min-width: 0; }
        .technique-picker-title {
            font-size: 28px; font-weight: 800; color: var(--study-text);
            letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.15;
        }
        .technique-picker-sub {
            font-size: 14px; color: var(--study-text-secondary);
            margin: 0; line-height: 1.5; max-width: 720px;
        }
        .technique-picker-sub strong { color: var(--study-text); font-weight: 700; }
        .technique-picker-meta {
            display: inline-flex; align-items: center; padding: 2px 10px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
            border-radius: 999px; background: var(--study-bg-secondary);
            border: 1px solid var(--study-border); color: var(--study-text-tertiary);
            margin-left: 4px; vertical-align: 1px;
        }
        .technique-picker-resume {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
            background: var(--study-text); color: var(--study-bg); font-weight: 700;
            font-size: 13px; font-family: inherit; letter-spacing: 0.01em;
            transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
            white-space: nowrap;
        }
        .technique-picker-resume:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); opacity: 0.92; }
        .technique-grid { margin-top: 22px; }
        @media (max-width: 760px) {
            .technique-picker-head {
                flex-direction: column; align-items: flex-start; gap: 14px;
                padding: 2px 0 18px;
            }
            .technique-picker-title { font-size: 24px; }
            .technique-picker-resume { align-self: stretch; justify-content: center; }
        }
        .rc-back-btn {
            width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--study-border);
            background: var(--study-bg-secondary); color: var(--study-text-secondary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.15s ease; flex-shrink: 0;
        }
        .rc-back-btn:hover { border-color: var(--study-accent); color: var(--study-accent); transform: translateX(-2px); }
        @media (max-width: 760px) {
            .sg2-shell { padding: 16px 12px 32px; }
            .sg2-hero { padding: 0 0 16px; gap: 12px; }
            .sg2-hero-simple { padding: 0 0 16px; margin-bottom: 16px; }
            .sg2-title { font-size: 1.5rem; }
            .sg2-subtitle-meta { font-size: 11px; gap: 6px; }
            .sg2-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
            .sg2-stat-card { aspect-ratio: auto; padding: 10px; }
            .sg2-stat-value { font-size: 16px; }
            .sg2-stat-label { font-size: 9px; margin-bottom: 4px; }
            .sg2-hero-ring { width: 56px; height: 56px; }
            .sg2-ring-pct { font-size: 13px; }
            .sg2-focus-banner { min-height: 200px; padding: 20px 16px; }
            .sg2-focus-title { font-size: 1.2rem; }
            .sg2-focus-desc { font-size: 13px; }
            .sg2-focus-btns { flex-direction: column; gap: 8px; }
            .sg2-focus-btn-primary, .sg2-focus-btn-secondary { width: 100%; justify-content: center; }
            .sg2-path-header { flex-direction: column; align-items: flex-start; gap: 8px; }
            .sg2-path-title { font-size: 1rem; }
            .sg2-module { border-radius: 12px; }
            .sg2-module-header { padding: 14px; gap: 10px; }
            .sg2-module-left { gap: 12px; }
            .sg2-module-icon { width: 38px; height: 38px; border-radius: 10px; }
            .sg2-module-title { font-size: 1rem; }
            .sg2-module-num { font-size: 9px; }
            .sg2-module-stats { display: none; }
            .sg2-module-body { padding: 10px 10px 14px; gap: 8px; }
            .sg2-lesson { padding: 12px 14px; gap: 10px; border-radius: 10px; flex-wrap: wrap; }
            .sg2-lesson-left { gap: 10px; }
            .sg2-lesson-icon { width: 36px; height: 36px; }
            .sg2-lesson-icon i { width: 16px !important; height: 16px !important; }
            .sg2-lesson-title { font-size: 14px; }
            .sg2-lesson-detail { font-size: 12px; }
            .sg2-lesson-donewhen { font-size: 11px; }
            .sg2-lesson-action { padding: 6px 14px; font-size: 11px; }
            .sg2-lesson-action.is-primary { padding: 6px 14px; }
            .sg2-lesson-meta { gap: 6px; }
            .sg2-lesson-type { font-size: 10px; }
            .sg2-lesson-time { font-size: 10px; }
            .sg2-filter-tabs { gap: 4px; }
            .sg2-filter-tab { padding: 6px 10px; font-size: 11px; }
            .sg-task-modal { padding: 16px; }
            .sg2-expand-all { font-size: 12px; }
        }
        .sg2-stat-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            justify-content: flex-start;
            gap: 14px;
        }
        .sg2-stat {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 10px;
            min-height: 92px;
            padding: 18px 20px;
            border-radius: 16px;
            background: color-mix(in srgb, var(--bg-raised) 92%, var(--bg-base));
            border: none;
            color: var(--text-secondary);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }
        .sg2-stat i {
            display: none;
        }
        .sg2-stat span {
            display: block;
            font-size: clamp(1.8rem, 1.55rem + 0.55vw, 2.3rem);
            font-weight: 900;
            letter-spacing: -0.05em;
            color: var(--text-primary);
            line-height: 1;
        }
        .sg2-stat small {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .sg2-progress {
            height: 10px;
            border-radius: 999px;
            overflow: hidden;
            background: var(--border-subtle);
        }
        .sg2-progress-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent-amber), var(--accent-orange));
        }
        .sg2-next-card,
        .sg2-priority-card,
        .sg2-current-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 18px 20px;
            border-radius: 20px;
            background: color-mix(in srgb, var(--bg-raised) 96%, transparent);
            border: 1px solid var(--border-default);
        }
        .sg2-priority-card,
        .sg2-current-card {
            gap: 14px;
            padding: 24px 28px;
            border-radius: 20px;
        }
        .sg2-focus-card {
            background: color-mix(in srgb, var(--bg-raised) 95%, var(--bg-base));
            border: none;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
        }
        .sg2-priority-copy {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 920px;
        }
        .sg2-priority-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            min-height: 28px;
            padding: 0 12px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--glow-amber) 92%, var(--bg-raised));
            color: var(--accent-orange);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .sg2-priority-title {
            margin: 0;
            font-size: clamp(1.95rem, 1.55rem + 0.8vw, 2.65rem);
            line-height: 1.08;
            letter-spacing: -0.045em;
            color: var(--text-primary);
            max-width: 760px;
        }
        .sg2-priority-detail {
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-secondary);
            max-width: 720px;
        }
        .sg2-priority-reason {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-tertiary);
            max-width: 760px;
        }
        .sg2-next-title, .sg2-section-title, .sg2-side-title {
            margin: 0;
            font-size: 1.6rem;
            line-height: 1.15;
            letter-spacing: -0.03em;
            color: var(--text-primary);
        }
        .sg2-next-detail, .sg2-next-reason, .sg2-ready-copy, .sg2-tool-detail, .sg2-side-item-detail, .sg2-side-empty {
            font-size: 14px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .sg2-next-reason {
            color: var(--accent-orange);
            font-weight: 600;
        }
        .sg2-next-actions, .sg2-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sg2-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
            gap: 22px;
            align-items: start;
        }
        .sg2-main, .sg2-side {
            min-width: 0;
        }
        .sg2-phase-list, .sg2-side {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .sg2-phase-card, .sg2-side-card {
            background: color-mix(in srgb, var(--bg-raised) 95%, transparent);
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
            overflow: hidden;
        }
        .sg2-phase-card.is-open {
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
        }
        .sg2-phase-summary-wrap {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 18px;
            padding: 20px 22px;
            align-items: center;
        }
        .sg2-phase-summary {
            width: 100%;
            border: none;
            background: transparent;
            color: inherit;
            text-align: left;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
        }
        .sg2-phase-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 0;
        }
        .sg2-phase-left {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            min-width: 0;
        }
        .sg2-phase-number {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--glow-amber);
            color: var(--accent-orange);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            flex-shrink: 0;
        }
        .sg2-phase-copy h3 {
            margin: 0 0 8px;
            font-size: 1.15rem;
            line-height: 1.2;
            color: var(--text-primary);
        }
        .sg2-phase-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 10px;
            align-items: center;
        }
        .sg2-phase-summary-actions {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 10px;
            min-width: 172px;
        }
        .sg2-pill, .sg2-phase-time {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .sg2-pill {
            padding: 5px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--glow-amber) 88%, var(--bg-raised));
            color: var(--accent-orange);
        }
        .sg2-phase-chevron {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: color-mix(in srgb, var(--bg-elevated) 92%, var(--bg-base));
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .sg2-phase-progress-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 0 0;
            color: var(--text-tertiary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .sg2-phase-progress-value {
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: normal;
            text-transform: none;
        }
        .sg2-phase-progress {
            height: 6px;
            margin: 10px 0 0;
            border-radius: 999px;
            overflow: hidden;
            background: var(--border-subtle);
        }
        .sg2-phase-progress-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent-amber), var(--accent-orange));
        }
        .sg2-phase-body {
            border-top: 1px solid var(--border-subtle);
            background: color-mix(in srgb, var(--bg-base) 92%, var(--bg-raised));
        }
        .sg2-phase-body-inner {
            padding: 16px 22px 18px;
        }
        .sg2-phase-description {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        .sg2-step-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
        }
        .sg2-step {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-subtle);
        }
        .sg2-step:last-child {
            border-bottom: none;
        }
        .sg2-step.is-done {
            opacity: 0.55;
        }
        .sg2-step-toggle {
            border: none;
            background: transparent;
            padding: 2px 0 0;
            cursor: pointer;
            color: var(--text-tertiary);
        }
        .sg2-step-title {
            font-size: 15px;
            font-weight: 800;
            line-height: 1.35;
            color: var(--text-primary);
        }
        .sg2-step-detail {
            margin-top: 4px;
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .sg2-step-focus-block {
            margin-top: 12px;
            padding: 14px;
            border-radius: 16px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, var(--bg-raised));
            border: 1px solid var(--border-subtle);
        }
        .sg2-step-focus-label {
            margin-bottom: 10px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--accent-orange);
        }
        .sg2-step-focus-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }
        .sg2-step-focus-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            padding: 11px 12px;
            border-radius: 14px;
            background: color-mix(in srgb, var(--bg-base) 92%, var(--bg-raised));
        }
        .sg2-step-focus-num {
            width: 22px;
            height: 22px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--glow-amber) 92%, var(--bg-raised));
            color: var(--accent-orange);
            font-size: 11px;
            font-weight: 800;
            flex-shrink: 0;
        }
        .sg2-step-focus-copy {
            min-width: 0;
        }
        .sg2-step-focus-title {
            font-size: 12.5px;
            font-weight: 700;
            line-height: 1.4;
            color: var(--text-primary);
        }
        .sg2-step-focus-detail {
            margin-top: 3px;
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-secondary);
        }
        .sg2-step-instruction {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--bg-elevated) 92%, var(--glow-amber));
            border-left: 3px solid var(--accent-amber);
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .sg2-step-instruction span {
            display: block;
            margin-bottom: 4px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent-orange);
        }
        .sg2-btn, .sg2-step-action, .sg2-regenerate, .sg2-mini-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 12px;
            font-family: inherit;
            font-weight: 700;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s, background .15s;
        }
        .sg2-btn, .sg2-regenerate {
            padding: 11px 16px;
            border: 1px solid var(--border-default);
            background: var(--bg-raised);
            color: var(--text-primary);
        }
        .sg2-btn-primary {
            background: var(--accent-amber);
            color: var(--bg-base);
            border-color: var(--accent-amber);
        }
        .sg2-btn-secondary {
            background: var(--bg-raised);
        }
        .sg2-step-action {
            padding: 9px 12px;
            border: 1px solid color-mix(in srgb, var(--accent-amber) 38%, var(--border-default));
            background: color-mix(in srgb, var(--glow-amber) 86%, var(--bg-raised));
            color: var(--accent-orange);
            font-size: 12px;
            white-space: nowrap;
        }
        .sg2-side-card {
            padding: 18px 18px 16px;
        }
        .sg2-side-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-subtle);
        }
        .sg2-side-item:last-child {
            border-bottom: none;
        }
        .sg2-side-item-title, .sg2-tool-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.35;
        }
        .sg2-mini-link {
            margin-top: 8px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--accent-orange);
            font-size: 12px;
            justify-content: flex-start;
        }
        .sg2-tool-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .sg2-tool-card {
            text-align: left;
            padding: 14px 14px 13px;
            border-radius: 16px;
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            cursor: pointer;
        }
        .sg2-tool-icon {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--glow-amber) 88%, var(--bg-raised));
            color: var(--accent-orange);
            margin-bottom: 10px;
        }
        .sg2-ready-score {
            font-size: 1.75rem;
            font-weight: 900;
            letter-spacing: -0.04em;
            color: var(--text-primary);
            margin: 6px 0 8px;
        }
        .sg2-ready-list {
            margin: 14px 0 0;
            padding-left: 18px;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.7;
        }
        @media (max-width: 1080px) {
            .sg2-layout {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 760px) {
            .sg2-shell {
                padding: 18px 16px 28px;
            }
            .sg2-hero {
                padding: 4px 0 0;
            }
            .sg2-stat-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .sg2-stat {
                min-width: 0;
            }
            .sg2-current-card {
                padding: 20px 18px;
            }
            .sg2-phase-summary-wrap {
                grid-template-columns: 1fr;
                gap: 14px;
                padding: 18px 16px;
            }
            .sg2-phase-head {
                padding: 0;
            }
            .sg2-phase-left {
                width: 100%;
            }
            .sg2-phase-summary-actions {
                width: 100%;
                min-width: 0;
                justify-content: flex-start;
            }
            .sg2-phase-progress-row {
                padding: 12px 0 0;
            }
            .sg2-phase-progress {
                margin: 10px 0 0;
            }
            .sg2-phase-body-inner {
                padding: 14px 16px 16px;
            }
            .sg2-step-list {
                padding: 0;
            }
            .sg2-step {
                grid-template-columns: auto minmax(0, 1fr);
            }
            .sg2-step-focus-list {
                grid-template-columns: 1fr;
            }
            .sg2-step-action {
                grid-column: 2;
                justify-self: start;
            }
        }

/* --- Editorial course/notes refresh, module content, module footer --- */

        /* ── Editorial Course / Notes Refresh ── */
        .study-layout.notes-active .study-bg,
        .study-layout.notes-active .study-bg-overlay,
        .study-layout.course-active .study-bg,
        .study-layout.course-active .study-bg-overlay {
            display: none !important;
        }
        .study-layout.notes-active .study-main,
        .study-layout.course-active .study-main {
            background: var(--study-bg);
        }
        .study-layout.course-active {
            --sidebar-w: 320px;
        }
        .study-layout.notes-active .detail-main,
        .study-layout.course-active .detail-main {
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        .study-layout.notes-active .detail-main.mode-reading {
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
        }
        .study-layout.notes-active .detail-main.mode-reading::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .study-layout.course-active .detail-main.mode-reading {
            overflow-y: auto;
            overflow-x: hidden;
        }
        [data-theme="light"] .study-layout.notes-active .detail-main,
        [data-theme="light"] .study-layout.course-active .detail-main {
            background: #f6efe3;
        }
        [data-theme="dark"] .study-layout.notes-active .detail-main,
        [data-theme="dark"] .study-layout.course-active .detail-main {
            background: #11161a;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading,
        .study-layout.course-active .detail-main-inner.mode-reading {
            padding: 0 0 24px 18px;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading {
            padding: 0 18px 24px;
            height: auto;
            min-height: 100%;
        }
        .study-layout.course-active .detail-main-inner.mode-reading {
            height: auto;
            min-height: 100%;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell,
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell {
            gap: 18px;
            border: none;
            border-radius: 0;
            background: transparent;
            padding: 0;
            box-shadow: none;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell {
            height: auto;
            min-height: 100%;
            overflow: visible;
            align-items: center;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading .notes-page-bar {
            width: min(100%, 1120px);
            margin: 8px auto 0;
            padding-top: 8px;
            padding-bottom: 14px;
        }
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell {
            height: auto;
            min-height: 100%;
            overflow: visible;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow,
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow {
            position: static !important;
            margin: 18px 0 0;
            padding: 14px 18px;
            border-radius: 24px !important;
            border: 1px solid var(--study-border) !important;
            background: var(--study-bg-secondary) !important;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow {
            display: flex;
            width: fit-content;
            max-width: min(100%, 1060px);
            align-self: center;
            margin-left: auto;
            margin-right: auto;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        /* dark toolbar override removed, uses CSS variables now */
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats,
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats {
            border-right-color: var(--study-border);
        }
        [data-theme="dark"] .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats,
        [data-theme="dark"] .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats {
            border-right-color: rgba(255, 255, 255, 0.08);
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow,
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow {
            border: none !important;
            border-radius: 0;
            background: transparent;
            overflow: visible;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow {
            width: min(100%, 1120px);
            margin: 0 auto;
            flex: 0 0 auto;
            height: auto !important;
            min-height: 0 !important;
            scrollbar-width: none;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell .ql-editor,
        .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell .ql-editor {
            padding: 22px 24px 48px !important;
            color: var(--study-text) !important;
            background: transparent;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell .ql-editor {
            height: auto !important;
            min-height: calc(100dvh - 280px);
            overflow-y: visible !important;
            overflow-x: hidden !important;
            scrollbar-width: none;
        }
        .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell .ql-editor::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .study-layout.notes-active .notes-view,
        .study-layout.notes-active .ql-editor,
        .study-layout.course-active .notes-view {
            max-width: 1120px;
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
        }
        .study-layout.notes-active .notes-view h1,
        .study-layout.notes-active .ql-editor h1,
        .study-layout.course-active .notes-view h1,
        .study-layout.course-active .notes-view h2,
        .study-layout.course-active .notes-view h3 {
            text-align: left !important;
        }
        .study-layout.notes-active .notes-view h1,
        .study-layout.notes-active .ql-editor h1,
        .study-layout.course-active .module-hero-title {
            text-wrap: balance;
        }
        .study-layout.notes-active .notes-view strong,
        .study-layout.notes-active .ql-editor strong,
        .study-layout.course-active .notes-view strong,
        .study-layout.course-active .module-content .notes-view strong {
            color: var(--study-text) !important;
            font-weight: 750;
        }
        /* Layout-active overrides for blockquotes used to force the
           orange-bar + peach fill on every quote in the module. That
           painted definitions, examples, AND formulas with the same
           treatment, which is why notes felt visually repetitive.
           Removed, blockquote styling is now tiered by content (see
           the .module-content .notes-view blockquote rules above).
           James 2026-05-12. */
        .study-layout.notes-active .notes-view img,
        .study-layout.notes-active .ql-editor img,
        .study-layout.course-active .notes-view img {
            max-width: min(100%, 860px);
            margin: 22px 0;
            border-radius: 18px;
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
        }
        .study-layout.notes-active .notes-view h2 .section-num,
        .study-layout.course-active .notes-view h2 .section-num {
            background: var(--study-accent);
        }
        .study-layout.notes-active .notes-callout,
        .study-layout.course-active .notes-callout {
            border-left-color: #0f172a;
            background: rgba(15, 23, 42, 0.05);
        }
        .study-layout.notes-active .notes-callout-label,
        .study-layout.course-active .notes-callout-label {
            color: #0f172a;
        }
        [data-theme="dark"] .study-layout.notes-active .notes-callout,
        [data-theme="dark"] .study-layout.course-active .notes-callout {
            border-left-color: #e2e8f0;
            background: rgba(226, 232, 240, 0.08);
        }
        [data-theme="dark"] .study-layout.notes-active .notes-callout-label,
        [data-theme="dark"] .study-layout.course-active .notes-callout-label {
            color: #e2e8f0;
        }

        .study-layout.course-active .module-nav-group {
            padding: 12px 14px 18px;
        }
        .study-layout.course-active .module-nav-label {
            padding: 12px 14px 10px;
            font-size: 11px;
            letter-spacing: 0.12em;
        }
        .study-layout.course-active .module-nav-item {
            gap: 14px;
            padding: 14px 16px;
            border-radius: 18px;
            font-size: 14px;
            font-weight: 600;
        }
        .study-layout.course-active .module-nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .study-layout.course-active .module-nav-item.active {
            background: rgba(255, 255, 255, 0.12);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }
        .study-layout.course-active .module-nav-num {
            min-width: 34px;
            font-size: 12px;
            letter-spacing: 0.08em;
        }
        .study-layout.course-active .module-nav-title {
            white-space: normal;
            line-height: 1.35;
        }

        .module-shell {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        .module-content.module-content-shell {
            width: 100%;
            /* James 2026-05-12: bumped from 1100px so the course hero stretches
               across more of the viewport and the notes column gets more
               breathing room. */
            max-width: 1360px;
            margin: 0 auto;
            padding: 34px 56px 54px;
        }
        .module-content {
            max-width: none;
            margin: 0;
        }
        .module-hero {
            display: grid;
            /* James 2026-05-12: gave the right-side art column more room
               (380→460px) and tightened the gap so the copy column gets a
               full ~860px to breathe in. */
            grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
            align-items: center;
            gap: 40px;
            min-height: 0;
            margin-bottom: 52px;
            padding: 38px 48px;
            border-radius: 28px;
            overflow: hidden;
            /* Uniform warm off-white banner, same for every notebook. The
               per-subject CSS vars in study-themes.css are forced off via
               !important on this rule's overrides there. */
            background: linear-gradient(135deg, #faf4ee 0%, #fcf8f3 100%);
            box-shadow: 0 14px 30px rgba(168, 80, 37, 0.06);
            justify-items: start;
        }
        body[data-theme="dark"] .module-hero {
            /* Dark theme intentionally keeps the same warm tone so users in
               dark mode still see the unified hero. */
            background: linear-gradient(135deg, #faf4ee 0%, #fcf8f3 100%);
            border: 0;
            box-shadow: 0 14px 30px rgba(168, 80, 37, 0.10);
        }
        .module-hero-copy {
            display: flex;
            flex-direction: column;
            align-items: flex-start !important;
            justify-self: start;
            gap: 14px;
            min-width: 0;
            width: 100%;
            text-align: left;
        }
        .module-hero-kicker {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #a85025;
            text-align: left;
        }
        .module-hero-badges {
            margin-bottom: 0;
        }
        .module-hero-badge {
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 11px;
            letter-spacing: 0.08em;
        }
        .module-hero-badge-subject {
            background: rgba(168, 80, 37, 0.14);
            color: #7f3818;
        }
        .module-hero-badge-source-youtube {
            background: rgba(168, 80, 37, 0.10);
            color: #7f3818;
        }
        .module-hero-badge-source-file {
            background: rgba(168, 80, 37, 0.10);
            color: #7f3818;
        }
        .module-hero-title {
            /* James 2026-05-12: dropped the 720px clamp so titles use the
               full copy column. With a 1360px shell the column is ~860px
               wide, which fits "Professional Foundations: Nursing Process
               and Commercial Mathematics" on 3 lines instead of 5. */
            max-width: none;
            margin-bottom: 0;
            font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.8rem);
            line-height: 1.12;
            letter-spacing: -0.03em;
            text-align: left;
            color: #2c1e18;
            align-self: flex-start;
        }
        .module-hero-desc {
            max-width: none;
            font-size: 0.95rem;
            line-height: 1.75;
            color: #5a463a;
            text-align: left;
            align-self: flex-start;
        }
        .module-hero-art {
            position: relative;
            /* James 2026-05-12: art column widened to match the new
               460px grid column. Still constrained on height so it stays
               a comfortable aspect on tall monitors. */
            width: min(100%, 460px);
            max-width: 460px;
            aspect-ratio: 1.4 / 1;
            min-height: 0;
            max-height: 340px;
            padding: 12px;
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
            overflow: hidden;
            justify-self: end;
        }
        .module-hero-img {
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            height: 100%;
            min-height: 0;
            border-radius: 20px;
            object-fit: cover;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
        }
        .module-hero-art-placeholder::before {
            content: '';
            position: absolute;
            inset: 22px 28px auto auto;
            width: 110px;
            height: 110px;
            border-radius: 32px;
            background: radial-gradient(circle at 30% 30%, rgba(255, 236, 184, 0.95), rgba(255, 142, 73, 0.2));
            filter: blur(4px);
        }
        .module-hero-art-glow {
            position: absolute;
            inset: auto auto 26px 26px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 247, 194, 0.95), rgba(255, 247, 194, 0.08));
            box-shadow: 0 0 0 8px rgba(255, 96, 133, 0.14);
        }
        .module-hero-art-bars {
            position: absolute;
            right: 34px;
            bottom: 34px;
            width: 130px;
            height: 84px;
            border-radius: 18px;
            background:
                linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.14) 8% 12%, transparent 12% 24%, rgba(128, 90, 213, 0.48) 24% 30%, transparent 30% 42%, rgba(255, 183, 77, 0.52) 42% 50%, transparent 50% 62%, rgba(59, 130, 246, 0.46) 62% 70%, transparent 70% 82%, rgba(34, 197, 94, 0.48) 82% 90%, transparent 90%);
            backdrop-filter: blur(4px);
        }
        .module-section-title {
            font-size: clamp(2.4rem, 2rem + 0.8vw, 3.15rem);
            color: #113728;
        }
        [data-theme="dark"] .module-section-title {
            color: #eef3ef;
        }
        body[data-theme="dark"] .module-section-title {
            color: var(--study-text);
        }
        .module-divider {
            height: 1px;
            margin: 16px 0 38px;
            background: rgba(15, 23, 42, 0.14);
        }
        [data-theme="dark"] .module-divider {
            background: rgba(255, 255, 255, 0.08);
        }
        .module-content .notes-view {
            max-width: none;
            padding: 0;
            font-size: 18px;
            line-height: 1.88;
            color: var(--study-text);
        }
        /* Reading rhythm, give every block real breathing room so the
           module doesn't read as a wall of text. Applies to paragraphs,
           lists, sub-headers, and blockquotes equally. James 2026-05-12. */
        .module-content .notes-view p {
            margin: 0 0 26px !important;
        }
        .module-content .notes-view p:last-child {
            margin-bottom: 0 !important;
        }
        .module-content .notes-view ul,
        .module-content .notes-view ol {
            margin: 0 0 30px !important;
            padding-left: 26px;
        }
        .module-content .notes-view li {
            margin-bottom: 12px !important;
        }
        .module-content .notes-view li:last-child {
            margin-bottom: 0 !important;
        }
        .module-content .notes-view li > ul,
        .module-content .notes-view li > ol {
            margin: 10px 0 6px !important;
        }
        .module-content .notes-view h2 {
            margin-top: 64px !important;
            margin-bottom: 18px !important;
            font-size: 2.15rem;
            color: var(--study-text);
        }
        .module-content .notes-view h2:first-child {
            margin-top: 0 !important;
        }
        .module-content .notes-view h3 {
            margin-top: 40px !important;
            margin-bottom: 14px !important;
            font-size: 1.38rem;
            color: var(--study-text);
        }
        .module-content .notes-view table,
        .study-layout.course-active .notes-view table {
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
        }
        .module-content .notes-view thead,
        .study-layout.course-active .notes-view thead {
            background: var(--study-accent-dim);
        }
        .module-content .notes-view th,
        .study-layout.course-active .notes-view th {
            padding: 14px 18px;
            font-size: 11px;
            color: var(--study-accent);
        }
        .module-content .notes-view td,
        .study-layout.course-active .notes-view td {
            padding: 16px 18px;
            color: var(--study-text);
            background: var(--study-bg-card, var(--bg-card, #fff));
        }

        .notes-concept-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 18px;
            margin: 28px 0 36px;
        }
        .notes-concept-grid-triad {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .notes-concept-grid-quartet {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .notes-concept-card {
            position: relative;
            padding: 24px 22px 22px;
            border-radius: 24px;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
        }
        .notes-concept-card-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(246, 239, 227, 0.95);
            box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
            font-size: 22px;
            margin-bottom: 14px;
        }
        [data-theme="dark"] .notes-concept-card {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(19, 25, 30, 0.84);
            box-shadow: none;
        }
        [data-theme="dark"] .notes-concept-card-icon {
            background: rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .notes-concept-card-kicker {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #6a7d70;
            margin-bottom: 12px;
        }
        .notes-concept-card-title {
            font-size: 1.38rem;
            font-weight: 700;
            line-height: 1.24;
            margin-bottom: 12px;
            color: #0f2b20;
        }
        .notes-concept-card-body,
        .notes-concept-card-body p,
        .notes-concept-card-body li {
            font-size: 15px;
            line-height: 1.72;
            color: #45504a;
        }
        [data-theme="dark"] .notes-concept-card-kicker {
            color: #8ca598;
        }
        [data-theme="dark"] .notes-concept-card-title {
            color: #f1f5f2;
        }
        [data-theme="dark"] .notes-concept-card-body,
        [data-theme="dark"] .notes-concept-card-body p,
        [data-theme="dark"] .notes-concept-card-body li {
            color: #c3ccd2;
        }

        /* Step flow cards, soft tinted backgrounds + colored accent bar + dark text */
        .notes-step-flow {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 14px;
            margin: 30px 0 40px;
        }
        .notes-step-flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .notes-step-flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .notes-step-flow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .notes-step-card {
            --step-accent: #2f64ea;
            --step-tint: rgba(47, 100, 234, 0.08);
            --step-tint-strong: rgba(47, 100, 234, 0.16);
            position: relative;
            min-height: 188px;
            padding: 22px 20px 22px;
            border-radius: 18px;
            background: var(--step-tint);
            border: 1px solid var(--step-tint-strong);
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow: hidden;
        }
        .notes-step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--step-accent);
        }
        .notes-step-card:nth-child(1) { --step-accent: #2563eb; --step-tint: rgba(37, 99, 235, 0.08); --step-tint-strong: rgba(37, 99, 235, 0.18); }
        .notes-step-card:nth-child(2) { --step-accent: #d97706; --step-tint: rgba(217, 119, 6, 0.08); --step-tint-strong: rgba(217, 119, 6, 0.18); }
        .notes-step-card:nth-child(3) { --step-accent: #059669; --step-tint: rgba(5, 150, 105, 0.08); --step-tint-strong: rgba(5, 150, 105, 0.18); }
        .notes-step-card:nth-child(4) { --step-accent: #dc2626; --step-tint: rgba(220, 38, 38, 0.08); --step-tint-strong: rgba(220, 38, 38, 0.18); }
        .notes-step-card:nth-child(5) { --step-accent: #7c3aed; --step-tint: rgba(124, 58, 237, 0.08); --step-tint-strong: rgba(124, 58, 237, 0.18); }
        .notes-step-kicker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--step-accent);
            color: #fff;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            align-self: flex-start;
        }
        .notes-step-copy,
        .notes-step-copy p,
        .notes-step-copy li {
            color: var(--study-text);
            font-size: 15px;
            line-height: 1.62;
        }
        .notes-step-copy strong {
            color: var(--study-text) !important;
            font-weight: 700;
        }
        [data-theme="dark"] .notes-step-card {
            background: var(--step-tint-strong);
            border-color: var(--step-accent);
        }
        [data-theme="dark"] .notes-step-copy,
        [data-theme="dark"] .notes-step-copy p,
        [data-theme="dark"] .notes-step-copy li,
        [data-theme="dark"] .notes-step-copy strong {
            color: #e5e7eb !important;
        }

        .module-footer-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-top: 42px;
            padding-top: 22px;
            border-top: 1px solid rgba(15, 23, 42, 0.12);
        }
        [data-theme="dark"] .module-footer-nav {
            border-top-color: rgba(255, 255, 255, 0.08);
        }
        .module-footer-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 20px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.14);
            background: rgba(255, 255, 255, 0.75);
            color: var(--study-text-secondary);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
        }
        .module-footer-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(16, 63, 43, 0.3);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }
        .module-footer-btn-primary {
            border: none;
            background: #103f2b;
            color: #fff;
            box-shadow: 0 14px 26px rgba(16, 63, 43, 0.22);
        }
        .module-footer-btn-primary.is-complete {
            background: #185238;
        }
        /* "Ask Khio about this module" CTA, opens the right-sidebar chat
           pre-filled with the module title. 2026-05-03. */
        .module-ask-khio-row {
            display: flex;
            justify-content: center;
            margin: 14px 0 8px;
        }
        .module-ask-khio-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 999px;
            border: 1px dashed var(--study-border);
            background: transparent;
            color: var(--study-text-secondary);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
        }
        .module-ask-khio-btn:hover {
            border-color: var(--study-accent);
            color: var(--study-accent);
            background: var(--study-accent-dim);
        }
        [data-theme="dark"] .module-footer-btn {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(19, 25, 30, 0.84);
            color: #d7dde2;
            box-shadow: none;
        }
        [data-theme="dark"] .module-footer-btn-primary {
            background: #2f7a57;
            color: #fff;
        }
        body[data-theme="dark"] .module-footer-btn {
            border-color: rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.06);
            color: var(--study-text);
        }
        body[data-theme="dark"] .module-footer-btn-primary {
            background: #fff;
            color: #000;
            box-shadow: 0 8px 20px rgba(255,255,255,0.1);
        }
        .module-progress {
            margin-top: 16px;
            text-align: center;
            font-size: 12px;
            color: var(--study-text-tertiary);
        }
        .module-inline-heading {
            display: flex;
            align-items: center;
            /* James 2026-05-12: was center-aligned; user wants the module
               heading hugging the left edge so the content flows naturally
               below it. */
            justify-content: flex-start;
            gap: 18px;
            margin: 10px 0 34px;
            text-align: left;
        }
        .module-inline-title,
        .module-inline-kicker {
            text-align: left;
        }
        .module-inline-num {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #0e4b2f;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 800;
            box-shadow: 0 10px 22px rgba(14, 75, 47, 0.18);
            flex-shrink: 0;
        }
        .module-inline-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .module-inline-title {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: clamp(2rem, 1.6rem + 0.8vw, 2.75rem);
            font-weight: 500;
            line-height: 1.12;
            color: #123426;
            letter-spacing: -0.03em;
        }
        .module-inline-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #6f7d76;
        }
        /* Per-module source attribution, shown below the kicker when the
           user uploaded multiple source files. Each source renders as a
           small neutral chip. Rendered only when >= 2 distinct sources
           exist across the course (see showModuleSources guard in JS). */
        .module-inline-sources {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
            justify-content: center;
        }
        .module-inline-sources-label {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--study-text-tertiary, #6f7d76);
            white-space: nowrap;
        }
        .module-inline-source-chip {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--study-accent, #c1724e);
            background: color-mix(in srgb, var(--study-accent, #c1724e) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--study-accent, #c1724e) 22%, transparent);
            border-radius: 999px;
            white-space: nowrap;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        [data-theme="dark"] .module-inline-num {
            background: #2d8a5e;
            box-shadow: none;
        }
        body[data-theme="dark"] .module-inline-num {
            background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
            border: 1px solid rgba(255,255,255,0.15);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .module-inline-title {
            color: #eef3ef;
        }
        [data-theme="dark"] .module-inline-kicker {
            color: #8ea197;
        }
        body[data-theme="dark"] .module-inline-title {
            color: var(--study-text);
        }
        body[data-theme="dark"] .module-inline-kicker {
            color: var(--study-text-tertiary);
        }
        body[data-theme="dark"] .notes-table-shell {
            border-color: rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.03);
        }
        body[data-theme="dark"] .module-footer-btn-primary.is-complete {
            background: rgba(255,255,255,0.85);
            color: #000;
        }
        .notes-table-shell {
            overflow-x: auto;
            margin: 26px 0 34px;
            border-radius: 26px;
            border: 1px solid rgba(181, 160, 124, 0.34);
            background: rgba(255, 252, 247, 0.9);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.05);
        }
        [data-theme="dark"] .notes-table-shell {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(19, 25, 30, 0.84);
            box-shadow: none;
        }
        .notes-summary {
            position: relative;
            overflow: hidden;
        }
        .notes-summary-watermark {
            position: absolute;
            right: 28px;
            top: 34px;
            font-size: 7rem;
            line-height: 0.8;
            font-weight: 700;
            color: rgba(186, 165, 132, 0.12);
            pointer-events: none;
            user-select: none;
        }
        [data-theme="dark"] .notes-summary-watermark {
            color: rgba(255, 255, 255, 0.05);
        }

        @media (max-width: 1180px) {
            .study-layout.course-active {
                --sidebar-w: 292px;
            }
            .module-content.module-content-shell {
                padding: 28px 26px 48px;
            }
            .notes-concept-grid-triad,
            .notes-concept-grid-quartet,
            .notes-step-flow-3,
            .notes-step-flow-4,
            .notes-step-flow-5 {
                grid-template-columns: 1fr;
            }
            .module-hero {
                grid-template-columns: 1fr;
                min-height: 0;
            }
            .module-hero-art {
                width: min(100%, 320px);
                max-width: 320px;
                max-height: 320px;
                justify-self: start;
            }
            .notes-step-flow {
                grid-template-columns: 1fr;
            }
            .notes-step-card:not(:last-child) {
                clip-path: none;
                padding-right: 22px;
            }
        }
        @media (max-width: 768px) {
            .study-layout.notes-active .detail-main-inner.mode-reading,
            .study-layout.course-active .detail-main-inner.mode-reading {
                padding: 0 0 18px 8px;
            }
            .study-layout.notes-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow,
            .study-layout.course-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow {
                margin-right: 8px;
                border-radius: 18px !important;
                padding: 12px 14px;
            }
            .module-content.module-content-shell {
                padding: 22px 18px 36px;
            }
            .module-hero {
                padding: 26px 22px;
                border-radius: 22px;
                gap: 20px;
            }
            .module-inline-heading {
                flex-direction: column;
                gap: 12px;
                margin: 8px 0 26px;
                text-align: center;
            }
            .module-inline-num {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .module-inline-copy {
                align-items: center;
                text-align: center;
                width: 100%;
            }
            .module-inline-title {
                font-size: 1.9rem;
                text-align: center;
            }
            .module-inline-kicker {
                text-align: center;
            }
            .module-hero-title {
                font-size: clamp(2.15rem, 1.7rem + 2vw, 2.8rem);
            }
            .module-footer-nav {
                flex-direction: column;
                align-items: stretch;
            }
            .module-footer-nav > * {
                width: 100%;
                justify-content: center;
            }
            .notes-concept-grid {
                grid-template-columns: 1fr;
            }
        }