/* ---------- quick guide (sleek luxury obsidian dock) ---------- */
  .guide-dock{
    display:flex;
    flex-direction:column;
    width:min(92vw, 304px);
    margin:0;
    background:linear-gradient(180deg, rgba(14, 19, 34, 0.96) 0%, rgba(9, 12, 22, 0.98) 100%);
    border:1px solid rgba(255, 209, 102, 0.22);
    border-radius:14px;
    padding:0;
    box-sizing:border-box;
    box-shadow:0 20px 50px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,209,102,0.12), 0 0 32px rgba(255,209,102,0.06);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    color:var(--ink);
    overflow:hidden;
    contain:layout style;
    overscroll-behavior:contain;
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  }

  /* Fixed Stationary Header */
  .guide-dock-header{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:11px 13px 10px;
    background:linear-gradient(180deg, rgba(20, 26, 44, 0.98) 0%, rgba(13, 18, 32, 0.96) 100%);
    border-bottom:1px solid rgba(255, 209, 102, 0.18);
    position:relative;
    box-shadow:0 4px 16px rgba(0,0,0,0.35);
    z-index:2;
  }
  .guide-dock-header::after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:10%;
    right:10%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.35), transparent);
    pointer-events:none;
  }

  .gdh-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:24px;
  }
  .gdh-title{
    display:flex;
    align-items:center;
    gap:7px;
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.76rem;
    font-weight:700;
    color:var(--gold-bright);
    letter-spacing:0.07em;
    text-transform:uppercase;
  }
  .gdh-title-icon-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:6px;
    background:rgba(255, 209, 102, 0.12);
    border:1px solid rgba(255, 209, 102, 0.32);
    color:var(--gold-bright);
    box-shadow:0 0 10px rgba(255, 209, 102, 0.18);
    flex-shrink:0;
  }
  .gdh-title-icon-box svg{
    display:block;
  }
  .gdh-title-text{
    line-height:1;
  }

  .guide-close-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:6px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--ink-dim);
    cursor:pointer;
    padding:0;
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .guide-close-btn:hover{
    background:rgba(239,68,68,0.22);
    border-color:rgba(239,68,68,0.55);
    color:#fca5a5;
    transform:scale(1.08);
    box-shadow:0 0 10px rgba(239, 68, 68, 0.35);
  }
  .guide-close-btn:active{
    transform:scale(0.92);
  }

  .gdh-sub-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:22px;
    gap:8px;
  }

  .guide-live-status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.58rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    padding:2.5px 8px;
    border-radius:999px;
    background:rgba(255, 255, 255, 0.05);
    border:1px solid rgba(255, 255, 255, 0.12);
    color:var(--ink-dim);
    transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .guide-live-status-pill .gls-dot,
  .guide-live-status-pill .gac-pulse-dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#94a3b8;
    box-shadow:0 0 5px rgba(148, 163, 184, 0.5);
    flex-shrink:0;
  }
  .guide-live-status-pill.status-ready{
    background:rgba(56, 189, 248, 0.1);
    border-color:rgba(56, 189, 248, 0.32);
    color:#38bdf8;
    box-shadow:0 0 8px rgba(56, 189, 248, 0.12);
  }
  .guide-live-status-pill.status-ready .gls-dot,
  .guide-live-status-pill.status-ready .gac-pulse-dot{
    background:#38bdf8;
    box-shadow:0 0 8px rgba(56, 189, 248, 0.85);
    animation:gls-pulse 2s ease-in-out infinite;
  }
  .guide-live-status-pill.status-active{
    background:rgba(52, 211, 153, 0.12);
    border-color:rgba(52, 211, 153, 0.38);
    color:#34d399;
    box-shadow:0 0 10px rgba(52, 211, 153, 0.15);
  }
  .guide-live-status-pill.status-active .gls-dot,
  .guide-live-status-pill.status-active .gac-pulse-dot{
    background:#34d399;
    box-shadow:0 0 8px rgba(52, 211, 153, 0.9);
    animation:gls-pulse 1.6s ease-in-out infinite;
  }
  @keyframes gls-pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.4; transform:scale(0.85); }
  }

  .gdh-badge{
    font-size:0.58rem;
    font-weight:700;
    letter-spacing:0.05em;
    padding:2.5px 8px;
    border-radius:999px;
    background:rgba(255, 209, 102, 0.12);
    border:1px solid rgba(255, 209, 102, 0.35);
    color:var(--gold-bright);
    transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .gdh-badge.badge-std{
    background:rgba(255, 209, 102, 0.12);
    border-color:rgba(255, 209, 102, 0.38);
    color:var(--gold-bright);
    box-shadow:0 0 8px rgba(255, 209, 102, 0.15);
  }
  .gdh-badge.badge-nida{
    background:rgba(56, 189, 248, 0.12);
    border-color:rgba(56, 189, 248, 0.38);
    color:#38bdf8;
    box-shadow:0 0 8px rgba(56, 189, 248, 0.15);
  }
  .gdh-badge.badge-eng{
    background:rgba(244, 114, 182, 0.12);
    border-color:rgba(244, 114, 182, 0.38);
    color:#f472b6;
    box-shadow:0 0 8px rgba(244, 114, 182, 0.15);
  }

  /* Inner Scroll Body - Header remains strictly stationary */
  .guide-dock-body{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 11px 14px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  .guide-dock-body::-webkit-scrollbar{
    width:5px;
  }
  .guide-dock-body::-webkit-scrollbar-thumb{
    background:rgba(255,209,102,0.25);
    border-radius:3px;
  }
  .guide-dock-body::-webkit-scrollbar-thumb:hover{
    background:var(--gold);
  }

  .guide-section{
    background:color-mix(in srgb, var(--stone-2) 65%, var(--stone-1));
    border:1px solid color-mix(in srgb, var(--gold-bright) 14%, var(--stone-3));
    border-radius:9px;
    padding:7px 9px;
  }
  .guide-sec-head{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.66rem;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--gold-bright);
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .guide-home-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .guide-hand-block{
    background:color-mix(in srgb, var(--stone-1) 85%, #000000);
    border-radius:7px;
    padding:6px 8px;
    border:1px solid var(--stone-3);
  }
  .guide-hand-label{
    font-size:0.6rem;
    color:var(--ink-dim);
    margin-bottom:5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .guide-key-row{
    display:flex;
    gap:4px;
    justify-content:space-between;
  }
  .guide-mini-key{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:linear-gradient(180deg, var(--stone-3), var(--stone-2));
    border:1px solid color-mix(in srgb, var(--gold-bright) 22%, var(--stone-3));
    border-bottom:2px solid var(--stone-edge);
    border-radius:5px;
    padding:3px 2px;
  }
  .guide-mini-key.gmk-pinky { border-top: 2px solid #ec4899; }
  .guide-mini-key.gmk-ring { border-top: 2px solid #8b5cf6; }
  .guide-mini-key.gmk-middle { border-top: 2px solid #3b82f6; }
  .guide-mini-key.gmk-index { border-top: 2px solid #10b981; }
  .guide-mini-key .km-ch{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.3em;
    overflow: visible;
    font-family:'Noto Sans Khmer', 'Kantumruy Pro', 'Khmer OS Battambang', sans-serif;
    font-size:0.95rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.2;
  }
  .guide-mini-key .en-ch{
    font-size:0.5rem;
    color:var(--gold-bright);
    opacity:0.88;
    font-weight:600;
    margin-top:1px;
  }

  .guide-rule-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.72rem;
    line-height:1.45;
    color:var(--ink-dim);
  }
  .guide-rule-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 0;
    border-bottom:1px solid color-mix(in srgb, var(--stone-3) 70%, transparent);
  }
  .guide-rule-row:last-child{ border-bottom:none; }
  .guide-kbd{
    display:inline-block;
    padding:1px 6px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    background:color-mix(in srgb, var(--gold-bright) 14%, var(--stone-2));
    border:1px solid color-mix(in srgb, var(--gold-bright) 38%, transparent);
    border-radius:4px;
    color:var(--gold-bright);
    font-weight:600;
  }
  .guide-sample{
    font-family:'Kantumruy Pro', 'Khmer OS Battambang', sans-serif;
    font-size:0.86rem;
    color:var(--ink);
    font-weight:600;
  }

  .guide-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .guide-stat-box{
    background:color-mix(in srgb, var(--stone-1) 85%, #000000);
    border:1px solid var(--stone-3);
    border-radius:7px;
    padding:7px 9px;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
  }
  .guide-stat-box:hover{
    transform:translateY(-1.5px);
    border-color:color-mix(in srgb, var(--gold-bright) 35%, var(--stone-3));
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
  }
  .guide-stat-num{
    font-family:'JetBrains Mono', monospace;
    font-size:1.05rem;
    font-weight:700;
    color:var(--gold-bright);
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), color .18s ease;
    display:inline-block;
  }
  .telemetry-bump{
    animation:stat-val-bump .26s cubic-bezier(.34,1.56,.64,1) !important;
  }
  @keyframes stat-val-bump{
    0%{ transform:scale(1.22); color:#ffffff; text-shadow:0 0 10px var(--gold-bright); }
    50%{ transform:scale(0.96); }
    100%{ transform:scale(1); text-shadow:none; }
  }
  .streak-flame{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#ff9d2e;
    transition:transform .2s ease;
    vertical-align:middle;
  }
  .streak-flame svg{
    display:block;
  }
  .guide-stat-box.has-streak{
    border-color:rgba(255,157,46,0.6) !important;
    box-shadow:0 0 14px rgba(255,157,46,0.35) !important;
  }
  .guide-stat-box.has-streak .streak-flame{
    animation:streak-flame-dance .8s infinite alternate ease-in-out;
  }
  @keyframes streak-flame-dance{
    0%{ transform:scale(1) rotate(-4deg); filter:drop-shadow(0 0 4px #ff9d2e); }
    100%{ transform:scale(1.25) rotate(6deg); filter:drop-shadow(0 0 10px #ff3b30); }
  }
  .guide-stat-lbl{
    font-size:0.58rem;
    color:var(--ink-dim);
    letter-spacing:0.03em;
    text-transform:uppercase;
    margin-top:2px;
  }

  /* ---------- Enhanced Quick Guide Dock Components ---------- */

  /* Section 1: Active Lesson Card */
  .guide-active-card {
    background: color-mix(in srgb, var(--stone-1) 85%, #000000);
    border: 1px solid var(--stone-3);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .gac-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .gac-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gac-badge {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--gold-bright) 12%, var(--stone-2));
    border: 1px solid color-mix(in srgb, var(--gold-bright) 28%, transparent);
    color: var(--gold-bright);
    white-space: nowrap;
  }
  .gac-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .gac-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8 0%, var(--gold-bright) 50%, #ffffff 75%, var(--gold-bright) 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    transition: width 0.22s ease-out;
    animation: progress-sheen-sweep 3s linear infinite;
  }
  .gac-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .gac-sub {
    font-size: 0.6rem;
    color: var(--ink-dim);
  }
  .gac-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--gold-bright) 16%, var(--stone-3));
    border: 1px solid color-mix(in srgb, var(--gold-bright) 36%, transparent);
    color: var(--gold-bright);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .gac-action-btn:hover {
    background: color-mix(in srgb, var(--gold-bright) 28%, var(--stone-3));
    border-color: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  .gac-action-btn:active {
    transform: translateY(0);
  }

  /* Streak flame in stat box */
  .streak-flame {
    display: inline-block;
    filter: drop-shadow(0 0 5px rgba(255, 120, 40, 0.7));
  }

  /* Section 2: Target Finger Callout */
  .guide-target-callout {
    background: color-mix(in srgb, var(--stone-1) 85%, #000000);
    border: 1px solid color-mix(in srgb, var(--gold-bright) 20%, var(--stone-3));
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 8px;
  }
  .gtc-label {
    font-size: 0.58rem;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  .gtc-content {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .gtc-key-badge {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', 'Kantumruy Pro', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, var(--stone-3), var(--stone-2));
    border: 1.5px solid color-mix(in srgb, var(--gold-bright) 45%, var(--stone-3));
    border-bottom: 3px solid var(--stone-edge);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    transition: all 0.15s ease;
  }
  .gtc-key-badge.resting {
    color: var(--ink-dim);
    border-color: var(--stone-3);
    font-size: 0.72rem;
  }
  .gtc-key-badge.active-key {
    border-color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.4), 0 3px 8px rgba(0,0,0,0.5);
  }
  .gtc-mod {
    font-size: 0.7rem;
    opacity: 0.75;
    margin-right: 2px;
  }
  .gtc-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
  }
  .gtc-finger-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gold-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
  }
  .gtc-finger-hint {
    font-size: 0.6rem;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Home Row mini-keys interactions */
  .guide-mini-key {
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
  }
  .guide-mini-key:hover {
    border-color: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .guide-mini-key.mini-clicked,
  .guide-mini-key.mini-pulsing {
    background: linear-gradient(180deg, var(--gold-bright), #ea580c) !important;
    border-color: #ffffff !important;
    transform: scale(0.94);
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.8) !important;
  }
  .guide-mini-key.mini-pulsing .km-ch,
  .guide-mini-key.mini-pulsing .en-ch,
  .guide-mini-key.mini-clicked .km-ch,
  .guide-mini-key.mini-clicked .en-ch {
    color: #000000 !important;
  }

  /* Finger Color Legend */
  .guide-finger-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--stone-3) 65%, transparent);
  }
  .gfl-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.58rem;
    color: var(--ink-dim);
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
  }
  .gfl-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
  .gfl-pinky .gfl-dot { background: #ec4899; box-shadow: 0 0 4px #ec4899; }
  .gfl-ring .gfl-dot { background: #8b5cf6; box-shadow: 0 0 4px #8b5cf6; }
  .gfl-middle .gfl-dot { background: #3b82f6; box-shadow: 0 0 4px #3b82f6; }
  .gfl-index .gfl-dot { background: #10b981; box-shadow: 0 0 4px #10b981; }
  .gfl-thumb .gfl-dot { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }

  /* Section 3: Weak Keys Radar */
  .guide-weak-sec {
    background: color-mix(in srgb, var(--stone-2) 65%, var(--stone-1));
  }
  .guide-weak-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    min-height: 28px;
    align-items: center;
  }
  .guide-weak-empty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--ink-dim);
    font-style: italic;
    padding: 3px 0;
  }
  .guide-weak-empty .pk-icon {
    color: #10b981;
  }
  .guide-weak-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    padding: 3px 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
  }
  .guide-weak-chip.danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
  }
  .guide-weak-chip.danger:hover {
    background: rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
  }
  .guide-weak-chip.warn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
  }
  .guide-weak-chip.warn:hover {
    background: rgba(245, 158, 11, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  }
  .gwc-char {
    font-family: 'Kantumruy Pro', 'JetBrains Mono', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .gwc-acc {
    font-size: 0.58rem;
    font-weight: 600;
    opacity: 0.88;
  }
  .guide-drill-weak-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--gold-bright) 14%, var(--stone-3));
    border: 1px solid color-mix(in srgb, var(--gold-bright) 34%, transparent);
    color: var(--gold-bright);
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .guide-drill-weak-btn:hover {
    background: color-mix(in srgb, var(--gold-bright) 24%, var(--stone-3));
    border-color: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  }
  .guide-drill-weak-btn.has-weak {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.2));
    border-color: rgba(245, 158, 11, 0.5);
    color: #fde68a;
  }

  /* Section 5: Actionable Shortcuts */
  .guide-actionable-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .gas-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--stone-1) 85%, #000000);
    border: 1px solid var(--stone-3);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    user-select: none;
  }
  .gas-btn:hover {
    background: color-mix(in srgb, var(--stone-2) 90%, var(--stone-1));
    border-color: color-mix(in srgb, var(--gold-bright) 35%, var(--stone-3));
    transform: translateY(-1px);
  }
  .gas-btn:active {
    transform: translateY(0) scale(0.99);
  }
  .gas-btn.gas-info-row {
    cursor: default !important;
  }
  .gas-btn.gas-info-row:hover,
  .gas-btn.gas-info-row:active {
    background: color-mix(in srgb, var(--stone-1) 85%, #000000) !important;
    border-color: var(--stone-3) !important;
    transform: none !important;
  }
  .gas-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
  }
  .gas-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gas-sub {
    font-size: 0.56rem;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gas-sub.status-on {
    color: #34d399;
    font-weight: 600;
  }
  .gas-sub.status-off {
    color: var(--ink-dim);
  }

    /* ---------- lessons (compact right-side dock) ---------- */
  .lesson-strip{
    display:flex !important;
    flex-direction:column;
    gap:0;
    width:min(94vw, 360px);
    min-height:280px;
    margin:0 0 20px;
    background:rgba(14, 18, 36, 0.94);
    border:1px solid var(--stone-3);
    border-radius:12px;
    padding:0;
    box-sizing:border-box;
    box-shadow:0 8px 30px rgba(0,0,0,0.35);
    transition:width .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease, border-color .25s ease, transform .25s ease;
    animation:lesson-strip-spring-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    visibility:visible !important;
    opacity:1 !important;
    overflow:hidden;
  }
  @keyframes lesson-strip-spring-in{
    0%{
      opacity:0;
      transform:perspective(800px) translateX(24px) scale(0.96);
    }
    65%{
      opacity:1;
      transform:perspective(800px) translateX(-3px) scale(1.01);
    }
    100%{
      opacity:1;
      transform:perspective(800px) translateX(0) scale(1);
    }
  }
  .guide-dock[hidden]{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }

  /* Minimized / Compact Quick Guide State (Gets small when practicing or clicked) */
  .guide-dock.minimized {
    max-height: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 209, 102, 0.3) !important;
  }
  .guide-dock.minimized .guide-dock-body {
    display: none !important;
  }
  .guide-dock.minimized .gdh-sub-row {
    display: none !important;
  }
  .guide-dock.minimized .guide-min-btn svg {
    transform: rotate(180deg);
  }
  .guide-min-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ink-muted, #94a3b8);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .guide-min-btn:hover {
    background: rgba(255, 209, 102, 0.15);
    border-color: rgba(255, 209, 102, 0.35);
    color: var(--gold-bright, #ffd166);
  }

  /* Compact / Small Lessons Dock in Focus Mode */
  html.focus-mode .lesson-strip,
  html.focus-mode #lessonStrip{
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:0.9 !important;
    width:min(90vw, 226px) !important;
    min-height:0 !important;
    max-height:min(410px, calc(100vh - 76px)) !important;
    border-radius:10px !important;
    background:rgba(10, 13, 26, 0.88) !important;
    border:1px solid rgba(255, 209, 102, 0.22) !important;
    box-shadow:0 10px 28px rgba(0,0,0,0.6) !important;
    transition:opacity .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  }
  html.focus-mode .lesson-strip:hover,
  html.focus-mode #lessonStrip:hover{
    opacity:1 !important;
    border-color:rgba(255, 209, 102, 0.42) !important;
  }
  html.focus-mode .lesson-strip.expanded .lesson-level-list{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }
  html.focus-mode #lshExpandBtn,
  html.focus-mode .lsh-badge-txt,
  html.focus-mode .asc-sub,
  html.focus-mode .lesson-card-sub,
  html.focus-mode .lesson-card-examples,
  html.focus-mode .lesson-card-type,
  html.focus-mode #lessonExamplesBanner{
    display:none !important;
  }
  html.focus-mode .lesson-strip-header{
    padding:6px 9px !important;
    gap:4px !important;
  }
  html.focus-mode .lsh-title{
    font-size:0.65rem !important;
    gap:4px !important;
  }
  html.focus-mode .lsh-title .pk-icon{
    width:11px !important;
    height:11px !important;
  }
  html.focus-mode .lsh-actions{
    gap:4px !important;
  }
  html.focus-mode .lsh-adaptive-btn{
    height:19px !important;
    padding:0 6px !important;
    font-size:0.56rem !important;
    gap:3px !important;
    border-radius:5px !important;
  }
  html.focus-mode .lsh-badge{
    height:19px !important;
    line-height:17px !important;
    padding:0 5px !important;
    font-size:0.56rem !important;
    border-radius:5px !important;
  }
  html.focus-mode .lesson-strip-search{
    padding:4px 8px !important;
  }
  html.focus-mode .lss-input-wrap .pk-icon{
    left:7px !important;
    width:11px !important;
    height:11px !important;
  }
  html.focus-mode .lss-input-wrap input{
    padding:4px 7px 4px 22px !important;
    font-size:0.64rem !important;
    border-radius:6px !important;
  }
  html.focus-mode .lesson-strip-body{
    padding:4px 7px 7px !important;
  }
  html.focus-mode .adaptive-sidebar-card{
    padding:4px 7px !important;
    margin-bottom:4px !important;
    border-radius:6px !important;
  }
  html.focus-mode .asc-title{
    font-size:0.62rem !important;
    gap:4px !important;
  }
  html.focus-mode .asc-btn{
    padding:2px 7px !important;
    font-size:0.58rem !important;
    border-radius:4px !important;
  }
  html.focus-mode .lesson-level-header{
    font-size:0.64rem !important;
    padding:3px 6px !important;
    margin:3px 0 2px !important;
    gap:4px !important;
    border-radius:5px !important;
  }
  html.focus-mode .lesson-level-list{
    gap:3px !important;
    margin:0 0 4px !important;
  }
  html.focus-mode .lesson-card{
    min-height:0 !important;
    padding:4px 7px !important;
    gap:6px !important;
    border-radius:5px !important;
    align-items:center !important;
  }
  html.focus-mode .lesson-card-num{
    font-size:0.64rem !important;
    min-width:15px !important;
    margin-top:0 !important;
  }
  html.focus-mode .lesson-card-title{
    font-size:0.65rem !important;
  }
  html.focus-mode .lesson-card-best{
    font-size:0.54rem !important;
  }
  html.focus-mode .lesson-panel{
    margin:4px auto 14px !important;
    padding:16px 22px 14px !important;
    width:min(90vw, 824px) !important;
  }

  .lesson-strip.expanded{
    width:min(94vw, 680px);
  }
  .lesson-strip.expanded .lesson-level-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .lesson-strip.expanded .lesson-card{
    padding:8px 10px;
  }
  .lesson-strip.expanded .lesson-card-sub{
    font-size:0.7rem;
  }

  .lesson-strip-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:rgba(14, 18, 36, 0.98);
    z-index:2;
    flex-shrink:0;
    gap:8px;
    box-sizing:border-box;
  }
  .lesson-strip-search{
    padding:8px 14px;
    background:rgba(14, 18, 36, 0.95);
    border-bottom:1px solid rgba(255,255,255,0.05);
    flex-shrink:0;
    z-index:1;
  }
  .lss-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .lss-input-wrap .pk-icon{
    position:absolute;
    left:10px;
    color:var(--ink-dim);
    pointer-events:none;
  }
  .lss-input-wrap input{
    width:100%;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:8px 12px 8px 32px;
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    font-size:0.75rem;
    transition:border-color .2s ease, background .2s ease;
  }
  .lss-input-wrap input::placeholder{
    color:rgba(217,198,163,0.4);
  }
  .lss-input-wrap input:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,209,102,0.05);
  }
  .lsh-title{
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.82rem;
    font-weight:700;
    color:var(--gold-bright);
    letter-spacing:0.04em;
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .lsh-actions{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .lsh-badge{
    font-size:0.65rem;
    font-family:'JetBrains Mono', monospace;
    padding:0 8px;
    height:24px;
    line-height:22px;
    box-sizing:border-box;
    border-radius:6px;
    background:rgba(255,209,102,0.08);
    border:1px solid rgba(255,157,46,0.25);
    color:var(--gold-bright);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap !important;
    flex-shrink:0;
  }
  .lsh-expand-btn{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    color:var(--gold-bright);
    border-radius:6px;
    padding:0;
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    box-sizing:border-box;
    transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
  }
  .lsh-expand-btn:hover{
    background:rgba(255,209,102,0.18);
    border-color:var(--gold);
    color:#fff;
    transform:scale(1.06);
  }
  .lsh-adaptive-btn{
    background:rgba(255,157,46,0.12);
    border:1px solid rgba(255,157,46,0.35);
    color:var(--gold-bright);
    border-radius:6px;
    padding:0 8px;
    height:24px;
    font-size:0.66rem;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    box-sizing:border-box;
    transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
  }
  .lsh-adaptive-btn:hover{
    background:rgba(255,157,46,0.24);
    border-color:var(--gold-bright);
    color:#fff;
    transform:translateY(-1px);
  }

  .lesson-strip-body{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:6px 14px 14px;
    overscroll-behavior:contain;
    /* Custom webkit scrollbar enabled */
  }
  .lesson-strip-body::-webkit-scrollbar{
    width:6px;
  }
  .lesson-strip-body::-webkit-scrollbar-thumb{
    background:rgba(255,209,102,0.3);
    border-radius:3px;
  }
  .lesson-strip-body::-webkit-scrollbar-thumb:hover{
    background:var(--gold);
  }

  .lesson-level-header{
    width:100%;
    display:flex;
    align-items:center;
    gap:7px;
    text-align:left;
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-weight:700;
    color:var(--gold-bright);
    font-size:0.84rem;
    letter-spacing:0.02em;
    margin:7px 0 4px;
    padding:5px 8px;
    border-radius:6px;
    background:rgba(255,255,255,0.02);
    cursor:pointer;
    user-select:none;
    flex-shrink:0;
    transition:background .18s ease, opacity .18s ease, transform .18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  .lesson-level-header:hover{
    background:rgba(255,255,255,0.06);
    transform:translateX(3px);
  }
  .lesson-level-header:active{
    transform:translateX(1px) scale(0.99);
  }
  .llh-chevron{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.72rem;
    width:14px;
    height:14px;
    color:var(--gold-bright);
    transition:transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .lesson-level-header:hover .llh-chevron{
    transform:scale(1.28);
  }

  .lesson-level-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0 0 7px;
    overflow:hidden;
    max-height:3000px;
    flex-shrink:0;
    transition:max-height .25s ease, opacity .2s ease;
  }
  .lesson-level-list.collapsed{
    max-height:0;
    opacity:0;
    margin:0;
    pointer-events:none;
  }

  .lesson-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    min-height:56px;
    flex-shrink:0;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(255,255,255,0.025);
    border:1px solid var(--stone-3);
    cursor:pointer;
    overflow:hidden;
    box-sizing:border-box;
    transition:transform .2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background .18s ease, border-color .18s ease, box-shadow .2s ease;
    animation:lesson-card-unfold .28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes lesson-card-unfold{
    from{
      opacity:0;
      transform:translateY(12px) scale(0.97);
    }
    to{
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }
  .lesson-card:hover{
    border-color:var(--gold-bright);
    background:rgba(255,157,46,0.1);
    transform:translateY(-2px) scale(1.012);
    box-shadow:0 6px 18px rgba(0,0,0,0.38), 0 0 12px rgba(255,209,102,0.15);
  }
  .lesson-card:active{
    transform:translateY(0) scale(0.985);
  }
  .lesson-card.active{
    border-color:var(--gold-bright);
    background:rgba(255,209,102,0.14);
    box-shadow:0 0 16px rgba(255,209,102,0.22);
  }
  .lesson-card-num{
    flex:0 0 auto;
    min-width:22px;
    margin-top:1px;
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    font-size:0.86rem;
    line-height:1.1;
    color:var(--gold-bright);
  }
  .lesson-card-info{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .lesson-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
  }
  .lesson-card-title{
    font-size:0.78rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .lesson-card-sub{
    font-size:0.66rem;
    color:var(--ink-dim);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .lesson-card-examples{
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    margin-top:2px;
  }
  .lce-lbl{
    font-size:0.56rem;
    color:var(--ink-dim);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .lce-chip{
    padding:2px 5px;
    border-radius:4px;
    background:rgba(255,209,102,0.08);
    border:1px solid rgba(255,157,46,0.25);
    font-family:'Noto Sans Khmer', sans-serif;
    color:var(--gold-bright);
    font-size:0.72rem;
    line-height:1.2;
  }
  .lesson-card-type{
    font-size:0.46rem;
    padding:1px 4px;
    border-radius:3px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ink-dim);
    border:1px solid var(--stone-3);
    background:rgba(255,255,255,0.03);
  }
  .lesson-card-type.type-review{ color:var(--temple-blue); border-color:rgba(45,212,167,0.4); }
  .lesson-card-type.type-test{ color:var(--temple-red); border-color:rgba(255,59,86,0.4); }
  .lesson-card-type.type-words, .lesson-card-type.type-word{ color:var(--gold-bright); border-color:rgba(255,209,102,0.4); }
  .lesson-card-type.type-single-char{ color:#2dd4a7; border-color:rgba(45,212,167,0.35); }
  .lesson-card-type.type-char-combo{ color:#64d2ff; border-color:rgba(100,210,255,0.35); }
  .lesson-card-type.type-sentence{ color:#ffd166; border-color:rgba(255,209,102,0.35); }
  .lesson-card-type.type-key-id{ color:var(--ink-dim); border-color:var(--stone-3); }
  .lesson-card-best{
    font-size:0.58rem;
    color:var(--gold-bright);
    margin-left:auto;
  }
  .lesson-card-best.mastered{ color:#eaffda; }
  .lesson-card-lock{
    font-size:0.6rem;
    color:var(--ink-dim);
    margin-left:auto;
  }

  .lesson-panel{
    position:relative;
    z-index:10;
    width:min(92vw, 860px);
    margin:44px auto 14px;
    padding:18px 24px 16px;
    border-radius:20px;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(30, 38, 62, 0.5) 0%, transparent 65%),
      linear-gradient(180deg, rgba(16, 21, 36, 0.96) 0%, rgba(9, 12, 22, 0.98) 100%);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255, 209, 102, 0.28);
    box-shadow:
      0 24px 64px rgba(0,0,0,0.85),
      0 0 32px rgba(255,209,102,0.1),
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 0 20px rgba(0,0,0,0.4);
    animation:panel-in .38s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes panel-in{
    0%{
      opacity:0;
      transform:perspective(800px) translateY(-26px) scale(0.95);
      filter:brightness(1.25);
    }
    65%{
      opacity:1;
      transform:perspective(800px) translateY(3px) scale(1.012);
      filter:brightness(1.08);
    }
    100%{
      opacity:1;
      transform:perspective(800px) translateY(0) scale(1);
      filter:brightness(1);
    }
  }
  .lesson-panel[hidden]{ display:none; }

  /* Top Command Header */
  .lesson-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .lesson-top-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .lesson-live-indicator{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 9px 3px 8px;
    border-radius:999px;
    background:rgba(52, 211, 153, 0.12);
    border:1px solid rgba(52, 211, 153, 0.35);
  }
  .lli-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#34d399;
    box-shadow:0 0 8px #34d399;
    animation:lli-pulse 1.8s infinite;
  }
  @keyframes lli-pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.4; transform:scale(0.85); }
  }
  .lli-text{
    font-family:'JetBrains Mono', monospace;
    font-size:0.58rem;
    font-weight:700;
    letter-spacing:0.08em;
    color:#34d399;
  }
  .lesson-deck-title{
    font-family:'Orbitron', sans-serif;
    font-size:0.86rem;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:#ffffff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .lesson-top-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .lesson-quick-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border-radius:8px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--ink-dim);
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.68rem;
    font-weight:600;
    cursor:pointer;
    transition:all .18s ease;
  }
  .lesson-quick-btn:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,209,102,0.35);
    color:#ffffff;
    transform:translateY(-1px);
  }
  .lesson-quick-btn.active{
    background:rgba(56, 189, 248, 0.12);
    border-color:rgba(56, 189, 248, 0.4);
    color:#38bdf8;
  }
  .lesson-quick-btn .lqb-badge{
    font-family:'JetBrains Mono', monospace;
    font-size:0.54rem;
    padding:1px 4px;
    border-radius:3px;
    background:rgba(255,255,255,0.08);
    color:var(--gold-bright);
    margin-left:2px;
  }

  .lesson-counter-capsule{
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:4px 11px;
    border-radius:8px;
    background:rgba(0,0,0,0.45);
    border:1px solid rgba(255,209,102,0.22);
    font-family:'Orbitron', monospace;
    font-size:0.78rem;
    font-weight:700;
  }
  .lesson-counter-capsule b{
    color:var(--gold-bright);
    text-shadow:0 0 10px rgba(255,209,102,0.45);
  }
  .lcc-sep{ color:var(--ink-dim); opacity:0.6; }
  .lesson-counter-capsule span:last-child{ color:var(--ink-dim); }

  /* Meta Sub-Row */
  .lesson-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 10px;
  }
  .lesson-meta-badge{
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:3px 10px;
    border-radius:999px;
    background:rgba(255,209,102,0.12);
    border:1px solid rgba(255,209,102,0.35);
    color:var(--gold-bright);
  }
  .lesson-meta-badge.badge-review{ color:var(--temple-blue); border-color:rgba(45,212,167,0.45); background:rgba(45,212,167,0.1); }
  .lesson-meta-badge.badge-test{ color:var(--temple-red); border-color:rgba(255,59,86,0.45); background:rgba(255,59,86,0.1); }
  .lesson-meta-badge.badge-words{ color:var(--gold-bright); border-color:rgba(255,209,102,0.45); background:rgba(255,209,102,0.1); }
  .lesson-meta-best{
    font-size:0.68rem;
    letter-spacing:0.04em;
    color:var(--ink-dim);
  }
  .lesson-meta-best b{ color:var(--gold-bright); font-weight:700; }

  /* Dynamic Flow & Combo Gauge */
  .lesson-flow-banner{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin:0 0 14px;
    padding:8px 14px;
    border-radius:12px;
    background:rgba(0, 0, 0, 0.35);
    border:1px solid rgba(255, 255, 255, 0.08);
    transition:border-color .25s ease, background .25s ease;
  }
  .lfb-track{
    height:4px;
    width:100%;
    border-radius:3px;
    background:rgba(255, 255, 255, 0.06);
    overflow:hidden;
  }
  .lfb-bar{
    height:100%;
    width:0%;
    border-radius:3px;
    background:var(--gold-bright);
    transition:width .25s ease, background .3s ease;
  }
  .lfb-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .lfb-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Orbitron', monospace;
    font-size:0.66rem;
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--gold-bright);
  }
  .lfb-sub{
    font-size:0.62rem;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }

  .lesson-flow-banner[data-flow="bronze"]{
    border-color:rgba(245, 158, 11, 0.35);
    background:rgba(245, 158, 11, 0.06);
  }
  .lesson-flow-banner[data-flow="bronze"] .lfb-bar{
    background:linear-gradient(90deg, #f59e0b, #ffd166);
    box-shadow:0 0 8px rgba(245, 158, 11, 0.6);
  }
  .lesson-flow-banner[data-flow="bronze"] .lfb-badge{ color:#f59e0b; }

  .lesson-flow-banner[data-flow="cyan"]{
    border-color:rgba(56, 189, 248, 0.45);
    background:rgba(56, 189, 248, 0.08);
  }
  .lesson-flow-banner[data-flow="cyan"] .lfb-bar{
    background:linear-gradient(90deg, #38bdf8, #818cf8);
    box-shadow:0 0 10px rgba(56, 189, 248, 0.7);
  }
  .lesson-flow-banner[data-flow="cyan"] .lfb-badge{ color:#38bdf8; }

  .lesson-flow-banner[data-flow="gold"]{
    border-color:rgba(255, 209, 102, 0.55);
    background:rgba(255, 209, 102, 0.1);
  }
  .lesson-flow-banner[data-flow="gold"] .lfb-bar{
    background:linear-gradient(90deg, #ffd166, #f59e0b);
    box-shadow:0 0 14px rgba(255, 209, 102, 0.8);
  }
  .lesson-flow-banner[data-flow="gold"] .lfb-badge{ color:#ffd166; }

  .lesson-flow-banner[data-flow="transcendent"]{
    border-color:rgba(52, 211, 153, 0.65);
    background:rgba(52, 211, 153, 0.12);
  }
  .lesson-flow-banner[data-flow="transcendent"] .lfb-bar{
    background:linear-gradient(90deg, #34d399, #38bdf8, #a855f7);
    box-shadow:0 0 18px rgba(52, 211, 153, 0.9);
  }
  .lesson-flow-banner[data-flow="transcendent"] .lfb-badge{ color:#34d399; }

  /* 3D Mechanical Target Keys Pedestal */
  .lesson-newkeys{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0 0 14px;
    padding:12px 18px;
    border-radius:14px;
    background:rgba(4, 7, 14, 0.68);
    border:1px solid rgba(255, 209, 102, 0.22);
    box-shadow:inset 0 2px 10px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06);
  }
  .lesson-newkeys[hidden]{ display:none; }
  .lesson-newkeys-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .lesson-newkeys-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.66rem;
    letter-spacing:0.08em;
    font-weight:700;
    text-transform:uppercase;
    color:var(--gold);
  }
  .lesson-newkeys-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .lesson-newkey-chip{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    transition:transform .18s ease;
  }
  .lesson-newkey-chip:hover{
    transform:translateY(-2px);
  }

  /* 3D Tactile Keycap Body */
  .nk-keycap{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:62px;
    min-height:56px;
    padding:8px 14px 7px;
    border-radius:10px;
    background:linear-gradient(180deg, #1f2638 0%, #111522 100%);
    border:1px solid rgba(255, 209, 102, 0.38);
    box-shadow:
      0 6px 14px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -3px 0 rgba(0,0,0,0.65),
      0 0 14px rgba(255,209,102,0.12);
    box-sizing:border-box;
  }
  .nk-keycap .nk-char{
    font-family:'Noto Sans Khmer','Noto Serif Khmer', sans-serif;
    font-size:1.55rem;
    font-weight:700;
    line-height:1.15;
    color:var(--gold-bright);
    text-shadow:0 0 12px rgba(255,209,102,0.5);
  }
  .nk-homing-bump{
    display:block;
    width:14px;
    height:2.5px;
    margin:3px auto 0;
    border-radius:2px;
    background:var(--gold-bright);
    box-shadow:0 0 6px var(--gold-bright);
  }

  .nk-key-details{
    display:flex;
    align-items:center;
    gap:5px;
  }
  .nk-keyid{
    font-family:'JetBrains Mono', monospace;
    font-size:0.62rem;
    font-weight:700;
    color:#e2e8f0;
    padding:1px 5px;
    border-radius:4px;
    background:rgba(255,255,255,0.08);
  }
  .nk-finger-badge{
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.56rem;
    font-weight:600;
    padding:2px 7px;
    border-radius:999px;
    letter-spacing:0.02em;
    background:rgba(255,255,255,0.06);
    color:var(--ink-dim);
    border:1px solid rgba(255,255,255,0.1);
  }
  .nk-finger-badge.finger-li,
  .nk-finger-badge.finger-ri{
    color:#38bdf8;
    background:rgba(56, 189, 248, 0.12);
    border-color:rgba(56, 189, 248, 0.35);
  }
  .nk-finger-badge.finger-lm,
  .nk-finger-badge.finger-rm{
    color:#34d399;
    background:rgba(52, 211, 153, 0.12);
    border-color:rgba(52, 211, 153, 0.35);
  }
  .nk-finger-badge.finger-lr,
  .nk-finger-badge.finger-rr{
    color:#c084fc;
    background:rgba(192, 132, 252, 0.12);
    border-color:rgba(192, 132, 252, 0.35);
  }
  .nk-finger-badge.finger-lp,
  .nk-finger-badge.finger-rp{
    color:#fb7185;
    background:rgba(251, 113, 133, 0.12);
    border-color:rgba(251, 113, 133, 0.35);
  }
  .nk-finger-badge.finger-lt,
  .nk-finger-badge.finger-rt{
    color:#ffd166;
    background:rgba(255, 209, 102, 0.12);
    border-color:rgba(255, 209, 102, 0.35);
  }

  .lesson-examples-banner{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 14px;
    padding:8px 14px;
    border-radius:10px;
    background:rgba(24, 21, 28, 0.65);
    border:1px solid rgba(255, 209, 102, 0.2);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .lesson-examples-banner[hidden]{ display:none; }
  .leb-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold);
    margin-right:4px;
  }
  .leb-label svg{ opacity:0.85; vertical-align:-1px; }
  .leb-chips{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
  }
  .leb-chip{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:6px;
    background:rgba(255, 209, 102, 0.08);
    border:1px solid rgba(255, 180, 50, 0.28);
    color:var(--gold-bright);
    font-family:'Noto Sans Khmer','Noto Serif Khmer', system-ui, sans-serif;
    font-size:0.95rem;
    letter-spacing:0.03em;
    line-height:1.3;
    transition:background 0.2s, border-color 0.2s, transform 0.15s;
    user-select:none;
  }
  .leb-chip:hover{
    background:rgba(255, 209, 102, 0.16);
    border-color:var(--gold);
    transform:translateY(-1px);
  }
  .lesson-progress-bar{
    height:7px;
    border-radius:4px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    overflow:hidden;
    margin-bottom:16px;
  }
  .lesson-progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 45%, #ffffff 65%, var(--gold-bright) 85%, var(--gold) 100%);
    background-size:200% 100%;
    box-shadow:0 0 14px rgba(255,209,102,0.7);
    transition:width .25s ease;
    animation:progress-sheen-sweep 3.2s linear infinite;
  }
  @keyframes progress-sheen-sweep{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }
  .lesson-char-row{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    min-height:4.2em;
    height:auto;
    padding:10px 20px;
    font-family:'Kantumruy Pro', 'Khmer OS Battambang', 'Khmer OS Siemreap', 'Noto Sans Khmer', sans-serif;
    font-size:2.45rem;
    line-height:1.8;
    margin-bottom:16px;
    background:rgba(7, 10, 20, 0.62);
    border:1.5px solid rgba(255, 255, 255, 0.14);
    border-radius:14px;
    box-shadow:inset 0 3px 12px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06);
    box-sizing:border-box;
  }
  .caps-lock-warning-hud{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(239, 68, 68, 0.16);
    border:1.5px solid rgba(239, 68, 68, 0.55);
    color:#fca5a5;
    font-size:0.8rem;
    font-weight:600;
    padding:6px 14px;
    border-radius:999px;
    margin:6px auto 10px;
    width:fit-content;
    box-shadow:0 0 12px rgba(239, 68, 68, 0.25);
  }
  .caps-lock-warning-hud[hidden]{
    display:none !important;
  }
  .chassis-caps-warn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(239, 68, 68, 0.2);
    border:1px solid rgba(239, 68, 68, 0.6);
    color:#fca5a5;
    font-size:0.65rem;
    font-weight:700;
    padding:2px 7px;
    border-radius:4px;
    margin-left:8px;
  }
  .chassis-caps-warn[hidden]{
    display:none !important;
  }
  .lc-char{
    color:#f1f5f9;
    font-weight:700;
    text-shadow:none;
    transition:color .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .16s cubic-bezier(.34,1.56,.64,1);
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:1.22em;
    min-height:1.95em;
    height:auto;
    line-height:1.8;
    padding:4px 10px;
    border-radius:12px;
    border:1.5px solid rgba(255, 255, 255, 0.16);
    border-bottom:4px solid rgba(148, 163, 184, 0.42);
    background:linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow:0 3px 8px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    flex-shrink:0;
    box-sizing:border-box;
  }
  /* Option 2B: Soft Finger-Zone Tinted 3D Keycap Tiles (Dark / Default Themes) */
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lp"],
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rp"]{
    background:linear-gradient(180deg, rgba(244, 63, 94, 0.18) 0%, rgba(244, 63, 94, 0.08) 100%);
    border-color:rgba(244, 63, 94, 0.45);
    border-bottom-color:#e11d48;
  }
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lr"],
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rr"]{
    background:linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color:rgba(245, 158, 11, 0.45);
    border-bottom-color:#d97706;
  }
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lm"],
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rm"]{
    background:linear-gradient(180deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color:rgba(16, 185, 129, 0.45);
    border-bottom-color:#059669;
  }
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="li"]{
    background:linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.10) 100%);
    border-color:rgba(59, 130, 246, 0.48);
    border-bottom-color:#2563eb;
  }
  .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="ri"]{
    background:linear-gradient(180deg, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.10) 100%);
    border-color:rgba(139, 92, 246, 0.48);
    border-bottom-color:#7c3aed;
  }
  .lc-char.done{
    color:#34d399 !important;
    background:linear-gradient(180deg, rgba(16, 185, 129, 0.22) 0%, rgba(6, 78, 59, 0.42) 100%) !important;
    border:1.5px solid rgba(52, 211, 153, 0.48) !important;
    border-bottom:4px solid #059669 !important;
    text-shadow:none !important;
    animation:lc-char-pop-done .26s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes lc-char-pop-done{
    0%{ transform:scale(1.22) translateY(-2px); box-shadow:0 0 16px rgba(52,211,153,0.8); }
    50%{ transform:scale(0.96); }
    100%{ transform:scale(1) translateY(0); box-shadow:none; }
  }
  .lc-char.current{
    color:#ffffff !important;
    font-weight:800 !important;
    background:linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%) !important;
    border:2px solid #a78bfa !important;
    border-bottom:4px solid #2e1065 !important;
    box-shadow:0 8px 20px rgba(124, 58, 237, 0.45), 0 0 0 3px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.45) !important;
    transform:translateY(-3px) scale(1.06);
    animation:lc-char-target-breathe 1.2s ease-in-out infinite alternate;
  }
  @keyframes lc-char-target-breathe{
    0%{
      box-shadow:0 6px 16px rgba(124, 58, 237, 0.4), 0 0 0 3px rgba(139, 92, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform:scale(1.04) translateY(-2px);
    }
    100%{
      box-shadow:0 10px 24px rgba(124, 58, 237, 0.65), 0 0 0 4px rgba(167, 139, 250, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
      transform:scale(1.07) translateY(-3.5px);
    }
  }
  .lc-char.current::after{
    content:"";
    position:absolute; left:8px; right:8px; bottom:3px;
    height:3px;
    border-radius:999px;
    background:#ffffff;
    box-shadow:0 0 8px rgba(255, 255, 255, 0.85);
    animation:lc-cursor-beam 1.2s ease-in-out infinite alternate;
  }
  @keyframes lc-cursor-beam{
    0%{ opacity:0.65; transform:scaleX(0.85); }
    100%{ opacity:1; transform:scaleX(1.05); }
  }
  .lc-space{
    min-width:1.22em;
    color:#94a3b8;
    font-size:2.45rem;
    font-weight:700;
    height:1.58em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-sizing:border-box;
    border:1.5px dashed rgba(148, 163, 184, 0.35);
    border-bottom:4px solid rgba(148, 163, 184, 0.35);
    background:rgba(255, 255, 255, 0.03);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  .lc-space.done{
    color:#34d399 !important;
    border-style:solid !important;
    border-color:rgba(52, 211, 153, 0.45) !important;
    border-bottom:4px solid #059669 !important;
    animation:lc-char-pop-done .26s cubic-bezier(.34,1.56,.64,1);
  }
  .lc-space.current{
    color:#ffffff !important;
    border-style:solid !important;
    border-color:#a78bfa !important;
    border-bottom:4px solid #2e1065 !important;
    animation:lc-char-target-breathe 1.2s ease-in-out infinite alternate;
  }
  .lc-char.shake{
    animation:lc-char-haptic-shake .32s cubic-bezier(.36,.07,.19,.97) !important;
    color:#ffffff !important;
    background:rgba(239, 68, 68, 0.88) !important;
    border-color:#ef4444 !important;
    box-shadow:0 0 24px rgba(239, 68, 68, 0.75) !important;
    text-shadow:none !important;
  }
  @keyframes lc-char-haptic-shake{
    0%,100%{ transform:translateX(0); }
    15%{ transform:translateX(-6px) rotate(-2deg); }
    35%{ transform:translateX(6px) rotate(2deg); }
    55%{ transform:translateX(-4px) rotate(-1deg); }
    75%{ transform:translateX(3px) rotate(1deg); }
    90%{ transform:translateX(-1px); }
  }
  /* Tactical Telemetry HUD Pods */
  .lesson-stats{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .stat-pod{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:10px;
    background:rgba(0, 0, 0, 0.42);
    border:1px solid rgba(255, 255, 255, 0.08);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:all .18s ease;
  }
  .stat-pod:hover{
    border-color:rgba(255, 255, 255, 0.16);
    background:rgba(0, 0, 0, 0.55);
  }
  .stat-pod-icon{
    flex-shrink:0;
    transition:transform .18s ease;
  }
  .stat-pod:hover .stat-pod-icon{
    transform:scale(1.1);
  }
  .stat-pod-body{
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }
  .stat-pod-title{
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.56rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .stat-pod-num{
    font-family:'JetBrains Mono', monospace;
    font-size:0.84rem;
    font-weight:700;
    color:#ffffff;
  }

  /* Telemetry Accent Grading */
  .stat-pod-acc .stat-pod-icon{ color:#34d399; }
  .stat-pod-acc b.grade-emerald{ color:#34d399; text-shadow:0 0 10px rgba(52,211,153,0.5); }
  .stat-pod-acc b.grade-gold{ color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,0.4); }
  .stat-pod-acc b.grade-rose{ color:#fb7185; text-shadow:0 0 10px rgba(251,113,133,0.5); }

  .stat-pod-wpm .stat-pod-icon{ color:#38bdf8; }
  .stat-pod-wpm .stat-pod-num{ color:#38bdf8; text-shadow:0 0 10px rgba(56,189,248,0.4); }

  .stat-pod-streak .stat-pod-icon{ color:#ffd166; }
  .stat-pod-streak .stat-pod-num{ color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,0.45); }

  .stat-pod-err .stat-pod-icon{ color:#fb7185; }
  .stat-pod-err .stat-pod-num{ color:#fb7185; }

  .stat-pod-fix .stat-pod-icon{ color:#a78bfa; }
  .stat-pod-fix .stat-pod-num{ color:#a78bfa; }

  .lesson-exit-tactical-btn,
  #lessonExitBtn{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Space Grotesk', -apple-system, sans-serif;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:rgba(239,68,68,0.12);
    border:1px solid rgba(239,68,68,0.38);
    color:#fca5a5;
    padding:7px 14px;
    border-radius:9px;
    cursor:pointer;
    transition:all .18s ease;
  }
  .lesson-exit-tactical-btn:hover,
  #lessonExitBtn:hover{
    color:#ffffff;
    background:rgba(239,68,68,0.28);
    border-color:#ef4444;
    box-shadow:0 0 16px rgba(239,68,68,0.4);
    transform:translateY(-1px);
  }

  .lesson-complete-overlay{
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 70vw 60vh at 50% 42%, rgba(255,209,102,0.16), transparent 70%),
      rgba(6,7,12,0.85);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    display:flex; align-items:center; justify-content:center;
    z-index:70;
    animation:overlay-in .32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .lesson-complete-overlay.is-closing{
    animation:overlay-out .22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
    pointer-events:none;
  }
  .lesson-complete-overlay.is-closing .lesson-complete-card{
    animation:lesson-card-victory-out .22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  }
  @keyframes overlay-in{
    from{ opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); }
    to{ opacity:1; backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); }
  }
  @keyframes overlay-out{
    from{ opacity:1; backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); }
    to{ opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); }
  }

  .lesson-complete-card{
    position:relative;
    width:min(90vw, 400px);
    padding:36px 28px 28px;
    border-radius:20px;
    background:
      radial-gradient(ellipse 140% 90% at 50% -10%, rgba(255,209,102,0.14), transparent 55%),
      linear-gradient(180deg, #141830, #0a0c18);
    border:1px solid rgba(255,157,46,0.55);
    box-shadow:0 40px 90px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.3);
    text-align:center;
    overflow:hidden;
    isolation:isolate;
    animation:lesson-card-victory-pop .52s cubic-bezier(0.17, 0.89, 0.32, 1.25) both, lc-card-glow 3.2s ease-in-out infinite 0.6s;
    transform-origin:center center;
    will-change:transform, opacity, filter;
  }

  @keyframes lesson-card-victory-pop{
    0%{
      opacity: 0;
      transform: perspective(1000px) translateY(45px) scale(0.74);
      filter: brightness(1.7) drop-shadow(0 0 45px rgba(255,209,102,0.85));
    }
    60%{
      opacity: 1;
      transform: perspective(1000px) translateY(-6px) scale(1.035);
      filter: brightness(1.15) drop-shadow(0 25px 60px rgba(255,209,102,0.4));
    }
    82%{
      transform: perspective(1000px) translateY(2px) scale(0.99);
      filter: brightness(1.04);
    }
    100%{
      opacity: 1;
      transform: perspective(1000px) translateY(0) scale(1);
      filter: brightness(1) drop-shadow(0 20px 50px rgba(0,0,0,0.7));
    }
  }

  @keyframes lesson-card-victory-out{
    0%{ opacity: 1; transform: perspective(1000px) translateY(0) scale(1); }
    100%{ opacity: 0; transform: perspective(1000px) translateY(25px) scale(0.9); }
  }
  @keyframes lc-card-glow{
    0%,100%{ box-shadow:0 40px 90px -24px rgba(0,0,0,0.8), 0 0 32px rgba(255,209,102,0.22); }
    50%{ box-shadow:0 40px 90px -24px rgba(0,0,0,0.8), 0 0 54px rgba(255,209,102,0.42); }
  }
  .lesson-complete-card::before{
    content:'';
    position:absolute;
    inset:-45%;
    background:conic-gradient(from 0deg, transparent, rgba(255,209,102,0.55), transparent 28%, transparent 60%, rgba(255,209,102,0.3), transparent 85%);
    animation:lc-sheen-spin 6s linear infinite;
    opacity:0.6;
    pointer-events:none;
    z-index:0;
  }
  .lesson-complete-card::after{
    content:'';
    position:absolute; inset:1.5px;
    border-radius:19px;
    background:
      radial-gradient(ellipse 140% 90% at 50% -10%, rgba(255,209,102,0.14), transparent 55%),
      linear-gradient(180deg, #141830, #0a0c18);
    z-index:0;
  }
  .lesson-complete-card > *{ position:relative; z-index:1; }
  @keyframes lc-sheen-spin{ to{ transform:rotate(360deg); } }

  /* drifting embers rising inside the card */
  .lc-particle{
    position:absolute;
    bottom:-6px;
    width:3px; height:3px;
    border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 6px rgba(255,209,102,0.9);
    opacity:0;
    animation:lc-ember-rise linear infinite;
    z-index:0;
    pointer-events:none;
  }
  @keyframes lc-ember-rise{
    0%{ transform:translateY(0) scale(0.6); opacity:0; }
    12%{ opacity:0.85; }
    85%{ opacity:0.5; }
    100%{ transform:translateY(-260px) scale(1); opacity:0; }
  }

  .lc-badge-halo{
    position:relative;
    width:76px; height:76px;
    margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
  }
  .lc-badge-halo::before{
    content:'';
    position:absolute; inset:0;
    border-radius:50%;
    background:conic-gradient(from 0deg, var(--gold-bright), transparent 22%, transparent 50%, var(--gold-bright) 72%, transparent 100%);
    animation:lc-halo-spin 3.2s linear infinite;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    opacity:0.9;
  }
  @keyframes lc-halo-spin{ to{ transform:rotate(360deg); } }
  .lc-badge{
    position:relative;
    width:54px; height:54px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.55rem;
    line-height:1;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.4), transparent 55%),
      linear-gradient(145deg, var(--gold-bright), var(--gold));
    color:#241405;
    box-shadow:0 0 22px rgba(255,209,102,0.55), 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.4);
    animation:lc-badge-pop .55s cubic-bezier(.22,.9,.32,1.2), lc-badge-glow 2.6s ease-in-out infinite 0.55s;
  }
  @keyframes lc-badge-pop{
    from{ transform:scale(0) rotate(-35deg); opacity:0;}
    to{ transform:scale(1) rotate(0deg); opacity:1;}
  }
  @keyframes lc-badge-glow{
    0%,100%{ box-shadow:0 0 22px rgba(255,209,102,0.55), 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.4); }
    50%{ box-shadow:0 0 36px rgba(255,209,102,0.85), 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.4); }
  }
  .lesson-complete-card h2{
    font-family:'Orbitron', sans-serif;
    font-style:normal;
    font-weight:700;
    text-transform:uppercase; letter-spacing:0.03em;
    font-size:1.6rem;
    margin:0 0 6px;
    background:linear-gradient(100deg, var(--gold-bright) 20%, #fff0c2 40%, var(--gold-bright) 60%);
    background-size:220% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:lc-title-shimmer 3.5s ease-in-out infinite;
  }
  @keyframes lc-title-shimmer{
    0%{ background-position:200% center; }
    50%{ background-position:0% center; }
    100%{ background-position:200% center; }
  }
  .lesson-complete-card p{
    color:var(--ink-dim);
    font-size:0.78rem;
    margin:0 0 16px;
  }
  .lc-divider{
    display:flex; align-items:center; gap:8px;
    width:100%; max-width:220px;
    margin:0 auto 20px;
  }
  .lc-divider::before, .lc-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,157,46,0.55));
  }
  .lc-divider::after{ background:linear-gradient(90deg, rgba(255,157,46,0.55), transparent); }
  .lc-divider span{
    color:var(--gold-bright);
    font-size:0.6rem;
    opacity:0.8;
    transform:rotate(45deg);
    display:inline-block;
  }
  .lc-stat-row{ display:flex; justify-content:center; align-items:center; gap:26px; margin-bottom:24px; }
  .lc-ring{
    position:relative;
    width:70px; height:70px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:conic-gradient(var(--gold-bright) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
    box-shadow:0 0 18px rgba(255,209,102,0.35);
    animation:lc-ring-in .6s cubic-bezier(.22,.9,.32,1.2) .1s backwards;
  }
  .lc-ring::before{
    content:'';
    position:absolute; inset:7px;
    border-radius:50%;
    background:linear-gradient(180deg, #171c33, #0c0e1c);
    box-shadow:inset 0 0 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .lc-ring b{
    position:relative; z-index:1;
    font-family:'JetBrains Mono', monospace;
    font-size:1rem;
    font-weight:600;
    color:var(--ink);
  }
  @keyframes lc-ring-in{ from{ transform:scale(0.5); opacity:0;} to{ transform:scale(1); opacity:1;} }
  .lc-stat{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
  .lc-stat b{ font-size:1.4rem; color:var(--ink); font-family:'JetBrains Mono', monospace; text-shadow:0 0 14px rgba(255,209,102,0.25); }
  .lc-stat span, .lc-ring-label{ font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); }
  .lc-ring-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .lesson-complete-actions{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
  .lesson-complete-actions button{
    position:relative;
    overflow:hidden;
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.66rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:9px 18px;
    border-radius:999px;
    cursor:pointer;
    border:1px solid var(--stone-3);
    background:linear-gradient(180deg, rgba(255,255,255,0.04), transparent), var(--stone-1);
    color:var(--ink-dim);
    transition:all .2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  .lesson-complete-actions button::after{
    content:'';
    position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform:skewX(-20deg);
    transition:left .5s ease;
  }
  .lesson-complete-actions button:hover::after{ left:130%; }
  .lesson-complete-actions button.primary,
  .lc-mistakes.primary{
    background:linear-gradient(145deg, var(--gold-bright), #ff9d2e);
    border-color:var(--gold-bright);
    color:#201104;
    font-weight:700;
    box-shadow:0 0 18px rgba(255,209,102,0.45);
    animation:mistakes-btn-pulse 2.2s ease-in-out infinite;
  }
  @keyframes mistakes-btn-pulse{
    0%,100%{
      box-shadow:0 0 0 0 rgba(255, 157, 46, 0.55), 0 4px 14px rgba(255, 157, 46, 0.3);
      transform:scale(1);
    }
    50%{
      box-shadow:0 0 0 6px rgba(255, 157, 46, 0), 0 6px 22px rgba(255, 157, 46, 0.6);
      transform:scale(1.028);
    }
  }
  .lesson-complete-actions button:hover{
    box-shadow:0 0 16px rgba(255,209,102,0.35);
    border-color:var(--gold);
    color:var(--ink);
    transform:translateY(-2px) scale(1.03);
  }
  .lesson-complete-actions button.primary:hover{
    box-shadow:0 0 28px rgba(255,209,102,0.7);
    color:#1a0e03;
    transform:translateY(-2px) scale(1.05);
  }
  .lesson-complete-actions button:active{
    transform:translateY(0) scale(0.96) !important;
  }
  .lc-mistakes-preview{
    margin:0 auto 16px;
    padding:10px 14px;
    max-width:320px;
    border-radius:12px;
    background:rgba(200,71,76,0.12);
    border:1px solid rgba(255,157,46,0.3);
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
  }
  .lc-mistakes-title{
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold-bright);
    opacity:0.9;
  }
  .lc-mistake-chips{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .lc-mistake-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(10,12,24,0.7);
    border:1px solid rgba(255,157,46,0.45);
    border-radius:7px;
    padding:3px 9px;
    color:var(--ink);
  }
  .lc-mistake-chip b{
    font-family:'Kantumruy Pro', 'Noto Sans Khmer', sans-serif;
    color:var(--gold-bright);
    font-size:1.15rem;
    line-height:1;
  }
  .lc-mistake-chip small{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    color:#ff8e8e;
    font-weight:600;
  }
  .lesson-complete-actions button.lc-mistakes{
    background:linear-gradient(135deg, rgba(255,157,46,0.2), rgba(200,71,76,0.25));
    border-color:rgba(255,157,46,0.55);
    color:var(--gold-bright);
    font-weight:600;
  }
  .lesson-complete-actions button.lc-mistakes.primary{
    background:linear-gradient(145deg, #ff9d2e, #e2583e);
    border-color:#ffbd59;
    color:#1c0d02;
    box-shadow:0 0 20px rgba(255,157,46,0.45);
  }
  .lesson-complete-actions button.lc-mistakes:hover{
    border-color:var(--gold-bright);
    transform:translateY(-1px);
  }



  /* ============================================================
     PK Khmer Type — Studio Floating Command Deck & Controls
     ============================================================ */
  .toolbar{
    display:flex;
    gap:7px;
    margin:80px auto 0;
    max-width:920px;
    width:fit-content;
    box-sizing:border-box;
    padding:7px 12px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    background:linear-gradient(180deg, rgba(17, 24, 46, 0.84) 0%, rgba(9, 13, 27, 0.9) 100%);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255, 209, 102, 0.18);
    border-radius:999px;
    box-shadow:
      0 20px 48px -12px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 24px -4px rgba(255, 209, 102, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    position:relative;
    z-index:6;
    transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease, border-color .24s ease;
  }
  .toolbar:hover{
    border-color:rgba(255, 209, 102, 0.32);
    box-shadow:
      0 22px 52px -10px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 32px -4px rgba(255, 209, 102, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  .toolbar button{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.67rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:rgba(24, 32, 58, 0.65);
    border:1px solid rgba(255, 255, 255, 0.08);
    color:var(--ink-dim, #94a3b8);
    padding:7px 13px;
    border-radius:999px;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    transition:all .2s cubic-bezier(.16,1,.3,1);
    box-shadow:0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    position:relative;
  }
  .toolbar button:hover{
    color:#ffffff;
    background:rgba(40, 52, 88, 0.88);
    border-color:rgba(255, 209, 102, 0.45);
    transform:translateY(-1.5px);
    box-shadow:0 6px 18px rgba(0,0,0,0.38), 0 0 14px rgba(255,209,102,0.2);
  }
  .toolbar button:active{
    transform:translateY(0.5px) scale(0.98);
  }
  .toolbar button.on,
  .toolbar button[aria-pressed="true"]{
    color:#161004;
    background:linear-gradient(135deg, #ffd166 0%, #f59e0b 100%);
    border-color:rgba(255, 240, 180, 0.85);
    box-shadow:
      0 3px 12px rgba(245, 158, 11, 0.4),
      0 0 16px rgba(255, 209, 102, 0.35),
      inset 0 1px 1px rgba(255, 255, 255, 0.65);
    font-weight:600;
    text-shadow:0 0.5px 0 rgba(255, 255, 255, 0.35);
  }
  .toolbar button.on:hover,
  .toolbar button[aria-pressed="true"]:hover{
    filter:brightness(1.08);
    transform:translateY(-1.5px);
    box-shadow:
      0 6px 20px rgba(245, 158, 11, 0.5),
      0 0 22px rgba(255, 209, 102, 0.45),
      inset 0 1px 1px rgba(255, 255, 255, 0.75);
  }
  .toolbar #trialToggle:hover{
    border-color:rgba(239, 68, 68, 0.6);
    box-shadow:0 6px 18px rgba(0,0,0,0.4), 0 0 16px rgba(239, 68, 68, 0.3);
  }
  .toolbar #trialToggle.on,
  .toolbar #trialToggle[aria-pressed="true"]{
    background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color:#ffffff;
    border-color:#fca5a5;
    box-shadow:
      0 3px 14px rgba(239, 68, 68, 0.5),
      0 0 20px rgba(239, 68, 68, 0.35),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
  }
  .toolbar #raceToggle:hover{
    border-color:rgba(16, 185, 129, 0.6);
    box-shadow:0 6px 18px rgba(0,0,0,0.4), 0 0 16px rgba(16, 185, 129, 0.3);
  }
  .toolbar #raceToggle.on,
  .toolbar #raceToggle[aria-pressed="true"]{
    background:linear-gradient(135deg, #10b981 0%, #059669 100%);
    color:#ffffff;
    border-color:#6ee7b7;
    box-shadow:
      0 3px 14px rgba(16, 185, 129, 0.5),
      0 0 20px rgba(16, 185, 129, 0.35),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
  }
  @media (max-width: 768px){
    .toolbar{
      margin:70px auto 0;
      border-radius:24px;
      padding:10px 12px;
      gap:6px;
      max-width:calc(100% - 24px);
    }
    .toolbar button{
      font-size:0.62rem;
      padding:6px 10px;
      gap:5px;
    }
  }
  @media (max-width: 480px){
    .toolbar{
      margin:62px auto 0;
      border-radius:18px;
      padding:8px 10px;
      gap:5px;
    }
    .toolbar button{
      font-size:0.58rem;
      padding:5px 8px;
    }
  }
  html.theme-light .toolbar{
    background:rgba(248, 250, 252, 0.88);
    border-color:rgba(15, 23, 42, 0.12);
    box-shadow:0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
  }
  html.theme-sepia .toolbar{
    background:rgba(245, 238, 224, 0.9);
    border-color:rgba(160, 140, 107, 0.35);
    box-shadow:0 12px 32px -8px rgba(44, 27, 12, 0.12), 0 0 0 1px rgba(44, 27, 12, 0.08);
  }
  html.theme-glass .toolbar{
    background:rgba(255, 255, 255, 0.08);
    border-color:rgba(255, 255, 255, 0.22);
    box-shadow:0 20px 48px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .hint{
    margin-top:22px;
    font-size:0.72rem;
    color:var(--ink-dim);
    text-align:center;
    max-width:540px;
    line-height:1.7;
    text-shadow:0 1px 6px rgba(0,0,0,0.85);
  }
  .hint b{ color:var(--gold-bright); font-weight:600;}

  /* ============================================================
     PK Khmer Type — Learner Feedback & Incomplete Lesson Styles
     ============================================================ */
  .lesson-live-hint{
    background:rgba(255,209,102,0.09);
    border:1px solid rgba(255,209,102,0.3);
    border-radius:8px;
    padding:6px 14px;
    margin:6px auto 10px;
    font-size:0.75rem;
    font-weight:600;
    color:var(--gold-bright);
    text-align:center;
    letter-spacing:0.02em;
    animation:fadeIn .25s ease;
  }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }

  .lesson-complete-card.pk-fb-complete-card,
  .lesson-complete-card.pk-fb-paused-card{
    width:min(92vw, 520px);
    padding:30px 24px 24px;
    animation:lesson-card-victory-pop .52s cubic-bezier(0.17, 0.89, 0.32, 1.25) both, lc-card-glow 3.2s ease-in-out infinite 0.6s;
  }

  .pk-fb-header h2{
    font-size:1.35rem;
    margin:0 0 4px;
    letter-spacing:0.04em;
    animation:fb-title-slam 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.28) both;
    display:inline-block;
    position:relative;
  }
  @keyframes fb-title-slam{
    0%{ opacity:0; transform:scale(0.65) translateY(-18px); }
    65%{ opacity:1; transform:scale(1.08) translateY(2px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }
  .pk-fb-lesson-title{
    font-size:0.8rem;
    color:var(--ink-dim);
    margin:0 0 16px;
    animation:fb-fade-slide-up 0.4s ease 0.1s both;
  }

  .pk-fb-trend-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:8px;
    margin:0 0 14px;
    font-size:0.78rem;
    font-weight:500;
    animation:fb-fade-slide-up 0.45s ease 0.14s both;
  }
  @keyframes fb-fade-slide-up{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .pk-fb-trend-row.improving{
    background:rgba(45, 212, 167, 0.12);
    border:1px solid rgba(45, 212, 167, 0.3);
    color:#2dd4a7;
  }
  .pk-fb-trend-row.declining{
    background:rgba(255, 107, 129, 0.12);
    border:1px solid rgba(255, 107, 129, 0.3);
    color:#ff6b81;
  }
  .pk-fb-trend-row.stable{
    background:rgba(100, 210, 255, 0.1);
    border:1px solid rgba(100, 210, 255, 0.25);
    color:#64d2ff;
  }
  .pk-fb-trend-badge{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.7rem;
    padding:2px 6px;
    border-radius:4px;
    background:rgba(0,0,0,0.25);
    white-space:nowrap;
  }
  .pk-fb-trend-text{
    flex:1;
    line-height:1.3;
  }

  .pk-fb-perf-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-bottom:14px;
  }
  .pk-fb-stat-box{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:8px 6px;
    text-align:center;
    animation:fb-box-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin:center center;
    transition:transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .pk-fb-stat-box:nth-child(1){ animation-delay:0.08s; }
  .pk-fb-stat-box:nth-child(2){ animation-delay:0.13s; }
  .pk-fb-stat-box:nth-child(3){ animation-delay:0.18s; }
  .pk-fb-stat-box:nth-child(4){ animation-delay:0.23s; }
  .pk-fb-stat-box:nth-child(5){ animation-delay:0.28s; }
  .pk-fb-stat-box:nth-child(6){ animation-delay:0.33s; }

  @keyframes fb-box-pop{
    0%{
      opacity:0;
      transform:perspective(600px) translateY(18px) scale(0.85) rotateX(15deg);
    }
    65%{
      opacity:1;
      transform:perspective(600px) translateY(-3px) scale(1.04) rotateX(-3deg);
    }
    100%{
      opacity:1;
      transform:perspective(600px) translateY(0) scale(1) rotateX(0deg);
    }
  }
  .pk-fb-stat-box:hover{
    transform:translateY(-3px) scale(1.03);
    border-color:var(--gold-bright);
    box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(255,209,102,0.25);
  }
  .pk-fb-stat-box.highlight{
    background:rgba(255,209,102,0.08);
    border-color:rgba(255,209,102,0.4);
    box-shadow:0 0 16px rgba(255,209,102,0.12);
  }
  .pk-fb-stat-box.has-err{
    border-color:rgba(255,59,86,0.35);
  }
  .pk-fb-stat-box .val{
    font-family:'JetBrains Mono', monospace;
    font-size:1.1rem;
    font-weight:700;
    color:var(--gold-bright);
    display:block;
  }
  .pk-fb-stat-box .lbl{
    font-size:0.6rem;
    color:var(--ink-dim);
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  .pk-fb-insights-row{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    text-align:left;
  }
  @media (max-width:540px){
    .pk-fb-insights-row{ flex-direction:column; }
  }
  .pk-fb-insight-col{
    flex:1;
    background:rgba(0,0,0,0.28);
    border-radius:10px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.06);
    animation:fb-fade-slide-up 0.45s ease 0.32s both;
  }
  .pk-fb-subhead{
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-weight:700;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:5px;
  }
  .pk-fb-subhead.good{ color:#2dd4a7; }
  .pk-fb-subhead.warn{ color:#ff9d2e; }

  .pk-fb-chip-group{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
  }
  .pk-fb-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 7px;
    border-radius:6px;
    font-size:0.72rem;
    animation:fb-chip-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .pk-fb-chip:hover{
    transform:translateY(-2px) scale(1.06);
  }
  @keyframes fb-chip-pop{
    from{ opacity:0; transform:scale(0.7) translateY(6px); }
    to{ opacity:1; transform:scale(1) translateY(0); }
  }
  .pk-fb-chip.good{
    background:rgba(45,212,167,0.12);
    border:1px solid rgba(45,212,167,0.3);
    color:#2dd4a7;
  }
  .pk-fb-chip.warn{
    background:rgba(255,157,46,0.14);
    border:1px solid rgba(255,157,46,0.35);
    color:var(--gold-bright);
  }
  .pk-fb-chip small{
    font-size:0.64rem;
    opacity:0.85;
  }
  .pk-fb-empty{
    font-size:0.68rem;
    color:var(--ink-dim);
    font-style:italic;
  }

  .pk-fb-finger-note{
    background:rgba(255,157,46,0.08);
    border-left:3px solid #ff9d2e;
    border-radius:6px;
    padding:7px 10px;
    font-size:0.72rem;
    color:#ffd8a8;
    margin:8px 0;
    text-align:left;
    display:flex;
    align-items:center;
    gap:6px;
    animation:fb-fade-slide-up 0.45s ease 0.36s both;
  }

  .pk-fb-section-breakdown{
    margin:10px 0;
    text-align:left;
    background:rgba(0,0,0,0.2);
    border-radius:8px;
    padding:8px 10px;
    animation:fb-fade-slide-up 0.45s ease 0.4s both;
  }
  .pk-fb-exercise-bars{ margin-top:6px; }
  .pk-fb-ex-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.68rem;
    margin:3px 0;
  }
  .pk-fb-ex-name{
    width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--ink-dim);
  }
  .pk-fb-ex-track{
    flex:1;
    height:7px;
    background:rgba(255,255,255,0.08);
    border-radius:4px;
    overflow:hidden;
  }
  .pk-fb-ex-fill{
    height:100%;
    background:linear-gradient(90deg, #10b981, #2dd4a7);
    border-radius:3px;
    transform-origin:left center;
    animation:fb-bar-fill 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 0.25s;
    position:relative;
    overflow:hidden;
    box-shadow:0 0 10px rgba(45, 212, 167, 0.35);
  }
  .pk-fb-ex-fill.warn{
    background:linear-gradient(90deg, #ef4444, #ff5a70);
    box-shadow:0 0 10px rgba(255, 90, 112, 0.35);
  }
  @keyframes fb-bar-fill{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
  }
  .pk-fb-ex-fill::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    animation:fb-bar-shimmer 2s ease-in-out infinite 1.1s;
    transform:translateX(-100%);
  }
  @keyframes fb-bar-shimmer{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(250%); }
  }
  .pk-fb-ex-acc{
    width:32px;
    text-align:right;
    font-family:'JetBrains Mono', monospace;
    font-size:0.65rem;
    color:var(--ink-dim);
  }

  .pk-fb-rec-banner{
    background:rgba(255,209,102,0.08);
    border:1px solid rgba(255,209,102,0.3);
    border-radius:10px;
    padding:10px 14px;
    margin-top:14px;
    text-align:left;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.78rem;
    line-height:1.4;
    color:#f0f3f8;
    animation:fb-fade-slide-up 0.45s ease 0.44s both;
  }
  .pk-fb-rec-banner.retry{
    border-color:rgba(255,59,86,0.4);
    background:rgba(255,59,86,0.09);
  }
  .pk-fb-rec-banner.next{
    border-color:rgba(45,212,167,0.4);
    background:rgba(45,212,167,0.09);
  }
  .pk-fb-rec-icon{ color:var(--gold-bright); flex-shrink:0; }

  /* Incomplete Lesson Styles */
  .pk-fb-pause-progress{ margin:14px 0 16px; }
  .pk-fb-pause-bar{
    height:8px;
    background:rgba(255,255,255,0.08);
    border-radius:4px;
    overflow:hidden;
  }
  .pk-fb-pause-fill{
    height:100%;
    background:var(--gold-bright);
    border-radius:4px;
    transform-origin:left center;
    animation:fb-bar-fill 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.2s;
    box-shadow:0 0 12px rgba(255, 209, 102, 0.4);
  }
  .pk-fb-pause-meta{
    display:flex;
    justify-content:space-between;
    font-size:0.72rem;
    color:var(--ink-dim);
    margin-top:6px;
  }
  .pk-fb-pause-details{
    background:rgba(0,0,0,0.28);
    border-radius:10px;
    padding:10px 14px;
    margin:12px 0;
    font-size:0.76rem;
    text-align:left;
    border:1px solid rgba(255,255,255,0.06);
  }
  .pk-fb-pause-row{
    display:flex;
    justify-content:space-between;
    margin:5px 0;
    color:var(--ink-dim);
  }
  .pk-fb-pause-row b{
    color:#ffffff;
    font-family:'JetBrains Mono', monospace;
  }

  /* ============================================================
     Phase 8 — Adaptive Practice Styling
     ============================================================ */
  .adaptive-sidebar-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255, 157, 46, 0.14), rgba(160, 107, 255, 0.08));
    border: 1px solid rgba(255, 157, 46, 0.4);
    border-radius: 9px;
    padding: 8px 12px;
    margin: 8px 6px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .adaptive-sidebar-card:hover {
    border-color: var(--gold-bright);
    background: linear-gradient(135deg, rgba(255, 157, 46, 0.22), rgba(160, 107, 255, 0.14));
    transform: translateY(-1px);
  }
  .asc-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .asc-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.03em;
  }
  .asc-icon { color: var(--gold-bright); }
  .asc-sub {
    font-size: 0.68rem;
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
  }
  .asc-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    color: #0b0d18;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 157, 46, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  .asc-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.04);
  }

  /* Adaptive Panel */
  .adaptive-panel {
    background: linear-gradient(180deg, #101428 0%, #0a0d1a 100%);
    border: 1px solid rgba(255, 157, 46, 0.35);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 12px auto;
    max-width: 900px;
    animation: fadeIn 0.25s ease-out;
  }
  .adaptive-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .adaptive-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .adaptive-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
  }
  .adaptive-stage-badge {
    background: rgba(160, 107, 255, 0.16);
    border: 1px solid rgba(160, 107, 255, 0.4);
    color: #c4b5fd;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
  }
  .adaptive-focus-badge {
    background: rgba(255, 209, 102, 0.15);
    border: 1px solid rgba(255, 209, 102, 0.45);
    color: var(--gold-bright);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
  }
  .adaptive-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .adaptive-unlocked-count {
    font-size: 0.72rem;
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
  }
  .adaptive-reset-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ink-dim);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .adaptive-reset-btn:hover {
    background: rgba(247, 185, 85, 0.2);
    border-color: #f7b955;
    color: #fff;
  }
  .adaptive-exit-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ink-dim);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .adaptive-exit-btn:hover {
    background: rgba(255, 90, 112, 0.2);
    border-color: #ff5a70;
    color: #fff;
  }

  /* Available Letter Strip */
  .adaptive-letter-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 6px;
    margin: 8px 0 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* scrollbar-width: thin (handled via ::-webkit-scrollbar) */
  }
  .adaptive-letter-strip::-webkit-scrollbar {
    height: 4px;
  }
  .adaptive-letter-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  /* Letter Pill */
  .as-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 46px;
    padding: 3px 6px 7px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ink-dim);
    cursor: default;
    user-select: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
  }
  .as-pill:hover {
    transform: translateY(-2px);
  }
  .as-pill-char {
    line-height: 1.1;
  }
  .as-pill-stat {
    font-size: 0.62rem;
    line-height: 1;
    margin-top: 2px;
    font-weight: 600;
    opacity: 0.85;
  }
  .as-pill-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  /* Keybr-Style Mastery Mini Progress Bar */
  .as-pill-bar-track {
    position: absolute;
    bottom: 3px;
    left: 4px;
    right: 4px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
  }
  .as-pill-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: #3b82f6;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Status variants */
  .as-pill.as-locked {
    opacity: 0.35;
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.05);
    color: #64748b;
  }
  .as-pill.as-active,
  .as-pill.as-zero {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
  }
  .as-pill.as-active .as-pill-char,
  .as-pill.as-zero .as-pill-char {
    color: #93c5fd;
  }
  .as-pill.as-active .as-pill-stat,
  .as-pill.as-zero .as-pill-stat {
    color: #93c5fd;
    opacity: 0.85;
  }
  .as-pill.as-zero.as-focus {
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: none !important;
    color: #93c5fd !important;
  }
  .as-pill.as-learning,
  .as-pill.as-needs-practice {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.12);
  }
  .as-pill.as-learning .as-pill-dot,
  .as-pill.as-needs-practice .as-pill-dot {
    background: #f59e0b;
    box-shadow: 0 0 5px #f59e0b;
  }
  .as-pill.as-learning .as-pill-bar-fill,
  .as-pill.as-needs-practice .as-pill-bar-fill {
    background: #fbbf24;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
  }
  .as-pill.as-advancing,
  .as-pill.as-improving {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.55);
    color: #67e8f9;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
  }
  .as-pill.as-advancing .as-pill-dot,
  .as-pill.as-improving .as-pill-dot {
    background: #06b6d4;
    box-shadow: 0 0 5px #06b6d4;
  }
  .as-pill.as-advancing .as-pill-bar-fill,
  .as-pill.as-improving .as-pill-bar-fill {
    background: #06b6d4;
    box-shadow: 0 0 4px rgba(6, 182, 212, 0.6);
  }
  .as-pill.as-mastered,
  .as-pill.as-strong {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.6);
    color: #34d399;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.22);
  }
  .as-pill.as-mastered .as-pill-dot,
  .as-pill.as-strong .as-pill-dot {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
  }
  .as-pill.as-mastered .as-pill-bar-fill,
  .as-pill.as-strong .as-pill-bar-fill {
    background: #10b981;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.85);
  }
  .as-pill.as-weak {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.7);
    color: #f87171;
  }
  .as-pill.as-weak .as-pill-dot {
    background: #ef4444;
  }
  .as-pill.as-weak .as-pill-bar-fill {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.7);
  }
  .as-pill.as-focus {
    border-color: var(--gold-bright) !important;
    box-shadow: 0 0 0 1.5px var(--gold-bright), 0 0 10px rgba(245, 158, 11, 0.35) !important;
    color: #fff;
    z-index: 2;
  }

  /* Weak-Key Focus HUD */
  .adaptive-focus-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 7px 14px;
    margin: 4px 0 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
  }
  .afh-focus-group, .afh-weak-group, .afh-finger-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .afh-label {
    color: var(--ink-dim);
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .afh-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.25;
  }
  .afh-focus-chip {
    background: rgba(255, 209, 102, 0.15);
    border: 1px solid rgba(255, 209, 102, 0.5);
    color: var(--gold-bright);
  }
  .afh-chips-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .afh-weak-chip {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
  }
  .afh-weak-chip.needs-practice {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fcd34d;
  }
  .afh-healthy-chip {
    color: #34d399;
    font-size: 0.72rem;
  }
  .afh-finger-note {
    color: #93c5fd;
    font-size: 0.72rem;
  }

  .adaptive-round-toast {
    margin: 6px auto 0;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #34d399;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    text-align: center;
    width: fit-content;
  }

  /* Tooltip */
  .as-pill .as-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #111425;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.66rem;
    white-space: nowrap;
    color: #e2e8f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 20;
  }
  .as-pill:hover .as-tooltip {
    display: block;
  }

  #adaptiveFocusWrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Adaptive Summary Modal */
  .adaptive-summary-card {
    position: relative;
    width: min(92vw, 440px);
    padding: 32px 26px 26px;
    border-radius: 20px;
    background:
      radial-gradient(ellipse 140% 90% at 50% -10%, rgba(255, 157, 46, 0.18), transparent 55%),
      linear-gradient(180deg, #13172e, #0a0c18);
    border: 1px solid rgba(255, 157, 46, 0.55);
    box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.8), 0 0 32px rgba(255, 157, 46, 0.22);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }
  .adaptive-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .adaptive-summary-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px;
  }
  .adaptive-unlocked-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #34d399;
  }
  .adaptive-modal-breakdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.76rem;
  }
  .amb-label {
    color: var(--ink-dim);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .amb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
  }
  .adaptive-modal-finger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.1);
    border: 1px solid rgba(255, 209, 102, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 14px;
  }
  .adaptive-before-after {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
  }
  .aba-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .aba-label {
    font-size: 0.68rem;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .aba-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
  }
  .aba-diff {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .aba-diff.positive { color: #34d399; }
  .aba-diff.neutral { color: var(--ink-dim); }
  .aba-diff.negative { color: #f87171; }
  .adaptive-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
  }
  .asg-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px 6px;
  }
  .asg-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-bright);
  }
  .asg-lbl {
    font-size: 0.65rem;
    color: var(--ink-dim);
    margin-top: 3px;
  }
  .adaptive-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .adaptive-next-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    color: #0b0d18;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 157, 46, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  .adaptive-next-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
  }
  .adaptive-summary-exit-btn {
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .adaptive-summary-exit-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
  }



