:root{
  --bg:#0b1e4a;
  --bg2:#0b2a6f;
  --card:#ffffff;
  --muted:rgba(15,23,42,.65);
  --text:#0a1e4a;
  --accent:#f7c600;
  --accent2:#1f6feb;
  --border:rgba(15,23,42,.12);
  --shadow:0 14px 34px rgba(2,6,23,.12);
  --radius:18px;
  --radius2:12px;
  --max:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--sans);
  background:linear-gradient(180deg, var(--bg), var(--bg2));
  color:#fff;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: 18px;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.10);
}
.brand{font-weight:900; letter-spacing:-0.02em}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); font-size:.85rem;}
.nav{display:flex; flex-wrap:wrap; gap:8px;}
.nav a{padding:8px 10px; border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);}
.nav a.active{background:rgba(255,255,255,.14)}
.card{
  background:rgba(255,255,255,.94);
  color:var(--text);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.card .pad{padding:18px;}
.grid{display:grid; gap:14px;}
.grid.two{grid-template-columns: 1fr;}
@media (min-width: 900px){ .grid.two{grid-template-columns: 1.2fr .8fr;} }
.h1{margin:0 0 4px 0; font-size: 1.6rem; font-weight: 900; color: var(--text); letter-spacing:-0.02em;}
.p{margin:0; color:rgba(10,30,74,.78);}
.muted{color:rgba(10,30,74,.65)}
hr.sep{border:none; border-top:1px solid rgba(15,23,42,.10); margin:14px 0;}
.table{width:100%; border-collapse:collapse; font-size:.95rem;}
.table th,.table td{padding:10px 8px; border-bottom:1px solid rgba(15,23,42,.08); text-align:left; vertical-align:top}
.table th{font-size:.85rem; color:rgba(10,30,74,.72); text-transform:uppercase; letter-spacing:.06em}
.kpi{display:grid; grid-template-columns: repeat(2,1fr); gap:10px;}
@media (min-width: 900px){ .kpi{grid-template-columns: repeat(4,1fr);} }
.kpi .box{background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:14px; padding:12px;}
.kpi .n{font-weight:900; font-size:1.35rem;}
.kpi .l{font-size:.8rem; color:rgba(10,30,74,.65); text-transform:uppercase; letter-spacing:.06em}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(15,23,42,.12);
  background:#fff; color:var(--text); text-decoration:none; font-weight:800;
}
.btn.yellow{background:var(--accent); border-color:rgba(0,0,0,.0);}
.btn.blue{background:var(--accent2); color:#fff; border-color:rgba(0,0,0,.0);}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.18);}
.btn.danger{background:#e11d48; color:#fff; border-color:rgba(0,0,0,.0);}
.btn.small{padding:7px 10px; border-radius:10px; font-weight:800; font-size:.9rem;}
.input, textarea, select{
  width:100%; padding:11px 12px; border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff; color:var(--text);
}
label{font-weight:800; font-size:.9rem; color:rgba(10,30,74,.85);}
.formrow{display:grid; gap:10px; grid-template-columns: 1fr;}
@media (min-width: 900px){ .formrow.two{grid-template-columns: 1fr 1fr;} }
.notice{
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
}
.notice.ok{border-color: rgba(16,185,129,.35)}
.notice.err{border-color: rgba(225,29,72,.35)}
.footer{padding:14px 18px; color:rgba(255,255,255,.75); font-size:.9rem;}
.code{font-family:var(--mono); font-size:.9rem}
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal.open{display:flex;}
.modal .box{
  width:min(1100px, 100%); height:min(80vh, 800px);
  background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(15,23,42,.12);
}
.modal .head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(15,23,42,.10);}
.modal iframe{width:100%; height:calc(100% - 52px); border:0;}