:root { --bg:#050a1a; --line:rgba(255,255,255,.09); --cy:#5ee7ff; --pu:#8b7cff; --ok:#34d399; --bad:#f87171; --txt:#e8eefc; --mut:#8c9bc0; --grad:linear-gradient(90deg,#5ee7ff,#7c6cff); }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--txt); min-height: 100vh; position: relative; overflow-x: hidden; }
/* glow + dotted grid + snow */
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(900px 520px at 12% -8%, rgba(30,80,190,.28), transparent 60%), radial-gradient(900px 520px at 100% -5%, rgba(120,95,255,.34), transparent 55%); }
body::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(150,170,220,.30) 1.3px, transparent 1.6px), radial-gradient(rgba(150,170,220,.30) 1.3px, transparent 1.6px);
  background-size: 80px 60px; background-position: 0 0, 40px 30px; }
#snow { position:fixed; top:0; left:0; z-index:1; pointer-events:none; }
.content, .auth-wrap { position:relative; z-index:2; }

.grad, .brand { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand { font-weight: 800; letter-spacing: .3px; }
.text-mut { color: var(--mut) !important; }
a { color: var(--cy); } a:hover { color: #a5f1ff; }

/* glass cards */
.card-w, .glass { background: rgba(14,21,46,.62); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; }
.ch-h { background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line); padding: 12px 18px; font-weight: 600; font-size: .92rem; }
.chart-box { position:relative; height:290px; padding:12px; }
.chart-sm { position:relative; height:140px; }

/* auth split layout */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:90px; padding:48px 28px; flex-wrap:wrap; }
.auth-hero { flex:1 1 380px; max-width:520px; }
.brand-lg { font-size:1.35rem; margin-bottom:22px; }
.auth-hero h1 { font-size:clamp(2.4rem,5.2vw,4rem); font-weight:800; line-height:1.08; letter-spacing:-1px; margin-bottom:18px; }
.auth-hero .lead { color:var(--mut); font-size:1.1rem; max-width:430px; }
.ticks { list-style:none; padding:0; margin:22px 0 0; }
.ticks li { margin-bottom:12px; font-size:1.02rem; } .ticks .tk { color:var(--cy); font-weight:800; margin-right:10px; }
.auth-card { flex:1 1 380px; max-width:480px; width:100%; padding:30px; }
.auth-card h2 { font-size:1.55rem; font-weight:800; margin-bottom:6px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; }
.pw { position:relative; } .pw .form-control { padding-right:70px; }
.pw-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--txt); font-weight:600; font-size:.85rem; }

/* forms */
.form-control, .form-select { background:#0a1126; border:1px solid var(--line); color:var(--txt); border-radius:14px; min-height:50px; }
textarea.form-control { min-height:0; }
.form-control:focus, .form-select:focus { background:#0a1126; color:var(--txt); border-color:var(--cy); box-shadow:0 0 0 3px rgba(94,231,255,.16); }
.form-control::placeholder { color:#566390; }
.form-select option { background:#0a1126; color:var(--txt); }
input[type=date] { color-scheme: dark; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px #0a1126 inset !important; -webkit-text-fill-color: var(--txt) !important; caret-color: var(--txt); border-color: var(--line); }
.btn-ice { background: var(--grad); color:#06101f; font-weight:700; border:0; border-radius:14px; min-height:48px; padding:0 22px; transition: transform .15s, box-shadow .15s; }
.btn-ice:hover { color:#06101f; transform:translateY(-1px); box-shadow:0 10px 26px rgba(94,231,255,.25); }
.btn-sm.btn-ice { min-height:38px; padding:0 16px; border-radius:12px; }
.btn-outline-info { color:var(--cy); border-color:rgba(94,231,255,.4); border-radius:12px; } .btn-outline-info:hover { background:rgba(94,231,255,.12); color:var(--cy); border-color:var(--cy); }
.btn-outline-light { border-radius:12px; }
.is-invalid { border-color: var(--bad) !important; }
.err { color:#ff8a8a; font-size:.83rem; margin-top:5px; min-height:0; }

/* alerts */
.alert { border-radius:14px; border:1px solid; }
.alert-success { background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); color:#9af0cf; }
.alert-danger { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.35); color:#ffb4b4; }
.alert-warning { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); color:#fde08a; }

/* app nav */
.nav-pills { background: rgba(14,21,46,.62); border:1px solid var(--line); border-radius:18px; padding:6px; backdrop-filter: blur(14px); }
.nav-pills .nav-link { color:var(--mut); border-radius:12px; font-weight:600; }
.nav-pills .nav-link.active { background: var(--grad); color:#06101f; }
.progress { background: rgba(255,255,255,.08); border-radius:99px; }
.progress-bar { background: var(--grad) !important; border-radius:99px; }

/* habits / tasks */
.task-row { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; margin-bottom:10px; background:rgba(8,13,32,.7); }
.task-row .t { flex:1; word-break:break-word; }
.mark { width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,255,255,.14); background:transparent; color:var(--mut); font-size:1.1rem; transition:.15s; }
.mark.right.on { background:var(--ok); border-color:var(--ok); color:#06210f; }
.mark.wrong.on { background:var(--bad); border-color:var(--bad); color:#2a0808; }
.mark.right:hover { border-color:var(--ok); } .mark.wrong:hover { border-color:var(--bad); }
.ring-card { text-align:center; padding:16px; }
.stat { font-size:1.7rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.note-row { padding:9px 0; border-bottom:1px solid var(--line); } .note-row:last-child { border:0; }
@media (max-width: 900px) { .auth-wrap { gap:36px; align-items:flex-start; padding-top:36px; } }