:root{
  --brand:#0F3D3E; --brand-2:#155254; --ink:#12211F; --muted:#6B7B77;
  --gold:#C9A25A; --gold-soft:#F3E7CF; --bg:#F4F6F2; --card:#FFFFFF;
  --line:#E2E8E3; --danger:#C2453C; --ok:#2E7D5B; --warn:#B7791F;
  --radius:14px; --shadow:0 8px 28px rgba(16,42,38,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.65}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.layout{display:flex;min-height:100vh}
.sidebar{width:236px;flex:0 0 236px;background:linear-gradient(180deg,#0F3D3E 0%,#0B2E2F 100%);color:#EAF1EC;padding:22px 18px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:11px;align-items:center;padding:6px 6px 22px}
.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#C9A25A,#E8CE96);display:flex;align-items:center;justify-content:center;color:#0F3D3E;font-weight:700;font-size:19px;letter-spacing:1px}
.brand-name{font-size:16px;font-weight:700;letter-spacing:.5px}
.brand-sub{font-size:11px;color:#9DB6AE;letter-spacing:.5px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#C9DAD3;font-size:14px;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:rgba(201,162,90,.16);color:#F3E7CF;box-shadow:inset 3px 0 0 var(--gold)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75}
.sidebar-foot{margin-top:26px;padding:14px 12px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#8AA79E;line-height:1.7}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 30px;background:#fff;border-bottom:1px solid var(--line)}
.page-title{font-size:19px;font-weight:700;margin:0}
.page-sub{font-size:12px;color:var(--muted);margin-top:2px}
.userbox{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.userbox form button{background:none;border:1px solid var(--line);padding:7px 12px;border-radius:9px;cursor:pointer;color:var(--muted)}
.userbox form button:hover{border-color:var(--gold);color:var(--brand)}
.content{padding:24px 30px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card-title{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.card-title:before{content:"";width:4px;height:14px;background:var(--gold);border-radius:2px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.stat .label{font-size:12px;color:var(--muted)}
.stat .value{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:.5px}
.stat .hint{font-size:11px;color:var(--muted);margin-top:4px}
.stat:after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--gold-soft);opacity:.5}
.stat.ok .value{color:var(--ok)} .stat.warn .value{color:var(--warn)} .stat.bad .value{color:var(--danger)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .spacer{flex:1}
.input,select,textarea{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff;color:var(--ink);outline:none;font-family:inherit}
.input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,90,.15)}
textarea{width:100%;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9px;border:1px solid transparent;background:var(--brand);color:#fff;font-size:13px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--brand-2)}
.btn.gold{background:var(--gold);color:#2B2413}
.btn.gold:hover{background:#D7B475}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--brand)}
.btn.danger{background:#FBEDEC;color:var(--danger);border-color:#F2D3D0}
.btn.danger:hover{background:var(--danger);color:#fff}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBF8}
.table td{padding:12px 10px;border-bottom:1px solid #EEF2EE;vertical-align:middle}
.table tr:hover td{background:#FBFCF9}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12.5px;letter-spacing:.5px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:#EEF1EE;color:#5B6A66}
.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.green{background:#E7F4EC;color:var(--ok)} .badge.red{background:#FBEDEC;color:var(--danger)}
.badge.amber{background:#FCF2DF;color:var(--warn)} .badge.gray{background:#EEF1EE;color:#5B6A66}
.badge.gold{background:var(--gold-soft);color:#8A6A2A}
.pagination{display:flex;gap:6px;margin-top:16px;list-style:none;padding:0;flex-wrap:wrap}
.pagination .page-link{padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12.5px}
.pagination .page-item.active .page-link{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination .page-item.disabled .page-link{color:#C3CEC9}
.empty{padding:36px;text-align:center;color:var(--muted);font-size:13px}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;border:1px solid}
.alert.success{background:#E9F6EF;border-color:#CBE9D8;color:#1E6A4A}
.alert.error{background:#FCEFEE;border-color:#F3D5D2;color:#9C332C}
.alert.warn{background:#FDF4E3;border-color:#F0E0BE;color:#8A6120}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--muted)}
.field.full{grid-column:1/-1}
.hint{font-size:11.5px;color:var(--muted)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 12px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.code-box{background:#0F3D3E;color:#EDE3CB;padding:14px;border-radius:10px;font-family:Consolas,monospace;font-size:12.5px;line-height:2;max-height:260px;overflow:auto;letter-spacing:.5px}
.section-title{font-size:13px;font-weight:700;margin:18px 0 10px;color:var(--brand)}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#0F3D3E}
.login-left{padding:64px;color:#F1E8D4;display:flex;flex-direction:column;justify-content:space-between;background:
  radial-gradient(60% 50% at 20% 10%,rgba(201,162,90,.22),transparent 60%),
  radial-gradient(50% 50% at 80% 90%,rgba(201,162,90,.15),transparent 60%),
  linear-gradient(160deg,#0F3D3E,#0A2829)}
.login-logo{display:flex;align-items:center;gap:14px}
.login-logo .mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#E8CE96,#C9A25A);color:#0F3D3E;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.login-hero h1{font-size:38px;line-height:1.3;margin:0 0 16px;letter-spacing:1px}
.login-hero p{color:#B9CEC5;max-width:430px;font-size:14px}
.login-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.login-tags span{border:1px solid rgba(201,162,90,.4);color:#E7D7B4;padding:5px 10px;border-radius:999px;font-size:12px}
.login-foot{font-size:12px;color:#8FA9A0}
.login-right{background:#F7F8F4;display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:100%;max-width:392px;background:#fff;border-radius:18px;padding:34px;box-shadow:0 24px 60px rgba(6,30,28,.25)}
.login-card h2{margin:0 0 6px;font-size:22px}
.login-card .sub{color:var(--muted);font-size:12.5px;margin-bottom:22px}
.login-form{display:flex;flex-direction:column;gap:14px}
.captcha-row{display:flex;gap:10px}
.captcha-row .input{flex:1}
.captcha-row img{height:40px;border-radius:9px;border:1px solid var(--line);cursor:pointer}
.login-btn{background:var(--brand);color:#fff;border:none;padding:12px;border-radius:10px;font-size:14px;cursor:pointer;margin-top:6px}
.login-btn:hover{background:var(--brand-2)}
.login-copy{color:#9AA9A4;font-size:11.5px;text-align:center;margin-top:18px}
.copyright{font-size:11.5px;color:#93A39E;text-align:center;padding:18px}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-left{display:none}}
@media (max-width:720px){.sidebar{display:none}.form-grid{grid-template-columns:1fr}.stat-grid{gap:10px}.content{padding:16px}}