:root { --ink:#173b3a; --muted:#576c6b; --accent:#146b65; --bg:#f4f7f6; --surface:#fff; --line:#d5e2df; --error:#a32f28; font:15px/1.65 system-ui,-apple-system,"Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none!important; }
header { display:flex; align-items:center; gap:24px; padding:20px 32px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { font-size:22px; font-weight:650; margin-right:auto; } .brand small { display:inline-block; font-size:14px; font-weight:400; margin-left:16px; color:var(--muted); }
h1 { font-size:26px; margin:0 0 8px; } h2 { font-size:18px; margin:0 0 16px; } p { color:var(--muted); }
button,input,select,textarea { font:inherit; border:1px solid var(--line); border-radius:4px; } button { background:var(--surface); color:var(--ink); padding:8px 16px; cursor:pointer; } button:hover { background:#edf4f2; } button:disabled { cursor:wait; opacity:.6; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); } input,select,textarea { width:100%; padding:9px 12px; background:#fff; color:var(--ink); } textarea { min-height:180px; font-family:monospace; }
:focus-visible { outline:3px solid #cc8819; outline-offset:3px; }
label { display:block; font-size:14px; margin-bottom:16px; } label input,label select,label textarea { display:block; margin-top:4px; }
.login-panel { max-width:480px; margin:48px auto; background:var(--surface); border:1px solid var(--line); padding:32px; border-radius:8px; }
.inline,.actions { display:flex; align-items:center; gap:12px; } .inline input { flex:1; min-width:0; } .inline button { flex-shrink:0; } #captcha-image { max-width:140px; height:40px; display:block; }
#workspace { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:calc(100vh - 80px); } nav { padding:24px 16px; border-right:1px solid var(--line); } nav button { display:block; width:100%; text-align:left; border:0; margin-bottom:8px; } nav button[aria-current="page"] { background:#e0eeea; color:var(--accent); font-weight:650; }
#content { padding:32px; min-width:0; } #notice { padding:0 32px; } #notice:not(:empty) { padding:12px 32px; background:#e5f0ed; } #notice.error { color:var(--error); background:#fff0ed; }
.panel { background:var(--surface); padding:24px; border:1px solid var(--line); border-radius:6px; margin:24px 0; } .metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; } .metric { padding:20px; background:var(--surface); border:1px solid var(--line); } .metric strong { font-size:30px; display:block; font-variant-numeric:tabular-nums; } .metric span { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; max-width:800px; } .wide { grid-column:1/-1; } .table-scroll { overflow:auto; margin:16px 0; } table { width:100%; border-collapse:collapse; background:var(--surface); white-space:nowrap; text-align:left; } th,td { padding:12px 16px; border-bottom:1px solid var(--line); max-width:340px; overflow:hidden; text-overflow:ellipsis; } th { background:#edf3f1; font-size:13px; } .empty { padding:40px; text-align:center; color:var(--muted); } .pager { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:16px 0; } pre { overflow:auto; background:#edf3f1; padding:16px; white-space:pre-wrap; word-break:break-word; }
dialog { max-width:480px; width:calc(100% - 32px); border:1px solid var(--line); border-radius:8px; padding:24px; } dialog::backdrop { background:#173b3a66; } .skip { position:absolute; left:12px; top:-80px; background:white; padding:12px; } .skip:focus { top:8px; } .hint { font-size:13px; }
@media(max-width:768px) { header { padding:16px; gap:12px; flex-wrap:wrap; } .brand small { display:block; margin:0; } #workspace { grid-template-columns:1fr; } nav { display:flex; overflow:auto; padding:12px; border:0; border-bottom:1px solid var(--line); } nav button { width:auto; white-space:nowrap; margin:0 4px; } #content { padding:20px 16px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .metric { padding:12px; } .form-grid { grid-template-columns:1fr; } .login-panel { margin:24px 12px; padding:24px; } #identity { font-size:13px; } .actions { flex-wrap:wrap; } }