* { box-sizing: border-box; }
:root { --bg:#0f1115; --surface:#121824; --card:#151d2b; --line:#263145; --text:#e8eef8; --muted:#9fb0c8; --accent:#b4f1b4; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Arial, Helvetica, sans-serif; }
header { text-align:center; padding:28px 16px; }
h1 { margin:0; color:var(--accent); }
.sub { color:var(--muted); margin-top:8px; }
.nav { margin-top:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px; }
#stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.stat .label { color:var(--muted); font-size:12px; }
.stat .value { font-size:28px; margin-top:6px; }
.jobs { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
.job { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.badge { display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
input, textarea { width:100%; padding:10px; border-radius:10px; border:1px solid var(--line); background:#101626; color:var(--text); }
input::placeholder, textarea::placeholder { color:#8aa0bf; }
label { display:flex; flex-direction:column; gap:6px; }
.actions { margin-top:12px; display:flex; flex-wrap: wrap; gap:8px; }
button, .btn { background:#1b2638; border:1px solid var(--line); padding:10px 14px; border-radius:10px; color:var(--text); cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { filter: brightness(1.1); }
.tags { display:flex; gap:8px; flex-wrap:wrap; }
footer { text-align:center; padding:18px; color:var(--muted); }
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hidden { display:none; }

.table { overflow:auto; }
.table table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--line); padding:8px; text-align:left; }
.table th { color:var(--muted); font-weight:600; }
.approved { color:#b4f1b4; }
.rejected { color:#ffb3b3; }
.pending { color:#ffe1a8; }