:root { --navy:#0d1b2a; --blue:#2e74b5; --surface:#fff; --bg:#f4f7fb; --line:#dce4ee; --muted:#637083; --danger:#b42318; --green:#0d8a5f; font-family: Inter, "Microsoft YaHei", Arial, sans-serif; color:var(--navy); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); } button,input,select { font:inherit; } button { cursor:pointer; } .hidden { display:none !important; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#ddebfb,transparent 40%),var(--bg); } .auth-card { width:min(100%,440px); background:#fff; padding:44px; border-radius:18px; box-shadow:0 22px 60px #102a431c; } .brand-mark { display:inline-grid; place-items:center; width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2e74b5,#49a5df);color:white;font-weight:800; } .auth-card .brand-mark{width:46px;height:46px;font-size:23px}.eyebrow { margin:0 0 8px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.12em; }.muted { color:var(--muted); line-height:1.6; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }.sidebar { background:#0d1b2a; color:#eff7ff; padding:24px 16px; display:flex; flex-direction:column; }.brand { display:flex; gap:10px;align-items:center;font-weight:800;padding:0 8px 34px; }.sidebar nav { display:grid;gap:6px; }.nav-item { text-align:left;border:0;background:transparent;color:#b8c4d0;border-radius:9px;padding:12px 14px; }.nav-item:hover,.nav-item.active { color:white;background:#1d3955; }.sidebar-bottom{margin-top:auto;border-top:1px solid #29445e;padding:18px 8px 0;color:#b8c4d0;display:grid;gap:8px;font-size:13px}.text-button{border:0;background:none;color:#b8c4d0;text-align:left;padding:0}.content{padding:34px;max-width:1500px;width:100%;margin:0 auto}.content-header{display:flex;align-items:start;justify-content:space-between;margin-bottom:28px}.content-header h1{margin:0;font-size:29px}.status-dot{color:var(--green);font-size:13px;background:#e8f7ef;padding:8px 10px;border-radius:99px}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stat{background:white;border:1px solid var(--line);border-radius:13px;padding:21px}.stat .label{color:var(--muted);font-size:13px}.stat .value{margin-top:10px;font-size:30px;font-weight:800}.notice,.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:22px}.notice{margin-top:18px;border-left:4px solid var(--blue)}.notice h2,.panel h2{margin:0 0 14px;font-size:17px}.notice p{color:#516073;line-height:1.7;margin:0}.page-actions{display:flex;gap:10px;margin-bottom:16px}.page-actions input{width:280px}.two-col{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(520px,1.7fr);gap:18px}.stack-form{display:grid;gap:15px}.stack-form label{display:grid;gap:7px;font-size:13px;font-weight:650}.compact{gap:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}input,select{border:1px solid #cbd6e2;border-radius:8px;padding:10px 11px;outline:none;background:white}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2e74b522}.primary,.secondary{border-radius:8px;padding:10px 14px;font-weight:750;border:1px solid}.primary{background:var(--blue);border-color:var(--blue);color:white}.secondary{background:white;border-color:#cbd6e2;color:#32465a}.primary:hover{background:#1e5e95}.form-error{margin:0;color:var(--danger);min-height:16px;font-size:12px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:11px 9px;border-bottom:1px solid #e8edf3;white-space:nowrap;text-align:left}th{color:var(--muted);font-weight:700;font-size:12px}.role,.state{border-radius:99px;padding:4px 7px;font-size:11px;font-weight:800}.role{background:#e9f3fd;color:#155f9f}.state.ok{background:#e6f7ef;color:#087447}.state.bad{background:#feeceb;color:#b42318}.row-actions{display:flex;gap:7px}.mini{font-size:11px;padding:6px 8px}dialog{border:0;border-radius:13px;width:min(92vw,440px);box-shadow:0 20px 90px #0005}dialog::backdrop{background:#0d1b2a88}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:4px 0 0}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{min-height:auto}.sidebar nav{display:flex;overflow:auto}.sidebar-bottom{display:none}.content{padding:22px}.two-col{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.content-header{gap:12px}.status-dot{display:none}}@media(max-width:520px){.stat-grid,.form-grid{grid-template-columns:1fr}.content{padding:16px}.auth-card{padding:30px 24px}}