/* ── Titan — shared design tokens & base styles ────────────── */
:root {
  --bg1:  #0d0d12;
  --bg2:  #131320;
  --bg3:  #1a1a26;
  --bg4:  #222236;
  --bd:   #2a2a3e;
  --bd2:  #3a3a52;
  --p1:   #7c6fff;
  --p1a:  rgba(124,111,255,.15);
  --ok:   #6eff6e;
  --warn: #ffc96e;
  --err:  #ff6e6e;
  --tx:   #e0e0e0;
  --tx2:  #999;
  --tx3:  #555;
  --hdr-h: 46px;
}

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

html, body {
  height: 100%;
  background: var(--bg1);
  color: var(--tx);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5a5a7a; }

/* ── App shell ─────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────── */
#header {
  height: var(--hdr-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
  z-index: 100;
}

.hdr-logo {
  font-size: 14px;
  font-weight: 800;
  color: var(--p1);
  white-space: nowrap;
  letter-spacing: -.3px;
}

.hdr-sep { flex: 1; }

.hdr-nav a {
  color: var(--tx2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  transition: all .12s;
}
.hdr-nav a:hover, .hdr-nav a.active { background: var(--bg4); color: var(--tx); }

.hdr-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tx2);
}

.hdr-avatar {
  width: 26px; height: 26px;
  background: var(--p1a);
  border: 1px solid var(--p1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--p1);
}

.role-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 8px; letter-spacing: .06em;
}
.role-admin    { background: rgba(255,100,100,.12); color: #ff8888; border: 1px solid rgba(255,100,100,.3); }
.role-reviewer { background: rgba(255,201,110,.12); color: var(--warn); border: 1px solid rgba(255,201,110,.3); }
.role-annotator{ background: rgba(110,255,110,.1);  color: var(--ok);   border: 1px solid rgba(110,255,110,.25); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg4); border: 1px solid var(--bd2); color: var(--tx2);
  padding: 5px 11px; border-radius: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: all .12s; font-family: inherit;
}
.btn:hover { background: var(--bd); color: var(--tx); border-color: #5a5a7a; }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn.primary { background: var(--p1a); border-color: var(--p1); color: var(--p1); }
.btn.primary:hover { background: rgba(124,111,255,.25); }
.btn.success { background: rgba(110,255,110,.08); border-color: rgba(110,255,110,.4); color: var(--ok); }
.btn.danger  { background: rgba(255,110,110,.08); border-color: rgba(255,110,110,.35); color: var(--err); }
.btn.sm { font-size: 11px; padding: 3px 8px; }
.btn.icon { padding: 5px 7px; }

/* ── Form controls ─────────────────────────────────────────────────────── */
input, select, textarea {
  background: var(--bg4);
  border: 1px solid var(--bd2);
  color: var(--tx);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--p1); }
input::placeholder, textarea::placeholder { color: var(--tx3); }
select { cursor: pointer; }
label { font-size: 11px; font-weight: 600; color: var(--tx2); }

/* ── Status badges ─────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 8px; letter-spacing: .04em;
}
.status-pending     { background: rgba(90,90,150,.2); color: #9090d0; border: 1px solid rgba(90,90,150,.4); }
.status-in_progress { background: rgba(124,111,255,.12); color: var(--p1); border: 1px solid rgba(124,111,255,.35); }
.status-review      { background: rgba(255,201,110,.1);  color: var(--warn); border: 1px solid rgba(255,201,110,.3); }
.status-completed   { background: rgba(110,255,110,.08); color: var(--ok);  border: 1px solid rgba(110,255,110,.25); }
.status-rejected    { background: rgba(255,110,110,.08); color: var(--err); border: 1px solid rgba(255,110,110,.25); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--bg4); border: 1px solid var(--bd2); color: var(--tx);
  padding: 8px 18px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  opacity: 0; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.65);
  align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--bd2); border-radius: 10px;
  width: 480px; max-width: 95vw; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.modal-head {
  padding: 14px 18px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h2 { font-size: 14px; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--tx3);
  cursor: pointer; font-size: 18px; padding: 2px 6px;
}
.modal-close:hover { color: var(--tx); }
.modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--bd); display: flex; gap: 8px; justify-content: flex-end; }

/* ── Form groups ────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group input, .form-group select { width: 100%; }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--bd2);
  border-top-color: var(--p1);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--tx3);
  font-size: 12px;
  line-height: 2;
}