:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-idle:#9ca3af;--color-work:#ef4444;--color-break:#10b981;--color-warn:#f59e0b;--bg:#fff;--bg-soft:#f1f3f5;--text:#1f2937;--text-soft:#6b7280;--border:#e5e7eb;font-family:system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#20242b;--bg-soft:#2c313a;--text:#f3f4f6;--text-soft:#9ca3af;--border:#3a3f47}}*{box-sizing:border-box}body{text-align:center;justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex}#app{width:100%;padding:16px}.widget{background:var(--bg);width:100%;max-width:300px;color:var(--text);border:1px solid var(--border);border-top:4px solid var(--color-idle);border-radius:16px;flex-direction:column;align-items:center;gap:12px;margin:0 auto;padding:20px;transition:border-top-color .3s;display:flex}.widget.work{border-top-color:var(--color-work)}.widget.break{border-top-color:var(--color-break)}.phase-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);font-size:12px;font-weight:600}.timer{font-variant-numeric:tabular-nums;font-size:48px;font-weight:700;line-height:1}.timer.overtime{color:var(--color-warn)}.progress-track{background:var(--bg-soft);border-radius:999px;width:100%;height:6px;overflow:hidden}.progress-fill{background:var(--color-idle);border-radius:999px;height:100%;transition:width 1s linear}.widget.work .progress-fill{background:var(--color-work)}.widget.break .progress-fill{background:var(--color-break)}.overtime-message{color:var(--color-warn);margin:0;font-size:12px}.task{background:var(--bg-soft);border-radius:10px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 12px;display:flex}.task-name{text-align:left;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.task-time{font-variant-numeric:tabular-nums;color:var(--text-soft);flex-shrink:0;font-size:13px}.actions{gap:8px;width:100%;display:flex}button{color:var(--text);background:var(--bg-soft);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex:1;padding:10px 12px;font-family:inherit;font-size:13px;font-weight:600;transition:opacity .15s,transform .1s}button:hover:not(:disabled){opacity:.85}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--color-break);border-color:var(--color-break);color:#fff}.status{color:var(--text-soft);margin:0;font-size:12px}.status.reconnecting{color:var(--color-warn)}.status.error{color:var(--color-work)}