:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei UI", sans-serif; background: #080b0f; color: #eef2f4; --line:#252d36; --muted:#7d8995; --red:#ff4e3e; --green:#26d99a; --amber:#f3ad45; letter-spacing:0; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:#080b0f; } button,input,select { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.grid-bg { position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 88%); }
.topbar { position:relative; height:76px; display:flex; align-items:center; padding:0 44px; border-bottom:1px solid var(--line); background:rgba(9,12,16,.86); } .brand { display:flex; align-items:center; gap:13px; } .brand>span { width:36px;height:36px;display:grid;place-items:center;background:var(--red);font-weight:800; } .brand b { display:block;font-size:12px;letter-spacing:.08em; } .brand small { display:block;margin-top:4px;color:var(--muted);font-size:10px; } .server-badge { margin-left:auto;color:#8e9aa4;font:700 10px/1 monospace;letter-spacing:.08em; } .server-badge i { display:inline-block;width:6px;height:6px;margin-right:7px;background:var(--green);box-shadow:0 0 10px var(--green); }
main { position:relative; max-width:1360px; margin:0 auto; padding:65px 44px 80px; } .login-view { min-height:65vh;display:grid;grid-template-columns:1fr 440px;gap:110px;align-items:center;max-width:1080px;margin:0 auto; } .eyebrow { display:block;color:var(--red);font:700 10px/1 monospace;letter-spacing:.13em; } .login-copy h1 { margin:18px 0 17px;font-size:54px;line-height:1.13;letter-spacing:-.02em; } h1 em { color:var(--red);font-style:normal; } .login-copy p { color:var(--muted);font-size:14px; }
.console-panel { border:1px solid var(--line);background:rgba(14,18,24,.86);padding:28px;box-shadow:0 16px 55px rgba(0,0,0,.24); } .panel-kicker { color:#75818d;font:700 10px/1 monospace; } h2 { margin:11px 0 8px;font-size:22px; } .muted { margin:0 0 26px;color:var(--muted);font-size:12px; } label { display:block;color:#aeb8c2;font-size:11px;font-weight:650; } input,select { width:100%;height:44px;margin-top:9px;padding:0 12px;border:1px solid #303943;outline:0;color:#f4f6f7;background:#0b0f14; } input:focus,select:focus { border-color:var(--red); } .form-error { min-height:32px;padding-top:10px;color:#ff766a;font-size:11px; } .primary { width:100%;height:47px;border:0;color:white;background:var(--red);font-weight:750; } .primary:hover { background:#ff6252; } .primary span { margin-left:8px;font-size:18px; }
.dash-head { display:flex;align-items:end;justify-content:space-between; } .dash-head h1 { margin:12px 0 0;font-size:34px; } .ghost { height:34px;padding:0 13px;border:1px solid #35404a;color:#a7b1ba;background:transparent;font-size:11px; } .ghost:hover { color:white;border-color:#687583;background:#161c22; }
.announcement-editor{margin:20px 0}.announcement-fields{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:end}.announcement-editor textarea{width:100%;margin-top:9px;padding:11px 12px;border:1px solid #303943;outline:0;resize:vertical;color:#f4f6f7;background:#0b0f14;line-height:1.6}.announcement-editor textarea:focus{border-color:var(--red)}.publish-toggle{height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #303943;background:#0b0f14}.publish-toggle input{width:14px;height:14px;margin:0}.announcement-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:13px;color:#6f7b86;font-size:10px}.small-primary{width:auto;min-width:142px;padding:0 15px}.announcement-editor .section-title{margin-bottom:17px}
.stats { display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:30px 0 20px; } .stats article { min-height:116px;padding:18px 20px;border:1px solid var(--line);background:#10151b; } .stats span,.stats small { display:block;color:#8995a1;font-size:11px; } .stats strong { display:block;margin:10px 0 3px;font:600 31px/1 "Segoe UI"; } .stats article.green strong { color:var(--green); } .stats article.amber strong { color:var(--amber); } .stats article.red strong { color:var(--red); }
.columns { display:grid;grid-template-columns:390px 1fr;gap:20px;align-items:start; } .section-title { display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:25px; } .section-title h2 { margin-bottom:0; } .security-mark { color:#667481;font:700 9px/1 monospace; } .plan-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px; } .plan { position:relative;min-height:78px;padding:16px 12px;border:1px solid #303943;background:#0b0f14;cursor:pointer; } .plan input { position:absolute;opacity:0; } .plan:has(input:checked) { border-color:var(--red);background:#221513; } .plan b,.plan span { display:block; } .plan b { color:#f0f3f4;font-size:13px; } .plan span { margin-top:7px;color:#77838e;font-size:10px; } .input-row { display:grid;grid-template-columns:110px 1fr;gap:10px;margin-bottom:22px; } .generated { margin-top:18px;border-top:1px solid var(--line);padding-top:16px; } .generated-head { display:flex;justify-content:space-between;align-items:center;font-size:12px; } pre { max-height:160px;overflow:auto;margin:13px 0 0;padding:13px;color:#8de6c1;background:#081810;font:12px/1.75 monospace;white-space:pre-wrap; }
.toolbar { display:flex;gap:8px;margin-bottom:12px; } .toolbar input { flex:1;margin:0; } .toolbar select { width:130px;margin:0; } .table-wrap { overflow:auto; } table { width:100%;border-collapse:collapse;min-width:590px; } th { padding:10px 9px;border-bottom:1px solid var(--line);color:#697681;text-align:left;font:700 9px/1 monospace;letter-spacing:.04em; } td { padding:14px 9px;border-bottom:1px solid #1c232b;color:#bdc6ce;font-size:11px;vertical-align:middle; } td small { display:block;color:#687580;margin-top:4px;font:10px monospace; } .status { display:inline-flex;align-items:center;gap:6px;color:#9aa6af;font-size:10px; } .status:before { content:"";width:6px;height:6px;background:#65727d; } .status.active { color:var(--green); }.status.active:before { background:var(--green); }.status.issued { color:#83a8ff; }.status.issued:before { background:#83a8ff; }.status.expired,.status.revoked { color:#ff776c; }.status.expired:before,.status.revoked:before { background:var(--red); } .table-action { border:0;color:#81909c;background:transparent;font-size:10px; }.table-action:hover { color:white; } .audit-panel { margin-top:20px; }
.toast { position:fixed;right:24px;bottom:24px;transform:translateY(20px);opacity:0;padding:13px 16px;border:1px solid #33404a;color:#dbe4e8;background:#111820;font-size:11px;transition:.2s; } .toast.show { transform:none;opacity:1; }
@media (max-width:900px) { .login-view { grid-template-columns:1fr;gap:30px; }.login-copy h1{font-size:40px}.columns{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .topbar{padding:0 18px}main{padding:36px 18px}.stats{grid-template-columns:1fr 1fr}.console-panel{padding:20px}.login-view{min-height:auto}.input-row{grid-template-columns:1fr}.announcement-fields{grid-template-columns:1fr}.announcement-actions{align-items:stretch;flex-direction:column}.small-primary{width:100%} }