:root {
  color-scheme: dark;
  --accent: #65b7ff;
  --muted: #8a9cb3;
  --border: #263c55;
  color: #d5e3f3;
  background: #091522;
}

body, .viewport { background: #091522; }
.topbar { background: #0d1d2e; }
.app-shell { grid-template-columns: 276px minmax(0, 1fr); }
@media (min-width: 1600px) {
  .app-shell { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 235px minmax(0, 1fr); }
}
.sidebar { background: #112235; }
.brand-light, .brand-symbol, .top-right, .demo-badge,
.series-check, .eyebrow, .sidebar-note, .sidebar-note strong { color: #8ecbff; }
.beta, .key { border-color: #3b698d; }
.import-button {
  background: #174975;
  border-color: #367aaa;
  color: #e0f2ff;
}
.import-button:hover { background: #205b90; }
.folder-button {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #3d617f;
  border-radius: 5px;
  background: #182f48;
  color: #d1e9f9;
  text-align: left;
  font-size: 11px;
}
.folder-button span { font-size: 17px; color: #83c9fa; }
.folder-button:hover { background: #22435f; }
.import-button:disabled, .folder-button:disabled { opacity: .55; cursor: wait; }
/* Keep the two study-open actions spaced while exchanging their visual colors. */
.sidebar > #import-folder {
  margin-top: 0;
  min-height: 41px;
  background: #174975;
  border-color: #367aaa;
  color: #e0f2ff;
}
.sidebar > #import-folder:hover { background: #205b90; }
.sidebar > #import {
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin-top: 8px;
  background: #182f48;
  border-color: #3d617f;
  color: #d1e9f9;
}
.sidebar > #import > span:first-child { font-size: 17px; color: #83c9fa; }
.sidebar > #import .key { border-color: #3b698d; }
.sidebar > #import:hover { background: #22435f; }
.series-options { margin-top: 19px; }
.series-options .section-label { margin-bottom: 8px; }
#series-select { width: 100%; padding: 9px 30px 9px 10px; border-color: #3c7297; background: #142f46; color: #d9edfa; font-size: 10px; text-overflow: ellipsis; }
#series-select:focus { border-color: #69b9ee; box-shadow: 0 0 0 2px rgba(74, 167, 226, .15); }
#series-select:disabled { opacity: .6; cursor: wait; }
#series-select option:disabled { color: #9c826d; }
#series-select-detail { display: block; margin-top: 6px; color: #88a9bf; font-size: 9px; line-height: 1.45; }
.tractography-panel { border-top: 1px solid #34516b; margin-top: 20px; }
.tract-heading { border-top: 0; margin-top: 0; padding-top: 18px; margin-bottom: 8px; }
.feature-tag { color: #88b8d6; font: 8px 'IBM Plex Mono', monospace; letter-spacing: .8px; }
.tractography-panel .folder-button { font-size: 10px; }
.tract-hint { margin: 9px 0 0; color: #829fb6; font-size: 9px; line-height: 1.55; }
.dwi-button { margin-top: 15px; border-color: #4b83ad; background: #163a58; color: #d3ecff; font-weight: 600; min-height: 37px; white-space: normal; text-align: left; }
.dwi-button:disabled { opacity: .55; cursor: wait; }
.dwi-progress { margin: 10px 0 0; padding: 9px 10px; border-left: 2px solid #66b9ef; background: #132c42; color: #c6e6fb; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.dwi-download { display: inline-block; margin-top: 10px; color: #8bd1ff; font-size: 10px; text-decoration: underline; }
.dwi-guide { margin-top: 12px; padding: 10px 11px; border: 1px solid #345674; border-radius: 6px; background: #142e46; color: #a9c7dc; font-size: 10px; line-height: 1.55; }
.dwi-guide summary { color: #c2e4fa; cursor: pointer; font-weight: 600; }
.dwi-guide[open] summary { margin-bottom: 8px; }
.dwi-guide p { margin: 0 0 7px; }
.dwi-guide ol { margin: 0 0 8px; padding-left: 18px; }
.dwi-guide li { margin: 5px 0; }
.dwi-guide a { color: #8bd1ff; text-decoration: underline; }
.tract-summary { margin-top: 17px; padding: 10px; border: 1px solid #345674; border-radius: 5px; background: #19354f; }
.tract-summary strong, .tract-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tract-summary strong { color: #deecf6; font-size: 10px; font-weight: 550; }
.tract-summary small { color: #91b3ca; font-size: 9px; margin-top: 5px; }
.tract-visibility-control { display: inline-flex; align-items: center; gap: 8px; }
#tract-visibility-state { min-width: 27px; padding: 2px 5px; border: 1px solid #3f806a; border-radius: 999px; background: #173c32; color: #a9ebce; font: 8px 'IBM Plex Mono', monospace; text-align: center; }
#tract-visibility-state[data-visible="false"] { border-color: #5a6874; background: #273440; color: #9eacb7; }
#tract-controls.tracts-hidden .tract-summary { opacity: .7; }
.tract-field { margin-top: 16px; }
.clear-tracts { margin-top: 14px; width: 100%; }
.segmentation-panel { border-top: 1px solid #34516b; margin-top: 20px; }
.atlas-panel { border-top: 1px solid #34516b; margin-top: 20px; padding-top: 12px; }
.atlas-panel .display-heading { margin-top: 0; }
.atlas-panel .folder-button { font-size: 10px; white-space: normal; margin-top: 7px; }
.roi-settings { margin: 11px 0; padding: 9px; border: 1px solid #345674; border-radius: 5px; display: grid; gap: 7px; color: #b8d5e9; font-size: 10px; }
.roi-settings input[type=range], .atlas-panel input[type=range] { width: 100%; }
.roi-settings output { color: #99ccee; }
.manual-toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: #112b44; border-top: 1px solid #2f4d69; color: #adcadf; font-size: 10px; }
.manual-toolbar .tool { padding: 5px 10px; border: 1px solid #406888; border-radius: 4px; }
.manual-toolbar span { color: #8aacc4; }
.ai-runner { margin: 10px 0; padding: 10px; border: 1px solid #345674; border-radius: 5px; color: #afcde0; font-size: 10px; }
.ai-runner summary { cursor: pointer; color: #c9e5f7; font-weight: 600; }
.ai-runner p { line-height: 1.5; }
.ai-runner label { display: grid; gap: 4px; margin: 8px 0; }
.ai-runner input[type=file] { max-width: 100%; font-size: 9px; }
.ai-runner button { font-size: 10px; white-space: normal; }
#ai-progress { overflow-wrap: anywhere; }
.export-dropdown { position: relative; flex: none; }
.export-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 25; width: min(260px, calc(100vw - 24px)); padding: 6px; border: 1px solid #41688a; border-radius: 7px; background: #142e46; box-shadow: 0 14px 32px #0008; }
.export-menu button { display: block; width: 100%; padding: 10px; border-radius: 4px; color: #d8edfb; font-size: 11px; text-align: left; }
.export-menu button:hover, .export-menu button:focus-visible { background: #245173; }
.export-menu p { padding: 8px 10px 4px; border-top: 1px solid #335672; color: #9bbbd0; font-size: 9px; line-height: 1.45; }
.measurement-panel ul { list-style: none; padding: 0; }
.measurement-panel li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.measurement-panel li span { min-width: 0; overflow-wrap: anywhere; }
.measurement-delete { flex: none; width: 25px; height: 25px; border: 1px solid #49647c; border-radius: 4px; color: #e5bbbd; font-size: 16px; line-height: 1; }
.measurement-delete:hover { background: #593343; }
.trajectory-panel { border-top: 1px solid #34516b; margin-top: 22px; padding-bottom: 4px; }
.trajectory-heading { border-top: 0; margin: 0 0 8px; padding-top: 18px; }
.trajectory-help, .trajectory-note, .trajectory-roi { color: #91adc1; font-size: 9px; line-height: 1.55; }
.trajectory-note { margin-top: 12px; color: #7e9bb1; }
.trajectory-status { margin: 10px 0; padding: 8px 9px; border-left: 2px solid #55c7df; background: #122f45; color: #c8e8f5; font-size: 10px; line-height: 1.4; }
.trajectory-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.trajectory-actions button { padding: 7px 8px; }
.trajectory-actions button.active { border-color: #60d1e6; background: #20516a; color: #e4faff; }
.trajectory-secondary { grid-template-columns: 1fr 1fr; }
.trajectory-secondary .trajectory-clear { color: #f0b5b7; }
.trajectory-coordinates { display: grid; gap: 6px; margin: 12px 0 10px; }
.trajectory-coordinates div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
.trajectory-coordinates dt { color: #86a6bd; font-size: 9px; }
.trajectory-coordinates dd { margin: 0; color: #d1e8f5; font: 9px 'IBM Plex Mono', monospace; overflow-wrap: anywhere; }
.trajectory-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 0 2px; }
.trajectory-metrics span { padding: 7px 5px; border: 1px solid #315674; border-radius: 4px; background: #142e45; text-align: center; }
.trajectory-metrics small, .trajectory-metrics strong { display: block; }
.trajectory-metrics small { color: #7f9fb7; font-size: 8px; }
.trajectory-metrics strong { margin-top: 4px; color: #d9eff9; font: 10px 'IBM Plex Mono', monospace; }
.trajectory-panel input[type=range] { width: 100%; }
.trajectory-roi { margin-top: 5px; color: #a7cfe0; }
.nifti-frame-controls { margin: 10px 0; padding: 10px; border: 1px solid #315674; border-radius: 5px; color: #bcd6e9; font-size: 11px; }
.nifti-frame-controls label { display: block; margin-bottom: 6px; }
.nifti-frame-controls input { width: 75px; margin-right: 7px; padding: 5px; border: 1px solid #4c7293; border-radius: 4px; color: #e8f4fc; background: #122b43; }
.merge-panel, .fusion-panel { border-top: 1px solid #34516b; margin-top: 20px; }
.merge-heading, .fusion-heading { border-top: 0; margin-top: 0; padding-top: 18px; margin-bottom: 8px; }
.merge-panel .folder-button, .fusion-panel .folder-button { font-size: 10px; white-space: normal; }
.merge-status { margin: 10px 0; padding: 8px 9px; border-left: 3px solid #d6a54f; background: #152e42; color: #dcecf5; font-size: 10px; line-height: 1.45; }
.merge-status[data-state="pass"] { border-color: #5fc99b; background: #14382f; }
.merge-status[data-state="review"] { border-color: #e4b654; background: #3b321a; }
.merge-status[data-state="fail"] { border-color: #e46f75; background: #3d222a; }
.merge-grid-report { display: grid; gap: 6px; margin: 10px 0; }
.merge-grid-report div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 7px; }
.merge-grid-report dt { color: #88a8be; font-size: 9px; }
.merge-grid-report dd { margin: 0; color: #d4e8f4; font: 9px/1.45 'IBM Plex Mono', monospace; overflow-wrap: anywhere; }
.merge-warnings { margin: 9px 0 12px; padding-left: 16px; color: #d9bd88; font-size: 9px; line-height: 1.5; }
.merge-warnings:empty { display: none; }
#approve-fusion { width: 100%; justify-content: center; color: #dff4ff; }
#approve-fusion:disabled { cursor: not-allowed; filter: none; opacity: .48; }
.fusion-empty { margin-top: 9px; padding: 9px; border: 1px dashed #365a75; border-radius: 5px; color: #88a9bf; font-size: 9px; line-height: 1.5; }
.fusion-field { margin-top: 14px; }
.fusion-crosshair { margin-top: 9px; color: #9dc1d7; font: 9px/1.5 'IBM Plex Mono', monospace; overflow-wrap: anywhere; }
.fusion-adjustment { margin-top: 14px; padding: 11px; border: 1px solid #37617e; border-radius: 6px; background: #112b40; }
.fusion-adjustment-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.fusion-adjustment-heading strong { color: #d8edf8; font-size: 10px; }
.fusion-adjustment-heading span { color: #73b9dc; font: 8px 'IBM Plex Mono', monospace; letter-spacing: .7px; }
.fusion-adjustment .field-label { margin-top: 0; }
.fusion-step-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.fusion-step-row label { color: #8fafc4; font-size: 9px; }
.fusion-step-row select { margin-top: 4px; padding: 6px; }
.fusion-adjustment-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 0; }
.fusion-adjustment-pad button { min-height: 42px; border: 1px solid #3d6c89; border-radius: 5px; background: #173b56; color: #dff4ff; font-size: 18px; }
.fusion-adjustment-pad button:hover, .fusion-adjustment-pad button:focus-visible { background: #245875; }
.fusion-adjustment-pad button:disabled { cursor: wait; opacity: .55; }
.fusion-adjustment-pad button small { display: block; margin-top: 1px; color: #91b6cb; font-size: 7px; }
.fusion-adjustment-pad output { display: grid; place-items: center; border: 1px solid #31546b; border-radius: 5px; color: #89bdd7; font: 8px 'IBM Plex Mono', monospace; }
.fusion-transform-value { display: block; min-height: 31px; padding: 7px; border-radius: 4px; background: #0e2334; color: #a9cada; font: 8px/1.5 'IBM Plex Mono', monospace; overflow-wrap: anywhere; }
#reset-fusion-adjustment { width: 100%; margin-top: 8px; }
.fusion-adjustment-note { margin-top: 8px; color: #c5a987; font-size: 8px; line-height: 1.45; }
#fusion-controls { font-size: 10px; color: #b4d6eb; }
#fusion-controls input[type=range] { width: 100%; }
#atlas-controls { padding-top: 9px; font-size: 10px; color: #b4d6eb; }
#atlas-controls small { display: block; margin-top: 7px; overflow-wrap: anywhere; }
#atlas-controls button { width: 100%; margin-top: 10px; }
.segment-heading { border-top: 0; margin-top: 0; padding-top: 18px; margin-bottom: 8px; }
.segment-hint { margin: 8px 0 10px; color: #91adc1; font-size: 9px; line-height: 1.55; }
.segment-field { margin-top: 16px; }
.segmentation-panel .folder-button { font-size: 10px; }
#mask-assessment { color: #acd9ed; white-space: normal; line-height: 1.45; }
.three-d #tract-overlay { pointer-events: none; }
.three-d #fusion-3d { pointer-events: none; z-index: 1; }
.three-d #tract-overlay { z-index: 2; }
.canvas-wrap canvas.trajectory-handle-hover { cursor: grab; }
.canvas-wrap canvas.trajectory-handle-dragging { cursor: grabbing; }
.three-d .render-badge { letter-spacing: .5px; text-transform: uppercase; font-family: 'IBM Plex Mono', monospace; }
.three-d .canvas-wrap { background: #0b1420; }
.study-icon { background: #203b56; color: #b9ddf7; }
.series-card { background: #17344e; border-color: #3b739d; }
.series-card small { color: #a3bed1; }
.series-card .loaded { color: #a6d7ff; }
.tool.active { color: #d7eeff; background: #1d4669; }
.layout.active { background: #225176; color: #d4ecff; }
.subtle-button, select { background: #182d43; border-color: #36516a; }
.subtle-button:hover { background: #234562; }
.toggle:checked { background: #3584bb; }
.toggle:checked::before { background: #e4f6ff; }
input[type=range] { accent-color: #62b4f2; }
.viewport { border-color: #2c4661; }
.axial { --view-color: #55a8f7; }
.sagittal { --view-color: #84c9f8; }
.coronal { --view-color: #5386e1; }
.three-d { --view-color: #8ad8ef; background: #fff; }
.three-d .canvas-wrap { background: #fff; }
.three-d .render-badge, .three-d .render-hint { color: #52697d; }
.zoom-button, .view-actions button { display: inline-grid; place-items: center; width: 29px; height: 28px; border: 1px solid #355470; border-radius: 4px; background: #1a3853; color: #d4ecff; font-size: 18px; line-height: 1; }
.zoom-button:hover, .view-actions button:hover { background: #28577b; }
.view-actions { display: flex; align-items: center; gap: 5px; }
.view-actions output { min-width: 34px; color: #a9c9df; font: 10px 'IBM Plex Mono', monospace; text-align: right; margin-right: 3px; }
.clear-study { width: 100%; margin-top: 9px; }
button:disabled { opacity: .5; cursor: default; }
.no-volume .series-card, .no-volume .scan-info, .no-volume .orientation, .no-volume .view-bottom, .no-volume .slice-control, .no-volume .render-badge, .no-volume .render-hint { display: none; }
.no-volume .canvas-wrap::after { content: 'No image loaded'; position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: #8da8c1; font-size: 12px; text-align: center; pointer-events: none; letter-spacing: .2px; }
.no-volume .axial .canvas-wrap::after { content: 'Import DICOM or NIfTI to begin'; }
.no-volume .three-d .canvas-wrap::after { content: 'No 3D model loaded'; color: #587084; }
.viewport { position: relative; }
.view-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-top-color: transparent;
  text-shadow: 0 1px 4px #000, 0 0 3px #000;
  pointer-events: none;
}
.view-header button, .view-header .view-actions { pointer-events: auto; }
.slice-control { background: #102337; border-top-color: #29435b; }
.render-control button { color: #85c5f3; }
.render-badge i { background: #8ad8ef; }
.sidebar-note p { color: #9cbad0; }
#toast {
  background: #173a58;
  color: #e7f5ff;
  border-color: #4a94c7;
}
dialog { background: #10263d; border-color: #4a7295; }
dialog h2, dialog h3 { color: #b5e1ff; }
kbd { border-color: #507da2; }
.top-link {
  margin-left: 12px;
  padding: 7px 10px;
  border: 1px solid #426b8c;
  border-radius: 5px;
  color: #d8eeff;
  background: #193954;
  white-space: nowrap;
}
.top-link:hover, .top-link:focus-visible { background: #28577b; }
.patient-identification {
  margin: 16px 0 4px;
  padding: 14px;
  border: 1px solid #2c4b67;
  border-radius: 7px;
  background: #102a42;
}
.patient-identification h3 { margin: 0 0 7px; color: #d7ebf9; font-size: 12px; }
.patient-identification p { margin: 0 0 10px; color: #94b6ce; font-size: 10px; line-height: 1.5; }
.patient-identification label { display: block; margin: 9px 0 4px; color: #bdd6e9; font-size: 10px; }
.patient-identification input {
  width: 100%; padding: 7px 8px; border: 1px solid #436783; border-radius: 4px;
  background: #0d2032; color: #eaf6ff; font-size: 11px;
}
.patient-identification input::placeholder { color: #7593a9; }
.no-volume .patient-identification { display: none; }
.patient-annotation {
  position: absolute; top: 12px; right: 12px; z-index: 3; pointer-events: none;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #deeffa; text-shadow: 0 1px 4px #000, 0 0 3px #000;
  font: 10px 'IBM Plex Mono', monospace;
  display: none !important;
}
.scan-info {
  left: 13px !important;
  top: 40px !important;
  right: auto !important;
  text-align: left !important;
}
.three-d .patient-annotation { color: #285071; text-shadow: 0 1px 2px #fff; }
.patient-annotation[hidden] { display: none; }
.about-dialog {
  position: relative;
  width: min(840px, 92vw);
  max-width: 840px;
  max-height: 88vh;
  padding: 0;
  overflow: auto;
  border-color: #3c7197;
  background-color: #081827;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(86, 204, 255, .22), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(88, 116, 255, .2), transparent 32%),
    linear-gradient(rgba(80, 175, 225, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 175, 225, .045) 1px, transparent 1px),
    linear-gradient(135deg, #0a1c2d 0%, #0b1423 52%, #101d3a 100%);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  box-shadow: 0 24px 100px rgba(0, 8, 24, .8), inset 0 0 70px rgba(39, 152, 214, .08);
}
.about-dialog p { overflow-wrap: anywhere; }
.about-dialog::before {
  content: '◌  DICOM  ·  NIFTI  ·  3D MEDICAL IMAGING  ·  ◌';
  position: absolute;
  top: 15px;
  left: 40px;
  color: rgba(130, 218, 255, .42);
  font: 8px 'IBM Plex Mono', monospace;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.about-dialog .about-hero,
.about-dialog .about-content,
.about-dialog .dialog-close { position: relative; z-index: 1; }
.about-dialog .dialog-close { position: sticky; z-index: 3; float: right; top: 12px; margin: 0 14px -36px 0; color: #b9d9ed; }
.about-hero { padding: 42px 40px 28px; border-bottom: 1px solid #315674; background: linear-gradient(135deg, rgba(31, 102, 148, .25), rgba(17, 36, 75, .16)); }
.about-hero .eyebrow { margin-bottom: 10px; color: #7fcdf6; }
.about-dialog .about-hero h2 { margin: 0; color: #eff9ff; font-size: clamp(30px, 5vw, 46px); line-height: 1; letter-spacing: -1.5px; }
.about-tagline { max-width: 580px; margin-top: 13px !important; color: #b8d5e7 !important; font-size: 14px !important; }
.about-focus { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.about-focus span { padding: 5px 8px; border: 1px solid #356b90; border-radius: 999px; background: rgba(18, 61, 91, .7); color: #9fd9f7; font: 8px 'IBM Plex Mono', monospace; letter-spacing: .35px; }
.about-content { padding: 0 40px 32px; }
.about-content > section { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
.about-content > section + section { border-top: 1px solid #294a64; }
.about-content h3 { margin: 0 0 9px; color: #d7effd; font-size: 13px; }
.about-content p { color: #9eb8c9; font-size: 11px; line-height: 1.75; }
.about-section-number { padding-top: 2px; color: #5598c1; font: 9px 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.about-capabilities ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.about-capabilities li { min-height: 92px; padding: 12px; border: 1px solid #2e5875; border-radius: 7px; background: rgba(14, 44, 65, .72); }
.about-capabilities li strong, .about-capabilities li span { display: block; }
.about-capabilities li strong { color: #d5efff; font-size: 10px; }
.about-capabilities li span { margin-top: 6px; color: #89aabe; font-size: 9px; line-height: 1.55; }
.founder-profile { display: flex; align-items: center; gap: 19px; margin-top: 12px; }
.founder-photo-placeholder,
#founder-photo {
  width: 112px;
  height: 124px;
  flex: 0 0 112px;
  border: 1px solid #4c9bc4;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  background: linear-gradient(145deg, #153e5c, #101b35);
  box-shadow: 0 0 22px rgba(69, 190, 242, .2);
}
.founder-photo-placeholder { display: grid; place-items: center; padding: 10px; text-align: center; color: #9cbad0; font-size: 10px; }
.founder-copy strong { display: block; color: #f0f8fd; font-size: 17px; letter-spacing: -.2px; }
.founder-role { display: block; margin-top: 5px; color: #6fc8f5; font: 9px 'IBM Plex Mono', monospace; letter-spacing: .6px; text-transform: uppercase; }
.founder-copy p { margin-top: 10px; }
.about-use-note { margin-top: 12px !important; padding: 10px 12px; border-left: 2px solid #4b8fb8; background: rgba(17, 53, 78, .65); color: #7fa3b9 !important; font-size: 9px !important; }
.view-actions #spin-3d[aria-pressed="true"] { background: #287dae; color: #fff; }
.three-d:fullscreen {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; border: 0; border-radius: 0;
}
.three-d:fullscreen .view-header { height: 48px; }
.three-d:fullscreen .canvas-wrap { flex: 1 1 auto; }
.three-d:fullscreen .render-control { flex: 0 0 auto; }
body.dragover::after {
  border-color: #73bfff;
  background: #0e2a47ed;
  color: #e0f4ff;
}

/* Compact workspace chrome leaves more vertical room for the four image panes. */
.topbar { height: 106px; padding: 8px 20px 7px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.topbar-primary { width: 100%; min-width: 0; display: flex; align-items: center; gap: 18px; height: 42px; }
.brand { flex: 0 0 auto; font-size: 19px; }
.brand::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: url("assets/brain-pixel-logo-only.png") center / contain no-repeat;
}
.topbar-study { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
.topbar-study .eyebrow { margin: 0; flex: 0 0 auto; font-size: 8px; }
.topbar-study h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.topbar-study h1 span { margin: 0 5px; font-size: 14px; }
.topbar-study h1 small { font-size: 10px; }
.top-right { flex: 0 0 auto; margin: 0; }
.top-right .top-link { margin-left: 0; }
.export-dropdown { position: relative; }
.topbar .toolbar { position: relative; width: 100%; min-width: 0; margin: 0; padding: 3px 0 0; border-top: 1px solid #29455e; }
.topbar .tools { position: absolute; left: 50%; transform: translateX(-50%); min-width: 0; flex-wrap: nowrap; }
.topbar .layout-tools { margin-left: auto; }
.topbar .tool { height: 32px; font-size: 16px; padding: 4px 8px; }
.topbar .tool span { font-size: 10px; }
.topbar .layout-tools { flex: 0 0 auto; }
.toolbar-view-options {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid #29455e;
}
.toolbar-view-options .settings-row {
  margin-top: 0;
  gap: 7px;
  color: #a9bfd0;
  white-space: nowrap;
}
/* Keep slice and surface controls visible without taking image space. */
.viewport { position: relative; }
.slice-control {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: transparent;
  border-top-color: rgba(71, 105, 132, .35);
}
.app-shell { height: calc(100dvh - 64px); min-height: 550px; }
main { padding: 9px 12px 0; }
.viewport-grid { min-height: 400px; gap: 8px; }
.workspace-footer { height: 27px; flex: 0 0 auto; }
#main-title { display: none !important; }
.workspace-footer { display: none !important; }
@media (max-width: 1150px) {
  .topbar .tool span { display: none; }
  .local-processing { display: none; }
  .topbar-study h1 small { display: none; }
}
@media (max-width: 760px) {
  .topbar { height: auto; padding: 8px 12px; gap: 8px; }
  .topbar-primary { height: auto; flex-wrap: wrap; gap: 8px 12px; }
  .topbar-study { order: 3; flex: 1 0 100%; }
  .topbar-study .eyebrow { display: none; }
  .topbar-study h1 { font-size: 14px; }
  .top-right { margin-left: auto; }
  .top-right .icon-button { display: inline-grid; place-items: center; margin: 0; }
  .topbar .toolbar { overflow-x: auto; gap: 8px; }
  .topbar .tools { position: static; transform: none; width: max-content; flex: 0 0 auto; }
  .topbar .layout-tools { margin-left: 0; }
  .topbar .tool span { display: inline; font-size: 9px; }
  .app-shell { height: auto; min-height: 0; }
  main { padding: 8px 10px 0; }
  .viewport-grid { min-height: 0; }
}

/* Single compact top row: study identity, tools, and actions share one bar. */
@media (min-width: 761px) {
  .topbar {
    height: 64px;
    padding: 7px 20px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .topbar-primary { display: contents; }
  .topbar-primary > .brand { order: 0; }
  .topbar-study { order: 1; flex: 1 1 auto; min-width: 150px; }
  .topbar-study h1 small,
  .local-processing { display: none !important; }
  .topbar .toolbar {
    order: 2;
    width: auto;
    flex: 0 1 auto;
    padding: 0;
    border-top: 0;
  }
  .topbar .tools { position: static; transform: none; }
  .topbar .layout-tools { margin-left: 6px; }
  .top-right { order: 3; margin-left: 0; }
}

@media (min-width: 761px) {
  .topbar-study { display: none; }
  .topbar .toolbar {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #4d7897 #17283a;
  }
  .topbar .toolbar::-webkit-scrollbar { height: 5px; }
  .topbar .toolbar::-webkit-scrollbar-track { background: #17283a; }
  .topbar .toolbar::-webkit-scrollbar-thumb { background: #4d7897; border-radius: 5px; }
  .topbar .tools { flex: 0 0 auto; width: max-content; }
  .topbar .layout-tools { flex: 0 0 auto; }
}

@media (max-width: 760px) {
  .about-dialog { width: 94vw; max-height: 92vh; }
  .about-dialog::before { left: 20px; }
  .about-hero { padding: 40px 20px 22px; }
  .about-content { padding: 0 20px 24px; }
  .about-content > section { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 19px 0; }
  .about-capabilities ul { grid-template-columns: 1fr; }
  .founder-profile { align-items: flex-start; gap: 13px; }
  .founder-photo-placeholder, #founder-photo { width: 86px; height: 102px; flex-basis: 86px; }
  .founder-copy strong { font-size: 14px; }
  .folder-button { margin-top: 8px; }
  .series-options .section-label { display: flex; }
  .tractography-panel .display-heading,
  .tractography-panel .field-label,
  .tractography-panel .range-heading,
  .tractography-panel .settings-row,
  .segmentation-panel .display-heading,
  .merge-panel .display-heading,
  .fusion-panel .display-heading,
  .trajectory-panel .display-heading,
  .segmentation-panel .settings-row,
  .merge-panel .settings-row,
  .fusion-panel .settings-row,
  .merge-panel .range-heading,
  .fusion-panel .range-heading,
  .trajectory-panel .settings-row,
  .trajectory-panel .range-heading { display: flex; }
  .tractography-panel .field-label,
  .segmentation-panel .field-label,
  .fusion-panel .field-label { display: block; }
  .tractography-panel .display-heading { margin-top: 0; }
  .segmentation-panel .display-heading { margin-top: 0; }
  .merge-panel .display-heading { margin-top: 0; }
  .fusion-panel .display-heading { margin-top: 0; }
  .tractography-panel .settings-row { margin-top: 14px; }
}