:root{
  --bg:#0b1020;
  --bg2:#111827;
  --surface:#172132;
  --surface2:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#ef4444;
  --primary-2:#dc2626;
  --outline:#334155;
  --success:#10b981;
  --warning:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  margin:0;
  color:var(--text);
  background: radial-gradient(1000px 500px at 10% 0%, #0f172a 0%, var(--bg) 60%), linear-gradient(180deg, #0b1020 0%, #0b1120 100%);
}
.hero{
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(239,68,68,.08), transparent 60%);
}
.hero-inner{max-width:1100px;margin:0 auto;padding:28px 20px}
.hero-bar{display:flex;align-items:center;justify-content:space-between}
.hero-right .btn{margin:0}
.hero h1{margin:0;font-size:28px;font-weight:700;letter-spacing:.5px}
.hero p{margin:6px 0 0;color:var(--muted)}
.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.card{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  padding:18px;
  margin:14px 0;
}
.section-title{margin:0 0 12px;font-size:18px;letter-spacing:.3px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.form-grid{grid-template-columns:1fr 1fr}}
.input{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:#0f172a;
  color:var(--text);
  outline:none;
  transition:.2s border-color,.2s box-shadow;
}
.input:focus{border-color:#4c566a;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.checkbox-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.checkbox-group label{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px dashed rgba(255,255,255,.12);border-radius:10px;color:var(--muted);
}
.actions{display:flex;gap:10px;margin-top:12px}
.btn{
  padding:10px 14px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background,.2s border-color;
}
.btn-primary{
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  box-shadow:0 6px 16px rgba(239,68,68,.35);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
  background:#0f172a;color:var(--text);border-color:rgba(255,255,255,.12)
}
.btn-secondary:hover{border-color:#4c566a}
.btn-outline{
  background:transparent;color:var(--text);border-color:rgba(255,255,255,.16)
}
.btn-outline:hover{border-color:#64748b}
.tasks{list-style:none;margin:0;padding:0}
.tasks li{
  display:flex;align-items:center;gap:10px;justify-content:flex-start;
  padding:10px 12px;margin:8px 0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0b1324;
}
.tasks li.done{opacity:.75;border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.1)}
.tasks .task-text{flex:1;margin-right:10px}
.stats .weekly{margin-top:8px;color:var(--muted);line-height:1.5}
.auth-card{text-align:left}
.toast{
  position:fixed;top:20px;right:20px;padding:10px 14px;border-radius:10px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:50
}
.calendar-nav{display:flex;align-items:center;gap:10px}
#cal-title{min-width:120px;text-align:center;color:#fff}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}
.calendar-day{
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px;text-align:center;cursor:pointer;
  background:#0f172a;color:#fff
}
.calendar-day.none{border-color:#ef4444}
.calendar-day.partial{border-color:#f59e0b}
.calendar-day.all_done{border-color:#10b981}
.calendar-day.future{opacity:.6;border-color:rgba(255,255,255,.12)}
.calendar-day.today{box-shadow:0 0 0 2px rgba(239,68,68,.35) inset}
.calendar-day.selected{outline:2px solid rgba(239,68,68,.45)}
#weekly-tooltip{
  position:absolute;display:none;padding:8px 10px;border-radius:8px;
  background:rgba(17,24,39,.95);color:#fff;border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px;pointer-events:none;z-index:60
}