/* ============================================================
   CYBER-GLASS LESSONS NAVIGATOR DOCK (NORMAL & FOCUS MODE)
   ============================================================ */

/* Custom sleek scrollbar without OS arrow buttons */
.lesson-strip::-webkit-scrollbar-button,
.lesson-strip-body::-webkit-scrollbar-button,
.guide-dock::-webkit-scrollbar-button,
.adaptive-letter-strip::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.lesson-strip-body::-webkit-scrollbar {
  width: 5px !important;
}
.lesson-strip-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 999px !important;
  margin: 6px 0 !important;
}
.lesson-strip-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold-bright) 60%, transparent) !important;
}

/* Upgraded Base Lesson Strip */
.lesson-strip {
  position: relative;
  border-radius: 16px !important;
  background: linear-gradient(165deg, rgba(16, 20, 38, 0.88) 0%, rgba(9, 12, 24, 0.94) 100%) !important;
  backdrop-filter: blur(16px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 28%, rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.75),
    0 0 28px color-mix(in srgb, var(--gold-bright) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
.lesson-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

/* Header & Actions Polish */
.lesson-strip-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 11px 14px !important;
}
.lsh-title {
  text-shadow: 0 0 14px color-mix(in srgb, var(--gold-bright) 40%, transparent);
}
.lsh-adaptive-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-bright) 20%, transparent), color-mix(in srgb, var(--gold) 10%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 48%, transparent) !important;
  color: var(--gold-bright) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--gold-bright) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.lsh-adaptive-btn:hover {
  background: var(--gold-bright) !important;
  color: #0b0f1d !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold-bright) 60%, transparent) !important;
  transform: translateY(-1px) scale(1.04) !important;
}
.lsh-badge {
  background: color-mix(in srgb, var(--gold-bright) 14%, rgba(0, 0, 0, 0.35)) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 45%, transparent) !important;
  color: var(--gold-bright) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Search Bar Polish */
