:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --bg: #f5f5f2;
  --sidebar: rgba(248,248,245,.86);
  --toolbar: rgba(250,250,247,.82);
  --panel: rgba(255,255,255,.92);
  --panel-solid: #fff;
  --text: #171916;
  --muted: #6f746e;
  --hairline: rgba(18,24,20,.09);
  --accent: #1f614e;
  --accent-strong: #15513f;
  --accent-soft: rgba(31,97,78,.11);
  --note: #b77530;
  --danger: #cf3e3e;
  --control: rgba(117,117,112,.09);
  --shadow: 0 12px 34px rgba(20,28,23,.065);
  --lyric-size: 26px;
  --lyric-line: 1.48;
  --chord-size: 15px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111512;
  --sidebar: rgba(18,23,20,.88);
  --toolbar: rgba(17,22,19,.84);
  --panel: rgba(27,33,29,.94);
  --panel-solid: #1b211d;
  --text: #f1f4f1;
  --muted: #a5aea7;
  --hairline: rgba(241,247,242,.10);
  --accent: #75c3a7;
  --accent-strong: #8ed5ba;
  --accent-soft: rgba(117,195,167,.14);
  --note: #efb66e;
  --danger: #ff7a7a;
  --control: rgba(255,255,255,.075);
  --shadow: 0 14px 40px rgba(0,0,0,.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111512;
    --sidebar: rgba(18,23,20,.88);
    --toolbar: rgba(17,22,19,.84);
    --panel: rgba(27,33,29,.94);
    --panel-solid: #1b211d;
    --text: #f1f4f1;
    --muted: #a5aea7;
    --hairline: rgba(241,247,242,.10);
    --accent: #75c3a7;
    --accent-strong: #8ed5ba;
    --accent-soft: rgba(117,195,167,.14);
    --note: #efb66e;
    --danger: #ff7a7a;
    --control: rgba(255,255,255,.075);
    --shadow: 0 14px 40px rgba(0,0,0,.24);
  }
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body {
  min-height:100vh;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .22s ease, color .22s ease;
}
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }

.shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:26px 16px; border-right:1px solid var(--hairline); background:var(--sidebar); backdrop-filter:blur(28px); }
.brand { font-weight:760; letter-spacing:-.035em; font-size:20px; margin:0 8px 28px; }
.brand small { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.10em; }
.nav-item { display:flex; gap:10px; align-items:center; padding:12px 13px; border-radius:13px; color:var(--muted); margin:4px 0; font-weight:650; }
.nav-item.active { background:var(--panel); color:var(--accent-strong); box-shadow:0 1px 8px rgba(0,0,0,.045); }
.sidebar-note { position:absolute; left:22px; right:22px; bottom:22px; color:var(--muted); font-size:12px; line-height:1.5; }

.main { min-width:0; }
.toolbar { position:sticky; top:0; z-index:10; min-height:78px; padding:14px 28px; display:flex; align-items:center; gap:14px; justify-content:space-between; border-bottom:1px solid var(--hairline); background:var(--toolbar); backdrop-filter:blur(30px); }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:10px; }
.toolbar-right { flex-wrap:wrap; justify-content:flex-end; }
.song-title { width:min(530px,45vw); border:0; background:transparent; font-size:26px; font-weight:760; letter-spacing:-.035em; outline:none; }
.pill, select, .ghost, .primary { border:1px solid var(--hairline); border-radius:12px; padding:9px 11px; background:var(--panel); }
.primary { background:var(--accent-strong); color:white; border-color:transparent; font-weight:700; }
.segmented { background:var(--control); padding:3px; border-radius:12px; display:flex; gap:1px; }
.segmented button { min-height:32px; border:0; background:transparent; color:var(--muted); padding:6px 10px; border-radius:9px; font-size:13px; font-weight:700; }
.segmented button.active { background:var(--panel-solid); color:var(--text); box-shadow:0 1px 5px rgba(0,0,0,.10); }
.appearance-control button { min-width:35px; }
.appearance-control button:last-child { min-width:50px; font-size:11px; letter-spacing:.01em; }

.content { max-width:1020px; margin:0 auto; padding:38px 32px 120px; }
.section-topline { display:flex; justify-content:space-between; align-items:end; margin-bottom:12px; }
.eyebrow { color:var(--accent); text-transform:uppercase; font-size:11px; font-weight:780; letter-spacing:.13em; }
.structure { display:flex; gap:8px; flex-wrap:wrap; margin:11px 0 26px; }
.structure-chip { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--hairline); font-size:13px; }
.structure-chip.modulated { box-shadow:inset 0 0 0 1px var(--accent); }

