:root{
  --bg:#eef3f8;
  --sidebar:#2d3640;
  --sidebar2:#34404b;
  --sideText:#d7e1ea;
  --sideMuted:#b7c4d1;
  --card:#ffffff;
  --line:#e2e8f0;
  --text:#243246;
  --muted:#7d8ba0;
  --green:#22c55e;
  --green2:#16a34a;
  --blue:#2f6fed;
  --red:#ef4444;
  --orange:#f59e0b;
  --shadow:0 10px 30px rgba(15,23,42,.05);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}
a{text-decoration:none;color:inherit}
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;min-width:220px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:var(--sideText);padding:12px 10px 14px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.brand img{max-width:180px;height:auto;display:block}
.nav{display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:12px;color:var(--sideMuted);font-weight:700}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:#fff;color:#1f2f45}
.nav .dot{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.14;display:inline-block}
.main{flex:1;min-width:0}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.top-left{display:flex;align-items:center;gap:14px;font-weight:700;color:#5c6b80}
.top-right{display:flex;align-items:center;gap:10px}
.page{padding:18px}
.hero,.card,.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:18px 18px;margin-bottom:16px}
.hero h1{margin:0 0 6px;font-size:20px}
.hero p{margin:0;color:var(--muted)}
.card{padding:14px}
.section-title{margin:0 0 10px;font-size:13px;color:#69778a;font-weight:800}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.kpi .n{font-size:24px;font-weight:800}
.kpi .t{font-size:12px;color:var(--muted);font-weight:700}
.metric{font-size:28px;font-weight:800}
.metric-sub{font-size:12px;color:var(--muted)}
.alert{background:#fff4f4;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-weight:700}
.ok{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-weight:700}
.badge{display:inline-block;padding:9px 13px;border-radius:9px;font-size:15px;font-weight:700;border:1px solid #dbe3ec}
.badge-green{background:#ecfdf3;color:#15803d}
.badge-blue{background:#eef4ff;color:#3157c8}
.badge-red{background:#fff1f2;color:#be123c}
.badge-gray{background:#f3f4f6;color:#4b5563}
.badge-orange{background:#fff7ed;color:#c2410c}
.input,.select,textarea{width:100%;border:1px solid #d8e0ea;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:#243142}
.label{display:block;margin-bottom:6px;font-size:12px;color:#748397;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:none;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green2)}
.btn-blue{background:var(--blue);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-gray{background:#eef2f7;color:#2f3d52}
.btn-orange{background:var(--orange);color:#fff}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:14px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.table th{background:#fafcff;color:#6b798d;font-size:12px;font-weight:800}
.circle{width:94px;height:94px;border-radius:50%;background:radial-gradient(closest-side,#fff 72%,transparent 73% 100%),conic-gradient(var(--green) var(--p),#e8eef5 0);margin:auto;position:relative;border:1px solid #ebf0f6}
.circle .in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.circle .big{font-size:18px;font-weight:800;color:#16a34a}.circle .small{font-size:11px;color:var(--muted)}
.chart{height:260px;border-radius:12px;border:1px solid var(--line);background:repeating-linear-gradient(to top,#f7f9fc 0,#f7f9fc 1px,#fff 1px,#fff 52px);position:relative;overflow:hidden}
.chart:before{content:"";position:absolute;left:0;right:0;bottom:30px;height:120px;background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,.30));clip-path:path("M0,95 C130,60 210,110 330,75 C470,35 570,105 700,62 C790,36 900,70 1000,52 L1000,180 L0,180 Z")}
.chart:after{content:"";position:absolute;left:0;right:0;bottom:30px;height:110px;background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.24));clip-path:path("M0,110 C100,92 220,103 320,92 C430,78 540,28 650,72 C790,128 870,76 1000,88 L1000,180 L0,180 Z")}
.install-box{background:#0f172a;color:#e5edf8;border-radius:18px;padding:18px;font-family:Consolas,monospace;font-size:13px;overflow:auto}
.feature{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.feature h3{margin:8px 0 8px;font-size:17px}
.feature p{margin:0;color:var(--muted);line-height:1.6}
.ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf3f8,#dce7f1)}
.login-card{width:420px;max-width:95vw;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 22px 55px rgba(15,23,42,.10)}
.login-top{background:#243d6b;color:#fff;padding:24px}
.login-top img{max-width:180px}
.login-top h2{margin:12px 0 8px;font-size:18px}
.login-top p{margin:0;color:#d9e4f7}
.login-body{padding:22px}
.footer-note{padding-top:14px;color:#90a0b4;font-size:12px;text-align:center}
.muted{color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--line);margin:16px 0}
.front-top{background:#fff;border-bottom:1px solid #e6ebf2}
.front-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.front-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.front-links{display:flex;gap:18px;align-items:center;color:#5f6f84;font-weight:700}
.front-links a:hover{color:#243246}
.front-footer{margin-top:30px;padding:28px 0;color:#708197}
@media (max-width:1100px){.grid-4,.grid-3,.grid-2,.kpis,.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:780px){.layout{display:block}.sidebar{width:100%;min-width:100%}.grid-4,.grid-3,.grid-2,.kpis,.ft-grid{grid-template-columns:1fr}}