:root{
  --bg:#0e1016;--panel:#161922;--panel2:#1c2030;--border:#262b3a;--text:#e7e9f0;--muted:#8a92a8;
  --accent:#7c9cff;--accent-soft:rgba(124,156,255,.14);--green:#4ade80;--green-soft:rgba(74,222,128,.14);
  --amber:#fbbf24;--amber-soft:rgba(251,191,36,.14);--red:#f87171;--red-soft:rgba(248,113,113,.14);
  --violet:#c084fc;--radius:14px;--shadow:0 6px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{--bg:#f4f5f9;--panel:#fff;--panel2:#f0f2f7;--border:#e2e5ee;--text:#1a1d29;--muted:#68708a;
    --accent:#4f6ff0;--accent-soft:rgba(79,111,240,.1);--green:#16a34a;--green-soft:rgba(22,163,74,.1);
    --amber:#d97706;--amber-soft:rgba(217,119,6,.1);--red:#dc2626;--red-soft:rgba(220,38,38,.1);
    --violet:#9333ea;--shadow:0 4px 18px rgba(20,25,50,.07);color-scheme:light}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25}
h1{font-size:24px;font-weight:700}
h2{font-size:16px;font-weight:650}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px 11px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
label.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--panel2);
  border-radius:10px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--red)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--border)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.icon{padding:6px 9px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--panel2);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
.chip.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.chip.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.chip.red{background:var(--red-soft);color:var(--red);border-color:transparent}
.chip.blue{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.violet{background:rgba(192,132,252,.14);color:var(--violet);border-color:transparent}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.dot.on{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.dot.off{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .l{font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.bar.green>i{background:var(--green)}.bar.amber>i{background:var(--amber)}.bar.red>i{background:var(--red)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}
.li:last-child{border-bottom:none}
.li .main{flex:1;min-width:0}
.li .title{font-weight:550;overflow-wrap:anywhere}
.li.done .title{text-decoration:line-through;color:var(--muted)}
.li.now{background:var(--accent-soft);border-radius:10px;border-bottom-color:transparent}
.check{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);display:grid;place-items:center;cursor:pointer;flex:none;background:transparent;padding:0;transition:.15s}
.check:hover{border-color:var(--green)}
.check.on{background:var(--green);border-color:var(--green)}
.check.on::after{content:"";width:6px;height:11px;border:solid #0e1016;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:14px}
.tabs{display:inline-flex;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.tabs button{border:0;background:transparent;padding:5px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13px}
.tabs button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.chart{width:100%;display:block;overflow:visible}
.chart text{fill:var(--muted);font-size:11px}
.chart .grid-line{stroke:var(--border);stroke-width:1}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--border);
  padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:100;font-size:14px;animation:fade .2s}
@keyframes fade{from{opacity:0;transform:translate(-50%,8px)}}
dialog{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:16px;padding:0;width:min(520px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(5,7,12,.6);backdrop-filter:blur(2px)}
dialog form{padding:20px;display:flex;flex-direction:column;gap:12px}
.days{display:flex;gap:4px;flex-wrap:wrap}
.days label{cursor:pointer}
.days input{display:none}
.days span{display:inline-block;padding:5px 9px;border-radius:8px;border:1px solid var(--border);font-size:13px;color:var(--muted)}
.days input:checked+span{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px}
.heat i{width:12px;height:12px;border-radius:3px;background:var(--panel2)}
.heat i.l1{background:rgba(74,222,128,.35)}.heat i.l2{background:rgba(74,222,128,.6)}.heat i.l3{background:var(--green)}
@media (max-width:640px){body{font-size:14px}.card{padding:14px}h1{font-size:20px}.g2,.g3{grid-template-columns:1fr}}