html{background:#000}
body{
  background-color:#000;
  background-image:
    radial-gradient(70rem 44rem at 8% -8%,rgba(96,20,160,.46),transparent 64%),
    radial-gradient(48rem 34rem at 96% 16%,rgba(43,10,104,.36),transparent 68%),
    linear-gradient(160deg,#150633 0%,#090012 36%,#000 74%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,rgba(255,229,0,.025),transparent 25%,rgba(191,95,255,.045) 62%,transparent 88%);
}
body[data-phase="R"],body[data-phase="A"],body[data-phase="C"],body[data-phase="E"]{
  background-image:
    radial-gradient(70rem 44rem at 8% -8%,rgba(96,20,160,.46),transparent 64%),
    radial-gradient(48rem 34rem at 96% 16%,rgba(43,10,104,.36),transparent 68%),
    linear-gradient(160deg,#150633 0%,#090012 36%,#000 74%);
}

.nav{
  background:rgba(7,2,16,.78);
  border-color:rgba(105,62,160,.34);
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  -webkit-backdrop-filter:saturate(150%) blur(20px);
  backdrop-filter:saturate(150%) blur(20px);
}
.nav-brand,.greeting h1,.card-title{color:var(--text-bright)}
.nav-link[aria-current="page"]{color:var(--action)!important}

main{position:relative}
.greeting-eyebrow,.card-eyebrow{font-weight:700}
.greeting-chip,.phase-pill,.plan-day-tag,.sub-status,.plan-today-chip{border-radius:999px}

.card,.session-card,.score-card{
  background:var(--private-card);
  border-color:var(--private-card-border);
  border-radius:var(--private-radius);
  box-shadow:var(--private-shadow);
}
.session-card{
  background:linear-gradient(160deg,rgba(255,229,0,.08),rgba(31,14,63,.84) 40%,rgba(12,4,28,.96));
}
.score-card{
  background:
    radial-gradient(circle at 50% 45%,rgba(108,31,190,.16),transparent 48%),
    linear-gradient(155deg,rgba(38,16,78,.76),rgba(10,3,24,.96));
}
.btn,.btn-ghost{border-radius:var(--private-pill);min-height:var(--private-target)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(148,107,202,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(191,95,255,.72)}
.plan-day,.session-item,.sub-row{border-color:rgba(93,56,137,.42)}
.plan-day{border-radius:var(--private-radius-compact);background:rgba(31,14,63,.56)}

#reveal-rings4{
  overflow:hidden;
  background:
    radial-gradient(40rem 22rem at 90% -10%,rgba(191,95,255,.13),transparent 64%),
    linear-gradient(155deg,rgba(31,14,63,.9),rgba(10,3,24,.98));
}
.rings4{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.ring-mini{
  --widget-rgb:255,229,0;
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;min-height:142px;
  display:grid;grid-template-columns:48px minmax(0,1fr) 24px;
  grid-template-rows:1fr auto;
  gap:2px 14px;align-items:center;
  padding:18px 18px;text-align:left;color:var(--text);
  font:inherit;cursor:pointer;
  border:1px solid rgba(var(--widget-rgb),.46);
  border-radius:999px;
  background:
    linear-gradient(90deg,rgba(var(--widget-rgb),.18),rgba(var(--widget-rgb),.075) 58%,rgba(13,5,29,.62)),
    rgba(15,6,34,.88);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 40px -30px rgba(var(--widget-rgb),.8);
  transition:transform .22s ease,border-color .22s ease,background-color .22s ease,box-shadow .22s ease;
}
.ring-mini[data-key="recovery"]{--widget-rgb:var(--metric-recovery-rgb)}
.ring-mini[data-key="sleep"]{--widget-rgb:var(--metric-sleep-rgb)}
.ring-mini[data-key="exertion"]{--widget-rgb:var(--metric-load-rgb)}
.ring-mini[data-key="protocol"]{--widget-rgb:var(--metric-protocol-rgb)}
.ring-mini[data-key="hrv"]{--widget-rgb:var(--metric-cyan-rgb)}
.ring-mini[data-key="restingHR"]{--widget-rgb:var(--metric-heart-rgb)}
.ring-mini[data-key="oxygen"]{--widget-rgb:var(--metric-cyan-rgb)}
.ring-mini:hover{transform:translateY(-2px);border-color:rgba(var(--widget-rgb),.8);box-shadow:0 22px 46px -28px rgba(var(--widget-rgb),.78)}
.ring-mini:active{transform:scale(.992)}
.ring-mini:focus-visible{outline:3px solid rgba(var(--widget-rgb),.88);outline-offset:3px}
.ring-mini-icon{
  grid-row:1/3;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:rgb(var(--widget-rgb));
  background:rgba(var(--widget-rgb),.17);
}
.ring-mini-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ring-mini-copy{grid-column:2;grid-row:1;min-width:0;align-self:end;display:flex;flex-direction:column}
.ring-mini-lbl{font-family:'Inter',system-ui,sans-serif;font-size:13px;letter-spacing:0;color:var(--text);text-transform:none;font-weight:500}
.ring-mini-val{font-family:'Inter',system-ui,sans-serif;font-size:28px;color:rgb(var(--widget-rgb))!important;margin-top:2px;font-weight:750;line-height:1.05}
.ring-mini-meta{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}
.ring-mini-open{grid-column:3;grid-row:1/3;color:rgb(var(--widget-rgb));font-size:22px;line-height:1;align-self:center}
.ring-mini-trend{grid-column:2;grid-row:2;min-height:22px;align-items:flex-start;flex-direction:row;margin-top:4px;gap:8px}
.ring-mini-spark{max-width:82px;height:20px}
.ring-mini-delta{font-size:9px;align-self:center}
.rings4-cta{border-color:rgba(105,62,160,.4)}

.metric-dialog{
  width:min(92vw,540px);padding:0;color:var(--text);
  border:1px solid rgba(var(--metric-rgb,191,95,255),.55);border-radius:28px;
  background:linear-gradient(155deg,rgba(35,15,70,.99),rgba(7,2,18,.99));
  box-shadow:0 38px 100px rgba(0,0,0,.72);
}
.metric-dialog::backdrop{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.metric-dialog-inner{padding:26px}
.metric-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.metric-dialog-kicker{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--metric-rgb,191,95,255))}
.metric-dialog-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(255,255,255,.055);color:var(--text-bright);font-size:24px;cursor:pointer}
.metric-dialog-close:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.metric-dialog h2{margin:18px 0 4px;color:var(--text-bright);font-size:30px;letter-spacing:-.035em}
.metric-dialog-value{margin:0;color:rgb(var(--metric-rgb,191,95,255));font-size:42px;font-weight:800;letter-spacing:-.04em}
.metric-dialog-context{margin:5px 0 22px;color:var(--text-muted);font-size:13px;min-height:1.4em}
.metric-dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric-dialog-panel{padding:16px;border:1px solid rgba(112,70,162,.38);border-radius:18px;background:rgba(255,255,255,.035)}
.metric-dialog-panel h3{margin:0 0 7px;font-size:12px;color:var(--text-bright)}
.metric-dialog-panel p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.55}
.metric-dialog-source{margin:16px 0 0;color:var(--text-dim);font-size:11.5px;line-height:1.5}
.metric-dialog-actions{display:flex;justify-content:flex-end;margin-top:22px}

@media(max-width:700px){
  main{padding-top:32px}
  #reveal-rings4{padding-inline:14px}
  .rings4{grid-template-columns:1fr 1fr;gap:10px}
  .ring-mini{min-height:124px;grid-template-columns:42px minmax(0,1fr) 18px;padding:14px 12px;gap:2px 10px;border-radius:28px}
  .ring-mini-icon{width:42px;height:42px}
  .ring-mini-icon svg{width:21px;height:21px}
  .ring-mini-val{font-size:19px;white-space:nowrap}
  .ring-mini-meta{font-size:10.5px}
  .ring-mini-open{font-size:18px}
  .ring-mini-spark{max-width:54px}
}
@media(max-width:390px){
  .rings4{gap:8px}
  .ring-mini{grid-template-columns:38px minmax(0,1fr) 14px;padding:13px 10px;gap:2px 8px}
  .ring-mini-icon{width:38px;height:38px}
  .ring-mini-val{font-size:18px}
  .ring-mini-meta{font-size:10px}
}
@media(max-width:520px){
  .card,.session-card,.score-card{border-radius:22px}
  .metric-dialog-inner{padding:22px 18px}
  .metric-dialog-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ring-mini{transition:none}
  .ring-mini:hover,.ring-mini:active{transform:none}
}