/* Fretboard v4 — app shell: dark sidebar, glass top bar, colour tiles. */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2")}
:root{
  --ebony:#17100D;--amber:#FF9F1C;--amber-hi:#FFB347;
  --bg:#F7F6FB;--surface:#FFFFFF;--surface-2:#F0EEF6;--fg:#1B1620;--fg-2:#453D4F;--muted:#6C6478;--line:#E6E2EE;--line-strong:#D2CCDF;
  --link:#8F3F00;--chord:#A34A00;--danger:#B3261E;--accent:var(--amber);--on-accent:#2A1300;
  --glass:rgba(255,255,255,.66);--glass-strong:rgba(255,255,255,.84);--glass-line:rgba(255,255,255,.75);--glass-edge:rgba(40,25,70,.10);--blur:blur(18px) saturate(160%);
  --r-s:8px;--r-m:12px;--r-l:18px;--side:260px;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--font:"Instrument Sans","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sheet-fs:16px;--bar:64px;
}
:root[data-theme=dark]{
  --bg:#0F0B14;--surface:#1A1422;--surface-2:#241B2F;--fg:#F4EFF8;--fg-2:#D8CFE2;--muted:#A99EB8;--line:#30263C;--line-strong:#463858;
  --link:#FFB347;--chord:#FFB347;--danger:#FF8A80;
  --glass:rgba(30,22,40,.58);--glass-strong:rgba(30,22,40,.82);--glass-line:rgba(255,255,255,.09);--glass-edge:rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;color:var(--fg);font:400 15px/1.6 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 560px at 92% -8%,rgba(255,159,28,.20),transparent 62%),
    radial-gradient(800px 560px at 30% -10%,rgba(139,92,246,.16),transparent 62%),
    radial-gradient(900px 640px at 70% 112%,rgba(20,184,166,.14),transparent 62%),
    radial-gradient(520px 420px at 22% 96%,rgba(244,63,94,.10),transparent 62%),var(--bg);background-attachment:fixed}
