:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --line:#e2e8f0;
  --primary:#183b6b;
  --primary-2:#24589b;
  --accent:#f59e0b;
  --text:#1f2937;
  --muted:#667085;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --shadow:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
  background:linear-gradient(180deg,#f6f9fd 0,#eef4fb 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.layout{display:flex;min-height:100vh}
.sidebar{
  width:250px;background:linear-gradient(180deg,var(--primary),#102b4c);
  color:#fff;padding:22px 16px;position:fixed;left:0;top:0;bottom:0;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand .logo{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;font-weight:700
}
.brand h1{font-size:20px;margin:0}
.brand small{display:block;color:rgba(255,255,255,.72);margin-top:2px}
.menu{display:grid;gap:8px;margin-top:18px}
.menu a{
  padding:12px 14px;border-radius:12px;color:rgba(255,255,255,.88);
  display:flex;align-items:center;justify-content:space-between
}
.menu a.active,.menu a:hover{background:rgba(255,255,255,.12);color:#fff}
.side-note{
  margin-top:24px;padding:14px;border-radius:14px;background:rgba(255,255,255,.1);
  font-size:13px;line-height:1.65;color:rgba(255,255,255,.85)
}
.main{
  margin-left:250px;flex:1;padding:24px 28px 36px;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
}
.topbar h2{margin:0;font-size:26px}
.topbar .meta{color:var(--muted);font-size:14px}
.topbar .user{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  padding:10px 12px;border-radius:14px;box-shadow:var(--shadow)
}
.avatar{
  width:34px;height:34px;border-radius:50%;background:#dbeafe;color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:700
}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;
  box-shadow:var(--shadow)
}
.card h3{margin:0 0 10px 0;font-size:18px}
.sub{color:var(--muted);font-size:13px}
.metric .num{font-size:32px;font-weight:700;margin-top:10px}
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600
}
.badge.green{background:#dcfce7;color:#166534}
.badge.orange{background:#ffedd5;color:#9a3412}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.progress{
  height:10px;background:#edf2f7;border-radius:999px;overflow:hidden;margin-top:10px
}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#f97316)}
.kpis{display:flex;justify-content:space-between;align-items:end}
ul.clean{padding-left:18px;margin:8px 0 0 0}
li{margin:6px 0}
.table{
  width:100%;border-collapse:collapse;font-size:14px
}
.table th,.table td{
  padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top
}
.table th{color:#475467;background:#f8fafc}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.status-dot.green{background:#16a34a}.status-dot.orange{background:#f59e0b}.status-dot.red{background:#dc2626}
.input,.textarea,.select{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid #d0d7e2;background:#fff;
  font:inherit
}
.textarea{min-height:118px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{
  border:none;background:linear-gradient(135deg,var(--primary-2),var(--primary));color:#fff;
  padding:11px 16px;border-radius:12px;font-weight:600;cursor:pointer
}
.btn.secondary{background:#eef4ff;color:var(--primary)}
.note{
  background:#f8fbff;border:1px dashed #b7cff5;border-radius:14px;padding:12px 14px;color:#29405c;font-size:14px
}
.hero{
  background:linear-gradient(135deg,#173a68,#285da2 60%,#2a78bf);
  color:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow)
}
.hero h1{font-size:34px;margin:0 0 10px 0}
.hero p{margin:0;color:rgba(255,255,255,.84);max-width:760px;line-height:1.7}
.hero .actions{margin-top:18px;display:flex;gap:12px}
.hero .actions a{padding:11px 16px;border-radius:12px;background:#fff;color:#173a68;font-weight:700}
.hero .actions a.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.feature{
  padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)
}
.footer-note{color:var(--muted);font-size:12px;margin-top:10px}
.login-wrap{
  min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr
}
.login-left{
  padding:64px 68px;background:linear-gradient(135deg,#f7fbff,#eef5ff)
}
.login-right{
  padding:64px 48px;display:flex;align-items:center;justify-content:center
}
.login-card{
  width:100%;max-width:430px;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:28px;box-shadow:var(--shadow)
}
.login-card h2{margin:0 0 8px;font-size:28px}
.login-card .btn{width:100%;margin-top:14px}
.tagline{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tag{
  background:#fff;border:1px solid #dbe5f1;border-radius:18px;padding:16px;box-shadow:var(--shadow)
}
pre.output{
  white-space:pre-wrap;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:14px;
  min-height:180px;font-size:13px;line-height:1.7;overflow:auto
}
.small-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.small-box{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fafcff}
.timeline{border-left:2px solid #d7e4f5;padding-left:14px;margin-top:8px}
.timeline .item{position:relative;margin:10px 0;padding-left:6px}
.timeline .item::before{
  content:"";position:absolute;left:-21px;top:6px;width:10px;height:10px;border-radius:50%;
  background:#2b6cb0
}
@media (max-width:1080px){
  .grid-4,.grid-3,.grid-2,.row,.small-grid{grid-template-columns:1fr}
  .login-wrap{grid-template-columns:1fr}
  .sidebar{position:static;width:100%;height:auto}
  .main{margin-left:0}
  .layout{display:block}
}