:root{
  --bg:#0e0f12; --card:#16181d; --card2:#1c1f26; --line:#262a33;
  --txt:#f2f0ea; --mut:#8b8f99; --accent:#d8a657; --accent2:#5fb3a3;
  --good:#5fb3a3; --bad:#c46a5a; --priv:#7d8bb8;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px;width:100%;max-width:360px;}
.login-title{font-size:24px;font-weight:700;letter-spacing:-.02em;}
.login-sub{color:var(--mut);font-size:13px;margin:4px 0 22px;}
.login-input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:13px 14px;font-size:15px;margin-bottom:12px;outline:none;}
.login-input:focus{border-color:var(--accent);}
.login-btn{width:100%;background:var(--accent);color:#1a1407;border:none;border-radius:11px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;}
.login-err{color:var(--bad);font-size:13px;margin-top:12px;min-height:16px;text-align:center;}

/* app */
.wrap{max-width:760px;margin:0 auto;padding:24px 20px 48px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.who{font-size:13px;color:var(--mut);}
.who b{color:var(--txt);}
.badge{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:20px;margin-left:8px;}
.badge.owner{background:rgba(216,166,87,.18);color:var(--accent);}
.badge.viewer{background:rgba(95,179,163,.16);color:var(--accent2);}
.logout{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:7px 14px;font-size:12.5px;cursor:pointer;}

.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.name-input{background:transparent;border:none;color:var(--txt);font-size:26px;font-weight:600;letter-spacing:-.02em;padding:0;outline:none;width:240px;max-width:55vw;}
.name-static{font-size:26px;font-weight:600;letter-spacing:-.02em;}
.today{color:var(--mut);font-size:13px;margin-top:4px;letter-spacing:.04em;text-transform:uppercase;}
.game-card{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:16px 22px;text-align:right;min-width:180px;}
.game-label{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.game-time{font-size:34px;font-weight:700;color:var(--accent);line-height:1.1;margin-top:2px;letter-spacing:-.02em;}
.game-tier{color:var(--mut);font-size:12px;margin-top:2px;}
.lead{color:var(--mut);font-size:13.5px;line-height:1.5;margin:6px 0 22px;}

.items{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 17px;transition:.15s;}
.item.clickable{cursor:pointer;}
.item.clickable:hover{border-color:#39404d;}
.item.on{border-color:var(--accent);background:var(--card2);}
.item.readonly{opacity:.92;}
.check{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:.15s;}
.item.on .check{background:var(--accent);border-color:var(--accent);}
.check svg{opacity:0;transition:.15s;}
.item.on .check svg{opacity:1;}
.item-label{font-size:14.5px;line-height:1.35;}
.item-pts{color:var(--mut);font-size:12px;margin-top:2px;}
.item.on .item-pts{color:var(--accent);}

.save-row{display:flex;align-items:center;gap:14px;margin-bottom:30px;}
.save-btn{background:var(--accent);color:#1a1407;border:none;border-radius:11px;padding:13px 28px;font-size:15px;font-weight:600;cursor:pointer;}
.saved-msg{color:var(--good);font-size:13px;opacity:0;transition:.3s;}
.saved-msg.show{opacity:1;}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:26px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;}
.stat-val{font-size:26px;font-weight:700;letter-spacing:-.02em;}
.stat-lbl{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}
.delta{font-size:14px;font-weight:600;margin-left:6px;}
.delta.up{color:var(--good);} .delta.down{color:var(--bad);} .delta.flat{color:var(--mut);}

.weekly{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:26px;}
.weekly-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:14px;}
.week-progress{font-weight:600;letter-spacing:0;text-transform:none;font-size:14px;color:var(--accent2);}
.weekly-body{display:flex;gap:18px;flex-wrap:wrap;}
.weekly-body label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut);}
.mini-input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px;font-size:15px;width:90px;outline:none;}
.reward-label{flex:1;min-width:180px;}
.reward-input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px;font-size:15px;outline:none;width:100%;}
.reward-static{color:var(--txt);font-size:15px;}

