:root {
  color-scheme: dark;
  --bg: #101116;
  --side: #12141b;
  --panel: #191b24;
  --panel-hi: #202330;
  --panel-hover: #242737;
  --field: #161820;
  --border: #303342;
  --control-border: #535970;
  --muted: #a2a8bc;
  --text: #f2f3fa;
  --text-soft: #c5c9d9;
  --accent: #a59bff;
  --accent-hover: #bbb3ff;
  --accent-text: #b9b1ff;
  --accent-ink: #141125;
  --accent-soft: #292540;
  --accent-line: #49436a;
  --accent-gradient: linear-gradient(108deg, #9b91ff, #b0a7ff);
  --accent-gradient-hover: linear-gradient(108deg, #b1a8ff, #c3bbff);
  --green: #65e3bc;
  --green-soft: #17332e;
  --green-line: #2b5c50;
  --amber: #f4be7c;
  --amber-soft: #382b26;
  --amber-line: #584235;
  --rose: #ff9aaf;
  --rose-soft: #362630;
  --rose-line: #653747;
  --sans: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);min-width:300px}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
button,a,input,select{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
h1,h2,h3,p{margin:0}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:inline-block;width:19px;height:19px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:fixed;top:-100px;left:12px;z-index:10;background:var(--accent);color:var(--accent-ink);padding:10px 15px;border-radius:8px}
.skip:focus{top:10px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:222px minmax(0,1fr)}
.sidebar{background:var(--side);border-right:1px solid var(--border);min-height:100vh;height:100dvh;position:sticky;top:0;display:flex;flex-direction:column;padding:27px 16px 17px;color:var(--text)}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.035em;font-weight:750;margin:0 9px}
.eyebrow,.field-label,.stat-label,.mini-label{font-size:11px;letter-spacing:.085em;font-weight:700}
.nav-item{background:transparent;color:var(--text-soft);border:1px solid transparent;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:7px;width:100%;min-height:44px;text-align:left;font-weight:600;margin-bottom:4px}
.nav-item:hover{background:var(--panel-hover);color:var(--text)}
.nav-item[aria-current=page]{background:var(--accent-soft);border-color:var(--accent-line);color: var(--accent-text)}
.nav-item .icon{width:17px;height:17px}
.nav-active-dot{display:none;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto;box-shadow:none}
.nav-item[aria-current=page] .nav-active-dot{display:block}
.sidebar-bottom{margin-top:auto}
.help-link{margin:0}
.workspace{min-width:0}
.topbar{height:69px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 clamp(20px,3vw,44px);background:var(--panel)}
.top-location,.top-actions{display:flex;align-items:center;gap:12px}
.top-location{color:var(--muted);font-size:13px}
.top-location strong{color:var(--text);font-weight:650}
.slash{color:var(--muted)}
.wallet-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:7px 10px;background:var(--panel-hi);color: var(--accent-text);font-size:12px;font-weight:720;white-space:nowrap;font-variant-numeric:tabular-nums}
.wallet-pill .icon{width:15px;height:15px}
.wallet-label{color:var(--muted);font-weight:500}
.top-avatar{background:var(--accent-soft);color: var(--accent-text);display:grid;place-items:center;border:1px solid var(--accent-line);width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:750}
.mobile-brand{display:none}
main{width:min(100%,1280px);margin:0 auto;padding:35px clamp(20px,3.4vw,48px) 37px;outline:none}
.page-intro{margin-bottom:24px;display:flex;justify-content:space-between;align-items:end;gap:16px}
.eyebrow{color: var(--accent-text);display:flex;align-items:center;gap:7px;margin-bottom:7px}
.eyebrow .icon{width:13px;height:13px}
.eyebrow:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:none}
.page-intro h1{font-size:clamp(32px,3.4vw,44px);font-weight:750;letter-spacing:-.045em;line-height:1.1}
.page-intro p{margin-top:6px;color:var(--muted);font-size:14px}
.page-tag,.pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-radius:6px;border:1px solid var(--accent-line);background:var(--accent-soft);color: var(--accent-text);font-size:11px;font-weight:650;padding:5px 10px}
.page-tag{margin-bottom:4px}
.page-tag:before,.live-dot{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:none}
.clock-side{min-height:376px;isolation:isolate;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at 51% 44%,#211e34,#202234 62%,var(--accent-soft));overflow:hidden;border-right:0;color:var(--text)}
.clock-side:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#a59bff16 1px,transparent 1px),linear-gradient(90deg,#a59bff16 1px,transparent 1px);background-size:27px 27px;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 78%)}
.clock-side:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #a59bff13;border-radius:13px 0 0 13px;z-index:-1}
.clock-stage{width:min(88%,330px);aspect-ratio:1;position:relative;display:grid;place-items:center}
.orbit{position:absolute;left:50%;top:50%;aspect-ratio:1;border:1px solid #a59bff2b;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.orbit.o1{width:83%}
.timer-face{position:relative;width:72%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;box-shadow:0 3px 18px #05061018;background:var(--panel)}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--border);stroke-width:2.2}
.ring-value{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;filter:none;transition:stroke-dasharray .35s ease}
.clock-text{text-align:center;z-index:1}
.clock-text>.icon{width:18px;height:18px;color: var(--accent-text);margin-bottom:7px}
.timer-number{font-size:clamp(38px,4.7vw,63px);font-variant-numeric:tabular-nums;font-weight:660;letter-spacing:-.055em;line-height:1}
.mini-label{color:var(--muted);margin-top:9px}
.clock-caption{position:absolute;bottom:17px;left:9px;right:9px;text-align:center;color:var(--text-soft);font-size:12px;display:flex;justify-content:center;align-items:center;gap:7px}
.clock-caption .icon{width:13px;height:13px;color: var(--accent-text)}
.setup-side{padding:24px clamp(19px,2.7vw,38px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.setup-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px}
.setup-head h2,.section-heading h2,.page-intro+.section-heading h2{font-size:21px;line-height:1.2;font-weight:720;letter-spacing:-.025em}
.stake-chip{color: var(--accent-text);background:var(--accent-soft);border-color:var(--accent-line)}
.stake-chip .icon{width:14px;height:14px}
.setup-form{display:grid;gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field-label{color:var(--text-soft);letter-spacing:.075em}
.input,.select{width:100%;min-width:0;min-height:42px;border:1px solid var(--control-border);background:var(--field);color:var(--text);border-radius:7px;padding:8px 11px}
.input::placeholder{color:var(--muted);opacity:1}
.select-wrap{position:relative;display:block}
.select{appearance:none;padding:8px 34px 8px 35px}
.select-wrap>.icon{position:absolute;pointer-events:none;color:var(--muted);width:15px;height:15px;top:50%;transform:translateY(-50%)}
.select-wrap>.leading{left:11px}
.select-wrap>.trailing{right:11px}
.presets{display:flex;gap:6px}
.preset{background:var(--field);border:1px solid var(--control-border);color:var(--text-soft);padding:7px 4px;min-height:39px;border-radius:7px;flex:1;white-space:nowrap;font-size:12px;font-weight:650}
.preset:hover,.preset[aria-pressed=true]{color: var(--accent-text);background:var(--accent-soft);border-color:var(--accent-line)}
.custom-field{margin-top:3px}
.primary,.secondary,.danger,.ghost,.text-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:39px;padding:8px 13px;border-radius:8px;font-weight:700;border:1px solid transparent;line-height:1.2}
.primary{background:var(--accent-gradient);border-color:transparent;color:var(--accent-ink);box-shadow:0 2px 4px #05061015}
.primary:hover{background:var(--accent-gradient-hover)}
.secondary{background:var(--accent-soft);border-color:var(--accent-line);color: var(--accent-text)}
.secondary:hover{background:var(--panel-hover)}
.ghost:hover{background:var(--panel-hover)}
.ghost{background:var(--panel);border-color:var(--control-border);color:var(--text-soft)}
.danger{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.danger:hover{background:#513342}
.text-btn{padding:3px 0;min-height:32px;border:0;background:none;color: var(--accent-text);white-space:nowrap}
.text-btn:hover{text-decoration:underline}
.primary .icon,.secondary .icon,.danger .icon,.ghost .icon,.text-btn .icon{width:16px;height:16px}
.start-btn{width:100%;min-height:44px;margin-top:2px}
.start-btn .icon{fill:currentColor;stroke-width:0}
.form-note{color:var(--muted);font-size:12px;text-align:center}
.form-note strong{color:var(--text);font-weight:650}
.session-info{color:var(--muted);margin:0 0 17px;overflow-wrap:anywhere}
.active-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}
.active-meta div{background:var(--panel-hi);border:1px solid var(--border);border-radius:8px;padding:9px 11px;min-width:0}
.active-meta strong{display:block;font-size:15px;color:var(--text);overflow-wrap:anywhere}
.active-buttons{display:grid;gap:7px}
.active-buttons button{width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0 27px}
.stat{padding:16px;display:flex;align-items:center;gap:13px;border:1px solid var(--border);background:var(--panel);border-radius:10px;min-width:0}
.tile-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;flex:none;background:var(--accent-soft);border:1px solid var(--accent-line);color: var(--accent-text)}
.tile-icon.green{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.tile-icon.amber{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.tile-icon.blue{background:var(--accent-soft);border-color:var(--accent-line);color: var(--accent-text)}
.stat-label{color:var(--muted);letter-spacing:.075em;display:block}
.stat-value{font-size:24px;letter-spacing:-.045em;line-height:1.15;font-weight:720;display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.section-heading p{color:var(--muted);margin-top:3px;font-size:13px}
.group-preview{background:var(--panel);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:13px;padding:13px 15px}
.group-preview h3,.group-card h3{font-weight:740;font-size:15px;letter-spacing:-.01em;overflow-wrap:anywhere}
.group-preview p,.group-card p{color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.group-preview .avatar-stack{margin-left:auto}
.group-preview .tile-icon{width:37px;height:37px}
.group-preview .pill{margin-left:5px}
.avatar-stack{display:flex;align-items:center;padding-left:5px;flex:none}
.mini-avatar{width:28px;height:28px;border:2px solid var(--panel);border-radius:50%;margin-left:-5px;display:grid;place-items:center;color:var(--accent-text);font-size:9px;font-weight:800;background:var(--accent-soft)}
.mini-avatar:nth-child(3n+2){background:var(--accent-soft)}
.mini-avatar:nth-child(3n){background:var(--amber-soft)}
.mini-avatar.you{background:var(--accent-line);color:var(--accent-ink)}
.page-actions,.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:25px}
.group-card{border:1px solid var(--border);border-radius:10px;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:13px}
.group-card-top{display:flex;align-items:center;gap:11px}
.group-card-top>div{flex:1;min-width:0}
.group-card-top .pill{font-size:10px}
.group-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.group-card p.group-description{font-size:13px;margin:0;min-height:36px}
.quiet-panel{padding:21px;border:1px dashed var(--control-border);border-radius:12px;color:var(--muted);margin-bottom:23px}
.empty{display:grid;justify-items:center;text-align:center;gap:9px;padding:40px 22px;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.empty h3{font-size:19px}
.empty p{color:var(--muted);max-width:370px}
.empty .primary{margin-top:7px}
.history-list{display:grid;gap:9px}
.history-item{display:flex;align-items:center;gap:11px;text-align:left;width:100%;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:12px}
.history-item:hover{border-color:var(--accent-line);background:var(--panel-hover)}
.history-item strong,.history-item small{display:block;overflow-wrap:anywhere}
.history-item small{color:var(--muted);font-size:12px}
.history-item .tile-icon{width:36px;height:36px}
.history-item .pill{margin-left:auto}
.positive{color:var(--green)!important}
.negative{color:var(--rose)!important}
.history-filters{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 13px}
.history-filters .preset{flex:0 0 auto;padding:6px 13px}
.foot-note{display:flex;align-items:center;gap:7px;margin-top:19px;color:var(--muted);font-size:11px}
.foot-note .icon{width:13px;height:13px}
.notice{position:fixed;z-index:8;bottom:18px;right:20px;max-width:min(420px,calc(100vw - 40px));background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 15px;box-shadow:0 8px 24px #04050c26}
.notice[hidden]{display:none}
dialog{width:min(485px,calc(100% - 28px));max-height:calc(100dvh - 36px);border:1px solid var(--border);border-radius:15px;background:var(--panel);color:var(--text);padding:0;box-shadow:0 24px 70px #04050c24}
dialog::backdrop{background:#080910ac;backdrop-filter:blur(3px)}
.dialog-body{padding:23px}
.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:0 0 12px}
.dialog-head h2{font-size:25px;letter-spacing:-.035em;line-height:1.15}
.icon-button{width:34px;height:34px;flex:none;display:grid;place-items:center;color:var(--muted);background:var(--panel-hi);border:1px solid var(--border);border-radius:8px}
.icon-button:hover{color:var(--text)}
.dialog-body>p,.dialog-form>p{color:var(--muted);margin-bottom:14px}
.dialog-body ol{padding-left:19px;color:var(--muted);margin:13px 0}
.dialog-body li{margin-bottom:9px}
.dialog-body li strong{color:var(--text)}
.dialog-form{display:grid;gap:12px}
.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:15px}
.dialog-actions>*{flex:0 1 auto}
.breakdown{background:var(--panel-hi);border:1px solid var(--border);border-radius:10px;padding:4px 12px;margin:12px 0}
.breakdown>div{display:flex;justify-content:space-between;gap:9px;padding:8px 0}
.breakdown>div+div{border-top:1px solid var(--border)}
.breakdown span{color:var(--muted)}
.breakdown strong{text-align:right}
.invite-code{font:700 20px var(--mono);letter-spacing:.1em;user-select:all}
.result-status{display:flex;gap:10px;align-items:center;margin-bottom:13px}
.result-status .tile-icon{width:38px;height:38px}
.result-status span:last-child{color:var(--muted)}
.small-note{font-size:12px;color:var(--muted)}
.mobile-note{display:none}

@media(max-width:1050px){
  .app-shell{grid-template-columns:186px minmax(0,1fr)}
  .sidebar{padding-left:11px;padding-right:11px}
  .clock-side{min-height:355px}
  .setup-side{padding-top:18px;padding-bottom:18px}
  .setup-head h2{font-size:19px}
  .stat{gap:9px;padding:12px}
  .stat .tile-icon{width:34px;height:34px}
  .stat .tile-icon .icon{width:16px;height:16px}
}


@media(max-width:800px){
  .app-shell{display:flex;flex-direction:column}
  .workspace{order:-1}
  .sidebar{height:auto;min-height:0;position:sticky;top:auto;bottom:0;z-index:5;padding:5px 8px max(5px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--border)}
  .sidebar>.brand,.sidebar-bottom,.nav-active-dot{display:none!important}
  .sidebar nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
  .nav-item{justify-content:center;margin:0;gap:5px;padding:8px 3px;font-size:12px}
  .nav-item .icon{width:15px;height:15px}
  .mobile-brand{display:inline-flex;margin:0 1px 0 0}
  .topbar{height:56px}
  .top-location,.top-actions{gap:8px}
  main{padding-top:22px;min-height:calc(100dvh - 110px)}
  .notice{bottom:65px}
  .mobile-note{display:block}
}


@media(max-width:650px){
  .top-section,.slash,.top-avatar{display:none}
  .topbar{padding:0 15px}
  main{padding-left:14px;padding-right:14px}
  .page-intro{margin-bottom:16px;align-items:start;flex-direction:column;gap:10px}
  .page-intro h1{font-size:34px}
  .page-intro p{font-size:13px}
  .page-tag{display:none}
  .clock-side{min-height:262px}
  .clock-side:after{border-radius:13px 13px 0 0}
  .clock-stage{width:252px;max-width:90%;margin-bottom:13px}
  .clock-caption{bottom:9px}
  .timer-number{font-size:50px}
  .clock-text>.icon{width:14px;height:14px;margin-bottom:4px}
  .mini-label{margin-top:7px;font-size:9px}
  .setup-side{padding:16px}
  .setup-head{margin-bottom:11px}
  .stats{gap:6px;margin:10px 0 21px}
  .stat{display:block;padding:8px;min-height:92px}
  .stat .tile-icon{width:25px;height:25px;border-radius:6px;margin-bottom:4px}
  .stat .tile-icon .icon{width:13px;height:13px}
  .stat-label{font-size:10px;letter-spacing:.025em}
  .stat-value{font-size:19px}
  .group-grid{grid-template-columns:1fr}
  .group-preview .pill{display:none}
  .group-preview{gap:8px;padding:10px}
  .mini-avatar{width:24px;height:24px;font-size:8px}
  .section-heading h2{font-size:19px}
  .foot-note{align-items:start}
  .wallet-pill{padding:5px 8px}
  .history-item{padding:9px;gap:7px}
  .history-item .pill{font-size:9px;padding:4px 6px}
  .history-item .tile-icon{width:29px;height:29px}
  .history-item small{font-size:11px}
  .input,.select{font-size:16px;min-height:44px}
  .preset{min-height:44px}
}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.optional{color:var(--muted);font-weight:550}
.foot-note .text-btn{font-size:11px;min-height:20px;margin-left:4px;vertical-align:baseline}
.action-error{color:var(--rose)!important;font-size:12px;margin:8px 0 0!important}
.history-item>span:nth-child(2){min-width:0}
.history-item .pill{flex:none}
.split-details{margin:10px 0 12px;color: var(--accent-text);font-size:12px}
.split-details summary{cursor:pointer;min-height:30px;padding:6px 0;font-weight:700}
.split-details .breakdown{margin-top:3px}
.top-actions .icon{pointer-events:none}
.wallet-pill:hover{background:var(--accent-soft)}
.sidebar :focus-visible,.clock-side :focus-visible{outline-color:var(--accent-text)}
.history-item .pill.positive{background:var(--green-soft);border-color:var(--green-line)}
.history-item .pill.negative{background:var(--rose-soft);border-color:var(--rose-line)}

/* The alternate focus layout inherits the workspace controls and page theme. */
.focus-deck {
  --deck-deep: #1e1d32;
  --deck-glow: #1b2031;
  --deck-line: var(--border);
  --deck-shadow: 0 12px 36px #05061015, 0 2px 5px #0506100a;
  container: focus-deck / inline-size;
}

.focus-deck .deck-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(16px, 3.6cqi, 44px);
  min-height: 270px;
  padding: 24px clamp(22px, 4.6cqi, 58px) 35px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(112deg, var(--deck-deep), var(--deck-glow) 82%);
  color: var(--text);
  box-shadow: 0 14px 38px #0506100e;
}

.focus-deck .deck-hero::before,
.focus-deck .deck-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.focus-deck .deck-hero::before {
  top: -59%;
  right: -16%;
  width: min(78%, 800px);
  aspect-ratio: 1;
  border: 1px solid #a59bff34;
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px #a59bff08, inset 0 0 0 21px #a59bff1f, 0 0 0 24px #a59bff0c, 0 0 0 25px #a59bff28, 0 0 0 52px #a59bff08, 0 0 0 53px #a59bff14;
  background: radial-gradient(ellipse at 58% 58%, #a59bff10, transparent 62%);
  transform: translate(4%, 4%);
}

.focus-deck .deck-hero::after {
  inset: 0 0 0 42%;
  background-image: linear-gradient(90deg, #a59bff23 1px, transparent 1px), linear-gradient(#a59bff23 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 78% 26%, #000a 2%, transparent 67%);
}

.focus-deck .deck-copy {
  position: relative;
  min-width: 0;
}

.focus-deck .deck-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.focus-deck .deck-kicker .icon {
  width: 15px;
  height: 15px;
}

.focus-deck .deck-copy h1 {
  max-width: 18ch;
  font-size: clamp(34px, 5.1cqi, 60px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.focus-deck .deck-copy p {
  max-width: 43ch;
  margin-top: 15px;
  color: var(--text-soft);
  font-size: clamp(14px, 1.75cqi, 18px);
  line-height: 1.55;
}

.focus-deck .deck-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  padding: 5px 10px;
  border: 1px solid #a59bff45;
  border-radius: 100px;
  background: #151622cc;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.focus-deck .deck-status .icon {
  width: 13px;
  height: 13px;
}

.focus-deck .deck-hero :focus-visible {
  outline-color: var(--accent-text);
}

.focus-deck .deck-hero .clock-side {
  min-height: auto;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--text);
}

.focus-deck .deck-hero .clock-side::before,
.focus-deck .deck-hero .clock-side::after {
  content: none;
}

.focus-deck .clock-stage {
  width: min(100%, 238px);
  min-width: 0;
  max-width: none;
  margin: 0;
}

.focus-deck .clock-stage::before,
.focus-deck .clock-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.focus-deck .clock-stage::before {
  inset: 4%;
  border: 1px solid #a59bff30;
  border-radius: 50%;
}

.focus-deck .clock-stage::after {
  width: 8px;
  height: 8px;
  top: 15%;
  right: 17%;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 13px #a59bff8c;
}

.focus-deck .orbit.o1 {
  width: 84%;
  border: 1px dashed #a59bff55;
}

.focus-deck .timer-face {
  width: 73%;
  background: radial-gradient(circle at 54% 30%, var(--panel), #1c1e2c 84%);
  box-shadow: 0 9px 27px #04050c24, inset 0 0 22px #a59bff1a;
}

.focus-deck .timer-number {
  font-size: clamp(35px, 4.6cqi, 48px);
  font-weight: 740;
  letter-spacing: -.075em;
}

.focus-deck .clock-text > .icon {
  margin-bottom: 5px;
  color: var(--accent-text);
}

.focus-deck .mini-label {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 9px;
  letter-spacing: .105em;
}

.focus-deck .ring-track {
  stroke: #3c3a51;
  stroke-width: 2.3;
}

.focus-deck .ring-value {
  stroke: var(--accent);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 2px #a59bff55);
}

.focus-deck .clock-caption {
  position: static;
  max-width: 32ch;
  margin: 0 5px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.3;
}

.focus-deck .clock-caption .icon {
  color: var(--accent-text);
}

.focus-deck .deck-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
  grid-template-areas: "setup goal" "setup overview";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 14px;
  margin-top: -22px;
  padding: 0 clamp(12px, 3.2cqi, 40px);
}

.focus-deck .deck-setup,
.focus-deck .deck-group,
.focus-deck .deck-rail .stats {
  border: 1px solid var(--deck-line);
  border-radius: 17px;
  background: var(--panel);
  box-shadow: var(--deck-shadow);
}

.focus-deck .deck-setup {
  grid-area: setup;
  padding: clamp(17px, 3cqi, 32px);
}

.focus-deck .setup-head {
  margin-bottom: 18px;
}

.focus-deck .setup-head h2,
.focus-deck .deck-group .section-heading h2 {
  color: var(--text);
  font-size: clamp(19px, 2.4cqi, 25px);
  letter-spacing: -.03em;
}

.focus-deck .setup-form {
  gap: 14px;
}

.focus-deck .input,
.focus-deck .select,
.focus-deck .preset {
  border-color: var(--control-border);
  border-radius: 9px;
}

.focus-deck .input,
.focus-deck .select {
  min-height: 44px;
}

.focus-deck .presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(53px, 1.28fr);
  gap: 5px;
}

.focus-deck .preset[aria-pressed=true] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.focus-deck .start-btn {
  min-height: 47px;
  border-color: var(--accent);
  border-radius: 10px;
  background: var(--accent-gradient);
  box-shadow: 0 4px 10px #6759a517;
}

.focus-deck .start-btn:not(:disabled):hover {
  border-color: var(--accent-hover);
  background: var(--accent-gradient-hover);
  box-shadow: 0 6px 17px #6759a520;
}

.focus-deck .deck-rail {
  grid-area: overview;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.focus-deck .deck-rail .stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 4px 15px;
}

.focus-deck .deck-rail .stat {
  display: flex;
  gap: 9px;
  min-height: 0;
  padding: 9px 0;
  border: 0;
  border-radius: 0;
}

.focus-deck .deck-rail .stat + .stat {
  border-top: 1px solid var(--border);
}

.focus-deck .deck-rail .stat .tile-icon {
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 9px;
}

.focus-deck .deck-rail .stat .tile-icon .icon {
  width: 16px;
  height: 16px;
}

.focus-deck .deck-rail .stat > div {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.focus-deck .deck-rail .stat-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
}

.focus-deck .deck-rail .stat-value {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  text-align: right;
  overflow-wrap: anywhere;
}

.focus-deck .deck-group {
  padding: 12px 15px;
}

.focus-deck .deck-group .section-heading {
  margin: 0 0 5px;
}

.focus-deck .deck-group .section-heading h2 {
  font-size: 16px;
}

.focus-deck .deck-group .section-heading .text-btn {
  min-height: 32px;
  font-size: 12px;
}

.focus-deck .deck-group .group-preview {
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 1px;
  border: 0;
  border-radius: 0;
}

.focus-deck .deck-group .group-preview > div {
  flex: 1;
  min-width: min(110px, 100%);
}

.focus-deck .deck-group .group-preview .pill {
  display: none;
}

@keyframes deck-art-drift {
  from { transform: translate(0, 0) scale(.93); }
  to { transform: translate(4%, 4%) scale(1); }
}

@keyframes deck-show {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .focus-deck.deck-enter .deck-hero::before {
    animation: deck-art-drift 2.7s cubic-bezier(.17, .67, .22, 1) both;
  }

  .focus-deck.deck-enter .deck-copy,
  .focus-deck.deck-enter .clock-stage,
  .focus-deck.deck-enter .deck-grid {
    animation: deck-show 480ms cubic-bezier(.17, .67, .22, 1) both;
  }

  .focus-deck.deck-enter .clock-stage { animation-delay: 80ms; }
  .focus-deck.deck-enter .deck-grid { animation-delay: 120ms; }

  .focus-deck .start-btn {
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .focus-deck .start-btn:not(:disabled):hover { transform: translateY(-1px); }
  .focus-deck .start-btn:not(:disabled):active { transform: translateY(0); }
}

@container focus-deck (min-width: 950px) {
  .focus-deck .setup-form {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    align-items: start;
  }

  .focus-deck .setup-form > :first-child,
  .focus-deck .setup-form > .start-btn,
  .focus-deck .setup-form > .form-note {
    grid-column: 1 / -1;
  }
}

@container focus-deck (max-width: 670px) {
  .focus-deck .deck-hero {
    min-height: 0;
    padding-bottom: 37px;
  }

  .focus-deck .deck-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "goal" "setup" "overview";
    grid-template-rows: auto;
  }

  .focus-deck .deck-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@container focus-deck (max-width: 510px) {
  .focus-deck .deck-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 23px 21px 25px;
    border-radius: 18px;
  }

  .focus-deck .deck-hero::before {
    top: 15%;
    right: -34%;
    width: 110%;
  }

  .focus-deck .deck-hero::after { inset: 18% 0 0 10%; }
  .focus-deck .deck-kicker { margin-bottom: 9px; }
  .focus-deck .deck-copy h1 { max-width: 18ch; font-size: clamp(32px, 8.9cqi, 44px); }
  .focus-deck .deck-copy p { margin-top: 10px; }
  .focus-deck .deck-status { margin-top: 12px; }
  .focus-deck .clock-stage { width: min(100%, 208px); }
  .focus-deck .timer-number { font-size: 38px; }
  .focus-deck .clock-caption { margin-top: -1px; }
  .focus-deck .deck-grid { gap: 11px; margin-top: 11px; padding: 0; }
  .focus-deck .deck-rail { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .focus-deck .setup-head { margin-bottom: 12px; }
  .focus-deck .setup-form { gap: 11px; }
}

/* Seven-day activity card in the Focus deck. */
.focus-activity {
  min-width: 0;
  padding: 18px 19px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.focus-activity .focus-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.focus-activity h2 {
  font-size: 16px;
  font-weight: 740;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.focus-activity .focus-activity-range,
.focus-activity .focus-activity-note {
  color: var(--muted);
  font-size: 11px;
}
.focus-activity .focus-activity-range { white-space: nowrap; }
.focus-activity .focus-activity-total {
  margin-top: 8px;
  font-size: 25px;
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.focus-activity .focus-activity-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.focus-activity .focus-activity-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 12px 0 8px;
  padding: 0;
  list-style: none;
  background: repeating-linear-gradient(to top, var(--border) 0 1px, transparent 1px 19px) 0 0 / 100% 58px no-repeat;
}
.focus-activity .focus-activity-day { min-width: 0; text-align: center; }
.focus-activity .focus-activity-slot {
  display: flex;
  height: 58px;
  align-items: end;
  justify-content: center;
}
.focus-activity .focus-activity-bar {
  width: min(21px, 68%);
  height: var(--activity-height);
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  background: var(--accent-text);
  transform-origin: bottom;
}
.focus-activity .is-today .focus-activity-bar { background: var(--accent); }
.focus-activity .focus-activity-day .is-empty { background: var(--control-border); animation: none; }
.focus-activity .focus-activity-day-label {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 550;
}
.focus-activity .is-today .focus-activity-day-label { color: var(--accent-text); font-weight: 750; }
.focus-activity .focus-activity-note { margin: 0; }
@keyframes focus-activity-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
  .deck-enter .focus-activity .focus-activity-bar:not(.is-empty) {
    animation: focus-activity-rise 450ms cubic-bezier(.2, .8, .25, 1) var(--activity-delay) both;
  }
}

/* Focus controls and navigation. */
.deck-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 14px;
  margin-top: 20px;
}
.focus-deck .deck-hero-actions .deck-status { margin-top: 0; }
.deck-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 13px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-gradient);
  color: var(--accent-ink);
  font-weight: 750;
}
.deck-cta:hover { background: var(--accent-gradient-hover); }
.deck-cta .icon { order: 1; width: 16px; height: 16px; }

.focus-deck .focus-activity {
  margin: 14px clamp(12px, 3.2cqi, 40px) 0;
  box-shadow: var(--deck-shadow);
}
@container focus-deck (min-width: 675px) {
  .focus-deck .focus-activity {
    display: grid;
    grid-template-columns: minmax(170px, .44fr) minmax(0, 1fr);
    align-items: center;
    gap: 2px 24px;
    padding: 18px 22px;
  }
  .focus-activity .focus-activity-head { grid-column: 1; grid-row: 1; }
  .focus-activity .focus-activity-total { grid-column: 1; grid-row: 2; margin: 0; }
  .focus-activity .focus-activity-note { grid-column: 1; grid-row: 3; }
  .focus-activity .focus-activity-chart { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .focus-activity .focus-activity-bar { width: min(32px, 68%); }
}
@container focus-deck (max-width: 510px) {
  .focus-deck .focus-activity { margin-inline: 0; }
  .deck-hero-actions { margin-top: 14px; }
}

@keyframes deck-live-pulse {
  0%, 100% { box-shadow: 0 0 8px #a59bff92; }
  50% { box-shadow: 0 0 17px 3px #a59bff92; }
}
@media (prefers-reduced-motion: no-preference) {
  .focus-deck.deck-live .clock-stage::after { animation: deck-live-pulse 1.8s ease-in-out 3; }
  .deck-cta, .deck-settings, .nav-item { transition: background-color 160ms ease; }
}

@media (min-width: 801px) {
  .app-shell {
    --header-gutter: max(20px, calc((100vw - 1190px) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .workspace { display: contents; }
  .sidebar {
    grid-area: 1 / 1;
    position: static;
    height: auto;
    min-height: 0;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 9px 12px 9px var(--header-gutter);
    border: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar > .brand { flex: none; margin: 0; }
  .sidebar .nav-item .nav-active-dot { display: none; }
  .sidebar nav { display: flex; justify-content: center; flex: 1; min-width: 0; gap: 4px; }
  .sidebar .nav-item { width: auto; margin: 0; white-space: nowrap; }
  .topbar {
    grid-area: 1 / 2;
    height: auto;
    min-height: 62px;
    padding: 0 var(--header-gutter) 0 4px;
  }
  .topbar .top-location { display: none; }
  main { grid-column: 1 / -1; padding-top: 25px; }
}

/* Friends demo */
.friends-page .friends-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 200px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--text);
  background: radial-gradient(ellipse at 90% 25%, #a59bff18 0, transparent 62%), linear-gradient(115deg, #1e1d32, var(--amber-soft));
}
.friends-page .friends-hero-content { z-index: 1; padding: clamp(24px, 4vw, 42px); }
.friends-page h1 { margin-top: 11px; font-size: clamp(34px, 5.5vw, 54px); line-height: 1.05; letter-spacing: -.05em; }
.friends-page .friends-hero p { margin: 8px 0 19px; color: var(--text-soft); }
.friends-page .friends-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.friends-page .friends-actions .primary { color: var(--accent-ink); border-color: transparent; background: var(--accent-gradient); }
.friends-page .friends-actions .primary:hover { background: var(--accent-gradient-hover); }
.friends-page .friends-actions .ghost { color: var(--text); border-color: var(--accent-line); background: var(--panel); }
.friends-page .friends-actions .ghost:hover { background: var(--panel-hi); }
.friends-page .friends-actions button:focus-visible { outline-color: var(--accent-text); }
.friends-page .friends-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.friends-page .friends-list { display: grid; align-content: start; gap: 10px; min-width: 0; }
.friends-page .friends-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 2px; }
.friends-page .friends-section-head h2, .friends-page .friends-group-link h2 { font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
.friends-page .friends-section-head > span, .friends-page .friends-group-link p { color: var(--muted); font-size: 12px; }
.friends-page .friend-card, .friends-page .friends-empty, .friends-page .friends-group-link { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.friends-page .friend-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-width: 0; }
.friends-page .friend-card-name { flex: 1; min-width: 0; }
.friends-page .friend-card h3 { overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.friends-page .friend-card p { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.friends-page .friend-card .secondary { flex: none; min-height: 36px; padding: 7px 10px; }
.friends-page .friend-avatar { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 750; }
.friends-page .friend-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--green); font-size: 10px; font-weight: 700; }
.friends-page .friend-badge .icon { width: 13px; height: 13px; }
.friends-page .friends-empty { padding: 15px; color: var(--muted); font-size: 13px; }
.friends-page .friends-group-link { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-top: 16px; padding: 15px; }
.friends-page .friends-group-link > div { flex: 1; min-width: 160px; }
.friends-page .friends-group-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 8px; color: var(--accent-text); background: var(--accent-soft); }
.friends-page .friends-local { display: flex; align-items: center; gap: 6px; margin: 13px 1px 0; color: var(--muted); font-size: 11px; }
.friends-page .friends-local .icon { width: 13px; height: 13px; }
.dialog-form .friend-form-error { margin: 0; color: var(--rose); font-size: 12px; }
@media (max-width: 680px) {
  .friends-page .friends-hero { min-height: 0; }
  .friends-page .friends-hero-content { padding-right: 0; }
  .friends-page .friends-columns { grid-template-columns: 1fr; }
  .friends-page .friend-card .secondary { min-height: 42px; }
}

.focus-deck .timer-number.long-time { font-size: clamp(27px, 4.2cqi, 45px); }
.deck-cta .icon { order: 0; }
.deck-cta[data-action="start-stopwatch"] .icon,
.deck-cta[data-action="stop-stopwatch"] .icon { fill: currentColor; }
.deck-settings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 7px;
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.deck-settings:hover { color: var(--text); }
.deck-settings .icon { width: 14px; height: 14px; }
.live-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.live-shortcut:hover { background: var(--panel-hover); }
.phone-settings-list { display: grid; gap: 12px; }
.phone-settings-list section {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-hi);
}
.phone-settings-list h3 { margin-bottom: 5px; font-size: 15px; }
.phone-settings-list p { color: var(--muted); }
.phone-settings-list a { margin-top: 4px; white-space: normal; }
@media (max-width: 650px) {
  .sidebar .nav-item { flex-direction: column; gap: 2px; font-size: 11px; }
  .live-shortcut:not([hidden]) + .wallet-pill .wallet-label { display: none; }
}
@container focus-deck (max-width: 510px) {
  .focus-deck .timer-number.long-time { font-size: clamp(28px, 7.9cqi, 36px); }
}

/* Daily focus goal */
.daily-goal {
  grid-area: goal;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--deck-line, var(--border));
  border-radius: 17px;
  background: var(--panel);
  box-shadow: var(--deck-shadow, none);
}
.daily-goal .daily-goal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.daily-goal .daily-goal-icon {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.daily-goal .daily-goal-icon .icon { width: 17px; height: 17px; }
.daily-goal h2 {
  flex: 1;
  min-width: 86px;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.daily-goal .daily-goal-header .secondary {
  min-height: 36px;
  padding: 5px 10px;
  white-space: nowrap;
  font-size: 12px;
}
.daily-goal .daily-goal-time {
  margin: 11px 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.daily-goal .daily-goal-time strong {
  margin-right: 2px;
  color: var(--text);
  font-size: 24px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.daily-goal .daily-goal-track {
  height: 8px;
  margin: 8px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}
.daily-goal .daily-goal-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent-gradient);
}
.daily-goal .daily-goal-status { margin: 0; color: var(--muted); font-size: 12px; }
.daily-goal-reached .daily-goal-icon { color: var(--green); background: var(--green-soft); }
.daily-goal-reached .daily-goal-fill { background: var(--green); }
.daily-goal-reached .daily-goal-status { color: var(--green); font-weight: 700; }
.daily-goal-actions .daily-goal-remove { margin-right: auto; color: var(--rose); }
@media (max-width: 400px) {
  .daily-goal { padding: 14px; }
  .daily-goal .daily-goal-header .secondary { min-height: 44px; }
}

.group-deadline-setup {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 10px 14px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-hi);
}
.deadline-explainer strong { font-size: 12px; }
.deadline-explainer p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.round-deadlines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.round-deadlines > div {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-hi);
}
.round-deadlines strong { display: block; margin-top: 2px; font-size: 13px; }
.peer-status-list { display: grid; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.peer-status-list li { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 12px; }
.peer-status-list .pill { padding: 3px 7px; }
@media (max-width: 400px) {
  .group-deadline-setup { grid-template-columns: minmax(0, 1fr); }
  .round-deadlines .field-label { font-size: 10px; }
  .history-item .pill { white-space: normal; text-align: right; max-width: 100px; }
}

.brand-mark { display: block; flex: none; }
.top-location { min-width: 0; }
@media (min-width: 801px) and (max-width: 960px) {
  .sidebar { gap: 10px; }
  .sidebar .nav-item { padding-inline: 7px; font-size: 13px; }
  .sidebar .nav-item .icon { display: none; }
}

/* Keep the header usable when all sections are present on a small phone. */
@media (max-width: 420px) {
  .sidebar .nav-item { gap: 2px; padding-inline: 2px; font-size: clamp(8px, 2.45vw, 10px); text-align: center; line-height: 1.15; }
  .sidebar .nav-item .icon { width: 16px; height: 16px; }
}