/* Shared palette for the monitor, statistics, dialogs and settings. */
:root {
  --bg: #101722;
  --panel: #182230;
  --surface: #121c29;
  --control: #223044;
  --border: #2c3b50;
  --text: #edf3fc;
  --muted: #9aadc4;
  --blue: #4086f4;
  --green: #46d3a0;
  --red: #ff7c85;
  --yellow: #f0c46c;
  --glow: #1b3553;
  --shadow: 0 8px 24px #0000001a;
  --scroll: #51647c;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #edf2f8;
  --panel: #ffffff;
  --surface: #f4f7fb;
  --control: #edf2f8;
  --border: #d7e0ec;
  --text: #20324c;
  --muted: #61738a;
  --blue: #2469d8;
  --green: #15835d;
  --red: #c83145;
  --yellow: #946407;
  --glow: #dde9fc;
  --shadow: 0 8px 24px #233b6010;
  --scroll: #a5b5ca;
  color-scheme: light;
}
body { background: radial-gradient(ellipse at top left, var(--glow), transparent 55%), var(--bg); }
header, .panel { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
.header-title { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.header-title h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0; letter-spacing: -.5px; }
.header-title h1::before { content: '✦'; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--blue); color: #fff; font-size: 19px; box-shadow: 0 4px 10px #2469d830; }
.header-title h1 span { letter-spacing: 0; font-weight: 500; }
.theme-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.theme-control select { font-size: 12px; padding: 5px 7px; }
button, select, .platform-thresholds input { background: var(--control) !important; color: var(--text) !important; border: 1px solid var(--border); }
button { transition: background 150ms, border-color 150ms; }
button:hover:not(:disabled) { filter: none; border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--control)) !important; }
button.primary { background: var(--blue) !important; color: white !important; border-color: var(--blue); box-shadow: 0 3px 8px #2469d825; }
button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 90%, white) !important; }
select { border-radius: 7px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
input[type="checkbox"] { accent-color: var(--blue); flex-shrink: 0; }
.card, .sound-settings { background: var(--surface); border-color: var(--border); }
.card { font-variant-numeric: tabular-nums; }
#detectionScreen .cards .card { border-radius: 9px; }
.card:has(.value.alarm) { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--surface)); }
.value.ok { color: var(--green); }
.value.warn { color: var(--yellow); }
.value.alarm { color: var(--red); }
#engineStatus::before, #detectStatus::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 2px; }
.page-link { color: var(--blue); }
.toolbar > .page-link { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); }
.toolbar > .page-link:hover { border-color: var(--blue); }
#detectionScreen .preview { background: #080e17; border-color: var(--border); box-shadow: inset 0 0 40px #0002; }
#detectionScreen .monitor-main .preview { width: min(100%, calc(clamp(150px, 100dvh - 500px, 720px) * var(--preview-ratio, 1.7778))); align-self: center; }
#detectionScreen .monitor-main .preview:has(.placeholder:not([hidden])) { width: 100%; aspect-ratio: auto; height: clamp(190px, 100dvh - 500px, 720px); }
#detectionScreen .preview:has(.placeholder:not([hidden])) { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--blue) 12%, var(--panel)), var(--surface) 75%); box-shadow: var(--shadow); }
.preview:has(.placeholder:not([hidden])) #previewCanvas { visibility: hidden; }
.preview-caption { position: absolute; top: 12px; left: 14px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #080e17a6; color: #dce8f6; font-size: 10px; pointer-events: none; }
.preview:has(.placeholder:not([hidden])) .preview-caption { background: transparent; color: var(--muted); }
.preview-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.preview:has(.placeholder:not([hidden])) .preview-dot { background: var(--muted); }
#detectionScreen .placeholder { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; color: var(--muted); padding: 18px; font-size: 12px; }
#detectionScreen .placeholder[hidden] { display: none; }
#detectionScreen .placeholder::before { content: '▣'; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 2px; border-radius: 15px; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); font-size: 27px; }
.placeholder strong { color: var(--text); font-size: clamp(14px, 1.4vw, 20px); }
.placeholder small { font-size: 10px; }
.placeholder button { padding: 7px 12px; font-size: 12px; }
.overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.overview-heading h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.overview-heading .page-link { font-size: 11px; text-decoration: none; }
.overview-tag { color: var(--muted); font-size: 10px; }
.monitor-session { display: grid; grid-template-columns: 1fr .8fr 1.5fr; gap: 8px; flex: 0 0 auto; padding: 10px 14px; }
.monitor-session .label { margin-bottom: 1px; font-size: 10px; }
.monitor-session strong { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.monitor-health { border-left: 1px solid var(--border); padding-left: 14px; }
.monitor-health .ok { color: var(--green); }.monitor-health .warn { color: var(--yellow); }
.monitor-overview { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; flex: 0 0 auto; min-height: 250px; }
.monitor-overview > .panel { display: flex; flex-direction: column; min-width: 0; padding: 14px; }
.monitor-overview small { color: var(--muted); font-size: 10px; }
.monitor-log .log { margin: 0; max-height: none; overflow: visible; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.monitor-log .log div { padding: 7px 0; }
.monitor-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 16px 0; }
.monitor-empty > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: var(--green); font-size: 16px; }
.monitor-empty strong { font-size: 12px; font-weight: 550; }
#monitorAlertList { flex: 1; list-style: none; margin: 0; padding: 0; }
#monitorAlertList:empty { display: none; }
#monitorAlertList li { border-bottom: 1px solid var(--border); padding: 9px 0; border-left: 2px solid transparent; }
#monitorAlertList li:last-child { border-bottom: 0; }
#monitorAlertList li.alert-active { border-left-color: var(--red); padding-left: 8px; }
#monitorAlertList strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
#monitorAlertList .alert-active strong { color: var(--red); }
#monitorAlertList small { display: block; margin-top: 4px; }
.overview-footnote { margin-top: auto; padding-top: 10px; }
.monitor-empty[hidden] { display: none; }
@media (max-width: 850px) {
  #detectionScreen .monitor-main .preview { width: 100%; }
  .monitor-overview { flex: none; }
}
@media (max-width: 500px) {
  .monitor-overview { grid-template-columns: 1fr; }
  .monitor-overview > .panel { padding: 12px; }
  .monitor-empty { padding: 14px 0; }
}
@media (min-width: 851px) and (max-height: 800px) {
  .monitor-overview { min-height: 190px; }
  .monitor-overview > .panel { padding: 10px; }
  .overview-heading { margin-bottom: 8px; }
  #detectionScreen .placeholder { gap: 5px; }
  #detectionScreen .placeholder::before { width: 30px; height: 30px; border-radius: 9px; font-size: 19px; }
  .placeholder small { display: none; }
}
@media (min-width: 851px) and (min-height: 1050px) {
  #detectionScreen .monitor-main .preview:has(.placeholder:not([hidden])) { height: clamp(280px, 28vh, 420px); }
}
.sound-settings > summary { color: var(--text); }
.sound-settings[open] > summary { margin-bottom: 8px; }
.sound-settings small { word-break: normal; overflow-wrap: anywhere; }
.log div { border-color: var(--border); }
dialog { background: var(--panel); border-color: var(--border); color: var(--text); box-shadow: 0 24px 80px #0005; }
dialog::backdrop { background: #09101bcc; }
#experiencePreviewDialog { max-height: 92dvh; overflow-y: auto; }
#experiencePreviewDialog .hint { font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; }
#experiencePreviewStatus { color: var(--yellow); }
#experiencePreviewStatus[data-state="success"] { color: var(--green); }
.experience-preview-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; font-size: 11px; }
.preview-roi { color: var(--blue); }.preview-candidate { color: #d88b27; }.preview-confirmed { color: var(--green); }.preview-strip { color: var(--yellow); }
#experiencePreviewCanvas { width: 100%; height: auto; max-height: 42vh; object-fit: contain; border-radius: 8px; background: #080e17; }
.experience-preview-title { display: block; font-size: 12px; margin: 10px 0 6px; }
.experience-preview-crop { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #080e17; text-align: center; }
#experiencePreviewCrop { margin: auto; max-width: 100%; height: auto; max-height: none; image-rendering: pixelated; }
body .screen, body .screen aside, body .log { scrollbar-color: var(--scroll) transparent; }
body .screen::-webkit-scrollbar-thumb, body .screen aside::-webkit-scrollbar-thumb, body .log::-webkit-scrollbar-thumb { background: var(--scroll); }
body .page-dots button { background: var(--border) !important; border-color: var(--muted); }
body .page-dots button[aria-current="page"] { background: var(--blue) !important; border-color: var(--blue); }
#experienceScreen .exp-grid .card { border-top: 2px solid color-mix(in srgb, var(--blue) 50%, var(--border)); }
#experienceScreen .value { font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
#experienceScreen .header-title h1::before { width: 24px; height: 24px; font-size: 15px; }
.experience-goal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: clamp(10px, 1.2vw, 13px); }
.experience-goal > label { display: flex; align-items: center; gap: 8px; }
#experienceScreen #experienceGoalSave { padding: 5px 8px; font-size: inherit; }
#experienceGoalTarget { width: 145px; max-width: 38vw; min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--control); color: var(--text); font: inherit; }
#experienceGoalStatus { color: var(--muted); font-variant-numeric: tabular-nums; }
#experienceGoalStatus.goal-reached { color: var(--green); }
#experienceGoalProgress { width: 100px; height: 6px; accent-color: var(--green); }
.goal-sound-settings { margin-left: auto; }
.goal-sound-settings summary { cursor: pointer; color: var(--blue); }
.goal-sound-settings[open] { flex: 1 0 100%; margin-left: 0; }
.goal-sound-settings small { display: block; margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.goal-sound-settings .toolbar { margin-top: 6px; }
.goal-sound-settings button { padding: 5px 8px; font-size: inherit; }
#alarmSoundType { min-width: 0; max-width: 210px; font: inherit; }
@media (max-width: 420px) and (max-height: 450px) {
  .experience-goal { font-size: 9px; margin-top: 4px; padding: 4px 6px; gap: 4px 6px; }
  #experienceGoalTarget { width: 105px; padding: 3px 5px; }
  #experienceScreen #experienceGoalSave { padding: 3px 5px; }
  #experienceGoalProgress { width: 60px; }
}
@media (max-width: 600px) {
  .header-title { align-items: flex-start; gap: 6px; flex-wrap: wrap; }
  .header-title h1 span { font-size: 11px !important; }
  .header-title h1::before { width: 24px; height: 24px; font-size: 15px; }
  .theme-control { margin-left: auto; font-size: 10px; }
  .theme-control select { font-size: 10px; padding: 3px 5px; }
  .toolbar > .page-link { padding: 5px 7px; font-size: 11px; }
}
@media (max-width: 420px) and (max-height: 450px) {
  #experienceScreen .header-title { flex-wrap: nowrap; margin-bottom: 4px; }
  #experienceScreen .header-title h1::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media (min-width: 421px) and (max-height: 600px) {
  #experienceChart { height: clamp(60px, 22vh, 140px); }
}