:root {
    --blue: #1769e0;
    --blue-dark: #0f4fae;
    --blue-soft: #eaf3ff;
    --orange: #ff7a00;
    --text: #172033;
    --muted: #657087;
    --line: #dce5f1;
    --panel: rgba(255, 255, 255, 0.88);
    --danger: #d92d20;
    --success: #16803c;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); text-decoration: none; }
.admin-body { min-height: 100vh; background: #eef4fb; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 232px; padding: 22px 16px; background: rgba(247, 251, 255, .9); border-right: 1px solid rgba(112, 145, 183, .24); backdrop-filter: blur(16px); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: white; background: var(--blue); font-weight: 800; font-size: 20px; }
.brand-mark.orange { background: var(--orange); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; }
.brand small { color: var(--muted); margin-top: 1px; }
.sidebar nav { display: grid; gap: 4px; margin-top: 28px; }
.sidebar nav a { color: #344055; padding: 10px 12px; border-radius: 6px; }
.sidebar nav a:hover { color: var(--blue); background: #e7f1ff; }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.link-button { border: 0; background: transparent; color: var(--blue); cursor: pointer; padding: 0; }
.main-content { margin-left: 232px; padding: 28px; min-height: 100vh; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-header h1 { margin: 0; font-size: 24px; }
.page-header p { margin: 5px 0 0; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid rgba(130, 156, 190, .28); border-radius: 8px; padding: 18px; box-shadow: 0 10px 30px rgba(39, 73, 116, .06); backdrop-filter: blur(12px); margin-bottom: 18px; }
.panel h2 { margin: 0 0 14px; font-size: 17px; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: white; border: 1px solid var(--line); border-radius: 7px; padding: 15px; }
.stat span { color: var(--muted); display: block; }
.stat strong { display: block; font-size: 25px; margin-top: 8px; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 10px 11px; border-bottom: 1px solid #e8edf4; text-align: left; white-space: nowrap; vertical-align: top; }
th { color: #536076; font-weight: 600; background: #f7faff; }
td.wrap { white-space: normal; min-width: 220px; }
.badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #edf3fb; color: #4d5e75; font-size: 12px; }
.badge.active, .badge.normal { color: var(--success); background: #eaf7ef; }
.badge.frozen, .badge.expired, .badge.revoked, .badge.high, .badge.confirmed { color: var(--danger); background: #fff0ef; }
.badge.pending, .badge.observing { color: #9a5b00; background: #fff6df; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.stack-form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; color: #465269; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid #cfd9e7; border-radius: 6px; background: white; color: var(--text); padding: 9px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 105, 224, .12); }
input[type="checkbox"] { width: 16px; height: 16px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.primary-button, .secondary-button, .danger-button, .orange-button { border: 0; border-radius: 6px; padding: 9px 14px; cursor: pointer; font-weight: 650; }
.primary-button { color: white; background: var(--blue); }
.secondary-button { color: var(--blue); background: var(--blue-soft); }
.danger-button { color: white; background: var(--danger); }
.orange-button { color: white; background: var(--orange); }
button:disabled { opacity: .55; cursor: default; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input, .inline-form select { width: auto; max-width: 180px; }
.flash { padding: 11px 13px; border-radius: 6px; margin-bottom: 16px; }
.flash.success { color: var(--success); background: #eaf7ef; border: 1px solid #bfe6cd; }
.flash.error { color: var(--danger); background: #fff0ef; border: 1px solid #f1c4c0; }
.generated-box { background: #101827; color: #dce9ff; border-radius: 6px; padding: 14px; white-space: pre-wrap; max-height: 280px; overflow: auto; }
.sr-only { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: pre; border: 0; }
.card-key-cell { min-width: 260px; }
.card-secret { display: inline-block; min-width: 132px; color: #172033; font-size: 13px; }
.card-key-actions { display: inline-flex; gap: 5px; margin-left: 8px; }
.mini-button { border: 0; border-radius: 5px; padding: 5px 8px; color: var(--blue); background: var(--blue-soft); cursor: pointer; }
.missing-secret { color: #9a5b00; font-size: 13px; }
.login-body, .public-body { min-height: 100vh; background: #eef4fb; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(420px, 100%); padding: 28px; background: rgba(255,255,255,.9); border: 1px solid rgba(120,150,190,.3); border-radius: 8px; backdrop-filter: blur(18px); box-shadow: 0 24px 70px rgba(30,65,110,.14); }
.login-brand { margin-bottom: 28px; }
.login-panel h1 { margin: 0; font-size: 25px; }
.login-panel > p { color: var(--muted); margin: 7px 0 22px; }
.public-shell { width: min(1080px, 100%); }
.public-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.download-panel { min-height: 330px; background: white; border: 1px solid #e4e8ee; border-radius: 8px; padding: 42px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.download-panel h1 { font-size: 38px; margin: 10px 0; }
.download-panel p { color: var(--muted); max-width: 580px; }
.eyebrow { color: var(--orange); font-weight: 750; }
.release-meta { margin: 0; border-left: 1px solid #e8edf3; padding-left: 28px; }
.release-meta div { padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.release-meta dt { color: var(--muted); }
.release-meta dd { margin: 4px 0 0; font-weight: 650; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.steps article { background: white; border: 1px solid #e4e8ee; padding: 18px; border-radius: 8px; }
.steps article span { color: var(--orange); font-weight: 800; }
.steps h2 { font-size: 16px; margin: 8px 0 4px; }
.steps p { margin: 0; color: var(--muted); }
.unbind-shell { width: min(480px, 100%); }
.unbind-panel { background: white; border: 1px solid #e5e8ed; border-radius: 8px; padding: 26px; margin-top: 12px; }
.unbind-panel .brand { margin-bottom: 24px; }
.back-link, .text-link { color: #4d5b70; }
.form-note { color: var(--muted); font-size: 13px; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
.detail-actions { width: min(420px, 80vw); padding: 12px 0; display: grid; gap: 14px; }
.compact-form { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.top-gap { margin-top: 16px; }
.wide-field { grid-column: span 2; }
small { color: var(--muted); }
summary { color: var(--blue); cursor: pointer; }
code { font-family: Consolas, monospace; font-size: 12px; }
@media (max-width: 1000px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .sidebar { position: static; width: auto; min-height: auto; } .sidebar nav { grid-template-columns: repeat(2, 1fr); } .main-content { margin-left: 0; padding: 16px; } .stats-grid, .grid-two, .steps, .download-panel { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .download-panel { padding: 24px; } .release-meta { border-left: 0; padding-left: 0; } }