:root {
  --bg-chrome: #1a1a2e;
  --bg-panel: #22223a;
  --bg-card: #2d2d48;
  --bg-hover: #363654;
  --bg-viewport: #3a3a50;
  --bg-input: #2d2d48;
  --text-primary: #e8e8f0;
  --text-secondary: #9898b0;
  --text-muted: #686880;
  --accent: #6c63ff;
  --accent-hover: #5a52e0;
  --border: #3a3a54;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;
  --green: #10b981;
  --green-bg: #10b98118;
  --amber: #f59e0b;
  --amber-bg: #f59e0b18;
  --red: #ef4444;
  --red-bg: #ef444418;
  --purple: #8b5cf6;
  --purple-bg: #8b5cf618;
  --radius: 6px;
  --radius-lg: 10px;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg-chrome);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.screen { display: flex; height: 100vh; width: 100vw; }
.hidden { display: none !important; }

/* ── Login ── */
.screen#login-screen { align-items: center; justify-content: center; }

.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card h1 { font-size: 24px; font-weight: 600; text-align: center; }
.login-subtitle { color: var(--text-secondary); font-size: 13px; text-align: center; margin-bottom: 8px; }
.login-card label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.login-card input {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); padding: 10px 12px; font-size: 14px; font-family: var(--font-mono); outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  background: var(--accent); color: white; border: none; border-radius: var(--radius);
  padding: 10px 16px; font-size: 14px; cursor: pointer; transition: background 0.15s;
}
.login-card button:hover { background: var(--accent-hover); }
.error-text { color: var(--error); font-size: 13px; min-height: 20px; }

/* ── List Screen ── */
#list-screen { flex-direction: column; }
.list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.list-header h2 { font-size: 18px; font-weight: 600; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-actions select {
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 10px; font-size: 13px; outline: none;
}
.header-actions button {
  padding: 6px 10px; font-size: 16px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius); cursor: pointer;
}
.header-actions button:hover { background: var(--bg-hover); }
#logout-btn { color: var(--text-secondary); }

