@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink-950: #0A1512; --ink-900: #0F1D19; --ink-800: #142722; --ink-700: #1D362F;
  --line: rgba(237, 243, 239, 0.10); --line-strong: rgba(237, 243, 239, 0.18);
  --paper-100: #EDF3EF; --paper-70: rgba(237,243,239,.70); --paper-45: rgba(237,243,239,.45);
  --mint: #2EE6A6; --amber: #FFB454; --red: #FF6B6B; --blue: #78AAFF;
  --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--ink-950); color:var(--paper-100); font-family:var(--font-body); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.admin-shell { display:flex; min-height:100vh; }
.admin-sidebar {
  width: 220px; flex-shrink:0; background:var(--ink-900); border-right:1px solid var(--line);
  padding: 24px 16px; display:flex; flex-direction:column; gap: 24px;
}
.admin-brand { font-family:var(--font-display); font-weight:600; font-size:1rem; display:flex; align-items:center; gap:8px; }
.admin-brand .dot { width:8px; height:8px; border-radius:50%; background:var(--mint); }
.admin-nav { display:flex; flex-direction:column; gap:4px; }
.admin-nav a { padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--paper-70); font-size:0.9rem; }
.admin-nav a:hover, .admin-nav a.active { background: var(--ink-800); color: var(--paper-100); }
.admin-main { flex:1; padding: 32px 40px; max-width: 1100px; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.admin-topbar h1 { font-family:var(--font-display); font-size:1.4rem; margin:0; }
.logout-link { color: var(--paper-45); text-decoration:none; font-size:0.85rem; }
.logout-link:hover { color: var(--paper-100); }

.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card { background:var(--ink-900); border:1px solid var(--line); border-radius:12px; padding:18px; }
.stat-card .n { font-family:var(--font-display); font-size:1.7rem; }
.stat-card .l { color:var(--paper-45); font-size:0.8rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }

table { width:100%; border-collapse: collapse; background:var(--ink-900); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:0.88rem; }
th { color:var(--paper-45); font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background: var(--ink-800); }
td a { color: var(--mint); text-decoration:none; }
code.mono { font-family:var(--font-mono); font-size:0.82rem; color:var(--paper-70); }

.badge { display:inline-block; font-family:var(--font-mono); font-size:0.7rem; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.badge.pending { background:rgba(255,180,84,.15); color:var(--amber); }
.badge.in_progress { background:rgba(120,170,255,.15); color:var(--blue); }
.badge.completed { background:rgba(46,230,166,.15); color:var(--mint); }
.badge.rejected { background:rgba(255,107,107,.15); color:var(--red); }

.filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.filter-bar a { padding:7px 14px; border-radius:999px; border:1px solid var(--line-strong); text-decoration:none; color:var(--paper-70); font-size:0.82rem; }
.filter-bar a.active { background:var(--mint); color:var(--ink-950); border-color:var(--mint); font-weight:600; }

.card { background:var(--ink-900); border:1px solid var(--line); border-radius:12px; padding:24px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:0.82rem; color:var(--paper-45); margin-bottom:6px; font-family:var(--font-mono); }
.field input, .field select, .field textarea {
  width:100%; background:var(--ink-950); border:1px solid var(--line-strong); border-radius:8px;
  padding:10px 12px; color:var(--paper-100); font-family:var(--font-body); font-size:0.92rem;
}
.field textarea { min-height:90px; resize:vertical; }
.btn { display:inline-block; background:var(--mint); color:var(--ink-950); border:none; border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer; text-decoration:none; font-size:0.9rem; }
.btn.secondary { background:transparent; border:1px solid var(--line-strong); color:var(--paper-100); }
.msg { padding:12px 14px; border-radius:8px; margin-bottom:18px; font-size:0.88rem; }
.msg.ok { background:rgba(46,230,166,.08); border:1px solid rgba(46,230,166,.3); }
.msg.err { background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { width: 360px; background:var(--ink-900); border:1px solid var(--line); border-radius:14px; padding:32px; }
.login-card h1 { font-family:var(--font-display); font-size:1.2rem; margin:0 0 6px; }
.login-card p.sub { color:var(--paper-45); font-size:0.85rem; margin:0 0 24px; }