:root { color-scheme: light; --ink:#18212f; --muted:#697386; --line:#dfe4ec; --paper:#fff; --bg:#f4f6f9; --blue:#1668e3; --red:#c13535; --green:#147a51; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 "Microsoft YaHei UI", "Segoe UI", sans-serif; }
main { width:min(1180px, calc(100% - 32px)); margin:36px auto 72px; }
header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
h1 { font-size:34px; line-height:1.1; margin:2px 0 8px; letter-spacing:-1px; }
h2 { font-size:18px; margin:0 0 16px; }
p { margin:0; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:2px; }
.sub,.hint { color:var(--muted); }
.pill { border-radius:999px; padding:7px 12px; font-weight:700; }
.pill.off { background:#eceff3; color:#6c7480; }
.pill.on { background:#e4f7ef; color:var(--green); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 8px 28px rgba(23,36,56,.05); }
.login { margin-bottom:18px; }
.row { display:flex; gap:10px; margin:7px 0; }
.row input { flex:1; }
label { display:block; color:#3c4657; font-size:13px; font-weight:700; }
input,textarea,button { font:inherit; }
input,textarea { width:100%; border:1px solid #cfd6e2; border-radius:9px; padding:10px 11px; background:#fff; color:var(--ink); outline:none; }
input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,104,227,.12); }
textarea { resize:vertical; min-height:76px; }
button { border:1px solid #cbd3df; border-radius:9px; padding:9px 13px; background:#fff; color:var(--ink); cursor:pointer; font-weight:700; white-space:nowrap; }
button:hover:not(:disabled) { border-color:#9ca9bb; background:#f9fafc; }
button.primary { border-color:var(--blue); background:var(--blue); color:#fff; }
button.danger { color:var(--red); }
button:disabled { cursor:not-allowed; opacity:.45; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.fields { display:grid; gap:12px; margin-bottom:14px; }
.fields label input,.fields label textarea { margin-top:5px; }
.result { display:flex; flex-direction:column; }
.result textarea { flex:1; min-height:210px; font-family:Consolas, monospace; letter-spacing:.4px; }
.result button { margin-top:10px; align-self:flex-start; }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:12px; }
.section-title h2 { margin-bottom:2px; }
.section-actions { display:flex; gap:8px; align-items:center; width:min(100%, 430px); }
.section-actions input { min-width:240px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:940px; }
th,td { border-top:1px solid var(--line); padding:12px 9px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:12px; }
td.actions { display:flex; gap:6px; flex-wrap:wrap; }
td.actions button { padding:5px 8px; font-size:12px; }
.status { font-weight:800; }
.status.active { color:var(--green); }
.status.revoked { color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:34px; }
#toast { position:fixed; right:24px; bottom:24px; max-width:420px; padding:12px 16px; border-radius:10px; background:#18212f; color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.18); opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; }
#toast.show { opacity:1; transform:none; }
#toast.error { background:#a42d2d; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } .row { flex-direction:column; } header { align-items:center; } main { width:min(100% - 20px, 1180px); margin-top:20px; } }