:root { color-scheme: dark; --bg:#101516; --surface:#191f20; --surface-raised:#202829; --line:#334041; --text:#edf3f1; --muted:#9aa9a5; --green:#62d69b; --green-dark:#163b2b; --amber:#f1bd6b; --amber-dark:#4a371d; --red:#ef8585; --red-dark:#472525; --focus:#79bcff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 "Segoe UI", "Microsoft YaHei", sans-serif; }
button,input { font:inherit; }
button { border:0; border-radius:5px; padding:10px 14px; color:var(--text); cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
input { width:100%; min-width:0; border:1px solid var(--line); border-radius:5px; background:#0f1415; color:var(--text); padding:10px 11px; outline:none; }
input:focus { border-color:var(--focus); box-shadow:0 0 0 2px #79bcff1c; }
h1,h2,p { margin:0; }
h1 { font-size:26px; font-weight:700; }
h2 { font-size:17px; }
code { color:#e6fff0; font-size:13px; word-break:break-all; }
.shell { max-width:1320px; margin:0 auto; padding:30px 24px 52px; }
.topbar,.authbar,.section-title,.connection,.inventory-tools,.filters,.code-cell { display:flex; align-items:center; }
.topbar { justify-content:space-between; margin-bottom:22px; }
.eyebrow { color:var(--green); font-size:11px; font-weight:700; letter-spacing:1.4px; margin-bottom:6px; }
.connection { gap:8px; color:var(--muted); }
.dot { width:8px; height:8px; border-radius:50%; background:#65716e; }
.dot.on { background:var(--green); box-shadow:0 0 0 4px #62d69b1c; }
.dot.bad { background:var(--red); }
.authbar,.metric,.issue-panel,.inventory,.licenses { border:1px solid var(--line); background:var(--surface); border-radius:7px; }
.authbar { gap:12px; padding:14px 16px; margin-bottom:14px; }
.authbar label { color:var(--muted); white-space:nowrap; }
.authbar input { flex:1; }
.primary { background:var(--green); color:#0c2719; font-weight:700; }
.secondary { background:var(--surface-raised); border:1px solid var(--line); }
.compact { padding:7px 10px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.metric { padding:15px 18px; }
.metric span,.muted,small { color:var(--muted); }
.metric strong { display:block; margin-top:7px; font-size:25px; }
.workspace { display:grid; grid-template-columns:278px minmax(0,1fr); gap:16px; align-items:start; margin-bottom:16px; }
.issue-panel,.inventory,.licenses { padding:20px; }
.section-title { justify-content:space-between; gap:16px; margin-bottom:16px; }
label { display:block; color:var(--muted); margin-bottom:13px; }
label input { margin-top:7px; }
.full { width:100%; margin-top:3px; }
.issued-card { margin-top:16px; padding:12px; border:1px solid #2d6c50; border-radius:5px; background:var(--green-dark); }
.issued-card span { display:block; color:var(--green); font-size:12px; margin-bottom:6px; }
.issued-card b { color:var(--text); }
.issued-codes { max-height:210px; margin:8px 0 10px; overflow:auto; border:1px solid #2d6c50; background:#101917; }
.issued-codes code { display:block; padding:7px 9px; border-bottom:1px solid #28523d; }
.issued-codes code:last-child { border-bottom:0; }
.hidden { display:none; }
.inventory-tools { justify-content:space-between; gap:12px; margin-bottom:14px; }
.inventory-tools input { max-width:300px; }
.filters { gap:5px; flex-wrap:wrap; }
.filter { padding:7px 10px; border:1px solid var(--line); background:transparent; color:var(--muted); }
.filter.active { border-color:#3d8b68; background:var(--green-dark); color:var(--green); }
.table-wrap { overflow:auto; }
table { width:100%; min-width:780px; border-collapse:collapse; }
th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; }
th { color:var(--muted); font-size:12px; font-weight:600; }
td { color:#dce5e1; }
td:first-child { white-space:normal; min-width:210px; }
td small { display:block; margin-top:3px; font-size:11px; }
.empty { padding:30px; text-align:center; color:var(--muted); }
.status { display:inline-flex; padding:4px 8px; border-radius:99px; font-size:12px; }
.status.ok { color:var(--green); background:var(--green-dark); }
.status.used { color:var(--amber); background:var(--amber-dark); }
.status.off { color:var(--red); background:var(--red-dark); }
.code-cell { gap:8px; }
.copy-card { padding:5px 8px; border:1px solid var(--line); background:var(--surface-raised); color:var(--muted); font-size:12px; }
.actions { display:flex; gap:7px; }
.action { padding:6px 9px; border:1px solid #6c5634; background:transparent; color:var(--amber); }
.action.enable { border-color:#2d6c50; color:var(--green); }
.action.delete { border-color:#7a3d3d; color:var(--red); }
.licenses { margin-bottom:0; }
.toast { position:fixed; right:24px; bottom:24px; max-width:360px; padding:12px 15px; border:1px solid #386b52; border-radius:5px; background:#25302c; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s,transform .2s; }
.toast.bad { border-color:#7a3d3d; }
.toast.show { opacity:1; transform:translateY(0); }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; } .issue-panel { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } .issue-panel .section-title,.issue-panel .issued-card { grid-column:1/-1; } }
@media (max-width:700px) { .shell { padding:22px 14px 40px; } h1 { font-size:22px; } .authbar { align-items:stretch; flex-wrap:wrap; } .authbar label { width:100%; } .authbar input { flex-basis:100%; } .metrics { grid-template-columns:repeat(2,1fr); } .inventory-tools { align-items:stretch; flex-direction:column; } .inventory-tools input { max-width:none; } .section-title { align-items:flex-start; flex-direction:column; } .issue-panel { display:block; } }