:root[data-theme=dark] body{background:
    radial-gradient(900px 560px at 92% -8%,rgba(255,159,28,.18),transparent 62%),
    radial-gradient(800px 560px at 30% -10%,rgba(139,92,246,.26),transparent 62%),
    radial-gradient(900px 640px at 70% 112%,rgba(20,184,166,.16),transparent 62%),
    radial-gradient(520px 420px at 22% 96%,rgba(244,63,94,.14),transparent 62%),var(--bg);background-attachment:fixed}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--on-accent);padding:8px 16px;z-index:99;font-weight:600}.skip:focus{left:16px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- sidebar (always dark) ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:40;color:#E9E2F0;
  background:radial-gradient(420px 300px at 0% 0%,rgba(139,92,246,.30),transparent 70%),radial-gradient(380px 300px at 100% 100%,rgba(255,159,28,.20),transparent 70%),linear-gradient(180deg,#1C1320,#120C10);
  border-right:1px solid rgba(255,255,255,.07)}
.side-in{height:100%;display:flex;flex-direction:column;padding:20px 14px 14px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font:700 23px/1 var(--display);letter-spacing:-.01em;color:#fff;text-decoration:none;padding:2px 8px 18px}
.brand-mark{width:36px;height:36px;flex:none;display:block}
.brand-sm{display:none;padding:0}
.side-x{display:none}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sg{font:600 12px/16px var(--font);color:#8E82A0;padding:16px 12px 6px;letter-spacing:.02em}
.sl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#D9D0E4;text-decoration:none;font-weight:500;font-size:14.5px;position:relative;transition:background .12s,color .12s}
.sl:hover{background:rgba(255,255,255,.08);color:#fff}
.sl.on{background:linear-gradient(90deg,rgba(255,159,28,.24),rgba(244,63,94,.12));color:#fff}
.sl.on:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#FFB347,#F43F5E)}
.sl.on .ic{color:#FFB347}
.sl .favn,.sl .pill{margin-left:auto}
.favn{background:linear-gradient(135deg,#F43F5E,#FF8A1C);color:#fff;font:700 11px/18px var(--font);min-width:20px;height:18px;padding:0 6px;border-radius:999px;text-align:center}
.favn[hidden]{display:none}
.pill{display:inline-block;background:var(--amber);color:var(--on-accent);font:700 11px/18px var(--font);padding:0 8px;border-radius:999px;vertical-align:middle}
.side-foot{display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);margin-top:10px}
.me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px;border-radius:12px;color:#fff;text-decoration:none}
.me:hover{background:rgba(255,255,255,.08)}
.me-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}.me-t b{font:600 14px/1.25 var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-t small{color:#A99EB8;font-size:12px}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:linear-gradient(135deg,#8B5CF6,#F43F5E 60%,#FF9F1C);color:#fff;font:700 15px/1 var(--display)}
.guest{display:flex;flex-direction:column;gap:8px;width:100%}.guest .btn{width:100%}
.side .iconbtn{color:#D9D0E4}
.scrim{display:none}

/* ---------- column + top bar ---------- */
.col{margin-left:var(--side);min-height:100vh;display:flex;flex-direction:column}
.col>main{flex:1;width:100%}
.bar{position:sticky;top:0;z-index:30;background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-edge)}
.bar-in{display:flex;align-items:center;gap:12px;height:var(--bar);padding:0 28px;max-width:1176px;margin:0 auto}
.search{position:relative;flex:1;max-width:520px;display:flex;align-items:center}
.search .ic{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.search input{width:100%;padding:10px 16px 10px 42px;border-radius:999px;background:var(--surface-2);border:1px solid transparent;min-height:42px}
.search input:focus{background:var(--surface);border-color:var(--amber)}
.bar-in .search{margin-right:auto}
.iconbtn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:12px;border:0;background:transparent;color:var(--fg-2);cursor:pointer;text-decoration:none;transition:background .12s}
.iconbtn:hover{background:rgba(127,100,170,.14)}
.t-moon{display:none}.t-sun{display:inline-grid}
:root:not([data-theme=dark]) .t-moon{display:inline-grid}:root:not([data-theme=dark]) .t-sun{display:none}
.barfav{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:12px;color:#F43F5E;text-decoration:none}.barfav:hover{background:rgba(244,63,94,.12)}
.barfav .ic{fill:currentColor}
.loginlink{font-weight:600;font-size:14px;color:var(--fg-2);text-decoration:none;padding:8px 14px;border-radius:12px}.loginlink:hover{background:rgba(127,100,170,.14)}
.navtoggle{display:none}

/* ---------- controls ---------- */
input,select,textarea{font:inherit;color:var(--fg);background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-s);padding:8px 12px;min-height:40px}
input:focus,select:focus,textarea:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(255,159,28,.28)}
textarea{width:100%}
select{padding-right:32px}
.btn{font:600 14px/20px var(--font);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--glass-strong);color:var(--fg);cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,transform .06s,filter .12s}
.btn:hover{border-color:var(--muted);background:var(--surface)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,#FFB347,#FF8A1C 55%,#FF6B4A);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 16px -6px rgba(255,120,30,.6)}
.btn-primary:hover{filter:brightness(1.07);background:linear-gradient(135deg,#FFB347,#FF8A1C 55%,#FF6B4A);border-color:transparent}
.btn-ghost{border-color:transparent;background:transparent}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-lg{min-height:48px;padding:12px 24px;font-size:15px;border-radius:var(--r-m)}
.btn-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.btn-light:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
input[type=range]{accent-color:var(--amber);min-height:0;padding:0;border:0;background:none}

/* ---------- type & layout ---------- */
main.wrap{padding-top:32px;padding-bottom:64px}
h1{font:700 clamp(28px,4vw,38px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 10px}
h2{font:650 20px/1.25 var(--display);letter-spacing:-.01em;margin:0 0 12px}
h3{font:650 16px/1.3 var(--display)}
p{margin:0 0 12px}
.section{margin:44px 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-head h2{margin:0}.section-head a{font-weight:600;font-size:14px}
.section-head h2:before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:10px;background:linear-gradient(135deg,#FFB347,#F43F5E);transform:translateY(-1px)}
.page-title{margin-bottom:18px}
.card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r-l);padding:24px;margin-bottom:16px;box-shadow:0 10px 30px -14px var(--glass-edge)}
.card.narrow{max-width:440px;margin:40px auto}
.empty-card{text-align:center;max-width:520px;margin:32px auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form{display:grid;gap:16px}.form label{display:grid;gap:6px;font-weight:600;font-size:14px}.form.wide{max-width:900px}
.inline{display:inline-flex;gap:8px;align-items:center}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.plain{padding-left:24px}.plain li{margin:4px 0}
.ticks{list-style:none;padding:0}.ticks li:before{content:"✓ ";font-weight:700;color:var(--chord)}
.flash{padding:12px 16px;border-radius:var(--r-m);margin-top:16px;border:1px solid var(--line);background:var(--surface-2)}.flash-err{border-color:var(--danger)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th,.tbl td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl th{font-weight:600;color:var(--muted)}
.mono{font-family:var(--mono);font-size:13px;line-height:20px}
.empty{color:var(--muted);padding:40px 0}
.foot{background:rgba(23,16,13,.92);color:#A99EB8;padding:28px 0;font-size:13px}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:#D9D0E4}.foot-brand{display:flex;align-items:center;gap:10px;color:#D9D0E4;font:600 15px/1 var(--display)}.foot-brand svg{width:24px;height:24px}

/* filters, chips, tags */
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 8px;scrollbar-width:thin}
.chiprow .chip{flex:none}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;font-size:14px;color:var(--muted)}
.chip{padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;color:var(--fg);text-decoration:none;font-weight:500;font-size:14px;background:var(--glass-strong);white-space:nowrap}
.chip:hover{border-color:var(--muted)}.chip.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.cnt{font-weight:400;color:var(--muted);margin-left:4px}.chip.on .cnt{color:inherit;opacity:.75}
.chip-hue{--h:30;border-color:hsl(var(--h) 70% 50% / .32);background:hsl(var(--h) 90% 60% / .09)}
.chip-hue:hover{background:hsl(var(--h) 90% 60% / .2);border-color:hsl(var(--h) 70% 50% / .6)}
.chip-hue.on{background:linear-gradient(135deg,hsl(var(--h) 85% 55%),hsl(calc(var(--h) + 28) 85% 52%));border-color:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tag{font:500 12px/18px var(--font);padding:1px 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--fg-2);white-space:nowrap}
.tag-hue{--h:30;background:hsl(var(--h) 85% 55% / .15);border-color:hsl(var(--h) 75% 50% / .35);color:hsl(var(--h) 70% 26%);font-weight:600}
:root[data-theme=dark] .tag-hue{background:hsl(var(--h) 80% 60% / .16);border-color:hsl(var(--h) 80% 65% / .4);color:hsl(var(--h) 90% 82%)}
a.tag-hue{text-decoration:none}a.tag-hue:hover{background:hsl(var(--h) 85% 55% / .28)}
.tag-tab{background:linear-gradient(135deg,#6D28D9,#C026D3);border-color:transparent;color:#fff}
.tag-chords{background:rgba(20,184,166,.14);border-color:rgba(20,184,166,.4);color:#0F6B60}:root[data-theme=dark] .tag-chords{color:#7FE7D8}
.tag-need{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:600}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px;margin-bottom:14px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r-l)}
.filterbar label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.filterbar select,.filterbar input[type=search]{min-height:40px}
.filterbar .grow{flex:1;min-width:180px}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border-radius:12px;border:1px solid var(--line-strong);background:var(--glass-strong);color:var(--fg);text-decoration:none;font-weight:600;font-size:14px}
.pager a:hover{border-color:var(--muted)}.pager .cur{background:var(--fg);color:var(--bg);border-color:var(--fg)}.pager .gap{border:0;background:none;min-width:0}

/* ---------- song lists: colour tile, title, tags, heart ---------- */
.songlist{list-style:none;margin:0;padding:0;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r-l);overflow:hidden;box-shadow:0 10px 30px -14px var(--glass-edge)}
.songlist>li{display:flex;align-items:center;gap:4px;padding-right:12px;position:relative;transition:background .12s}
.songlist>li+li{border-top:1px solid var(--glass-edge)}
.songlist>li:hover{background:linear-gradient(90deg,rgba(255,159,28,.10),rgba(244,63,94,.05) 55%,transparent)}
.songrow{flex:1;min-width:0;display:grid;grid-template-columns:48px minmax(0,2fr) minmax(0,1.3fr) minmax(0,auto);gap:16px;align-items:center;padding:12px 8px 12px 16px;text-decoration:none;color:var(--fg)}
.art{width:48px;height:48px;border-radius:14px;display:inline-grid;place-items:center;flex:none;color:#fff;font:700 20px/1 var(--display);background:linear-gradient(135deg,hsl(var(--h,30) 80% 56%),hsl(calc(var(--h,30) + 38) 75% 42%));box-shadow:0 6px 14px -6px hsl(var(--h,30) 80% 40% / .7),inset 0 1px 0 rgba(255,255,255,.35)}
.rt{display:flex;flex-direction:column;min-width:0}.st{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sa{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
li.catrow{display:grid;grid-template-columns:48px minmax(0,2fr) minmax(0,.9fr) auto 44px;gap:16px;align-items:center;padding:12px 12px 12px 16px}
.cr-main{display:flex;flex-direction:column;min-width:0}
.cr-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cr-links .btn{min-height:34px;padding:4px 12px;font-size:13px}
.cr-links .btn:first-child{background:hsl(30 100% 60% / .16);border-color:hsl(30 90% 50% / .4)}
.heart{width:42px;height:42px;display:inline-grid;place-items:center;flex:none;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;padding:0;transition:color .15s,background .15s,border-color .15s}
.heart svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.heart:hover{background:rgba(244,63,94,.12);color:#F43F5E}
.heart[aria-pressed=true]{color:#F43F5E;background:rgba(244,63,94,.12)}
.heart[aria-pressed=true] svg{fill:currentColor}
.heart.pop svg{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.song-actions .heart{border-color:var(--line-strong);background:var(--glass-strong);width:46px;height:46px}

/* ---------- home ---------- */
.hero{background:
  radial-gradient(640px 380px at 80% 30%,rgba(255,159,28,.34),transparent 65%),
  radial-gradient(560px 420px at 98% 95%,rgba(244,63,94,.26),transparent 65%),
  radial-gradient(620px 420px at 6% 0%,rgba(139,92,246,.34),transparent 65%),#17100D;
  color:#F4EFE7;padding:44px 0 52px;position:relative;margin-bottom:0}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#8B5CF6,#F43F5E,#FF9F1C,#14B8A6)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.03;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
.hero p{color:#CFC5D8;font-size:17px;line-height:1.55;max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 16px}
.hero-note{font-size:13px;color:#A99EB8;margin:0}
.neck-wrap{background:linear-gradient(160deg,rgba(60,40,50,.78),rgba(28,18,22,.72));border:1px solid rgba(255,255,255,.12);border-radius:var(--r-l);padding:16px 16px 12px;box-shadow:0 24px 48px -24px rgba(0,0,0,.7);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.neck-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;min-height:44px}
.neck-name{font:700 36px/1 var(--display);letter-spacing:-.02em;color:#fff}
.neck-go{font-size:14px;font-weight:600;color:var(--amber);text-decoration:none}.neck-go:hover{text-decoration:underline}
.neck svg{display:block;width:100%;height:auto}
.neck .dot{transition:transform .38s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.neck-pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.neck-pick button{font:600 14px/1 var(--font);min-width:44px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#E8DFD2;cursor:pointer}
.neck-pick button:hover{border-color:rgba(255,255,255,.4)}
.neck-pick button[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.action{display:flex;flex-direction:column;gap:6px;padding:20px;text-decoration:none;color:var(--fg);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r-l);box-shadow:0 10px 30px -14px var(--glass-edge);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.action:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px var(--glass-edge)}
.action:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c1)}
.action:nth-child(1){--c1:linear-gradient(180deg,#FFB347,#F43F5E)}.action:nth-child(2){--c1:linear-gradient(180deg,#8B5CF6,#EC4899)}.action:nth-child(3){--c1:linear-gradient(180deg,#14B8A6,#3B82F6)}
.action b{font:650 18px/1.3 var(--display)}.action span{color:var(--muted);font-size:14px;line-height:1.5}
.has-hero main.wrap{padding-top:36px}

@media (max-width:1100px){.songrow{grid-template-columns:48px minmax(0,2fr) minmax(0,auto)}.songrow .sm .tag:not(:first-child){display:none}li.catrow{grid-template-columns:48px minmax(0,1.6fr) auto 44px}li.catrow>.sm{display:none}}
/* ---------- song page ---------- */
.song-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.by{margin:0 0 8px;color:var(--muted);font-size:18px}.meta{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.song-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:12px 28px;flex-wrap:wrap;padding:10px 16px;margin:20px 0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);position:sticky;top:calc(var(--hdr) + 9px);z-index:10;box-shadow:var(--shadow)}
.tool{display:flex;align-items:center;gap:6px}.tl{font:600 13px/16px var(--font);color:var(--muted);margin-right:4px}
.tool.locked{opacity:.75}
.upsell{padding:12px 16px;border:1px solid var(--amber);border-radius:var(--r-m);margin-bottom:16px;background:var(--surface)}
.chordstrip{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.cd{margin:0;text-align:center;font:650 14px/16px var(--display)}.cd svg{display:block}
.cd figcaption{margin-bottom:2px}
.sheet{font-family:var(--mono);font-size:var(--sheet-fs);line-height:1.4;margin:32px 0;max-width:100%}
.cs-sec{margin:0 0 32px}
.cs-label{font:650 14px/20px var(--display);color:var(--muted);margin-bottom:4px}
.cs-chorus{border-left:3px solid var(--amber);padding-left:16px}
.cs-comment{font:600 14px/20px var(--font);color:var(--fg-2);background:var(--surface-2);padding:6px 12px;border-radius:var(--r-s);margin:0 0 16px}
.cs-line{display:flex;flex-wrap:wrap;align-items:flex-end;min-height:2.7em}
.seg{display:inline-flex;flex-direction:column}
.seg .ch{min-height:1.4em;white-space:pre;padding-right:.5ch}
.seg .ly{white-space:pre}
.chord{color:var(--chord);font-weight:700;cursor:pointer;border-radius:3px}.chord:hover,.chord:focus-visible{background:var(--amber);color:var(--on-accent)}
.cs-pre{margin:0;font-family:var(--mono);overflow:auto}
#chordTip{position:fixed;z-index:50;background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r-m);box-shadow:0 12px 32px -8px rgba(23,16,13,.35);padding:8px;display:none;text-align:center;font:650 14px/16px var(--display);pointer-events:none}
.tabwrap{margin:16px 0;border:1px solid var(--line);border-radius:var(--r-m);padding:16px;background:#fff;color:#000;overflow:auto}
.tabbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px;font-size:14px;font-weight:600}
.rights-note{font-size:13px;color:var(--muted)}
body.stage .side,body.stage .bar,body.stage .tabbar-m,body.stage .foot,body.stage .song-head,body.stage .chordstrip,body.stage .rights-note{display:none}
body.stage{background:#000;color:#fff}body.stage .toolbar{top:0}
body.stage .sheet{font-size:calc(var(--sheet-fs) * 1.35)}
body.stage .chord{color:var(--amber)}



/* chord library & finder */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px;margin-bottom:32px}
.libcell{border:1px solid var(--glass-line);border-radius:var(--r-m);padding:12px;text-align:center;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.libcell h3{font:650 15px/1.2 var(--display);margin:0 0 6px}.libcell .cd{display:flex;flex-direction:column;align-items:center}.libcell .cd figcaption{display:none}
.libcell svg{display:block;margin:0 auto}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px}
.pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-strong);color:var(--fg);cursor:pointer;font:inherit;transition:border-color .12s,background .12s}
.pick:hover{border-color:var(--muted)}
.pick[aria-pressed=true]{background:linear-gradient(135deg,#FFB347,#FF8A1C);border-color:transparent;color:var(--on-accent)}
.pk-name{font:700 16px/22px var(--display)}.pk-n{font:400 12px/16px var(--font);color:var(--muted)}.pick[aria-pressed=true] .pk-n{color:var(--on-accent)}
.pk-dia svg{display:block;width:48px;height:auto}
.chordstrip,.toolbar,.upsell{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-line)}
.toolbar{top:calc(var(--bar) + 8px)}
@media (max-width:900px){
  :root{--side:290px}
  .side{transform:translateX(-102%);transition:transform .22s ease;box-shadow:24px 0 60px -10px rgba(0,0,0,.6)}
  body.drawer .side{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(10,6,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:35;opacity:0;visibility:hidden;transition:opacity .2s}
  body.drawer .scrim{opacity:1;visibility:visible}
  .side-x{display:grid;position:absolute;top:14px;right:12px;width:38px;height:38px;place-items:center;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
  .col{margin-left:0;padding-bottom:70px}
  .navtoggle{display:inline-grid}.brand-sm{display:flex}
  .bar-in{padding:0 14px;gap:8px}
  .wrap{padding:0 18px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .paths{grid-template-columns:1fr}
  body .tabbar-m{display:flex}
}
.tabbar-m{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:1px solid var(--glass-edge);justify-content:space-around}
.tabbar-m a,.tabbar-m button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:0;background:none;color:var(--muted);font:600 11px/14px var(--font);text-decoration:none;cursor:pointer;border-radius:12px}
.tabbar-m .on{color:var(--fg)}.tabbar-m .on .ic{color:#F43F5E}
@media (max-width:720px){
  .songrow{grid-template-columns:48px minmax(0,1fr);gap:12px}.songrow .sm{display:none}
  li.catrow{grid-template-columns:48px minmax(0,1fr) 44px;gap:10px 12px}li.catrow>.cr-links{grid-column:1/-1;justify-content:flex-start}
  .grid2,.grid3{grid-template-columns:1fr}.toolbar{position:static}
  .hero{padding:28px 0 36px}.neck-name{font-size:30px}
  main.wrap{padding-top:24px}
  .filterbar label{width:100%}.filterbar select{flex:1}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.songlist,.action,.filterbar,.bar,.tabbar-m,.chordstrip,.toolbar,.libcell{background:var(--surface)}}

/* AI transcriber */
.tr-form{display:grid;gap:16px;max-width:620px}
.tr-form .fld{display:grid;gap:6px;font-weight:600}
.tr-form input[type=text],.tr-form input[type=file]{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:inherit;font:inherit}
.tr-form button[disabled]{opacity:.5;cursor:not-allowed}
.tr-err{border-color:#FF6B4A;margin-bottom:16px;max-width:620px}
.tr-wait{max-width:520px;text-align:center;padding:36px 24px}
.tr-spin{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;border:4px solid rgba(255,138,28,.25);border-top-color:#FF8A1C;animation:trspin 1s linear infinite}
@keyframes trspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tr-spin{animation:none}}
.tr-del{margin-left:auto;padding-left:8px}

/* ===== v5: content-first top navigation (desktop) ===== */
@media (min-width:901px){.side,.scrim{display:none}.col{margin-left:0}}
.wrap{max-width:1240px}
.bar.tn{background:linear-gradient(180deg,#1E1422,#150E12);border-bottom:1px solid rgba(255,255,255,.07);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.bar.tn:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,159,28,.55) 30%,rgba(244,63,94,.45) 70%,transparent);opacity:.8}
.tn-in{display:flex;align-items:center;gap:6px;height:var(--bar);padding:0 28px;max-width:1304px;margin:0 auto}
.tn-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 21px/1 var(--display);letter-spacing:-.01em;margin-right:14px;flex:none}
.tn-brand .brand-mark{width:32px;height:32px}
.tn-nav{display:flex;align-items:center;gap:2px}
.tn-l{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;color:#CFC5DA;font:600 14.5px/1 var(--font);text-decoration:none;cursor:pointer;list-style:none;white-space:nowrap;transition:color .12s,background .12s}
.tn-l::-webkit-details-marker{display:none}
.tn-l:hover,.dd[open]>.tn-l{color:#fff;background:rgba(255,255,255,.07)}
.tn-l.on{color:#fff}
.tn-l.on:after{content:"";position:absolute;left:50%;bottom:-11px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(255,159,28,.22),0 0 14px 2px rgba(255,159,28,.55)}
.tn-l .pill{margin-left:2px}
.caret{width:14px;height:14px;transition:transform .15s}.dd[open] .caret{transform:rotate(180deg)}
.bar.tn .search{flex:1;max-width:380px;margin:0 8px 0 auto}
.bar.tn .search input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff;min-height:40px;padding-top:8px;padding-bottom:8px}
.bar.tn .search input::placeholder{color:#A99EB8}
.bar.tn .search .ic{color:#A99EB8}
.bar.tn .search input:focus{background:rgba(255,255,255,.14);border-color:var(--amber)}
.tn-r{display:flex;align-items:center;gap:6px;flex:none}
.bar.tn .iconbtn,.bar.tn .loginlink{color:#D9D0E4}
.bar.tn .iconbtn:hover,.bar.tn .loginlink:hover{background:rgba(255,255,255,.09);color:#fff}
.btn-sm{padding:8px 16px;min-height:38px;font-size:14px}
.barfav{position:relative}
.barfav .favn{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#F43F5E;color:#fff;font:700 10.5px/17px var(--font);text-align:center}
.barfav .favn[hidden]{display:none}
.avatar-btn{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.avatar-btn::-webkit-details-marker{display:none}
.avatar-btn:hover .avatar,.dd[open] .avatar{box-shadow:0 0 0 3px rgba(255,159,28,.5)}
details.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:270px;padding:8px;border-radius:16px;background:#1D1424;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px -12px rgba(0,0,0,.65);z-index:60;animation:ddin .14s ease-out}
.dd-r .dd-menu{left:auto;right:0;min-width:230px}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}}
.dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#E9E2F0;text-decoration:none}
.dd-menu a:hover{background:rgba(255,255,255,.08)}
.dd-menu a .ic{color:var(--amber-hi)}
.dd-menu a span{display:flex;flex-direction:column;line-height:1.3}
.dd-menu a b{font:600 14.5px/1.3 var(--font)}.dd-menu a small{color:#A99EB8;font-size:12.5px}
.dd-menu .pill{margin-left:auto}
.dd-head{padding:8px 12px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;display:flex;flex-direction:column}
.dd-head b{color:#fff;font:600 15px/1.3 var(--font)}.dd-head small{color:#A99EB8;font-size:12.5px}
@media (max-width:1060px){.tn-l{padding:9px 9px}.bar.tn .search{max-width:230px}.tn-brand span{display:none}}
@media (max-width:900px){
  .tn-nav,.tn-r .themebtn,.bar.tn .search{display:none}
  .tn-in{padding:0 12px;gap:8px}.tn-brand{margin-right:auto}.tn-brand span{display:inline}
  .tn-r{gap:4px}.tn-r .loginlink{display:none}
  .bar.tn .navtoggle{color:#fff}
}
/* in-site directory page + video + landing */
.crumbs{font-size:14px;color:var(--muted);margin:0 0 14px}.crumbs a{color:var(--muted)}
.entry{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.entry-head{display:flex;gap:20px;align-items:center;margin-bottom:22px}
.entry-head .art{width:96px;height:96px;border-radius:22px;font-size:40px;flex:none}
.entry-head h1{margin:0 0 4px;font:700 clamp(28px,4vw,40px)/1.08 var(--display);letter-spacing:-.025em}
.entry-head .heart{margin-left:auto;align-self:flex-start}
.srcbox{display:grid;gap:12px}
.srcbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg);transition:transform .12s,box-shadow .12s,border-color .12s}
.srcbtn:hover{transform:translateY(-1px);border-color:var(--amber);box-shadow:0 10px 26px -14px rgba(255,138,28,.6)}
.srcbtn b{display:block;font:600 15px/1.3 var(--font)}.srcbtn small{color:var(--muted);font-size:12.5px}
.srcbtn .ic{color:var(--amber)}
.srcbtn.primary{background:linear-gradient(135deg,#FFB347,#FF8A1C 55%,#FF6B4A);border-color:transparent;color:var(--on-accent)}.srcbtn.primary small,.srcbtn.primary .ic{color:rgba(42,19,0,.75)}
.fine{font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 2px 0}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#120C10 center/cover no-repeat;border:1px solid var(--line)}
.yt button{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));color:#fff;cursor:pointer;display:grid;place-items:center;font:600 15px var(--font)}
.yt button span{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.adminbox{margin-top:16px;padding:14px;border:1px dashed var(--line-strong);border-radius:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adminbox input[type=text]{flex:1;min-width:200px;padding:9px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font:inherit}
@media (max-width:900px){.entry{grid-template-columns:1fr}.entry-head .art{width:72px;height:72px;font-size:30px}}
.land-sec{padding:56px 0 8px}
.land-sec h2{font:700 clamp(26px,3.4vw,36px)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 8px}
.land-sec>p.lead{color:var(--muted);font-size:17px;max-width:60ch;margin:0 0 26px}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat .card{padding:22px}.feat h3{margin:12px 0 6px;font:700 18px/1.25 var(--display)}.feat p{margin:0;color:var(--muted);font-size:14.5px}
.feat .fi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) + 40) 85% 52%))}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px}
.plan{padding:26px}.plan h3{margin:0 0 4px;font:700 22px/1.2 var(--display)}.plan .pr{font:700 15px var(--font);color:var(--muted);margin-bottom:14px}
.plan ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}.plan li{display:flex;gap:10px;font-size:14.5px}.plan li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1300' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.plan.pro{border-color:rgba(255,159,28,.6);box-shadow:0 20px 50px -26px rgba(255,138,28,.7)}
@media (max-width:900px){.feat,.plans{grid-template-columns:1fr}.land-sec{padding-top:40px}}
.tag-ext{background:transparent;border-color:var(--line-strong);color:var(--muted)}

/* ===== v6: chord maps + practice tools ===== */
.tools2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.chipbtn{padding:8px 15px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg-2);font:600 13.5px/1 var(--font);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.chipbtn:hover{border-color:var(--amber);color:var(--fg)}
.chipbtn[aria-pressed=true],.chipbtn.on,.chipbtn[aria-expanded=true]{background:linear-gradient(135deg,#FFB347,#FF8A1C 60%,#FF6B4A);border-color:transparent;color:var(--on-accent)}
.tools2 .muted{font-size:13px;margin-left:4px}
.tpanel{margin:-6px 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.tpanel[hidden]{display:none}
.tpanel p{margin:0 0 10px;font-size:14px}
.kp-grid{display:flex;flex-wrap:wrap;gap:8px}
.kp-chip{min-width:46px;padding:8px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--fg);font:700 14px/1 var(--mono);cursor:pointer}
.kp-chip[aria-pressed=true]{background:#16A34A;border-color:#16A34A;color:#fff}
.mt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mt-bpm{min-width:3ch;text-align:center;font:700 28px/1 var(--display)}
.mt-row input[type=range]{flex:1;min-width:140px;max-width:260px}
.mt-row select{padding:9px 10px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font:inherit}
.mt-dots{display:inline-flex;gap:7px;margin-left:6px}
.mt-dots i{width:14px;height:14px;border-radius:50%;background:var(--line-strong);transition:background .05s,transform .05s}
.mt-dots i.on{background:var(--amber);transform:scale(1.25);box-shadow:0 0 10px rgba(255,159,28,.8)}
.chord.known{box-shadow:inset 0 -2px 0 #16A34A}
.chord.unknown{box-shadow:inset 0 -2px 0 var(--amber);background:rgba(255,159,28,.16)}
.cd.unknown figcaption:after{content:" new";font:600 10px/1 var(--font);color:var(--chord);margin-left:3px}
.cd.known figcaption{color:#16A34A}
.cmap{margin-bottom:26px}
.cm-grid{display:grid;gap:14px;margin:6px 0 10px}
.cm-sec{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:center}
.cm-label{font:700 14px/1.2 var(--display);color:var(--fg-2)}.cm-label small{display:block;font:500 12px/1.2 var(--font);color:var(--muted);margin-top:2px}
.cm-row{display:flex;flex-wrap:wrap;gap:8px}
.cm-chord{min-width:56px;padding:11px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);font:700 17px/1 var(--mono);color:var(--chord);cursor:pointer;transition:transform .1s,box-shadow .1s}
.cm-chord:hover,.cm-chord:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(255,138,28,.8);background:var(--surface);color:var(--chord)}
.cm-chord.known{border-color:#16A34A}.cm-chord.unknown{border-color:var(--amber);background:rgba(255,159,28,.12)}
.cm-strum{margin:6px 0 4px;color:var(--fg-2)}
.mapedit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mapedit textarea{grid-column:1/-1;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font:14px/1.5 var(--mono)}
.mapedit label{display:grid;gap:4px;font-size:13px;color:var(--muted)}.mapedit input,.mapedit select{padding:8px 10px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font:inherit}
@media (max-width:720px){.cm-sec{grid-template-columns:1fr;gap:6px}.mt-row input[type=range]{max-width:none;flex-basis:100%}}
@media print{
  .bar,.tabbar-m,.foot,.toolbar,.tools2,.tpanel,.upsell,.song-actions,.heart,.skip,.scrim,.side,#chordTip,.yt,.adminbox,.crumbs{display:none!important}
  body,body.app{background:#fff!important;color:#000!important}.col{margin:0!important;padding:0!important}
  .wrap{max-width:none;padding:0}.chordstrip{border:0;background:none;padding:0;break-inside:avoid}.sheet{font-size:12pt;margin:12px 0}
  .chord{color:#000!important;box-shadow:none!important;background:none!important}a{color:#000;text-decoration:none}
  .cm-chord{border:1px solid #000;color:#000;background:none}
}
.tag-map{background:linear-gradient(135deg,#FFB347,#FF8A1C);border-color:transparent;color:#2A1300;font-weight:700}.filterbar .chk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}