.card { background:var(--panel); border:1px solid var(--hairline); border-radius:22px; box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.card-head { padding:17px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); }
.card-title { font-weight:760; font-size:17px; display:flex; align-items:center; gap:9px; }
.card-title .badge { font-size:11px; color:var(--accent-strong); background:var(--accent-soft); border-radius:999px; padding:4px 7px; }
.card-actions { display:flex; gap:7px; align-items:center; }
.card-actions button, .card-actions select { border:0; background:var(--control); border-radius:10px; padding:8px 9px; font-size:12px; }
.card-body { padding:24px; }
.section-note { width:100%; border:0; border-radius:12px; background:var(--control); padding:11px 12px; color:var(--muted); margin-bottom:20px; outline:none; }
.transition-note { margin-top:22px; border-top:1px dashed var(--hairline); padding-top:13px; }
.transition-note input { width:100%; border:0; outline:0; color:var(--muted); background:transparent; }

.line-block { margin:10px 0 24px; }
.music-line { position:relative; min-height:76px; padding-top:31px; overflow-x:auto; overflow-y:visible; scrollbar-width:none; }
.music-line::-webkit-scrollbar { display:none; }
.chord-layer { position:absolute; inset:0; pointer-events:none; min-width:100%; }
.lyric-layer { min-width:max-content; white-space:pre; }
.lyric-text {
  font-size:var(--lyric-size);
  line-height:var(--lyric-line);
  letter-spacing:-.018em;
  font-weight:440;
  white-space:pre;
  /* Critical: one shaped text run. Do not split every character into inline boxes. */
}
.edit-mode .lyric-text { cursor:text; }
.edit-mode .lyric-text:hover { text-decoration:underline; text-decoration-color:var(--accent-soft); text-decoration-thickness:6px; text-underline-offset:5px; }
.chord-label { position:absolute; font-size:var(--chord-size); line-height:1; font-weight:780; color:var(--accent-strong); white-space:nowrap; letter-spacing:-.01em; pointer-events:none; }
.lyric-editor { width:100%; resize:none; border:1px solid var(--hairline); border-radius:12px; padding:10px 12px; background:var(--control); color:var(--text); outline:none; margin-top:8px; font-size:15px; line-height:1.4; }
.lyric-editor:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:0 0 0 3px var(--accent-soft); }
.empty-line { color:var(--muted); font-style:italic; font-size:17px; }

.footer-actions { display:flex; gap:10px; justify-content:center; padding-top:8px; }
.footer-actions button { padding:11px 14px; border-radius:13px; border:1px solid var(--hairline); background:var(--panel); font-weight:680; }
.popover { position:fixed; z-index:100; width:280px; padding:13px; border-radius:18px; background:var(--panel-solid); border:1px solid var(--hairline); box-shadow:0 24px 70px rgba(0,0,0,.22); }
.hidden { display:none !important; }
.popover-title { font-weight:760; font-size:13px; margin-bottom:9px; }
.chord-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.chord-grid button { border:0; background:var(--control); border-radius:10px; padding:9px 6px; font-weight:720; }
.chord-grid button:hover { background:var(--accent-soft); color:var(--accent-strong); }
.custom-row { display:flex; gap:6px; margin-top:9px; }
.custom-row input { flex:1; min-width:0; border:1px solid var(--hairline); background:var(--control); border-radius:10px; padding:8px 9px; outline:none; }
.custom-row button { border:0; border-radius:10px; padding:8px 10px; background:var(--accent-strong); color:white; }
.remove-chord { width:100%; margin-top:8px; border:0; background:transparent; color:var(--danger); padding:7px; }

.practice-banner { margin:0 0 20px; padding:12px 14px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent-strong); border-radius:14px; font-size:13px; }
.practice-mode .lyric-editor, .practice-mode .card-actions, .practice-mode .section-note, .practice-mode .transition-note { display:none; }
.practice-mode .music-line { min-height:85px; padding-top:34px; }
.practice-mode .lyric-text { font-size:30px; line-height:1.5; font-weight:450; letter-spacing:-.022em; }
.practice-mode .chord-label { font-size:16px; }

@media (max-width: 800px) {
  :root { --lyric-size:24px; --chord-size:14px; }
  .shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .toolbar { padding:11px 14px; align-items:flex-start; flex-wrap:wrap; }
  .toolbar-left { width:100%; }
  .song-title { width:100%; font-size:23px; }
  .toolbar-right { width:100%; justify-content:space-between; }
  .appearance-control { margin-left:auto; }
  .content { padding:24px 14px 96px; }
  .card { border-radius:19px; }
  .card-head { align-items:flex-start; gap:12px; }
  .card-actions { flex-wrap:wrap; justify-content:flex-end; }
  .card-body { padding:20px; }
  .practice-mode .lyric-text { font-size:27px; }
}

@media (max-width: 480px) {
  :root { --lyric-size:22px; }
  .toolbar-right { gap:7px; }
  .pill { padding:8px; }
  .appearance-control button:last-child { display:none; }
  .content { padding-left:11px; padding-right:11px; }
  .card-body { padding:18px 16px; }
  .practice-mode .lyric-text { font-size:25px; }
}