* { box-sizing: border-box; }
:root {
  --bg:#0b0f19; --panel:#151b29; --panel2:#1b2334; --text:#f7f8fb;
  --muted:#9ca7ba; --accent:#e53935; --accent2:#ff6659; --line:#2b3448;
  --done:#42b883;
}
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
}
button,input { font:inherit; }
.hero {
  background:radial-gradient(circle at 80% 0%, #402020 0, transparent 40%), #111725;
  border-bottom:1px solid var(--line); padding:42px 18px 30px;
}
.hero-inner, main { max-width:900px; margin:auto; }
.eyebrow { color:var(--accent2); letter-spacing:.18em; font-weight:800; font-size:.75rem; margin:0; }
h1 { font-size:clamp(2rem,7vw,4rem); line-height:1; margin:10px 0; letter-spacing:-.04em; }
.sub { color:var(--muted); margin-bottom:28px; }
.dashboard { display:flex; gap:28px; align-items:center; }
.ring {
  width:138px; height:138px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:conic-gradient(var(--accent) 0deg, #30394c 0deg);
}
.ring-inner {
  width:108px; height:108px; border-radius:50%; background:#111725;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring strong { font-size:1.8rem; }
.ring span { font-size:.62rem; color:var(--muted); letter-spacing:.12em; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; flex:1; }
.stats div { background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:14px; }
.stats strong { display:block; font-size:1.5rem; }
.stats span { color:var(--muted); font-size:.75rem; }
.next-card {
  margin-top:24px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(135deg,#8f201f,#d43b35);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.next-label { font-size:.65rem; letter-spacing:.18em; font-weight:800; opacity:.8; }
.next-card h2 { margin:5px 0 0; font-size:1.25rem; }
.next-card p { margin:4px 0 0; opacity:.75; font-size:.85rem; }
main { padding:24px 18px 60px; }
.toolbar { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter {
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:999px; padding:8px 13px; cursor:pointer;
}
.filter.active { color:white; background:#323d53; border-color:#56627a; }
.hide-toggle { color:var(--muted); font-size:.85rem; display:flex; gap:7px; align-items:center; }
.phase { margin:34px 0; }
.phase-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:10px; }
.phase-title { margin:0; font-size:1.35rem; }
.phase-progress { color:var(--muted); font-size:.8rem; white-space:nowrap; }
.bar { height:5px; background:#222b3c; border-radius:999px; overflow:hidden; margin-bottom:12px; }
.bar > div { height:100%; background:var(--accent); width:0; transition:.25s; }
.work-list { display:grid; gap:8px; }
.work {
  display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center;
  background:var(--panel); border:1px solid var(--line); padding:13px 14px;
  border-radius:13px; transition:.2s;
}
.work.done { opacity:.58; background:#111722; }
.work.done .title { text-decoration:line-through; }
.number { color:#65718a; font-size:.78rem; text-align:center; }
.title { font-weight:700; }
.meta { color:var(--muted); font-size:.75rem; margin-top:2px; }
.type { display:inline-block; margin-right:6px; color:#d5d9e2; }
.check {
  appearance:none; width:25px; height:25px; border-radius:8px;
  border:2px solid #58647b; cursor:pointer; position:relative;
}
.check:checked { background:var(--done); border-color:var(--done); }
.check:checked::after {
  content:"✓"; position:absolute; color:#07150f; font-weight:900; left:4px; top:-2px; font-size:19px;
}
.future { margin-top:50px; padding-top:24px; border-top:1px solid var(--line); }
.future h2 { margin-bottom:0; }
.future > p { color:var(--muted); font-size:.85rem; }
.future-list { display:grid; gap:8px; }
.future-item { background:#111722; border:1px dashed #3b465c; border-radius:12px; padding:13px 15px; }
.future-item strong { display:block; }
.future-item span { color:var(--muted); font-size:.75rem; }
.settings { text-align:center; margin-top:50px; }
.danger { background:transparent; color:#ef7773; border:1px solid #743b3b; border-radius:10px; padding:10px 14px; cursor:pointer; }
.settings p, footer { color:#667188; font-size:.75rem; }
footer { text-align:center; border-top:1px solid var(--line); padding:24px; }
.empty { color:var(--muted); text-align:center; padding:24px; border:1px dashed var(--line); border-radius:12px; }
@media(max-width:600px) {
  .dashboard { align-items:stretch; }
  .ring { width:112px; height:112px; }
  .ring-inner { width:88px; height:88px; }
  .ring strong { font-size:1.45rem; }
  .stats { gap:6px; }
  .stats div { padding:9px 7px; }
  .stats strong { font-size:1.15rem; }
  .work { grid-template-columns:32px 1fr auto; padding:12px 10px; gap:9px; }
}