:root{
  --bg:#0f1420; --panel:#161d2b; --panel2:#1c2536; --line:#28324a;
  --ink:#e8edf6; --muted:#94a3b8; --brand:#3b82f6; --brand2:#1d4ed8;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{background:linear-gradient(180deg,#141b29,#0f1420); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:20px; padding:10px 18px}
.brand{font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--ink)}
.brand span{color:var(--brand)}
.brand small{font-size:11px; font-weight:600; color:var(--muted); vertical-align:super}
.mainnav{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.mainnav a{color:var(--muted); padding:7px 11px; border-radius:8px; font-size:14px}
.mainnav a:hover{background:var(--panel2); color:var(--ink); text-decoration:none}
.mainnav a.active{background:var(--brand2); color:#fff}
.topbar-right{display:flex; align-items:center; gap:12px}
.env-switch select{background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px}
.user{color:var(--muted); font-size:13px}
.logout{color:var(--muted); font-size:13px}
body.env-production .topbar{border-bottom-color:#7f1d1d; box-shadow:inset 0 -2px 0 #b91c1c}

/* Page body — fade-in */
.page-body{max-width:1200px; margin:0 auto; padding:22px 18px 60px; animation:fadein .35s ease}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

h1{font-size:22px; margin:.2em 0 .6em}
h2{font-size:17px; margin:1.2em 0 .5em; color:var(--ink)}
.sub{color:var(--muted); margin-top:-6px}

/* Panels & grid */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.stat{background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.stat .n{font-size:26px; font-weight:800}
.stat .l{color:var(--muted); font-size:13px}

/* Forms */
label{display:block; font-size:13px; color:var(--muted); margin:10px 0 4px}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; font-size:14px; font-family:inherit;
}
textarea{min-height:90px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>div{flex:1; min-width:180px}

.btn{display:inline-block; background:var(--brand2); color:#fff; border:0; border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer}
.btn:hover{background:var(--brand); text-decoration:none}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn-danger{background:#b91c1c}
.btn-sm{padding:6px 10px; font-size:13px}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
tr:hover td{background:var(--panel2)}

/* Badges */
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600}
.badge-ok{background:rgba(34,197,94,.15); color:#4ade80}
.badge-err{background:rgba(239,68,68,.15); color:#f87171}
.badge-warn{background:rgba(245,158,11,.15); color:#fbbf24}
.badge-muted{background:var(--panel2); color:var(--muted)}

/* Flash */
.flash{padding:11px 14px; border-radius:8px; margin-bottom:14px; border:1px solid transparent}
.flash-success{background:rgba(34,197,94,.12); border-color:#166534; color:#86efac}
.flash-error{background:rgba(239,68,68,.12); border-color:#7f1d1d; color:#fca5a5}
.flash-info{background:rgba(59,130,246,.12); border-color:#1e40af; color:#93c5fd}

/* Code / XML */
pre.xml{background:#0b0f18; border:1px solid var(--line); border-radius:8px; padding:14px;
  overflow:auto; font:12px/1.5 "SF Mono",Menlo,Consolas,monospace; color:#cbd5e1; max-height:420px}
code{background:var(--panel2); padding:1px 5px; border-radius:4px; font-size:13px}
.result-code{font-weight:700}
.result-ok{color:var(--ok)} .result-err{color:var(--err)}

/* Login */
.login-wrap{max-width:380px; margin:8vh auto}
.login-wrap .brand{display:block; text-align:center; font-size:30px; margin-bottom:18px}
.muted{color:var(--muted)}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:13px}
.right{text-align:right}
.nowrap{white-space:nowrap}
hr{border:0; border-top:1px solid var(--line); margin:16px 0}