:root { --surface-base:#F7F4EE; --surface-raised:#FFFCF7; --surface-subtle:#EEE9DF; --ink-primary:#242522; --ink-secondary:#6C6B63; --border:#DCD6C9; --focus:#C9573D; --focus-ring:#C9573D; }
:root[data-theme="dark"] { --surface-base:#242522; --surface-raised:#30312D; --surface-subtle:#3B3C37; --ink-primary:#F7F4EE; --ink-secondary:#D6D0C5; --border:#5A5B54; --focus:#F07A5F; --focus-ring:#F07A5F; }
.data-panel { width:min(100%,720px); padding:32px 48px; background:var(--surface-raised); border-radius:16px; box-shadow:0 8px 28px rgba(36,37,34,.08); } .data-actions { display:flex; gap:12px; align-items:center; } .file-button { display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--border); border-radius:10px; padding:8px 20px; cursor:pointer; }
.statistics-panel { width:min(100%,720px); padding:32px 48px; background:var(--surface-raised); border-radius:16px; box-shadow:0 8px 28px rgba(36,37,34,.08); } .statistics-summary { font-weight:650; } .statistics-chart { min-height:44px; margin:16px 0; background:var(--surface-subtle); border-radius:8px; overflow:hidden; } .statistics-bar { min-width:2px; min-height:44px; padding:12px; background:var(--focus); color:#fff; font-size:.8rem; }
 body { margin:0; background:var(--surface-base); color:var(--ink-primary); font-family:Inter,system-ui,sans-serif; } .timer-home { min-height:100vh; display:grid; grid-template-columns:minmax(0,720px); place-items:center; padding:32px 16px; gap:24px; } .timer-card,.tasks-panel { width:min(100%,720px); padding:48px; background:var(--surface-raised); border-radius:16px; box-shadow:0 8px 28px rgba(36,37,34,.08); } .timer-card { text-align:center; } .eyebrow { margin:0 0 16px; color:var(--focus); font-size:12px; font-weight:650; letter-spacing:.06em; } h1 { margin:0 0 32px; font-size:24px; line-height:1.2; } h2 { margin:0; } h3 { margin-top:0; } .countdown { font-family:Fraunces,Georgia,serif; font-size:64px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; } .cycle-progress,.selected-task { color:var(--ink-secondary); } .selected-task { margin-bottom:32px; } button,input { min-height:44px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--ink-primary); background:transparent; font:inherit; } button { padding:8px 20px; cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; } .primary-action { width:min(100%,360px); border:0; background:var(--focus); color:#fff; font-weight:650; } .secondary-actions { display:flex; justify-content:center; gap:12px; margin-top:16px; } button:disabled { color:#AAA79D; cursor:not-allowed; } .status { min-height:24px; color:var(--ink-secondary); } .tasks-heading-row { display:flex; justify-content:space-between; align-items:center; gap:16px; } .surface-nav { width:min(100%,720px); display:flex; justify-content:center; gap:24px; } .surface-nav a { color:var(--ink-primary); font-weight:650; } .history-panel { width:min(100%,720px); padding:32px 48px; background:var(--surface-raised); border-radius:16px; box-shadow:0 8px 28px rgba(36,37,34,.08); } .scope-label { color:var(--ink-secondary); font-size:.9rem; } .history-filters { display:grid; grid-template-columns:auto 1fr auto 1fr; align-items:center; gap:8px 12px; margin:24px 0 8px; } .history-filters select { min-height:44px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--ink-primary); background:transparent; font:inherit; } #history-list { list-style:none; padding:0; margin:16px 0 0; } .history-row { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); } .tasks-panel label { display:block; margin-top:16px; } .tasks-panel input { width:100%; margin-top:4px; } .tasks-panel form button { margin-top:16px; margin-right:8px; } .task-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); } #task-list { list-style:none; padding:0; margin:16px 0 0; } @media (max-width:767px) { .timer-card,.tasks-panel,.history-panel,.statistics-panel,.settings-panel,.data-panel { padding:32px 24px; } .countdown { font-size:48px; } .history-filters { grid-template-columns:1fr; } .history-row { grid-template-columns:1fr; gap:4px; } .data-actions { flex-wrap:wrap; } .data-actions > * { flex:1 1 220px; } } @media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }