:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f4f7f2;
  color: #203128;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.shell { width: min(680px, calc(100% - 28px)); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
.hero { margin: 0 2px 20px; }
.eyebrow { margin: 0 0 7px; color: #2f7549; font-size: 14px; font-weight: 750; letter-spacing: .06em; }
h1 { margin: 0; font-size: clamp(30px, 8vw, 44px); letter-spacing: -.035em; }
h2 { margin: 0 0 15px; font-size: 19px; }
.subtle, .message, .warning { color: #627169; }
.subtle { margin: 8px 0 0; line-height: 1.5; }

.card { margin-bottom: 14px; padding: 19px; background: #fff; border: 1px solid #dbe5dc; border-radius: 18px; box-shadow: 0 8px 24px rgba(27, 66, 39, .06); }
.setting-row { display: flex; align-items: center; gap: 10px; }
.setting-row label { font-weight: 650; flex: 1; }
input[type="time"] { min-height: 44px; border: 1px solid #bac9bd; border-radius: 10px; padding: 8px 10px; background: #fff; color: inherit; }
button { min-height: 44px; border: 0; border-radius: 11px; padding: 10px 15px; font-weight: 700; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.primary { width: 100%; min-height: 56px; background: #2f7549; color: #fff; font-size: 18px; box-shadow: 0 6px 14px rgba(37, 101, 61, .22); }
.primary:active { transform: translateY(1px); }
.secondary { background: #e7f0e9; color: #225f39; }
.message { min-height: 20px; margin: 12px 0 0; font-size: 14px; }

.status-line { display: flex; align-items: center; gap: 9px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #9ca8a0; }
.dot.running { background: #32a05b; box-shadow: 0 0 0 5px #dbf2e3; }
.dot.ended { background: #3675bc; }
.current-task { margin: 23px 0 7px; font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.timer { margin: 0; font-variant-numeric: tabular-nums; color: #546159; }
.heard { min-height: 45px; margin: 17px 0 0; padding: 11px 12px; border-radius: 10px; background: #f1f5f1; color: #4d5b52; line-height: 1.45; }
.task-list { margin: 16px 0 0; padding-left: 25px; }
.task-list li { min-height: 41px; padding: 9px 0 9px 4px; }
.task-list li::marker { color: #8a988d; font-weight: 700; }
.task-state { float: right; color: #738076; font-size: 14px; }
.task-list li.active { color: #277044; font-weight: 750; }
.task-list li.done .task-state { color: #277044; }
.warning { margin: 13px 0 0; font-size: 14px; line-height: 1.55; }
.warning.error { color: #aa3831; }

.summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.summary-grid dt { color: #69776e; }
.summary-grid dd { margin: 0; font-variant-numeric: tabular-nums; }
.history-note { font-size: 14px; }
.ios-note { padding: 5px 4px; color: #55645a; font-size: 13px; line-height: 1.55; }

@media (max-width: 380px) {
  .shell { width: min(100% - 22px, 680px); }
  .card { padding: 16px; }
  .setting-row { flex-wrap: wrap; }
  .setting-row label { min-width: 100%; }
}