/* Webfonts are self-hosted — see css/fonts.css, linked from index.html ahead
     of this file. They used to @import from fonts.googleapis.com, which is
     blocked in mainland China and render-blocks the page until it times out. */
  :root {
    --glow-g: #f59e0b; --glow-d: #3b82f6; --glow-a: #a855f7; --glow-e: #ef4444;
    --bg: #ffffff;
    --ink: #000000;
    --ink-soft: #666666;
    --hairline: rgba(0,0,0,0.12);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; overflow:hidden; }
  body { font-family:'Inter',sans-serif; background:radial-gradient(ellipse at 50% 60%, #fafafa 0%, #f0f0f0 70%, #e8e8e8 100%); color:var(--ink); }
  .font-display { font-family:'Playfair Display',serif; }

  /* Glow effects */
  .glow-g { filter: drop-shadow(0 0 8px var(--glow-g)) drop-shadow(0 0 20px var(--glow-g)); }
  .glow-d { filter: drop-shadow(0 0 8px var(--glow-d)) drop-shadow(0 0 20px var(--glow-d)); }
  .glow-a { filter: drop-shadow(0 0 8px var(--glow-a)) drop-shadow(0 0 20px var(--glow-a)); }
  .glow-e { filter: drop-shadow(0 0 8px var(--glow-e)) drop-shadow(0 0 20px var(--glow-e)); }
  .text-glow { text-shadow: none; }

  /* ===== MINIMAL UI =====
     Pure white background, violin centered, text and buttons placed directly
     with no bars or containers. */
  #violinContainer { position:fixed; inset:0; z-index:0; }
  #violinContainer canvas { display:block; }

  /* Language selector — first visit overlay */
  .lang-selector {
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
  }
  .lang-card {
    text-align:center; padding:48px 56px; border-radius:20px;
    border:1px solid var(--hairline); background:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
  }
  .lang-title { font-size:32px; margin-bottom:8px; }
  .lang-subtitle { font-size:14px; color:var(--ink-soft); margin-bottom:32px; }
  .lang-options { display:flex; gap:20px; justify-content:center; }
  .lang-btn {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:24px 36px; border:1px solid var(--hairline); border-radius:16px;
    background:#fff; cursor:pointer; transition:all .2s ease;
    font-size:14px; color:var(--ink);
  }
  .lang-btn:hover { border-color:var(--ink); box-shadow:0 4px 16px rgba(0,0,0,0.08); transform:translateY(-2px); }
  .lang-flag { font-size:36px; }
  .lang-name { font-weight:600; }

  /* Header: title + thin progress line, no background */
  .app-header {
    position:fixed; top:0; left:0; right:0; z-index:32;
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:24px 28px; pointer-events:none;
  }
  .app-header > * { pointer-events:auto; }
  .brand { display:flex; flex-direction:column; gap:8px; }
  .brand h1 { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; letter-spacing:-0.02em; }
  .brand p { font-size:10px; color:var(--ink-soft); letter-spacing:0.08em; text-transform:uppercase; }
  .progress-line { width:120px; height:2px; background:var(--hairline); overflow:hidden; }
  .progress-line > div { height:100%; background:var(--ink); transition:width .7s ease; }

  /* Top-right nav: a single hamburger. Three bars at rest; morphs into an ✕
     while the drawer is open, back to bars when it closes (state mirrored
     from the drawer by syncNavToggle). */
  .app-nav { display:flex; align-items:center; gap:6px; }
  .setup-guide-btn {
    width:34px; height:30px; background:transparent; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); opacity:.75; font-size:18px; border-radius:8px;
    transition:opacity .2s ease, background .2s ease;
  }
  .setup-guide-btn:hover { opacity:1; background:rgba(0,0,0,.05); }
  .nav-toggle {
    width:36px; height:30px; background:transparent; border:none; cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; gap:5px; padding:4px 6px;
  }
  .nav-toggle span {
    display:block; width:22px; height:2px; background:var(--ink); border-radius:1px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle:hover span { background:var(--ink-soft); }
  .nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity:0; }
  .nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Practice controls live in the drawer now — one strip under the tabs,
     visible on every tab, so the bottom of the stage stays clear. */
  .drawer-controls {
    display:flex; align-items:center; justify-content:center; gap:10px 14px;
    flex-wrap:wrap;
    padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--hairline);
  }
  .drawer-ctrl {
    font-size:20px; color:var(--ink); background:transparent; border:none;
    cursor:pointer; opacity:.85; transition:opacity .2s ease, transform .15s ease;
  }
  .drawer-ctrl:hover { opacity:1; transform:scale(1.05); }
  .drawer-ctrl.play {
    font-size:14px; font-weight:600; padding:8px 20px; border:1px solid var(--ink);
    border-radius:30px; opacity:1;
  }

  /* Record: pill like Play, red dot; solid red + pulse while capturing */
  .drawer-ctrl.record {
    font-size:14px; font-weight:600; padding:8px 20px; border:1px solid var(--hairline);
    border-radius:30px; opacity:1; color:var(--ink);
  }
  .drawer-ctrl.record.recording {
    background:#dc2626; border-color:#dc2626; color:#fff;
    animation:record-pulse 1.4s ease-in-out infinite;
  }

  /* Speed multiplier pills (0.5×–1.25×) — own centered row under the transport */
.speed-pills { display:inline-flex; gap:4px; flex-basis:100%; justify-content:center; }
.speed-pill {
    font-size:11px; font-weight:600; color:var(--ink-soft); background:transparent;
    border:1px solid var(--hairline); border-radius:20px; padding:3px 8px;
    cursor:pointer; transition:all .2s ease; line-height:1;
  }
.speed-pill:hover { color:var(--ink); border-color:var(--ink-soft); }
.speed-pill.active { color:var(--ink); background:var(--accent); border-color:var(--accent); }

  /* Practice timer — active session display in drawer controls */
