/* Mirrors UI Design tokens so the admin matches the product feel. */
:root {
  --lime: #C6FF1F;
  --lime-600: #B5F500;
  --ink: #0B0F0A;
  --ink-2: #1A1F18;
  --cream: #FAFAF5;
  --paper: #FFFFFF;
  --gray-50: #F5F6F4;
  --gray-100: #ECEEEB;
  --gray-200: #DCDFDA;
  --gray-300: #C3C7C0;
  --gray-400: #9AA098;
  --gray-500: #6F756D;
  --gray-700: #353A33;
  --gray-900: #0F1310;
  --success: #00B86B;
  --warning: #FFB300;
  --error: #FF3B30;
  --info: #2A4BFF;
  --r-2: 8px; --r-3: 12px; --r-4: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'DM Sans', -apple-system, system-ui, sans-serif; color: var(--ink); background: var(--cream); }
code, pre { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; }

.shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--ink); color: var(--cream); padding: 24px 16px; }
.sidebar h1 { margin: 0 0 24px; font-size: 18px; letter-spacing: -0.01em; }
.sidebar h1 .dot { color: var(--lime); }
.sidebar nav a { display: block; padding: 10px 12px; border-radius: var(--r-2); color: var(--gray-300); text-decoration: none; margin-bottom: 4px; font-size: 14px; }
.sidebar nav a:hover { background: var(--ink-2); color: var(--cream); }
.sidebar nav a.active { background: var(--lime); color: var(--ink); font-weight: 600; }
.sidebar .me { position: absolute; bottom: 16px; left: 16px; right: 16px; font-size: 12px; color: var(--gray-400); }

.main { flex: 1; padding: 32px 40px; overflow-y: auto; }
.main h2 { margin-top: 0; font-size: 24px; letter-spacing: -0.01em; }

.card { background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--r-3); padding: 20px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 16px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-2); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .06s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--lime); color: var(--ink); }
.btn.primary:hover { background: var(--lime-600); }
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--gray-300); }
.btn.secondary:hover { background: var(--gray-50); }
.btn.danger { background: var(--paper); color: var(--error); border-color: var(--gray-300); }
.btn.danger:hover { background: #fff0f0; border-color: var(--error); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--gray-700); }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--r-2); font: inherit; font-size: 14px; background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.field .hint { font-size: 12px; color: var(--gray-500); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
th { background: var(--gray-50); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-700); }
tr:hover td { background: var(--gray-50); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge.ok       { background: #DBF5E8; color: var(--success); }
.badge.warn     { background: #FFF1CC; color: var(--warning); }
.badge.err      { background: #FFE0DD; color: var(--error); }
.badge.neutral  { background: var(--gray-100); color: var(--gray-700); }
.badge.info     { background: #E4E9FF; color: var(--info); }

.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: var(--r-2); background: var(--ink); color: var(--cream); font-size: 14px; box-shadow: 0 8px 16px rgba(0,0,0,.15); }
.toast.err { background: var(--error); }

.login-shell { min-height: 100vh; display: grid; place-items: center; background: var(--ink); }
.login-card { background: var(--paper); padding: 32px; border-radius: var(--r-4); width: 360px; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card h1 .dot { color: var(--lime); }
.login-card p { color: var(--gray-500); margin: 0 0 24px; font-size: 14px; }

.run-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.run-row:last-child { border-bottom: none; }
.run-log { max-height: 320px; overflow: auto; background: var(--ink); color: var(--gray-200); padding: 12px; border-radius: var(--r-2); white-space: pre-wrap; font-size: 11px; line-height: 1.4; }

.empty { text-align: center; padding: 48px 24px; color: var(--gray-500); }

.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.muted { color: var(--gray-500); }