:root{
  --bg:#0f1420;
  --bg2:#161d2e;
  --fg:#eaf0ff;
  --dim:#8ea0c4;
  --accent:#4f9dff;
  --accent2:#25c9a5;
  --warn:#ffb454;
  --ring-bg:#222c42;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
body.mode-stretch{--accent:#25c9a5}
body.phase-break{--accent:var(--warn)}

.app{
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
  gap:18px;
  max-width:720px;margin:0 auto;
}

/* tabs */
.tabs{display:flex;gap:6px;background:var(--bg2);padding:6px;border-radius:999px;width:100%;max-width:420px}
.tab{
  flex:1;appearance:none;border:0;background:transparent;color:var(--dim);
  font-size:16px;font-weight:600;padding:12px 8px;border-radius:999px;
  transition:background .18s,color .18s;
}
.tab.is-active{background:var(--accent);color:#08101f}

/* dial */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;width:100%}
.dial{position:relative;width:min(78vw,min(52vh,360px));aspect-ratio:1}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring-bg{stroke:var(--ring-bg)}
.ring-fg{
  stroke:var(--accent);
  stroke-dasharray:578.05;
  stroke-dashoffset:578.05;
  transition:stroke .3s;
}
.readout{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
}
.phase{font-size:clamp(15px,4.2vw,20px);font-weight:700;color:var(--accent);letter-spacing:.04em}
.time{
  font-size:clamp(46px,15vw,86px);font-weight:250;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  letter-spacing:-.02em;
}
.sub{font-size:13px;color:var(--dim);min-height:1.2em}

/* controls */
.controls{display:flex;align-items:center;gap:14px}
.btn{
  appearance:none;border:0;border-radius:999px;font-weight:700;
  color:var(--fg);background:var(--bg2);
  transition:transform .08s,opacity .15s;
}
.btn:active{transform:scale(.95)}
.btn-ghost{font-size:15px;padding:14px 18px;min-width:88px;color:var(--dim)}
.btn-primary{
  font-size:20px;padding:20px 44px;min-width:172px;
  background:var(--accent);color:#08101f;
}
.btn[disabled]{opacity:.35}

/* panel */
.panel{width:100%;max-width:420px}
.panel-toggle{
  width:100%;appearance:none;border:0;background:var(--bg2);color:var(--dim);
  font-size:15px;font-weight:600;padding:14px;border-radius:var(--radius);
}
.panel-body{background:var(--bg2);border-radius:var(--radius);margin-top:8px;padding:6px 16px 14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff0f}
.row:last-of-type{border-bottom:0}
.label{font-size:15px}
.unit{font-size:13px;color:var(--dim)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{
  appearance:none;border:0;width:38px;height:38px;border-radius:12px;
  background:#ffffff14;color:var(--fg);font-size:20px;line-height:1;
}
.stepper button:active{background:#ffffff2a}
.stepper output{min-width:2.2em;text-align:right;font-size:19px;font-variant-numeric:tabular-nums}
input[type=range]{width:160px;accent-color:var(--accent)}
.switch{position:relative;display:inline-block;width:52px;height:31px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#ffffff26;border-radius:999px;transition:background .2s}
.switch span::after{
  content:"";position:absolute;left:3px;top:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::after{transform:translateX(21px)}
.note{font-size:12px;color:var(--dim);line-height:1.6;margin:12px 0 0}
[data-only]{display:flex}
body.mode-pomodoro [data-only="stretch"],
body.mode-stretch [data-only="pomodoro"]{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}