.timer-session {
    font-size:12px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;
    padding:4px 8px; border:1px solid var(--hairline); border-radius:20px;
    white-space:nowrap;
  }
  @keyframes record-pulse { 0%,100% { opacity:1; } 50% { opacity:.72; } }

  /* Corner controls (bottom-left): metronome toggle + draggable tempo bar.
     Same button typography as the drawer controls, parked in its own corner.
     Sits on a translucent white pill so the 3D model can never orbit behind
     the text and make it unreadable (the soft framing inset is relaxed on
     tight shots, and manual orbiting bypasses it entirely). */
  .corner-controls {
    position:fixed; bottom:22px; left:22px; z-index:30;
    display:flex; align-items:center; gap:14px;
    padding:8px 16px; border:1px solid var(--hairline); border-radius:30px;
    background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    user-select:none;
  }
  .corner-controls.dragging { cursor:grabbing; }
  .corner-controls input, .corner-controls button { cursor:pointer; }
  /* Grip dots: the ONLY drag surface for repositioning the pill. Dragging
     anywhere else (slider, metronome, readout) must never move it, or the
     camera re-frame on drop would surprise the learner mid-tempo-change. */
  .corner-grip {
    width:8px; height:16px; flex:none; cursor:grab; touch-action:none;
    background-image:radial-gradient(circle, var(--ink-soft) 1px, transparent 1.4px);
    background-size:4px 5px; background-position:center;
  }
  .corner-grip:active { cursor:grabbing; }
  .corner-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .corner-group + .corner-group { padding-left:14px; border-left:1px solid var(--hairline); }

  /* ===== MOBILE DOCK =====
     #mobileDock wraps .corner-controls together with a new prev/play/next
     row (.mobile-transport). By default it's `display:contents` — invisible
     to layout — so .corner-controls keeps its normal floating, draggable
     pill behavior (initCornerDrag() in app.js) untouched on desktop/tablet.
     Only under the two conditions below does it become a real flex row
     docked full-width at the bottom: a landscape phone (short viewport
     height regardless of width), or a portrait phone once the learner has
     tapped "Continue in portrait" on the rotate gate (body.portrait-ok —
     see js/orientation.js). Both blocks share the same ruleset because
     plain CSS has no mixins; keep them in sync if this ever changes.
     !important is required on .corner-controls' position/size: it can carry
     an inline drag-saved position (placeCorner() sets style.left/top
     directly), and inline styles otherwise beat stylesheet rules. */
  .mobile-dock { display:contents; }
  .mobile-transport { display:none; }
  .mobile-tr-btn {
    font-size:18px; color:var(--ink); background:transparent; border:none;
    cursor:pointer; opacity:.85; padding:0 14px; transition:opacity .2s ease;
  }
  .mobile-tr-btn:hover, .mobile-tr-btn:active { opacity:1; }
  .mobile-tr-btn.play {
    display:inline-flex; align-items:center; gap:5px;
    font-size:13px; font-weight:600; opacity:1;
  }
  .mobile-tr-btn.play .ctrl-icon { font-size:16px; }

  @media (max-width:700px) and (orientation:portrait) {
    body.portrait-ok .mobile-dock {
      display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:33;
      align-items:stretch; background:#fff; border-top:1px solid var(--hairline);
      padding-bottom:env(safe-area-inset-bottom, 0);
    }
    body.portrait-ok .mobile-transport {
      display:flex; align-items:center; justify-content:space-between;
      flex:none; padding:10px 6px; border-right:1px solid var(--hairline);
    }
    body.portrait-ok .mobile-dock .corner-controls {
      position:static !important; left:auto !important; top:auto !important;
      right:auto !important; bottom:auto !important; width:auto !important;
      display:flex !important; flex:1; min-width:0;
      border:none; border-radius:0; background:transparent; backdrop-filter:none;
      padding:8px 10px; overflow-x:auto;
    }
    body.portrait-ok .mobile-dock .corner-grip { display:none; }
    body.portrait-ok .mobile-dock .corner-group { flex-wrap:nowrap; }
    body.portrait-ok .mobile-dock .ctrl-label { display:none; }   /* icons only — width is tight */
    body.portrait-ok .mobile-dock #tempoSlider { width:64px; }
    /* The drawer already covers the full screen when open on a phone —
       clear the docked bar's height so its content isn't hidden behind it. */
    body.portrait-ok .drawer { padding-bottom:76px; }
  }

  @media (orientation:landscape) and (max-height:500px) {
    .mobile-dock {
      display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:33;
      align-items:stretch; background:#fff; border-top:1px solid var(--hairline);
      padding-bottom:env(safe-area-inset-bottom, 0);
    }
    .mobile-transport {
      display:flex; align-items:center; justify-content:space-between;
      flex:none; padding:8px 6px; border-right:1px solid var(--hairline);
    }
    .mobile-dock .corner-controls {
      position:static !important; left:auto !important; top:auto !important;
      right:auto !important; bottom:auto !important; width:auto !important;
      display:flex !important; flex:1; min-width:0;
      border:none; border-radius:0; background:transparent; backdrop-filter:none;
      padding:6px 10px; overflow-x:auto;
    }
    .mobile-dock .corner-grip { display:none; }
    .mobile-dock .corner-group { flex-wrap:nowrap; }
    .mobile-dock #tempoSlider { width:80px; }
    .drawer { padding-bottom:64px; }
  }

  .speed-btn { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-soft); background:transparent; border:none; cursor:pointer; padding:2px 6px; transition:color .2s; }
  .speed-btn:hover, .speed-btn.active { color:var(--ink); }
  .ctrl-icon { font-size:14px; }
  .ctrl-label { font-size:11px; font-weight:500; }

  /* Tempo slider: hairline track with a black round thumb — same monochrome
     language as the rest of the UI. Draggable = the old 0.5/1/1.5 + −/+ cluster. */
  #tempoSlider {
    -webkit-appearance:none; appearance:none;
    width:130px; height:2px; background:var(--hairline); border-radius:1px;
    outline:none; cursor:pointer; margin:0 4px;
  }
  #tempoSlider::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:14px; height:14px; border-radius:50%; background:var(--ink);
    border:none; cursor:grab; transition:transform .15s ease;
  }
  #tempoSlider::-webkit-slider-thumb:hover { transform:scale(1.15); }
  #tempoSlider::-webkit-slider-thumb:active { cursor:grabbing; }
  #tempoSlider::-moz-range-thumb {
    width:14px; height:14px; border-radius:50%; background:var(--ink);
    border:none; cursor:grab;
  }
  #tempoSlider::-moz-range-track { height:2px; background:var(--hairline); }
  .tempo-readout { min-width:52px; text-align:center; font-size:12px; color:var(--ink-soft); }

  /* Live readout: small floating text above transport during a lesson.
     Same translucent plate as the corner controls so the model passing
     behind it never swallows the note/instruction text. */
  .live-readout {
    position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:30;
    text-align:center; opacity:0; transition:opacity .3s ease;
    pointer-events:none;
    padding:8px 18px; border:1px solid var(--hairline); border-radius:14px;
    background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .live-readout.visible { opacity:1; }
  .live-readout .note { font-family:ui-monospace,monospace; font-size:14px; font-weight:600; }
  .live-readout .text { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .live-readout .finger { font-size:12px; color:var(--ink); font-weight:500; margin-top:4px; letter-spacing:0.02em; }

  /* Finger badge — HTML overlay projected from 3D onto the fingerboard */
  .finger-badge {
    position:absolute; display:none; z-index:10;
    width:26px; height:26px; border-radius:50%;
    transform:translate(-50%, -50%);
    pointer-events:none;
    border:2px solid rgba(255,255,255,0.6);
    transition:background .15s ease;
  }
  .finger-badge span {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    font-family:ui-monospace,monospace; font-size:14px; font-weight:800;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,0.25);
  }

  /* Tool highlight — used during the tools guide lesson */
  .speed-btn.tool-highlight {
    border-color:var(--accent) !important;
    box-shadow:0 0 0 3px var(--accent), 0 0 20px var(--accent) !important;
    animation:toolPulse 1.5s ease-in-out infinite;
  }
  .speed-btn.tool-dim {
    opacity:0.4;
  }
  .tool-arrow {
    position:absolute; top:-18px; left:50%; transform:translateX(-50%);
    color:var(--accent); font-size:14px; pointer-events:none;
    animation:toolArrowBounce 1s ease-in-out infinite;
  }
  @keyframes toolPulse {
    0%, 100% { box-shadow:0 0 0 3px var(--accent), 0 0 20px var(--accent); }
    50% { box-shadow:0 0 0 5px var(--accent), 0 0 30px var(--accent); }
  }
  @keyframes toolArrowBounce {
    0%, 100% { transform:translateX(-50%) translateY(0); }
    50% { transform:translateX(-50%) translateY(-4px); }
  }

  /* Tool explanation panel — floats above the controls during tools guide */
  .tool-explain-panel {
    position:fixed; bottom:90px; left:28px; z-index:25;
    padding:14px 18px; border:1px solid var(--hairline); border-radius:12px;
    background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.1);
    max-width:280px; pointer-events:none;
    opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease;
  }
  .tool-explain-panel.show {
    opacity:1; transform:translateY(0);
  }
  .tool-explain-label {
    font-size:13px; font-weight:600; color:var(--accent); margin-bottom:6px;
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .tool-explain-text {
    font-size:13px; color:var(--ink); line-height:1.5;
  }

  /* Coach card: beginner guidance pinned top-left (below the brand) during
     the String Crossing / demonstration lessons. Hidden unless the current
     step carries a `tip`. */
  .coach-tip {
    position:fixed; left:28px; top:110px; z-index:30; max-width:250px;
    padding:16px 18px; border:1px solid var(--hairline); border-radius:12px;
    background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08);
    pointer-events:none;
    opacity:0; transform:translateX(-12px); transition:opacity .25s ease, transform .25s ease;
  }
  .coach-tip.show { opacity:1; transform:translateX(0); }
  .coach-tip .coach-label {
    font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:6px;
  }
  .coach-tip .coach-text { font-size:14px; line-height:1.5; color:var(--ink); }
  /* Big blue Next inside the coach card — the learner-paced Bow Hold lesson
     advances with this instead of auto-play. Hidden unless active. */
  .coach-tip .coach-next {
    display:none; margin-top:12px; width:100%;
    background:#3b82f6; color:#fff; border:none; border-radius:10px;
    padding:10px 0; font-size:15px; font-weight:700; cursor:pointer;
    box-shadow:0 0 12px rgba(59,130,246,.55);
    /* The card itself is pointer-events:none (must not block orbiting the
       3D view) — re-enable real mouse clicks for the button. */
    pointer-events:auto;
  }
  .coach-tip .coach-next:hover { background:#2563eb; }
  .coach-tip .coach-next.show { display:block; }
  @media (max-width: 640px) {
    .coach-tip { left:16px; top:96px; max-width:210px; transform:translateX(-12px); }
    .coach-tip.show { transform:translateX(0); }
  }

  /* Minimal side drawer — white panel with a thin border so it never
     visually blends into the 3D model behind it. The camera still re-frames
     the model away from it (hard inset in getVisibleRect).
     Flex column: tabs + controls stay pinned at the top while only
     the panels below scroll. */
  .drawer {
    position:fixed; top:0; right:0; height:100%; width:360px; max-width:86vw;
    z-index:31; padding:90px 28px 28px;
    display:flex; flex-direction:column;
    background:var(--bg);
    border-left:1px solid var(--hairline);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .drawer.open { transform:translateX(0); }

  /* Only the tab panels scroll — the tab bar stays pinned at the top. */
  .drawer-panels { flex:1; min-height:0; overflow-y:auto; }

  /* No dedicated close button: the header hamburger morphs into the ✕ and
     sits above the drawer (.app-header z-index 32 > drawer 31), so it stays
     reachable and doubles as the close control. */

  /* Drawer tabs */
  .drawer-tabs { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:22px; border-bottom:1px solid var(--hairline); padding-bottom:12px; }
  .drawer-tab {
    font-size:13px; color:var(--ink-soft); background:transparent; border:none;
    cursor:pointer; padding:0 0 2px; transition:color .2s;
  }
  .drawer-tab:hover { color:var(--ink); }
  .drawer-tab.active { color:var(--ink); border-bottom:1px solid var(--ink); }

  /* Lesson cards */
  .lesson-card {
    padding:16px; border:1px solid var(--hairline); border-radius:12px;
    background:#fff; cursor:pointer; transition:all .25s ease; margin-bottom:10px;
    position:relative;
  }
  .lesson-card:hover { border-color:var(--ink); transform:translateY(-1px); }
  .lesson-card:focus-visible, .path-head:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
  .lesson-card.active { border-color:var(--ink); background:#fafafa; }
  .lesson-card h3 { font-size:14px; font-weight:600; color:var(--ink); }
  .lesson-card p { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .lesson-card .meta { display:flex; gap:8px; margin-top:10px; font-size:11px; }
  .lesson-card .tag { color:var(--ink-soft); }
  /* Best-score badge (top-right) — added by js/progress.js once a lesson is graded */
  .lesson-card .card-score {
    position:absolute; top:10px; right:10px; padding:2px 8px;
    border:1px solid var(--hairline); border-radius:999px;
    font-size:11px; font-weight:700; color:var(--ink); background:#fff;
  }

  /* Progress panel (scored-take history) */
  .progress-best { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .progress-best-row {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border:1px solid var(--hairline); border-radius:10px; background:#fff;
  }
  .progress-best-score { font-size:15px; font-weight:700; color:var(--ink); }
  .progress-best-name { font-size:11px; color:var(--ink-soft); }
  .progress-history-head { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:4px 0 8px; }
  .progress-row {
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    border:1px solid var(--hairline); border-radius:10px; background:#fff; margin-bottom:6px;
  }
  .progress-composite { font-size:16px; font-weight:700; color:var(--ink); width:34px; text-align:center; flex:0 0 34px; }
  .progress-row-main { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  .progress-lesson { font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .progress-dims { font-size:10px; color:var(--ink-soft); }
  .progress-date { font-size:10px; color:var(--ink-soft); flex:0 0 auto; }

  /* Achievement badges grid */
  .achievements-section { margin-top:16px; }
  .achievements-head {
    font-size:10px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ink-soft); margin-bottom:10px;
  }
  .achievements-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  }
  .ach-badge {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 6px; border:1px solid var(--hairline); border-radius:10px;
    text-align:center; opacity:0.4; filter:grayscale(1);
    transition:all .3s ease; cursor:default;
  }
  .ach-badge.earned { opacity:1; filter:none; background:#fefce8; border-color:#fbbf24; }
  .ach-icon { font-size:20px; line-height:1; }
  .ach-name { font-size:9px; font-weight:600; color:var(--ink-soft); line-height:1.2; }
  .ach-badge.earned .ach-name { color:var(--ink); }

  /* Note sequence rows */
  .step-row {
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:10px 12px; border-radius:8px; cursor:pointer;
    background:transparent; border:1px solid var(--hairline);
    transition:all .2s ease; margin-bottom:6px;
  }
  .step-row:hover { border-color:var(--ink); background:#fafafa; }
  .step-row.active { border-color:var(--ink); background:#f5f5f5; }
  .step-idx { width:20px; height:20px; flex:0 0 20px; border-radius:6px; font-size:10px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; color:var(--ink-soft); }
  .step-row.active .step-idx { background:var(--ink); color:#fff; }
  /* A–B loop range: a soft tint marks the practised bar while the loop is set. */
  .step-row.in-loop { background:#eef4ff; border-color:#c7d7f5; }
  /* Weak notes: red dot indicator for steps in lessons with consistently low intonation */
  .step-row.step-weak .step-idx::after {
    content:''; display:block; width:6px; height:6px; border-radius:50%;
    background:#ef4444; position:absolute; top:-2px; right:-2px;
  }
  .step-row.step-weak .step-idx { position:relative; }
  .step-row.step-weak { border-left:2px solid #fca5a5; }
  .step-body { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  .step-note { font-family:ui-monospace,monospace; font-size:12px; font-weight:600; }
  .step-text { font-size:11px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Silent steps (tools guide, posture demos) — just show text, no note label */
  .step-row.step-silent { opacity:0.7; }
  .step-row.step-silent .step-idx { background:#e8e8e8; font-size:9px; }

  /* Steps list container — ensure first step is fully visible */
  #stepsList { padding-top:4px; }

  /* Loading overlay */
  .loading-overlay { position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;z-index:40; }
  .loading-spinner { width:40px;height:40px;border:2px solid var(--hairline);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ===== ROTATE GATE (phone portrait) =====
     The violin's silhouette is wide and short (see FRAME_DIR in app.js), so
     a narrow portrait phone forces the camera to zoom out until everything
     — finger dots, bow, string highlights — is too small to read. Below a
     phone-sized width in portrait, this overlay stands in for the 3D stage.
     Pure-CSS visibility: hidden whenever the drawer is open (already
     full-width/portrait-friendly on its own — see .drawer's <640px rule) or
     once the learner has tapped "Continue in portrait" (js/orientation.js
     persists .portrait-ok on <body>). Scoped to phone widths only — a
     portrait tablet (iPad etc.) has plenty of room and should never see this. */
  .rotate-gate { display:none; position:fixed; inset:0; z-index:50; }
  @media (max-width:700px) and (orientation:portrait) {
    body:not(.drawer-open):not(.portrait-ok) .rotate-gate {
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
    }
  }
  .rotate-gate-card { width:280px; max-width:calc(100% - 48px); text-align:center; padding:32px 24px; }
  .rotate-icon { display:flex; justify-content:center; margin-bottom:22px; }
  .rotate-icon-phone {
    display:block; width:34px; height:56px; border:2.5px solid var(--ink); border-radius:7px;
    position:relative; animation:rotate-hint 2.2s ease-in-out infinite;
  }
  .rotate-icon-phone::after {
    content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px;
    border-radius:50%; background:var(--ink); transform:translateX(-50%);
  }
  @keyframes rotate-hint {
    0%, 15% { transform:rotate(0deg); }
    45%, 65% { transform:rotate(-90deg); }
    90%, 100% { transform:rotate(0deg); }
  }
  .rotate-gate-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; letter-spacing:-0.01em; margin-bottom:10px; }
  .rotate-gate-text { font-size:13px; color:var(--ink-soft); line-height:1.5; margin-bottom:22px; }
  .rotate-gate-continue {
    padding:9px 22px; border:1px solid var(--hairline); border-radius:999px;
    background:transparent; color:var(--ink-soft); font-size:12px; font-weight:500;
    cursor:pointer; transition:all .15s ease;
  }
  .rotate-gate-continue:hover { border-color:var(--ink); color:var(--ink); }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 3px; }

  /* ===== COACH FEEDBACK PANEL =====
     Modal card over a dim veil — the AI take analysis result. */
  .feedback-panel {
    position:fixed; inset:0; z-index:36; display:none;
    align-items:center; justify-content:center;
    background:rgba(255,255,255,0.72); backdrop-filter:blur(3px);
    padding:20px;
  }
  .feedback-panel.open { display:flex; }
  .fb-card {
    width:min(560px, 94vw); max-height:84vh; overflow-y:auto;
    background:var(--bg); border:1px solid var(--hairline); border-radius:14px;
    padding:26px 28px; box-shadow:0 12px 48px rgba(0,0,0,0.10);
  }
  .fb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .fb-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; }
  .fb-close {
    width:30px; height:30px; border:1px solid var(--hairline); border-radius:50%;
    background:transparent; font-size:12px; cursor:pointer; color:var(--ink);
  }
  .fb-close:hover { background:rgba(0,0,0,0.05); }

  .fb-stats { display:flex; gap:0; border:1px solid var(--hairline); border-radius:10px; overflow:hidden; margin-bottom:16px; }
  .fb-stat { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 4px; }
  .fb-stat + .fb-stat { border-left:1px solid var(--hairline); }
  .fb-stat span { font-size:18px; font-weight:700; font-family:ui-monospace,monospace; }
  .fb-stat label { font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-top:2px; }
  .fb-problems { font-size:12px; color:#b45309; margin:-8px 0 14px; text-align:center; }
  /* Profile-weighted scores: composite + one chip per scored dimension. The
     composite only weighs what matters for the current material. */
  .fb-scores { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:10px 12px; background:var(--ink); border-radius:10px; color:var(--bg); }
    .fb-composite { display:flex; flex-direction:column; align-items:center; padding-right:12px; border-right:1px solid rgba(255,255,255,0.25); }
    .fb-composite span { font-size:24px; font-weight:700; font-family:ui-monospace,monospace; line-height:1; }
    .fb-composite label { font-size:9px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.6; margin-top:3px; }
    .fb-dims { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
    .fb-dim { display:flex; align-items:baseline; gap:5px; padding:4px 9px; border:1px solid rgba(255,255,255,0.3); border-radius:999px; }
    .fb-dim span { font-size:14px; font-weight:700; font-family:ui-monospace,monospace; }
    .fb-dim label { font-size:9px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; }
    .fb-dim.low { border-color:rgba(245,158,11,0.9); }
    .fb-dim.low span { color:#fbbf24; }

  .fb-summary { font-size:14px; line-height:1.65; margin-bottom:6px; }
  .fb-section { margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); }
  .fb-label { font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:8px; }
  .fb-list { list-style:none; }
  .fb-list li { font-size:13px; line-height:1.6; padding-left:16px; position:relative; }
  .fb-list li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:#16a34a; }

  .fb-focus { display:flex; gap:12px; align-items:flex-start; padding:8px 0; font-size:13px; line-height:1.55; }
  .fb-focus-note {
    flex:0 0 auto; font-family:ui-monospace,monospace; font-weight:700; font-size:12px;
    border:1px solid var(--hairline); border-radius:6px; padding:3px 8px; margin-top:1px;
  }
  .fb-fix { color:var(--ink-soft); margin-top:2px; }
  .fb-drill { font-size:13px; line-height:1.65; font-style:italic; }

  .fb-loading { display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 0; }
  .fb-spinner { width:34px; height:34px; border:2px solid var(--hairline); border-top-color:var(--ink); border-radius:50%; animation:spin 1s linear infinite; }
  .fb-loading p { font-size:13px; color:var(--ink); }
  .fb-hint { font-size:12px; color:var(--ink-soft) !important; }
  .fb-error .fb-title { font-size:16px; font-weight:700; margin-bottom:8px; }
  .fb-error p { font-size:13px; line-height:1.6; color:var(--ink-soft); }

  /* ===== TUNER (drawer panel) ===== */
  /* The tuner lives inside the drawer as a regular panel.
     Layout: gauge + note readout sit side-by-side in a flex row,
     strings and controls stack below — compact enough for the drawer width. */
  .tuner-status { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }

  .tuner-top-row { display:flex; gap:16px; align-items:center; margin-bottom:14px; }
  .tuner-gauge-wrap { flex:1; min-width:0; }
  #tunerGauge { display:block; width:100%; }
  #tunerNeedle { stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; }
  #tunerGauge circle { fill:var(--ink); }
  .tuner-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--ink-soft); padding:0 8px; margin-top:-4px; }

  .tuner-readout { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:80px; }
  .tuner-note { font-family:'Playfair Display',serif; font-size:48px; font-weight:700; line-height:1; transition:color .2s; }
  .tuner-note[data-band="ok"] { color:#16a34a; }
  .tuner-sub { display:flex; gap:10px; font-family:ui-monospace,monospace; font-size:11px; color:var(--ink-soft); }
  #tunerCents[data-band="ok"] { color:#16a34a; font-weight:600; }
  #tunerCents[data-band="near"] { color:#d97706; }
  #tunerCents[data-band="far"] { color:#dc2626; }

  .tuner-strings { display:flex; gap:8px; margin-bottom:14px; }
  .tuner-string {
    flex:1; padding:7px 0; border:1px solid var(--hairline); border-radius:999px;
    background:transparent; font-family:ui-monospace,monospace; font-size:12px; font-weight:600;
    color:var(--ink); cursor:pointer; transition:background .15s, color .15s; text-align:center;
  }
  .tuner-string:hover { background:rgba(0,0,0,0.05); }
  .tuner-string.active { background:var(--ink); color:#fff; border-color:var(--ink); }

  .tuner-controls { display:flex; align-items:center; gap:16px; }
  .tuner-cal { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
  .tuner-cal button {
    width:24px; height:24px; border:1px solid var(--hairline); border-radius:50%;
    background:transparent; color:var(--ink); font-size:13px; line-height:1; cursor:pointer;
  }
  .tuner-cal button:hover { background:rgba(0,0,0,0.05); }
  #tunerCalValue { min-width:24px; text-align:center; color:var(--ink); font-weight:600; }
  .tuner-start {
    margin-left:auto; padding:9px 28px; border:none; border-radius:999px;
    background:var(--ink); color:#fff; font-size:12px; font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;
    transition:opacity .15s;
  }
  .tuner-start:hover { opacity:0.85; }

  /* Responsive */
  @media (max-width: 640px) {
    .app-header { padding:18px 20px; }
    .brand h1 { font-size:18px; }
    .corner-controls { display:none; }
    .drawer { width:100%; max-width:100%; padding:80px 20px 24px; }
    /* On narrow screens the gauge+note row stacks vertically */
    .tuner-top-row { flex-direction:column; align-items:stretch; }
    .tuner-readout { align-self:center; }
    .tuner-controls { flex-direction:column; gap:12px; }
    .tuner-start { margin-left:0; width:100%; }
    .auth-card { width:calc(100% - 40px); padding:28px 22px; }
  }

  /* ===== LESSON SEARCH + COLLAPSIBLE SECTIONS ===== */
  .lesson-search {
    width:100%; padding:9px 14px; margin-bottom:14px;
    border:1px solid var(--hairline); border-radius:10px;
    background:transparent; color:var(--ink); font-size:13px; outline:none;
  }
  .lesson-search:focus { border-color:var(--ink); }
  .path-section { overflow:hidden; transition:max-height .3s ease; }
  .path-section.collapsed { max-height:0 !important; }
  .path-head { cursor:pointer; user-select:none; }
  .path-chevron {
    margin-left:auto; font-size:12px; color:var(--ink-soft);
    transition:transform .2s ease;
  }
  .path-head.collapsed .path-chevron { transform:rotate(-90deg); }

  /* ===== PROGRESS INDICATORS ON LESSON CARDS ===== */
  .lesson-card.completed { border-color:#16a34a; }
  .lesson-card.completed::after {
    content:'✓'; position:absolute; top:10px; right:10px;
    width:20px; height:20px; border-radius:50%;
    background:#16a34a; color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .lesson-card.completed .card-score { right:36px; }

  /* Daily practice routine card — warm accent border, sun icon */
  .routine-card {
    border-color:#f59e0b; background:linear-gradient(135deg, #fffbeb 0%, #fff 60%);
  }
  .routine-card h3 { color:#b45309; }
  .routine-card .tag { background:#fef3c7; color:#92400e; }

  /* Sight reading card — blue accent, option controls inside */
  .sightread-card {
    border-color:#3b82f6; background:linear-gradient(135deg, #eff6ff 0%, #fff 60%);
  }
  .sightread-card h3 { color:#1d4ed8; }
  .sightread-card .tag { background:#dbeafe; color:#1e40af; }
  .sightread-options {
    display:flex; align-items:center; gap:10px; margin-top:8px;
    font-size:11px; color:var(--ink-soft); flex-wrap:wrap;
  }
  .sightread-options select {
    font-size:11px; padding:2px 4px; border:1px solid var(--hairline);
    border-radius:6px; background:#fff; color:var(--ink);
  }
  .sightread-options label { display:flex; align-items:center; gap:4px; }
  .sightread-regen {
    font-size:11px; font-weight:600; color:var(--ink); background:transparent;
    border:1px solid var(--hairline); border-radius:6px; padding:3px 8px;
    cursor:pointer; transition:all .2s;
  }
  .sightread-regen:hover { background:#f5f5f5; border-color:var(--ink-soft); }
  .lesson-progress-summary {
    display:flex; align-items:center; gap:12px; margin-bottom:14px;
    padding:10px 14px; border:1px solid var(--hairline); border-radius:10px;
    background:#fafafa; font-size:12px; color:var(--ink-soft);
  }
  .lesson-progress-summary strong { color:var(--ink); font-size:16px; }

  /* ===== PROGRESS DASHBOARD ===== */
  .progress-dash { margin-bottom:18px; }
  .progress-stats { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-bottom:16px; }
  .progress-stat-card {
    text-align:center; padding:16px 8px 14px;
    border:1px solid var(--hairline); border-radius:12px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .stat-num { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:var(--ink); line-height:1.1; }
  .stat-label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:4px; }

  .progress-overview {
    padding:14px 16px;
    border:1px solid var(--hairline); border-radius:12px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .progress-overview-head {
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; font-weight:600; color:var(--ink); margin-bottom:10px;
  }
  .progress-overview-head span:last-child {
    font-family:ui-monospace,monospace; font-size:13px; font-weight:700; color:var(--ink);
  }
  .progress-bar-track {
    width:100%; height:8px; border-radius:4px;
    background:#f0f0f0; overflow:hidden;
  }
  .progress-bar-fill {
    height:100%; border-radius:4px;
    background:linear-gradient(90deg, var(--ink) 0%, #6b6b6b 100%);
    transition:width .5s ease;
  }
  .progress-hint {
    font-size:11px; color:var(--ink-soft); margin-top:10px; text-align:center;
  }

  /* ===== AUTH GATE (full-screen, sits above tuner + feedback) ===== */
  .auth-gate {
    position:fixed; inset:0; z-index:60;
    display:flex; align-items:center; justify-content:center;
    /* Frosted, not opaque: the 3D violin loads behind the form so the first
       thing a visitor sees is the product, not a wall of white. */
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(10px) saturate(1.15);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
  }
  .auth-card {
    width:340px; max-width:calc(100% - 40px);
    padding:36px 32px;
    background:var(--bg);
    border:1px solid var(--hairline); border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,0.06);
  }
  .auth-title { font-size:22px; font-weight:600; letter-spacing:-0.01em; }
  .auth-sub { margin-top:4px; font-size:12px; color:var(--ink-soft); }
  .auth-tabs {
    display:flex; margin:22px 0 16px;
    border:1px solid var(--hairline); border-radius:999px; padding:3px;
  }
  .auth-tab {
    flex:1; padding:7px 0; border:none; border-radius:999px;
    background:transparent; color:var(--ink-soft);
    font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
  }
  .auth-tab.active { background:var(--ink); color:#fff; }
  .auth-input {
    display:block; width:100%; box-sizing:border-box;
    margin-bottom:12px; padding:10px 14px;
    border:1px solid var(--hairline); border-radius:10px;
    background:transparent; color:var(--ink);
    font-size:13px; outline:none; transition:border-color .15s;
  }
  .auth-input:focus { border-color:var(--ink); }
  .auth-input::placeholder { color:var(--ink-soft); }
  .auth-submit {
    display:block; width:100%; margin-top:4px; padding:11px 0;
    border:none; border-radius:999px;
    background:var(--ink); color:#fff;
    font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    cursor:pointer; transition:opacity .15s;
  }
  .auth-submit:hover:not(:disabled) { opacity:0.85; }
  .auth-submit:disabled { opacity:0.5; cursor:default; }
  .auth-error { margin-top:12px; font-size:12px; color:#dc2626; text-align:center; }

  /* ===== DRAWER USER ROW (account + logout, pinned to the bottom) ===== */
  .drawer-user {
    margin-top:auto; padding-top:14px;
    border-top:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:space-between;
    flex:none;
  }
  .drawer-user-name { font-size:12px; font-weight:600; color:var(--ink); }
  .drawer-user-name::before {
    content:"●"; font-size:8px; margin-right:7px; vertical-align:1px;
    color:var(--ink-soft);
  }
  .drawer-user-logout {
    padding:5px 14px; border:1px solid var(--hairline); border-radius:999px;
    background:transparent; color:var(--ink-soft);
    font-size:11px; cursor:pointer; transition:all .15s;
  }
  .drawer-user-logout:hover { border-color:var(--ink); color:var(--ink); }
  .lang-switch-btn {
      padding:5px 10px; border:1px solid var(--hairline); border-radius:999px;
      background:transparent; color:var(--ink-soft);
      font-size:11px; font-weight:700; cursor:pointer; transition:all .15s;
      margin-left:8px;
    }
  .lang-switch-btn:hover { border-color:var(--ink); color:var(--ink); }
  .streak-mini {
      font-size:11px; font-weight:700; color:#f59e0b;
      margin-left:4px; white-space:nowrap;
    }

  /* ===== NOTES PANEL: LIST | STAFF VIEW TOGGLE ===== */
  .view-toggle {
    display:inline-flex; border:1px solid var(--hairline); border-radius:999px;
    overflow:hidden;
  }
  .view-seg {
    padding:5px 14px; font-size:11px; cursor:pointer;
    background:transparent; border:none; color:var(--ink-soft);
    transition:all .15s;
  }
  .view-seg + .view-seg { border-left:1px solid var(--hairline); }
  .view-seg.active { background:var(--ink); color:var(--bg); }

/* ===== ICON SET (replaces emoji glyphs) ===== */
.ic { display:inline-block; vertical-align:-0.15em; flex-shrink:0; }
.ic-flame, .ic-lightning, .ic-chart, .ic-note { vertical-align:-0.18em; }

/* ===== STAFF (五线谱) RENDERER ===== */
.staff-view {
  overflow:auto; padding:6px 0 10px;
  -webkit-overflow-scrolling:touch;
}
.staff-svg { display:block; }
.staff-label { font-size:11px; font-weight:600; fill:var(--ink); }
.staff-line, .staff-ledger { stroke:rgba(0,0,0,.35); stroke-width:1; }
.staff-clef-path { fill:#000; stroke:none; }
.staff-acc { font-size:13px; fill:#000; }
.staff-keyacc { font-size:13px; fill:#000; font-weight:700; }
.staff-nh { fill:none; stroke:#000; stroke-width:1.6; }
.staff-nh.filled { fill:#000; }
.staff-stem { stroke:#000; stroke-width:1.4; }
.staff-flag { fill:none; stroke:#000; stroke-width:1.8; }
.staff-dot { fill:#000; }
.staff-note { cursor:pointer; }
.staff-note.active .staff-nh { fill:var(--c); stroke:var(--c); }
.staff-note.active .staff-stem, .staff-note.active .staff-flag { stroke:var(--c); }
.staff-note.active .staff-dot { fill:var(--c); }
  /* Music-theory marks: rests, time signature, barlines, ties, expression */
  .staff-rest-block { fill:#000; }
  .staff-rest-mark { fill:none; stroke:#000; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .staff-rest-flag { fill:#000; }
  .staff-note.active .staff-rest-block, .staff-note.active .staff-rest-flag { fill:var(--c); }
  .staff-note.active .staff-rest-mark { stroke:var(--c); }
  .staff-timesig { font-size:17px; font-weight:700; fill:#000; text-anchor:middle; }
  .staff-barline { stroke:#000; fill:#000; }
  line.staff-barline { stroke-width:1; }
  .staff-tie { fill:none; stroke:#000; stroke-width:1.4; }
  .staff-stacc { fill:#000; }
  .staff-dyn { font-size:12px; font-style:italic; font-weight:600; fill:#000; text-anchor:middle; }
  .staff-triplet { font-size:10px; font-style:italic; font-weight:700; fill:#000; text-anchor:middle; }
  .staff-note.active .staff-triplet { fill:var(--c); }
  .staff-roll, .staff-roll-arrow { fill:none; stroke:#000; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
  .staff-harm { fill:none; stroke:#000; stroke-width:1.3; }
  .staff-lhpizz { font-size:11px; font-weight:700; fill:#000; text-anchor:middle; }
  .staff-pizz { font-size:9px; font-style:italic; fill:#000; text-anchor:middle; }
  .staff-trem { stroke:#000; stroke-width:1.4; stroke-linecap:round; }
  .staff-fermata { fill:none; stroke:#000; stroke-width:1.4; }
  .staff-fermata-dot { fill:#000; }
  .staff-note.active .staff-roll, .staff-note.active .staff-roll-arrow { stroke:var(--c); }
  .staff-note.active .staff-harm { stroke:var(--c); }
  .staff-note.active .staff-lhpizz, .staff-note.active .staff-pizz { fill:var(--c); }
  .staff-note.active .staff-trem { stroke:var(--c); }
  .staff-note.active .staff-fermata { stroke:var(--c); }
  .staff-note.active .staff-fermata-dot { fill:var(--c); }
  .step-expr {
    margin-left:4px; padding:0 5px; border:1px solid var(--hairline);
    border-radius:999px; font-size:9px; font-style:italic; color:var(--ink-soft);
  }

  /* ===== MY SONGS PANEL ===== */
  .mine-actions { display:flex; gap:8px; margin-bottom:12px; }
  .mine-action {
    flex:1; padding:9px 12px; font-size:12px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:10px;
    background:transparent; color:var(--ink); transition:all .15s;
  }
  .mine-action:hover { border-color:var(--ink); }
  .mine-status { font-size:11px; color:var(--ink-soft); margin-bottom:10px; line-height:1.5; }
  .mine-status:empty { display:none; }
  .mine-status.error { color:#dc2626; }
  .mine-empty { font-size:12px; color:var(--ink-soft); line-height:1.6; padding:6px 0; }
  .mine-card { position:relative; }
  .mine-edit, .mine-delete {
    position:absolute; top:10px;
    font-size:10px; padding:3px 10px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:999px;
    background:var(--bg); color:var(--ink-soft); transition:all .15s;
  }
  .mine-edit { right:68px; }
  .mine-delete { right:10px; }
  .mine-edit:hover { border-color:var(--ink); color:var(--ink); }
  .mine-delete:hover { border-color:#dc2626; color:#dc2626; }

  /* ===== SONG EDITOR MODAL (same card language as the auth gate) ===== */
  .editor-modal {
    position:fixed; inset:0; z-index:55;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.72); backdrop-filter:blur(4px);
  }
  .editor-card {
    width:440px; max-width:calc(100% - 32px);
    max-height:calc(100vh - 40px); overflow-y:auto;
    padding:26px 26px 22px;
    background:var(--bg);
    border:1px solid var(--hairline); border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,0.08);
  }
  .editor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .editor-head h2 { font-size:18px; font-weight:600; }
  .editor-head-actions { display:flex; align-items:center; gap:8px; }
  .editor-review-toggle { flex:none; padding:6px 10px; font-size:12px; }
  /* Scan review panel: original photo above the editable rows, zoomable. */
  .editor-review {
    margin-bottom:12px; border:1px solid var(--hairline);
    border-radius:10px; overflow:hidden;
  }
  .review-bar {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:6px 10px; background:rgba(0,0,0,.03);
    font-size:11px; color:var(--ink-soft);
  }
  .review-zoom { display:flex; gap:6px; }
  .review-scroll { max-height:38vh; overflow:auto; background:#fff; }
  .review-scroll img { display:block; width:100%; }
  .editor-close {
    border:none; background:transparent; cursor:pointer;
    font-size:14px; color:var(--ink-soft); padding:4px 8px;
  }
  .editor-close:hover { color:var(--ink); }
  .editor-fields { display:flex; gap:10px; margin-bottom:12px; }
  .editor-fields .auth-input { flex:1; margin:0; }
  .editor-bpm {
    display:flex; align-items:center; gap:6px;
    border:1px solid var(--hairline); border-radius:10px; padding:0 12px;
    font-size:13px; color:var(--ink-soft);
  }
  .editor-bpm input {
    width:52px; border:none; outline:none; background:transparent;
    font-size:13px; color:var(--ink); padding:9px 0;
  }
  /* Lesson-level theory metadata: time signature + repeat section range */
  .editor-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .editor-meta-label { font-size:11px; color:var(--ink-soft); }
  .ed-select {
    padding:7px 8px; font-size:12px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:8px;
    background:var(--bg); color:var(--ink); outline:none;
  }
  .ed-num {
    width:52px; padding:7px 8px; font-size:12px;
    border:1px solid var(--hairline); border-radius:8px;
    background:var(--bg); color:var(--ink); outline:none;
  }
  .editor-rows { display:flex; flex-direction:column; gap:6px; }
  .ed-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .ed-idx { width:20px; font-size:11px; color:var(--ink-soft); text-align:right; flex:none; }
  .ed-row select {
    flex:1; min-width:70px; padding:7px 8px; font-size:12px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:8px;
    background:var(--bg); color:var(--ink); outline:none;
  }
  .ed-row select:focus { border-color:var(--ink); }
  .ed-row select:disabled { opacity:.4; cursor:not-allowed; }
  /* Per-step expression toggles: Rest, Tie, Staccato */
  .ed-rest, .ed-flag {
    display:flex; align-items:center; gap:4px; flex:none;
    font-size:11px; color:var(--ink-soft); cursor:pointer; user-select:none;
  }
  .ed-rest input, .ed-flag input { cursor:pointer; }
  .ed-dyn { flex:0 0 62px !important; min-width:62px !important; }
  /* A rest row dims its (disabled) note dropdown */
  .ed-row.is-rest .ed-note { opacity:.4; }
  .ed-del {
    flex:none; width:26px; height:26px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:8px;
    background:transparent; color:var(--ink-soft); font-size:11px;
    transition:all .15s;
  }
  .ed-del:hover { border-color:#dc2626; color:#dc2626; }
  /* AI visual evidence line under a scanned row (italic, unobtrusive). */
  .ed-why {
    flex-basis:100%; margin:-2px 0 2px 26px;
    font-size:10.5px; font-style:italic; color:var(--ink-soft);
  }
  .editor-staff {
    margin-top:14px; overflow-x:auto;
    border:1px solid var(--hairline); border-radius:10px;
    padding:4px 6px; background:var(--bg);
  }
  .editor-foot { display:flex; gap:10px; margin-top:16px; }
  .editor-btn {
    flex:1; padding:10px 14px; font-size:13px; cursor:pointer;
    border:1px solid var(--ink); border-radius:10px;
    background:var(--ink); color:var(--bg); transition:opacity .15s;
  }
  .editor-btn:hover { opacity:.85; }
  .editor-btn:disabled { opacity:.5; cursor:default; }
  .editor-btn.ghost { background:transparent; color:var(--ink); }
  .editor-btn.ghost:hover { opacity:.7; }

  /* ===== TAILWIND COMPAT LAYER =====
     Hand-written equivalents of the few utility classes the markup uses.
     Replaces the cdn.tailwindcss.com script, which is not for production. */
  .flex { display:flex; }
  .flex-col { flex-direction:column; }
  .items-center { align-items:center; }
  .gap-1\.5 { gap:6px; }
  .gap-2 { gap:8px; }
  .space-y-2 > * + * { margin-top:8px; }
  .space-y-3 > * + * { margin-top:12px; }
  .mt-1 { margin-top:4px; }
  .mt-3 { margin-top:12px; }
  .mt-4 { margin-top:16px; }
  .mb-2 { margin-bottom:8px; }
  .pt-4 { padding-top:16px; }
  .w-2\.5 { width:10px; }
  .h-2\.5 { height:10px; }
  .rounded-full { border-radius:9999px; }
  .uppercase { text-transform:uppercase; }
  .tracking-widest { letter-spacing:0.1em; }
  .font-semibold { font-weight:600; }
  .text-\[10px\] { font-size:10px; }
  .text-xs { font-size:12px; line-height:1.4; }
  .text-sm { font-size:14px; line-height:1.4; }
  .text-lg { font-size:18px; line-height:1.4; }

  /* ===== GUEST ENTRY + LEARNING PATH + ONBOARDING ===== */
  .auth-guest {
    margin-top:14px; width:100%; padding:10px;
    background:transparent; border:1px solid var(--hairline); border-radius:999px;
    font-size:13px; font-weight:600; cursor:pointer;
  }
  .auth-guest:hover { background:rgba(0,0,0,.05); }
  .auth-guest-hint { margin-top:10px; color:var(--ink-soft); text-align:center; }

  .path-head { display:flex; gap:10px; align-items:flex-start; margin:24px 0 10px; }
  .path-head:first-of-type { margin-top:16px; }
  .path-num {
    flex:0 0 auto; width:22px; height:22px; border-radius:50%;
    background:var(--ink); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .path-head h4 { font-size:13px; font-weight:600; }
  .path-head p { font-size:11px; color:var(--ink-soft); margin-top:2px; }

  .onboard {
    position:fixed; inset:0; z-index:70;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .onboard-card {
    width:430px; max-width:calc(100% - 40px);
    background:#fff; border:1px solid var(--hairline); border-radius:16px;
    padding:30px 30px 26px; box-shadow:0 20px 60px rgba(0,0,0,.15);
  }
  .onboard-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; }
  .onboard-sub { font-size:12px; color:var(--ink-soft); margin-top:4px; }
  .onboard-step { display:flex; gap:12px; margin:16px 0; }
  .onboard-step h4 { font-size:14px; font-weight:600; }
  .onboard-step p { font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:2px; }
  .onboard-actions { display:flex; gap:10px; margin-top:22px; }
  .onboard-primary {
    flex:1; padding:11px; background:var(--ink); color:#fff;
    border:none; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  }
  .onboard-primary:hover { opacity:.85; }
  .onboard-skip {
    padding:11px 16px; background:transparent; border:1px solid var(--hairline);
    border-radius:999px; font-size:13px; cursor:pointer;
  }
  .onboard-skip:hover { background:rgba(0,0,0,.05); }

  /* Multi-step guided setup (beginner onboarding) */
  .onboard-dots { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
  .onboard-dot { width:6px; height:6px; border-radius:999px; background:var(--hairline); }
  .onboard-dot.active { background:var(--ink); }
  .onboard-diagram {
    display:flex; align-items:center; justify-content:center;
    height:76px; margin-bottom:10px; color:var(--ink);
  }
  .onboard-icon-lg { width:64px !important; height:64px !important; }
  .onboard-tips { margin:14px 0 4px; padding-left:18px; }
  .onboard-tips li { font-size:12px; color:var(--ink-soft); line-height:1.6; margin-bottom:8px; }
  .onboard-nav { display:flex; gap:10px; margin-top:22px; align-items:center; }
  .onboard-nav .onboard-primary { flex:1; }
  .onboard-back, .onboard-skip-link {
    padding:11px 16px; background:transparent; border:1px solid var(--hairline);
    border-radius:999px; font-size:13px; cursor:pointer; color:var(--ink-soft); white-space:nowrap;
  }
  .onboard-skip-link { border-color:transparent; padding:11px 4px; }
  .onboard-back:hover, .onboard-skip-link:hover { background:rgba(0,0,0,.05); }

  .tune-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
  .tune-btn {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 4px; background:#fafafa; border:1px solid var(--hairline);
    border-radius:12px; cursor:pointer; transition:background .15s ease, border-color .15s ease;
  }
  .tune-btn:hover { background:#f2f2f2; }
  .tune-note { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; }
  .tune-check { width:14px; height:14px; color:var(--hairline); }
  .tune-btn.tuned { border-color:#22c55e; background:#f0fdf4; }
  .tune-btn.tuned .tune-check { color:#22c55e; }
  .onboard-linklike {
    display:block; margin:16px auto 0; background:none; border:none; cursor:pointer;
    font-size:12px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;
  }
  .onboard-linklike:hover { color:var(--ink); }

  /* ===== NEW FEATURES: curriculum lock/unlock, drills, next-up, timeline, goals, journal ===== */

  /* Curriculum lock/unlock — visual de-emphasis only, never blocks a click */
  .path-num-icon { background:transparent; font-size:16px; width:auto; height:auto; }
  .path-head-dim { opacity:0.55; }
  .path-head-dim h4, .path-head-dim p { color:var(--ink-soft); }
  .lock-hint {
    display:block; font-size:10px; color:var(--ink-soft); margin-top:3px;
    font-style:italic;
  }
  .lesson-card.curriculum-dim { opacity:0.5; }
  .lesson-card.curriculum-dim:hover { opacity:0.8; }

  /* Technique drill cards — same shape as lesson cards, faint left accent */
  .drill-card { border-left:3px solid #8b5cf6; }

  /* "Next up" adaptive recommendation, shown in the Coach Feedback panel */
  .next-up-card {
    margin-top:16px; padding:14px 16px; border-radius:12px;
    background:#f5f3ff; border:1px solid #ddd6fe;
  }
  .next-up-label {
    font-size:10px; text-transform:uppercase; letter-spacing:.1em;
    color:#7c3aed; font-weight:700; margin-bottom:6px;
  }
  .next-up-text { font-size:13px; line-height:1.5; color:var(--ink); margin-bottom:10px; }
  .next-up-btn {
    padding:8px 16px; border:none; border-radius:999px;
    background:#7c3aed; color:#fff; font-size:12px; font-weight:600; cursor:pointer;
  }
  .next-up-btn:hover { background:#6d28d9; }

  /* Note-by-note take timeline */
  .tl-strip { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
  .tl-chip {
    display:flex; flex-direction:column; align-items:center; gap:1px;
    min-width:30px; padding:5px 4px; border-radius:7px;
    font-size:10px; font-weight:600; border:1px solid transparent;
    background:#f0f0f0; color:var(--ink-soft); cursor:default;
  }
  .tl-note { font-size:9px; opacity:0.8; }
  .tl-mark { font-size:12px; line-height:1; }
  .tl-correct { background:#dcfce7; color:#15803d; }
  .tl-sharp   { background:#fef3c7; color:#b45309; }
  .tl-flat    { background:#dbeafe; color:#1d4ed8; }
  .tl-missed  { background:#f3f4f6; color:#9ca3af; }
  .tl-early, .tl-late { border-bottom:2px solid #ef4444; }
  .tl-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:10px; color:var(--ink-soft); align-items:center; }
  .tl-legend span { display:inline-flex; align-items:center; gap:4px; }
  .tl-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
  .tl-dot.tl-correct { background:#15803d; }
  .tl-dot.tl-sharp { background:#b45309; }
  .tl-dot.tl-flat { background:#1d4ed8; }
  .tl-dot.tl-missed { background:#9ca3af; }
  .tl-legend-timing { font-style:italic; }
  .tl-extra { margin-top:6px; font-size:11px; color:var(--ink-soft); }

  /* Daily practice goal widget (top of Progress tab) */
  .goals-widget {
    padding:14px 16px; margin-bottom:16px;
    border:1px solid var(--hairline); border-radius:12px;
    background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .goal-head {
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; font-weight:600; color:var(--ink); margin-bottom:10px;
  }
  .goal-streak { font-size:13px; }
  .goal-row { display:flex; gap:8px; margin-bottom:10px; }
  .goal-select, .goal-target {
    font-size:12px; padding:7px 8px; border:1px solid var(--hairline);
    border-radius:8px; background:transparent; color:var(--ink);
  }
  .goal-select { flex:1; }
  .goal-target { width:64px; text-align:center; }
  .goal-bar-track { height:8px; border-radius:999px; background:#f0f0f0; overflow:hidden; margin-bottom:8px; }
  .goal-bar-fill { height:100%; background:#8b5cf6; transition:width .4s ease; }
  .goal-bar-fill.met { background:#16a34a; }
  .goal-status { font-size:11px; color:var(--ink-soft); }
  .goal-status.met { color:#16a34a; font-weight:600; }
  .goal-recovered {
    margin-top:8px; padding:8px 10px; border-radius:8px;
    background:#fefce8; border:1px solid #fbbf24; font-size:11px; color:#92400e;
  }

  /* Practice journal */
  .journal-section { margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline); }
  .journal-head {
    font-size:10px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ink-soft); margin-bottom:10px;
  }
  .journal-form { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .journal-textarea {
    width:100%; min-height:56px; padding:9px 12px; resize:vertical;
    border:1px solid var(--hairline); border-radius:10px;
    background:transparent; color:var(--ink); font-size:12px; font-family:inherit;
  }
  .journal-textarea:focus { border-color:var(--ink); outline:none; }
  .journal-save {
    align-self:flex-end; padding:7px 18px; border:none; border-radius:999px;
    background:var(--ink); color:#fff; font-size:11px; font-weight:600; cursor:pointer;
  }
  .journal-save:hover { opacity:.85; }
  .journal-entry {
    padding:10px 12px; border:1px solid var(--hairline); border-radius:10px;
    margin-bottom:8px; background:#fafafa;
  }
  .journal-entry-head { display:flex; justify-content:space-between; font-size:10px; color:var(--ink-soft); margin-bottom:4px; }
  .journal-entry-text { font-size:12px; color:var(--ink); line-height:1.45; }
  .journal-empty { font-size:12px; color:var(--ink-soft); }

  /* Inline quick-note form embedded in the Coach Feedback panel */
  .journal-quick-row { display:flex; gap:8px; }
  .journal-quick-input {
    flex:1; padding:8px 10px; border:1px solid var(--hairline); border-radius:8px;
    background:transparent; color:var(--ink); font-size:12px;
  }
  .journal-quick-save {
    padding:8px 14px; border:none; border-radius:8px;
    background:var(--ink); color:#fff; font-size:11px; font-weight:600; cursor:pointer;
  }
  .journal-quick-done { font-size:12px; color:#16a34a; font-weight:600; margin-top:4px; }

  @media (max-width: 640px) {
    .progress-stats { grid-template-columns:repeat(3, 1fr); }
    .tl-chip { min-width:26px; }
  }