:root { color-scheme: light; --blue:#2787cc; --blue-deep:#17689f; --ink:#172331; --muted:#6f7c89; --line:#e3eaf0; --bg:#f3f7fa; --green:#278a68; --amber:#bd7b24; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); letter-spacing:0; }
button,input,select { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
.hidden { display:none !important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.35fr) minmax(360px,.65fr); }
.login-brand { display:flex; align-items:center; gap:28px; padding:8vw; color:#fff; background:linear-gradient(145deg,#1888cd 0%,#17689f 60%,#145578 100%); }
.brand-mark { width:76px; height:76px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.44); background:rgba(255,255,255,.14); font-size:34px; font-weight:700; }
.brand-mark.small { width:42px; height:42px; font-size:20px; color:#fff; background:var(--blue); border:0; }
.login-brand p { margin:0 0 20px; font-size:18px; font-weight:650; }
.login-brand h1 { max-width:650px; margin:0 0 24px; font-size:clamp(32px,4vw,58px); line-height:1.18; font-weight:720; }
.login-brand span { color:rgba(255,255,255,.72); }
.login-panel { align-self:center; width:min(360px,80%); margin:auto; padding:34px; background:#fff; border:1px solid var(--line); box-shadow:0 20px 60px rgba(31,63,84,.12); }
.login-title { display:flex; justify-content:space-between; align-items:center; font-size:21px; font-weight:700; }
.login-title small { color:var(--green); font-size:12px; font-weight:600; }
.qr-frame { width:220px; height:220px; margin:28px auto 18px; padding:12px; border:1px solid var(--line); }
.qr-frame img,.invite-result img { width:100%; height:100%; object-fit:contain; }
.login-panel p { color:var(--muted); text-align:center; font-size:13px; }
.primary,.secondary { height:42px; padding:0 18px; border:0; font-weight:650; }
.primary { color:#fff; background:var(--blue); }
.primary:hover { background:var(--blue-deep); }
.secondary { color:var(--blue); background:#fff; border:1px solid #b9d8eb; }
.login-panel .secondary { width:100%; margin-top:12px; }
.text-button { width:100%; margin-top:12px; border:0; color:var(--muted); background:transparent; }
.workspace { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); }
aside { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 18px; background:#fff; border-right:1px solid var(--line); }
.side-brand { display:flex; gap:12px; align-items:center; padding:4px 8px 30px; }
.side-brand strong,.side-brand span { display:block; }
.side-brand span { margin-top:3px; color:var(--muted); font-size:12px; }
nav { display:grid; gap:6px; }
nav button { height:44px; padding:0 14px; border:0; text-align:left; color:#536170; background:transparent; }
nav button.active { color:var(--blue); font-weight:650; background:#eaf5fc; border-left:3px solid var(--blue); }
.side-foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding:16px 8px 0; border-top:1px solid var(--line); font-size:13px; }
.side-foot button { border:0; color:var(--muted); background:transparent; }
main { min-width:0; padding:38px 42px 70px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
header p { margin:0 0 6px; color:var(--blue); font-size:13px; }
header h2 { margin:0; font-size:28px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:16px; margin-bottom:20px; }
.metric { padding:22px; background:#fff; border-top:3px solid var(--blue); box-shadow:0 4px 18px rgba(39,73,98,.05); }
.metric span { display:block; color:var(--muted); font-size:13px; }
.metric b { display:block; margin-top:12px; font-size:30px; }
.content-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; }
.panel { padding:24px; background:#fff; border:1px solid var(--line); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.panel-head small { color:var(--muted); }
.panel-head h3 { margin:5px 0 0; font-size:18px; }
.panel-head > span { color:var(--muted); font-size:12px; }
.panel-head .live { color:var(--green); }
.breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.breakdown div { padding:22px; background:#fff; }
.breakdown span { display:block; color:var(--muted); font-size:12px; }
.breakdown b { display:block; margin-top:9px; font-size:22px; }
.health-list { display:grid; }
.health-list div { min-height:51px; display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.health-list div:last-child { border-bottom:0; }
.health-list p { margin:0; }
.health-list b { font-size:12px; font-weight:600; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#aaa; }
.status-dot.ok { background:var(--green); }.status-dot.warn { background:var(--amber); }
.table-panel { overflow:hidden; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:15px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; white-space:nowrap; }
th { color:var(--muted); font-weight:550; background:#f8fafc; }
td small { display:block; margin-top:5px; color:var(--muted); font-weight:400; }
td select { height:34px; border:1px solid var(--line); background:#fff; }
.switch-label { display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
.save-member:disabled { opacity:.5; cursor:wait; }
.role-tag,.state-tag { display:inline-flex; padding:4px 8px; color:var(--blue-deep); background:#eaf5fc; font-size:12px; }
.state-tag { color:var(--green); background:#eaf7f2; }
.audit-list article { display:grid; grid-template-columns:160px 120px 1fr; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); font-size:13px; }
.audit-list time,.audit-list span { color:var(--muted); }
.compact { height:34px; }.wide { width:100%; }
dialog { width:min(430px,90vw); padding:30px; border:0; box-shadow:0 24px 90px rgba(20,42,58,.25); }
dialog::backdrop { background:rgba(18,35,47,.48); }
dialog h3 { margin:8px 0 24px; }
.dialog-close { position:absolute; right:16px; top:12px; border:0; background:transparent; font-size:26px; }
.invite-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.invite-options label { color:var(--muted); font-size:12px; }
.invite-options select,.invite-options input { width:100%; height:40px; margin-top:7px; padding:0 10px; border:1px solid var(--line); background:#fff; }
.invite-result { width:210px; margin:24px auto 0; text-align:center; }
.invite-result img { height:210px; border:1px solid var(--line); }
.invite-result p { color:var(--muted); font-size:12px; }
.toast { position:fixed; right:26px; bottom:26px; padding:12px 18px; color:#fff; background:#233746; opacity:0; transform:translateY(10px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:none; }
@media (max-width:900px) { .login-shell{grid-template-columns:1fr}.login-brand{display:none}.workspace{grid-template-columns:72px 1fr}aside{padding:20px 10px}.side-brand>div:last-child,nav button,.side-foot{font-size:0}.side-brand{padding:0}.metrics{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}main{padding:24px 18px}.audit-list article{grid-template-columns:1fr}.invite-options{grid-template-columns:1fr} }