.doc-list { flex: 1; overflow-y: auto; padding: 12px 24px; display: flex; flex-direction: column; gap: 8px; }
.doc-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  display: flex; justify-content: space-between; align-items: center;
}
.doc-card:hover { background: var(--bg-hover); border-color: var(--accent); }
.doc-card-left { display: flex; flex-direction: column; gap: 4px; }
.doc-title { font-size: 14px; font-weight: 500; }
.doc-subtitle { font-size: 12px; color: var(--text-secondary); display: flex; gap: 12px; }
.doc-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.badge-pending { background: #ff980033; color: var(--warning); }
.badge-in-progress { background: #2196f333; color: var(--info); }
.badge-reviewed { background: #4caf5033; color: var(--success); }
.badge-category { background: #6c63ff22; color: var(--accent); font-family: var(--font-mono); font-size: 10px; }

.loading { padding: 40px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.empty-state { padding: 60px 24px; text-align: center; color: var(--text-secondary); font-size: 14px; }

/* ── Viewer: Three-panel ── */
#viewer-screen { display: flex; height: 100vh; }
.panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
.panel:last-child { border-right: none; }
.panel-left { width: 15%; min-width: 120px; background: var(--bg-panel); }
.panel-center { flex: 1; background: var(--bg-viewport); }
.panel-right { width: 30%; min-width: 300px; background: var(--bg-panel); display: flex; flex-direction: column; }

.panel-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.atoms-header { justify-content: space-between; }

#back-btn {
  padding: 4px 8px; font-size: 14px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius); cursor: pointer;
}
#back-btn:hover { background: var(--bg-hover); }

/* ── Thumbnails ── */
.thumb-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.thumb-item {
  cursor: pointer; border: 2px solid transparent; border-radius: var(--radius); padding: 2px;
  transition: border-color 0.15s; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.thumb-item.active { border-color: var(--accent); }
.thumb-item:hover { border-color: var(--accent); opacity: 0.8; }
.thumb-item canvas { border-radius: 3px; max-width: 100%; }
.thumb-label { font-size: 10px; color: var(--text-secondary); }

/* ── PDF Viewport ── */
.viewport-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0;
}
.toolbar-left, .toolbar-center, .toolbar-right { display: flex; align-items: center; gap: 8px; }
.viewport-toolbar button {
  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 10px; font-size: 14px; cursor: pointer;
}
.viewport-toolbar button:hover { background: var(--bg-hover); }

.tool-group { display: flex; gap: 2px; }
.tool-btn {
  padding: 4px 10px; border-radius: var(--radius); font-size: 11px; font-family: var(--font-mono);
  cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted);
}
.tool-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

#page-indicator { font-size: 13px; color: var(--text-secondary); }
#zoom-level { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); min-width: 45px; text-align: right; }

.pdf-container { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; position: relative; }
.pdf-wrapper { position: relative; display: inline-block; }
#pdf-canvas { display: block; box-shadow: 0 2px 16px rgba(0,0,0,0.3); border-radius: 2px; }

/* ── SVG Overlay ── */
.overlay-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay-svg .region { pointer-events: all; cursor: pointer; transition: all 0.12s; }
.overlay-svg .region:hover { stroke-width: 2.5; }
.overlay-svg .region-extraction { fill: rgba(59,130,246,0.12); stroke: rgba(59,130,246,0.6); stroke-width: 1.5; }
.overlay-svg .region-extraction.selected { fill: rgba(59,130,246,0.25); stroke: rgba(59,130,246,1); stroke-width: 2.5; }
.overlay-svg .region-extraction.dim { opacity: 0.2; }
.overlay-svg .region-confirmed { fill: rgba(16,185,129,0.12); stroke: rgba(16,185,129,0.6); stroke-width: 1.5; }
.overlay-svg .region-confirmed.selected { fill: rgba(16,185,129,0.25); stroke: rgba(16,185,129,1); stroke-width: 2.5; }
.overlay-svg .region-confirmed.dim { opacity: 0.2; }
.overlay-svg .region-corrected { fill: rgba(245,158,11,0.12); stroke: rgba(245,158,11,0.6); stroke-width: 1.5; }
.overlay-svg .region-corrected.selected { fill: rgba(245,158,11,0.25); stroke: rgba(245,158,11,1); stroke-width: 2.5; }
.overlay-svg .region-corrected.dim { opacity: 0.2; }
.overlay-svg .region-rejected { fill: rgba(239,68,68,0.12); stroke: rgba(239,68,68,0.6); stroke-width: 1.5; }
.overlay-svg .region-rejected.selected { fill: rgba(239,68,68,0.25); stroke: rgba(239,68,68,1); stroke-width: 2.5; }
.overlay-svg .region-rejected.dim { opacity: 0.2; }
.overlay-svg .region-discovery { fill: rgba(139,92,246,0.15); stroke: rgba(139,92,246,0.8); stroke-width: 2; stroke-dasharray: 4,3; }
.overlay-svg .region-discovery.selected { fill: rgba(139,92,246,0.3); stroke: rgba(139,92,246,1); stroke-width: 2.5; }
.overlay-svg .region-drawing { fill: rgba(139,92,246,0.1); stroke: rgba(139,92,246,0.5); stroke-width: 1; stroke-dasharray: 3,3; pointer-events: none; }

/* ── Filter bar ── */
.filter-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.filter-label { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); text-transform: uppercase; }
.filter-bar select {
  padding: 4px 6px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; outline: none;
}

/* ── Dashboard: Document Meta ── */
.doc-meta { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.meta-row { display: flex; justify-content: space-between; font-size: 12px; }
.meta-label { color: var(--text-secondary); }
.meta-value { color: var(--text-primary); font-weight: 500; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* ── Dashboard: Atom List ── */
.atom-list { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }

.atom-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.atom-card:hover { background: var(--bg-hover); }
.atom-card.selected { border-color: var(--accent); background: var(--bg-hover); }
.atom-card.verdict-confirmed { border-left: 3px solid var(--green); }
.atom-card.verdict-corrected { border-left: 3px solid var(--amber); }
.atom-card.verdict-rejected { border-left: 3px solid var(--red); }

.atom-header { display: flex; align-items: center; gap: 6px; }
.atom-kind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.atom-kind-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.atom-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atom-status { font-size: 10px; color: var(--text-muted); }

/* ── Atom Detail Panel ── */
.atom-detail {
  padding: 12px; border-top: 1px solid var(--border); background: var(--bg-card);
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.detail-field { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.detail-value { font-family: var(--font-mono); font-size: 12px; color: var(--green); word-break: break-word; }
.detail-meta { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

.verdict-row { display: flex; gap: 6px; margin-top: 4px; }
.verdict-btn {
  padding: 5px 14px; border-radius: var(--radius); font-size: 11px; font-family: var(--font-mono);
  cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted);
}
.verdict-btn:hover { border-color: var(--text-muted); }
.verdict-btn.v-confirmed { background: var(--green-bg); color: var(--green); border-color: #10b98140; }
.verdict-btn.v-corrected { background: var(--amber-bg); color: var(--amber); border-color: #f59e0b40; }
.verdict-btn.v-rejected { background: var(--red-bg); color: var(--red); border-color: #ef444440; }

.correction-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ann-input {
  width: 100%; padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-chrome); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; outline: none;
}
.ann-input:focus { border-color: var(--accent); }
.ann-select {
  width: 100%; padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-chrome); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; outline: none;
}

/* ── Discovery section ── */
.discovery-section { border-top: 1px solid var(--border); }

/* ── Submit bar ── */
.submit-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0;
}
.verdict-summary { font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); }
.btn-submit {
  padding: 6px 16px; border-radius: var(--radius); font-size: 12px; font-family: var(--font-mono);
  font-weight: 600; cursor: pointer; background: var(--accent); border: none; color: #fff;
}
.btn-submit:hover { background: var(--accent-hover); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Kind colors ── */
.kind-condition { background: #ef5350; }
.kind-medication { background: #42a5f5; }
.kind-provider { background: #ab47bc; }
.kind-organization { background: #7e57c2; }
.kind-labValue { background: #26a69a; }
.kind-vitalSign { background: #66bb6a; }
.kind-procedure { background: #ffa726; }
.kind-diagnosis { background: #ec407a; }
.kind-visitDate { background: #78909c; }
.kind-reportDate { background: #8d6e63; }
.kind-allergy { background: #f44336; }
.kind-symptom { background: #ff7043; }
.kind-immunization { background: #29b6f6; }
.kind-socialHistory { background: #9ccc65; }
.kind-familyHistory { background: #ce93d8; }
.kind-device { background: #90a4ae; }
.kind-referral { background: #4dd0e1; }
.kind-carePlan { background: #aed581; }
.kind-coverage { background: #ffb74d; }
.kind-default { background: #9e9e9e; }

/* ── Responsive ── */
@media (max-width: 1279px) {
  .panel-left { display: none; }
}