.lesson-strip-search {
  background: rgba(0, 0, 0, 0.18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 12px !important;
}
.lss-input-wrap input {
  background: rgba(8, 11, 22, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}
.lss-input-wrap input::placeholder {
  color: rgba(203, 213, 225, 0.62) !important;
}
.lss-input-wrap input:focus {
  border-color: var(--gold-bright) !important;
  background: rgba(12, 16, 32, 0.85) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-bright) 28%, transparent), 0 0 16px color-mix(in srgb, var(--gold-bright) 22%, transparent) !important;
}
.lss-input-wrap .pk-icon {
  color: var(--gold-bright) !important;
  opacity: 0.85;
}

/* Adaptive Practice Hero Pod */
.adaptive-sidebar-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-bright) 18%, rgba(18, 24, 46, 0.85)) 0%, rgba(14, 19, 38, 0.9) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 52%, transparent) !important;
  border-radius: 11px !important;
  padding: 9px 12px !important;
  margin: 6px 4px 10px !important;
  box-shadow:
    0 8px 22px -6px rgba(0, 0, 0, 0.55),
    0 0 18px color-mix(in srgb, var(--gold-bright) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.adaptive-sidebar-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  border-color: var(--gold-bright) !important;
  box-shadow:
    0 12px 26px -6px rgba(0, 0, 0, 0.65),
    0 0 24px color-mix(in srgb, var(--gold-bright) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.asc-btn {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: #0b0f19 !important;
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gold-bright) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.asc-btn:hover {
  transform: translateY(-1px) scale(1.07) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--gold-bright) 70%, transparent) !important;
}

