:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --card:#ffffff;
  --line:#e6e8ef;
  --fg:#0f172a;
  --muted:#6b7280;
  --brand:#111827;
  --accent:#2f6df6;
  --accent2:#22c1c3;
  --radius:16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Top */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9); backdrop-filter: blur(8px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-weight:800; letter-spacing:.5px; box-shadow:var(--shadow)
}
.stack .appname{font-weight:800}
.stack .hello{color:var(--muted); font-size:13px}
.top-actions{display:flex; align-items:center; gap:8px}

/* Inputs & Buttons */
.input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--fg)}
.input--sm{padding:8px 10px}
.btn{border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 14px; cursor:pointer}
.btn--ghost{background:#fff}
.btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}

.container{max-width:1100px; margin:0 auto; padding:16px}

/* Tabs */
.tabs{display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg-soft)}
.tabbtn{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; cursor:pointer}
.tabbtn.active{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; border-color:transparent}

/* Sections */
.panel{display:none; padding:16px}
.panel.active{display:block}
.panel__head{display:flex; align-items:center; justify-content:space-between}

/* Grid & Cards */
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow)}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px}
.kv{font-weight:800; font-size:20px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mt-6{margin-top:6px} .mt-8{margin-top:8px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.gap-8{gap:8px}

/* Stripe (tier banner) */
.stripe{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); border-radius:14px; padding:12px; margin:14px 0; background:var(--bg-soft)
}
.badge{display:inline-flex; align-items:center; gap:6px; background:#eef2ff; color:#3b4cca; border:1px solid #e0e7ff; border-radius:999px; padding:6px 10px; font-size:12px}

/* Progress */
.progress{height:10px; border-radius:999px; overflow:hidden; border:1px solid var(--line); background:#f1f5f9}
.progress>div{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2))}

/* Chat */
.chat{max-height:360px; overflow:auto; padding:8px; background:#fafafa; border:1px dashed var(--line); border-radius:12px}

/* Bottom nav (mobile) */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:#fff; border-top:1px solid var(--line)
}
.bottomnav button{padding:12px 0; background:none; border:none; font-size:18px; cursor:pointer}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:end center; padding:10px}
.modal__sheet{width:min(620px,92vw); margin-bottom:calc(env(safe-area-inset-bottom) + 14px); background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px; box-shadow:var(--shadow)}

/* Scroll box */
.scroll-box{max-height:260px; overflow:auto}

/* Details */
.howto summary{cursor:pointer; font-weight:600}