:root { color-scheme: dark; --ink:#111115; --panel:#1b1b20; --panel-2:#24242b; --line:#37363d; --gold:#d69d37; --cream:#f7e7c4; --text:#f8f4ea; --muted:#bcb6aa; --green:#52c38a; --red:#e17b76; --amber:#f0b64c; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 8% 0%,#4c3416 0,transparent 32%),linear-gradient(145deg,#0b0b0e,#151217 55%,#0c0c0e); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(560px,100%); background:linear-gradient(145deg,#1d1d23,#151519); border:1px solid #51432d; border-radius:24px; padding:clamp(26px,6vw,52px); box-shadow:0 28px 100px #0009; }
.brand { display:flex; align-items:center; gap:13px; margin-bottom:30px; }.logo { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:14px; font-size:23px; font-weight:900; color:var(--gold); }.brand b { letter-spacing:.14em; }.brand span { display:block; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.2em; margin-top:3px; }
h1 { font-size:clamp(30px,6vw,46px); margin:0 0 12px; line-height:1.06; }.lead { color:var(--muted); font-size:18px; line-height:1.5; margin:0 0 28px; }
form { display:grid; gap:15px; } label { display:grid; gap:8px; color:var(--cream); font-weight:700; } input,select,textarea { width:100%; min-height:48px; border:1px solid #5e574b; background:#fefadf; color:#15130f; border-radius:12px; padding:12px 14px; } textarea { min-height:90px; resize:vertical; }
.primary,.secondary,.danger { min-height:45px; border:0; border-radius:11px; padding:10px 14px; font-weight:800; }.primary { color:#17120a; background:linear-gradient(135deg,#b97919,#f0bd52); }.secondary { color:var(--text); background:#303037; border:1px solid #595762; }.danger { color:#fff; background:#8a3d39; }.full { width:100%; }.error,.notice { padding:12px 14px; border-radius:11px; margin:0 0 14px; }.error { background:#5d2928; color:#ffd8d5; border:1px solid #984f4b; }.notice { background:#17392c; color:#d7ffeb; border:1px solid #36765a; }.hint { color:var(--muted); font-size:13px; line-height:1.5; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }.sidebar { background:#111116; border-right:1px solid #34333a; padding:24px 16px; display:flex; flex-direction:column; gap:24px; }.workspace { border:1px solid #4d412c; border-radius:14px; padding:14px; background:#1b1814; }.workspace small { color:var(--gold); font-weight:800; letter-spacing:.12em; }.workspace b { display:block; margin-top:7px; }.workspace span { color:var(--muted); font-size:13px; display:block; margin-top:4px; }.sidebar button { width:100%; text-align:left; background:transparent; color:var(--muted); border:0; padding:12px; border-radius:10px; font-weight:700; }.sidebar button.active,.sidebar button:hover { background:#2a261f; color:var(--cream); }.sidebar .logout { margin-top:auto; color:#ffb4af; }
main { padding:clamp(18px,4vw,46px); max-width:1500px; width:100%; margin:auto; }.topbar { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:26px; }.eyebrow { color:var(--gold); font-size:12px; letter-spacing:.18em; font-weight:900; }.topbar h1 { margin-top:6px; font-size:clamp(28px,5vw,42px); }.topbar p { color:var(--muted); max-width:700px; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }.kpi,.panel { border:1px solid var(--line); background:linear-gradient(135deg,#1e1e24,#17171b); border-radius:16px; padding:18px; }.kpi span { color:var(--muted); font-size:13px; }.kpi strong { display:block; margin-top:8px; font-size:28px; color:var(--cream); }.layout { display:grid; grid-template-columns:minmax(290px,.8fr) minmax(0,1.7fr); gap:18px; align-items:start; }.panel h2 { margin:3px 0 7px; font-size:20px; }.panel p { color:var(--muted); }.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.formgrid .wide { grid-column:1/-1; }.choice-row { display:flex; flex-wrap:wrap; gap:8px; }.choice-row label { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--text); }.choice-row input { width:auto; min-height:auto; accent-color:var(--gold); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:#17171c; }.table-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; }.table-top h2 { margin:0; }.table-top select { width:auto; min-height:40px; background:#25242a; color:var(--text); } table { border-collapse:collapse; width:100%; min-width:900px; } th { background:#252329; color:#d9cba9; text-align:left; font-size:12px; letter-spacing:.06em; padding:13px 14px; } td { border-top:1px solid #302f35; padding:13px 14px; vertical-align:top; } td b,td small { display:block; } td small { color:var(--muted); margin-top:4px; }.badge { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; font-size:12px; font-weight:800; }.active { color:#bff7d8; background:#1e513b; }.suspended { color:#ffdd9a; background:#5b431f; }.expired,.archived { color:#ffc7c3; background:#5c302e; }.key { border:1px solid #725b34; background:#221d14; color:#f5d48f; border-radius:7px; padding:7px 8px; font-size:11px; white-space:nowrap; }.actions { display:flex; flex-wrap:wrap; gap:7px; }.actions button { min-height:34px; font-size:12px; padding:7px 9px; }.empty { padding:34px; text-align:center; color:var(--muted); }.event-list { display:grid; gap:9px; max-height:360px; overflow:auto; }.event { border-left:3px solid var(--gold); padding:9px 11px; background:#202026; border-radius:0 9px 9px 0; }.event b { display:block; }.event span { color:var(--muted); font-size:12px; }
.modal-backdrop { position:fixed; inset:0; background:#000a; display:grid; place-items:center; padding:18px; z-index:10; }.modal { width:min(730px,100%); max-height:92vh; overflow:auto; background:#1a1a20; border:1px solid #66522e; border-radius:20px; padding:24px; box-shadow:0 30px 90px #000a; }.modal-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }.modal-head h2 { margin:5px 0 18px; }.modal-close { background:transparent; color:#fff; border:0; font-size:28px; line-height:1; }
@media (max-width:1000px) { .app-shell { grid-template-columns:1fr; }.sidebar { border-right:0; border-bottom:1px solid var(--line); padding:14px; }.sidebar nav { display:flex; overflow:auto; gap:6px; }.sidebar nav button { width:auto; white-space:nowrap; }.sidebar .logout { margin-top:0; }.kpis { grid-template-columns:repeat(2,1fr); }.layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .auth-shell { padding:0; }.auth-card { min-height:100vh; border-radius:0; display:flex; flex-direction:column; justify-content:center; }.topbar { display:block; }.topbar .primary { margin-top:12px; width:100%; }.kpis,.formgrid { grid-template-columns:1fr; }.formgrid .wide { grid-column:auto; }.sidebar .brand { margin:0; }.workspace { display:none; } main { padding:18px 13px 34px; } }