:root{
  --bg:#0b1020; --card:#12172a; --ink:#e6eefc; --muted:#94a3b8;
  --brand:#0ea5e9; --accent:#22d3ee; --danger:#ef4444; --ok:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root.light{ --bg:#f7f9fc; --card:#ffffff; --ink:#0f172a; --muted:#475569; --brand:#0284c7; --accent:#06b6d4; --danger:#dc2626; --ok:#16a34a; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,rgba(34,211,238,.15),transparent 60%), var(--bg); color:var(--ink); font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
a{color:var(--accent);text-decoration:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(180deg,rgba(14,165,233,.25),transparent);position:sticky;top:0;backdrop-filter:blur(8px)}
.brand{display:flex;gap:12px;align-items:center}.logo{font-size:28px}h1{margin:0;font-size:20px}.pro{color:var(--accent);font-weight:700}.tag{margin:0;color:var(--muted);font-size:12px}.quick .btn{margin-left:8px}
.grid{display:grid;grid-template-columns:2.2fr 2fr 1.8fr 1.6fr;gap:16px;max-width:1200px;margin:20px auto;padding:0 16px}
@media (max-width:1100px){.grid{grid-template-columns:1fr 1fr}} @media (max-width:720px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px;}
.timer .modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{background:#0b1224;color:var(--ink);border:1px solid #223056;padding:6px 10px;border-radius:999px;cursor:pointer}
.chip.active{background:var(--brand)}
.display{font-size:72px;text-align:center;margin:18px 0 8px 0;font-variant-numeric:tabular-nums}
.controls{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
.custom{display:flex;gap:10px;align-items:center;justify-content:center;margin:6px 0}
.custom label{display:flex;gap:6px;align-items:center}
.meta{display:flex;gap:14px;justify-content:center;color:var(--muted);font-size:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.task-form{display:grid;grid-template-columns:1fr 120px 100px 140px 90px;gap:8px;margin-bottom:10px}
.task-form input, .task-form select{padding:10px;border-radius:10px;border:1px solid #24314f;background:#0b1224;color:var(--ink)}
.task-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #223056;border-radius:12px;background:#0b1224}
.task.done{opacity:.6;text-decoration:line-through}
.task .tag{background:#0b1a32;color:var(--accent);padding:2px 8px;border-radius:999px;font-size:12px}
.task .due{color:var(--muted);font-size:12px}
.break .ambient{margin-top:16px}.mix{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center}
.ach-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ach{padding:10px;border:1px solid #223056;border-radius:12px;background:#0b1224;display:flex;gap:10px;align-items:center}
.ach .medal{font-size:18px}
.btn{border:none;border-radius:12px;padding:10px 14px;background:#223056;color:#d9e6ff;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#00111e;font-weight:700}
.btn.danger{background:linear-gradient(90deg,#ef4444,#f97316);color:#2c0d0d}
.btn.ghost{background:transparent;border:1px solid #223056}
.foot{max-width:1200px;margin:20px auto 40px;padding:0 16px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap}
.fine{font-size:12px;color:var(--muted)}
dialog{border:0;border-radius:16px;background:var(--card);color:var(--ink);padding:16px;box-shadow:var(--shadow)}
.dialog .row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
#installBtn{display:none}