:root{
  --bg:#eef3f8;
  --nav1:#233243;
  --nav2:#2c3b4c;
  --card:#ffffff;
  --line:#dbe3ec;
  --text:#22324a;
  --muted:#7b8aa2;
  --green:#29c35a;
  --blue:#3d79f2;
  --red:#ff5b61;
  --orange:#ffb44d;
  --shadow:0 8px 24px rgba(30,55,90,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{
  width:188px;flex:0 0 188px;
  background:linear-gradient(180deg,var(--nav1),var(--nav2));
  color:#fff;padding:14px 10px;position:fixed;top:0;left:0;bottom:0;overflow:auto
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:800;color:#fff;
  padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px
}
.logo-mark{
  width:28px;height:28px;border-radius:9px;background:#27d266;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900
}
.nav a{
  display:flex;align-items:center;gap:10px;
  color:#d7e0ea;padding:11px 12px;border-radius:12px;
  margin:4px 0;font-size:14px;font-weight:600
}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.11);color:#fff}
.main{margin-left:188px;width:calc(100% - 188px);padding:18px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;font-size:14px;color:#5d6d84
}
.topbar .title{font-weight:700;color:#33455f}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)
}
.card h1,.card h2,.card h3{margin:0 0 8px 0;color:#20324a}
.sub{color:var(--muted);font-size:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{text-align:center;padding:8px}
.ring{
  width:96px;height:96px;border-radius:50%;
  margin:0 auto 10px;border:10px solid #e8eef5;position:relative;background:#fff
}
.ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:10px solid transparent;border-top-color:var(--green);border-right-color:var(--green);
  transform:rotate(20deg)
}
.stat .big{font-size:16px;font-weight:800;color:#1f9b49}
.stat .small{font-size:13px;color:var(--muted)}
.overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.over-item{padding:6px 2px}
.over-item .n{font-size:34px;font-weight:800}
.over-item .t{font-size:14px;color:var(--muted)}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--text);outline:none;font-size:14px
}
label{display:block;font-size:13px;color:#63748b;margin:8px 0 6px}
button,.btn{
  display:inline-block;padding:10px 16px;border:none;border-radius:12px;
  font-weight:700;font-size:14px;cursor:pointer
}
.btn-green{background:var(--green);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-gray{background:#eef3f8;color:#22324a;border:1px solid var(--line)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:14px 8px;border-top:1px solid var(--line);text-align:left;font-size:14px}
.table th{color:#63748b;font-weight:700}
.badge{
  display:inline-block;padding:9px 13px;border-radius:9px;font-size:14px;
  font-weight:700;border:1px solid #dbe3ec
}
.badge-green{background:#eaf8ef;color:#1c9c46}
.badge-blue{background:#edf3ff;color:#2e67db}
.badge-orange{background:#fff4e8;color:#c97a17}
.alert{
  padding:14px;border-radius:12px;border:1px solid #f0c4c4;
  background:#fff1f1;color:#c62828;margin-bottom:14px
}
.ok{
  padding:14px;border-radius:12px;border:1px solid #bfe3c6;
  background:#edf9ef;color:#21863a;margin-bottom:14px
}
.traffic{
  height:220px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:
    linear-gradient(to top, rgba(61,121,242,.18), rgba(61,121,242,.18)) bottom/100% 38% no-repeat,
    linear-gradient(to top, rgba(255,180,77,.18), rgba(255,180,77,.18)) bottom/100% 18% no-repeat,
    repeating-linear-gradient(to bottom, #fff, #fff 43px, #edf2f7 44px);
}
.software-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.soft{
  border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;
  min-height:110px;background:#fff
}
.soft .n{font-weight:800;margin-top:10px}
.soft .v{color:var(--muted);font-size:13px;margin-top:4px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{width:360px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.login-head{background:#29447b;color:#fff;padding:22px}
.login-head .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.login-body{padding:18px}
.login-body button{width:100%}
@media (max-width:1100px){
  .grid-4,.grid-3,.overview{grid-template-columns:repeat(2,1fr)}
  .grid-2,.software-grid{grid-template-columns:1fr}
}