/* Claridge Netlify Bundle */
:root{
  --bg:#FAFAFA;
  --panel:#FFFFFF;
  --text:#1C1C1C;
  --accent:#94A6A5;
  --border:#E6E6E6;
  --chip:#F3F4F6;
  --primary:#6C5CE7;
  --success:#4ECDC4;
  --warning:#FFD700;
}
:root[data-theme="dark"]{
  --bg:#1C1C1C;
  --panel:#2A2A2A;
  --text:#FAFAFA;
  --accent:#94A6A5;
  --border:#3A3A3A;
  --chip:#333333;
  --primary:#6C5CE7;
  --success:#4ECDC4;
  --warning:#FFD700;
}

@font-face{
  font-family:"Safiro";
  src:url("assets/safiro-semibold.woff") format("woff");
  font-weight:600; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Header */
.header-grad{
  padding:20px 16px 28px; border-bottom-left-radius:24px; border-bottom-right-radius:24px;
  background: linear-gradient(135deg,#FF8A00 0%, #FF3D00 100%);
  box-shadow: 0 12px 24px rgba(118,75,162,.25);
}
.brandbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1080px; margin:0 auto;
}
.brand-left{display:flex; align-items:center; gap:12px}
.logo-chip{
  width:36px; height:36px; border-radius:18px; background:rgba(255,255,255,.22);
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.3);
}
.titles h1{font:600 20px/1.2 Safiro,'Open Sans',sans-serif; color:#fff; margin:0}
.titles p{margin:2px 0 0; color:rgba(255,255,255,.9); font-weight:600; font-size:12px}

.brand-right{display:flex; align-items:center; gap:8px}
.pill{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.15); color:#fff; padding:6px 10px; border-radius:16px; font-weight:600; font-size:12px}
.toggle{background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; padding:6px 10px; border-radius:12px; font-weight:800; cursor:pointer}
.install{display:inline-block; background:#fff; color:#111; padding:6px 10px; border-radius:12px; font-weight:800; text-decoration:none}

.stats{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1080px; margin:14px auto 10px}
.stat{flex:1; display:grid; place-items:center}
.stat-n{font-weight:800; font-size:24px; color:#fff}
.stat-l{font-size:12px; color:rgba(255,255,255,.85); font-weight:600; text-align:center}
.divider{width:1px; height:32px; background:rgba(255,255,255,.25)}

.bar-outer{max-width:1080px; margin:12px auto 0; position:relative; height:10px; background:rgba(255,255,255,.25); border-radius:6px; overflow:hidden}
.bar-inner{position:absolute; inset:0 100% 0 0; background:#6C5CE7; border-radius:6px; box-shadow:0 2px 4px rgba(108,92,231,.4); width:0%}
.bar-glow{position:absolute; inset:0; background:rgba(255,255,255,.08)}

.celebrate{max-width:1080px; margin:10px auto 0; color:var(--warning); text-align:center; font-weight:800; letter-spacing:.2px;}

.container{max-width:1080px; margin:20px auto; padding:0 16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:20px; margin:16px 0; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.06)}
.card-h{display:flex; align-items:center; justify-content:space-between; padding:18px 20px}
.left{display:flex; align-items:center; gap:14px; flex:1}
.ico{width:40px; height:40px; border-radius:12px; background:var(--chip); display:grid; place-items:center; border:2px solid color-mix(in oklab, var(--primary) 20%, transparent)}
.ico.done{background:var(--success); border-color:var(--success)}
.t1{font:700 18px/1 Safiro,'Open Sans',sans-serif; color:var(--text); letter-spacing:.3px; margin:0 0 6px}
.t2{font:500 13px/1.3 'Open Sans',sans-serif; color:#6B7280}

.right{display:flex; align-items:center; gap:12px}
.circle{width:48px; height:48px; border-radius:24px; background:var(--chip); display:grid; place-items:center; border:2px solid var(--border); font:700 12px/1 'Open Sans',sans-serif; color:var(--primary)}
.chev{color:#8B8B8B}

.card-bar{padding:0 20px 16px}
.pb{height:4px; background:#F3F4F6; border-radius:2px; overflow:hidden}
.pb > span{display:block; height:100%; background:var(--primary)}

.tasks{padding:0 20px 20px; display:none}
.tasks.open{display:block}
.task{display:flex; align-items:flex-start; gap:14px; padding:14px; margin:4px 0; border-radius:12px; background:#FAFBFC; border:1px solid transparent}
.task.done{background:#F0FDF4; border-color:rgba(78,205,196,.2)}
.box{width:24px; height:24px; border-radius:8px; border:2px solid #D1D5DB; display:grid; place-items:center; background:#fff}
.box.checked{background:#6C5CE7; border-color:#6C5CE7; box-shadow:0 2px 4px rgba(108,92,231,.3)}
.txt{font:500 15px/1.45 'Open Sans',sans-serif; color:#374151}
.txt.done{color:#6B7280; text-decoration:line-through}

.footer{display:grid; place-items:center; padding:24px 16px 40px}
.footer-card{max-width:560px; text-align:center; background:color-mix(in oklab, var(--primary) 6%, transparent); border:1px solid var(--border); border-radius:16px; padding:20px}
.f1{font:600 16px/1.2 'Open Sans',sans-serif; color:var(--primary); margin:0 0 6px}
.f2{font:500 12px/1.2 'Open Sans',sans-serif; color:#9CA3AF; margin:0}