/* Level Accordion Headers */
.lesson-level-header {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-bright) 12%, rgba(255, 255, 255, 0.04)) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid var(--gold-bright) !important;
  border-radius: 9px !important;
  padding: 7px 10px !important;
  margin: 6px 0 5px !important;
  color: #f8fafc !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.lesson-level-header:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-bright) 22%, rgba(255, 255, 255, 0.08)) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: color-mix(in srgb, var(--gold-bright) 50%, transparent) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px color-mix(in srgb, var(--gold-bright) 20%, transparent) !important;
}
.lesson-level-header .llh-chevron {
  color: var(--gold-bright) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold-bright) 55%, transparent));
}

/* Lesson Cards & Mini Keycap Number Badges */
.lesson-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.lesson-card:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-bright) 14%, rgba(255, 255, 255, 0.08)) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: var(--gold-bright) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38), 0 0 14px color-mix(in srgb, var(--gold-bright) 22%, transparent) !important;
}
.lesson-card.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-bright) 24%, rgba(255, 255, 255, 0.1)) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 1px var(--gold-bright), 0 6px 20px color-mix(in srgb, var(--gold-bright) 28%, transparent) !important;
}
.lesson-card-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--gold-bright) 15%, rgba(0, 0, 0, 0.35)) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 42%, transparent) !important;
  color: var(--gold-bright) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--gold-bright) 45%, transparent) !important;
}
.lesson-card-title {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* High-Contrast Mastery Score Badge (Fixes invisible pale green text) */
.lesson-card-best,
.lesson-card-best.mastered {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
  color: #34d399 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
  text-shadow: none !important;
}

/* Focus Mode Compact Cyber Dock Overhaul */
html.focus-mode .lesson-strip,
html.focus-mode #lessonStrip {
  width: min(90vw, 258px) !important;
  max-height: min(465px, calc(100vh - 74px)) !important;
  border-radius: 15px !important;
  opacity: 0.96 !important;
  background: linear-gradient(165deg, rgba(14, 18, 34, 0.84) 0%, rgba(8, 11, 22, 0.92) 100%) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 42%, rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.8),
    0 0 32px color-mix(in srgb, var(--gold-bright) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1.35, 0.36, 1), opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
