*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0f0f13;--surface:#1a1a22;--border:#2a2a35;
  --text:#e8e8ec;--sub:#8888a0;--accent:#6c63ff;--danger:#e94560;
  --radius:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:20px 16px}
#app{max-width:420px;margin:0 auto}
header h1{font-size:20px;font-weight:600;color:var(--sub);margin-bottom:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.card h2{font-size:12px;font-weight:500;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:15px}
.row:last-child{border-bottom:none}
.row.sub{font-size:13px;color:var(--sub);padding:6px 0 0;border-bottom:none}
.badge{font-size:12px;background:#4a45b0;padding:2px 8px;border-radius:6px}
.switch{position:relative;width:48px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--border);border-radius:14px;cursor:pointer;transition:background .2s}
.slider::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:var(--sub);border-radius:50%;transition:transform .2s,background .2s}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider::before{transform:translateX(20px);background:#fff}
.switch input:disabled+.slider{opacity:.4;cursor:default}
input[type="date"],input[type="time"]{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:15px}
input[type="time"]:disabled{opacity:.4}
#category-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
#category-buttons button{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:14px;cursor:pointer;transition:border-color .15s}
#category-buttons button:active{border-color:var(--accent)}
#custom-form{display:flex;gap:8px;margin-bottom:14px}
#custom-form input{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px}
#custom-form button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer}
.todo-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.todo-item:last-child{border-bottom:none}
.todo-item .label{flex:1}
.todo-item .time-slot{font-size:12px;color:var(--sub);background:var(--bg);padding:3px 8px;border-radius:6px;cursor:pointer}
.todo-item .vis-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:14px;cursor:pointer;background:var(--bg)}
.todo-item .vis-btn.on{color:var(--accent)}
.todo-item .vis-btn.off{color:var(--sub);opacity:.4}
.todo-item .del-btn{color:var(--danger);cursor:pointer;font-size:16px;opacity:.7}
.empty{text-align:center;color:var(--sub);font-size:13px;padding:12px 0}
.hidden{display:none}
#category-buttons button.active{border-color:var(--accent);background:#262640;color:#fff}