:root {
  --sindi-blue: #5673dc;
  --sindi-lavender: #c0c9ed;
  --sindi-offwhite: #f3f4f7;
  --sindi-ink: #1c264a;
  --sindi-slate: #676d83;
  --sindi-sky: #4ba0dd;
  color: var(--sindi-ink);
  background: var(--sindi-offwhite);
}

body { background: var(--sindi-offwhite); color: var(--sindi-ink); }
a { color: var(--sindi-blue); }
button, .button { background: var(--sindi-blue); color: #fff; }
button:not(:disabled):hover, .button:hover { background: #4966cb; box-shadow: 0 7px 18px #5673dc24; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--sindi-sky); outline-offset: 3px; }
.secondary { background: #e8ecfa; color: var(--sindi-ink); }
.secondary:not(:disabled):hover { background: var(--sindi-lavender); }
.ghost { background: transparent; color: var(--sindi-blue); }
.ghost:not(:disabled):hover { background: #e8ecfa; }
.top { background: #fff; border-color: #e0e4f1; backdrop-filter: none; }
.brand-logo { display: block; width: 150px; height: auto; }
.brand small { color: var(--sindi-slate); letter-spacing: .13em; }
.top-link { background: var(--sindi-offwhite); color: var(--sindi-ink); }
.sindi-service-nav { background: #fff; border-color: #e0e4f1; }
.sindi-service-nav a { color: var(--sindi-slate); }
.sindi-service-nav a:hover, .sindi-service-nav a:focus-visible { background: #e8ecfa; color: var(--sindi-ink); }
.sindi-service-nav a[aria-current="page"] { background: var(--sindi-blue); color: #fff; }

.intro { background: linear-gradient(117deg, #c0c9ed, #dfe5f7 67%, #f3f4f7); color: var(--sindi-ink); border: 1px solid #d4dbf4; box-shadow: 0 14px 36px #1c264a0e; }
.intro .eyebrow { color: #405aba; }
.intro h1 { color: var(--sindi-ink); }
.intro h1 span { color: #3d59bd; }
.intro p { color: #414e72; }
.intro-stat { background: #ffffffdc; border-color: #d7def3; box-shadow: 0 8px 24px #1c264a12; backdrop-filter: none; }
.intro-stat[hidden] { display: none !important; }
.intro-stat strong { color: var(--sindi-ink); }
.intro-stat span { color: var(--sindi-slate); }
.hero-decoration { top: 35px; right: 52px; width: 166px; height: 166px; border: 0; border-radius: 0; background: url('/ui-assets/sindi-mark.png') center / contain no-repeat; }
.hero-decoration::before, .hero-decoration::after, .hero-decoration span { display: none; }
.eyebrow, .section-head .eyebrow { color: var(--sindi-blue); }
.card, .metric, .visit-workspace, .operator-section { border-color: #e1e5f0; box-shadow: 0 6px 22px #1c264a09; }
.card p, .hint, .selector-tip { color: var(--sindi-slate); }
.tag { background: #e9edfb; color: #435fbe; }
.selector label, .card label { color: #4d587a; }
.card input:not([type=checkbox]), .card select, .operator-section input:not([type=checkbox]), .operator-section select, .operator-section textarea { border-color: #ccd4ec; color: var(--sindi-ink); }
.check input { accent-color: var(--sindi-blue); }
.flow-step { background: #fff; border-color: #e0e5f2; color: var(--sindi-slate); }
.flow-step.active { background: #e5eafa; border-color: var(--sindi-lavender); color: var(--sindi-ink); }
.flow-step.active>span, .flow-step.done>span { background: var(--sindi-blue); color: #fff; }
.flow-step.done { background: #eff2fb; border-color: #d7def5; color: #405aba; }
.metric span { color: var(--sindi-slate); }
.metric strong { color: var(--sindi-ink); }
.metric-attention { background: #e7f2fa; border-color: #cde3f4; }
.metric-attention span, .metric-attention strong { color: #286a9f; }
.dropzone { background: #f5f7fd; border-color: var(--sindi-lavender); color: var(--sindi-ink) !important; }
.dropzone:hover, .dropzone.dragging, .dropzone:focus-within { background: #e9edfb; border-color: var(--sindi-blue); }
.drop-icon { background: #e4e9fa; color: var(--sindi-blue); }
.drop-icon img, .verdict-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.camera-icon { display: block; object-fit: contain; border-radius: 0; background: transparent; }
.upload #process, .operator-footer .primary { background: var(--sindi-blue); }
.file-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) minmax(170px, 220px); align-items: end; background: #f8f9fd; border-color: #dfe5f3; }
.file-row span { align-self: center; }
.file-row label { margin: 0 !important; }
.file-row input { width: 100%; max-width: none; margin-top: 5px !important; }
.file-row select { margin-top: 5px !important; }
.file-row label[hidden] { display: none !important; }
.progress-box, .service-metric, .empty { background: #f6f8fd; border-color: #dfe5f2; }
.progress-track { background: #dfe5f5; }
.progress-track span { background: var(--sindi-blue); }
.recording-row.complete i { background: var(--sindi-blue); }
.verdict { background: #eef2fb; border-color: #dce3f5; }
.verdict-icon { background: var(--sindi-lavender); color: var(--sindi-ink); }
.evidence.has-attention .verdict { background: #e7f2fa; border-color: #b9d9f1; }
.evidence.has-attention .verdict-icon { background: var(--sindi-sky); color: #fff; }
.event.attention, .event.chair { border-left-color: var(--sindi-blue); background: #f8f9fd; }
.event.attention .tag, .event.chair .tag { background: #e5eafa; color: #405aba; }
.service-metric:hover { background: #e9edfb; }
.service-metric b, .service-category, .service-dialogue summary { color: var(--sindi-blue); }
.zone-auto, .operator-timing-summary { background: #eef2fb; border-color: #d6def4; color: var(--sindi-ink); }
.zone-auto strong { color: var(--sindi-ink); }
.zone-auto button { background: var(--sindi-blue); }
.zone-suggestions { background: #f8f9fd; border-color: #d8e0f4; }
.zone-suggestion-head strong { color: var(--sindi-blue); }
.zone-suggestion-item { border-color: #dce3f5; }
.visit-guide span, .operator-media .media-note, .operator-empty, .operator-assumption { background: #eef2fb; color: #405477; }
.visit-delivery { background: #e8ecfa; color: #435fbe; }
.operator-dialog { background: var(--sindi-offwhite); }
.operator-header, .operator-footer { border-color: #dce3f4; }
.operator-episode-tabs button.active { background: var(--sindi-blue); }
.operator-line.playing, .operator-candidate.selected { background: #e9edfb; }
.operator-candidate.selected { border-color: var(--sindi-blue); }

@media (max-width: 1100px) { .hero-decoration { right: 25px; width: 130px; height: 130px; } .intro p { max-width: 620px; } }
@media (max-width: 850px) { .hero-decoration { display: none; } }
@media (max-width: 740px) { .file-row { grid-template-columns: 1fr; } .file-row label { width: 100%; } }