:root { --bg:#1d2024; --panel:#272b30; --line:#3a3f46; --text:#e9eaec; --muted:#9aa0a8; --orange:#ff7a1a; --red:#e5484d; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--orange); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:8px 20px; background:var(--panel); border-bottom:2px solid var(--orange); }
.brand { font-weight:600; letter-spacing:.02em; } .brand b { color:var(--orange); }
header nav { display:flex; gap:16px; flex:1; } .who { color:var(--muted); font-size:13px; }
main { max-width:1360px; margin:0 auto; padding:14px 24px 24px; } footer { text-align:center; color:var(--muted); font-size:12px; padding:10px; }
h1 { font-size:20px; margin:2px 0 10px; } h1 small { color:var(--muted); font-weight:400; font-size:15px; } h2 { font-size:15px; margin:16px 0 6px; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.narrow { max-width:460px; margin:30px auto; }
label { display:block; margin:8px 0; color:var(--muted); font-size:13px; }
input, textarea, button, .btn { font:inherit; }
input, textarea { display:block; width:100%; margin-top:4px; padding:6px 9px; background:#16191c; color:var(--text); border:1px solid var(--line); border-radius:6px; }
input:focus, textarea:focus { outline:2px solid var(--orange); border-color:var(--orange); }
button, .btn { display:inline-block; padding:6px 12px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
button:hover, .btn:hover { border-color:var(--orange); text-decoration:none; }
.primary { background:var(--orange); border-color:var(--orange); color:#1a1209; font-weight:600; }
.danger { border-color:var(--red); color:#ffb4b6; } .danger:hover { background:var(--red); color:#fff; }
button.link { background:none; border:0; padding:0; color:var(--orange); }
form.inline { display:inline; } form.search { display:flex; gap:8px; margin:8px 0 10px; } form.search input { margin:0; }
.error { background:#3a1d1f; border:1px solid var(--red); padding:10px 12px; border-radius:6px; }
.flash { background:#2f2a22; border:1px solid var(--orange); padding:10px 12px; border-radius:6px; }
.warn { background:#2f2a22; border-left:4px solid var(--orange); padding:10px 12px; }
.muted { color:var(--muted); font-size:13px; }
code.key { display:block; margin-top:4px; padding:10px 12px; background:#16191c; border:1px solid var(--line); border-radius:6px; word-break:break-all; font:14px ui-monospace,Consolas,monospace; user-select:all; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; } .tab { padding:3px 11px; border:1px solid var(--line); border-radius:999px; color:var(--text); }
.tab.on { border-color:var(--orange); color:var(--orange); } .tab .n { color:var(--muted); }
.scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:500; font-size:13px; } td.num { text-align:right; } tbody tr:hover { background:#2b3035; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line); }
.badge.active { background:var(--orange); border-color:var(--orange); color:#1a1209; } .badge.stock { color:var(--muted); }
.badge.suspended { border-color:var(--orange); color:var(--orange); } .badge.banned { background:var(--red); border-color:var(--red); color:#fff; }
.badge.archived { color:var(--muted); opacity:.7; } .badge.off { border-color:var(--red); color:#ffb4b6; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 4px; }
.cols { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:24px; align-items:start; } .back { margin-right:4px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:2px 12px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); } .kv:last-child { border:0; } .kv span:first-child { color:var(--muted); }
.guards { display:grid; gap:10px; } form.guard { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:2px 12px 12px; margin:0; } form.guard p { margin:8px 0 2px; } form.guard label { margin:4px 0 8px; }
@media (max-width:600px) { header.top { gap:10px; } th, td { padding:8px 6px; } }
@media (max-width:900px) { .cols, .grid { grid-template-columns:1fr; } }
h2.first { margin-top:2px; }
nav a.on { color:#fff; border-bottom:2px solid var(--orange); }
header nav { gap:14px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .fields .wide { grid-column:1 / -1; }
select { display:block; width:100%; margin-top:4px; padding:6px 9px; background:#16191c; color:var(--text); border:1px solid var(--line); border-radius:6px; font:inherit; }
select:focus { outline:2px solid var(--orange); border-color:var(--orange); }
input:disabled, select:disabled, textarea:disabled { opacity:.7; }
ul.links { list-style:none; margin:0; padding:0; } ul.links li { padding:5px 0; border-bottom:1px solid var(--line); }
td.wrap { white-space:normal; min-width:240px; }
.badge.st-active { background:var(--orange); border-color:var(--orange); color:#1a1209; }
.badge.st-stock, .badge.st-draft, .badge.st-archived, .badge.st-ended, .badge.st-terminated, .badge.st-retired { color:var(--muted); }
.badge.st-suspended { border-color:var(--orange); color:var(--orange); }