:root{
  --bg:#eef3ef; --surface:#ffffff; --surface-2:#f4f8f5;
  --ink:#0e2430; --ink-dim:#4c6470; --line:#d7e2df;
  --ball:#c8e000; --ball-ink:#1c2400;
  --good:#2e7d4f; --danger:#a83a3a;
  --shadow:0 1px 2px rgba(14,36,48,.06), 0 8px 24px -12px rgba(14,36,48,.18);
  --radius:14px;
  --accent-sport:#1f5c73;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1720; --surface:#122431; --surface-2:#0e1e29;
    --ink:#eaf1ee; --ink-dim:#9fb4ba; --line:#203944;
    --ball:#d7ec2f; --ball-ink:#1c2400;
    --good:#57c48c; --danger:#e07777;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1720; --surface:#122431; --surface-2:#0e1e29;
  --ink:#eaf1ee; --ink-dim:#9fb4ba; --line:#20394d;
  --ball:#d7ec2f; --ball-ink:#1c2400;
  --good:#57c48c; --danger:#e07777;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Work Sans',system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.45}
h1,h2,h3,.display{font-family:'Oswald',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:inherit} button{font:inherit;cursor:pointer}
input,select{font:inherit}
::selection{background:var(--ball);color:var(--ball-ink)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
[hidden]{display:none !important}

/* ---------- login screen ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;max-width:360px;width:100%;text-align:center}
.login-card .crest{margin:0 auto 14px}
.login-card h1{font-size:18px;margin:0 0 4px}
.login-card p{font-size:12.5px;color:var(--ink-dim);margin:0 0 20px;text-transform:none;font-family:'Work Sans',sans-serif}
.login-card input[type="password"]{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:14px;color:var(--ink);margin-bottom:10px}
.login-card button{width:100%;background:var(--ball);color:var(--ball-ink);border:none;border-radius:9px;padding:11px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:13px}
.login-error{color:var(--danger);font-size:12px;margin:8px 0 0;min-height:14px}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.crest{width:38px;height:38px;border-radius:50%;flex:none;background:conic-gradient(from 210deg, #1f5c73, var(--ball), #b5541f, #7a4fd1, #1f5c73);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.crest span{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;color:var(--ink);background:var(--surface);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.brand h1{font-size:19px;margin:0;line-height:1}
.brand p{margin:2px 0 0;font-size:11px;color:var(--ink-dim);text-transform:none;letter-spacing:0;font-family:'Work Sans',sans-serif}
.player{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
#playerName{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--ink);width:120px;min-width:0}
.level-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;box-shadow:var(--shadow)}
.level-badge{width:26px;height:26px;border-radius:50%;background:var(--accent-sport);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-family:'Oswald',sans-serif;flex:none}
.level-text{font-size:12px}
.level-text b{display:block;font-family:'Oswald',sans-serif;letter-spacing:.03em;font-size:12.5px}
.level-text small{color:var(--ink-dim);font-size:10.5px}
.xp-bar-wrap{flex:1 1 220px;min-width:160px}
.xp-track{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--accent-sport),var(--ball));border-radius:999px;transition:width .5s ease}
.xp-caption{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-dim);margin-top:3px}

.sport-switch{display:flex;gap:8px;padding-block:10px;border-top:1px solid var(--line);overflow-x:auto}
.sport-chip{flex:none;display:flex;align-items:center;gap:7px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:999px;font-family:'Oswald',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.sport-chip .dot{width:9px;height:9px;border-radius:50%}
.sport-chip[aria-pressed="true"]{color:#fff}

nav.tabs{display:flex;gap:6px;padding-block:10px;border-top:1px solid var(--line);overflow-x:auto}
nav.tabs button{border:1px solid transparent;background:transparent;color:var(--ink-dim);padding:7px 14px;border-radius:999px;font-size:13px;font-family:'Oswald',sans-serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
nav.tabs button[aria-selected="true"]{background:var(--accent-sport);color:#fff;border-color:var(--accent-sport)}

main{padding-block:22px 60px}
section[hidden]{display:none !important}

.hero-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:relative}
.stat-tile .num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:24px;line-height:1}
.stat-tile .lab{font-size:11px;color:var(--ink-dim);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

.legend{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.legend button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);padding:6px 12px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:6px}
.legend .dot{width:8px;height:8px;border-radius:50%;flex:none}
.tree-hint{font-size:11px;color:var(--ink-dim);margin:0 2px 10px}
.tree-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:8px}
.tree-canvas{position:relative}
.tree-canvas svg{position:absolute;left:0;top:0;pointer-events:none}
.col-label{position:absolute;top:4px;display:flex;align-items:center;gap:6px;font-family:'Oswald',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);white-space:nowrap}
.node{position:absolute;width:132px;min-height:96px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:8px 10px;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.node .n-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4px}
.node .n-icon{font-size:13px;line-height:1}
.node .n-xp{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-dim)}
.node .n-title{font-family:'Oswald',sans-serif;font-size:11.5px;line-height:1.25;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.node .n-cat{font-size:9px;color:var(--accent,var(--ink-dim));text-transform:uppercase;letter-spacing:.04em}
.node.done{background:color-mix(in srgb, var(--good) 18%, var(--surface));border-color:var(--good)}
.node.available{border-color:var(--accent,var(--accent-sport))}
.node.locked{opacity:.55;border-style:dashed}
.node.secret-hidden{opacity:.5;border-style:dotted;align-items:center;justify-content:center;text-align:center}
.node:hover{transform:translateY(-1px)}
.node:focus-visible{outline:2px solid var(--ball);outline-offset:2px}

.modal-overlay{position:fixed;inset:0;background:rgba(6,14,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;max-width:480px;width:100%;max-height:min(85vh,720px);overflow-y:auto;padding:22px 22px 24px;position:relative;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
.m-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent,var(--accent-sport));margin:0 0 4px}
.m-title{font-size:19px;margin:0 0 8px;padding-right:30px}
.m-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.badge{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.badge.status-done{background:color-mix(in srgb, var(--good) 20%, var(--surface));border-color:var(--good);color:var(--good)}
.badge.status-available{border-color:var(--accent-sport);color:var(--accent-sport)}
.badge.status-locked{border-color:var(--danger);color:var(--danger)}
.m-section{margin-bottom:14px}
.m-section h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);font-family:'Oswald',sans-serif}
.m-section p{margin:0;font-size:13.5px}
.cstep{display:flex;gap:10px;margin-bottom:10px}
.cstep .idx{flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-dim)}
.cstep h4{margin:0 0 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);font-family:'Oswald',sans-serif}
.cstep p{margin:0;font-size:13px}
.engagement{background:var(--surface-2);border-left:3px solid var(--ball);padding:10px 12px;border-radius:0 8px 8px 0;font-style:italic;font-size:13px;margin-bottom:14px}
.crossnote{background:var(--surface-2);border-left:3px solid var(--accent-sport);padding:10px 12px;border-radius:0 8px 8px 0;font-size:12.5px;margin-bottom:14px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.req-chip{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:5px 10px 5px 8px;font-size:11.5px}
.req-chip.ok{border-color:var(--good);color:var(--good)}
.req-chip.no{border-color:var(--danger);color:var(--danger)}
.m-action{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.m-btn{border:1px solid var(--accent-sport);background:transparent;color:var(--accent-sport);padding:9px 14px;border-radius:9px;font-size:13px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.m-btn.done{background:var(--good);border-color:var(--good);color:#fff}
.m-btn.ghost{border-color:var(--line);color:var(--ink-dim)}
.m-note{font-size:12px;color:var(--ink-dim);background:var(--surface-2);border-radius:9px;padding:9px 11px;margin-bottom:8px}
.session-choices{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.session-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:2px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 14px;font-family:'Oswald',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);width:100%;text-align:left}
.session-choice .sc-sub{font-family:'Work Sans',sans-serif;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--ink-dim)}
.focus-item{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left}
.focus-item .fi-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.02em}
.focus-item .fi-cat{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em}
.focus-item .fi-desc{font-size:12px;color:var(--ink-dim)}
.time-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px}
.time-row label{font-size:11.5px;color:var(--ink-dim);flex:1}
.time-row input[type="time"]{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:13px}
.time-row button{border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:7px;padding:6px 10px;font-size:11.5px}

.ladder{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.rung{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.rung.current{border-color:var(--accent-sport);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-sport) 35%, transparent)}
.rung .rn{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;flex:none}
.rung.current .rn{background:var(--accent-sport);color:#fff;border-color:var(--accent-sport)}
.rung .rname{font-family:'Oswald',sans-serif;font-size:13.5px;letter-spacing:.02em}
.rung .rrange{margin-left:auto;font-size:11px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.cat-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cat-bar{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.cat-bar .head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.cat-bar .head b{font-family:'Oswald',sans-serif;letter-spacing:.02em;text-transform:uppercase;font-size:11.5px}
.cat-bar .track{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.cat-bar .fill{height:100%;border-radius:999px;background:var(--accent)}
.session-history{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.session-history .sh-row{display:flex;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px}
.session-history .sh-empty{color:var(--ink-dim);font-size:12.5px}

.coach-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.coach-head{background:var(--accent-sport);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.coach-head .crest{background:color-mix(in srgb, #fff 20%, transparent);background-image:none}
.coach-head .crest span{background:#fff;color:var(--accent-sport)}
.coach-head div h2{margin:0;font-size:16px}
.coach-head div p{margin:2px 0 0;font-size:11.5px;opacity:.85;text-transform:none;font-family:'Work Sans',sans-serif}
.coach-controls{display:flex;gap:8px;padding:14px 18px 0;flex-wrap:wrap}
.coach-controls select{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:12.5px}
.coach-controls button{background:var(--ball);color:var(--ball-ink);border:none;border-radius:8px;padding:7px 14px;font-size:12.5px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.coach-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px}
.quote-of-day{margin-top:16px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--ink-dim);font-style:italic}
.quote-of-day b{display:block;font-style:normal;color:var(--ink);font-family:'Oswald',sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}

.cal-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-nav{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 12px;font-size:12.5px}
.cal-label{font-family:'Oswald',sans-serif;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase}
.cal-today{margin-left:auto;border:1px solid var(--accent-sport);color:var(--accent-sport);background:transparent;border-radius:8px;padding:7px 12px;font-size:12px}
.cal-book-link{border:1px solid var(--accent-sport);background:var(--accent-sport);color:#fff;border-radius:8px;padding:7px 12px;font-size:12px;text-decoration:none;font-weight:600}
.cal-book-link:hover{opacity:.9}
.load-summary{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.load-pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12px}
.load-pill .dot{width:8px;height:8px;border-radius:50%}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px}
@media (max-width:760px){ .cal-grid{grid-template-columns:1fr} }
.day-col{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:140px}
.day-col.today{border-color:var(--accent-sport);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-sport) 30%, transparent)}
.day-head{display:flex;justify-content:space-between;align-items:baseline}
.day-head b{font-family:'Oswald',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.day-head span{font-size:11px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.session-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-left:4px solid var(--accent,var(--line));background:var(--surface-2);border-radius:9px;padding:7px 9px;font-size:12px;width:100%;text-align:left}
.session-chip.done{opacity:.65}
.session-chip .sc-check{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px}
.session-chip.done .sc-check{background:var(--good);border-color:var(--good);color:#fff}
.session-chip .sc-txt{flex:1;display:flex;flex-direction:column}
.session-chip .sc-ctx{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.01em}
.session-chip .sc-sport{font-size:9.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em}
.session-chip .sc-time{font-size:9.5px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.add-session-btn{border:1px dashed var(--line);background:transparent;color:var(--ink-dim);border-radius:9px;padding:8px;font-size:11.5px}

/* ---------- settings tab ---------- */
.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.settings-card h3{margin:0 0 6px;font-size:14px}
.settings-card p{font-size:13px;color:var(--ink-dim);margin:0 0 12px}
.url-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.url-row input{flex:1;min-width:220px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:12.5px;color:var(--ink);font-family:'JetBrains Mono',monospace}
.url-row button{border:1px solid var(--accent-sport);background:transparent;color:var(--accent-sport);border-radius:8px;padding:9px 14px;font-size:12.5px;white-space:nowrap}
.settings-steps{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.settings-steps li{margin-bottom:6px}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:8px;padding:9px 14px;font-size:12.5px}
.btn-danger-outline{border:1px solid var(--danger);background:transparent;color:var(--danger);border-radius:8px;padding:9px 14px;font-size:12.5px}

footer.page-foot{padding:20px 0 40px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.reset-btn{background:transparent;border:1px solid var(--danger);color:var(--danger);padding:8px 16px;border-radius:8px;font-size:12px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-size:13px;max-width:min(90vw,380px);box-shadow:0 12px 30px -10px rgba(0,0,0,.4);opacity:0;transition:opacity .25s ease, transform .25s ease;z-index:120;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:11.5px;color:var(--ball);margin-bottom:2px}
@media (max-width:520px){ .player{width:100%;order:3;margin-left:0} #playerName{width:100%} }