:root{
  --bg:#0b1020; --p1:#121a33; --p2:#182045; --line:rgba(255,255,255,.10);
  --txt:#eef2ff; --mut:#b8c0ff; --acc:#70f0c4; --bad:#ff6b88; --warn:#ffd67e;
  --shadow: 0 16px 34px rgba(0,0,0,.22);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 30% 15%, #1a2450 0%, var(--bg) 55%);
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1100px; margin:0 auto; padding:18px;}
.top{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.brand{display:flex; gap:12px; align-items:center;}
.logo{
  width:40px; height:40px; border-radius:14px;
  background:linear-gradient(135deg, #60a5fa, var(--acc));
  box-shadow:0 12px 28px rgba(112,240,196,.14);
}
h1{font-size:16px; margin:0; line-height:1.2}
.sub{font-size:12px; color:var(--mut); margin-top:2px}
.pill{
  font-size:12px; padding:8px 10px; border:1px solid var(--line);
  border-radius:999px; color:var(--mut); background:rgba(255,255,255,.03)
}
.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.nav a{
  font-size:13px; color:var(--mut); padding:8px 10px; border-radius:999px;
  border:1px solid transparent;
}
.nav a:hover{border-color:var(--line); background:rgba(255,255,255,.03); color:var(--txt)}
.nav a.on{border-color:rgba(112,240,196,.35); background:rgba(112,240,196,.08); color:var(--txt)}

.grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; margin-top:12px;}
@media (max-width: 980px){ .grid{grid-template-columns:1fr; } }

.card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(18,26,51,.74);
  box-shadow:var(--shadow);
  padding:14px;
}
.card h2{font-size:15px; margin:0 0 8px}
.muted{color:var(--mut); font-size:13px; line-height:1.45}
.hr{height:1px; background:var(--line); margin:12px 0;}

label{display:block; font-size:12px; color:var(--mut); margin:0 0 6px}
input,select,textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,.18);
  color:var(--txt); outline:none;
}
textarea{min-height:110px; resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(184,192,255,.55)}

.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex: 1 1 180px}

button{
  border:1px solid var(--line);
  background:rgba(112,240,196,.14);
  color:var(--txt);
  padding:10px 12px; border-radius:12px; cursor:pointer;
  font-weight:800; letter-spacing:.2px;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
button:hover{background:rgba(112,240,196,.18); border-color:rgba(112,240,196,.35)}
button:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg, rgba(96,165,250,.25), rgba(112,240,196,.20))}
.btn-bad{background:rgba(255,107,136,.14)}
.btn-small{padding:8px 10px; border-radius:10px; font-size:12px}

.toast{
  padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  background:rgba(0,0,0,.18); color:var(--mut); font-size:12px; line-height:1.45;
}
.good{color:#c9ffef}
.warn{color:#ffe7b1}
.bad{color:#ffd0d9}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;}
@media (max-width: 520px){ .kpis{grid-template-columns:1fr;} }
.kpi{border:1px solid var(--line); border-radius:14px; background:rgba(24,32,69,.55); padding:10px;}
.kpi .t{font-size:12px; color:var(--mut)}
.kpi .v{font-size:18px; font-weight:900; margin-top:3px}
.kpi .s{font-size:12px; color:var(--mut); margin-top:2px}

.canvasWrap{border:1px solid var(--line); border-radius:var(--radius); background:rgba(24,32,69,.40); padding:12px;}
canvas{display:block; width:100%; height:auto; border-radius:12px;
  background:radial-gradient(700px 380px at 35% 25%, rgba(96,165,250,.10), rgba(0,0,0,0));
}

.table{width:100%; border-collapse:collapse; font-size:13px; color:var(--txt);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.table th,.table td{padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.table th{color:var(--mut); font-weight:800; text-align:left; background:rgba(255,255,255,.03)}
.table tr:last-child td{border-bottom:none}

.hero{
  padding:18px; border-radius:var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(96,165,250,.10), rgba(112,240,196,.08));
  box-shadow:var(--shadow);
  margin-top:12px;
}
.hero h2{margin:0 0 8px; font-size:18px}
.hero p{margin:0; color:var(--mut); font-size:13px; line-height:1.5}
.hero .cta{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}

.footer{margin-top:18px; padding:12px 0; color:var(--mut); font-size:12px; border-top:1px solid var(--line);}

.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--mut); font-size:12px}
.badge b{color:var(--txt)}

.list{display:flex; flex-direction:column; gap:10px}
.item{
  border:1px solid var(--line); border-radius:14px; padding:12px;
  background:rgba(24,32,69,.45);
}
.itemTop{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.itemTop .name{font-weight:900}
.itemTop .meta{color:var(--mut); font-size:12px}
.item p{margin:8px 0 0; color:var(--txt); line-height:1.45}