:root{
  --bg1:#6657f2;
  --bg2:#2aa8ef;
  --bg3:#57d8e5;
  --ink:#0b1730;
  --muted:#5e6b86;
  --card:rgba(255,255,255,.47);
  --card-strong:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.36);
  --accent:#ff3c43;
  --good:#14b86e;
  --warn:#ff9d2a;
  --bad:#e43b48;
  --shadow:0 20px 60px rgba(21,42,93,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
body{
  background:linear-gradient(125deg,var(--bg1) 0%,var(--bg2) 52%,var(--bg3) 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 8%,rgba(255,255,255,.18),transparent 24%),
    radial-gradient(circle at 87% 68%,rgba(255,255,255,.10),transparent 28%);
}
button,textarea,input,select{font:inherit}
button{cursor:pointer}
#app{min-height:100vh;padding:env(safe-area-inset-top) 18px calc(72px + env(safe-area-inset-bottom))}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:center;align-items:center;
  padding:12px 0 8px;
  backdrop-filter:blur(14px);
}
.main-nav{
  display:flex;gap:2px;align-items:center;justify-content:center;
  max-width:980px;padding:5px;
  border-radius:999px;
  background:rgba(242,248,255,.58);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(20px);
}
.nav-item{
  border:0;background:transparent;padding:11px 16px;border-radius:999px;
  color:#15213b;font-weight:700;white-space:nowrap;
}
.nav-item.active{background:rgba(255,255,255,.62);color:var(--accent)}
.icon-button{border:0;background:rgba(255,255,255,.6);border-radius:14px;padding:10px 12px}
.menu-toggle{display:none;position:absolute;left:0}
.view{max-width:1440px;margin:0 auto;padding-top:18px}
.hero{padding:20px 10px 10px}
.hero h1{margin:0;color:#fff;font-size:clamp(36px,5vw,58px);letter-spacing:-.03em}
.hero p{margin:8px 0 0;color:rgba(255,255,255,.80);font-size:clamp(18px,2vw,26px)}
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
  padding:14px 10px 10px;
}
.card{
  grid-column:span 3;
  border-radius:28px;padding:22px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  min-height:150px;
}
.card.wide{grid-column:span 6}
.card.full{grid-column:1/-1}
.card h2{margin:0 0 14px;font-size:25px}
.card p{margin:8px 0;color:#263654}
.card .big{font-size:30px;font-weight:800;margin-top:6px}
.mono{font-family:"SFMono-Regular",Consolas,monospace;font-size:.92rem}
.status-line{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}
.dot{width:12px;height:12px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 5px rgba(255,157,42,.12)}
.dot.good{background:var(--good);box-shadow:0 0 0 5px rgba(20,184,110,.12)}
.dot.bad{background:var(--bad);box-shadow:0 0 0 5px rgba(228,59,72,.12)}
.actions{display:flex;gap:12px;flex-wrap:wrap;padding:10px}
.btn{
  border:0;border-radius:16px;padding:13px 18px;font-weight:800;
  transition:transform .14s ease,opacity .14s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:#fff;color:#1684d2}
.btn.accent{background:var(--accent);color:#fff}
.btn.good{background:var(--good);color:#fff}
.btn.ghost{background:rgba(255,255,255,.24);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn.dark{background:#15213b;color:#fff}
.section-title{color:#fff;font-size:34px;margin:10px 10px 8px}
.subnav{display:flex;gap:8px;flex-wrap:wrap;padding:0 10px 8px}
.subnav button{border:0;border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.30);color:#fff;font-weight:700}
.subnav button.active{background:#fff;color:#1b6db4}
textarea{
  width:100%;min-height:300px;resize:vertical;border:1px solid rgba(70,100,160,.14);
  border-radius:18px;padding:16px;background:rgba(255,255,255,.76);color:#0f1c36;
  outline:none;font-family:"SFMono-Regular",Consolas,monospace;
}
input,select{
  width:100%;border:0;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.74);
}
.label{display:block;font-size:.85rem;font-weight:800;color:#3e4d69;margin-bottom:6px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px}
.kv strong{color:#172746}
.table-wrap{overflow:auto;border-radius:18px}
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.62)}
th,td{padding:12px 14px;border-bottom:1px solid rgba(70,100,160,.12);text-align:left}
th{font-size:.82rem;color:#53627b;text-transform:uppercase;letter-spacing:.04em}
.badge{display:inline-block;border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:800}
.badge.good{background:rgba(20,184,110,.14);color:#087346}
.badge.warn{background:rgba(255,157,42,.16);color:#9e5e00}
.badge.neutral{background:rgba(28,87,160,.12);color:#245a9a}
.brand-mark{
  position:fixed;left:14px;bottom:calc(9px + env(safe-area-inset-bottom));
  color:rgba(255,255,255,.45);font-size:12px;font-weight:700;letter-spacing:.02em;
  z-index:15;pointer-events:none;
}
body:not(.home-view) .brand-mark{display:none}
.install-bar{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(15,30,58,.90);color:#fff;padding:12px 14px;border-radius:20px;box-shadow:var(--shadow);
  backdrop-filter:blur(16px)
}
.hidden{display:none!important}
.toast{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  background:rgba(15,30,58,.92);color:white;padding:12px 16px;border-radius:16px;z-index:50;
  box-shadow:var(--shadow)
}
.small{font-size:.85rem;color:#5f6c86}
.home-note{color:rgba(255,255,255,.76);padding:0 10px 12px}
@media(max-width:1000px){
  .card{grid-column:span 6}
}
@media(max-width:720px){
  #app{padding-left:12px;padding-right:12px}
  .menu-toggle{display:block}
  .topbar{justify-content:flex-end}
  .main-nav{
    position:absolute;top:58px;left:0;right:0;margin:auto;
    display:none;flex-direction:column;align-items:stretch;border-radius:22px;padding:8px;
    max-width:360px;background:rgba(245,249,255,.94)
  }
  .main-nav.open{display:flex}
  .nav-item{text-align:left}
  .grid{grid-template-columns:1fr;padding-left:0;padding-right:0}
  .card,.card.wide,.card.full{grid-column:1/-1}
  .hero{padding-left:0;padding-right:0}
  .actions{padding-left:0;padding-right:0}
  .section-title{margin-left:0}
  .subnav{padding-left:0}
  .kv{grid-template-columns:1fr}
}