:root {
  --bg-0: #0b1020; --bg-1: #131a33;
  --card: rgba(255,255,255,0.055); --card-border: rgba(255,255,255,0.09);
  --ink: #e8ecf6; --muted: #8b96b3;
  --teal: #5eead4; --indigo: #818cf8; --rose: #fb7185;
  --grad: linear-gradient(135deg, var(--teal), var(--indigo));
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: -apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background: radial-gradient(1100px 520px at 15% -8%, rgba(129,140,248,.16), transparent 60%),
              radial-gradient(900px 520px at 95% 12%, rgba(94,234,212,.10), transparent 55%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%);
  background-attachment: fixed; }
.hidden { display:none !important; }
main { max-width: 460px; margin:0 auto; padding: 20px 16px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.brand { font-size: 1.35rem; font-weight: 700; letter-spacing: .35em; text-indent:.35em; margin:0;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.streak { font-size:.9rem; color: var(--teal); font-weight:650; }
.card { background: var(--card); border:1px solid var(--card-border); border-radius:22px; padding:20px; margin-bottom:16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(2,6,18,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.card h2 { margin:0 0 14px; font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; }
button { display:block; width:100%; padding:14px; border:none; border-radius:13px; font-size:1rem; font-weight:650; cursor:pointer; margin:8px 0; transition: transform .12s, box-shadow .2s, filter .2s; font-family:inherit; }
button:active { transform: scale(.975); }
.primary { background: var(--grad); color:#06251f; box-shadow:0 6px 22px rgba(94,234,212,.28); }
.primary:hover { filter: brightness(1.08); }
.secondary { background: rgba(255,255,255,.07); color:var(--ink); border:1px solid var(--card-border); }
.ghost { background: transparent; color: var(--muted); }
input { width:100%; padding:13px 14px; margin:4px 0 12px; background: rgba(2,6,18,.45); color:var(--ink); border:1px solid var(--card-border); border-radius:12px; font-size:1rem; font-family:inherit; outline:none; }
input:focus { border-color: rgba(94,234,212,.55); }
label { font-size:.8rem; color:var(--muted); letter-spacing:.08em; }
.err { color:var(--rose); font-size:.85rem; text-align:center; }
.overlay { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:16px; background: rgba(4,8,20,.78); backdrop-filter: blur(10px); }

/* focus slot */
.slot { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.slot:last-child { border-bottom:none; }
.slot-check { width:26px; height:26px; flex-shrink:0; border-radius:8px; border:2px solid rgba(255,255,255,.2); cursor:pointer; margin-top:2px; transition: all .15s; }
.slot-check.done { background: var(--grad); border-color: transparent; }
.slot-check.done::after { content:''; display:block; margin:auto; width:11px; height:6px; border:2px solid #06251f; border-top:none; border-right:none; transform: rotate(-45deg) translate(2px,-1px); }
.slot-input { flex:1; background: transparent; border:none; color:var(--ink); font-size:1rem; padding:4px 0; outline:none; font-family:inherit; }
.slot-input.strike { text-decoration: line-through; color: var(--muted); }
/* goals */
.goal { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.goal-title { font-weight:650; margin:0 0 8px; }
.goal-steps { display:flex; flex-direction:column; gap:6px; padding-left:6px; }
.step-row { display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--muted); }
.step-add { display:flex; gap:6px; margin-top:8px; }
.step-add input { flex:1; margin:0; padding:8px 10px; font-size:.9rem; }
.step-add button { width:auto; margin:0; padding:8px 12px; font-size:.85rem; }
/* blocker tags */
.tag { display:inline-block; padding:6px 12px; border-radius:999px; font-size:.85rem; margin:4px 6px 4px 0; cursor:pointer; border:1px solid var(--card-border); color:var(--muted); transition: all .15s; }
.tag.on { background: var(--grad); color:#06251f; border-color:transparent; }
/* insight */
.metric { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.95rem; }
.metric:last-child { border-bottom:none; }
.metric .label { color:var(--muted); }
.metric .value { font-weight:650; }
.calm { text-align:center; }
.completion { text-align:right; color:var(--muted); font-size:.85rem; margin-top:8px; }