:root { color-scheme: dark; --ink:#11100e; --panel:#1d1915; --panel-2:#261f18; --line:#4c3420; --gold:#f5b942; --ember:#e75b20; --cream:#fff8eb; --muted:#c4b8a7; --green:#79d7a0; --red:#ff9b91; --shadow:0 20px 60px rgba(0,0,0,.35); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { background:radial-gradient(circle at top right,#48200d 0,transparent 28%),var(--ink); color:var(--cream); margin:0; min-height:100vh; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
#app { margin:0 auto; max-width:1160px; padding:24px; }
.login { align-items:center; display:grid; min-height:100vh; padding:20px 0; }
.login-card { background:rgba(29,25,21,.94); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); margin:auto; max-width:470px; padding:32px; width:100%; }
.eyebrow { color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.18em; margin:0 0 10px; text-transform:uppercase; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(2rem,5vw,3rem); letter-spacing:-.045em; }
h2 { font-size:1.25rem; }
h3 { font-size:1rem; }
.muted,.hint { color:var(--muted); line-height:1.55; }
.muted { margin-top:10px; }
.hint { font-size:.81rem; margin-top:13px; }
.field { display:grid; gap:7px; margin-top:18px; }
label { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
input,textarea,select { background:#100e0b; border:1px solid #55371f; border-radius:12px; color:var(--cream); outline:none; padding:12px 13px; width:100%; }
input:focus,textarea:focus,select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,185,66,.12); }
textarea { min-height:104px; resize:vertical; }
.button-row,.toolbar,.tabs,.actions,.switch-row { align-items:center; display:flex; flex-wrap:wrap; gap:10px; }
.button-row { margin-top:22px; }
.btn { background:var(--ember); border:1px solid transparent; border-radius:11px; color:#fff; font-weight:800; min-height:42px; padding:9px 14px; transition:filter .15s,transform .15s; }
.btn:hover { filter:brightness(1.1); }
.btn:active { transform:scale(.98); }
.btn.secondary { background:#29231e; border-color:#624426; color:var(--cream); }
.btn.danger { background:#3a1a16; border-color:#7a332a; color:var(--red); }
.btn.small { min-height:33px; padding:6px 10px; }
.shell { display:grid; gap:22px; }
.topbar { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; }
.topbar-actions { display:flex; gap:10px; }
.tabs { border-bottom:1px solid #463425; padding-bottom:12px; }
.tab { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:800; padding:7px 2px; }
.tab.active { border-bottom-color:var(--gold); color:var(--gold); }
.grid { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:rgba(29,25,21,.9); border:1px solid var(--line); border-radius:18px; padding:18px; }
.stat-number { color:var(--cream); font-size:2rem; font-weight:900; letter-spacing:-.05em; margin-top:13px; }
.stat-label { color:var(--muted); font-size:.82rem; margin-top:4px; }
.section { display:grid; gap:15px; }
.section-head { align-items:end; display:flex; gap:16px; justify-content:space-between; }
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid .wide { grid-column:1/-1; }
.key-reveal { background:#2a2010; border:1px solid #896822; border-radius:14px; margin-top:16px; padding:14px; }
.key-reveal code { color:var(--gold); display:block; font-size:1.1rem; font-weight:900; margin-top:8px; overflow-wrap:anywhere; }
.list { display:grid; gap:11px; }
.list-card { background:#1a1713; border:1px solid #443121; border-radius:15px; padding:15px; }
.list-head { align-items:center; display:flex; gap:12px; justify-content:space-between; }
.meta { color:var(--muted); font-size:.82rem; line-height:1.5; margin-top:7px; }
.badge { border-radius:999px; display:inline-block; font-size:.67rem; font-weight:900; letter-spacing:.06em; padding:5px 8px; text-transform:uppercase; }
.badge.active,.badge.published { background:#183426; color:var(--green); }
.badge.revoked { background:#411c19; color:var(--red); }
.badge.deleted,.badge.draft { background:#312a22; color:var(--muted); }
.notice-body { color:#e7dccd; line-height:1.5; margin-top:11px; white-space:pre-wrap; }
.error { color:var(--red); font-size:.9rem; line-height:1.45; margin-top:15px; }
.success { color:var(--green); font-size:.9rem; margin-top:15px; }
.hidden { display:none!important; }
@media (max-width:760px) { #app { padding:18px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .form-grid { grid-template-columns:1fr; } .form-grid .wide { grid-column:auto; } .topbar,.section-head { align-items:flex-start; flex-direction:column; } }
@media (max-width:420px) { .grid { grid-template-columns:1fr; } .login-card { padding:24px; } }