body { background: #0c1220; color: #e2e8f0; font-family: 'Inter', system-ui, sans-serif; }
.card { background: #151e2f; border: 1px solid #1e2d45; border-radius: 0.75rem; }
.card:hover { border-color: #2a3f5f; }
.badge-ok { background: #065f46; color: #6ee7b7; }
.badge-alarm { background: #7f1d1d; color: #fca5a5; }
.badge-warn { background: #78350f; color: #fcd34d; }
.badge-grey { background: #1e2d45; color: #8896ab; }
.badge-success { background: #065f46; color: #6ee7b7; }
.badge-error { background: #7f1d1d; color: #fca5a5; }
.badge-never { background: #1e2d45; color: #8896ab; }
.tab-active { border-bottom: 2px solid #0082d4; color: #0082d4; }
.tab-inactive { border-bottom: 2px solid transparent; color: #8896ab; }
.tab-inactive:hover { color: #e2e8f0; }
.log-INFO { color: #6ee7b7; }
.log-ERROR { color: #f3392f; }
.log-WARN { color: #ffc600; }
.log-RAW { color: #8896ab; }
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
#dashboard { display: none; }
.spinner { border: 3px solid #1e2d45; border-top: 3px solid #0082d4; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary { background: #0082d4; }
.btn-primary:hover { background: #006bb0; }
.header-bar { background: #0c1220; border-bottom: 1px solid #1e2d45; }
.section-title { color: #8896ab; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 600; }
.nav-tab { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; color: #8896ab; transition: color 0.15s; }
.nav-tab:hover { color: #e2e8f0; }
.nav-tab-active { border-bottom-color: #0082d4; color: #0082d4; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.doc-table th { text-align: left; padding: 0.5rem 0.75rem; color: #8896ab; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #1e2d45; white-space: nowrap; }
.doc-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #1e2d45; vertical-align: top; }
.doc-table tr:hover td { background: rgba(0,130,212,0.05); }
.doc-table code { background: #1e2d45; padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-size: 0.75rem; color: #7dd3fc; }
.doc-badge { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 9999px; font-weight: 500; }
.doc-badge-synced { background: #065f46; color: #6ee7b7; }
.doc-badge-ready { background: #78350f; color: #fcd34d; }
.doc-badge-none { background: #1e2d45; color: #8896ab; }
.doc-badge-bidir { background: #1e3a5f; color: #7dd3fc; }
.doc-section { margin-bottom: 2rem; }
.doc-section h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; color: #e2e8f0; }
.doc-section h3 .doc-section-num { color: #0082d4; margin-right: 0.5rem; }
.doc-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.8rem; }
.doc-legend-item { display: flex; align-items: center; gap: 0.35rem; color: #8896ab; }

/* ── Submission intake ─────────────────────────────────────────────────────
   Uses the same tokens as the dashboard above: surfaces #151e2f, borders
   #1e2d45, accent #0082d4. */

.field { background: #0f1728; border: 1px solid #1e2d45; color: #e2e8f0; border-radius: 0.5rem; }
.field:focus { outline: none; border-color: #0082d4; }
.field::placeholder { color: #5b6b85; }

.btn { border-radius: 0.5rem; font-weight: 500; transition: opacity .15s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: #1e2d45; color: #cbd5e1; border: 1px solid #2a3f5f; }
.btn-ghost:hover { background: #2a3f5f; }

.step-chip { background: #1e2d45; color: #8896ab; border-radius: 9999px; }

/* Marks a field the extractor populated, so the user knows what to check. */
.extracted { border-left: 3px solid #0082d4; }

.drop { border: 2px dashed #1e2d45; border-radius: 0.75rem; transition: all .15s; }
.drop:hover { border-color: #2a3f5f; }
.drop.over { border-color: #0082d4; background: rgba(0,130,212,0.06); }

.suggest { background: #0f1728; border: 1px solid #1e2d45; border-radius: 0.5rem; }
.suggest div:hover { background: #1e2d45; }

.banner-warn { background: #2a2410; border: 1px solid #4a3d15; color: #fcd34d; }
.banner-alert { background: #2e1414; border: 1px solid #5c2626; color: #fca5a5; }