:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #293e38; background: #f5f6f2; --accent: #356c58; --tint: #e8f0ea; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.app { width: min(100% - 40px, 620px); margin: 56px auto 32px; }
header { text-align: center; margin-bottom: 30px; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--tint); color: var(--accent); font-size: 30px; }
h1 { font-size: 25px; letter-spacing: 2px; margin: 14px 0 10px; }
header p, footer, .hint, .stats-note { color: #64736d; font-size: 14px; line-height: 1.8; }
.timer-card { background: #fff; padding: 30px; border: 1px solid #e2e8e0; border-radius: 26px; text-align: center; box-shadow: 0 12px 40px #30493806; }
.mode-switch { display: flex; gap: 5px; background: #f2f4f0; padding: 5px; border-radius: 13px; }
button { font: inherit; cursor: pointer; border: 1px solid #dce3dc; border-radius: 12px; background: #fff; color: #344c42; padding: 13px 18px; min-height: 48px; transition: background .15s; touch-action: manipulation; }
button:hover:not(:disabled) { background: #edf2ec; }
button:focus-visible { outline: 3px solid #bd8e34; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: default; }
.mode { flex: 1; padding: 10px 4px; border: 0; background: transparent; font-size: 14px; }
.mode.active { background: #fff; color: var(--accent); box-shadow: 0 2px 6px #243b3210; font-weight: 600; }
.eyebrow { margin: 36px 0 8px; font-size: 14px; color: var(--accent); letter-spacing: 3px; }
.timer { font-size: clamp(68px, 16vw, 104px); line-height: 1.2; font-weight: 600; letter-spacing: -4px; font-variant-numeric: tabular-nums; }
.status { min-height: 48px; margin: 20px 0; font-size: 15px; color: #64736d; line-height: 1.6; }
.controls { display: flex; gap: 10px; }
.controls button { flex: 1; }
.controls .primary { flex: 1.6; background: var(--accent); color: white; border-color: var(--accent); }
.controls .primary:hover:not(:disabled) { filter: brightness(.92); background: var(--accent); }
.hint { font-size: 12px; margin: 18px 0 0; }
.stats { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; margin-top: 18px; background: #eaf0e7; border-radius: 20px; }
.stats p { margin: 0; font-size: 13px; }
.stats .count { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.count strong { font-size: 32px; font-variant-numeric: tabular-nums; }
footer { text-align: center; font-size: 12px; margin-top: 24px; }
.storage-notice { font-size: 13px; color: #855820; line-height: 1.6; }
body.break { --accent: #456c8b; --tint: #e8eef5; }
.timer-card.finished { border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
.finished .status { color: var(--accent); font-weight: 600; }
@media (max-width: 440px) { .app { width: calc(100% - 28px); margin-top: 28px; } .timer-card { padding: 20px 16px; } .controls { gap: 7px; } .controls button { padding: 12px 8px; font-size: 14px; } .stats { padding: 20px; } .stats-note { font-size: 12px; } }