:root{
  --bg:#0b0e14; --card:#121826; --text:#e8eefc; --muted:#a7b3cc;
  --line:#22304a; --accent:#46a7ff; --good:#2ecc71; --bad:#e74c3c;
  --btn:#1b2a44; --btnhover:#243a63; --input:#0f1522;
  --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(70,167,255,.12), transparent 55%),
              radial-gradient(900px 650px at 80% 30%, rgba(46,204,113,.10), transparent 55%),
              var(--bg);
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:1100px; margin:0 auto; padding:22px; }
.nav{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px; background:rgba(18,24,38,.85); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); position:sticky; top:14px; backdrop-filter: blur(6px);
}
.nav .brand{ font-weight:700; letter-spacing:.3px; }
.nav .links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.badge{ padding:4px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; }
.card{
  margin-top:18px; background:rgba(18,24,38,.92); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
}
.h1{ font-size:22px; margin:0 0 10px; }
.small{ font-size:12px; color:var(--muted); }
.grid{ display:grid; gap:14px; grid-template-columns: repeat(12,1fr); }
.col-12{ grid-column: span 12; } .col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; } .col-3{ grid-column: span 3; } .col-2{ grid-column: span 2; }
@media (max-width:900px){ .col-6,.col-4,.col-3,.col-2{ grid-column: span 12; } .nav{ position:static; } }
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--input); color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{ border-color: rgba(70,167,255,.65); box-shadow: 0 0 0 3px rgba(70,167,255,.15); }
.btn{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  background:var(--btn); color:var(--text); border:1px solid var(--line);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn:hover{ background:var(--btnhover); }
.btn.primary{ background:rgba(70,167,255,.18); border-color: rgba(70,167,255,.55); }
.btn.danger{ background:rgba(231,76,60,.14); border-color: rgba(231,76,60,.55); }
table{ width:100%; border-collapse: collapse; }
th,td{ padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
th{ color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.3px; text-transform:uppercase; }
.mono{ font-family:var(--mono); }
.flash{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); margin:12px 0 0; }
.flash.ok{ border-color: rgba(46,204,113,.55); background: rgba(46,204,113,.10); }
.flash.err{ border-color: rgba(231,76,60,.55); background: rgba(231,76,60,.10); }
.right{ text-align:right; }
.kpi{ display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(15,21,34,.65); }
.kpi .v{ font-size:26px; font-weight:800; }
.kpi .l{ color:var(--muted); font-size:12px; letter-spacing:.3px; text-transform:uppercase; }


body.wx-mode {
background:#330000;
color:white;
}

body.wx-mode table {
border-color:red;
}

body.wx-mode h1,
body.wx-mode h2 {
color:#ff4444;
}
.wx-report-btn {
  color: #111 !important;
  font-weight: 600;
}