:root {
    --bg: #081122;
    --panel: rgba(13, 24, 46, 0.88);
    --panel-2: rgba(18, 31, 58, 0.96);
    --line: rgba(255,255,255,0.08);
    --text: #eaf1ff;
    --muted: #9db0d7;
    --brand: #4f7cff;
    --brand-2: #7f5cff;
    --green: #14c784;
    --yellow: #f5b73a;
    --red: #ff6a84;
    --neutral: #7f8aa7;
    --shadow: 0 18px 45px rgba(0,0,0,0.28);
    --radius: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(79,124,255,0.24), transparent 28%),
        radial-gradient(circle at top right, rgba(127,92,255,0.18), transparent 22%),
        linear-gradient(180deg, #09111f 0%, #081122 50%, #0b1020 100%);
    color: var(--text);
    min-height: 100vh;
}
.container { width: min(1280px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: blur(16px);
    background: rgba(8,17,34,0.72);
    border-bottom: 1px solid var(--line);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px 0; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text); }
.brand-badge {
    width: 44px; height: 44px; border-radius: 14px;
    display:grid; place-items:center; font-weight:800;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow);
}
.brand small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.actions { display:flex; align-items:center; gap:10px; }
.btn {
    border:0; cursor:pointer; text-decoration:none; color:white;
    padding:12px 18px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow);
    font-weight:600;
}
.btn.secondary { background: rgba(255,255,255,0.06); box-shadow:none; border:1px solid var(--line); }
.btn.danger { background: linear-gradient(135deg, #ff5a76, #ff7a59); }
main { padding: 26px 0 40px; }
.hero {
    display:grid; grid-template-columns: 1.25fr .75fr; gap:20px; margin-bottom:20px;
}
.card {
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-inner { padding: 24px; }
.hero h1 { margin:0 0 8px; font-size: clamp(28px, 3vw, 40px); }
.hero p { margin:0; color:var(--muted); line-height:1.6; }
.grid { display:grid; gap:20px; }
.stats { grid-template-columns: repeat(4, 1fr); margin-bottom:20px; }
.stat-card { position:relative; overflow:hidden; }
.stat-card::after {
    content:''; position:absolute; inset:auto -30px -30px auto; width:100px; height:100px; border-radius:999px;
    background: radial-gradient(circle, rgba(79,124,255,.25), transparent 70%);
}
.stat-label { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.stat-value { font-size: 28px; font-weight: 800; }
.stat-sub { margin-top: 8px; color: var(--muted); font-size: 13px; }
.layout { display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 14px 14px; text-align:left; border-bottom:1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight:600; position: sticky; top: 0; background: rgba(18,31,58,.95); }
tr:hover td { background: rgba(255,255,255,0.025); }
.badge { display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em; }
.badge.success { background: rgba(20,199,132,.15); color: #79f0bd; }
.badge.warning { background: rgba(245,183,58,.15); color: #ffd476; }
.badge.danger { background: rgba(255,106,132,.16); color: #ffb1c1; }
.badge.neutral { background: rgba(127,138,167,.15); color: #cbd4ea; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 16px; }
.section-title h2 { margin:0; font-size: 20px; }
.meta-list { display:grid; gap:12px; }
.meta-item {
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    padding:14px 16px; border-radius:16px; background: rgba(255,255,255,.03); border:1px solid var(--line);
}
.meta-item strong { display:block; margin-bottom:4px; }
.meta-item span { color: var(--muted); font-size:13px; }
.json-box {
    background: #091323; border-radius: 18px; border:1px solid var(--line); padding: 16px; color:#dce9ff;
    max-height: 440px; overflow:auto; font-size:12px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
}
.notice {
    padding:16px 18px; border-radius:18px; margin-bottom:20px; border:1px solid var(--line);
    background: rgba(245,183,58,.09); color:#ffe39a;
}
.notice.error { background: rgba(255,106,132,.09); color:#ffb5c4; }
.footer { padding: 18px 0 40px; color: var(--muted); font-size: 13px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding: 24px; }
.login-card { width:min(480px, 100%); }
.login-title { font-size: 32px; margin:0 0 8px; }
.login-muted { color: var(--muted); margin:0 0 24px; }
.field { margin-bottom: 16px; }
.label { display:block; margin-bottom:8px; color: var(--muted); font-size:14px; }
.input {
    width:100%; padding: 14px 16px; border-radius:16px; border:1px solid var(--line);
    background: rgba(255,255,255,.04); color:white; outline:none;
}
.input:focus { border-color: rgba(79,124,255,.65); box-shadow: 0 0 0 4px rgba(79,124,255,.12); }
.kpis { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.kpi {
    padding:16px; border-radius:18px; background: rgba(255,255,255,.03); border:1px solid var(--line);
}
.kpi strong { display:block; font-size: 22px; margin-bottom:8px; }
.small { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) {
    .stats, .hero, .layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .hero, .stats, .layout { grid-template-columns: 1fr; }
    .topbar-inner { flex-direction: column; align-items:flex-start; }
    .actions { width:100%; flex-wrap:wrap; }
}