:root { --admin-max: 900px; }
.admin-page { min-height: 100vh; background: var(--paper); color: var(--ink); }
.admin-shell { min-height: 100vh; }
.admin-topbar { min-height: 58px; display: flex; align-items: center; gap: 13px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgb(250 248 245 / 92%); }
.admin-back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); color: #716c68; }
.admin-back:hover { background: rgb(35 33 30 / 6%); color: var(--ink); }
.admin-back img { width: 19px; height: 19px; }
.admin-topbar-copy { min-width: 0; display: grid; gap: 2px; }
.admin-topbar-copy strong { font-size: var(--t-ui); font-weight: var(--w-strong); }
.admin-topbar-copy span { color: #9a9491; font-size: var(--t-meta); }
.admin-identity { margin-left: auto; color: #8d8783; font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-content { width: min(var(--admin-max), calc(100% - 40px)); margin: 0 auto; padding: 64px 0 50px; }
.admin-heading { max-width: 680px; margin-bottom: 34px; }
.admin-eyebrow { margin: 0 0 10px; color: var(--crimson); font-size: var(--t-meta); font-weight: var(--w-strong); letter-spacing: .08em; }
.admin-heading h1 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(30px, 4vw, 42px); font-weight: var(--w-strong); line-height: 1.12; }
.admin-heading p:last-child { max-width: 560px; margin: 0; color: #77716d; font-size: var(--t-body); line-height: 1.7; }
.allowlist-panel { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-soft); }
.allowlist-panel-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 22px; border-bottom: 1px solid #efebe5; }
.allowlist-panel-head > div { display: flex; align-items: baseline; gap: 9px; }
.allowlist-panel h2 { margin: 0; font-size: var(--t-ui); font-weight: var(--w-strong); }
.allowlist-panel-head > div span { color: #aaa39e; font-size: var(--t-meta); }
.allowlist-status { color: #9b9591; font-size: var(--t-meta); }
.allowlist-form { padding: 20px 22px 18px; border-bottom: 1px solid #efebe5; }
.allowlist-form label { display: block; margin-bottom: 8px; color: #645f5b; font-size: var(--t-label); font-weight: var(--w-medium); }
.allowlist-form-row { display: flex; gap: 9px; }
.allowlist-form input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; border: 1px solid #dcd7d0; border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; font-size: var(--t-body); outline: none; }
.allowlist-form input:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgb(184 41 52 / 12%); }
.allowlist-add { min-width: 86px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ink-fill); border-radius: var(--r-sm); background: var(--ink-fill); color: #fff; font: inherit; font-size: var(--t-label); cursor: pointer; }
.allowlist-add:hover { background: #292724; }
.allowlist-add:disabled { opacity: .55; cursor: wait; }
.allowlist-add img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.form-error { margin: 9px 0 0; color: #b3474e; font-size: var(--t-label); }
.allowlist-list { padding: 8px 10px; }
.allowlist-row { min-height: 50px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border-radius: var(--r-sm); }
.allowlist-row:hover { background: #f8f6f2; }
.allowlist-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f0e5df; color: #a14b4f; font-size: 12px; font-weight: var(--w-strong); }
.allowlist-row strong { min-width: 0; overflow: hidden; color: #4c4845; font-size: var(--t-body); font-weight: var(--w-medium); text-overflow: ellipsis; white-space: nowrap; }
.allowlist-badge { margin-left: auto; padding: 3px 8px; border-radius: var(--r-pill); background: #f4eee5; color: #88715e; font-size: var(--t-meta); white-space: nowrap; }
.allowlist-remove { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; border: 0; border-radius: var(--r-sm); background: transparent; color: #b0a9a4; cursor: pointer; }
.allowlist-remove:hover { background: #f9e9e8; color: #ae4a50; }
.allowlist-remove:disabled { opacity: .45; cursor: wait; }
.allowlist-remove img { width: 17px; height: 17px; opacity: .72; }
.allowlist-empty { margin: 10px; color: #aaa39e; font-size: var(--t-label); }
.admin-footnote { margin: 15px 3px 0; color: #938c87; font-size: var(--t-meta); }
.admin-footnote strong { color: #716a66; font-weight: var(--w-medium); }
.admin-state { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; text-align: center; }
.admin-state-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-fill); color: #fff; font-size: 13px; font-weight: var(--w-strong); }
.admin-state h1 { margin: 0; font-size: var(--t-ui); }
.admin-state p { margin: 0; color: #89827e; font-size: var(--t-label); }
.admin-state a { color: var(--crimson); font-size: var(--t-label); text-decoration: none; }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { max-width: min(360px, calc(100vw - 40px)); padding: 10px 14px; border: 1px solid #d9d0c5; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-lift); color: #4d4844; font-size: var(--t-label); }
.toast.is-error { border-color: #ebc9c6; color: #a1454c; }
@media (max-width: 600px) { .admin-topbar { padding: 0 15px; } .admin-content { width: min(100% - 28px, var(--admin-max)); padding: 40px 0 34px; } .admin-heading { margin-bottom: 26px; } .admin-heading h1 { font-size: 31px; } .allowlist-panel-head, .allowlist-form { padding-left: 16px; padding-right: 16px; } .allowlist-add { min-width: 76px; } .allowlist-add span { display: none; } .allowlist-row { padding: 0 6px; } .admin-identity { max-width: 42vw; } }
