/* Мультитемность: 6 тем, значение хранится в localStorage и ставится атрибутом data-theme на . Каждая тема переопределяет только токены. */ :root { --bg: #182133; --surface: #1f2b41; --text: #eef2fa; --muted: #9fb0cc; --accent: #6ea8fe; --border: #31415f; --green: #4cc38a; --yellow: #e9c46a; --red: #e2544a; --radius: 14px; --focus: #ffd166; } [data-theme="day"] { --bg: #f4f6fb; --surface: #ffffff; --text: #16203a; --muted: #5a6a88; --accent: #2f5bd7; --border: #d5dcea; --focus: #b35c00; } [data-theme="sepia"] { --bg: #f3e9d8; --surface: #fbf4e8; --text: #3a2f22; --muted: #7a6a55; --accent: #9c5b2b; --border: #ddcdb4; --focus: #7a3d00; } [data-theme="forest"] { --bg: #10231b; --surface: #173226; --text: #e6f3ea; --muted: #9dc0ac; --accent: #6fd39b; --border: #275342; --focus: #ffd166; } [data-theme="contrast"] { --bg: #000000; --surface: #000000; --text: #ffffff; --muted: #e0e0e0; --accent: #ffff00; --border: #ffffff; --focus: #00ffff; --green: #00ff66; --yellow: #ffff00; --red: #ff4136; } [data-theme="rose"] { --bg: #2a1622; --surface: #3a1f2f; --text: #fbe9f1; --muted: #d3a7bd; --accent: #ff8fb1; --border: #58304a; --focus: #ffd166; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100dvh; padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; overflow-x: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--text); padding: 8px 12px; z-index: 10; } .skip-link:focus { left: 8px; top: 8px; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 8px; flex-wrap: wrap; } .brand { font-size: 1rem; font-weight: 600; margin: 0; color: var(--muted); } .topbar-right { display: flex; align-items: center; gap: 10px; } .streak { margin: 0; color: var(--muted); font-size: .95rem; } .streak-value { color: var(--accent); font-size: 1.15rem; } .icon-btn { min-width: 44px; min-height: 44px; border-radius: var(--radius); background: var(--surface); color: var(--text); border: 1px solid var(--border); font-size: 1.1rem; cursor: pointer; } .stage { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 24px; } .topic { font-size: clamp(1.4rem, 6vw, 2.1rem); line-height: 1.25; font-weight: 600; margin: 0; min-height: 2.6em; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .timer { border: 3px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; background: var(--surface); transition: border-color .2s ease, background-color .2s ease; } .timer[data-signal="green"] { border-color: var(--green); } .timer[data-signal="yellow"] { border-color: var(--yellow); } .timer[data-signal="red"] { border-color: var(--red); } .timer[data-signal="over"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 18%, var(--surface)); } .phase { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; } .clock { margin: 4px 0 0; font-size: clamp(2.6rem, 14vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 700; } .controls { display: flex; gap: 12px; flex-wrap: wrap; } button.primary, button.secondary { flex: 1 1 160px; min-height: 56px; border-radius: var(--radius); font-size: 1.05rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); } button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } button.secondary { background: var(--surface); color: var(--text); } .hint { color: var(--muted); font-size: .85rem; margin: 0; } .warning { color: var(--red); margin: 0; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .panel h2 { margin: 0 0 12px; font-size: 1rem; } .field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .field input, .field select { min-height: 44px; min-width: 120px; padding: 6px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 1rem; } .counters { color: var(--muted); margin: 0 0 10px; } .history { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .history li { color: var(--text); } .history .meta { color: var(--muted); font-size: .85rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }