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

:root {
  --bg:       #030712;
  --bg1:      #0a0f1e;
  --bg2:      #0f172a;
  --bg3:      #1e293b;
  --border:   #1e293b;
  --border2:  #334155;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #475569;
  --text4:    #334155;
  --accent:   #6366f1;
  --accent2:  #8b5cf6;
  --green:    #22c55e;
  --green-bg: #052e16;
  --green-b:  #166534;
  --red:      #ef4444;
  --red-bg:   #450a0a;
  --red-b:    #7f1d1d;
  --amber:    #f59e0b;
  --amber-bg: #451a03;
  --amber-b:  #92400e;
  --orange:   #f97316;
  --blue:     #3b82f6;
  --tg-bg:    #013b6e;
  --tg-b:     #1d4ed8;
  --tg-text:  #93c5fd;
  --mono:     'Space Mono', monospace;
  --shadow:   0 1px 3px rgba(0,0,0,0.4);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:       #f8fafc;
  --bg1:      #ffffff;
  --bg2:      #f1f5f9;
  --bg3:      #e2e8f0;
  --border:   #e2e8f0;
  --border2:  #cbd5e1;
  --text:     #0f172a;
  --text2:    #334155;
  --text3:    #64748b;
  --text4:    #94a3b8;
  --accent:   #4f46e5;
  --accent2:  #7c3aed;
  --green:    #16a34a;
  --green-bg: #f0fdf4;
  --green-b:  #86efac;
  --red:      #dc2626;
  --red-bg:   #fef2f2;
  --red-b:    #fca5a5;
  --amber:    #d97706;
  --amber-bg: #fffbeb;
  --amber-b:  #fcd34d;
  --tg-bg:    #eff6ff;
  --tg-b:     #93c5fd;
  --tg-text:  #1d4ed8;
  --shadow:   0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="light"] .score-badge-inner { background: #f8fafc; }
[data-theme="light"] .alert-error   { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
[data-theme="light"] .alert-success { background: #f0fdf4; border-color: #86efac; color: #16a34a; }
[data-theme="light"] .alert-info    { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
[data-theme="light"] .alert-amber   { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
[data-theme="light"] .btn-primary   { box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
[data-theme="light"] .nav           { box-shadow: 0 1px 0 var(--border); }
[data-theme="light"] .card          { box-shadow: var(--shadow); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Theme toggle button ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--bg3); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* ── Utilities ── */
.mono { font-family: var(--mono); }
.text-2 { color: var(--text2); }
.text-3 { color: var(--text3); }
.text-accent { color: var(--accent); }
.fw-800 { font-weight: 800; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }

/* ── Logo ── */
.logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent2); }

/* ── Card ── */
.card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

/* ── Form elements ── */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.6;
}
.field input { height: 42px; }
.field textarea { resize: vertical; }
.field select { height: 42px; cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field .hint { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.btn-ghost   { background: transparent; color: var(--text3); border: 1.5px solid var(--border); }
.btn-danger  { background: var(--red-bg); color: #fca5a5; border: 1.5px solid var(--red-b); }
.btn-success { background: var(--green-bg); color: #86efac; border: 1.5px solid var(--green-b); }
.btn-tg      { background: var(--tg-bg); color: var(--tg-text); border: 1.5px solid var(--tg-b); }
.btn-amber   { background: var(--amber-bg); color: #fde68a; border: 1.5px solid var(--amber-b); }
.btn-full    { width: 100%; justify-content: center; padding: 13px 20px; font-size: 13px; }

/* ── Section heading ── */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Score badge ── */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.score-badge-inner {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-family: var(--mono);
  font-weight: 800;
}

/* ── Alert / toast ── */
.alert {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 14px;
}
.alert-error   { background: var(--red-bg); border: 1px solid var(--red-b); color: #fca5a5; }
.alert-success { background: var(--green-bg); border: 1px solid var(--green-b); color: #86efac; }
.alert-info    { background: #1c1917; border: 1px solid #292524; color: #a8a29e; }
.alert-amber   { background: var(--amber-bg); border: 1px solid var(--amber-b); color: #fde68a; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.spinner-dark {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--accent);
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.35s ease; }

/* ── Tag ── */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg3);
  color: var(--text);
  margin: 2px;
}

/* ── Nav ── */
.nav {
  height: 54px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
  flex-shrink: 0;
  background: var(--bg);
}
.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text3);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.nav-link:hover { color: var(--text2); }
.nav-link.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Table ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text4);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }
tbody tr { cursor: pointer; transition: background 0.1s; }

/* ── Grid helpers ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Photo dropzone ── */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: #1e1b4b22; }

/* ── Candidate page layout ── */
.page-layout {
  display: flex;
  height: calc(100vh - 54px);
  overflow: hidden;
}
.sidebar {
  width: 270px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
  flex-shrink: 0;
}
.main-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ── Candidate sidebar card ── */
.cand-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 6px;
  background: transparent;
  width: 100%;
  text-align: left;
}
.cand-card:hover { border-color: var(--border2); }
.cand-card.active { background: var(--bg2); border-color: var(--accent); }
.cand-card img, .cand-card .avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cand-card .avatar {
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ── Upload page specific ── */
.upload-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.upload-hero .card { width: 100%; max-width: 640px; }

/* ── Login page ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card { width: 100%; max-width: 400px; }

/* ── Search bar ── */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.search-bar input, .search-bar select {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.search-bar input:focus, .search-bar select:focus { border-color: var(--accent); }
.search-bar input { flex: 1; min-width: 180px; height: 38px; }
.search-bar select { height: 38px; cursor: pointer; min-width: 150px; }

/* ── Light theme is now DEFAULT ── */
:root {
  --bg:       #f8fafc;
  --bg1:      #ffffff;
  --bg2:      #f1f5f9;
  --bg3:      #e2e8f0;
  --border:   #e2e8f0;
  --border2:  #cbd5e1;
  --text:     #0f172a;
  --text2:    #334155;
  --text3:    #64748b;
  --text4:    #94a3b8;
  --accent:   #4f46e5;
  --accent2:  #7c3aed;
  --green:    #16a34a;
  --green-bg: #f0fdf4;
  --green-b:  #86efac;
  --red:      #dc2626;
  --red-bg:   #fef2f2;
  --red-b:    #fca5a5;
  --amber:    #d97706;
  --amber-bg: #fffbeb;
  --amber-b:  #fcd34d;
  --orange:   #ea580c;
  --blue:     #2563eb;
  --tg-bg:    #eff6ff;
  --tg-b:     #93c5fd;
  --tg-text:  #1d4ed8;
  --shadow:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --mono:     'Space Mono', monospace;
}
.score-badge-inner { background: #f8fafc; }
.alert-error   { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.alert-success { background: #f0fdf4; border-color: #86efac; color: #16a34a; }
.alert-info    { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.alert-amber   { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.btn-primary   { box-shadow: 0 2px 8px rgba(79,70,229,0.25); }
.nav           { box-shadow: 0 1px 0 var(--border); }
.card          { box-shadow: var(--shadow); }
::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Dark theme (toggle) ── */
[data-theme="dark"] {
  --bg:       #030712;
  --bg1:      #0a0f1e;
  --bg2:      #0f172a;
  --bg3:      #1e293b;
  --border:   #1e293b;
  --border2:  #334155;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #475569;
  --text4:    #334155;
  --accent:   #6366f1;
  --accent2:  #8b5cf6;
  --green:    #22c55e;
  --green-bg: #052e16;
  --green-b:  #166534;
  --red:      #ef4444;
  --red-bg:   #450a0a;
  --red-b:    #7f1d1d;
  --amber:    #f59e0b;
  --amber-bg: #451a03;
  --amber-b:  #92400e;
  --tg-bg:    #013b6e;
  --tg-b:     #1d4ed8;
  --tg-text:  #93c5fd;
  --shadow:   0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .score-badge-inner { background: #030712; }
[data-theme="dark"] .alert-error   { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .alert-success { background: #052e16; border-color: #166534; color: #86efac; }
[data-theme="dark"] .alert-info    { background: #1c1917; border-color: #292524; color: #a8a29e; }
[data-theme="dark"] .alert-amber   { background: #451a03; border-color: #92400e; color: #fde68a; }
[data-theme="dark"] .btn-primary   { box-shadow: none; }
[data-theme="dark"] .nav           { box-shadow: none; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e293b; }

/* ── Decision badge ── */
.decision-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.decision-test    { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.decision-offer   { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.decision-reject  { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.decision-pause   { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
[data-theme="dark"] .decision-test   { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .decision-offer  { background: #052e16; color: #86efac; }
[data-theme="dark"] .decision-reject { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .decision-pause  { background: #451a03; color: #fde68a; }

/* ── KB (knowledge base) doc card ── */
.kb-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}