html.focus-mode.focus-mode-growing .lesson-strip,
html.focus-mode.focus-mode-growing #lessonStrip {
  animation: focus-dock-grow-in 0.58s cubic-bezier(0.22, 1.4, 0.36, 1) forwards !important;
}
@keyframes focus-dock-grow-in {
  0% { transform: scale(0.86) translateX(18px); opacity: 0.5; }
  60% { transform: scale(1.04) translateX(-2px); opacity: 1; }
  100% { transform: scale(1) translateX(0); opacity: 0.96; }
}
html.focus-mode .lesson-strip-header {
  padding: 8px 11px !important;
}
html.focus-mode .lsh-title {
  font-size: 0.7rem !important;
}
html.focus-mode .lsh-adaptive-btn,
html.focus-mode .lsh-badge {
  height: 22px !important;
  font-size: 0.6rem !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
}
html.focus-mode .lesson-strip-search {
  padding: 6px 10px !important;
}
html.focus-mode .lss-input-wrap input {
  padding: 5px 9px 5px 25px !important;
  font-size: 0.68rem !important;
  border-radius: 8px !important;
}
html.focus-mode .lesson-strip-body {
  padding: 6px 9px 10px !important;
}
html.focus-mode .adaptive-sidebar-card {
  padding: 6px 9px !important;
  margin: 2px 0 6px !important;
  border-radius: 9px !important;
}
html.focus-mode .asc-title {
  font-size: 0.66rem !important;
}
html.focus-mode .asc-btn {
  padding: 3px 9px !important;
  font-size: 0.6rem !important;
  border-radius: 6px !important;
}
html.focus-mode .lesson-level-header {
  font-size: 0.68rem !important;
  padding: 5px 8px !important;
  margin: 4px 0 3px !important;
  border-radius: 7px !important;
}
html.focus-mode .lesson-card {
  padding: 5px 8px !important;
  gap: 7px !important;
  border-radius: 8px !important;
}
html.focus-mode .lesson-card-num {
  font-size: 0.62rem !important;
  min-width: 22px !important;
  padding: 2px 5px !important;
}
html.focus-mode .lesson-card-title {
  font-size: 0.68rem !important;
}
html.focus-mode .lesson-card-best {
  font-size: 0.56rem !important;
  padding: 1px 6px !important;
}

