:root {
  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
  color: #153b3f;
  background: #f3f5f2;
  font-synthesis: none;
  --green: #0c6c60;
  --line: #dce5df;
  --muted: #647875;
}
.quality-content {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 0 24px 14px;
}
.quality-average {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.quality-average strong {
  font-size: 35px;
  letter-spacing: -1px;
}
.quality-average progress {
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  appearance: none;
}
.quality-average progress::-webkit-progress-bar {
  background: #e8eeeb;
}
.quality-average progress::-webkit-progress-value {
  background: #718b80;
}
.quality-average progress.good::-webkit-progress-value {
  background: #218263;
}
.quality-average progress.fair::-webkit-progress-value {
  background: #c29b3f;
}
.quality-average progress.poor::-webkit-progress-value {
  background: #ca6951;
}
.quality-devices {
  display: grid;
  gap: 9px;
}
.quality-device {
  background: #f1f7f3;
  border: 1px solid #d9e6dc;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
}
.quality-device strong {
  display: block;
  margin-bottom: 9px;
  overflow-wrap: anywhere;
}
.quality-metrics {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #7a8b85;
}
.metric-good {
  color: #167657;
}
.metric-fair {
  color: #927220;
}
.metric-poor {
  color: #ac5139;
}
.quality-coach {
  margin: 0 24px 10px;
  color: #365a4b;
  font-size: 12px;
}
.quality-note {
  padding: 0 24px 15px;
  margin: 0;
  font-size: 10px;
  color: #7a8d83;
}
.trace-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.trace-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 22px 14px;
  color: #72867b;
  font-size: 11px;
}
.trace-toolbar > div {
  display: flex;
  gap: 8px;
}
.trace-toolbar button {
  font-size: 10px;
  padding: 7px 9px;
  white-space: nowrap;
}
.trace-toolbar button[aria-pressed="true"] {
  background: #e4f2e7;
  border-color: #8bb99a;
}
.eeg-panel:fullscreen {
  padding: 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.eeg-panel:fullscreen #eeg {
  height: auto;
  flex: 1;
  min-height: 200px;
}
.eeg-panel:fullscreen .plot-footer {
  margin-top: 12px;
}
.quality-panel {
  order: -2;
}
.eeg-panel {
  order: -1;
}
#eeg {
  height: 210px;
}
@media (max-width: 850px) {
  .quality-content {
    grid-template-columns: 1fr;
  }
  .quality-average {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .quality-average strong {
    text-align: right;
  }
  .quality-average progress,
  .quality-average .hint {
    grid-column: 1/-1;
  }
  .trace-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .eeg-panel .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  height: 86px;
  padding: 0 5vw;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -1px;
  text-decoration: none;
  color: #153b3f;
}
.brand span {
  color: #0c8b78;
  margin-left: -7px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pill {
  background: #eef5ea;
  border: 1px solid #dce9d3;
  padding: 8px 13px;
  border-radius: 24px;
  font-size: 12px;
}
.version,
.small,
.hint {
  font-size: 12px;
  color: var(--muted);
}
main {
  max-width: 1440px;
  margin: auto;
  padding: 38px 5vw;
}
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.7px;
  color: var(--green);
  margin: 0 0 10px;
}
h1 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -1.4px;
  margin: 0 0 12px;
}
h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}
h3 {
  font-size: 14px;
  margin: 0;
}
p {
  line-height: 1.6;
}
.intro p:last-child {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button {
  border: 1px solid #cfded6;
  border-radius: 8px;
  background: #fff;
  padding: 11px 15px;
  color: #234b47;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover:not(:disabled) {
  background: #eaf3ed;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #5bc8ac;
  outline-offset: 3px;
}
.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.primary:hover:not(:disabled) {
  background: #085448;
}
.danger {
  color: #a44840;
  background: #fff7f4;
  border-color: #eaccc5;
}

.file-button {
  border: 1px solid #cfded6;
  border-radius: 8px;
  background: #fff;
  padding: 11px 15px;
  color: #234b47;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.file-button:hover { background: #eaf3ed; }
.file-button:active { transform: translateY(1px); }
.file-button:focus-within, .file-button:focus-visible { outline: 3px solid #5bc8ac; outline-offset: 3px; }
.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-button {
  background: transparent;
  border: 0;
  font-size: 12px;
}
.full {
  width: 100%;
  margin-top: 10px;
}
#notice {
  border-left: 3px solid #7ba28d;
  background: #eaf0e8;
  color: #3b5c4d;
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 24px;
}
#notice.error,
.warning {
  background: #fff0e8;
  color: #9d4429;
  border-left: 3px solid #cb7250;
}
.warning {
  padding: 14px;
  margin-bottom: 20px;
  font-size: 13px;
}
.workspace {
  display: grid;
  grid-template-columns: 285px 1fr;
  gap: 22px;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.setup {
  padding: 24px;
  align-self: start;
}
.setup h2 {
  margin-bottom: 24px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin: 17px 0 8px;
}
input,
select {
  border: 1px solid #d4dfd9;
  border-radius: 7px;
  background: #fafcf9;
  padding: 10px 11px;
  width: 100%;
  color: #274844;
  font-size: 13px;
  min-height: 40px;
}
.hint {
  line-height: 1.6;
  margin: 10px 0;
}
.separator {
  border-top: 1px solid var(--line);
  margin: 22px 0;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.empty {
  font-size: 12px;
  color: var(--muted);
  padding: 12px 0;
}
.device {
  margin-top: 12px;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 7px;
  font-size: 12px;
}
.device b {
  display: block;
  margin-bottom: 5px;
}
.device span {
  color: var(--muted);
}
.monitor {
  min-width: 0;
  display: grid;
  gap: 20px;
}
.panel-head {
  padding: 20px 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.badge {
  font-size: 11px;
  background: #eef2ef;
  border: 1px solid #dce5df;
  color: #627571;
  border-radius: 20px;
  padding: 6px 10px;
  white-space: nowrap;
}
.badge.active {
  background: #e4f3eb;
  color: #08654b;
  border-color: #b8d9c5;
}
.badge.recording {
  color: #ad3b37;
  background: #ffedeb;
  border-color: #eebdb5;
}
.video-stage {
  margin: 0 16px 16px;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #294c4c, #112e33);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d2e2db;
}
#preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--camera-zoom, 1));
  transform-origin: center center;
  transition: transform .15s ease;
}
#cameraEmpty {
  text-align: center;
  padding: 20px;
}
.camera-symbol {
  border: 1px solid #52716b;
  background: #ffffff08;
  border-radius: 50%;
  font-size: 40px;
  line-height: 74px;
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  color: #a6c4b5;
}
#cameraEmpty h3 {
  font-size: 16px;
  font-weight: 500;
}
#cameraEmpty p {
  font-size: 12px;
  color: #98b1aa;
}
.video-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 13px 18px;
  background: linear-gradient(transparent, #071c2780);
  font-size: 11px;
  color: #d5e5df;
  pointer-events: none;
}
#liveClock {
  font-family: Consolas, monospace;
}
.inline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-weight: 400;
}
.inline select {
  width: 100px;
  min-height: 32px;
  padding: 5px;
  font-size: 11px;
}
#eeg {
  width: 100%;
  height: 155px;
  display: block;
}
.plot-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 22px 18px;
  font-size: 10px;
  color: var(--muted);
}
.transport {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px;
  margin: 22px 0;
}
.transport > div:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
#timer {
  font:
    28px Consolas,
    monospace;
  color: #153b3f;
}
.actions {
  display: flex;
  gap: 10px;
}
.markers,
.sessions,
.technical {
  padding: 24px;
  margin-top: 22px;
}
.marker-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.marker-buttons button {
  font-size: 12px;
  padding: 9px 13px;
}
.custom-marker {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.custom-marker input {
  max-width: 380px;
}
.marker-log {
  font:
    11px Consolas,
    monospace;
  color: var(--muted);
  margin-top: 16px;
  max-height: 90px;
  overflow: auto;
  line-height: 1.9;
}
.session {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.session:first-child {
  margin-top: 18px;
}
.session-title {
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 5px;
}
.session-meta {
  font-size: 11px;
  color: var(--muted);
}
.session-buttons {
  display: flex;
  gap: 8px;
}
.session-buttons button {
  font-size: 11px;
}
.technical {
  font-size: 12px;
  color: var(--muted);
}
summary {
  cursor: pointer;
  color: #30514c;
  font-weight: 600;
}
footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  color: #7b8d86;
  font-size: 11px;
}
code {
  font-size: 11px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  main {
    padding: 26px 24px;
  }
  .workspace {
    grid-template-columns: 245px 1fr;
  }
  .setup {
    padding: 18px;
  }
  .transport {
    align-items: flex-start;
  }
  .transport > div:first-child {
    gap: 10px;
  }
  #storageInfo {
    width: 100%;
  }
  .intro {
    align-items: flex-start;
  }
  .intro > button {
    max-width: 180px;
  }
}
@media (max-width: 720px) {
  header {
    height: 70px;
    padding: 0 20px;
  }
  .version {
    display: none;
  }
  main {
    padding: 24px 16px;
  }
  .intro {
    display: block;
  }
  .intro > button {
    margin-top: 18px;
    max-width: none;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .setup {
    padding: 22px;
  }
  .transport {
    flex-direction: column;
  }
  .actions {
    width: 100%;
  }
  .primary {
    flex: 1;
  }
  .row {
    flex-wrap: wrap;
  }
  .panel-head {
    padding: 16px;
  }
  .panel-head h2 {
    font-size: 15px;
  }
  .session {
    align-items: flex-start;
    flex-direction: column;
  }
  footer {
    gap: 20px;
  }
  .marker-buttons button {
    flex: 1;
  }
  .custom-marker {
    flex-wrap: wrap;
  }
  .plot-footer {
    font-size: 9px;
  }
  .pill {
    font-size: 10px;
  }
}
.header-guide{white-space:nowrap}
.guide-dialog{border:0;padding:0;border-radius:18px;max-width:min(980px,calc(100vw - 32px));width:100%;box-shadow:0 24px 80px #0b2d2d40;background:#fff;color:#153b3f}
.guide-dialog::backdrop{background:#0a252b99;backdrop-filter:blur(3px)}
.guide-card{padding:24px 26px 28px;margin:0}
.guide-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.guide-head h2{margin:.15rem 0 0}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-grid section{background:#f6f9f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.guide-grid h3{margin:.1rem 0 .5rem;font-size:1rem}
.guide-grid p{margin:.45rem 0;line-height:1.45;color:#546d67;font-size:.88rem}
.guide-grid code{font-size:.82em}
@media(max-width:760px){.guide-grid{grid-template-columns:1fr}.header-right .pill{display:none}.guide-card{padding:18px}}

/* Guided facial artefact protocol */
.protocol-panel{padding:24px;margin-top:22px}
.protocol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;margin:16px 0;font-size:12px;color:#49645d}
.protocol-grid span{padding:8px 10px;background:#f6f9f7;border:1px solid var(--line);border-radius:7px}
.protocol-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.protocol-actions .small{margin-left:auto;color:var(--muted)}

.face-check-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;padding:14px;pointer-events:none;background:linear-gradient(0deg,#071c276b 0%,transparent 55%)}
.face-check-overlay[hidden]{display:none!important}
.face-check-overlay-shell{width:min(980px,100%);background:linear-gradient(180deg,#fbfffde8,#f8fbfae0);border:1px solid #c9e1d4;border-radius:18px;box-shadow:0 16px 50px #001d2266;color:#153b3f;overflow:hidden;backdrop-filter:blur(3px)}
.face-check-overlay-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px 8px}
.face-check-kicker{display:block;font-size:.72rem;font-weight:850;letter-spacing:.12em;color:#5a746d}
#faceCheckOverlayStep{font-size:1.1rem}
.face-check-overlay-badge{font-size:.78rem;font-weight:800;padding:7px 11px;border-radius:999px;background:#eef5f2;border:1px solid #d1dfda;color:#41635d;white-space:nowrap}
.face-check-overlay-progress{height:8px;background:#e9efec}.face-check-overlay-progress span{display:block;height:100%;width:0;background:#4b817b;transition:width .15s linear}
.face-check-overlay-body{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;padding:12px 18px}
.face-check-overlay-target{width:90px;height:90px;border-radius:17px;background:#0f423f;color:#fff;display:grid;place-items:center;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:900;box-shadow:inset 0 0 0 1px #ffffff22,0 12px 28px #0c2e2a33}
.face-check-overlay-copy h2{font-size:clamp(1.65rem,3.2vw,2.5rem);line-height:1.07;margin:0 0 10px;font-weight:900}
.face-check-overlay-copy p{font-size:clamp(1rem,1.9vw,1.34rem);line-height:1.35;margin:0 0 10px;color:#35514f;font-weight:600;max-width:58ch}
.face-check-overlay-recognition{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:140px;margin:0 0 9px;padding:8px 18px;border-radius:12px;font-size:clamp(1.2rem,2.7vw,2rem);line-height:1.12;letter-spacing:.055em;font-weight:950;border:2px solid transparent;box-shadow:0 4px 12px #002b2422}
.face-check-overlay-recognition[hidden]{display:none!important}
.face-check-overlay-recognition.is-ok{background:#d7f4e3;color:#125f3d;border-color:#7ecba0}
.face-check-overlay-recognition.is-again{background:#ffead1;color:#884200;border-color:#f1b56a}
.face-check-overlay-recognition.is-improve{background:#fff0d7;color:#884200;border-color:#e9ba68;font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:0}
.face-check-overlay-live{font-size:clamp(.88rem,1.35vw,1rem);font-weight:800;color:#147268}
@media(max-width:860px){.face-check-overlay{padding:10px}.face-check-overlay-body{grid-template-columns:84px 1fr;gap:12px;padding:14px}.face-check-overlay-target{width:84px;height:84px;border-radius:18px;font-size:2.5rem}.face-check-overlay-copy h2{font-size:clamp(1.3rem,5vw,2rem)}.face-check-overlay-copy p{font-size:clamp(.92rem,3vw,1.08rem)}.face-check-overlay-top{padding:12px 14px 8px}}
@media(max-width:560px){.face-check-overlay-body{grid-template-columns:1fr;justify-items:center;text-align:center}.face-check-overlay-copy p{max-width:none}.face-check-overlay-top{flex-wrap:wrap}.face-check-overlay-badge{order:3}}

.protocol-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:#071c27a8;backdrop-filter:blur(2px);padding:24px;text-align:center}
.protocol-overlay-card{width:min(680px,92%);background:#fafffbed;border:1px solid #c9e1d4;border-radius:16px;padding:24px 28px;color:#153b3f;box-shadow:0 16px 50px #001d2266}
.protocol-overlay-card h3{font-size:clamp(25px,4vw,48px);margin:4px 0 10px;letter-spacing:.01em}
.protocol-overlay-card p{margin:7px 0;line-height:1.45}
.protocol-cue{font-size:11px;font-weight:800;letter-spacing:.14em;color:#3e7c6d}
.protocol-speech{font-size:clamp(16px,2vw,24px);line-height:1.45;margin:16px 0;padding:14px 16px;background:#fff;border-left:4px solid #4d9b85;border-radius:8px;color:#183b3c;font-style:normal}
#protocolCountdown{display:block;font:700 clamp(28px,5vw,56px)/1 Consolas,monospace;color:#0b6b5d;margin-top:14px}
@media(max-width:720px){.protocol-grid{grid-template-columns:1fr}.protocol-actions .small{width:100%;margin-left:0}.protocol-overlay-card{padding:18px}.protocol-speech{font-size:15px}}

.spontaneous-panel{padding:24px;margin-top:22px}

/* Personalized in-ear classifier */
.live-model-panel{padding:24px;margin-top:22px}
.live-model-grid{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(360px,1fr);gap:18px;margin:16px 0}
.live-prediction-card{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:170px;border:1px solid var(--line);border-radius:14px;background:#f7fbf9;padding:18px;text-align:center;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.live-prediction-card strong{font-size:clamp(25px,4vw,46px);letter-spacing:.02em;margin:8px 0;color:#0d6d60}
.live-prediction-status{margin-top:9px;font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--green)}
.live-prediction-status:empty{display:none}
.live-prediction-card.is-target{border:2px solid var(--green);background:#eaf7f2;box-shadow:0 0 0 4px #0c6c6014,0 12px 28px #0c6c6017}
.live-prediction-card.is-target .live-prediction-status{font-size:clamp(13px,1.8vw,18px)}
.live-prediction-card.is-target strong{font-size:clamp(32px,5vw,58px);margin-top:5px}
.live-prediction-card.is-other{border-color:#d7c58f;background:#fbf8ef}
.live-prediction-card.is-other strong{color:#7c6427}
.live-prediction-card.is-unknown{background:#f5f7f6;border-color:#dfe5e2}
.live-prediction-card.is-unknown strong{color:#687b75}
@keyframes live-target-pulse{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
.live-prediction-card.target-pulse{animation:live-target-pulse .62s ease-out}
.live-probabilities{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.live-probabilities.focus-mode{grid-template-columns:1fr;align-content:start}
.live-probabilities.focus-mode .live-prob-row{font-size:12px;padding:7px 9px;border:1px solid #e0e8e4;border-radius:9px;background:#fafcfb}
.live-prob-row{display:grid;grid-template-columns:minmax(118px,1fr) minmax(100px,1.4fr) 38px;align-items:center;gap:8px;font-size:11px;color:#4f6962}
.live-prob-row progress{width:100%;height:9px}
@media(prefers-reduced-motion:reduce){.live-prediction-card{transition:none}.live-prediction-card.target-pulse{animation:none}}
@media(max-width:820px){.live-model-grid{grid-template-columns:1fr}.live-probabilities{grid-template-columns:1fr}}

/* v0.6.2 portable session transfer */
.session-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }


/* v0.6.4 — persistent Session / Review navigation */
.mode-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7faf8;
}
.mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 9px 14px;
  border-radius: 7px;
  color: #45635f;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.mode-tab:hover:not(.disabled) { background: #e8f2ed; }
.mode-tab.active {
  background: #0c6c60;
  color: #fff;
}
.mode-tab.disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Make the acquisition action unmistakable. */
.record-panel {
  margin-top: 22px;
  padding: 18px 22px;
  border: 2px solid #7eb7a5;
  background: linear-gradient(135deg, #e8f5ef 0%, #f7fbf8 100%);
  box-shadow: 0 10px 28px rgba(20, 83, 70, .10);
}
.record-panel #start {
  min-width: 230px;
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 800;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(12, 108, 96, .20);
}
.record-panel #stop {
  padding: 15px 20px;
  font-size: 15px;
}

@media (max-width: 900px) {
  header {
    height: auto;
    min-height: 86px;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .mode-nav { order: 3; width: 100%; }
  .mode-tab { flex: 1; }
  .header-right { gap: 10px; }
  .header-right .pill { display: none; }
  .record-panel { align-items: stretch; }
  .record-panel .actions { width: 100%; }
  .record-panel #start { min-width: 0; flex: 1; }
}

.record-panel .record-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.record-panel .record-copy .eyebrow { margin: 0; }
.record-status-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (min-width: 901px) {
  .record-panel {
    position: sticky;
    top: 12px;
    z-index: 25;
  }
}

.custom-behavior-grid{display:grid;grid-template-columns:3fr repeat(3,minmax(110px,1fr));gap:12px;margin:14px 0}.custom-behavior-grid label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:#526961}.custom-behavior-grid input,.custom-behavior-grid select{width:100%}@media(max-width:1000px){.custom-behavior-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.custom-behavior-grid{grid-template-columns:1fr}}

@media(max-width:720px){.video-stage.portrait-video{max-height:72vh;background:#061c26}}

.session-protocol { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:3px 0 6px; max-width:min(780px,70vw); }
.session-protocol-kind { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; border:1px solid #cfe1da; border-radius:999px; background:#f1f8f5; color:#245f56; font-size:10px; font-weight:700; letter-spacing:.01em; }
.session-protocol-behaviors { color:#315c55; font-size:11px; line-height:1.45; }
.session-description{flex:1;min-width:0}.session-model-select{display:inline-flex;align-items:center;gap:5px;align-self:center;color:#315c55;font-size:10px;font-weight:700;cursor:pointer}.session-model-select input{width:17px;height:17px;accent-color:#0b7d70}.session-model-select span{white-space:nowrap}@media(max-width:760px){.session-model-select{align-self:flex-start}}

/* v0.6.51 live multiclass / focus decision controls */
.live-decision-controls{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:14px 0 4px}
.live-decision-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#49665f}
.live-decision-controls select{min-height:38px;padding:7px 9px;border:1px solid #c8d9d3;border-radius:9px;background:#fff;color:#173b3f}
.live-decision-controls input[type="range"]{width:100%}
@media(max-width:900px){.live-decision-controls{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.live-decision-controls{grid-template-columns:1fr}}

/* v0.6.51: native model-file control, actual input owns the click for browser reliability. */
.native-file-button{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;min-height:42px;padding:0 18px;border:1px solid #cbd9d2;border-radius:12px;background:#fff;font-weight:600;}
.native-file-button input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:100px;}
.live-model-message{margin:.55rem 0 0;color:#47655d;}

/* v0.6.58 — explicit Focus-state status colors */
.live-prediction-card.is-other .live-prediction-status{color:#7c6427}
.live-prediction-card.is-unknown .live-prediction-status{color:#687b75}


/* v0.7.22 — recording-control hierarchy: spontaneous → in-ear, calibrations secondary */
.record-panel{display:grid;grid-template-columns:minmax(220px,.86fr) minmax(560px,1.75fr) auto;align-items:center;gap:18px}
.record-panel .record-mode-shortcuts{min-width:0;display:flex;flex-direction:column;gap:7px;padding:2px 0}
.record-mode-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#55736b}
.record-mode-primary{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(230px,1fr);gap:8px}
.record-mode-secondary{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px}
.record-mode-secondary-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#78908a;white-space:nowrap}
.record-mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(145px,1fr));gap:6px}
.record-mode-button{min-height:32px;padding:6px 9px;border-radius:9px;background:#fff;border-color:#c9dbd4;color:#285d55;font-size:10px;line-height:1.2;text-align:left}
.record-mode-button.record-mode-main{min-height:50px;padding:11px 14px;font-size:13px;font-weight:800;background:#eef7f4;border-color:#a9cfc4;color:#175e55}
.record-mode-button.record-mode-live{min-height:46px;padding:10px 13px;font-size:12px;font-weight:750;background:#f7faf9;border-color:#bdd4cd;color:#285d55}
.record-mode-button:hover:not(:disabled){background:#edf7f2}
.record-mode-button.record-mode-main:hover:not(:disabled){background:#e3f3ee}
.record-mode-button.active,.record-mode-button[aria-pressed="true"]{background:#0c6c60;border-color:#0c6c60;color:#fff;box-shadow:0 4px 12px rgba(12,108,96,.18)}
.record-panel #recordModeHint{color:#6b8079;line-height:1.35}
@media(max-width:1260px){.record-panel{grid-template-columns:minmax(220px,1fr) minmax(470px,1.5fr)}.record-panel .actions{grid-column:1/-1;justify-content:flex-end}.record-mode-secondary{grid-template-columns:1fr}.record-mode-buttons{grid-template-columns:repeat(3,minmax(130px,1fr))}}
@media(max-width:820px){.record-panel{grid-template-columns:1fr}.record-panel .record-mode-shortcuts,.record-panel .actions{grid-column:auto}.record-mode-primary{grid-template-columns:1fr 1fr}.record-mode-buttons{grid-template-columns:1fr 1fr}.record-mode-secondary-label{grid-column:1/-1}}
@media(max-width:560px){.record-mode-primary,.record-mode-buttons{grid-template-columns:1fr}.record-mode-secondary{grid-template-columns:1fr}}

/* Cognitive reading calibration · v0.7.5 */
.cognitive-shortcut{}
.cognitive-calibration-overlay{position:fixed;inset:0;z-index:220;background:#071a1be8;display:grid;place-items:center;padding:18px}
.cognitive-calibration-shell{width:min(1180px,100%);height:min(900px,calc(100vh - 36px));background:#fff;border-radius:20px;box-shadow:0 28px 90px #0008;display:grid;grid-template-rows:auto 7px 1fr auto;overflow:hidden}
.cognitive-calibration-top,.cognitive-calibration-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}.cognitive-calibration-top{border-bottom:1px solid #e0e7e6}.cognitive-calibration-top>div:first-child{display:grid;gap:3px}.cognitive-calibration-top strong{font-size:1.25rem}.cognitive-kicker{font-size:.7rem;font-weight:850;letter-spacing:.12em;color:#607773}.cognitive-time{display:grid;text-align:right;gap:2px;font-variant-numeric:tabular-nums}.cognitive-time span{font-size:.75rem;color:#6b7b79}.cognitive-progress{height:7px;background:#e8eeed}.cognitive-progress span{display:block;height:100%;width:0;background:#4b817b;transition:width .2s linear}.cognitive-task{min-height:0;position:relative;overflow:hidden;background:#fbfdfd}.cognitive-simple-card{height:100%;display:grid;place-items:center;align-content:center;text-align:center;padding:30px}.cognitive-simple-card h2{font-size:clamp(1.5rem,3vw,2.6rem);margin:0 0 10px}.cognitive-simple-card p{font-size:1.05rem;max-width:680px;color:#58706c}.cognitive-fixation{font-size:3rem;color:#1e6e66;margin-top:24px}.cognitive-gaze-stage{position:absolute;inset:0;background:#fbfdfd}.cognitive-gaze-target{position:absolute;width:28px;height:28px;border:7px solid #1b6e65;border-radius:50%;transform:translate(-50%,-50%);left:50%;top:50%;box-shadow:0 0 0 10px #1b6e6517;transition:left .35s ease,top .35s ease}.cognitive-reading-stage{height:100%;display:grid;grid-template-rows:auto 1fr;min-height:0}.cognitive-reading-head{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;background:#eef6f5;border-bottom:1px solid #dce6e4;color:#49655f}.cognitive-reading-head span{font-weight:850;letter-spacing:.1em;font-size:.72rem}.cognitive-reading-head small{font-size:.78rem}.cognitive-reading-stage article{overflow:auto;max-width:830px;width:100%;margin:0 auto;padding:28px 34px 60px;font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.76;color:#172e2c;scroll-behavior:smooth}.cognitive-reading-stage article h2{font-family:system-ui,sans-serif;font-size:1.55rem;margin:0 0 1.2rem}.cognitive-reading-stage article p{margin:0 0 1.2em}.cognitive-quiz-stage{height:100%;display:grid;place-items:center;align-content:center;padding:30px;text-align:center}.cognitive-quiz-stage h2{max-width:820px;font-size:clamp(1.3rem,2.5vw,2rem)}.cognitive-quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(820px,100%);margin:20px auto}.cognitive-quiz-answers button{padding:15px;border:1px solid #c8d7d4;border-radius:12px;background:#fff;font-size:1rem;cursor:pointer}.cognitive-quiz-answers button:hover{background:#eef7f5}.cognitive-calibration-bottom{border-top:1px solid #e0e7e6;background:#f8fbfa;color:#59716c}.cognitive-probe{position:absolute;inset:0;background:#0b211fb8;display:grid;place-items:center;padding:20px;z-index:4}.cognitive-probe-card{width:min(680px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 24px 80px #0006;text-align:center}.cognitive-probe-card h2{font-size:1.5rem}.cognitive-probe-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0 8px}.cognitive-probe-scale button{padding:18px 5px;border-radius:12px;border:1px solid #bdcfcb;background:#f8fbfa;font-weight:900;font-size:1.1rem;cursor:pointer}.cognitive-probe-scale button:hover{background:#e7f3f0}.cognitive-probe-anchors{display:flex;justify-content:space-between;font-size:.8rem;color:#667c77}.cognitive-calibration-overlay[hidden],.cognitive-gaze-stage[hidden],.cognitive-reading-stage[hidden],.cognitive-quiz-stage[hidden],.cognitive-probe[hidden]{display:none!important}
@media(max-width:700px){.cognitive-calibration-overlay{padding:0}.cognitive-calibration-shell{height:100vh;border-radius:0}.cognitive-reading-stage article{padding:20px 18px 50px;font-size:1.03rem}.cognitive-reading-head{display:block}.cognitive-reading-head small{display:block;margin-top:3px}.cognitive-quiz-answers{grid-template-columns:1fr}.cognitive-calibration-bottom{padding:10px 12px}.cognitive-calibration-top{padding:12px}.cognitive-time strong{font-size:.9rem}}

/* v0.7.9 configurable long-session recording */
.session-duration-control{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;font-weight:700;color:#526f68;white-space:nowrap}
.session-duration-control select{height:30px;padding:3px 28px 3px 8px;border:1px solid #cfe0d9;border-radius:8px;background:#fff;color:#173f43;font:inherit;font-weight:700}
@media(max-width:820px){.session-duration-control{white-space:normal;flex-wrap:wrap}}

/* v0.7.29 — two-condition Single Cognitive Calibration overlay */
.single-cognitive-overlay[hidden]{display:none!important}
.single-cognitive-overlay{position:fixed;inset:0;background:#08141d;z-index:9999;color:#fff;display:grid;place-items:center;padding:24px}
.single-cognitive-task{width:min(760px,100%);min-height:75vh;display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;text-align:center;gap:18px}
.single-cognitive-kicker{letter-spacing:.2em;font-size:.8rem;color:#a0c2c0}
.single-cognitive-cross{font-family:Arial,sans-serif;font-size:8rem;line-height:1;font-weight:300;color:white}
.single-cognitive-task h2{font-size:clamp(1.6rem,4vw,2.6rem);color:white}
.single-cognitive-task strong{font-size:2rem;font-variant-numeric:tabular-nums}
.single-cognitive-task button{align-self:center}

/* v0.7.30: webcam-only personalized facial calibration */
.face-check-panel{border:1px solid var(--line, #bccbd1);display:grid;gap:12px}
.face-check-panel[hidden],.face-calibration-guide[hidden]{display:none!important}
.face-feedback{border-radius:10px;background:rgba(70,125,155,.09);padding:12px;font-weight:650;line-height:1.45;margin:0}
.face-feedback.warning{background:rgba(210,143,58,.14)}
.face-calibration-guide{display:flex;align-items:center;gap:16px;background:rgba(65,111,130,.08);padding:12px;border-radius:11px}
.face-calibration-target{min-width:64px;height:64px;background:#12202b;color:white;border-radius:8px;display:grid;place-items:center;font-size:45px;line-height:1}
.face-calibration-progress{height:7px;background:rgba(140,153,160,.25);border-radius:99px;overflow:hidden}
.face-calibration-progress span{display:block;width:0%;height:100%;background:#138577;transition:width .18s}

.face-feedback-live{font-size:13px;font-weight:700;color:var(--accent,#197d6f);min-height:20px}

/* v0.7.34 · prominent face camera with compact non-obscuring instructions */
body.face-check-mode{overflow:hidden}
body.face-check-mode::before{content:"";position:fixed;inset:0;background:rgba(4,25,31,.78);z-index:1000}
.monitor.face-check-running .camera-panel{position:fixed;inset:3vh 3vw;z-index:1001;margin:0;padding:0;display:flex;flex-direction:column;min-height:0;max-height:94vh;background:#f7fbf9;box-shadow:0 26px 90px #001920aa;border:1px solid #a9c2b8;border-radius:18px;overflow:hidden}
.monitor.face-check-running .camera-panel>.panel-head{flex:none;min-height:72px;padding:12px 24px}
.monitor.face-check-running .camera-panel>.video-stage{flex:1;min-height:0;max-height:none;margin:0 12px 12px;width:auto;aspect-ratio:auto!important;border-radius:12px}
.monitor.face-check-running .camera-panel #preview{object-fit:contain}
.face-camera-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.face-check-video-stop{font-size:14px;font-weight:800;padding:10px 16px;border:1px solid #aabfba;border-radius:10px;background:#edf6f2;color:#174b45;cursor:pointer}
.face-check-video-stop[hidden]{display:none!important}
.face-check-video-stop:hover{background:#d9ede4}
.monitor.face-check-running .face-check-overlay{align-items:flex-end;justify-content:flex-end;padding:16px;background:none}
.monitor.face-check-running .face-check-overlay-shell{width:min(430px,43%);background:#f9fff2ed;border-radius:15px;box-shadow:0 14px 35px #001c2590;backdrop-filter:blur(3px)}
.monitor.face-check-running .face-check-overlay-top{padding:8px 14px 5px}
.monitor.face-check-running .face-check-overlay-body{grid-template-columns:60px 1fr;gap:10px;padding:9px 13px}
.monitor.face-check-running .face-check-overlay-target{width:60px;height:60px;font-size:2.2rem;border-radius:12px}
.monitor.face-check-running .face-check-overlay-copy h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:5px}
.monitor.face-check-running .face-check-overlay-copy p{font-size:clamp(.91rem,1.3vw,1.06rem);line-height:1.22;margin-bottom:6px}
.monitor.face-check-running .face-check-overlay-live{font-size:.76rem;line-height:1.15}
.monitor.face-check-running .face-check-overlay-recognition{min-width:94px;font-size:1.25rem;margin:0 0 6px;padding:5px 8px}
.monitor.face-check-running .face-check-overlay-progress{height:5px}
.monitor.face-check-running .face-check-overlay-badge{font-size:.68rem;padding:4px 7px}
.monitor.face-check-running .face-check-kicker{font-size:.61rem}
.monitor.face-check-running .face-check-overlay-top strong{font-size:.83rem}
.monitor.face-check-running .video-footer{z-index:4;max-width:55%;border-radius:0 14px 0 0}
.face-check-overlay-recognition.is-skipped{background:#eeeef2;color:#4c5267;border-color:#bfc5cf}
@media(max-width:720px){
  .monitor.face-check-running .camera-panel{inset:1vh 1vw;max-height:98vh;border-radius:12px}
  .monitor.face-check-running .camera-panel>.panel-head{padding:8px 10px;min-height:62px}
  .monitor.face-check-running .camera-panel>.video-stage{margin:0 6px 6px;min-height:0}
  .monitor.face-check-running .face-check-overlay{padding:7px}
  .monitor.face-check-running .face-check-overlay-shell{width:min(340px,85%)}
  .monitor.face-check-running .face-check-overlay-body{grid-template-columns:42px 1fr;gap:8px;padding:8px}
  .monitor.face-check-running .face-check-overlay-target{width:42px;height:42px;font-size:1.55rem}
  .monitor.face-check-running .face-check-overlay-copy h2{font-size:1.3rem}
  .monitor.face-check-running .face-check-overlay-copy p{font-size:.82rem}
  .monitor.face-check-running .face-check-overlay-live{font-size:.68rem}
}

/* v0.7.35 · persistent calibrated profile status and clear final confirmation */
.face-calibration-status{display:inline-flex;align-items:center;min-height:36px;border-radius:999px;padding:7px 12px;font-size:.83rem;font-weight:800;border:1px solid #d3ddd7;background:#f2f5f2;color:#64746e;line-height:1.3}
.face-calibration-status.is-saved{background:#e0f3e9;border-color:#9cccb5;color:#0c6a4a}
.face-calibration-status.is-partial{background:#ecf4e9;border-color:#bbd0ad;color:#416c31}
.face-check-completion{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:#092b2bc9;padding:24px;pointer-events:auto;backdrop-filter:blur(3px)}
.face-check-completion[hidden]{display:none!important}
.face-check-completion-card{width:min(570px,96%);max-height:90%;overflow:auto;text-align:center;padding:clamp(20px,3vw,40px);background:#f9fffc;border:2px solid #a1cfb4;color:#183c38;border-radius:20px;box-shadow:0 25px 70px #001c2266}
.face-check-completion-icon{width:68px;height:68px;display:grid;place-items:center;font-size:2.6rem;font-weight:900;margin:0 auto 12px;border-radius:50%;background:#dcf2e4;color:#147451}
.face-check-completion-card.is-incomplete{border-color:#edc999}
.face-check-completion-card.is-incomplete .face-check-completion-icon{background:#fff0d9;color:#9a650a}
.face-check-completion-card h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:8px auto 10px}
.face-check-completion-count{font-weight:900;color:#146d4d;font-size:clamp(1.25rem,2.4vw,1.85rem);margin:12px 0}
.face-check-completion-details{font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.45;color:#4d6860;margin:12px auto 22px}
.face-check-completion-card button{font-size:1rem;padding:13px 22px;min-height:48px;cursor:pointer}
@media(max-width:720px){.face-check-completion{padding:8px}.face-calibration-status{width:100%;justify-content:center}}

/* v0.7.40 — recording control fits inside the panel at all widths */
.record-panel{grid-template-columns:minmax(215px,.8fr) minmax(0,1.8fr);align-items:start;column-gap:20px;row-gap:16px}
.record-panel .record-copy,.record-panel .record-mode-shortcuts,.record-panel .actions{min-width:0}
.record-panel .record-mode-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
.record-panel .record-mode-secondary{grid-template-columns:auto minmax(0,1fr)}
.record-panel .record-mode-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
.record-panel .record-mode-button{min-width:0;overflow-wrap:anywhere;white-space:normal}
.record-panel .actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(190px,1.15fr) minmax(155px,.8fr) minmax(175px,1fr) minmax(90px,.45fr);align-items:center;gap:10px;width:100%;max-width:100%;justify-content:stretch}
.record-panel .actions > *{box-sizing:border-box;min-width:0;max-width:100%;width:100%}
.record-panel #start{min-width:0;padding:14px 12px}
.record-panel #stop{min-width:0;padding:14px 12px;white-space:nowrap}
.record-panel #faceCheck{white-space:normal}
.record-panel .face-calibration-status{white-space:normal;justify-content:center;text-align:center}
.record-mode-planned,.record-mode-planned:disabled{background:#f3f6f5;color:#718780;border-color:#e0e8e4;opacity:1;cursor:not-allowed}
@media(max-width:1240px){.record-panel{grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr)}.record-panel .record-mode-secondary{grid-template-columns:1fr}.record-panel .record-mode-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.record-panel{grid-template-columns:minmax(0,1fr)}.record-panel .actions{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}.record-panel .record-mode-primary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.record-panel .record-mode-primary,.record-panel .record-mode-buttons{grid-template-columns:1fr}.record-panel .actions{grid-template-columns:1fr 1fr}.record-panel .actions #start{grid-column:1/-1}.record-panel .actions #stop{grid-column:2}.record-panel .actions .face-calibration-status{grid-column:1/-1;grid-row:3}.record-panel .actions #faceCheck{grid-column:1;grid-row:2}}
/* Red target for Focus calibration; otherwise preserve existing 8-cycle protocol. */
.single-cognitive-cross{color:#fb454f;text-shadow:0 0 20px rgba(251,69,79,.25)}
.planned-cognitive-task{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #e1eae6}
.planned-cognitive-task button:disabled{font-size:.83rem;border:1px solid #d9e5df;background:#f2f6f4;color:#69837a;opacity:1;cursor:not-allowed;border-radius:9px;padding:10px 12px}

/* v0.7.52 — Face-calibration-sized cognitive experiment viewer. */
.single-cognitive-overlay{padding:clamp(8px,2vh,20px);background:#10222ac9}
.single-cognitive-task{width:min(980px,98vw);height:min(900px,96vh);min-height:0;max-height:96vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:0;text-align:left;background:#f9fbfa;border:1px solid #bbd2ca;border-radius:19px;box-shadow:0 25px 75px #071d2477;overflow:hidden;color:#173d3c}
.focus-task-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 22px;background:#edf5f1;border-bottom:1px solid #d1e0da}
.single-cognitive-task .single-cognitive-kicker{color:#35655d;letter-spacing:.1em;font-size:.75rem}
#singleCognitiveOverlayStep{font-size:.93rem;font-weight:750}
.single-cognitive-task #singleCognitiveCountdown{font-size:1.4rem;color:#0f6356;min-width:55px;text-align:right}
.focus-task-stage{min-height:0;display:grid;place-items:center;overflow:hidden;padding:12px;background:#969696;position:relative}
.focus-task-stage > *{position:relative;z-index:1}
.single-cognitive-task[data-phase="eyes_closed_rest"] .focus-task-stage{background:#292f34;color:#f2f6f4}
.single-cognitive-task[data-phase="transition"] .focus-task-stage,.single-cognitive-task[data-phase="prepare"] .focus-task-stage{background:#e1ebe7}
.single-cognitive-task[data-phase="feedback"] .focus-task-stage{background:#969696}
.focus-stage-message{color:#273b39;text-align:center;font-size:clamp(1.15rem,2.7vw,2rem);font-weight:650;max-width:23ch}
.single-cognitive-task[data-phase="eyes_closed_rest"] .focus-stage-message{color:#f1f4f4}
.focus-search-grid{width:min(100%,67vh,670px);height:auto;max-height:100%;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(var(--grid-size,16),minmax(0,1fr));grid-template-rows:repeat(var(--grid-size,16),minmax(0,1fr));align-items:stretch;justify-items:stretch;gap:0;user-select:none;overflow:hidden;pointer-events:none;isolation:isolate}
.focus-search-grid[hidden],.focus-stage-message[hidden]{display:none!important}
.focus-search-glyph{display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;font-weight:750;font-size:var(--focus-glyph,22px);line-height:1;position:relative}
.focus-search-glyph[data-color="green"]{color:#087d2a}.focus-search-glyph[data-color="red"]{color:#df2025}
.focus-search-glyph.is-reveal::after{content:"";position:absolute;inset:4%;border:3px solid #0a4cda;border-radius:50%;box-shadow:0 0 0 2px #fff;pointer-events:none}
.focus-task-bottom{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#f8fbfa;border-top:1px solid #d1e0da}
.single-cognitive-task .focus-task-bottom h2{font-size:clamp(.95rem,1.55vw,1.18rem);color:#173d3c;line-height:1.3;margin:0;flex:1}
#singleCognitiveNext{color:#577a74;font-size:.78rem;max-width:25ch}
.single-cognitive-task .focus-task-bottom button{flex:none;white-space:nowrap}
@media(max-width:680px){.focus-task-header{padding:10px;flex-wrap:wrap}.focus-task-bottom{flex-wrap:wrap;padding:10px}.focus-search-grid{width:min(100%,58vh,90vw)}#singleCognitiveNext{display:none}}

/* v0.7.53 — full-area Eyes-open rest stimulus, independent of text content. */
.single-cognitive-task{width:min(1180px,calc(100vw - 28px));height:min(900px,calc(100dvh - 28px));grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.single-cognitive-task .focus-task-stage{box-sizing:border-box;width:100%;height:100%;min-height:0;grid-column:1;justify-self:stretch;align-self:stretch}
.single-cognitive-task[data-phase="eyes_open_rest"] .focus-task-stage{background:#1b3341;padding:0;}
.single-cognitive-task[data-phase="eyes_open_rest"] .focus-task-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(7,21,28,.08),rgba(7,21,28,.08)),url("focus_relax_landscape.png");background-size:cover;background-position:center center;background-repeat:no-repeat;pointer-events:none;z-index:0}
.single-cognitive-task[data-phase="eyes_open_rest"] .focus-stage-message{display:none!important}
@media(max-width:700px){.single-cognitive-task{height:100dvh;width:100vw;max-height:100dvh;border-radius:0}}

/* v0.7.54 — Focus difficulty stays next to the recording shortcut. */
.focus-difficulty-control{display:flex;flex-direction:column;gap:5px;padding:9px 11px;margin:0 0 3px;border:1px solid #c5ded5;border-radius:10px;background:#f2f9f6;font-size:.77rem;font-weight:700;color:#27534d;max-width:100%;}
.focus-difficulty-control select{width:100%;min-width:0;padding:7px 10px;font-size:.86rem;font-weight:650;border:1px solid #accfc3;border-radius:7px;background:#fff;color:#193e3e;}

@media(min-width:521px){.record-panel .focus-difficulty-control{grid-column:span 2;}}

/* v0.7.55 — reduce face calibration footprint, highlight the Focus workflow. */
.record-panel .calibration-groups{min-width:0;display:grid;gap:9px}
.record-panel .behavior-calibration-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.record-panel .behavior-calibration-row .record-mode-button{font-size:11px;min-height:35px}
.record-panel .cognitive-calibration-group{min-width:0;background:linear-gradient(105deg,#edf4ff,#f6f1ff);border:1px solid #aabaf0;border-left:4px solid #6054bd;border-radius:13px;padding:11px 13px;box-shadow:0 3px 11px rgba(84,76,153,.06)}
.record-panel .cognitive-calibration-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px 12px;margin-bottom:8px}
.record-panel .cognitive-calibration-title strong{color:#4e429f;font-size:12px;letter-spacing:.08em}
.record-panel .cognitive-calibration-title span{color:#6f659d;font-size:11px}
.record-panel .cognitive-calibration-controls{display:grid;grid-template-columns:minmax(195px,1.3fr) minmax(140px,.85fr) minmax(150px,.9fr);align-items:stretch;gap:8px}
.record-panel .cognitive-calibration-controls .record-mode-focus{min-height:51px;font-size:13px;font-weight:850;color:#403593;background:#ebe7ff;border:2px solid #8f82dd;padding:10px 13px;box-shadow:0 2px 9px rgba(84,76,153,.07)}
.record-panel .cognitive-calibration-controls .record-mode-focus:hover:not(:disabled){background:#ddd4ff;color:#30267f}
.record-panel .cognitive-calibration-controls .record-mode-focus.active,.record-panel .cognitive-calibration-controls .record-mode-focus[aria-pressed="true"]{background:#5c4dad;color:#fff;border-color:#4c3ea0}
.record-panel .cognitive-calibration-controls .focus-difficulty-control{grid-column:auto;margin:0;padding:5px 8px;gap:3px;background:#fff;border-color:#b9b1e5;font-size:10px;color:#4d418e}
.record-panel .cognitive-calibration-controls .focus-difficulty-control select{padding:5px 7px;font-size:11px;border-color:#c3bde4}
.record-panel .cognitive-calibration-controls .record-mode-planned{min-height:48px;font-size:10.5px;color:#77699c;background:#f5f1ff;border-color:#ddd4f6}
.record-panel .actions{grid-template-columns:minmax(180px,1.45fr) minmax(108px,.55fr) minmax(150px,.8fr) minmax(88px,.43fr)}
.record-panel .actions #faceCheck{padding:8px 10px;min-height:36px;font-size:11px;font-weight:700;border-radius:9px;white-space:nowrap}
.record-panel .actions .face-calibration-status{min-height:31px;padding:5px 9px;font-size:11px;line-height:1.2;letter-spacing:0;box-shadow:none}
@media(max-width:1230px){.record-panel .cognitive-calibration-controls{grid-template-columns:minmax(170px,1.2fr) minmax(120px,.8fr)}.record-panel .cognitive-calibration-controls .record-mode-planned{grid-column:1/-1;min-height:34px}}
@media(max-width:750px){.record-panel .cognitive-calibration-controls{grid-template-columns:1fr 1fr}.record-panel .cognitive-calibration-controls .record-mode-focus{grid-column:1/-1}.record-panel .cognitive-calibration-controls .record-mode-planned{grid-column:1/-1}}
@media(max-width:520px){.record-panel .behavior-calibration-row{grid-template-columns:1fr}.record-panel .actions{grid-template-columns:1fr 1fr}.record-panel .actions #faceCheck{white-space:normal}}

/* The protocol remains visually identifiable before recording enables it. */
.record-panel .record-mode-focus:disabled{opacity:1;filter:none;cursor:not-allowed;background:#eae5fa;color:#5b4ca7;border-color:#b1a7df;}
.record-panel .record-mode-focus:focus-visible{outline:3px solid #7a64dc;outline-offset:2px;}

/* v0.7.56 — three-level hierarchy approved from the recording-control mock.
   Highest priority: recording/camera, then two primary modes, then compact calibrations. */
.record-panel {
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;overflow:visible;border:1px solid #c7d6e9;border-radius:18px;
  background:#fff;box-shadow:0 9px 25px rgba(24,43,78,.09);
}
.record-panel .dw-record-top {display:flex;flex-direction:column;gap:12px;padding:19px 22px 21px;background:#fff;border-radius:18px 18px 0 0;min-width:0}
.dw-record-top-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dw-record-top-heading .eyebrow{color:#45308c;margin:0;font-size:12px;letter-spacing:.11em}
.dw-record-top-heading #storageInfo{color:#697b89;font-size:11px}
.record-panel .actions.dw-record-actions{
  grid-column:auto;display:grid;grid-template-columns:minmax(200px,1.65fr) minmax(125px,.85fr) minmax(155px,1fr) minmax(125px,.8fr) minmax(90px,.55fr) minmax(72px,.38fr);
  align-items:center;gap:10px;width:100%;max-width:100%;justify-content:stretch;
}
.record-panel .actions.dw-record-actions > * {box-sizing:border-box;min-width:0;width:100%;max-width:100%}
.record-panel #start{padding:15px 16px;min-width:0;min-height:58px;font-size:18px;letter-spacing:-.02em;background:#087d5a;border-color:#087d5a;box-shadow:0 5px 13px rgba(8,125,90,.20);border-radius:12px}
.record-panel #start:disabled{background:#7bb8a7;border-color:#7bb8a7;color:#fff;opacity:.8}
.record-panel #faceCheck{min-height:51px;padding:11px 8px;font-size:12px;font-weight:750;border:1px solid #d8d8ea;color:#35276c;background:#fff}
.record-panel .face-calibration-status{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.4;padding:7px 9px;background:#edf8f3;border-color:#cbe5d7;box-shadow:none}
.record-panel .session-duration-control{display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:11px;font-weight:700;margin:0;padding:0;color:#34455a;white-space:nowrap}
.record-panel .session-duration-control select{width:100%;min-width:0;min-height:38px;padding:7px 9px;background:#fff;border:1px solid #d9dceb;border-radius:9px;color:#2a3351;font-size:13px}
.record-panel .record-status-line{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:80px}
.record-panel #timer{font-size:24px;line-height:1;color:#1c244c;white-space:nowrap}
.record-panel #recState{font-size:10px;white-space:nowrap}
.record-panel #stop{min-height:47px;font-size:11px;padding:9px 8px;border-radius:10px}
.record-panel .record-mode-shortcuts {display:flex;flex-direction:column;gap:0;min-width:0;padding:0;width:100%}
.record-panel .dw-primary-section{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:center;padding:20px 22px;background:linear-gradient(105deg,#faf6ff,#f0e9ff);border-top:1px solid #e6dff7;border-bottom:1px solid #dcd2f6}
.record-panel .dw-primary-section .record-mode-label{font-size:12px;color:#4b2e90;letter-spacing:.08em}
.record-panel .record-mode-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.record-panel .record-mode-primary .record-mode-button{
  display:flex;align-items:center;gap:14px;min-height:96px;padding:17px 21px;font-size:15px;
  background:linear-gradient(115deg,#772cb4,#5930ac);border:2px solid #fff;border-radius:16px;
  color:#fff;box-shadow:0 6px 15px rgba(92,49,158,.16);line-height:1.25;
}
.record-panel .record-mode-primary .record-mode-live{background:linear-gradient(115deg,#d7c3fa,#a882df);color:#35166d}
.record-panel .record-mode-primary .dw-mode-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.record-panel .record-mode-primary .dw-mode-copy strong{font-size:clamp(13px,1.15vw,18px);line-height:1.15}
.record-panel .record-mode-primary .dw-mode-copy small{font-size:11px;font-weight:500;line-height:1.35;opacity:.94}
.record-panel .dw-mode-symbol{font-size:26px;flex-shrink:0}
.record-panel .record-mode-primary .record-mode-button:disabled{opacity:.75;filter:saturate(.75);cursor:not-allowed}
.record-panel .record-mode-primary .record-mode-button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.record-panel .record-mode-primary .record-mode-button.active,
.record-panel .record-mode-primary .record-mode-button[aria-pressed="true"]{border-color:#47c8b1;outline:2px solid #47c8b1;outline-offset:1px;box-shadow:0 8px 20px rgba(74,39,137,.26)}
.record-panel .dw-advanced-section{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:start;padding:17px 22px 11px;background:#f9fbff}
.record-panel .dw-advanced-section .record-mode-secondary-label{display:block;color:#40516d;font-size:11px;line-height:1.5;white-space:normal;letter-spacing:.07em;padding-top:15px}
.record-panel .dw-advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;min-width:0}
.record-panel .dw-advanced-button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:75px;padding:11px 13px;font-size:12px;border:1px solid #d6ddee;border-radius:13px;background:#fff;color:#2a2d59;overflow-wrap:break-word;white-space:normal}
.record-panel .dw-advanced-button strong{font-size:12px;font-weight:820;line-height:1.3}
.record-panel .dw-advanced-button small{font-size:10px;font-weight:500;line-height:1.35;color:#6b728f}
.record-panel .dw-advanced-button:hover:not(:disabled){background:#eee9ff;color:#3f258d;border-color:#baa7eb}
.record-panel .dw-advanced-button:disabled{opacity:.65;cursor:not-allowed}
.record-panel .dw-focus-cell{min-width:0;display:flex;flex-direction:column;gap:5px}
.record-panel .dw-focus-cell .dw-focus-button{width:100%;border-color:#baa4e9;background:#f4f0ff;color:#4c2d92}
.record-panel .dw-focus-cell .dw-focus-button:disabled{opacity:.8;filter:none;background:#f0eafa;color:#57449b;border-color:#c7bcea}
.record-panel .dw-advanced-grid .record-mode-planned{opacity:.7;background:#f0f2f8;border-color:#dce0e9;color:#69738b}
.record-panel .dw-focus-settings{margin:0;width:100%;min-width:0;border:1px solid #d9d0ec;border-radius:10px;background:#fff;box-sizing:border-box}
.record-panel .dw-focus-settings summary{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:8px 10px;font-size:10px;color:#553b91;cursor:pointer;list-style:none;flex-wrap:wrap}
.record-panel .dw-focus-settings summary::-webkit-details-marker{display:none}
.record-panel .dw-focus-settings summary::before{content:'▸';margin-right:1px;transition:transform .15s}
.record-panel .dw-focus-settings[open] summary::before{transform:rotate(90deg)}
.record-panel .dw-focus-settings summary span{font-weight:800;color:#3d2c76}
.record-panel .dw-focus-settings[open]{box-shadow:0 4px 12px rgba(74,39,137,.10);border-color:#a58bcf}
.record-panel .dw-focus-settings .focus-difficulty-control{grid-column:auto;display:flex;flex-direction:column;gap:5px;margin:0 9px 4px;padding:7px;border:0;background:#f8f5ff;border-radius:7px;font-size:10px;color:#44357f}
.record-panel .dw-focus-settings .focus-difficulty-control select{font-size:11px;width:100%;min-width:0;padding:7px 5px;background:#fff;border-color:#c9c0e4}
.dw-focus-help{display:block;font-size:10px;color:#7b709b;margin:0 10px 10px}
.record-panel #recordModeHint{display:block;font-size:11px;padding:0 22px 15px;color:#627187;background:#f9fbff;border-radius:0 0 18px 18px}
.record-panel .cognitive-shortcut[hidden]{display:none!important}
@media(max-width:1320px){
 .record-panel .dw-record-actions{grid-template-columns:minmax(160px,1.25fr) minmax(110px,.8fr) minmax(155px,1fr) minmax(115px,.75fr) minmax(85px,.55fr) minmax(65px,.4fr)}
 .record-panel .dw-primary-section,.record-panel .dw-advanced-section{grid-template-columns:125px minmax(0,1fr)}
 .record-panel .dw-record-actions .face-calibration-status{font-size:10px}
}
@media(max-width:1050px){
 .record-panel .actions.dw-record-actions{grid-template-columns:2fr 1fr 1.25fr 1fr;}
 .record-panel .record-status-line{grid-column:3;grid-row:2}
 .record-panel #stop{grid-column:4;grid-row:2}
 .record-panel .dw-primary-section,.record-panel .dw-advanced-section{grid-template-columns:1fr;gap:10px}
 .record-panel .dw-advanced-section .record-mode-secondary-label{padding-top:0}
 .record-panel .dw-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .record-panel .dw-record-top{padding:15px 12px}
 .record-panel .actions.dw-record-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .record-panel .actions.dw-record-actions #start{grid-column:1/-1;grid-row:1}
 .record-panel .actions.dw-record-actions #faceCheck{grid-column:1;grid-row:2}
 .record-panel .actions.dw-record-actions .face-calibration-status{grid-column:2;grid-row:2}
 .record-panel .actions.dw-record-actions .session-duration-control{grid-column:1;grid-row:3}
 .record-panel .actions.dw-record-actions .record-status-line{grid-column:2;grid-row:3}
 .record-panel .actions.dw-record-actions #stop{grid-column:1/-1;grid-row:4;min-height:35px}
 .record-panel .dw-primary-section,.record-panel .dw-advanced-section{padding:14px 12px}
 .record-panel .record-mode-primary,.record-panel .dw-advanced-grid{grid-template-columns:1fr}
 .record-panel .record-mode-primary .record-mode-button{min-height:78px}
 .record-panel #recordModeHint{padding:2px 12px 14px}
}

/* v0.7.58 · Quick video-only Relax / Focus profile */
.quick-video-access{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid #dcd2f6;background:#f3eefc}
.quick-video-access>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:190px}
.quick-video-access strong{color:#55348c;font-size:13px}
.quick-video-access small{color:#71628d;font-size:11px}
.quick-video-access button{font-size:12px;border:1px solid #9271c5;color:#4c2484;background:#fff;border-radius:10px;padding:10px 13px}
.quick-video-access #quickVideoStatus{font-size:11px;color:#5b5680}
.quick-video-overlay[hidden],.quick-video-cross[hidden]{display:none!important}
.quick-video-overlay{position:fixed;inset:0;z-index:10005;background:#0b1228da;display:grid;place-items:center;padding:14px}
.quick-video-shell{width:min(1180px,calc(100vw - 28px));height:min(900px,calc(100dvh - 28px));background:#fff;color:#243c45;border-radius:18px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:0 20px 75px #0006}
.quick-video-header,.quick-video-footer{padding:13px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px;background:#f6f2fc}
.quick-video-header>div,.quick-video-footer>div{display:flex;flex-direction:column;gap:6px}
.quick-video-header span,.quick-video-footer span{font-size:12px;color:#625782}
.quick-video-header strong{font-size:13px;color:#4b317e}
.quick-video-stage{position:relative;overflow:hidden;min-height:0;display:grid;place-items:center;background:#edf0f2}
.quick-video-shell[data-phase="relax"] .quick-video-stage{background:url("focus_relax_landscape.png") center center / cover no-repeat}
.quick-video-shell[data-phase="focus"] .quick-video-stage{background:#ebedef}
.quick-video-cross{position:absolute;left:10%;top:10%;transform:translate(-50%,-50%);font-family:Arial,Helvetica,sans-serif;font-size:clamp(25px,3vw,37px);line-height:1;color:#df1b2a;font-weight:650;z-index:2;text-shadow:0 1px 1px #fff9}
.quick-video-message{background:#ffffffdb;padding:14px 28px;border-radius:14px;font-size:clamp(18px,3vw,26px);font-weight:800;color:#403168;text-align:center}
.quick-video-shell[data-phase="relax"] .quick-video-message,.quick-video-shell[data-phase="focus"] .quick-video-message{display:none}
.quick-video-footer>div{flex:1}
.quick-video-footer strong{font-size:13px;line-height:1.3;color:#42356b}
.quick-video-footer button{white-space:nowrap}
@media(max-width:680px){.quick-video-overlay{padding:0}.quick-video-shell{width:100vw;height:100dvh;border-radius:0}.quick-video-header,.quick-video-footer{padding:9px 12px}.quick-video-footer{flex-wrap:wrap}.quick-video-footer button{width:100%}.quick-video-access{padding:12px}}

/* v0.7.58 — non-cognitive face-tracking feedback outside the task image. */
.quick-video-header-right{display:flex;align-items:center;gap:18px;min-width:0}
.quick-video-cycle-timer{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.quick-video-tracking{display:inline-flex;align-items:center;justify-content:center;min-width:110px;min-height:30px;box-sizing:border-box;font-size:11px!important;font-weight:650;border-radius:99px;padding:5px 9px;border:1px solid transparent;background:#e7edf1;color:#526077!important}
.quick-video-tracking[data-status="good"]{background:#e7f5ee;border-color:#b5dcc6;color:#19623d!important}
.quick-video-tracking[data-status="intermittent"]{background:#fff3dd;border-color:#ebd4a0;color:#825b18!important}
.quick-video-tracking[data-status="lost"]{background:#fce9e9;border-color:#e9b2b2;color:#963c3c!important}
.quick-video-tracking[hidden]{display:none!important}
@media(max-width:620px){.quick-video-header-right{gap:7px}.quick-video-tracking{min-width:0;font-size:9px!important;padding:4px 6px}.quick-video-cycle-timer span{font-size:10px}}

/* v0.7.59 — Quick Relax/Focus is the final, optional step within Face quality check.
   It is no longer a separate mode under the main recording controls. */
.face-cognitive-final-step{margin-top:14px;padding-top:13px;border-top:1px solid #cbd8d6}
.face-cognitive-final-step .face-step-marker,.face-check-completion-next .face-step-marker{font-size:10px;font-weight:850;letter-spacing:.095em;color:#70469a;margin:0 0 5px}
.face-check-panel .quick-video-access{padding:13px 14px;border:1px solid #d8c8ee;border-radius:13px;background:#f5f0ff;gap:12px}
.face-check-panel .quick-video-access button{font-weight:750;background:#fff;color:#54208c}
.face-check-panel .quick-video-access button:disabled{opacity:.5;cursor:not-allowed}
.face-check-completion-next{margin:17px 0 11px;border-radius:13px;padding:14px;background:#f2ecff;border:1px solid #cfc0eb;text-align:center}
.face-check-completion-next[hidden]{display:none!important}
.face-check-completion-next p:not(.face-step-marker){font-size:13px;color:#4d3c76;margin:6px 0 13px;line-height:1.4}
.face-check-completion-next button{background:#6630b0;border-color:#6630b0;color:#fff;width:min(100%,360px)}
.face-check-completion-card #faceCheckCompletionDone{display:block;margin:9px auto 0;background:#fff;color:#365c54;border:1px solid #aac5ba;min-height:42px;padding:10px 18px;font-size:13px}
@media(max-width:700px){.face-check-panel .quick-video-access{flex-direction:column;align-items:stretch}.face-check-panel .quick-video-access button{width:100%}}

/* v0.7.60 — face calibration is the leftmost primary setup control, with
   prominent readable button AND saved-status typography. */
.record-panel .actions.dw-record-actions {
  display:grid;
  grid-template-columns:minmax(220px,1.35fr) minmax(205px,1.25fr) minmax(122px,.8fr) minmax(85px,.55fr) minmax(70px,.45fr);
  gap:12px;align-items:center;
}
.record-panel .dw-face-calibration-entry{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  min-width:0;width:100%;
}
.record-panel .dw-face-calibration-entry #faceCheck{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:49px;box-sizing:border-box;padding:10px 12px;
  font-size:17px;font-weight:850;line-height:1.15;
  background:#f2ebff;color:#422481;border:1.5px solid #bda8ea;
  border-radius:12px;white-space:normal;
}
.record-panel .dw-face-calibration-entry #faceCheck:hover:not(:disabled){background:#e7dcfb}
.record-panel .dw-face-calibration-entry #faceCalibrationStatus{
  width:100%;min-height:36px;box-sizing:border-box;padding:8px 10px;
  font-size:clamp(13px,1.05vw,16px);font-weight:800;line-height:1.25;
  border-radius:10px;white-space:normal;
}
.record-panel .actions.dw-record-actions #start{min-height:67px;font-size:18px;}
.record-panel .actions.dw-record-actions .session-duration-control{min-width:0;}
@media(max-width:1050px){
 .record-panel .actions.dw-record-actions{grid-template-columns:minmax(180px,1.25fr) minmax(170px,1.2fr) minmax(120px,.85fr) minmax(75px,.5fr);}
 .record-panel .actions.dw-record-actions #stop{grid-column:4;grid-row:2;}
 .record-panel .actions.dw-record-actions .record-status-line{grid-column:3;grid-row:2;}
}
@media(max-width:680px){
 .record-panel .actions.dw-record-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .record-panel .actions.dw-record-actions .dw-face-calibration-entry{grid-column:1/-1;grid-row:1;}
 .record-panel .actions.dw-record-actions #start{grid-column:1/-1;grid-row:2;}
 .record-panel .actions.dw-record-actions .session-duration-control{grid-column:1;grid-row:3;}
 .record-panel .actions.dw-record-actions .record-status-line{grid-column:2;grid-row:3;}
 .record-panel .actions.dw-record-actions #stop{grid-column:1/-1;grid-row:4;min-height:38px;}
 .record-panel .dw-face-calibration-entry #faceCheck{min-height:45px;font-size:17px;}
 .record-panel .dw-face-calibration-entry #faceCalibrationStatus{font-size:15px;}
}

/* v0.7.63 — camera hardware tuning, clearly separated from preview filters. */
.eye-visibility-tag{font-size:11px;white-space:nowrap;border:1px solid #d8dce9;background:#f0f2f7;color:#59677c;padding:7px 10px}
.eye-visibility-tag.is-good{background:#e0f5ed;border-color:#a7dec5;color:#116248}
.eye-visibility-tag.is-limited{background:#fff4d9;border-color:#ebcf8c;color:#8b6011}
.eye-visibility-tag.is-poor{background:#fde8e7;border-color:#edb4b1;color:#a0443b}
.camera-image-controls{margin:0 12px 8px;border:1px solid #d5deec;border-radius:12px;background:#f9faff;color:#2d415d;flex:none}
.camera-image-controls>summary{cursor:pointer;padding:9px 13px;font-size:12px;font-weight:750;list-style-position:inside}
.camera-image-controls>summary .small{font-weight:450;color:#6b728f}
.camera-image-controls-body{padding:10px 14px 13px;border-top:1px solid #d5deec;display:grid;gap:9px;font-size:12px}
.camera-native-sliders,.camera-preview-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.camera-preview-sliders{grid-template-columns:repeat(2,minmax(0,1fr))}
.camera-native-sliders label,.camera-preview-sliders label{display:grid;grid-template-columns:1fr auto;gap:3px 5px;font-weight:650;min-width:0}
.camera-native-sliders label[hidden]{display:none!important}
.camera-native-sliders input,.camera-preview-sliders input{grid-column:1/-1;max-width:100%;width:100%;accent-color:#6540ab}
.camera-native-sliders output,.camera-preview-sliders output{font-variant-numeric:tabular-nums}
.camera-image-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.camera-image-actions button{font-size:12px;min-height:32px;padding:7px 11px}
.camera-image-warning{margin:0;color:#697487;line-height:1.4}
.camera-image-controls-body .small{margin:0}
.monitor.face-check-running .camera-image-controls[open]{max-height:38vh;overflow:auto}
@media(max-width:820px){.camera-native-sliders,.camera-preview-sliders{grid-template-columns:1fr}}


/* v0.8.03 — compact recording bar, keeps the two main workflows accessible. */
.record-panel .dw-record-top {gap:5px;padding:9px 15px 10px;}
.record-panel .dw-record-top-heading .eyebrow {font-size:10px;}
.record-panel .dw-record-top-heading #storageInfo {font-size:10px;}
.record-panel .actions.dw-record-actions {gap:8px;grid-template-columns:minmax(165px,1.45fr) minmax(175px,1.45fr) minmax(120px,.85fr) minmax(75px,.5fr) minmax(72px,.42fr);}
.record-panel .dw-face-calibration-entry {gap:3px;}
.record-panel .dw-face-calibration-entry #faceCheck {min-height:35px;padding:6px 10px;font-size:13px;}
.record-panel .dw-face-calibration-entry #faceCalibrationStatus {min-height:22px;padding:4px 7px;font-size:11px;line-height:1.1;}
.record-panel .actions.dw-record-actions #start {min-height:47px;padding:9px 11px;font-size:15px;}
.record-panel .session-duration-control {gap:3px;font-size:10px;}
.record-panel .session-duration-control select {min-height:33px;padding:5px 8px;}
.record-panel #timer {font-size:20px;}
.record-panel .record-status-line {gap:2px;}
.record-panel #stop {min-height:37px;padding:7px;font-size:11px;}
.record-panel .dw-primary-section {grid-template-columns:135px minmax(0,1fr);gap:10px;padding:7px 15px;}
.record-panel .dw-primary-section .record-mode-label {font-size:10px;}
.record-panel .record-mode-primary {gap:8px;}
.record-panel .record-mode-primary .record-mode-button {min-height:52px;padding:8px 12px;gap:7px;border-radius:10px;}
.record-panel .record-mode-primary .dw-mode-copy {gap:2px;}
.record-panel .record-mode-primary .dw-mode-copy strong {font-size:13px;}
.record-panel .record-mode-primary .dw-mode-copy small {display:none;}
.record-panel .dw-mode-symbol {font-size:17px;}
/* Collapsible advanced protocols: closed by default to free space for video + EEG. */
.record-panel details.dw-advanced-section {display:block;padding:0;background:#f9fbff;border:0;}
.record-panel .dw-advanced-summary {display:flex;align-items:center;gap:12px;padding:7px 15px;cursor:pointer;color:#40516d;font-size:11px;font-weight:750;list-style:none;border-bottom:1px solid #e9edf5;}
.record-panel .dw-advanced-summary::-webkit-details-marker {display:none;}
.record-panel .dw-advanced-summary:before {content:'▸';color:#62469f;font-size:13px;}
.record-panel details[open]>.dw-advanced-summary:before {content:'▾';}
.record-panel .dw-advanced-summary .record-mode-secondary-label {padding:0;color:#40516d;letter-spacing:.06em;font-size:10px;}
.record-panel .dw-advanced-summary-hint {font-size:10px;font-weight:500;color:#738099;}
.record-panel details.dw-advanced-section .dw-advanced-grid {display:grid;padding:9px 15px 10px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.record-panel details.dw-advanced-section .dw-advanced-button {min-height:56px;padding:7px 10px;}
.record-panel #recordModeHint {padding:5px 15px 7px;font-size:10px;}
/* Setup: clear visual distinction between earbud connection and webcam. */
.setup #connect.dw-connect-action {background:#0b8273;color:#fff;border:2px solid #0b8273;font-weight:800;box-shadow:0 3px 8px rgba(6,105,92,.18);min-height:43px;}
.setup #connect.dw-connect-action:hover:not(:disabled) {background:#056355;border-color:#056355;}
.setup #camera.dw-camera-action {background:#355cb1;color:#fff;border:2px solid #355cb1;font-weight:800;box-shadow:0 3px 8px rgba(41,78,158,.18);min-height:43px;}
.setup #camera.dw-camera-action:hover:not(:disabled) {background:#294a94;border-color:#294a94;}
.setup #camera.dw-camera-action.is-active {background:#e5f5ed;color:#125941;border-color:#4ba887;}
.setup #camera.dw-camera-action.is-active:hover:not(:disabled) {background:#d6ebdf;}
.setup #connect.dw-connect-action:disabled,.setup #camera.dw-camera-action:disabled {opacity:.58;box-shadow:none;}
#cameraRestoreHint {font-size:10px;line-height:1.4;margin:5px 0 7px;}
@media(max-width:1050px) {
 .record-panel .actions.dw-record-actions {grid-template-columns:minmax(140px,1.2fr) minmax(150px,1.15fr) minmax(110px,.8fr) minmax(76px,.5fr) minmax(68px,.45fr);gap:6px;}
 .record-panel .dw-primary-section {grid-template-columns:120px minmax(0,1fr);}
 .record-panel details.dw-advanced-section .dw-advanced-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:680px) {
 .record-panel .dw-record-top {padding:9px 10px;}
 .record-panel .actions.dw-record-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
 .record-panel .actions.dw-record-actions .dw-face-calibration-entry {grid-column:1/-1;grid-row:1;}
 .record-panel .actions.dw-record-actions #start {grid-column:1/-1;grid-row:2;}
 .record-panel .actions.dw-record-actions .session-duration-control {grid-column:1;grid-row:3;}
 .record-panel .actions.dw-record-actions .record-status-line {grid-column:2;grid-row:3;}
 .record-panel .actions.dw-record-actions #stop {grid-column:1/-1;grid-row:4;min-height:35px;}
 .record-panel .dw-primary-section {grid-template-columns:1fr;gap:4px;padding:7px 10px;}
 .record-panel .record-mode-primary {grid-template-columns:1fr 1fr;}
 .record-panel .record-mode-primary .record-mode-button {min-height:51px;padding:7px 8px;}
 .record-panel details.dw-advanced-section .dw-advanced-grid {grid-template-columns:repeat(2,minmax(0,1fr));padding:9px 10px;}
 .record-panel #recordModeHint {padding:5px 10px;}
}
@media(max-width:410px) {
 .record-panel .record-mode-primary,.record-panel details.dw-advanced-section .dw-advanced-grid {grid-template-columns:1fr;}
}