/* Layout: barra lateral fosca com un diapasó de banús; contingut clar i ordenat com un quadern de pràctiques */
:root{
  --bg:#eef1ef; --surface:#ffffff; --surface2:#f6f8f7; --ink:#1a2220; --muted:#5d6966; --line:#d6dedb;
  --accent:#b9822a; --accent-ink:#7a5410; --accent-soft:#f4e6cc;
  --root:#c4432f; --tone:#2a7a6e; --tone-soft:#d7ece8;
  --deep:#1c2624; --deep-ink:#e7eeec; --deep-muted:#93a6a1; --deep-line:#2f3c39;
  --wood:#3b2a22; --wood2:#4a362b; --fret:#c9c2b3; --string:#e2d4b5; --inlay:#d9cfbd;
  --good:#2f8a4f; --warn:#b77a14;
  --f-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111615; --surface:#182020; --surface2:#1d2625; --ink:#e4ebe9; --muted:#97a6a2; --line:#2c3735;
  --accent:#d9a548; --accent-ink:#ecc57c; --accent-soft:#3a2f1c;
  --root:#e3624d; --tone:#4cb3a2; --tone-soft:#1d3b37;
  --deep:#0b0f0e; --deep-ink:#e4ebe9; --deep-muted:#8a9a96; --deep-line:#222c2a;
  --wood:#2c1f19; --wood2:#38281f; --fret:#9e978a; --string:#cdbf9f; --inlay:#b8ad9a;
  --good:#5cc07e; --warn:#e0a83f; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111615; --surface:#182020; --surface2:#1d2625; --ink:#e4ebe9; --muted:#97a6a2; --line:#2c3735;
  --accent:#d9a548; --accent-ink:#ecc57c; --accent-soft:#3a2f1c;
  --root:#e3624d; --tone:#4cb3a2; --tone-soft:#1d3b37;
  --deep:#0b0f0e; --deep-ink:#e4ebe9; --deep-muted:#8a9a96; --deep-line:#222c2a;
  --wood:#2c1f19; --wood2:#38281f; --fret:#9e978a; --string:#cdbf9f; --inlay:#b8ad9a;
  --good:#5cc07e; --warn:#e0a83f; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:#1b1306}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.6rem,3vw,2.1rem)} h2{font-size:1.25rem} h3{font-size:1.02rem}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- Entrada ---------- */
.login{min-height:100%;display:grid;place-items:center;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(ellipse at 20% 0%,var(--accent-soft),transparent 55%),var(--bg)}
.login-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:18px;box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{flex:none}
.brand b{font-family:var(--f-display);font-size:1.35rem;letter-spacing:-.02em}
.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface2);padding:4px;border-radius:10px;border:1px solid var(--line)}
.role-tabs button{border:0;background:none;padding:8px 6px;border-radius:7px;font-weight:500}
.role-tabs button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);color:var(--accent-ink)}
.field{display:grid;gap:5px}
.field label{font-size:.82rem;font-weight:600}
.field input,.field select{border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:9px 11px;min-width:0;width:100%}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1b1306;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn.on{background:var(--tone);border-color:var(--tone);color:#fff}
.note-box{font-size:.84rem;color:var(--muted);background:var(--surface2);border:1px dashed var(--line);border-radius:8px;padding:10px 12px}

/* ---------- App ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.side{background:var(--deep);color:var(--deep-ink);display:flex;flex-direction:column;gap:22px;padding:22px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand b{color:var(--deep-ink)}
.nav{display:grid;gap:2px}
.nav-label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-muted);padding:10px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;color:var(--deep-ink);text-decoration:none;padding:8px 10px;border-radius:7px;font-weight:500;font-size:.93rem}
.nav a:hover{background:var(--deep-line)}
.nav a[aria-current="page"]{background:var(--deep-line);box-shadow:inset 3px 0 0 var(--accent)}
.nav a .tag{margin-left:auto;font-family:var(--f-mono);font-size:.68rem;color:var(--deep-muted)}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.who{margin-top:auto;border-top:1px solid var(--deep-line);padding-top:14px;display:grid;gap:8px;font-size:.85rem}
.who .rolepill{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.who button{background:none;border:1px solid var(--deep-line);color:var(--deep-ink);border-radius:7px;padding:6px 10px;font-size:.82rem;justify-self:start}
main{padding-block:28px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-width:0}
.wrap{max-width:1120px;margin:0 auto;display:grid;gap:22px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.panel > h2,.panel > h3{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:5px 11px;font-size:.86rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip.done{box-shadow:inset 0 -2px 0 var(--good)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.toggle button{border:0;background:var(--surface2);padding:6px 11px;font-size:.85rem}
.toggle button[aria-pressed="true"]{background:var(--accent);color:#1b1306;font-weight:600}

/* mànec */
.neck-wrap{overflow-x:auto;border-radius:10px;-webkit-overflow-scrolling:touch}
.neck-wrap svg{display:block}
.neck-wrap g.pos{cursor:pointer}
.neck-wrap g.pos:hover circle.hit{fill:rgba(255,255,255,.12)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* acords */
.chord-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.chord-title .big{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.tones{display:flex;gap:8px;flex-wrap:wrap}
.tone{display:grid;justify-items:center;min-width:52px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface2)}
.tone b{font-family:var(--f-display);font-size:1.15rem}
.tone span{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.tone.r{border-color:var(--root)} .tone.r span{color:var(--root)}
.voicings{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.voicing{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px;justify-items:center;background:var(--surface2)}
.voicing .vn{font-size:.82rem;font-weight:600;justify-self:start}
.voicing .tab{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.qgroup{display:grid;gap:6px}
.qgroup + .qgroup{margin-top:10px}

/* tauler */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .v{font-family:var(--f-display);font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.rank-badge{display:flex;gap:14px;align-items:center}
.rank-badge .emb{width:58px;height:58px;flex:none}
.bar{height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--accent)}
.goals{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.goals li{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2)}
.goals li .st{font-family:var(--f-mono);font-size:.7rem;padding:2px 7px;border-radius:999px;margin-left:auto;white-space:nowrap}
.st.ok{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.st.pend{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.cal{max-width:360px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.8rem}
.cal .dh{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);padding-bottom:4px}
.cal .d{aspect-ratio:1;max-width:100%;display:grid;place-items:center;border-radius:6px;position:relative;font-variant-numeric:tabular-nums}
.cal .d.p{background:var(--tone-soft);color:var(--ink);font-weight:600}
.cal .d.t{outline:2px solid var(--accent)}
.cal .d.g::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--root)}
.chart text{fill:var(--muted);font-family:var(--f-mono);font-size:10px}

/* assoliments i rànquing */
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ach .a{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ach .a.locked{opacity:.55}
.ach .a .ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--f-display);font-weight:700}
.ach .a.locked .ic{background:var(--surface2);color:var(--muted)}
.ach .a p{margin:2px 0 0;font-size:.84rem;color:var(--muted)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tr.me td{background:var(--accent-soft)}
td.num,th.num{text-align:right}
.pos-n{font-family:var(--f-display);font-weight:700;width:36px}
.tier{font-family:var(--f-mono);font-size:.72rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-size:.9rem;z-index:50}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:env(safe-area-inset-top,0px);height:auto;z-index:20;flex-direction:row;align-items:center;gap:12px;padding:10px 0;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));overflow-x:auto}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--deep)}
  .side .brand b{display:none}
  .nav{display:flex;gap:4px}
  .nav-label{display:none}
  .nav a{white-space:nowrap;padding:7px 10px}
  .nav a .tag{display:none}
  .who{margin:0;border:0;padding:0;display:flex;align-items:center;white-space:nowrap}
  .who .nm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Tornar a MVHub */
.hubback{flex:none;align-self:flex-start;display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--deep-muted);border:1px solid var(--deep-line);text-decoration:none;white-space:nowrap}
.hubback:hover{color:var(--accent)}
.hubfloat{position:fixed;top:max(14px,env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px));z-index:30;color:var(--muted);border-color:var(--line);background:var(--surface)}
#login[hidden] ~ .hubfloat{display:none}