:root { --primary:#9333ea; --secondary:#ec4899; --bg:#090916; --panel:rgba(17,12,28,.45); --border:rgba(255,255,255,.09); --text:#fff; --muted:#9ca3af; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; }
* { box-sizing:border-box; font-family:Outfit, Segoe UI, sans-serif; user-select:none; -webkit-user-select:none; }
input, select, textarea { user-select:text; -webkit-user-select:text; }
body { margin:0; color:var(--text); min-height:100vh; background:radial-gradient(circle at 10% 10%,rgba(147,51,234,.18),transparent 36%),radial-gradient(circle at 90% 90%,rgba(236,72,153,.16),transparent 36%),var(--bg); }
.container { max-width:1240px; margin:0 auto; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-badge { width:38px; height:38px; border-radius:10px; background:url('/logo.png') center/contain no-repeat, linear-gradient(135deg,var(--primary),var(--secondary)); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; backdrop-filter:blur(20px); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.title { margin:0 0 4px; font-size:20px; }
.subtitle { margin:0; color:var(--muted); font-size:13px; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:13px; font-weight:600; }
.hint { color:var(--muted); font-size:12px; }
input, select, button, textarea { border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); padding:10px 12px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(147,51,234,.18); }
button { cursor:pointer; }
.btn { background:rgba(255,255,255,.07); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); border:none; }
.btn-danger { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); }
.btn-warn { background:rgba(245,158,11,.2); border-color:rgba(245,158,11,.4); }
.btn-ok { background:rgba(16,185,129,.2); border-color:rgba(16,185,129,.4); }
.nav { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.nav a { color:var(--text); text-decoration:none; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); }
.nav a.active { background:linear-gradient(135deg,rgba(147,51,234,.35),rgba(236,72,153,.35)); }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
.kpi { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:10px; }
.kpi b { display:block; font-size:18px; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; font-size:13px; vertical-align:top; }
.muted { color:var(--muted); font-size:12px; }
.tag { padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; }
.tag.ok { background:rgba(16,185,129,.2); }
.tag.warn { background:rgba(245,158,11,.2); }
.tag.danger { background:rgba(239,68,68,.2); }
.pager { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:8px; }
.toast { position:fixed; right:16px; top:16px; background:rgba(17,12,28,.95); border:1px solid var(--border); border-radius:10px; padding:10px 12px; z-index:99; }
.toast.success { border-color:rgba(16,185,129,.5); }
.toast.error { border-color:rgba(239,68,68,.5); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:16px; z-index:120; }
.modal-backdrop.open { display:flex; }
.modal { width:min(680px,100%); background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; backdrop-filter:blur(20px); box-shadow:0 10px 40px rgba(0,0,0,.35); }
.modal h3 { margin:0 0 12px; }
.modal .footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
@media (max-width:900px){ .grid-2,.grid-3,.kpis{grid-template-columns:1fr;} }
select { background: #110c1c; }
select option { background: #110c1c; color: #ffffff; }