/* ============================================================
   STUDIO THEMES APPLIED TO ALL PANELS, DOCKS & COMPLETE MODALS
   (Light, Sepia, Temple, Moonlight, Jungle, Sunset, Dark, Glass)
   ============================================================ */

/* ---------- 1. TEMPLE / MOONLIGHT / JUNGLE / SUNSET THEME PANELS & DOCKS ---------- */
html.theme-temple .guide-dock,
html.theme-moonlight .guide-dock,
html.theme-jungle .guide-dock,
html.theme-sunset .guide-dock,
html.theme-temple #guideDock,
html.theme-moonlight #guideDock,
html.theme-jungle #guideDock,
html.theme-sunset #guideDock,
html.theme-temple .lesson-strip,
html.theme-moonlight .lesson-strip,
html.theme-jungle .lesson-strip,
html.theme-sunset .lesson-strip,
html.theme-temple.focus-mode .lesson-strip,
html.theme-moonlight.focus-mode .lesson-strip,
html.theme-jungle.focus-mode .lesson-strip,
html.theme-sunset.focus-mode .lesson-strip,
html.theme-temple .lesson-panel,
html.theme-moonlight .lesson-panel,
html.theme-jungle .lesson-panel,
html.theme-sunset .lesson-panel,
html.theme-temple .adaptive-panel,
html.theme-moonlight .adaptive-panel,
html.theme-jungle .adaptive-panel,
html.theme-sunset .adaptive-panel {
  background: linear-gradient(180deg, var(--stone-2) 0%, var(--stone-1) 100%) !important;
  border-color: color-mix(in srgb, var(--gold-bright) 38%, var(--stone-3)) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--gold-bright) 18%, transparent) !important;
  color: var(--ink) !important;
}

html.theme-temple .guide-dock-header,
html.theme-moonlight .guide-dock-header,
html.theme-jungle .guide-dock-header,
html.theme-sunset .guide-dock-header,
html.theme-temple .lesson-strip-header,
html.theme-moonlight .lesson-strip-header,
html.theme-jungle .lesson-strip-header,
html.theme-sunset .lesson-strip-header,
html.theme-temple .lesson-strip-search,
html.theme-moonlight .lesson-strip-search,
html.theme-jungle .lesson-strip-search,
html.theme-sunset .lesson-strip-search {
  background: var(--stone-2) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-bright) 22%, var(--stone-3)) !important;
  color: var(--ink) !important;
}

html.theme-temple .guide-section,
html.theme-moonlight .guide-section,
html.theme-jungle .guide-section,
html.theme-sunset .guide-section {
  background: color-mix(in srgb, var(--stone-3) 52%, var(--stone-1)) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 22%, var(--stone-3)) !important;
  color: var(--ink) !important;
}

