/* StudyStake screen, surface and control tokens */
:root {
  --bg:#111013; --side:#151417; --panel:#1c1a1e; --panel-hi:#252226;
  --panel-hover:#302a30; --field:#211f23; --border:#302b31; --control-border:#5a5059;
  --text:#f9f6f8; --text-soft:#e2d9df; --muted:#c0b4bd;
  --accent:#ff4783; --accent-text:#ff7ba7; --accent-soft:#38232e; --accent-line:#684051;
  --accent-ink:#210912; --accent-gradient:linear-gradient(105deg,#ff387d,#ff9145);
  --accent-gradient-hover:linear-gradient(105deg,#ff6096,#ffa464);
  --green:#77dab2; --amber:#ffba64; --amber-soft:#3b2922;
  --card-radius:16px; --control-radius:13px;
}
.light-screen {
  color-scheme:light;
  --bg:#fdf4f5; --side:#fff8f9; --panel:#fff9fa; --panel-hi:#f8edef;
  --panel-hover:#fae7ec; --field:#fffafb; --border:#ecdee2; --control-border:#ae929d;
  --text:#21191e; --text-soft:#392c35; --muted:#6c5964;
  --accent:#dd1e62; --accent-text:#af134a; --accent-soft:#fbdce7; --accent-line:#eab3c7;
  --green:#196047; --green-soft:#e2f3eb; --green-line:#9dcdb8;
  --rose:#a02d4c; --rose-soft:#fbe7ed; --rose-line:#edbac9;
  --amber:#8c490d; --amber-soft:#fff0e4; --amber-line:#e8c5a4;
}
.light-screen dialog { color:var(--text); }
.topbar { position:relative; min-height:58px; background:var(--bg); border-color:var(--border); }
.screen-title { position:absolute; left:50%; transform:translateX(-50%); color:var(--text); font-size:15px; font-weight:720; }
.topbar .notification-button { border:0; background:transparent; color:var(--text); border-radius:var(--control-radius); }
.topbar .notification-button:hover { background:var(--panel-hover); }
.brand .brand-cap { width:32px; height:32px; }
.brand-name span { color:var(--text); }
.primary,.secondary,.ghost,.danger,.preset,.input,.select { border-radius:var(--control-radius); }
.primary { border-color:transparent; box-shadow:none; min-height:44px; }
.secondary,.ghost,.danger { min-height:44px; }
.reference-home { max-width:1010px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.reference-home > .foot-note { grid-column:1/-1; margin-top:0; }
.reference-dashboard,.reference-secondary { display:grid; gap:12px; min-width:0; }
.reference-welcome { margin:1px 2px 4px; }
.reference-welcome h1 { font-size:clamp(26px,4.1vw,41px); line-height:1.08; letter-spacing:-.046em; font-weight:780; overflow-wrap:anywhere; }
.reference-welcome p { margin-top:7px; color:var(--muted); font-size:14px; line-height:1.4; }
.reference-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.reference-tile { display:flex; min-height:60px; align-items:center; gap:9px; padding:9px 10px; background:var(--panel); border:1px solid var(--border); border-radius:var(--control-radius); color:var(--text); text-align:left; }
.reference-tile:hover,.reference-week:hover { background:var(--panel-hover); }
.reference-tile .icon { color:var(--amber); }
.reference-tile strong,.reference-tile small,.reference-week strong,.reference-week small,.reference-reward small,.reference-reward strong { display:block; line-height:1.25; }
.reference-tile strong,.reference-week strong { font-size:15px; font-weight:760; font-variant-numeric:tabular-nums; }
.reference-tile small,.reference-week small { color:var(--muted); font-size:11px; margin-top:3px; }
.reference-start { width:100%; min-height:49px; border-radius:14px; font-size:14px; }
.reference-start .icon { fill:currentColor; }
.reference-week { display:grid; gap:13px; padding:13px; border:1px solid var(--border); border-radius:var(--card-radius); background:var(--panel); }
.reference-week-head { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; }
.reference-week-head > .icon { color:var(--accent-text); width:16px; height:16px; }
.reference-progress-ring { width:41px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--accent) var(--days),var(--control-border) 0); position:relative; }
.reference-progress-ring::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--panel); }
.reference-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; font-size:10px; color:var(--muted); }
.reference-days > span { display:grid; justify-items:center; gap:4px; }
.reference-days i { width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--control-border); border-radius:50%; }
.reference-days i.done { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.reference-days .icon { width:12px; height:12px; }
.reference-secondary .home-challenges { margin-top:0; }
.home-analytics-plot { color:var(--accent-text); }
.home-analytics-area { color:var(--accent-text); }
.reference-goal-banner { display:flex; gap:10px; align-items:center; border:1px solid var(--accent-line); border-radius:var(--card-radius); padding:13px; background:linear-gradient(135deg,#fff5f6,#fad9e3); }
.reference-goal-banner > .icon { width:28px; height:28px; color:var(--accent); }
.reference-goal-banner > div { display:grid; flex:1; }
.reference-goal-banner span,.reference-goal-banner small { color:var(--muted); font-size:11px; }
.reference-label { font-size:15px; }
.reference-quick { display:grid; gap:7px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.reference-quick .reference-tile { flex-direction:column; justify-content:center; text-align:center; font-size:12px; }
.reference-quick .icon { color:var(--accent); }
.reference-groups { max-width:870px; margin-inline:auto; }
.reference-segments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:3px; border-radius:99px; background:var(--panel-hi); margin-bottom:13px; }
.reference-segments button { min-height:40px; border:0; border-radius:99px; background:transparent; color:var(--muted); font-weight:650; }
.reference-segments button[aria-pressed=true] { background:var(--control-border); color:var(--text); }
.light-screen .reference-segments button[aria-pressed=true] { background:var(--panel); box-shadow:0 1px 3px #3a15221c; }
.reference-groups .group-card { border-radius:var(--card-radius); gap:11px; }
.reference-groups .group-card-top .tile-icon { background:var(--accent-soft); color:var(--accent-text); border-radius:12px; }
.reference-groups .row-actions { display:flex; justify-content:stretch; }
.reference-groups .row-actions .primary { flex:1; }
.reference-groups > .page-actions { margin-top:12px; }
.reference-reward { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; padding:15px; margin-bottom:12px; border:0; border-radius:var(--card-radius); background:var(--accent-gradient); color:var(--accent-ink); text-align:left; }
.reference-reward > .icon:first-child { width:31px; height:31px; }
.reference-reward strong { font-size:25px; letter-spacing:-.035em; font-weight:780; }
.reference-reward small { font-size:12px; }
.reference-menu { display:grid; gap:7px; }
.light-screen .refresh-extra .extra-profile-avatar { background:var(--accent-gradient); color:var(--accent-ink); }
.light-screen .refresh-extra .extra-rank-row { border-radius:10px; }
.light-screen .daily-goal { margin-bottom:12px; }
.focus-deck { --deck-deep:#171318; --deck-glow:#21161b; }
.focus-deck .deck-hero { border-radius:var(--card-radius); background:radial-gradient(ellipse at 26% 44%,#2f1925 0%,#171317 53%,var(--bg) 82%); }
.focus-deck .deck-hero::before,.focus-deck .deck-hero::after,.focus-deck .clock-stage::before,.focus-deck .clock-stage::after { content:none; }
.focus-deck .deck-hero .clock-stage { width:min(100%,295px); }
.focus-deck .timer-face { width:100%; background:radial-gradient(circle,#141014 52%,#2a141f); box-shadow:0 0 29px #ff31752e; }
.focus-deck .ring-value,.focus-deck:not(.deck-live) .ring-track { stroke:url(#timer-gradient); stroke-width:4.5; filter:none; }
.focus-deck .ring-track { stroke:#482e3e; stroke-width:4.5; }
.focus-deck .timer-number { font-size:clamp(36px,10vw,55px); letter-spacing:-.052em; }
.focus-deck .deck-status { background:var(--panel); border-color:var(--border); }
.focus-deck .deck-cta { background:var(--accent-gradient); color:var(--accent-ink); border:0; border-radius:var(--control-radius); }
.focus-deck .deck-cta:hover { background:var(--accent-gradient-hover); color:var(--accent-ink); }
@media(max-width:800px) {
  .sidebar .nav-item[aria-current=page] { border-radius:12px; }
  .reference-home { grid-template-columns:minmax(0,1fr); max-width:520px; gap:12px; }
  .reference-groups .group-grid { grid-template-columns:1fr; }
  .focus-deck .deck-hero { grid-template-columns:minmax(0,1fr); padding:15px 14px 25px; text-align:center; justify-items:center; gap:12px; }
  .focus-deck .deck-copy h1 { margin-inline:auto; font-size:25px; }
  .focus-deck .deck-copy p { margin:7px auto 0; font-size:13px; }
  .focus-deck .deck-kicker { display:none; }
  .focus-deck .deck-hero-actions { justify-content:center; }
  .focus-deck .deck-hero .clock-stage { width:min(71vw,255px); }
  .focus-deck .deck-grid { margin-top:11px; padding-inline:0; }
}
@media(max-width:350px) {
  .reference-tile { padding-inline:7px; gap:5px; }
  .reference-tile .icon { width:16px; }
  .top-actions .live-shortcut { display:none; }
}
:root { --accent-hover:#ff79a4; }
.light-screen .refresh-extra .refresh-extra-panel { box-shadow:0 2px 9px #3617250c; }
@media(min-width:801px) {
  .topbar .screen-title { display:none; }
}
@media(hover:none) {
  .sidebar .nav-item:not([aria-current=page]):hover { background:transparent; }
}

/* Weekly rankings inside Rewards */
.refresh-extra .weekly-heading { align-items:flex-start; }
.weekly-toolbar { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin:0 0 12px; }
.weekly-toolbar .weekly-switch { width:min(100%,250px); margin:0; }
.weekly-range { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; }
.weekly-range .icon { width:14px; height:14px; color:var(--accent-text); }
.light-screen .refresh-extra .extra-rank-row.is-you .extra-avatar { background:var(--accent-soft); color:var(--accent-text); }