.chart-wrap{margin-bottom:30px;}
.chart-title{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.chart{display:flex;align-items:flex-end;gap:5px;height:130px;padding:0 2px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.bar{width:100%;max-width:30px;border-radius:5px 5px 0 0;background:var(--card2);transition:.2s;min-height:3px;}
.bar.has{background:var(--accent2);}
.bar.today{background:var(--accent);}
.bar-day{font-size:9px;color:var(--mut);}

.private{background:rgba(125,139,184,.07);border:1px solid rgba(125,139,184,.3);border-radius:14px;padding:18px 20px;margin-bottom:22px;}
.private-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;}
.private-title{font-size:16px;font-weight:600;color:var(--priv);}
.private-sub{font-size:12px;color:var(--mut);line-height:1.45;margin-top:2px;}
.mood-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.mood{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:13px;cursor:pointer;color:var(--mut);transition:.15s;}
.mood:hover{border-color:var(--priv);}
.mood.on{border-color:var(--priv);color:var(--txt);background:rgba(125,139,184,.14);}
.journal{width:100%;min-height:90px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--txt);font-size:14px;font-family:inherit;resize:vertical;outline:none;line-height:1.5;}
.journal:focus{border-color:var(--priv);}
.journal-saved{font-size:11.5px;color:var(--priv);margin-top:7px;height:14px;opacity:0;transition:.3s;}
.journal-saved.show{opacity:1;}

.calm{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:28px;}
.calm-title{color:var(--mut);font-size:13px;margin-bottom:14px;}
.breath-btn{background:transparent;border:1px solid var(--accent2);color:var(--accent2);border-radius:11px;padding:11px 26px;font-size:14px;cursor:pointer;}
.breath-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:6px;}
.breath-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(95,179,163,.35),rgba(95,179,163,.08));border:2px solid var(--accent2);display:flex;align-items:center;justify-content:center;color:var(--txt);font-size:14px;transition:transform 4s ease-in-out;transform:scale(.7);}
.breath-stop{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:7px 18px;font-size:13px;cursor:pointer;}

.viewer-note{text-align:center;color:var(--mut);font-size:12.5px;margin-bottom:24px;}

/* tabs */
.tabbar{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.tab{background:transparent;border:none;color:var(--mut);font-size:14px;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab:hover{color:var(--txt);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}

/* exam trend */
.trend{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 2px;}
.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.trend-bar{width:100%;max-width:34px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:5px 5px 0 0;display:flex;align-items:flex-start;justify-content:center;position:relative;min-height:4px;}
.trend-pct{font-size:9px;color:#1a1407;font-weight:700;margin-top:3px;}
.trend-wk{font-size:9px;color:var(--mut);}
.trend-empty{color:var(--mut);font-size:13px;padding:16px 0;}

/* weekly test */
.test-intro,.test-done-msg{color:var(--mut);font-size:14px;line-height:1.6;margin-bottom:18px;}
.q{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:12px;}
.q-head{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:8px;}
.q-cat{color:var(--accent2);}
.q-text{font-size:15px;line-height:1.5;margin-bottom:13px;white-space:pre-line;}
.q-opts{display:flex;flex-direction:column;gap:8px;}
.q-opt{text-align:left;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:11px 14px;font-size:14px;cursor:pointer;transition:.12s;}
.q-opt:hover{border-color:#39404d;}
.q-opt.sel{border-color:var(--accent);background:var(--card2);}
#submitTest{margin-top:6px;}
#submitTest:disabled{opacity:.4;cursor:not-allowed;}
.test-done{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:8px;}
.test-done-score{font-size:34px;font-weight:700;letter-spacing:-.02em;}
.test-done-pct{font-size:18px;color:var(--accent);font-weight:600;margin-top:2px;}
.bd{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.bd-row{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 15px;font-size:14px;color:var(--mut);}
.bd-row b{color:var(--txt);}

/* mom follow-up guide */
.guide-lead,.g-close{color:var(--mut);font-size:14.5px;line-height:1.6;margin-bottom:20px;}
.g-close{text-align:center;font-style:italic;color:var(--txt);margin-top:8px;}
.g-card{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
.g-num{font-size:26px;font-weight:700;color:var(--accent);flex:0 0 auto;width:28px;}
.g-h{font-size:16px;font-weight:600;margin-bottom:10px;}
.g-quote{color:var(--accent2);font-style:italic;font-size:15px;padding-left:12px;border-left:3px solid var(--accent2);margin-bottom:10px;}
.g-card p{font-size:14px;line-height:1.6;margin:0 0 10px;color:var(--txt);}
.g-micro{font-size:13px;color:var(--mut);background:var(--bg);border-radius:9px;padding:11px 13px;}
.g-rhythm,.g-night{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
.g-night{border-left:4px solid var(--accent2);}
.g-night p{font-size:14px;line-height:1.6;color:var(--txt);margin:6px 0 0;}
.r-row{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line);}
.r-row:first-of-type{border-top:none;}
.r-time{flex:0 0 70px;color:var(--accent);font-weight:600;font-size:13px;}
.r-row div:last-child{font-size:13.5px;line-height:1.55;color:var(--txt);}