html.theme-temple .guide-hand-block,
html.theme-moonlight .guide-hand-block,
html.theme-jungle .guide-hand-block,
html.theme-sunset .guide-hand-block,
html.theme-temple .guide-stat-box,
html.theme-moonlight .guide-stat-box,
html.theme-jungle .guide-stat-box,
html.theme-sunset .guide-stat-box {
  background: color-mix(in srgb, var(--stone-1) 82%, #000000) !important;
  border: 1px solid var(--stone-3) !important;
  color: var(--ink) !important;
}

html.theme-temple .guide-mini-key,
html.theme-moonlight .guide-mini-key,
html.theme-jungle .guide-mini-key,
html.theme-sunset .guide-mini-key {
  background: linear-gradient(180deg, var(--stone-3) 0%, var(--stone-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 28%, var(--stone-3)) !important;
  border-bottom: 2px solid var(--stone-edge) !important;
  color: var(--ink) !important;
}

html.theme-temple .guide-mini-key .km-ch,
html.theme-moonlight .guide-mini-key .km-ch,
html.theme-jungle .guide-mini-key .km-ch,
html.theme-sunset .guide-mini-key .km-ch,
html.theme-temple .guide-sample,
html.theme-moonlight .guide-sample,
html.theme-jungle .guide-sample,
html.theme-sunset .guide-sample {
  color: var(--ink) !important;
}

html.theme-temple .guide-mini-key .en-ch,
html.theme-moonlight .guide-mini-key .en-ch,
html.theme-jungle .guide-mini-key .en-ch,
html.theme-sunset .guide-mini-key .en-ch,
html.theme-temple .gdh-title,
html.theme-moonlight .gdh-title,
html.theme-jungle .gdh-title,
html.theme-sunset .gdh-title,
html.theme-temple .guide-sec-head,
html.theme-moonlight .guide-sec-head,
html.theme-jungle .guide-sec-head,
html.theme-sunset .guide-sec-head,
html.theme-temple .guide-stat-num,
html.theme-moonlight .guide-stat-num,
html.theme-jungle .guide-stat-num,
html.theme-sunset .guide-stat-num {
  color: var(--gold-bright) !important;
}

html.theme-temple .gdh-badge,
html.theme-moonlight .gdh-badge,
html.theme-jungle .gdh-badge,
html.theme-sunset .gdh-badge,
html.theme-temple .guide-kbd,
html.theme-moonlight .guide-kbd,
html.theme-jungle .guide-kbd,
html.theme-sunset .guide-kbd {
  background: color-mix(in srgb, var(--gold-bright) 16%, var(--stone-2)) !important;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 42%, var(--stone-3)) !important;
  color: var(--gold-bright) !important;
}

html.theme-temple .guide-rule-row,
html.theme-moonlight .guide-rule-row,
html.theme-jungle .guide-rule-row,
html.theme-sunset .guide-rule-row {
  border-bottom-color: color-mix(in srgb, var(--stone-3) 75%, transparent) !important;
}

html.theme-temple .lesson-complete-card,
html.theme-moonlight .lesson-complete-card,
html.theme-jungle .lesson-complete-card,
html.theme-sunset .lesson-complete-card,
html.theme-temple .lesson-complete-card::after,
html.theme-moonlight .lesson-complete-card::after,
html.theme-jungle .lesson-complete-card::after,
html.theme-sunset .lesson-complete-card::after,
html.theme-temple .adaptive-summary-card,
html.theme-moonlight .adaptive-summary-card,
html.theme-jungle .adaptive-summary-card,
html.theme-sunset .adaptive-summary-card {
  background:
    radial-gradient(ellipse 140% 90% at 50% -10%, color-mix(in srgb, var(--gold-bright) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--stone-2), var(--stone-1)) !important;
  color: var(--ink) !important;
}

/* ---------- 2. LIGHT THEME (html.theme-light) — ALL DOCKS, PANELS & MODALS ---------- */
html.theme-light .guide-dock,
html.theme-light #guideDock,
html.theme-light .lesson-strip,
html.theme-light.focus-mode .lesson-strip {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
html.theme-light .guide-dock-header,
html.theme-light .lesson-strip-header,
html.theme-light .lesson-strip-search {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .gdh-title,
html.theme-light .guide-sec-head {
  color: #0f172a !important;
}
html.theme-light .gdh-badge {
  background: #e0f2fe !important;
  border: 1px solid #7dd3fc !important;
  color: #0369a1 !important;
}
html.theme-light .guide-section {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.theme-light .guide-hand-block,
html.theme-light .guide-stat-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .guide-hand-label,
html.theme-light .guide-stat-lbl {
  color: #475569 !important;
}
html.theme-light .guide-mini-key {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .guide-mini-key .km-ch,
html.theme-light .guide-sample {
  color: #0f172a !important;
}
html.theme-light .guide-mini-key .en-ch {
  color: #2563eb !important;
  opacity: 1 !important;
}
html.theme-light .guide-rule-item {
  background: transparent !important;
  border: none !important;
  color: #334155 !important;
}
html.theme-light .guide-rule-row {
  border-bottom: 1px solid #e2e8f0 !important;
}
html.theme-light .guide-kbd {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .guide-stat-num {
  color: #b45309 !important;
}
html.theme-light .guide-active-card,
html.theme-light .guide-target-callout {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.theme-light .gtc-key-badge {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  border-bottom: 2px solid #64748b !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
html.theme-light .gtc-finger-name {
  color: #0284c7 !important;
}
html.theme-light .gtc-finger-hint,
html.theme-light .gtc-label {
  color: #475569 !important;
}
html.theme-light .guide-drill-weak-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .guide-drill-weak-btn:hover {
  background: #e2e8f0 !important;
}
html.theme-light .gas-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.theme-light .gas-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
html.theme-light .gas-title {
  color: #0f172a !important;
}
html.theme-light .gas-sub {
  color: #475569 !important;
}
html.theme-light .gac-action-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .gac-badge {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
html.theme-light .lss-input-wrap input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
html.theme-light .lss-input-wrap input::placeholder {
  color: #64748b !important;
}
html.theme-light .adaptive-sidebar-card {
  background: linear-gradient(135deg, #fffbeb 0%, #f8fafc 100%) !important;
  border: 1px solid #fcd34d !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .asc-sub {
  color: #475569 !important;
}
html.theme-light .lesson-level-header {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid var(--gold-bright) !important;
  color: #0f172a !important;
}
html.theme-light .lesson-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.theme-light .lesson-card-title {
  color: #0f172a !important;
}
html.theme-light .lesson-card-num {
  background: color-mix(in srgb, var(--gold-bright) 14%, #f1f5f9) !important;
  color: var(--gold-bright) !important;
}
html.theme-light .lesson-card-best,
html.theme-light .lesson-card-best.mastered {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}

/* Light Theme: Lesson Panel & Adaptive Practice Panel */
html.theme-light .lesson-panel,
html.theme-light .adaptive-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}
html.theme-light .lesson-top {
  border-bottom-color: #e2e8f0 !important;
}
html.theme-light .lesson-top b,
html.theme-light .lesson-deck-title {
  color: #0f172a !important;
  text-shadow: none !important;
}
html.theme-light .lesson-counter-capsule {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .lesson-counter-capsule b {
  color: #6d28d9 !important;
  text-shadow: none !important;
}
html.theme-light .lesson-quick-btn {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.theme-light .lesson-quick-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html.theme-light .lesson-meta-badge {
  background: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
}
html.theme-light .lesson-newkeys,
html.theme-light .lesson-examples-banner {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html.theme-light .lesson-newkey-chip {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light .lesson-newkey-chip .nk-char {
  text-shadow: none !important;
}
html.theme-light .lesson-progress-bar {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}
html.theme-light .lesson-stats {
  border-top-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.theme-light .stat-pod {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light .stat-pod-title {
  color: #475569 !important;
}
html.theme-light .stat-pod-num {
  color: #0f172a !important;
  text-shadow: none !important;
}
html.theme-light .stat-pod-acc b.grade-emerald { color: #059669 !important; text-shadow: none !important; }
html.theme-light .stat-pod-acc b.grade-gold { color: #d97706 !important; text-shadow: none !important; }
html.theme-light .stat-pod-acc b.grade-rose { color: #e11d48 !important; text-shadow: none !important; }
html.theme-light .stat-pod-wpm .stat-pod-num { color: #0284c7 !important; text-shadow: none !important; }
html.theme-light .stat-pod-streak .stat-pod-num { color: #7c3aed !important; text-shadow: none !important; }
html.theme-light .stat-pod-err .stat-pod-num { color: #e11d48 !important; text-shadow: none !important; }
html.theme-light .lesson-exit-tactical-btn,
html.theme-light #lessonExitBtn {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
  color: #be123c !important;
}
html.theme-light .lesson-char-row {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}
html.theme-light .lc-char {
  color: #0f172a !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-bottom: 4px solid #94a3b8 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06) !important;
  text-shadow: none !important;
}
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lp"],
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rp"] {
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: #fda4af !important;
  border-bottom: 4px solid #f43f5e !important;
}
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lr"],
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rr"] {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fcd34d !important;
  border-bottom: 4px solid #f59e0b !important;
}
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lm"],
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rm"] {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #6ee7b7 !important;
  border-bottom: 4px solid #10b981 !important;
}
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="li"] {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #93c5fd !important;
  border-bottom: 4px solid #2563eb !important;
}
html.theme-light .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="ri"] {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border-color: #c4b5fd !important;
  border-bottom: 4px solid #7c3aed !important;
}
html.theme-light .lc-space {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1.5px dashed #94a3b8 !important;
  border-bottom: 4px solid #94a3b8 !important;
}
html.theme-light .lc-char.done {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border: 1.5px solid #6ee7b7 !important;
  border-bottom: 4px solid #10b981 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.theme-light .lc-char.current {
  color: #ffffff !important;
  background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 2px solid #4c1d95 !important;
  border-bottom: 4px solid #2e1065 !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.35), 0 0 0 3px rgba(124, 58, 237, 0.22) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.theme-light .adaptive-letter-strip,
html.theme-light .adaptive-focus-hud {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.theme-light .adaptive-reset-btn,
html.theme-light .adaptive-exit-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.theme-light .as-pill {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.theme-light .as-pill.as-locked {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}
html.theme-light .as-pill.as-active,
html.theme-light .as-pill.as-zero {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}
html.theme-light .as-pill.as-active .as-pill-char,
html.theme-light .as-pill.as-zero .as-pill-char,
html.theme-light .as-pill.as-active .as-pill-stat,
html.theme-light .as-pill.as-zero .as-pill-stat {
  color: #1d4ed8 !important;
}
html.theme-light .as-pill.as-mastered,
html.theme-light .as-pill.as-strong {
  background: #ecfdf5 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
}
html.theme-light .as-pill.as-learning,
html.theme-light .as-pill.as-needs-practice {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

/* Light Theme: Lesson Complete & Adaptive Summary Cards */
html.theme-light .lesson-complete-card,
html.theme-light .adaptive-summary-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
}
html.theme-light .lesson-complete-card::after {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
html.theme-light .lesson-complete-card h2,
html.theme-light .adaptive-summary-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
html.theme-light .pk-fb-stat-box,
html.theme-light .pk-fb-insight-col,
html.theme-light .pk-fb-section-breakdown,
html.theme-light .pk-fb-pause-details,
html.theme-light .adaptive-modal-breakdown,
html.theme-light .adaptive-before-after,
html.theme-light .asg-box {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .pk-fb-rec-banner {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #0f172a !important;
}
html.theme-light .pk-fb-pause-row b,
html.theme-light .aba-val {
  color: #0f172a !important;
}
html.theme-light .lc-ring::before {
  background: #ffffff !important;
}

/* ---------- 3. SEPIA THEME (html.theme-sepia) — ALL DOCKS, PANELS & MODALS ---------- */
html.theme-sepia .guide-dock,
html.theme-sepia #guideDock,
html.theme-sepia .lesson-strip,
html.theme-sepia.focus-mode .lesson-strip {
  background: linear-gradient(180deg, #faf5ec 0%, #f0e6d2 100%) !important;
  border: 1.5px solid #bfa886 !important;
  box-shadow: 0 16px 40px rgba(44, 27, 12, 0.16) !important;
  color: #2c1b0c !important;
}
html.theme-sepia .guide-dock-header,
html.theme-sepia .lesson-strip-header,
html.theme-sepia .lesson-strip-search {
  background: #efe3cc !important;
  border-bottom: 1px solid #d4c3a3 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .gdh-title,
html.theme-sepia .guide-sec-head {
  color: #7c2d12 !important;
}
html.theme-sepia .gdh-badge {
  background: #e6d7bf !important;
  border: 1px solid #bfa886 !important;
  color: #5c4125 !important;
}
html.theme-sepia .guide-section {
  background: #f6ede0 !important;
  border: 1px solid #ddcca8 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .guide-hand-block,
html.theme-sepia .guide-stat-box {
  background: #efe3cc !important;
  border: 1px solid #d4c3a3 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .guide-hand-label,
html.theme-sepia .guide-stat-lbl {
  color: #6b4f2c !important;
}
html.theme-sepia .guide-mini-key {
  background: linear-gradient(180deg, #faf5ec 0%, #f0e6d2 100%) !important;
  border: 1px solid #bfa886 !important;
  border-bottom: 2px solid #9c8462 !important;
  color: #2c1b0c !important;
  box-shadow: 0 1px 2px rgba(44, 27, 12, 0.08) !important;
}
html.theme-sepia .guide-mini-key .km-ch,
html.theme-sepia .guide-sample {
  color: #2c1b0c !important;
}
html.theme-sepia .guide-mini-key .en-ch {
  color: #92400e !important;
  opacity: 1 !important;
}
html.theme-sepia .guide-rule-item {
  background: transparent !important;
  border: none !important;
  color: #4a3421 !important;
}
html.theme-sepia .guide-rule-row {
  border-bottom: 1px solid #ddcca8 !important;
}
html.theme-sepia .guide-kbd {
  background: #e6d7bf !important;
  border: 1px solid #bfa886 !important;
  color: #7c2d12 !important;
}
html.theme-sepia .guide-stat-num {
  color: #92400e !important;
}
html.theme-sepia .lss-input-wrap input {
  background: #faf4e8 !important;
  border: 1px solid #ccbc9e !important;
  color: #2c1b0c !important;
  box-shadow: none !important;
}
html.theme-sepia .lss-input-wrap input::placeholder {
  color: #8c6b45 !important;
}
html.theme-sepia .adaptive-sidebar-card {
  background: linear-gradient(135deg, #f5e6c8 0%, #f4e9d5 100%) !important;
  border: 1px solid #d4a373 !important;
  color: #2c1b0c !important;
  box-shadow: 0 4px 12px rgba(44, 27, 12, 0.08) !important;
}
html.theme-sepia .asc-sub {
  color: #6b4f2c !important;
}
html.theme-sepia .lesson-level-header {
  background: #ede0c8 !important;
  border: 1px solid #ddcca8 !important;
  border-left: 3px solid var(--gold-bright) !important;
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-card {
  background: #faf4e8 !important;
  border: 1px solid #ddcca8 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-card-title {
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-card-num {
  background: color-mix(in srgb, var(--gold-bright) 15%, #f4e9d5) !important;
  color: var(--gold-bright) !important;
}
html.theme-sepia .lesson-card-best,
html.theme-sepia .lesson-card-best.mastered {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
  color: #15803d !important;
}

/* Sepia Theme: Lesson Panel & Adaptive Practice Panel */
html.theme-sepia .lesson-panel,
html.theme-sepia .adaptive-panel {
  background: rgba(250, 244, 232, 0.96) !important;
  border: 1px solid #ccbc9e !important;
  box-shadow: 0 16px 40px rgba(44, 27, 12, 0.14) !important;
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-top {
  border-bottom-color: #ddcca8 !important;
}
html.theme-sepia .lesson-top b,
html.theme-sepia .lesson-deck-title {
  color: #2c1b0c !important;
  text-shadow: none !important;
}
html.theme-sepia .lesson-counter-capsule {
  background: #efe3cc !important;
  border-color: #ccbc9e !important;
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-counter-capsule b {
  color: #6d28d9 !important;
  text-shadow: none !important;
}
html.theme-sepia .lesson-quick-btn {
  background: #f4e9d5 !important;
  border-color: #ccbc9e !important;
  color: #4a3421 !important;
}
html.theme-sepia .lesson-meta-badge {
  background: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
}
html.theme-sepia .lesson-newkeys,
html.theme-sepia .lesson-examples-banner {
  background: #f4e9d5 !important;
  border-color: #ccbc9e !important;
}
html.theme-sepia .lesson-newkey-chip {
  background: #faf4e8 !important;
  border-color: #ccbc9e !important;
}
html.theme-sepia .lesson-newkey-chip .nk-char {
  text-shadow: none !important;
}
html.theme-sepia .lesson-progress-bar {
  background: #e7dac1 !important;
  border-color: #ccbc9e !important;
}
html.theme-sepia .lesson-stats {
  border-top-color: #ddcca8 !important;
  color: #6b4f2c !important;
}
html.theme-sepia .stat-pod {
  background: #efe3cc !important;
  border: 1px solid #ccbc9e !important;
  box-shadow: 0 1px 2px rgba(44, 27, 12, 0.05) !important;
}
html.theme-sepia .stat-pod-title {
  color: #6b4f2c !important;
}
html.theme-sepia .stat-pod-num {
  color: #2c1b0c !important;
  text-shadow: none !important;
}
html.theme-sepia .stat-pod-acc b.grade-emerald { color: #15803d !important; text-shadow: none !important; }
html.theme-sepia .stat-pod-acc b.grade-gold { color: #b45309 !important; text-shadow: none !important; }
html.theme-sepia .stat-pod-acc b.grade-rose { color: #be123c !important; text-shadow: none !important; }
html.theme-sepia .stat-pod-wpm .stat-pod-num { color: #0369a1 !important; text-shadow: none !important; }
html.theme-sepia .stat-pod-streak .stat-pod-num { color: #6d28d9 !important; text-shadow: none !important; }
html.theme-sepia .stat-pod-err .stat-pod-num { color: #be123c !important; text-shadow: none !important; }
html.theme-sepia .lesson-exit-tactical-btn,
html.theme-sepia #lessonExitBtn {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}
html.theme-sepia .lesson-char-row {
  background: #f4ebd9 !important;
  border: 1.5px solid #ccbc9e !important;
  box-shadow: inset 0 2px 6px rgba(44, 27, 12, 0.06) !important;
}
html.theme-sepia .lc-char {
  color: #2c1b0c !important;
  background: linear-gradient(180deg, #faf5ec 0%, #f0e6d2 100%) !important;
  border: 1.5px solid #d4c3a3 !important;
  border-bottom: 4px solid #aa9674 !important;
  box-shadow: 0 2px 4px rgba(44, 27, 12, 0.06) !important;
  text-shadow: none !important;
}
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lp"],
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rp"] {
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: #fda4af !important;
  border-bottom: 4px solid #f43f5e !important;
}
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lr"],
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rr"] {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fcd34d !important;
  border-bottom: 4px solid #f59e0b !important;
}
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="lm"],
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="rm"] {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #6ee7b7 !important;
  border-bottom: 4px solid #10b981 !important;
}
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="li"] {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #93c5fd !important;
  border-bottom: 4px solid #2563eb !important;
}
html.theme-sepia .lc-char:not(.done):not(.current):not(.lc-space)[data-finger="ri"] {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border-color: #c4b5fd !important;
  border-bottom: 4px solid #7c3aed !important;
}
html.theme-sepia .lc-space {
  color: #7c5e3f !important;
  background: #f4ebd9 !important;
  border: 1.5px dashed #bfa886 !important;
  border-bottom: 4px solid #aa9674 !important;
}
html.theme-sepia .lc-char.done {
  color: #15803d !important;
  background: #dcfce7 !important;
  border: 1.5px solid #4ade80 !important;
  border-bottom: 4px solid #16a34a !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.theme-sepia .lc-char.current {
  color: #ffffff !important;
  background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 2px solid #4c1d95 !important;
  border-bottom: 4px solid #2e1065 !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.35), 0 0 0 3px rgba(124, 58, 237, 0.22) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.theme-sepia .adaptive-letter-strip,
html.theme-sepia .adaptive-focus-hud {
  background: #f4e9d5 !important;
  border: 1px solid #d4c3a3 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .adaptive-reset-btn,
html.theme-sepia .adaptive-exit-btn {
  background: #faf5ec !important;
  border: 1px solid #ccbc9e !important;
  color: #4a3421 !important;
}
html.theme-sepia .adaptive-stage-badge {
  background: #ede0c8 !important;
  border-color: #ccbc9e !important;
  color: #5c4125 !important;
}
html.theme-sepia .as-pill {
  background: #faf5ec !important;
  border: 1px solid #ccbc9e !important;
  color: #4a3421 !important;
}
html.theme-sepia .as-pill.as-locked {
  background: #ede3d1 !important;
  border-color: #ddcca8 !important;
  color: #8c6b45 !important;
}
html.theme-sepia .as-pill.as-active,
html.theme-sepia .as-pill.as-zero {
  background: #fef3c7 !important;
  border-color: #d97706 !important;
  color: #92400e !important;
}
html.theme-sepia .as-pill.as-active .as-pill-char,
html.theme-sepia .as-pill.as-zero .as-pill-char,
html.theme-sepia .as-pill.as-active .as-pill-stat,
html.theme-sepia .as-pill.as-zero .as-pill-stat {
  color: #92400e !important;
}
html.theme-sepia .as-pill.as-mastered,
html.theme-sepia .as-pill.as-strong {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}
html.theme-sepia .as-pill.as-learning,
html.theme-sepia .as-pill.as-needs-practice {
  background: #ffedd5 !important;
  border-color: #ea580c !important;
  color: #9a3412 !important;
}
html.theme-sepia .afh-finger-note {
  color: #92400e !important;
}
html.theme-sepia .afh-healthy-chip {
  color: #15803d !important;
}

/* Sepia Theme: Lesson Complete & Adaptive Summary Cards */
html.theme-sepia .lesson-complete-card,
html.theme-sepia .adaptive-summary-card {
  background: linear-gradient(180deg, #faf5ec 0%, #f0e6d2 100%) !important;
  border: 1.5px solid #ccbc9e !important;
  box-shadow: 0 25px 60px rgba(44, 27, 12, 0.25) !important;
  color: #2c1b0c !important;
}
html.theme-sepia .lesson-complete-card::after {
  background: linear-gradient(180deg, #faf5ec 0%, #f0e6d2 100%) !important;
}
html.theme-sepia .lesson-complete-card h2,
html.theme-sepia .adaptive-summary-title {
  color: #2c1b0c !important;
  -webkit-text-fill-color: #2c1b0c !important;
  background: none !important;
}
html.theme-sepia .pk-fb-stat-box,
html.theme-sepia .pk-fb-insight-col,
html.theme-sepia .pk-fb-section-breakdown,
html.theme-sepia .pk-fb-pause-details,
html.theme-sepia .adaptive-modal-breakdown,
html.theme-sepia .adaptive-before-after,
html.theme-sepia .asg-box {
  background: #f4e9d5 !important;
  border: 1px solid #d4c3a3 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .pk-fb-rec-banner {
  background: #fef3c7 !important;
  border-color: #d97706 !important;
  color: #2c1b0c !important;
}
html.theme-sepia .pk-fb-pause-row b,
html.theme-sepia .aba-val {
  color: #2c1b0c !important;
}
html.theme-sepia .lc-ring::before {
  background: #faf5ec !important;
}

/* ---------- 4. TRANSPARENT GLASS THEME (html.theme-glass ONLY) ---------- */
html.theme-glass .lesson-strip,
html.theme-glass #lessonStrip,
html.theme-glass.focus-mode .lesson-strip,
html.theme-glass.focus-mode #lessonStrip,
html.theme-glass .guide-dock,
html.theme-glass #guideDock,
html.theme-glass .lesson-panel,
html.theme-glass .adaptive-panel,
html.theme-glass .lesson-complete-card,
html.theme-glass .pk-fb-complete-card,
html.theme-glass .pk-fb-paused-card,
html.theme-glass .adaptive-summary-card {
  background: rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38) !important;
  color: #ffffff !important;
}

html.theme-glass .lesson-complete-card::before,
html.theme-glass .lesson-complete-card::after {
  display: none !important;
  background: transparent !important;
}

html.theme-glass .lesson-strip-header,
html.theme-glass .lesson-strip-search,
html.theme-glass .guide-dock-header {
  background: rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

html.theme-glass .lss-input-wrap input,
html.theme-glass .lsh-adaptive-btn,
html.theme-glass .lsh-badge,
html.theme-glass .lsh-expand-btn,
html.theme-glass .adaptive-sidebar-card,
html.theme-glass .lesson-level-header,
html.theme-glass .lesson-card,
html.theme-glass .lesson-card-num,
html.theme-glass .gdh-badge,
html.theme-glass .guide-section,
html.theme-glass .guide-hand-block,
html.theme-glass .guide-stat-box,
html.theme-glass .guide-mini-key,
html.theme-glass .guide-kbd,
html.theme-glass .lesson-newkeys,
html.theme-glass .lesson-newkey-chip,
html.theme-glass .lesson-examples-banner,
html.theme-glass .leb-chip,
html.theme-glass .lesson-live-hint,
html.theme-glass .lesson-char-row,
html.theme-glass .lc-char,
html.theme-glass .lc-space,
html.theme-glass .adaptive-letter-strip,
html.theme-glass .adaptive-focus-hud,
html.theme-glass .adaptive-reset-btn,
html.theme-glass .adaptive-exit-btn,
html.theme-glass .as-pill,
html.theme-glass .pk-fb-stat-box,
html.theme-glass .pk-fb-insight-col,
html.theme-glass .pk-fb-section-breakdown,
html.theme-glass .pk-fb-pause-details,
html.theme-glass .pk-fb-rec-banner,
html.theme-glass .lc-mistakes-preview,
html.theme-glass .lc-mistake-chip,
html.theme-glass .adaptive-modal-breakdown,
html.theme-glass .adaptive-before-after,
html.theme-glass .asg-box,
html.theme-glass .lesson-complete-actions button:not(.primary) {
  background: rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html.theme-glass .guide-rule-item {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

html.theme-glass .guide-rule-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
}

html.theme-glass .guide-sec-head,
html.theme-glass .gdh-title,
html.theme-glass .guide-stat-num,
html.theme-glass .guide-rule-row,
html.theme-glass .guide-sample,
html.theme-glass .guide-mini-key .km-ch,
html.theme-glass .lesson-card-title {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

html.theme-glass .guide-mini-key .en-ch {
  color: var(--gold-bright) !important;
  opacity: 1 !important;
}

html.theme-glass .lesson-level-header {
  border-left: 3px solid var(--gold-bright) !important;
}

html.theme-glass .lesson-card:hover,
html.theme-glass .lesson-card.active {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold-bright) 35%, transparent) !important;
}

html.theme-glass .lc-char.done {
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.65) !important;
}

html.theme-glass .lc-char.current {
  color: #ffffff !important;
  border: 2px solid var(--gold-bright) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold-bright) 50%, transparent) !important;
}

html.theme-glass .lesson-complete-overlay {
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(3px) !important;
}

/* Minimal Mode Lesson Overrides: Snappy lesson switching, zero lag */
html.anim-mode-minimal .streak-flame,
html.anim-mode-minimal .gls-pulse,
html.anim-mode-minimal .progress-sheen-sweep,
html.anim-mode-minimal .lc-char-target-breathe,
html.anim-mode-minimal .lc-cursor-beam,
html.anim-mode-minimal .lc-card-glow,
html.anim-mode-minimal .lc-sheen-spin,
html.anim-mode-minimal .lc-halo-spin,
html.anim-mode-minimal .lc-title-shimmer,
html.anim-mode-minimal .mistakes-btn-pulse,
html.anim-mode-minimal .fb-bar-shimmer,
html.anim-mode-minimal .lesson-strip-spring-in,
html.anim-mode-minimal .focus-dock-grow-in {
  animation: none !important;
}

html.anim-mode-minimal .lesson-card:hover {
  transform: none !important;
}

/* ==========================================================================
   222 MASTER LESSONS & ALPHABET COVERAGE HUB (LEARN MORE)
   ========================================================================== */

/* Sidebar Hub Banner */
.lesson-strip-hub-banner-wrap {
  margin: 6px 10px 8px;
  flex: 0 0 auto;
}

.lsh-hub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(20, 26, 44, 0.95) 0%, rgba(13, 18, 32, 0.98) 100%);
  border: 1px solid rgba(255, 209, 102, 0.32);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 209, 102, 0.15);
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  position: relative;
  overflow: hidden;
}

.lsh-hub-banner:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 209, 102, 0.65);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 209, 102, 0.22);
  background: linear-gradient(135deg, rgba(28, 36, 60, 0.98) 0%, rgba(16, 22, 40, 1) 100%);
}

.lsh-hub-banner:active {
  transform: translateY(0);
}

.lsh-hb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lsh-hb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.14);
  border: 1px solid rgba(255, 209, 102, 0.38);
  color: #ffd166;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.18);
}

.lsh-hb-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.lsh-hb-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffd166;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.lsh-hb-sub {
  font-size: 0.64rem;
  color: var(--ink-dim, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.lsh-hb-arrow {
  color: #ffd166;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  margin-left: 4px;
}

.lsh-hub-banner:hover .lsh-hb-arrow {
  transform: translateX(2px);
}

/* Top Actions Nav Button */
.top-action-btn.learn-more-nav-btn {
  border-color: rgba(255, 209, 102, 0.35);
  background: rgba(255, 209, 102, 0.07);
  color: #ffd166;
}

.top-action-btn.learn-more-nav-btn:hover {
  border-color: rgba(255, 209, 102, 0.7);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.25);
  background: rgba(255, 209, 102, 0.16);
  color: #fff;
}

/* Modal Backdrop & Card */
.lm-hub-backdrop {
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm-hub-modal-card {
  width: min(95vw, 1020px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, rgba(16, 21, 38, 0.98) 0%, rgba(9, 13, 24, 0.99) 100%);
  border: 1px solid rgba(255, 209, 102, 0.32);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 209, 102, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--ink, #f8fafc);
  overflow-y: auto;
  box-sizing: border-box;
}

.lm-hub-modal-top {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 209, 102, 0.16);
  position: relative;
  flex-shrink: 0;
}

.lm-hub-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.2) 0%, rgba(56, 189, 248, 0.15) 100%);
  border: 1px solid rgba(255, 209, 102, 0.45);
  color: #ffd166;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.22);
  flex-shrink: 0;
}

.lm-hub-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.lm-hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffd166;
  text-transform: uppercase;
  background: rgba(255, 209, 102, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 209, 102, 0.25);
}

.lm-hub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 8px #ffd166;
}

.lm-hub-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.28);
}

/* Quick Stats Bar */
.lm-hub-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 16px;
  flex-shrink: 0;
}

.lm-hub-stat {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.lm-hub-stat:hover {
  border-color: rgba(255, 209, 102, 0.3);
  transform: translateY(-1px);
}

.lm-hub-stat.highlight {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.08) 0%, rgba(56, 189, 248, 0.05) 100%);
  border-color: rgba(255, 209, 102, 0.35);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.08);
}

.lm-stat-val {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffd166;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lm-hub-stat.highlight .lm-stat-val {
  color: #38bdf8;
}

.lm-stat-lbl {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink, #f8fafc);
  margin-top: 2px;
}

.lm-stat-sub {
  font-size: 0.65rem;
  color: var(--ink-dim, #94a3b8);
  margin-top: 1px;
}

/* Hub Navigation Tabs */
.lm-hub-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
  flex-shrink: 0;
}

.lm-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-dim, #94a3b8);
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.lm-tab-btn:hover {
  color: var(--ink, #fff);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 209, 102, 0.3);
}

.lm-tab-btn.active {
  background: rgba(255, 209, 102, 0.14);
  border-color: rgba(255, 209, 102, 0.45);
  color: #ffd166;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.15);
}

/* Panel Body */
.lm-hub-panel {
  display: none;
  animation: lmFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.lm-hub-panel.active {
  display: block;
}

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

/* TAB 1: Alphabet Matrix */
.lm-alpha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.lm-alpha-layout-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lm-alpha-select-label {
  font-size: 0.72rem;
  color: var(--ink-dim, #94a3b8);
  font-weight: 600;
}

.lm-alpha-pill-btn {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink-dim, #94a3b8);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lm-alpha-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, #fff);
}

.lm-alpha-pill-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-weight: 600;
}

.lm-alpha-quick-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--ink-dim, #94a3b8);
}

/* Character Inspector */
.lm-alpha-inspector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(20, 28, 50, 0.95) 0%, rgba(13, 20, 38, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.12);
}

.lm-ai-glyph {
  font-family: 'Khmer Busra', 'Khmer OS Battambang', 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1;
  min-width: 48px;
  text-align: center;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.lm-ai-info {
  flex: 1;
  min-width: 0;
}

.lm-ai-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.lm-ai-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink, #fff);
}

.lm-ai-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 209, 102, 0.25);
}

.lm-ai-badge {
  font-size: 0.68rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.lm-ai-lesson-line {
  font-size: 0.74rem;
  color: var(--ink-dim, #94a3b8);
}

.lm-ai-lesson-line strong {
  color: #38bdf8;
}

.lm-ai-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #fff;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  flex-shrink: 0;
}

.lm-ai-launch-btn:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}

/* Category Sections & Letter Grids */
.lm-alpha-section {
  margin-bottom: 16px;
}

.lm-alpha-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.lm-alpha-sec-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lm-alpha-sec-badge {
  font-size: 0.66rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.lm-char-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lm-char-tile {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--ink, #fff);
  font-family: 'Khmer Busra', 'Khmer OS Battambang', 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.lm-char-tile:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.lm-char-tile.active {
  background: rgba(255, 209, 102, 0.2);
  border-color: rgba(255, 209, 102, 0.7);
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
  color: #ffd166;
}

.lm-char-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #38bdf8;
}

/* TAB 2: Browse 222 Lessons */
.lm-browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.lm-browse-track-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lm-track-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink-dim, #94a3b8);
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lm-track-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, #fff);
}

.lm-track-pill.active {
  background: rgba(255, 209, 102, 0.15);
  border-color: rgba(255, 209, 102, 0.45);
  color: #ffd166;
}

.lm-tp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lm-browse-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.lm-browse-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim, #94a3b8);
  pointer-events: none;
}

.lm-browse-search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--ink, #fff);
  font-size: 0.74rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.lm-browse-search-input:focus {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.lm-browse-lessons-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.lm-lesson-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: all 0.16s ease;
}

.lm-lesson-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 209, 102, 0.35);
  transform: translateY(-1px);
}

.lm-li-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.lm-li-code {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffd166;
}

.lm-li-units {
  font-size: 0.65rem;
  color: var(--ink-dim, #94a3b8);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.lm-li-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink, #fff);
  margin-bottom: 2px;
  line-height: 1.3;
}

.lm-li-keys {
  display: flex;
  gap: 4px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.lm-li-key-badge {
  font-family: 'Khmer Busra', 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
}

.lm-li-launch-btn {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.3);
  color: #ffd166;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.lm-li-launch-btn:hover {
  background: rgba(255, 209, 102, 0.22);
  border-color: rgba(255, 209, 102, 0.6);
  color: #fff;
}

/* TAB 3: Master Pangrams & Literature */
.lm-master-intro {
  margin-bottom: 14px;
}

.lm-master-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  margin-bottom: 6px;
}

.lm-master-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #fff);
  margin: 0 0 4px;
}

.lm-master-desc {
  font-size: 0.76rem;
  color: var(--ink-dim, #94a3b8);
  line-height: 1.45;
  margin: 0;
}

.lm-master-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.lm-master-card {
  padding: 14px;
  background: linear-gradient(135deg, rgba(20, 26, 44, 0.95) 0%, rgba(13, 18, 32, 0.98) 100%);
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.18s ease;
}

.lm-master-card:hover {
  border-color: rgba(255, 209, 102, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 209, 102, 0.15);
  transform: translateY(-2px);
}

.lm-mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lm-mc-track {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  color: #ffd166;
  letter-spacing: 0.05em;
}

.lm-mc-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.lm-mc-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink, #fff);
  margin: 0 0 2px;
  line-height: 1.25;
}

.lm-mc-khmer-title {
  font-size: 0.76rem;
  color: #ffd166;
  margin: 0 0 6px;
}

.lm-mc-desc {
  font-size: 0.72rem;
  color: var(--ink-dim, #94a3b8);
  line-height: 1.4;
  margin: 0 0 10px;
}

.lm-mc-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--ink-dim, #94a3b8);
  margin-bottom: 10px;
}

.lm-mc-stats strong {
  color: var(--ink, #fff);
}

.lm-mc-launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.16) 0%, rgba(255, 209, 102, 0.08) 100%);
  border: 1px solid rgba(255, 209, 102, 0.45);
  color: #ffd166;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.lm-mc-launch-btn:hover {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.3) 0%, rgba(255, 209, 102, 0.18) 100%);
  border-color: rgba(255, 209, 102, 0.8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.25);
}

.lm-master-pedagogy-box {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-top: 10px;
}

.lm-mp-heading {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd166;
  margin: 0 0 8px;
}

.lm-mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lm-mp-item strong {
  display: block;
  font-size: 0.72rem;
  color: var(--ink, #fff);
  margin-bottom: 2px;
}

.lm-mp-item p {
  font-size: 0.68rem;
  color: var(--ink-dim, #94a3b8);
  margin: 0;
  line-height: 1.35;
}

/* Footer Actions */
.lm-hub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 209, 102, 0.16);
  flex-wrap: wrap;
}

.lm-hub-verif-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #38bdf8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .lm-hub-modal-card {
    padding: 16px 14px;
    max-height: 94vh;
  }
  .lm-hub-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .lm-master-cards-grid {
    grid-template-columns: 1fr;
  }
  .lm-mp-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lm-alpha-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .lm-browse-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .lm-browse-search-wrap {
    max-width: 100%;
  }
}

/* ============================================================
   GRANDMASTER BONUS VAULT & SEQUENTIAL AUTO-JUMP STYLES
   ============================================================ */

.lesson-level-header.bonus-level-header {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(255, 170, 0, 0.04));
  border: 1px solid rgba(255, 209, 102, 0.28);
  box-shadow: 0 2px 10px rgba(255, 209, 102, 0.06);
  justify-content: space-between;
}

.lesson-level-header.bonus-level-header .llh-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bvh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bvh-badge.locked {
  background: rgba(255, 99, 71, 0.14);
  border: 1px solid rgba(255, 99, 71, 0.35);
  color: #ff6b6b;
}

.bvh-badge.unlocked {
  background: rgba(255, 209, 102, 0.18);
  border: 1px solid rgba(255, 209, 102, 0.45);
  color: var(--gold-bright);
}

.lesson-card.bonus-card {
  border-color: rgba(255, 209, 102, 0.22);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.04), rgba(20, 24, 38, 0.7));
}

.lesson-card.bonus-card:hover {
  border-color: rgba(255, 209, 102, 0.45);
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.12);
}

.lesson-card-bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  background: rgba(255, 209, 102, 0.16);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Bonus Auto-Jump Banner */
.bonus-auto-jump-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.14), rgba(255, 170, 0, 0.05));
  border: 1px solid rgba(255, 209, 102, 0.38);
  box-shadow: 0 4px 18px rgba(255, 209, 102, 0.12);
  animation: bonus-banner-glow 2.4s ease-in-out infinite alternate;
}

@keyframes bonus-banner-glow {
  0% { box-shadow: 0 4px 14px rgba(255, 209, 102, 0.1); border-color: rgba(255, 209, 102, 0.3); }
  100% { box-shadow: 0 6px 22px rgba(255, 209, 102, 0.22); border-color: rgba(255, 209, 102, 0.6); }
}

.bonus-auto-jump-banner .baj-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 209, 102, 0.2);
  color: var(--gold-bright);
  flex-shrink: 0;
}

