:root{
    --bg:#0b0f19;
    --panel:#11182a;
    --panel2:#0f1526;
    --text:#e8eefc;
    --muted:#a8b3cf;
    --border:#223055;
    --primary:#5ea1ff;
    --danger:#ff5e6c;
    --ok:#2ee59d;
    --warn:#ffcc66;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, var(--panel), var(--bg));
}

.brand h1{ margin:0; font-size:22px; }
.subtitle{ margin:6px 0 0; color:var(--muted); font-size:13px; }

.container{ max-width:1100px; margin:18px auto; padding:0 18px; }

.tabs{ display:flex; gap:10px; }
.tab{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
}
.tab.active{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(94,161,255,.15) inset;
}

.view{ display:none; }
.view.active{ display:block; }

.view-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:14px 0;
}
.actions{ display:flex; gap:10px; align-items:center; }

.card{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.input, select, input[type="text"], input[type="date"]{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#0c1222;
    color:var(--text);
    outline:none;
}

.input:focus, select:focus, input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(94,161,255,.15);
}

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
    padding:10px;
    border-bottom:1px solid var(--border);
    font-size:14px;
}
.table th{
    color:var(--muted);
    text-align:left;
    font-weight:600;
}
.table tr:hover td{ background:rgba(255,255,255,.03); }

.right{ text-align:right; }

.btn{
    border:1px solid var(--border);
    background:#0c1222;
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
}
.btn.small{ padding:7px 10px; border-radius:10px; font-size:13px; }
.btn.primary{ border-color:rgba(94,161,255,.6); background:rgba(94,161,255,.15); }
.btn.danger{ border-color:rgba(255,94,108,.6); background:rgba(255,94,108,.12); }

.grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.field span{ display:block; margin-bottom:6px; color:var(--muted); font-size:13px; }
.error{ color:var(--danger); font-size:12px; min-height:16px; display:block; }

.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.hint{ color:var(--muted); margin:0; }

.stats-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.stat-number{ font-size:34px; margin:10px 0 0; }
.muted{ color:var(--muted); }
.stat-list{ margin:10px 0 0; padding-left:18px; }

.pill{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    border:1px solid var(--border);
}
.pill.ok{ border-color:rgba(46,229,157,.5); color:var(--ok); }
.pill.warn{ border-color:rgba(255,204,102,.5); color:var(--warn); }

.backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.hidden{ display:none; }

.modal{
    width:min(520px, 100%);
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
}
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }