:root{
  --bg:#0f0f15; --panel:#141421; --text:#e8e8f2; --muted:#9aa0b4; --ring:#2a2a3a;
  --name-col:140px;
  --track-gap:6px;
  --row-gap:10px;
}
*{box-sizing:border-box}
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.app--dark{ background:var(--bg); color:var(--text); min-height:100svh; padding-bottom:76px; }
.habits__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 6px; }
.habits__title{ font-size:22px; font-weight:700; letter-spacing:.2px; }
.habits__title-month{ margin-left:.35em; color:var(--muted); font-weight:600; }
.habits__grid{ padding:10px 8px 8px; }

/* header days: left ‹ › like screenshot */
.habits__days{
  display:grid; grid-template-columns: var(--name-col) 1fr; column-gap: var(--row-gap);
  align-items:end; margin:0 8px 6px;
  color:var(--muted); font-size:12px;
}
.days-nav{ display:flex; align-items:center; justify-content:flex-start; gap:8px; padding-left:8px; }
.btn-nav{
  background:transparent; color:#e8e8f2; border:1px solid var(--ring);
  width:36px; height:28px; border-radius:10px; font-weight:900; line-height:1;
}
.habits__days-numbers{ display:grid; gap:var(--track-gap); grid-template-columns: repeat(7,1fr); }
.daycap{ text-align:center; display:grid; gap:2px; }
.daycap__dow{ opacity:.85; font-weight:800; letter-spacing:.2px; text-transform:uppercase; }
.daycap__num{ color:#dbe1f5; font-weight:800; }

/* rows */
.habits__rows{ display:flex; flex-direction:column; gap:12px; }
.habit-row{ display:grid; grid-template-columns: var(--name-col) 1fr; align-items:center; gap:var(--row-gap); }
.habit-row__name{ display:flex; align-items:center; gap:8px; color:#dfe3f7; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:8px;}
.habit-row__color{ width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 35%, transparent); }
.habit-row__track{ display:grid; grid-template-columns: repeat(7, 1fr); gap:var(--track-gap); padding-right:8px; }
.habit-cell{ height:16px; border-radius:999px; background:rgba(255,255,255,.06); outline:1px solid rgba(255,255,255,.03); cursor:pointer; transition:transform .05s ease; position:relative; }
.habit-cell[data-done="1"]{
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 92%, #000 0%), color-mix(in srgb, var(--c) 70%, #000 0%));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--c) 60%, #000 0%);
}
.habit-cell[data-done="1"]::after{
  content:""; position:absolute; inset:0; border-radius:999px; filter:blur(6px);
  background:color-mix(in srgb, var(--c) 40%, transparent); opacity:.35; pointer-events:none;
}
.habit-cell:active{ transform:scale(.96); }

/* stats cards */
.habits__stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:8px 16px 12px; }
.stat-card{ background:var(--panel); border:1px solid var(--ring); border-radius:16px; padding:14px; }
.stat-card__label{ color:var(--muted); font-size:12px; margin-bottom:8px; }
.stat-card__value{ font-size:28px; font-weight:900; }
.stat-card__tag{ display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(16,185,129,.12); color:#c9ffe6; border:1px solid rgba(16,185,129,.35); margin-top:6px; font-weight:800; }
.stat-card__tag--purple{ background:rgba(167,139,250,.12); color:#efe4ff; border-color:rgba(167,139,250,.35); }
.stat-card__hint{ margin-top:6px; color:var(--muted); font-size:12px; }

.habits__actions{ padding:8px 16px 96px; }
.btn{ background:#1e293b; color:#e8ecf8; border:1px solid #334155; border-radius:12px; padding:8px 12px; font-weight:800; cursor:pointer; }
.btn--primary{ background:#3b82f6; border-color:#2563eb; }
.btn--ghost{ background:transparent; border-color:var(--ring); }

/* bottom nav 3 items */
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; height:64px; background:#0e0e16; border-top:1px solid var(--ring); display:grid; grid-template-columns:repeat(3,1fr); }
.bottom-nav__item{ display:flex; align-items:center; justify-content:center; gap:8px; color:#b8bfd6; text-decoration:none; font-weight:900; }
.bottom-nav__item span{ font-size:12px; }
.bottom-nav__item--active{ color:#fff; }

.modal{ border:none; padding:0; background:transparent; }
.modal::backdrop{ background:rgba(0,0,0,.5); }
.modal__panel{ background:var(--panel); color:var(--text); border:1px solid var(--ring); border-radius:16px; padding:16px; width:min(420px,90vw); }
.form-row{ display:grid; gap:6px; margin:10px 0; }
.form-row input{ background:#0f1527; color:#e4e8fb; border:1px solid #2a334a; border-radius:10px; padding:10px 12px; }
.modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

@media (max-width: 640px){ .habits__stats{ grid-template-columns:1fr; } }