.bonus-auto-jump-banner .baj-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.bonus-auto-jump-banner .baj-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
  text-transform: uppercase;
}

.bonus-auto-jump-banner .baj-desc {
  font-size: 0.76rem;
  color: var(--sand-muted);
  margin-top: 2px;
}

.bonus-auto-jump-banner .baj-desc b.baj-sec {
  color: var(--gold-bright);
  font-size: 0.86rem;
  font-weight: 800;
}

.bonus-auto-jump-banner .baj-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #12151f;
  background: var(--gold-bright);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  white-space: nowrap;
}

.bonus-auto-jump-banner .baj-jump-btn:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.bonus-auto-jump-banner.vault-conquered {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(255, 209, 102, 0.08));
  border-color: rgba(56, 189, 248, 0.35);
}
.bonus-auto-jump-banner.vault-conquered .baj-icon {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.bonus-auto-jump-banner.vault-conquered .baj-title {
  color: #38bdf8;
}

/* ============================================================
   GRANDMASTER VAULT HUB & 222 FANFARE CELEBRATION STYLES
   ============================================================ */

/* Vault Tab in Learn More Hub */
.lm-tab-btn#lmTabBtn-vault {
  border-color: rgba(255, 209, 102, 0.28);
  background: rgba(255, 209, 102, 0.05);
}
.lm-tab-btn#lmTabBtn-vault:hover {
  border-color: rgba(255, 209, 102, 0.6);
  background: rgba(255, 209, 102, 0.12);
}
.lm-tab-btn#lmTabBtn-vault.active {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
  border-color: #ffd166;
  color: #ffd166;
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.2);
}

/* Vault Intro Banner */
.lm-vault-intro {
  margin-bottom: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.08) 0%, rgba(20, 24, 38, 0.7) 100%);
  border: 1px solid rgba(255, 209, 102, 0.25);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.lm-vault-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.lm-vault-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink, #f8fafc);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lm-vault-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0;
}

/* Vault Progress Card */
.lm-vault-progress-card {
  background: rgba(17, 22, 38, 0.85);
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.lm-vp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}
.lm-vp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
}
.lm-vp-status.locked {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.3);
}
.lm-vp-status.unlocked {
  color: #5fd694;
  background: rgba(95, 214, 148, 0.12);
  border: 1px solid rgba(95, 214, 148, 0.35);
}
.lm-vp-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.lm-vp-num {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffd166;
}
.lm-vp-max {
  font-size: 0.82rem;
  color: #94a3b8;
}
.lm-vp-lbl {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-left: 4px;
}
.lm-vp-meter-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.lm-vp-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #ffd166);
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lm-vp-meter-fill.complete {
  background: linear-gradient(90deg, #5fd694, #ffd166);
}
.lm-vp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lm-vp-hint {
  font-size: 0.76rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-vp-hint.unlocked {
  color: #5fd694;
}
.lm-vp-preview-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.lm-vp-preview-toggle-btn:hover {
  background: rgba(255, 209, 102, 0.2);
  border-color: #ffd166;
  transform: translateY(-1px);
}

/* 3 Thematic Tiers Grid */
.lm-vault-tiers-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lm-vault-tier-card {
  background: rgba(17, 22, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lm-vault-tier-card:hover {
  border-color: rgba(255, 209, 102, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.lm-vt-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lm-vt-eyebrow {
  margin-bottom: 4px;
}
.lm-vt-tier-badge {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
}
.lm-vt-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #f8fafc);
  margin: 4px 0 3px;
}
.lm-vt-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}
.lm-vt-track-header {
  margin: 12px 0 6px;
}
.lm-vt-track-pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}
.lm-vt-track-pill.standard {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.3);
}
.lm-vt-track-pill.nida {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.lm-vt-track-pill.english {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
}
.lm-vt-lessons-row-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lm-vt-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  gap: 10px;
  transition: all 0.15s ease;
}
.lm-vt-lesson-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 209, 102, 0.25);
}
.lm-vt-lesson-row.mastered {
  border-color: rgba(95, 214, 148, 0.3);
  background: rgba(95, 214, 148, 0.03);
}
.lm-vt-lr-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.lm-vt-lr-status {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lm-vt-lr-code {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}
.lm-vt-lr-title {
  font-size: 0.78rem;
  color: var(--ink, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-vt-lr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lm-vt-lr-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5fd694;
  background: rgba(95, 214, 148, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.lm-vt-lr-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #12151f;
  background: #ffd166;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.lm-vt-lr-launch-btn:hover:not(:disabled) {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.lm-vt-lr-launch-btn:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: #64748b;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   GRANDMASTER 222-COMPLETION FANFARE MODAL
   ============================================================ */

.gm-fanfare-card {
  max-width: 520px;
  text-align: center;
  padding: 32px 28px;
  background: linear-gradient(180deg, #161c2e 0%, #0d111d 100%);
  border: 1px solid rgba(255, 209, 102, 0.45);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(255, 209, 102, 0.18);
  border-radius: 20px;
  animation: fanfareEntry 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fanfareEntry {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.gm-fanfare-crown-halo {
  margin: 0 auto 16px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.25) 0%, rgba(255, 209, 102, 0.05) 70%, transparent 100%);
  border: 1px solid rgba(255, 209, 102, 0.35);
  box-shadow: 0 0 32px rgba(255, 209, 102, 0.25);
}
.gm-fanfare-crown-icon {
  color: #ffd166;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: crownPulse 2s ease-in-out infinite alternate;
}
@keyframes crownPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.4)); }
  100% { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.8)); }
}
.gm-fanfare-eyebrow {
  margin-bottom: 8px;
}
.gm-fanfare-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.gm-fanfare-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink, #f8fafc);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.gm-fanfare-sub {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 20px;
}
.gm-fanfare-stats-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.gm-fstat-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gm-fstat-item.gold {
  border-color: rgba(255, 209, 102, 0.35);
  background: rgba(255, 209, 102, 0.08);
}
.gm-fstat-num {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffd166;
}
.gm-fstat-lbl {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 2px;
}
.gm-fanfare-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.gm-enter-vault-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd166 0%, #f59e0b 100%);
  color: #12151f;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 209, 102, 0.3);
  transition: all 0.16s ease;
}
.gm-enter-vault-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 209, 102, 0.45);
}