/* Inter 4.1, SIL Open Font License; bundled for offline use on every platform. */
@font-face {
  font-family: Inter;
  src: url('./assets/fonts/inter/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --dashboard-sidebar-width: 250px;
  --explorer-back-fill: linear-gradient(145deg, #0d8b68, #075448);
  --explorer-back-fill-hover: linear-gradient(145deg, #119a70, #08705a);
  --app-available-height: 100dvh;
  --ink: #0b3158;
  --muted: #66788a;
  --teal-900: #002f60;
  --teal-700: #064b83;
  --teal-500: #2672a5;
  --paper: #fff;
  --line: #cfd6dc;
  --danger: #b74242;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: #e7e9eb;
  -webkit-user-select: none;
  user-select: none;
}
body * {
  -webkit-user-select: none;
  user-select: none;
}
:is(input, textarea, select, [contenteditable]:not([contenteditable="false"])),
:is(input, textarea, select, [contenteditable]:not([contenteditable="false"])) * {
  -webkit-user-select: text;
  user-select: text;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.connection-notice {
  position: fixed;
  inset: auto 12px max(12px, env(safe-area-inset-bottom)) auto;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(520px, calc(100vw - 24px));
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d8ad43;
  border-radius: 16px;
  background: #0b252a;
  color: #f4f2e8;
  box-shadow: 0 8px 32px #0005;
  font-size: 0.95rem;
  line-height: 1.4;
}
.connection-notice > div { min-width: 0; overflow-wrap: anywhere; }
.connection-notice p { margin: 0; }
.connection-notice .connection-notice-detail { margin-top: 6px; color: #bfceca; font-size: 0.85rem; }
.connection-notice-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d8ad43;
  border-radius: 50%;
  background: transparent;
  color: #f4f2e8;
  font-size: 1.35rem;
  line-height: 1;
}
.connection-notice-close:focus-visible { outline: 2px solid #f4f2e8; outline-offset: 2px; }

.fullscreen-app-bar { display: none; }

.page-shell { display: grid; grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr); min-height: 100vh; }
.intro {
  position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: clamp(48px, 8vw, 112px); color: white;
  background: radial-gradient(circle at 18% 22%, rgba(86,137,179,.32), transparent 34%), linear-gradient(145deg, #00284f 0%, #003c70 55%, #0b568b 100%);
}
.intro::before, .intro::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.intro::before { width: 480px; height: 480px; right: -240px; top: -170px; }
.intro::after { width: 330px; height: 330px; left: -210px; bottom: -100px; }
.brand-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.brand-mark svg { width: 43px; fill: none; stroke: #d6e6f2; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow, .section-label { margin: 0 0 9px; color: #4e83ad; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.brand-copy h1 { margin: 0; font-size: clamp(3.8rem, 8vw, 6.5rem); font-weight: 300; letter-spacing: -.075em; line-height: .9; }
.brand-copy h1 span { color: #bad4e8; font-weight: 650; }
.lead { max-width: 430px; margin: 30px 0 0; color: rgba(255,255,255,.7); font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.65; }
.signal-visual { display: flex; align-items: center; gap: 7px; height: 72px; margin-top: 58px; opacity: .7; }
.signal-visual span { display: block; width: 3px; height: 12px; border-radius: 3px; background: #c8ddeb; }
.signal-visual span:nth-child(2), .signal-visual span:nth-child(8) { height: 22px; }
.signal-visual span:nth-child(3), .signal-visual span:nth-child(7) { height: 36px; }
.signal-visual span:nth-child(4), .signal-visual span:nth-child(6) { height: 55px; }
.signal-visual span:nth-child(5) { height: 18px; }
.platform-note { position: absolute; bottom: 34px; margin: 0; color: rgba(255,255,255,.42); font-size: .78rem; letter-spacing: .05em; }

.auth-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px;
  background: linear-gradient(rgba(247,248,249,.74), rgba(247,248,249,.74)), repeating-linear-gradient(90deg, transparent 0 79px, rgba(0,47,96,.035) 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(0,47,96,.035) 80px);
}
.auth-card { width: min(100%, 470px); padding: clamp(32px, 5vw, 54px); border: 1px solid rgba(255,255,255,.75); border-radius: 24px; background: rgba(255,255,255,.95); box-shadow: 0 28px 80px rgba(10,51,57,.16); }
.card-header { margin-bottom: 28px; }
.card-header.compact { margin-top: 22px; margin-bottom: 22px; }
.card-header.centered { text-align: center; }
.card-header .section-label { color: var(--teal-700); }
.card-header h2 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 2.65rem); font-weight: 650; letter-spacing: -.045em; }
.card-header p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.login-brand-heading {
  color: var(--ui-color-text-heading);
  text-decoration-line: underline;
  text-decoration-color: #d6af56;
  text-decoration-thickness: 2px;
  text-underline-offset: .09em;
  text-decoration-skip-ink: auto;
}
.login-brand-heading em { color: var(--ui-color-gold); font-style: normal; font-weight: 350; }
.registration-brand-label .login-brand-heading {
  display: inline-block;
  margin-left: .18em;
  font-size: 1.16em;
  letter-spacing: -.02em;
  text-transform: none;
}
.registration-brand-label .login-brand-heading span { font-weight: 750; }
#register-view .card-header h2 { margin-bottom: 0; }
#auth-view .card-header > p:last-child { color: var(--ui-color-text-label); font-size: 1rem; font-weight: 650; line-height: 1.45; }
.field { margin-bottom: 18px; }
.field label { display: block; color: #31474c; font-size: .84rem; font-weight: 700; }
.field > label,
.field > .field-label-row { min-height: 1.65rem; margin-bottom: 7px; }
.field > label { display: flex; align-items: center; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.field-label-row label { margin: 0; }
.field-info-button { display: grid; place-items: center; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; padding: 0; border: 1px solid var(--explorer-gold); border-radius: 50%; color: var(--explorer-gold-light); background: var(--ui-color-surface-soft, #eef5ee); font-size: .85rem; font-weight: 850; }
.field-info-button:hover,
.field-info-button:focus-visible { color: var(--ui-color-text-inverse, #071712); background: var(--explorer-gold); outline: none; }
.field small { display: block; margin-top: 6px; color: #809195; font-size: .72rem; }
.field .field-help-text { padding: .65rem .75rem; border-left: .18rem solid var(--explorer-gold); border-radius: .35rem; color: var(--ui-color-text, #31474c); background: color-mix(in srgb, var(--explorer-gold) 9%, transparent); line-height: 1.45; }
.field input, .field select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cad8d7; border-radius: 10px; outline: none; color: var(--ink); background: #fbfdfd; transition: border-color 160ms, box-shadow 160ms, background 160ms; }
.field input:focus, .field select:focus { border-color: var(--teal-500); background: white; box-shadow: 0 0 0 4px rgba(38,114,165,.12); }
.password-field { position: relative; }
.password-field input { padding-right: 88px; }
.reveal-button { position: absolute; right: 6px; top: 6px; height: 36px; border: 0; color: var(--teal-700); background: transparent; font-size: .75rem; font-weight: 700; }
.login-save-credentials { display: flex; align-items: center; gap: .65rem; width: fit-content; margin: -.2rem 0 .9rem; color: var(--ui-color-text, #31474c); font-size: .8rem; font-weight: 700; cursor: pointer; }
.login-save-credentials input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--explorer-green-bright, #0b8c6f); cursor: pointer; }
.login-save-credentials:has(input:focus-visible) { outline: 2px solid var(--explorer-gold, #d5ad52); outline-offset: 4px; border-radius: 3px; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 49px; border: 1px solid #003c70; border-radius: 11px; color: white; background: linear-gradient(#0a568f, #003d73); box-shadow: 0 10px 24px rgba(0,47,96,.18); font-weight: 750; transition: transform 130ms, box-shadow 130ms, background 130ms; }
.secondary-button:hover:not(:disabled) { background: linear-gradient(#12649f, #064b83); transform: translateY(-1px); box-shadow: 0 13px 27px rgba(0,47,96,.24); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { border-color: #aeb8be; color: #eef1f3; background: #9da8ae; box-shadow: none; cursor: not-allowed; transform: none; }
.form-message { min-height: 20px; margin: -2px 0 12px; color: var(--danger); font-size: .79rem; line-height: 1.4; }
.form-message.success { color: #14705e; }
.divider { display: flex; align-items: center; gap: 12px; margin: 27px 0 17px; color: #89999c; font-size: .73rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.back-button { padding: 0; border: 0; color: var(--teal-700); background: transparent; font-size: .82rem; font-weight: 700; }
.auth-secondary-actions { display: grid; gap: 12px; margin-top: 18px; }
.auth-link-button { justify-self: center; padding: 5px; border: 0; color: var(--teal-700); background: transparent; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.registration-role { display: flex; align-items: center; gap: 9px; color: #31474c; font-size: .8rem; font-weight: 700; }
.registration-role input { width: 1rem; height: 1rem; }
.registration-note { margin: 0; color: var(--muted); font-size: .72rem; }
.registration-section { margin: 4px 0 2px; padding-top: 16px; border-top: 1px solid #dce5e7; }
.registration-section h3 { margin: 0 0 4px; color: var(--teal-700); font-size: .92rem; }
.registration-section p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.registration-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.registration-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem 1rem; margin-bottom: 1rem; color: var(--muted); font-size: .75rem; font-weight: 750; }
.registration-selected-license { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; width: 100%; min-height: 2.45rem; gap: .75rem; padding: .5rem .7rem; border: 1px solid color-mix(in srgb, var(--ui-color-gold) 55%, var(--ui-color-border)); border-radius: .65rem; color: var(--ui-color-text-muted); background: color-mix(in srgb, var(--ui-color-gold) 9%, transparent); box-sizing: border-box; font-size: .72rem; font-weight: 700; line-height: 1.2; }
.registration-selected-license strong { overflow: hidden; color: var(--ui-color-gold-light); text-overflow: ellipsis; white-space: nowrap; font-weight: 850; }
.registration-progress-dots { display: flex; gap: .45rem; }
.registration-progress-dots i { width: 1.9rem; height: .22rem; border-radius: 1rem; background: var(--line); }
.registration-progress-dots i.active { background: var(--explorer-green-bright); }
.registration-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; align-items: start; column-gap: 1rem; min-height: 18rem; }
.registration-step .registration-section,
.registration-step .registration-wide { grid-column: 1 / -1; }
.registration-step .registration-section { margin: 0 0 1.25rem; padding: 0 0 1rem; }
.registration-step .registration-section h3 { font-size: 1.1rem; }
.registration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.registration-actions .primary-button,
.registration-actions .secondary-button { width: 100%; }
.registration-actions:has(> #registration-previous[hidden]) > #registration-next {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, max(18rem, calc(50% - .425rem)));
}
.registration-availability { min-height: 1.1rem; }
.registration-availability.checking { color: var(--muted); }
.registration-availability.available { color: var(--ui-color-success-text, #14705e); }
.registration-availability.unavailable { color: var(--danger); }
.registration-license-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.registration-license-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 28rem;
  flex-direction: column;
  align-items: stretch;
  padding: 1.35rem 1.15rem 1.15rem;
  overflow: visible;
  border: 1px solid var(--ui-color-border);
  border-radius: 1rem;
  color: var(--ui-color-text);
  text-align: center;
  background-color: var(--ui-color-surface);
  background-image:
    linear-gradient(180deg, rgba(4, 27, 32, .5) 0%, rgba(4, 27, 32, .72) 42%, rgba(4, 27, 32, .94) 100%),
    var(--license-card-background-image, none);
  background-position: center, var(--license-card-background-position, center);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.registration-license-card:hover,
.registration-license-card:focus-visible { transform: translateY(-3px); border-color: var(--ui-color-gold); outline: none; box-shadow: 0 20px 42px rgba(0,0,0,.24); }
.registration-license-card.selected { border-color: var(--ui-color-gold); }
.registration-license-card.selected {
  background-color: color-mix(in srgb, var(--ui-color-surface) 88%, var(--ui-color-gold));
  background-image:
    linear-gradient(180deg, rgba(7, 45, 43, .44) 0%, rgba(5, 38, 38, .68) 42%, rgba(4, 27, 32, .92) 100%),
    var(--license-card-background-image, none);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-gold) 20%, transparent), 0 20px 42px rgba(0,0,0,.24);
}
.registration-license-icon { display: grid; width: 4.2rem; height: 4.2rem; margin: .55rem auto 1rem; place-items: center; border: 1px solid var(--ui-color-accent); border-radius: 50%; color: var(--ui-color-accent); font-size: 1.65rem; }
.registration-license-card:hover .registration-license-icon,
.registration-license-card:focus-visible .registration-license-icon { color: var(--ui-color-gold-light); border-color: var(--ui-color-gold); }
.registration-license-name { font-size: 1.28rem; }
.registration-license-description { min-height: 3.4rem; margin-top: .45rem; color: var(--ui-color-text-muted); font-size: .72rem; line-height: 1.5; }
.registration-license-card ul { display: grid; gap: .55rem; margin: 1rem 0 1.2rem; padding: 1rem 0 0; border-top: 1px solid var(--ui-color-border-subtle); list-style: none; text-align: left; }
.registration-license-card li { color: var(--ui-color-text-muted); font-size: .69rem; line-height: 1.35; }
.registration-license-card li::before { content: "✓"; margin-right: .48rem; color: var(--ui-color-accent); font-weight: 900; }
.registration-license-price { margin-top: auto; color: var(--ui-color-text-muted); }
.license-monthly-price, .license-annual-price { display: block; }
.license-annual-price { margin-top: .2rem; font-size: .72rem; font-weight: 650; line-height: 1.3; white-space: normal; }
.registration-license-price strong { color: var(--ui-color-accent); font-size: 1.1rem; }
.registration-license-price small { font-size: .66rem; }
.registration-license-action { display: grid; min-height: 2.8rem; margin-top: 1rem; place-items: center; border-radius: .65rem; color: var(--ui-color-text-inverse); background: var(--ui-color-accent-strong); font-size: .78rem; font-weight: 800; }
.registration-license-card:hover .registration-license-action,
.registration-license-card:focus-visible .registration-license-action { background: var(--ui-color-gold); }
.registration-license-card.selected .registration-license-action { color: var(--ui-color-text-inverse); background: var(--ui-color-accent); }
.customer-account-setup-dialog { width: min(calc(100% - 2rem), 52rem); padding: clamp(1.5rem, 4vw, 2.4rem); }
.customer-account-setup-dialog form { display: grid; gap: 1rem; }
.customer-account-setup-dialog h2 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.2rem); }
.customer-account-setup-dialog form > p:not(.section-label) { margin: 0; line-height: 1.55; }
.customer-account-setup-dialog .field { margin: .35rem 0 0; }
.customer-account-setup-dialog .primary-button { margin-top: .25rem; }
.customer-account-address-grid { display: grid; grid-template-columns: minmax(8rem, .65fr) minmax(14rem, 1.35fr); gap: .85rem 1rem; }
.customer-account-address-wide { grid-column: 1 / -1; }
.customer-account-setup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.customer-account-setup-actions .primary-button,
.customer-account-setup-actions .secondary-button { width: 100%; }
.customer-account-settings-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--ui-color-border); border-radius: .9rem; background: var(--ui-color-surface-muted); }
.customer-account-settings-summary div { display: grid; gap: .25rem; }
.customer-account-settings-summary small { color: var(--ui-color-text-muted); line-height: 1.4; }
.identity-confirmation-result { display: grid; justify-items: stretch; margin-top: 1.4rem; }
.identity-confirmation-result .success-mark { margin-bottom: 1.1rem; }
.identity-confirmation-result > p { margin: 0; color: var(--ui-color-success-text, #68cfa8); text-align: center; font-size: 1rem; font-weight: 720; line-height: 1.55; }
.identity-confirmation-result.error > p { color: var(--danger); }
.identity-confirmation-result .primary-button { margin-top: 1.5rem; min-height: 3.4rem; font-size: 1rem; }
.license-comparison-scroll { max-height: min(62dvh, 42rem); overflow: auto; border: 1px solid var(--line); border-radius: .9rem; }
.license-comparison-table { width: 100%; min-width: 58rem; border-collapse: separate; border-spacing: 0; font-size: .74rem; }
.license-comparison-table th,
.license-comparison-table td { min-width: 9.5rem; padding: .75rem .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.license-comparison-table th:first-child,
.license-comparison-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 10rem; color: var(--ui-color-text-label, var(--ink)); background: var(--ui-color-surface-header, var(--paper)); text-align: left; font-weight: 750; }
.license-comparison-table thead th { position: sticky; top: 0; z-index: 2; color: var(--ink); background: var(--ui-color-surface-header, var(--paper)); }
.license-comparison-table thead th:first-child { z-index: 3; }
.license-comparison-table tr:last-child td { border-bottom: 0; }
.license-comparison-table th:last-child,
.license-comparison-table td:last-child { border-right: 0; }
.license-comparison-table .license-name { display: block; margin-bottom: .25rem; color: var(--explorer-gold-light); font-size: .9rem; }
.license-comparison-table .license-selection-button { width: auto; min-height: 2rem; margin: .55rem auto 0; padding: .35rem .75rem; font-size: .68rem; }
.license-comparison-table .license-request-note { display: block; margin-top: .55rem; color: var(--muted); }
.license-row-help-button {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: .4rem;
  padding: 0;
  border: 1px solid var(--ui-color-gold, #c59b32);
  border-radius: 50%;
  color: var(--ui-color-gold-light, #ffe395);
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
  vertical-align: middle;
}
.license-row-help-button:hover,
.license-row-help-button:focus-visible,
.license-row-help-button:active { color: var(--ui-color-surface-header, #08242b); background: var(--ui-color-gold-light, #ffe395); }
.license-row-help-button:focus-visible { outline: 2px solid var(--ui-color-gold-light, #ffe395); outline-offset: 2px; }
.license-feature-enabled { color: var(--explorer-green-bright); font-size: 1rem; font-weight: 850; }
.license-feature-disabled { color: var(--muted); }
.field code { padding: 1px 4px; border-radius: 4px; color: #31556a; background: #edf3f5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.success-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 50%; color: white; background: #159b82; font-size: 1.6rem; box-shadow: 0 0 0 9px #e6f5f1; }
.user-summary { margin: 26px 0; padding: 19px; border-radius: 13px; text-align: center; background: #f1f7f6; }
.user-summary span, .user-summary strong, .user-summary small { display: block; }
.user-summary span { margin-bottom: 6px; color: #809195; font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.user-summary strong { font-size: 1.12rem; }
.user-summary small { margin-top: 4px; color: var(--teal-700); }
.legal-links { display: flex; justify-content: center; width: min(100%, 470px); margin-top: 7px; }
.legal-links button, .sidebar-legal-link { padding: 4px 8px; border: 0; color: #536f7a; background: transparent; font: inherit; font-size: .72rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legal-links button:hover, .legal-links button:focus-visible { color: var(--teal-700); }

@media (min-width: 881px) {
  .page-shell:has(.auth-card.register-mode) { grid-template-columns: 1fr; }
  .page-shell:has(.auth-card.register-mode) .intro { display: none; }
  .page-shell:has(.auth-card.register-mode) .auth-panel { padding: clamp(28px, 5vh, 58px); }
  .auth-card.register-mode { width: min(100%, 720px); padding: clamp(28px, 3vw, 42px); border-width: 1px; border-top-width: 4px; }
  .auth-card.register-mode.registration-license-mode { width: min(calc(100% - 2rem), 1320px); }
  .auth-card.comparison-mode { width: min(calc(100% - 2rem), 1180px); }
  .auth-card.register-mode #register-form {
    display: flex;
    flex-direction: column;
    min-height: 25rem;
  }
}

@media (max-width: 1100px) {
  .registration-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registration-license-card { min-height: 24rem; }
}

@media (min-width: 881px) and (max-height: 900px) {
  .page-shell {
    height: var(--app-available-height);
    min-height: 0;
    overflow: hidden;
  }
  .intro {
    min-height: 0;
    padding: clamp(2rem, 5vw, 4rem);
  }
  .brand-mark {
    width: clamp(3.2rem, 7dvh, 3.8rem);
    height: clamp(3.2rem, 7dvh, 3.8rem);
    margin-bottom: clamp(1rem, 2.5dvh, 1.6rem);
  }
  .brand-mark svg { width: 68%; }
  .brand-copy h1 { font-size: clamp(3.6rem, 7vw, 5.1rem); }
  .lead {
    margin-top: clamp(1rem, 2.5dvh, 1.4rem);
    font-size: clamp(.9rem, 1.5vw, 1.05rem);
    line-height: 1.45;
  }
  .signal-visual {
    height: clamp(2.8rem, 7dvh, 3.8rem);
    margin-top: clamp(1.4rem, 4dvh, 2.2rem);
  }
  .platform-note { bottom: clamp(1rem, 2.5dvh, 1.5rem); }
  .auth-panel {
    min-height: 0;
    justify-content: center;
    padding: clamp(.7rem, 2dvh, 1.3rem);
    overflow-y: auto;
  }
  .auth-card {
    width: min(92%, 27rem);
    padding: clamp(1.25rem, 3dvh, 1.8rem);
    border-radius: 1.15rem;
  }
  .card-header { margin-bottom: clamp(.8rem, 2dvh, 1.15rem); }
  .card-header.compact { margin-top: .8rem; margin-bottom: .8rem; }
  .card-header h2 {
    margin-bottom: .35rem;
    font-size: clamp(1.8rem, 4.8dvh, 2.2rem);
  }
  .card-header p:last-child { font-size: .82rem; line-height: 1.4; }
  .auth-card .field { margin-bottom: clamp(.55rem, 1.6dvh, .8rem); }
  .auth-card .field label { font-size: .76rem; }
  .auth-card .field > label,
  .auth-card .field > .field-label-row { margin-bottom: .3rem; }
  .auth-card .field input { height: clamp(2.35rem, 6dvh, 2.65rem); }
  .auth-card .field .custom-select-trigger { min-height: clamp(2.35rem, 6dvh, 2.65rem); }
  .auth-card .reveal-button { top: .2rem; height: 2rem; }
  .auth-card .form-message { min-height: .9rem; margin: -.1rem 0 .45rem; font-size: .7rem; }
  .auth-card .primary-button,
  .auth-card .secondary-button { min-height: clamp(2.35rem, 6dvh, 2.7rem); }
  .auth-card .divider { margin: clamp(.7rem, 1.8dvh, 1rem) 0 clamp(.55rem, 1.4dvh, .75rem); }
  .legal-links { margin-top: .15rem; }
  .legal-links button { padding-block: .15rem; font-size: .67rem; }
}

@media (min-width: 881px) and (max-height: 560px) {
  .auth-card.register-mode {
    padding: .7rem 1rem;
  }
  .auth-card.register-mode .card-header {
    margin-top: .3rem;
    margin-bottom: .35rem;
  }
  .auth-card.register-mode .card-header p:last-child,
  .auth-card.register-mode .field small {
    display: none;
  }
  .auth-card.register-mode #register-form .field {
    margin-bottom: .3rem;
  }
  .auth-card.register-mode #register-form .form-message {
    min-height: .65rem;
    margin-bottom: .2rem;
  }
}

@media (max-width: 880px) {
  .page-shell { grid-template-columns: 1fr; }
  .intro { min-height: 300px; padding: 45px 34px; justify-content: flex-start; }
  .brand-mark { width: 50px; height: 50px; margin-bottom: 22px; }
  .brand-copy h1 { font-size: 3.8rem; }
  .lead { margin-top: 18px; }
  .signal-visual, .platform-note { display: none; }
  .auth-panel { padding: 32px 18px 45px; }
  .registration-step { grid-template-columns: 1fr; min-height: 0; }
  .registration-step .registration-wide { grid-column: auto; }
  .registration-license-grid { grid-template-columns: 1fr; }
  .registration-license-card { min-height: 0; }
  .customer-account-address-grid,
  .customer-account-setup-actions { grid-template-columns: 1fr; }
  .customer-account-address-wide { grid-column: auto; }
  .customer-account-settings-summary { align-items: stretch; flex-direction: column; }
}
@media (max-width: 480px) {
  .intro { min-height: 250px; padding: 34px 24px; }
  .lead { font-size: .93rem; }
  .auth-panel { padding: 0; background: white; }
  .auth-card { padding: 34px 24px; border: 0; border-radius: 0; box-shadow: none; }
}

/* Dashboard */
.navigation-diagnostics-launch { position: fixed; right: 12px; bottom: 12px; z-index: 10001; padding: .55rem .8rem; border: 1px solid #d5ad52; border-radius: .6rem; color: #f7f0db; background: #09282d; font: inherit; font-size: .75rem; }
.navigation-diagnostics-dialog { width: min(48rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.2rem; border: 1px solid #d5ad52; border-radius: 1rem; color: #f7f0db; background: #09282d; }
.navigation-diagnostics-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.navigation-diagnostics-dialog h2 { margin: 0; color: #d5ad52; }
.navigation-diagnostics-dialog p { font-size: .8rem; }
.navigation-diagnostics-dialog textarea { display: block; width: 100%; height: min(50dvh, 30rem); margin-bottom: .8rem; padding: .7rem; color: #e8f1ed; background: #061a1f; font-size: .75rem; }
.navigation-diagnostics-dialog button { margin-right: .5rem; padding: .6rem 1rem; border: 1px solid #d5ad52; border-radius: .5rem; color: #f7f0db; background: #0b5145; font: inherit; }
.dashboard-shell { display: grid; grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(135deg, #eceeef, #f8f9fa 62%, #e5e7e9); }
.sidebar { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100vh; padding: 30px 20px 22px; color: white; background: linear-gradient(180deg, #003a6d, #00284f); z-index: 10; box-shadow: 3px 0 18px rgba(0,32,65,.12); }
.sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: 0 8px 45px; font-size: 1.45rem; font-weight: 300; letter-spacing: -.04em; }
.sidebar-brand strong { color: #bed8ea; }
.sidebar-brand > span { display: block; line-height: 1.05; }
.sidebar-brand-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; max-width: 100%; }
.sidebar-brand-meta #sidebar-license-tier { margin: 0; color: rgba(240,216,138,.68); font-size: .46rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-app-version { margin: 0; color: rgba(240,216,138,.88); font-size: .55rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.sidebar-app-version #app-version { position: relative; top: -.1em; }
.sidebar-app-version #app-build { color: rgba(255,255,255,.56); font-size: .5rem; font-weight: 500; }
.mini-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(255,255,255,.08); }
.mini-mark svg { width: 27px; fill: none; stroke: #d2e4f0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav { position: relative; display: grid; gap: 7px; }
.nav-group { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; border: 0; border-radius: 10px; color: rgba(255,255,255,.67); text-align: left; background: transparent; font-weight: 650; }
.nav-item { touch-action: manipulation; }
.nav-item > * { pointer-events: none; }
.nav-subitem { margin-left: 18px; width: calc(100% - 18px); padding-block: 10px; font-size: .76rem; font-weight: 600; }
.nav-subitem > span { font-size: .95rem; }
.nav-item > span[aria-hidden="true"] { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; color: #b9d5e8; text-align: center; font-size: 1.15rem; }
.nav-item .nav-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-item > #patient-nav-label { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: rgba(194,218,235,.16); box-shadow: inset 3px 0 #bed8ea; }
.sidebar-legal-link { align-self: flex-start; margin-top: .45rem; margin-left: 4px; color: rgba(255,255,255,.68); }
.sidebar-legal-link:hover, .sidebar-legal-link:focus-visible { color: #fff; }

.workspace { position: relative; min-width: 0; }
.main-scroll-hint {
  position: fixed; left: var(--main-scroll-hint-center, 50%); bottom: var(--main-scroll-hint-bottom, max(18px, env(safe-area-inset-bottom))); z-index: 20;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; max-width: min(calc(100vw - 24px), var(--main-scroll-hint-available-width, 100vw)); min-height: 38px; box-sizing: border-box; padding: 8px 18px;
  transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--ui-color-text) 24%, transparent); border-radius: 999px; color: var(--ui-color-text); font: inherit; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--ui-color-surface-soft) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18); pointer-events: auto;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.main-scroll-hint[hidden] { display: none; }
.main-scroll-hint:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: 3px; }
.main-scroll-hint-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: .875rem; font-weight: 550; line-height: 1.2; white-space: nowrap; }
.main-scroll-hint-chevron { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--ui-color-gold); opacity: .9; transition: transform 200ms ease; }
.main-scroll-hint-chevron svg { display: block; width: 16px; height: 16px; animation: main-scroll-hint-bob 4s ease-in-out infinite; }
.main-scroll-hint:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ui-color-surface-soft) 92%, var(--ui-color-text)); border-color: color-mix(in srgb, var(--ui-color-text) 40%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, .24); }
.main-scroll-hint:is(:hover, :focus-visible) .main-scroll-hint-chevron { transform: translateY(3px); }
@keyframes main-scroll-hint-bob { 0%, 20%, 100% { transform: translateY(0); } 10% { transform: translateY(3px); } }
.measurement-loading-notice {
  position: fixed; top: max(1rem, env(safe-area-inset-top)); left: 50%; z-index: 30;
  max-width: min(30rem, calc(100vw - 2rem)); padding: .7rem 1rem;
  transform: translateX(-50%); border: 1px solid rgba(226, 194, 117, .72); border-radius: 999px;
  color: #f7e5ac; background: rgba(7, 42, 47, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .84rem; line-height: 1.3; text-align: center; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .main-scroll-hint, .main-scroll-hint-chevron { transition: none; }
  .main-scroll-hint-chevron svg { animation: none; }
  .main-scroll-hint:is(:hover, :focus-visible) .main-scroll-hint-chevron { transform: none; }
}
.topbar { position: relative; display: flex; align-items: center; min-height: 58px; padding: 0 clamp(20px, 3vw, 40px); border-bottom: 1px solid #d7dce0; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.topbar-title { display: none; }
.trial-status {
  position: relative; isolation: isolate; display: inline-flex; flex: 0 1 auto; align-items: baseline; gap: .4rem;
  min-width: 0; max-width: 100%; margin: 0 auto 0 0; padding: 4px 0;
  border: 0; border-radius: 0; color: var(--ui-color-text); background: transparent;
  font: inherit; font-size: .85rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9); cursor: pointer;
}
.trial-status::before {
  content: ""; position: absolute; z-index: -1; inset: -4px -10px; border-radius: 50%;
  background: rgba(0, 14, 20, .72); filter: blur(9px); pointer-events: none;
}
.trial-status:hover { color: #fff; }
.trial-status:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: 5px; }
.trial-status[hidden] { display: none; }
.trial-status span, .trial-status strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trial-status span { font-weight: 600; }
.trial-status span[aria-hidden="true"] { flex: 0 0 auto; }
.trial-status strong { font-size: inherit; font-weight: 500; }
.topbar-title strong, .topbar-title small { display: block; }
.topbar-title strong { font-size: .95rem; }
.topbar-title small { margin-top: 2px; color: #839397; font-size: .69rem; }
.account-menu { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.account-menu button { min-height: 34px; margin-left: 0; padding: 6px 10px; border: 1px solid #d5dce1; border-radius: 7px; color: #526675; background: #fff; font-size: .69rem; font-weight: 700; }
.account-menu button:hover { border-color: #afbec9; background: #f5f7f8; }
.account-menu .fullscreen-button { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-700); }
.fullscreen-button > span:first-child { font-size: 1rem; line-height: 1; }
.mobile-menu { display: none; margin-right: 12px; border: 0; background: transparent; color: var(--teal-900); font-size: 1.25rem; }
.mobile-home, .mobile-logout { display: none; }
.workspace-content { width: 100%; max-width: none; margin: 0; padding: clamp(32px, 5vw, 64px); }
.personal-overview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: clamp(1rem, 2.5dvh, 1.75rem); overflow-y: auto; padding: .25rem; }
.personal-overview-header h1 { margin: .4rem 0 .6rem; font-size: clamp(1.65rem, 2.8vw, 2.5rem); line-height: 1.2; color: var(--ui-color-text-heading-emphasis); }
.personal-overview-header > p:last-child { margin: 0; color: var(--ui-color-text-muted); }
.personal-overview-results, .personal-overview-help > article { border: 1px solid var(--ui-color-border); border-radius: 1rem; background: var(--ui-color-surface-input); padding: clamp(1rem, 2vw, 1.75rem); }
.personal-overview-results { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; border-top: 2px solid var(--ui-color-gold); }
.personal-overview-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1rem; background: color-mix(in srgb, var(--ui-color-accent) 20%, transparent); color: var(--ui-color-gold); }
.personal-overview-icon svg { width: 2.25rem; height: 2.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.personal-overview-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ui-color-text); }
.personal-overview-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ui-color-accent); }
.personal-overview h2 { margin: .65rem 0; font-size: 1.2rem; color: var(--ui-color-text-heading-emphasis); }
.personal-overview p { line-height: 1.55; overflow-wrap: anywhere; }
.personal-overview-results p { max-width: 58rem; margin: .65rem 0 0; }
.personal-overview-note { color: var(--ui-color-text-muted); font-size: .85rem; }
.personal-overview-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.personal-overview-help > article { display: flex; flex-direction: column; align-items: start; }
.personal-overview-help h2 { margin-top: 0; font-size: 1.05rem; }
.personal-overview-help p { margin: 0 0 1rem; font-size: .9rem; color: var(--ui-color-text-muted); }
.personal-overview-help button { margin-top: auto; }
@media (max-width: 680px) {
  .personal-overview { overflow: visible; }
  .personal-overview-results, .personal-overview-help { grid-template-columns: minmax(0, 1fr); }
  .personal-overview-results { gap: .6rem; }
  .personal-overview-help button { width: 100%; }
}
@media (min-width: 951px) {
  .dashboard-shell[data-active-page="overview"] .topbar-title {
    display: block;
    margin-right: auto;
  }
  .dashboard-shell[data-active-page="overview"] .topbar-title strong {
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    letter-spacing: -.045em;
    line-height: 1;
  }
  .dashboard-shell[data-active-page="overview"] .topbar-title small,
  .dashboard-shell[data-active-page="overview"] #page-overview .page-heading {
    display: none;
  }
  .dashboard-shell[data-active-page="overview"] .workspace-content {
    height: calc(100% - 58px);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
  }
  #page-overview:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #page-overview .module-card {
    min-height: clamp(8rem, 18dvh, 10rem);
  }
  #page-overview .summary-row {
    margin-top: auto;
    margin-bottom: clamp(1.25rem, 3dvh, 2rem);
  }
  #page-overview .summary-card {
    padding: clamp(1rem, 2dvh, 1.25rem);
  }
  .dashboard-shell[data-active-page="patients"] .topbar-title,
  .dashboard-shell[data-active-page="hardware"] .topbar-title,
  .dashboard-shell[data-active-page="setup"] .topbar-title {
    display: block;
    margin-right: auto;
  }
  .dashboard-shell[data-active-page="patients"] .topbar-title strong,
  .dashboard-shell[data-active-page="hardware"] .topbar-title strong,
  .dashboard-shell[data-active-page="setup"] .topbar-title strong {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    letter-spacing: -.035em;
    line-height: 1;
  }
  .dashboard-shell[data-active-page="patients"] .topbar-title small,
  .dashboard-shell[data-active-page="hardware"] .topbar-title small,
  .dashboard-shell[data-active-page="setup"] .topbar-title small {
    display: none;
  }
  .dashboard-shell[data-active-page="patients"] .workspace-content,
  .dashboard-shell[data-active-page="hardware"] .workspace-content,
  .dashboard-shell[data-active-page="setup"] .workspace-content {
    height: calc(100% - 58px);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
  }
  #page-patients:not([hidden]),
  #page-hardware:not([hidden]),
  #page-setup:not([hidden]) {
    height: 100%;
    min-height: 0;
  }
  #page-patients:not([hidden]),
  #page-setup:not([hidden]) {
    display: flex;
    flex-direction: column;
  }
  #page-hardware:not([hidden]) {
    display: flex;
  }
  #page-patients .data-panel,
  #page-setup .settings-grid,
  #page-hardware .hardware-setup-layout {
    flex: 1 1 auto;
    min-height: 0;
  }
}
#page-hardware .hardware-setup-layout { flex: 1 1 auto; min-height: 0; width: 100%; gap: clamp(1rem, 2vw, 1.4rem); }
#page-hardware .hardware-setup-card { min-height: 0; padding: clamp(1.1rem, 2.5dvh, 1.75rem); }
#page-hardware .hardware-setup-card > div > p:last-child { margin-bottom: clamp(.8rem, 2dvh, 1.4rem); }
.hardware-management-dialog .hardware-management-content {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: var(--base-dialog-gap, 1rem);
  overflow: hidden;
}
.hardware-management-dialog .hardware-setup-layout { height: 100%; }
.hardware-management-dialog .hardware-setup-card {
  padding: clamp(.85rem, 2dvh, 1.25rem);
  overflow: hidden;
}
.hardware-management-dialog .hardware-setup-card:last-child { overflow-y: auto; }
.hardware-management-dialog .hardware-setup-card > div > p:last-child { margin-bottom: clamp(.6rem, 1.5dvh, .85rem); }
.hardware-management-dialog .hardware-form { gap: clamp(.55rem, 1.2dvh, .75rem); padding: clamp(.65rem, 1.5dvh, .85rem); }
.hardware-management-dialog .hardware-form label { gap: .35rem; }
.hardware-management-dialog .hardware-form :is(input, select, .custom-select-trigger) {
  height: clamp(2.75rem, 7dvh, 3.25rem);
  min-height: clamp(2.75rem, 7dvh, 3.25rem);
}
.hardware-management-dialog #hardware-limit { margin: .45rem 0 .25rem; }
.hardware-management-dialog #hardware-message { margin-top: .35rem; }
.hardware-management-dialog #hardware-message:empty { display: none; }
#page-setup .page-heading { flex: 0 0 auto; margin-bottom: clamp(.65rem, 1.5dvh, 1rem); }
#page-setup .page-heading .section-label { margin-bottom: .25rem; }
#page-setup .page-heading h1 { margin-bottom: .25rem; font-size: clamp(1.8rem, 3dvh, 2.35rem); }
#page-setup .page-heading p:last-child { font-size: clamp(.72rem, 1.6dvh, .88rem); }
#page-setup .settings-grid { flex: 1 1 auto; min-height: 0; }
#page-setup .settings-overview-card { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; }
#page-setup .settings-row {
  min-height: 0;
  grid-template-columns: minmax(15rem, .8fr) minmax(20rem, 1.2fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(.75rem, 1.8dvh, 1.2rem);
}
#page-setup .settings-card-heading { gap: clamp(.65rem, 1.4vw, 1rem); }
#page-setup .settings-card-heading > span { flex-basis: clamp(2.4rem, 5dvh, 3rem); width: clamp(2.4rem, 5dvh, 3rem); height: clamp(2.4rem, 5dvh, 3rem); }
#page-setup .settings-card h2 { margin-bottom: .3rem; font-size: clamp(.9rem, 2.1dvh, 1.15rem); }
#page-setup .settings-card-heading p:last-child { font-size: clamp(.65rem, 1.55dvh, .77rem); line-height: 1.4; }
#page-setup .language-select-field select { height: clamp(2.35rem, 5.5dvh, 2.75rem); }
#page-setup .archive-folder-status,
#page-setup .pwa-install-status { padding: clamp(.55rem, 1.4dvh, .85rem); }
#page-setup .archive-settings-controls,
#page-setup .pwa-install-controls { gap: clamp(.45rem, 1dvh, .75rem); }
#page-setup .settings-help { font-size: clamp(.6rem, 1.35dvh, .7rem); line-height: 1.4; }
.setup-tile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  flex: 0 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-top: 2px solid var(--ui-color-gold);
  border-radius: var(--base-dialog-radius, 1rem);
  background: var(--ui-color-surface);
  box-shadow: 0 20px 54px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025);
}
.setup-tile-wrapper { display: contents; }
#customer-account-tile-wrapper > .setup-tile { order: 1; }
#open-billing-setup { order: 2; }
#open-hardware-setup { order: 3; }
#open-communication-email-setup { order: 4; }
#open-system-setup { order: 5; }
#open-language-setup { order: 6; }
#open-app-mode-setup { order: 7; }
#page-setup .setup-tile {
  width: 100%;
  min-height: clamp(4.7rem, 10dvh, 5.5rem);
  padding: clamp(.75rem, 1.8dvh, 1rem) clamp(1rem, 2vw, 1.4rem);
  border: 0;
  border-bottom: 1px solid var(--ui-color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
#page-setup #open-app-mode-setup { border-bottom: 0; }
#page-setup .setup-tile:hover {
  z-index: 1;
  transform: none;
  border-color: var(--ui-color-border);
  background: color-mix(in srgb, var(--ui-color-accent) 9%, transparent);
  box-shadow: inset 3px 0 var(--ui-color-gold);
}
#page-setup .setup-tile .module-icon { width: 3rem; height: 3rem; border-radius: .75rem; font-size: 1.35rem; }
#page-setup .setup-tile .module-copy { min-width: 0; gap: .2rem; }
#page-setup .setup-tile .module-copy strong { margin: 0; font-size: clamp(1rem, 1.6vw, 1.15rem); }
#page-setup .setup-tile .module-copy span { font-size: clamp(.72rem, 1vw, .82rem); line-height: 1.4; }
#page-setup .setup-tile .module-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.setup-detail-dialog { width: min(calc(100% - 2rem), 48rem); }
.setup-dialog-content { display: grid; gap: var(--ui-dialog-content-gap); padding: clamp(1.25rem, 3dvh, 1.9rem); }
.setup-dialog-content > .modal-header { margin-bottom: 0; }
.setup-detail-dialog form { padding: 0; border: 0; background: transparent; box-shadow: none; }
.setup-detail-dialog .settings-row { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0; border: 0; }
.setup-detail-dialog .settings-card-heading > span { display: none; }
.setup-detail-dialog .settings-card-heading { display: block; }
.setup-detail-dialog .settings-card-heading h2 { margin: 0 0 .45rem; font-size: 1.2rem; }
.setup-detail-dialog .language-settings-card .settings-card-heading { display: none; }
.setup-detail-dialog .language-select-field { margin-top: .25rem; }
.language-wheel-shell,
.result-parameter-wheel-shell { display: none; }

/* Wiederverwendbare vertikale Auswahlwalze. Die Positionen werden von der
   Komponente gesetzt; Perspektive, Fokus und aktive Ebene bleiben rein
   visuelle Eigenschaften und können in weiteren Dialogen wiederverwendet
   werden. */
.wheel-picker {
  --wheel-picker-item-height: 52px;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 11.25rem;
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 92% 58% at 50% 50%, color-mix(in srgb, var(--ui-color-accent) 15%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-color-surface) 72%, #000) 0%, var(--ui-color-surface-raised) 50%, color-mix(in srgb, var(--ui-color-surface) 72%, #000) 100%);
  box-shadow: inset 0 1.25rem 2rem rgba(0,0,0,.22), inset 0 -1.25rem 2rem rgba(0,0,0,.22);
  perspective: 620px;
}

.wheel-picker-viewport {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 20%, #000 80%, transparent 100%);
  perspective: 520px;
  transform-style: preserve-3d;
}

.wheel-picker.dragging .wheel-picker-viewport { cursor: grabbing; }

.wheel-picker-center {
  position: absolute;
  z-index: 130;
  top: 50%;
  right: .65rem;
  left: .65rem;
  height: var(--wheel-picker-item-height);
  border: 1px solid color-mix(in srgb, var(--ui-color-gold) 72%, transparent);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--ui-color-accent) 8%, transparent);
  box-shadow: 0 .7rem 1.7rem rgba(0,0,0,.2), inset 0 0 0 1px color-mix(in srgb, var(--ui-color-gold) 10%, transparent);
  pointer-events: none;
  transform: translateY(-50%);
}

.wheel-picker-option {
  position: absolute;
  top: 50%;
  right: .8rem;
  left: .8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  height: var(--wheel-picker-item-height);
  margin-top: calc(var(--wheel-picker-item-height) / -2);
  padding: .4rem .85rem;
  border: 1px solid transparent;
  border-radius: .8rem;
  color: var(--ui-color-text);
  background: color-mix(in srgb, var(--ui-color-surface-raised) 70%, transparent);
  text-align: left;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  transition: transform 210ms cubic-bezier(.2,.75,.25,1), opacity 180ms ease, filter 180ms ease, border-color 180ms ease, background 180ms ease;
}

.wheel-picker.dragging .wheel-picker-option { transition: none; }

.wheel-picker-option strong {
  overflow: hidden;
  color: var(--ui-color-text);
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wheel-picker-option-index {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-color-gold) 36%, transparent);
  border-radius: 50%;
  color: var(--ui-color-text-muted);
  background: color-mix(in srgb, var(--ui-color-gold) 10%, var(--ui-color-surface));
  font-size: .66rem;
  font-weight: 850;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.wheel-picker-option[aria-selected="true"] {
  color: var(--ui-color-text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-color-accent) 28%, var(--ui-color-surface-raised)), color-mix(in srgb, var(--ui-color-surface) 86%, transparent));
}

.wheel-picker-option[aria-selected="true"] .wheel-picker-option-index {
  border-color: var(--ui-color-gold-light);
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-gold-light);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--ui-color-gold) 28%, transparent);
}

.wheel-picker-option:focus-visible {
  outline: 2px solid var(--ui-color-gold-light);
  outline-offset: -2px;
}

.wheel-picker:focus-within .wheel-picker-center {
  border-color: var(--ui-color-gold-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-color-gold) 18%, transparent), 0 .7rem 1.7rem rgba(0,0,0,.2);
}

.wheel-picker-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 1.25rem;
  color: var(--ui-color-gold-light);
}

.wheel-picker-scroll-hint > span {
  font-size: .85rem;
  line-height: 1;
}

.wheel-picker-scroll-hint > i {
  width: 2.8rem;
  height: .18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ui-color-gold), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .wheel-picker-option { transition-duration: 0ms; }
}
.setup-detail-dialog .archive-settings-controls,
.setup-detail-dialog .pwa-install-controls { grid-template-columns: minmax(0, 1fr) auto; }
.customer-account-setup-dialog form { padding: 0; }
.customer-account-setup-dialog #customer-account-dialog-status .settings-card-heading,
.customer-account-setup-dialog #open-customer-account-setup { display: none; }
.customer-account-setup-dialog #customer-account-dialog-status .settings-row { padding: 0; }
.customer-account-setup-actions { display: flex; justify-content: flex-end; }
.customer-account-setup-actions .primary-button { width: auto; }
@media (max-width: 760px) {
  .setup-tile-grid { grid-template-columns: 1fr; align-content: start; }
  .setup-tile { min-height: 7rem; }
  .setup-detail-dialog .archive-settings-controls,
  .setup-detail-dialog .pwa-install-controls { grid-template-columns: 1fr; }
  .setup-detail-dialog .archive-settings-controls .primary-button,
  .setup-detail-dialog .pwa-install-controls .primary-button { width: 100%; }
  .customer-account-setup-actions .primary-button { width: 100%; }
}
.app-page { animation: page-in 160ms ease-out; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .app-page { animation: none; }
}
.page-heading { margin-bottom: 34px; }
.page-heading.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-heading h1 { margin: 0 0 9px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.05em; }
#page-customer-users > .page-heading,
#page-customer-groups > .page-heading { margin-bottom: 24px; }
#customer-users-heading,
#customer-groups-heading { margin-bottom: 0; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.page-heading h1 span { color: var(--teal-700); }
.page-heading p:last-child { margin: 0; color: var(--muted); }
.account-setup-hint[hidden] { display: none; }
.account-setup-hint {
  display: flex; align-items: center; gap: .45rem;
  min-width: 0; max-width: 16rem; box-sizing: border-box;
  padding: .5rem .75rem;
  border: 1px solid rgba(185, 225, 230, .24); border-radius: 12px;
  color: var(--ui-color-text); background: rgba(56, 102, 108, .42);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.account-setup-hint__copy { display: grid; gap: .08rem; min-width: 0; }
.account-setup-hint__copy strong { color: rgba(255, 255, 255, .94); font-size: .76rem; font-weight: 600; line-height: 1.2; }
.account-setup-hint__copy > span { color: rgba(235, 245, 242, .76); font-size: .67rem; line-height: 1.25; overflow-wrap: anywhere; }
.account-setup-hint__copy > span[hidden] { display: none; }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.overview-measurement-stage { display: grid; flex: 1 1 auto; min-height: 0; place-items: center; padding: clamp(1rem, 4dvh, 3rem) 0; }
.overview-measurement-assistant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(213,173,82,.48);
  border-top: 3px solid rgba(213,173,82,.82);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(5,43,46,.96), rgba(4,27,35,.98));
  box-shadow: 0 22px 54px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.035);
}
.overview-measurement-icon { display: grid; width: clamp(4.5rem, 7vw, 5.5rem); aspect-ratio: 1; place-items: center; border: 1px solid rgba(213,173,82,.42); border-radius: 20px; color: var(--explorer-gold); background: linear-gradient(145deg, #075448, #08765b); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.overview-measurement-icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.overview-measurement-copy .section-label { margin: 0 0 .35rem; color: var(--ui-color-text-heading-emphasis); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.overview-measurement-copy h2 { margin: 0 0 .45rem; color: var(--ui-color-text); font-size: clamp(1.55rem, 2.3vw, 2rem); }
.overview-measurement-copy > p:last-child { max-width: 40rem; margin: 0; color: var(--ui-color-text-muted); line-height: 1.5; }
.overview-measurement-button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-width: 12rem; }
.overview-measurement-button span { color: var(--explorer-gold); font-size: 1.25rem; }
.overview-measurement-steps { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: .35rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(151,194,181,.2); list-style: none; }
.overview-measurement-steps li { display: flex; align-items: center; gap: .65rem; color: var(--ui-color-text-muted); font-size: .78rem; }
.overview-measurement-steps li > span { display: grid; flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid rgba(213,173,82,.52); border-radius: 50%; color: var(--explorer-gold); font-size: .68rem; font-weight: 800; }
.module-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 21px; min-height: 160px; padding: 28px; border: 1px solid #c8cdd1; border-radius: 14px; text-align: left; background: linear-gradient(145deg, #ffffff, #eef0f2); box-shadow: 0 9px 30px rgba(18,43,66,.07), inset 0 1px white; transition: transform 150ms, box-shadow 150ms, border-color 150ms; }
.module-card:hover { transform: translateY(-3px); border-color: #b9d6d3; box-shadow: 0 17px 38px rgba(21,57,61,.1); }
.module-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; color: #064b83; background: #dce8f1; font-size: 1.65rem; }
.setup-card .module-icon { color: #6a7190; background: #eef0f6; }
.module-copy { display: flex; flex-direction: column; }
.module-copy small { color: var(--teal-700); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.module-copy strong { margin: 5px 0 7px; font-size: 1.35rem; }
.module-copy span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.module-arrow { color: #8da5a6; font-size: 1.3rem; }
.summary-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.summary-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 1rem; min-width: 0; padding: 22px; border: 1px solid #dce7e5; border-radius: 14px; background: rgba(255,255,255,.7); }
.summary-card span, .summary-card strong, .summary-card small { display: block; }
.summary-card span { color: #788b8f; font-size: .72rem; font-weight: 700; }
.summary-card strong { margin: 9px 0 5px; color: var(--teal-700); font-size: 1.45rem; }
.summary-card small { color: #96a4a6; font-size: .7rem; }
.summary-card-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-self: stretch; min-width: 0; gap: 0; }
.summary-card-content > strong { align-self: center; margin: 0; overflow-wrap: anywhere; }
.summary-card.muted strong { color: #52666a; font-size: 1rem; }
.hardware-status-card { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.hardware-status-card:hover { border-color: #b8cbc8; background: rgba(246, 250, 249, .9); }
.hardware-status-card:focus-visible { outline: 2px solid var(--explorer-gold); outline-offset: 3px; }

.compact-button { width: auto; min-width: 160px; padding: 0 19px; }
.data-panel { overflow: hidden; border: 1px solid #c9ced3; border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(18,43,66,.07), inset 0 1px white; }
.table-toolbar { display: flex; align-items: center; gap: 20px; padding: 11px 18px; border-bottom: 1px solid #e3ebea; }
.table-toolbar > span { margin-left: auto; color: #829396; font-size: .75rem; }
.search-field { display: flex; align-items: center; gap: 8px; width: min(100%, 330px); padding: 0 12px; border: 1px solid #d4e0de; border-radius: 9px; color: #71898c; background: #f8fbfa; }
.search-field input { width: 100%; height: 35px; padding: 0; border: 0; outline: 0; background: transparent; }
.patient-table-wrap { overflow-x: auto; }
.patient-card-list { display: none; }
.patient-table,
.customer-user-table,
.license-table {
  --table-body-font-size: .8rem;
  --table-heading-font-size: calc(var(--table-body-font-size) * 1.1);
}
.patient-table { width: 100%; border-collapse: collapse; }
.patient-table th:first-child { width: 38%; }
.patient-table th:nth-child(2) { width: 18%; }
.patient-table th:nth-child(3) { width: 18%; }
.patient-table th, .patient-table td { padding: 16px 20px; border-bottom: 1px solid #edf1f0; text-align: left; white-space: nowrap; }
.patient-table th { color: #63778b; background: linear-gradient(#f7f8f9, #edf0f2); font-size: var(--table-heading-font-size); letter-spacing: .055em; text-transform: uppercase; }
.patient-table td { color: #4b5f63; font-size: var(--table-body-font-size); }
.patient-table .patient-name { color: var(--ink); font-weight: 750; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #cbd4dc; border-radius: 8px; color: #526b82; background: linear-gradient(#fff, #f1f3f5); box-shadow: inset 0 1px white; transition: border-color 130ms, color 130ms, background 130ms, transform 130ms; }
.row-actions button:hover { border-color: #7fa2bd; color: var(--teal-700); background: #eaf2f8; transform: translateY(-1px); }
.row-actions button:focus-visible { outline: 3px solid rgba(184,157,79,.55); outline-offset: 2px; }
.row-actions button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-actions button.details { border-color: #9db8cd; color: var(--teal-700); background: #edf4f9; }
.row-actions button.measure { color: #075c89; }
.row-actions button.data { color: #375f86; }
.row-actions button.danger { color: #a33e3e; }
.row-actions button.danger:hover { border-color: #d3a2a2; color: #a33e3e; background: #fff0f0; }
.medical-patient-table { table-layout: auto; }
.medical-patient-table th:first-child,
.medical-patient-table th:nth-child(2),
.medical-patient-table th:nth-child(3) { width: auto; }
.medical-patient-table th:last-child { width: 264px; }
.medical-patient-table th,
.medical-patient-table td { padding-inline: 12px; white-space: normal; overflow-wrap: anywhere; }
.medical-patient-table th { white-space: nowrap; overflow-wrap: normal; }
.medical-patient-table .row-actions { overflow-wrap: normal; }
.medical-patient-table .row-actions button { flex: 0 0 40px; }
.medical-patient-table .row-actions .action-group-start { margin-left: 15px; }
@media (min-width: 681px) and (max-width: 1150px) {
  .medical-patient-table th:last-child { width: 158px; }
  .medical-patient-table th, .medical-patient-table td { padding-inline: 8px; }
  .medical-patient-table .row-actions { flex-wrap: wrap; }
  .medical-patient-table .row-actions .action-group-start { margin-left: 0; }
}
.empty-state { padding: 70px 24px; text-align: center; }
.patient-search-empty { margin: 0; padding: 1.25rem 1.5rem; color: var(--ui-color-text-muted); }
/* Only the patient toolbar wraps; the shared user/group toolbars keep their layout.
   Pagination measures this toolbar's actual height after wrapping. */
#patient-table-toolbar:has(#patient-group-filter:not([hidden])) { flex-flow: row wrap; gap: .6rem 1rem; }
#patient-table-toolbar:has(#patient-group-filter:not([hidden])) #patient-search-field { flex: 1 1 15rem; min-width: 0; width: auto; max-width: 24rem; }
#patient-table-toolbar:has(#patient-group-filter:not([hidden])) #patient-search-field input { min-width: 0; }
#patient-group-filter { display: flex; align-items: center; gap: .5rem; flex: 1 1 14rem; min-width: 0; max-width: 100%; }
#patient-group-filter > span:first-child { flex: 0 1 auto; overflow-wrap: anywhere; }
#patient-group-filter-choice, #patient-group-filter-single { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
#patient-group-filter-choice :is(select, .custom-select) { width: 100%; min-width: 0; }
#patient-group-filter-choice :is(select, .custom-select-trigger) { min-height: 2.65rem; }
#patient-group-filter-choice :is(.custom-select-value, .custom-select-option) { white-space: normal; overflow-wrap: anywhere; }
#patient-table-toolbar:has(#patient-group-filter:not([hidden])) > #add-patient { min-width: 0; max-width: 100%; height: auto; min-height: 2.75rem; white-space: normal; overflow-wrap: anywhere; }
.empty-state > div { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 16px; color: var(--teal-700); background: #e7f5f3; font-size: 1.5rem; }
.empty-state h2 { margin: 18px 0 7px; font-size: 1.15rem; }
.empty-state p { margin: 0 0 21px; color: var(--muted); font-size: .82rem; }
.pagination { display: flex; align-items: center; min-height: 52px; padding: 8px 18px; border-top: 1px solid #e3ebea; color: #718589; background: #fbfcfc; font-size: .74rem; }
.pagination-controls { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.pagination-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d4dfde; border-radius: 7px; color: var(--teal-700); background: white; font-size: 1.05rem; font-weight: 750; }
.pagination-controls button:hover:not(:disabled) { border-color: #8eb9b6; background: #eef8f6; }
.pagination-controls button:disabled { color: #b8c2c3; background: #f5f7f7; cursor: default; }
.pagination-controls strong { min-width: 98px; color: #4c6266; text-align: center; font-size: .73rem; }
.inline-button { display: inline-flex; width: auto; min-width: 130px; padding: 0 17px; }
.coming-soon { display: grid; justify-items: center; max-width: 680px; margin: 60px auto; padding: 60px; border: 1px dashed #b9cecb; border-radius: 20px; text-align: center; background: rgba(255,255,255,.58); }
.coming-soon > span { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px; border-radius: 20px; color: #62777a; background: #e8efee; font-size: 1.8rem; }
.coming-soon h2 { margin: 2px 0 10px; }
.coming-soon p:last-child { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.6; }
.settings-grid { display: block; }
.settings-card { padding: 24px; border: 1px solid #cbd4db; border-radius: 14px; background: linear-gradient(145deg, #fff, #f5f7f8); box-shadow: 0 9px 28px rgba(18,43,66,.06); }
.settings-overview-card { overflow: hidden; padding: 0; }
.settings-row { display: grid; grid-template-columns: minmax(290px, .8fr) minmax(360px, 1.2fr); align-items: center; gap: 34px; padding: 24px; }
.settings-row + .settings-row { border-top: 1px solid #dce4e8; }
.settings-card-heading { display: flex; align-items: flex-start; gap: 16px; }
.settings-card-heading > span { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 11px; color: var(--teal-700); background: #e3edf4; }
.settings-card-heading svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-card h2 { margin: 1px 0 7px; font-size: 1.15rem; }
.settings-card-heading p:last-child, .settings-placeholder > p:last-child { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.language-select-field { display: grid; gap: 7px; margin: 0; }
.language-select-field span { color: #40565f; font-size: .72rem; font-weight: 800; }
.language-select-field select { width: 100%; height: 44px; padding: 0 40px 0 13px; border: 1px solid #c7d4da; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; font-size: .82rem; }
.language-select-field select:focus { outline: 3px solid rgba(20,110,164,.14); border-color: #2378ad; }
.archive-settings-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 12px; }
.pwa-install-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 12px; }
.archive-folder-status { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 15px; border: 1px solid #d8e0e5; border-radius: 10px; background: #f6f8f9; }
.pwa-install-status { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 15px; border: 1px solid #d8e0e5; border-radius: 10px; background: #f6f8f9; }
.archive-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #be7b3c; box-shadow: 0 0 0 4px rgba(190,123,60,.12); }
.pwa-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #be7b3c; box-shadow: 0 0 0 4px rgba(190,123,60,.12); }
.archive-folder-status.ready .archive-status-dot { background: #2d9178; box-shadow: 0 0 0 4px rgba(45,145,120,.12); }
.pwa-install-status.ready .pwa-status-dot { background: #2d9178; box-shadow: 0 0 0 4px rgba(45,145,120,.12); }
.archive-folder-status.unsupported .archive-status-dot { background: #a54d4d; }
.pwa-install-status.unsupported .pwa-status-dot { background: #a54d4d; }
.archive-folder-status strong, .archive-folder-status small, .pwa-install-status strong, .pwa-install-status small { display: block; }
.archive-folder-status strong, .pwa-install-status strong { font-size: .8rem; }
.archive-folder-status small, .pwa-install-status small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.settings-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.archive-settings-controls .form-message { grid-column: 1 / -1; margin: 0; }
.settings-placeholder { text-align: center; }
.settings-placeholder > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 17px; border-radius: 12px; color: #677a89; background: #e9edef; font-size: 1.4rem; }

.modal { width: min(92vw, 38.75rem); max-height: calc(var(--app-available-height) - clamp(1rem, 3dvh, 1.5rem)); padding: 0; overflow: hidden; border: 0; border-radius: 1.2rem; color: var(--ink); background: white; box-shadow: 0 1.75rem 5.6rem rgba(2,32,36,.3); }
/* Alle modalen Dialoge teilen denselben Positionierungsvertrag: unabhängig
   vom darunterliegenden Seiten-Scrollstand liegen sie horizontal und vertikal
   in der Mitte des verfügbaren Bildschirms. Größen- und Scrollregeln bleiben
   weiterhin Sache des jeweiligen Dialogtyps. */
.modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}
.modal::backdrop { background: rgba(4,32,36,.58); backdrop-filter: blur(3px); }
.modal form, #customer-account-setup-form, .confirm-modal { padding: clamp(1.25rem, 3dvh, 1.9rem); }
.detail-modal { padding: clamp(1.25rem, 3dvh, 1.9rem); }
.imprint-dialog { width: min(92vw, 35rem); padding: clamp(1.25rem, 3dvh, 1.9rem); }
.imprint-content { display: grid; gap: 22px; }
.imprint-content section { padding: 18px 20px; border: 1px solid #dce5e4; border-radius: 12px; background: #f8fafb; }
.imprint-content h3 { margin: 0 0 10px; color: #516873; font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; }
.imprint-content address, .imprint-content p { margin: 0; color: #2d444c; font-size: .9rem; font-style: normal; line-height: 1.7; }
.imprint-content a { color: var(--teal-700); font-weight: 700; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-dialog-header-gap); min-height: var(--ui-dialog-header-min-height); margin-bottom: var(--ui-dialog-content-gap); }
.modal-header h2, .confirm-modal h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.icon-button { width: 34px; height: 34px; border: 1px solid #dce5e4; border-radius: 50%; color: #617477; background: white; font-size: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label span { color: #87979a; font-weight: 500; }
.field select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #cad8d7; border-radius: 10px; color: var(--ink); background: #fbfdfd; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 9px; }
.confirm-modal { width: min(calc(100% - 30px), 450px); text-align: center; }
.confirm-modal p { color: var(--muted); line-height: 1.55; }
.ble-setup-progress-dialog {
  width: min(calc(100% - 30px), 510px);
  padding: clamp(1.5rem, 4dvh, 2.2rem);
  text-align: center;
}
.ble-setup-progress-dialog[open] { display: grid; justify-items: center; gap: 18px; }
.ble-setup-progress-indicator {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 20px;
  color: var(--ui-color-accent);
  background: var(--ui-color-success-bg);
}
.ble-setup-progress-indicator span {
  width: 30px;
  height: 30px;
  border: 4px solid color-mix(in srgb, var(--ui-color-accent) 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ble-setup-spin .85s linear infinite;
}
.ble-setup-progress-copy { width: 100%; }
.ble-setup-progress-copy .section-label { margin-bottom: 8px; }
.ble-setup-progress-copy h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.ble-setup-progress-copy > p:not(.section-label) { line-height: 1.55; }
#ble-setup-progress-status { margin: 12px 0 5px; color: var(--ui-color-text); font-weight: 750; }
.ble-setup-progress-hint { margin: 0; color: var(--ui-color-text-muted); font-size: .78rem; }
.ble-setup-progress-steps { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.ble-setup-progress-steps li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--ui-color-border-subtle); border-radius: 10px; color: var(--ui-color-text-muted); background: var(--ui-color-surface-header); font-size: .78rem; font-weight: 700; }
.ble-setup-progress-steps li span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--ui-color-text-muted); background: var(--ui-color-surface-soft); font-size: .7rem; }
.ble-setup-progress-steps li.current { border-color: var(--ui-color-accent); color: var(--ui-color-text); background: var(--ui-color-surface-hover); }
.ble-setup-progress-steps li.current span { color: var(--ui-color-text-inverse); background: var(--ui-color-accent); }
.ble-setup-progress-steps li.completed { color: var(--ui-color-success-text); }
.ble-setup-progress-steps li.completed span { color: var(--ui-color-text-inverse); background: var(--ui-color-accent); }
@keyframes ble-setup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ble-setup-progress-indicator span { animation-duration: 1.8s; } }
.live-stop-confirm-dialog {
  position: fixed;
  inset: 0;
  width: min(92vw, 35rem);
  margin: auto;
  padding: clamp(1.25rem, 3dvh, 2.1rem);
}
.live-stop-confirm-dialog .icon-button { position: absolute; top: 20px; right: 20px; }
.live-stop-confirm-dialog .section-label { margin: 0 0 9px; }
.live-stop-confirm-dialog .warning-mark { margin-top: 2px; }
.live-stop-confirm-dialog .modal-actions { justify-content: center; margin-top: 24px; }
.warning-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; color: #b33d3d; background: #fae8e8; font-size: 1.4rem; font-weight: 800; }
.feature-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 14px; color: var(--teal-700); background: #e2edf5; }
.feature-mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-modal .modal-actions { justify-content: center; }
.results-dialog { width: min(98vw, 93.75rem); max-width: none; height: auto; max-height: min(calc(var(--app-available-height) - 2dvh), 58.75rem); padding: clamp(1rem, 2dvh, 1.2rem) clamp(1rem, 1.5vw, 1.3rem); overflow-y: auto; }
.results-header { margin-bottom: 9px; }
.results-dialog #results-content:not([hidden]) { display: grid; grid-template-areas: "parameters" "heading" "overview" "detail"; gap: clamp(.55rem, 1dvh, .8rem); }
.results-parameter-panel { grid-area: parameters; }
.analysis-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 2px 2px 10px; }
.analysis-results-heading { grid-area: heading; }
.overview-chart-card { grid-area: overview; }
.detail-chart-card { grid-area: detail; }
.analysis-results-heading h3 { margin: 2px 0 0; font-size: .95rem; }
.analysis-results-heading small { color: var(--ui-color-text-muted); font-size: .68rem; }
.results-overview-layout { display: grid; grid-template-columns: clamp(11rem, 15vw, 13.75rem) minmax(0, 1fr); gap: clamp(.5rem, .8vw, .75rem); }
.parameter-panel { padding: 12px; border: 1px solid #cad5dc; border-radius: 12px; background: #f5f7f8; }
.parameter-panel .section-label { margin-bottom: 7px; }
#result-parameter-list { display: grid; gap: 4px; }
#result-parameter-list button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 9px 7px 14px; overflow: hidden; border: 0; border-radius: 7px; color: var(--ui-color-text-muted, #50697c); text-align: left; background: transparent; font-size: .72rem; transition: color 140ms ease, background-color 140ms ease; }
#result-parameter-list button::before { position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; border-radius: 0 3px 3px 0; content: ""; background: var(--ui-color-accent, var(--teal-500)); opacity: 0; }
#result-parameter-list button:hover { color: var(--ui-color-text, var(--teal-700)); background: color-mix(in srgb, var(--ui-color-accent, var(--teal-500)) 6%, transparent); }
#result-parameter-list button.active { color: var(--ui-color-text, white); background: color-mix(in srgb, var(--ui-color-accent, var(--teal-500)) 9%, transparent); font-weight: 750; }
#result-parameter-list button.active::before { opacity: 1; }
#result-parameter-list button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-color-accent, var(--teal-500)) 72%, transparent); outline-offset: 2px; }
#result-parameter-list button small { opacity: .7; font-size: .61rem; }
.chart-card { min-width: 0; overflow: hidden; border: 1px solid #cad5dc; border-radius: 12px; background: #fff; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 7px 14px; border-bottom: 1px solid #e0e6ea; background: #f8f9fa; }
.chart-heading strong, .chart-heading small { display: block; }
.chart-heading strong { font-size: .79rem; }
.chart-heading small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.chart-heading > span { color: #637a8c; font-size: .69rem; font-weight: 700; }
.chart-heading-controls { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 15px; margin-left: auto; }
.chart-heading-controls > span { color: #637a8c; font-size: .69rem; font-weight: 700; white-space: nowrap; }
.chart-legend { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-left: auto; color: #647988; font-size: .61rem; white-space: nowrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.chart-legend i { display: inline-block; width: 15px; height: 2px; border-radius: 2px; background: #2f7caf; }
.chart-legend i.trend { height: 3px; background: #cf3f3f; }
.alpha-control { display: none; grid-template-columns: auto 105px 32px; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #d5dee4; border-radius: 8px; color: #526b7d; background: #fff; font-size: .64rem; font-weight: 750; white-space: nowrap; }
.alpha-control input { width: 105px; accent-color: var(--teal-700); }
.alpha-control output { color: var(--teal-700); text-align: right; font-size: .67rem; font-weight: 800; }
.result-chart { display: block; width: 100%; height: auto; color: var(--teal-700); background: linear-gradient(#fff, #fafbfc); }
.chart-grid-line { stroke: #dfe6ea; stroke-width: 1; }
.chart-axis-label, .chart-date-label { fill: #758897; font-family: inherit; font-size: 12px; }
.chart-line { fill: none; stroke: #2f7caf; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-trend-line { fill: none; stroke: #cf3f3f; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.chart-point { fill: #fff; stroke: #2f7caf; stroke-width: 2; }
.detail-chart .chart-point { pointer-events: none; }
.detail-chart-card { position: relative; }
.measurement-context-menu { position: absolute; z-index: 20; width: min(17.5rem, calc(100vw - 1.5rem)); padding: .5rem; border: 1px solid #cbd7df; border-radius: .8rem; background: #fff; box-shadow: 0 14px 38px rgba(12,42,62,.22); }
.measurement-context-menu[hidden] { display: none; }
.measurement-context-heading { display: none; }
.measurement-context-menu button { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: .7rem; width: 100%; min-height: 2.9rem; padding: .65rem .75rem; border: 0; border-radius: .55rem; color: var(--ink); background: transparent; font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; }
.measurement-context-menu button:hover, .measurement-context-menu button:focus-visible { outline: none; color: #064f82; background: #eaf3f8; }
.measurement-context-menu button + button { margin-top: .15rem; }
.measurement-context-menu .measurement-context-icon { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; color: #126b9e; }
.measurement-context-menu .measurement-context-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.measurement-context-menu .measurement-context-label { min-width: 0; }
.measurement-context-menu button.danger { position: relative; margin-top: .65rem; color: #b23838; }
.measurement-context-menu button.danger::before { content: ""; position: absolute; top: -.4rem; right: .4rem; left: .4rem; height: 1px; background: currentColor; opacity: .24; }
.measurement-context-menu button.danger .measurement-context-icon { color: #b23838; }
.measurement-context-menu button.danger:hover, .measurement-context-menu button.danger:focus-visible { background: #faecec; }
.measurement-context-menu[data-point-menu="true"] .measurement-context-label { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.measurement-context-menu[data-point-menu="true"][data-compact="true"] { padding: .25rem; }
.measurement-context-menu[data-point-menu="true"][data-compact="true"] button { min-height: 2rem; padding: .3rem .5rem; gap: .4rem; }
.measurement-context-menu[data-point-menu="true"][data-columns="2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.measurement-context-menu[data-point-menu="true"][data-columns="2"] button { margin: 0; }
.detail-chart[data-context-menu="measurement"] { cursor: context-menu; }
.measurement-result-dialog { width: min(94vw, 56.25rem); padding: clamp(1.1rem, 2.5dvh, 1.5rem); }
.analysis-report-page ans-result-status-diagram {
  display: block;
  width: min(100%, 58rem);
  margin-inline: auto;
}
.analysis-report-page ans-result-status-diagram[hidden] { display: none; }
.analysis-pdf-dialog .modal-header h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0; }
.result-report-section { margin-block: .7rem; min-width: 0; }
.result-report-section h3 { font-size: 1rem; color: var(--explorer-gold); margin: .5rem 0; }
.result-report-section h4 { margin: .5rem 0 .25rem; }
.result-report-section p { margin: .4rem 0; overflow-wrap: anywhere; }
.personal-report-introduction { color: var(--ui-color-text-muted); }
.personal-report-graphic { margin: .65rem 0; min-width: 0; }
.personal-report-graphic figcaption { margin-top: .45rem; color: var(--ui-color-text-muted); font-size: .78rem; line-height: 1.45; }
.personal-report-plot-frame { min-width: 0; }
.personal-report-sequence-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.personal-report-sequence-actions button { min-height: 2.3rem; padding: .4rem .75rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .5rem; color: var(--ui-color-text-muted); background: var(--ui-color-surface); font-size: .8rem; font-weight: 700; }
.personal-report-sequence-actions button[aria-pressed="true"] { border-color: var(--ui-color-border-accent); color: var(--ui-color-text); background: var(--ui-color-surface-hover); }
.personal-report-graphic ans-status-diagram,
.personal-report-graphic ans-spectrum-diagram { display: block; width: 100%; min-height: 15rem; }
.personal-report-graphic ans-histogram-diagram { display: block; width: 100%; }
.personal-report-graphic ans-rr-dynamics { display: block; width: 100%; }
.personal-report-graphic ans-data-quality { display: block; width: 100%; }
.personal-report-quality-counts { margin: .5rem 0 0; color: var(--ui-color-text-muted); font-size: .88rem; line-height: 1.45; }
.personal-report-poincare { width: 100%; max-height: 21rem; }
.personal-report-identity-line { fill: none; stroke: var(--ui-color-gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.personal-report-artifact-point { fill: #b94848; }
.personal-report-poincare-ellipse { fill: none; stroke: #c4932d; stroke-width: 2; }
.personal-report-axis-label { fill: var(--ui-color-text-muted); font-size: 13px; }
.result-report-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem; margin: 0; }
.result-report-value { min-width: 0; padding: .55rem .7rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .5rem; }
.result-report-value dt { font-size: .8rem; color: var(--ui-color-text-muted); overflow-wrap: anywhere; }
.result-report-value dd { margin: .2rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-report-warning { border-left: 3px solid var(--explorer-gold); padding-left: .6rem; }
.result-report-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .6rem; }
.result-report-plots figure { margin: 0; min-width: 0; }
.result-report-plots figcaption { margin-block: .35rem; font-weight: 700; }
.result-report-plot { display: block; width: 100%; height: min(16rem, max(8rem, calc(var(--dialog-viewport-height, 100dvh) - 18rem))); background: #fbfdfe; border-radius: .5rem; font: .75rem sans-serif; }
.result-report-plot text { fill: #294857; font: inherit; }
.result-report-grid { stroke: #dce7ed; stroke-width: 1; }
.result-report-point { fill: #087f8c; opacity: .7; }
.result-report-line { fill: none; stroke: #087f8c; stroke-width: 1; }
.result-report-actions { display: flex; justify-content: flex-end; margin-top: .6rem; }
.result-report-actions button { max-width: 100%; white-space: normal; }
.analysis-report-page { width: min(100%, 72rem); min-width: 0; margin-inline: auto; padding: 0; }
.analysis-report-page-header { display: none; margin-bottom: 0; }
.analysis-report-page .analysis-report-scroll-content {
  min-width: 0;
  padding: .25rem 0 .75rem;
}
.analysis-report-page #analysis-report-message { margin: 0 0 .75rem; }
.analysis-report-page .result-report-actions { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--ui-color-border-subtle); }
.personal-report-mode-switch {
  display: flex;
  gap: .25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto .8rem;
  padding: .25rem;
  border: 1px solid var(--ui-color-border-subtle);
  border-radius: .75rem;
  background: var(--ui-color-surface);
}
.personal-report-mode-button {
  min-height: 2.5rem;
  padding: .45rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  color: var(--ui-color-text-muted);
  background: transparent;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.personal-report-mode-button[aria-pressed="true"] {
  border-color: var(--ui-color-border-accent);
  color: var(--ui-color-text);
  background: var(--ui-color-surface-hover);
}
.personal-report-mode-button:focus-visible { outline: 2px solid var(--explorer-gold); outline-offset: 2px; }
.sidebar-footer {
  position: relative; display: grid; flex: 0 0 auto; gap: .85rem; min-width: 0;
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--ui-color-text-muted) 18%, transparent);
}
.sidebar-view-mode {
  position: relative; display: grid; flex: 0 0 auto; gap: .45rem; min-width: 0;
  margin-bottom: .85rem; padding-bottom: .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-color-text-muted) 18%, transparent);
}
.sidebar-view-mode-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; padding-inline: .25rem; }
.sidebar-view-mode-label { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; color: var(--ui-color-text-muted); font-size: .78rem; font-weight: 550; line-height: 1.3; }
.sidebar-view-mode-label svg, .sidebar-mode-info svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-mode-help { display: inline-flex; flex: 0 0 auto; }
.sidebar-mode-info { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--ui-color-text-muted); background: transparent; cursor: help; }
.sidebar-mode-info:hover { color: var(--ui-color-gold); background: color-mix(in srgb, var(--ui-color-gold) 8%, transparent); }
.sidebar-mode-info:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: 2px; }
.sidebar-mode-help-text {
  position: absolute; z-index: 30; right: 0; top: calc(100% + .35rem); width: 100%; box-sizing: border-box;
  padding: .65rem .75rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .6rem;
  color: var(--ui-color-text); background: var(--ui-color-surface-raised); box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  font-size: .75rem; line-height: 1.45; overflow-wrap: break-word; hyphens: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.sidebar-mode-help:is(:hover, :focus-within) .sidebar-mode-help-text { opacity: 1; visibility: visible; }
.sidebar-report-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid #36575d;
  border-radius: 7px;
  background: transparent;
}
.sidebar-report-mode-switch .personal-report-mode-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  color: #c5d7d9;
  background: transparent;
  box-shadow: none;
  font: inherit;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.sidebar-report-mode-switch .personal-report-mode-button:not([aria-pressed="true"]):hover { color: #e5efef; background: #1c3b40; }
.sidebar-report-mode-switch .personal-report-mode-button[aria-pressed="true"] {
  color: #e5efef;
  background: #23444a;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-report-mode-switch .personal-report-mode-button { transition: none; }
}
.personal-report-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 .85rem; color: var(--ui-color-text-muted); font-size: .8rem; }
.personal-report-provenance {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin: .8rem var(--personal-report-page-gap, 1rem) 0; padding-block: .6rem;
  color: var(--ui-color-text-muted); font-size: .78rem; line-height: 1.5;
}
.personal-report-provenance-value { min-width: 0; overflow-wrap: anywhere; user-select: text; }
.personal-report-provenance-copy {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  padding: .5rem; border: 1px solid #36575d; border-radius: .4rem;
  color: inherit; background: transparent; cursor: pointer;
}
.personal-report-provenance-copy svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.personal-report-provenance-copy:hover { color: var(--ui-color-text); background: #1c3b40; }
.personal-report-provenance-copy:focus-visible { outline: 2px solid var(--explorer-gold); outline-offset: 2px; }
.personal-report-provenance-status { overflow-wrap: anywhere; }
.personal-report-mobile-copy { display: none; }
.personal-report-section { padding: .2rem 0 1rem; border-bottom: 1px solid var(--ui-color-border-subtle); }
.personal-report-section h1 { margin: .35rem 0 .65rem; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; }
.personal-report-section h2 { margin: .35rem 0 .65rem; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.25; }
.personal-report-section h3 { margin: .6rem 0 .4rem; font-size: 1rem; }
.personal-report-regulation-information { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .55rem; margin: .75rem 0; }
.personal-report-regulation-information > div { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .75rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .6rem; background: var(--ui-color-surface-raised); }
.personal-report-regulation-information strong { font-size: 1.05rem; }
.personal-report-regulation-information small { color: var(--ui-color-text-muted); line-height: 1.45; }
.personal-report-expert-parameters,
.personal-report-methodology { margin-top: .9rem; padding: .8rem; border-radius: .65rem; background: var(--ui-color-surface-raised); }
.personal-report-expert-parameters[hidden],
.personal-report-methodology[hidden],
[data-report-visibility="expert"][hidden] { display: none !important; }
.personal-report-expert-parameters > h3 { margin-top: 0; }
.personal-report-parameter-group,
.personal-report-metadata,
.personal-report-sources { margin-top: .5rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .5rem; background: var(--ui-color-surface); }
.personal-report-parameter-group > summary,
.personal-report-metadata > summary,
.personal-report-sources > summary { padding: .65rem .75rem; color: var(--ui-color-text); font-weight: 750; cursor: pointer; }
.personal-report-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.personal-report-parameter-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: .78rem; }
.personal-report-parameter-table th,
.personal-report-parameter-table td { padding: .55rem .6rem; border-top: 1px solid var(--ui-color-border-subtle); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.personal-report-parameter-table th { color: var(--ui-color-text-muted); font-size: .7rem; }
.personal-report-expert-parameters .personal-report-parameter-table:not(:has(thead th:nth-child(3))) {
  min-width: 0;
  table-layout: fixed;
}
.personal-report-expert-parameters .personal-report-parameter-table:not(:has(thead th:nth-child(3))) :is(th, td) {
  width: 50%;
  overflow-wrap: break-word;
  hyphens: auto;
}
.personal-report-parameter-table small,
.personal-report-metadata-note { color: var(--ui-color-text-muted); }
.personal-report-metadata-note,
.personal-report-sources > p { margin: .65rem .75rem; font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.personal-report-expert-caption { color: var(--ui-color-text-muted); font-size: .8rem; line-height: 1.5; }
.personal-report-unavailable { padding: 1rem; border: 1px solid var(--ui-color-border-subtle); border-radius: .75rem; background: var(--ui-color-surface-raised); }
.personal-report-unavailable h3 { margin-top: 0; }
.personal-report-unavailable p { overflow-wrap: anywhere; }
.personal-report-unavailable h2 { margin-top: 0; }
.personal-report-failure-details { margin-top: 1rem; border-top: 1px solid var(--ui-color-border-subtle); padding-top: .75rem; }
.personal-report-failure-details summary { cursor: pointer; font-weight: 600; }
.personal-report-failure-details code { display: block; overflow-wrap: anywhere; white-space: normal; font-size: .8rem; }
@media (max-width: 720px) {
  .analysis-report-page .personal-report-mobile-copy { display: block; }
  .analysis-report-page .personal-report-desktop-copy,
  .analysis-report-page .personal-report-introduction-desktop { display: none; }
  .analysis-report-page .personal-report-sequence-actions button { flex: 1 1 9rem; }
}
.analysis-pdf-dialog { width: min(94vw, 52rem); }
.analysis-pdf-dialog .analysis-report-pdf-actions { justify-content: flex-start; }
.analysis-report-page .form-message { margin: .75rem 0; color: var(--ui-color-text-muted); }
.analysis-report-page .form-message.error { color: var(--danger); }
.analysis-report-pdf-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.analysis-report-page {
  --personal-report-paper: #fafbf9;
  --personal-report-sheet: #fffdf7;
  --personal-report-ink: #17374b;
  --personal-report-muted: #526b78;
  --personal-report-rule: #d5e3e1;
  --personal-report-accent: #12838a;
  --personal-report-tint: #edf5f1;
  color: var(--personal-report-ink);
  background: var(--personal-report-paper);
}
.analysis-report-page[data-report-mode="simple"] { --personal-report-paper: #0c2a30; --personal-report-ink: #e4efef; }
.analysis-report-page #analysis-report-content[data-report-mode="simple"] {
  --personal-report-paper: #0c2a30;
  --personal-report-sheet: #102f35;
  --personal-report-ink: #e4efef;
  --personal-report-muted: #b3cbd0;
  --personal-report-rule: #36585e;
  --personal-report-accent: #42c7cb;
  --personal-report-tint: #18373c;
  --personal-report-page-gap: clamp(.8rem, 1.7vw, 1.35rem);
  box-sizing: border-box;
  padding: var(--personal-report-page-gap);
  color: var(--personal-report-ink);
  background: var(--personal-report-paper);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 1.15vw, 1.125rem);
  line-height: 1.58;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section {
  display: flow-root;
  margin: var(--personal-report-page-gap) 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--personal-report-rule);
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--personal-report-sheet) 0%, #12363c 100%);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section > h1,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section > h2 {
  max-width: min(100%, 65rem);
  margin: 0 0 .8rem;
  color: var(--personal-report-ink);
  font-family: inherit;
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.025em;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-summary > h1 {
  display: none;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-summary .personal-report-desktop-copy p:first-child,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-summary .personal-report-mobile-copy p:first-child {
  max-width: 56rem;
  color: var(--personal-report-muted);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: normal;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section :is(p, .personal-report-desktop-copy, .personal-report-mobile-copy) {
  max-width: 56rem;
  color: var(--personal-report-muted);
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section > .personal-report-introduction {
  max-width: 56rem;
  margin: .25rem 0 .7rem;
  color: var(--personal-report-muted);
}
.analysis-report-page #analysis-report-content .personal-report-document-title {
  max-width: min(100%, 65rem);
  margin: .2rem var(--personal-report-page-gap, 1rem) calc(var(--personal-report-page-gap, 1rem) * .7);
  color: var(--personal-report-ink);
  font-family: inherit;
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-illustration {
  float: right;
  width: clamp(8rem, 19vw, 14rem);
  max-width: 38%;
  max-height: 12rem;
  object-fit: contain;
  object-position: center;
  margin: -.25rem 0 1rem clamp(1rem, 3vw, 2.5rem);
  opacity: .78;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] :is(.personal-report-variability, .personal-report-rhythm) > .personal-report-illustration {
  width: clamp(9rem, 20vw, 15rem);
  opacity: .86;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-illustration { display: none; }
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-graphic,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information { clear: both; }
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-graphic {
  width: min(100%, 68rem);
  margin: 1.15rem 0 .4rem;
}
.analysis-report-page #analysis-report-content:is([data-report-mode="simple"], [data-report-mode="expert"]) .personal-report-status .personal-report-graphic {
  width: min(100%, 44rem, max(22rem, calc(var(--dialog-viewport-height, 100dvh) - 18rem)));
  margin-inline: auto;
}
.analysis-report-page #analysis-report-content:is([data-report-mode="simple"], [data-report-mode="expert"]) .personal-report-status { container-type: inline-size; }
@container (min-width: 900px) {
  .analysis-report-page #analysis-report-content:is([data-report-mode="simple"], [data-report-mode="expert"]) .personal-report-status .personal-report-graphic {
    float: left;
    width: min(48%, 42rem, max(22rem, calc(var(--dialog-viewport-height, 100dvh) - 18rem)));
    margin: .15rem clamp(1rem, 2.5vw, 2rem) 1rem 0;
  }
  .analysis-report-page #analysis-report-content:is([data-report-mode="simple"], [data-report-mode="expert"]) .personal-report-status > .personal-report-graphic ~ .personal-report-desktop-copy,
  .analysis-report-page #analysis-report-content:is([data-report-mode="simple"], [data-report-mode="expert"]) .personal-report-status > .personal-report-graphic ~ .personal-report-desktop-copy > p {
    max-width: none;
  }
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-graphic-caption {
  color: var(--personal-report-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics {
  max-width: 75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  margin: 1.4rem 0 .4rem;
  border-block: 1px solid var(--personal-report-rule);
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics > .result-report-value {
  padding: .9rem 1rem .95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics > .result-report-value + .result-report-value { border-left: 1px solid var(--personal-report-rule); }
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics dt,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information > div > span {
  color: var(--personal-report-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics dd,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information strong {
  margin-top: .35rem;
  color: var(--personal-report-ink);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.875rem, 2.4vw, 2.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information {
  max-width: 75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0;
  margin: 1.25rem 0 .4rem;
  border-block: 1px solid var(--personal-report-rule);
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information .personal-report-status-value {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.35;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information > div {
  gap: .35rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information > div + div { border-left: 1px solid var(--personal-report-rule); }
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information small {
  color: var(--personal-report-muted);
  font-size: .8rem;
  line-height: 1.5;
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-next {
  margin-block: 1.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 0;
  border-radius: .7rem;
  background: var(--personal-report-tint);
}
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-quality-counts,
.analysis-report-page #analysis-report-content[data-report-mode="simple"] .result-report-warning {
  color: var(--personal-report-muted);
}
.analysis-report-page[data-report-mode="expert"] {
  --personal-report-page-gap: clamp(.8rem, 1.7vw, 1.35rem);
  --personal-report-paper: #0c2a30;
  --personal-report-sheet: #102f35;
  --personal-report-ink: #e4efef;
  --personal-report-muted: #b3cbd0;
  --personal-report-rule: #36585e;
  --personal-report-accent: #42c7cb;
  --personal-report-tint: #18373c;
  color: var(--personal-report-ink);
  background: var(--personal-report-paper);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] {
  --personal-report-page-gap: clamp(.8rem, 1.7vw, 1.35rem);
  --ui-color-text: var(--personal-report-ink);
  --ui-color-text-muted: var(--personal-report-muted);
  --ui-color-border-subtle: var(--personal-report-rule);
  --ui-color-surface: #0c2a30;
  --ui-color-surface-raised: #102f35;
  box-sizing: border-box;
  padding: var(--personal-report-page-gap);
  color: var(--personal-report-ink);
  background: var(--personal-report-paper);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 1.15vw, 1.125rem);
  line-height: 1.58;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-section {
  display: flow-root;
  margin: var(--personal-report-page-gap) 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--personal-report-rule);
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--personal-report-sheet) 0%, #12363c 100%);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-section > :is(h1, h2) {
  max-width: min(100%, 65rem);
  margin: 0 0 .8rem;
  color: var(--personal-report-ink);
  font-family: inherit;
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.025em;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-summary > h1 { display: none; }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-section :is(p, .personal-report-desktop-copy, .personal-report-mobile-copy) {
  max-width: 56rem;
  color: var(--personal-report-muted);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-section > .personal-report-introduction {
  max-width: 56rem;
  margin: .25rem 0 .7rem;
  color: var(--personal-report-muted);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-illustration {
  display: block;
  float: right;
  width: clamp(8rem, 19vw, 14rem);
  max-width: 38%;
  max-height: 12rem;
  margin: -.25rem 0 1rem clamp(1rem, 3vw, 2.5rem);
  object-fit: contain;
  object-position: center;
  opacity: .78;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-variability, .personal-report-rhythm) > .personal-report-illustration {
  width: clamp(9rem, 20vw, 15rem);
  opacity: .86;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-graphic, .personal-report-key-metrics, .personal-report-regulation-information) { clear: both; }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-graphic {
  width: min(100%, 68rem);
  margin: 1.15rem 0 .4rem;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-graphic-caption {
  color: var(--personal-report-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-key-metrics {
  max-width: 75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  margin: 1.4rem 0 .4rem;
  border-block: 1px solid var(--personal-report-rule);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-key-metrics > .result-report-value {
  padding: .9rem 1rem .95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-key-metrics > .result-report-value + .result-report-value { border-left: 1px solid var(--personal-report-rule); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-key-metrics dt, .personal-report-regulation-information > div > span) {
  color: var(--personal-report-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-key-metrics dd, .personal-report-regulation-information strong) {
  margin-top: .35rem;
  color: var(--personal-report-ink);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.875rem, 2.4vw, 2.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-regulation-information {
  max-width: 75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0;
  margin: 1.25rem 0 .4rem;
  border-block: 1px solid var(--personal-report-rule);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-regulation-information > div {
  gap: .35rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-regulation-information > div + div { border-left: 1px solid var(--personal-report-rule); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-regulation-information small {
  color: var(--personal-report-muted);
  font-size: .8rem;
  line-height: 1.5;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-expert-parameters, .personal-report-methodology) {
  margin-top: 1rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--personal-report-rule);
  border-radius: .85rem;
  background: var(--personal-report-tint);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-expert-parameters > h3 { margin-top: 0; color: var(--personal-report-ink); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-parameter-group, .personal-report-metadata, .personal-report-sources) {
  margin-top: .55rem;
  border-color: var(--personal-report-rule);
  border-radius: .65rem;
  background: var(--personal-report-sheet);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-parameter-group, .personal-report-metadata, .personal-report-sources) > summary {
  color: var(--personal-report-ink);
  background: var(--personal-report-sheet);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-table-wrap { scrollbar-color: #527579 #0c2a30; }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-parameter-table { color: var(--personal-report-ink); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-parameter-table :is(th, td) { border-color: var(--personal-report-rule); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-parameter-table th {
  color: var(--personal-report-muted);
  background: #18373c;
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-parameter-table small,
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-metadata-note,
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-expert-caption { color: var(--personal-report-muted); }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-metadata-note,
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-sources > p { overflow-wrap: anywhere; }
.analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-next {
  margin-block: 1.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--personal-report-rule);
  border-radius: .85rem;
  background: var(--personal-report-tint);
}
.analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-quality-counts, .result-report-warning) { color: var(--personal-report-muted); }
@media (max-width: 720px) {
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] { padding: var(--personal-report-page-gap); font-size: 1rem; }
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-section {
    margin-block: .75rem;
    padding: 1rem clamp(.85rem, 3vw, 1.25rem);
    border-radius: .8rem;
  }
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-summary .personal-report-desktop-copy p:first-child,
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-summary .personal-report-mobile-copy p:first-child { font-size: clamp(1.875rem, 7vw, 2.35rem); }
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-illustration { width: clamp(6.5rem, 30vw, 9rem); max-height: 8rem; margin-left: .75rem; }
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-key-metrics,
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] .personal-report-regulation-information { grid-template-columns: minmax(0, 1fr); }
  .analysis-report-page #analysis-report-content[data-report-mode="simple"] :is(.personal-report-key-metrics, .personal-report-regulation-information) > :is(.result-report-value, div) + :is(.result-report-value, div) { border-top: 1px solid var(--personal-report-rule); border-left: 0; }
}
@media (max-width: 720px) {
  .analysis-report-page #analysis-report-content[data-report-mode="expert"] { padding: var(--personal-report-page-gap); font-size: 1rem; }
  .analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-section {
    margin-block: .75rem;
    padding: 1rem clamp(.85rem, 3vw, 1.25rem);
    border-radius: .8rem;
  }
  .analysis-report-page #analysis-report-content[data-report-mode="expert"] .personal-report-illustration { width: clamp(6.5rem, 30vw, 9rem); max-height: 8rem; margin-left: .75rem; }
  .analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-key-metrics, .personal-report-regulation-information) { grid-template-columns: minmax(0, 1fr); }
  .analysis-report-page #analysis-report-content[data-report-mode="expert"] :is(.personal-report-key-metrics, .personal-report-regulation-information) > :is(.result-report-value, div) + :is(.result-report-value, div) { border-top: 1px solid var(--personal-report-rule); border-left: 0; }
}
@media (max-width: 380px) {
  .sidebar-report-mode-switch .personal-report-mode-button { min-height: 2.2rem; padding-inline: .4rem; }
}
@media (max-height: 540px) {
  .sidebar-report-mode-switch .personal-report-mode-button { min-height: 2rem; padding-block: .25rem; }
}
.analysis-report-pdf-actions .form-message { flex: 1 1 16rem; margin: 0; }
.analysis-report-pdf-actions label { display: grid; gap: .2rem; flex: 1 1 12rem; min-width: 0; }
.analysis-report-pdf-actions select { width: 100%; min-width: 0; }
.analysis-report-pdf-actions button { white-space: normal; }
.analysis-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin: 20px 0 0; border: 1px solid #d3dfe6; border-radius: 12px; }
.analysis-details-grid div { min-width: 0; padding: 16px 18px; border-right: 1px solid #dbe4e9; border-bottom: 1px solid #dbe4e9; background: #f8fafb; }
.analysis-details-grid div:nth-child(3n) { border-right: 0; }
.analysis-details-grid dt { color: #708695; font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.analysis-details-grid dd { margin: 6px 0 0; color: var(--ink); font-weight: 750; }
.result-demo-note { margin: 16px 0 0; color: var(--muted); font-size: .72rem; }
.measurement-demo-ecg { display: block; width: 100%; margin-top: 20px; border: 1px solid #cddce5; border-radius: 10px; background: #fbfdfe; }
.ecg-grid-minor { stroke: #e8f0f4; stroke-width: 1; }
.ecg-grid-major { stroke: #cfdee7; stroke-width: 1.4; }
.measurement-demo-ecg-line { fill: none; stroke: #08669c; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.measurement-rhythmogram-dialog { width: min(94vw, 60rem); }
.measurement-rhythmogram-message { min-height: 1.2em; margin: 12px 0 0; color: var(--muted); font-size: .75rem; }
.measurement-rhythmogram-message.error { color: var(--danger); }
.measurement-rhythmogram-chart { display: block; width: 100%; margin-top: 16px; border: 1px solid #cddce5; border-radius: 10px; background: #fbfdfe; }
.rhythmogram-grid { stroke: #dce7ed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rhythmogram-label { fill: #607886; font-size: 22px; font-weight: 650; }
.rhythmogram-axis-title { fill: #294857; font-size: 24px; font-weight: 800; }
.rhythmogram-line { fill: none; stroke: #087f8c; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rhythmogram-point { fill: #d5ad52; stroke: #fffdf8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) {
  .analysis-details-grid { grid-template-columns: 1fr 1fr; }
  .analysis-details-grid div:nth-child(3n) { border-right: 1px solid #dbe4e9; }
  .analysis-details-grid div:nth-child(2n) { border-right: 0; }
}
.chart-point:hover, .chart-point.selected { fill: #0b5f96; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(6,75,131,.45)); }
.chart-selection-outside { fill: rgba(0, 8, 13, .36); pointer-events: none; }
.chart-selection { fill: rgba(213, 173, 82, .23); stroke: var(--explorer-gold); stroke-width: 2; pointer-events: none; vector-effect: non-scaling-stroke; }
.chart-selection-edge { stroke: var(--explorer-gold); stroke-width: 3.4; pointer-events: none; filter: drop-shadow(0 0 3px rgba(213, 173, 82, .72)); }
.chart-selection-drag-target { fill: transparent; cursor: grab; pointer-events: all; touch-action: pan-y; }
.chart-selection-drag-target:active,
#overview-chart.dragging .chart-selection-drag-target { cursor: grabbing; }
.chart-selection-handle { fill: transparent; cursor: ew-resize; pointer-events: all; touch-action: none; }
.chart-selection-handle:focus { outline: none; fill: rgba(182,138,45,.16); }
#overview-chart { touch-action: pan-y; }
#overview-chart.dragging { cursor: grabbing; user-select: none; }
.results-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.5rem, .8vw, .75rem); margin-top: clamp(.5rem, 1dvh, .75rem); }
.report-preview-card { padding: 11px; border: 1px solid #cad5dc; border-radius: 12px; background: #f4f6f7; }
.report-preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.report-preview-heading strong, .report-preview-heading small { display: block; }
.report-preview-heading strong { font-size: .75rem; }
.report-preview-heading small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.report-preview-heading > span { padding: 4px 6px; border-radius: 5px; color: #a63e3e; background: #f7e8e8; font-size: .58rem; font-weight: 800; }
.report-sheet { position: relative; min-height: clamp(12rem, 24dvh, 14rem); padding: .7rem; border: 1px solid #d6dadd; background: white; box-shadow: 0 .3rem 1rem rgba(30,45,56,.12); }
.report-logo { padding-bottom: 8px; border-bottom: 2px solid #0b4e7c; color: #0b4e7c; font-size: .72rem; font-weight: 800; }
.report-logo small { float: right; color: #71808a; font-size: .42rem; font-weight: 600; }
.report-lines { display: grid; gap: 3px; margin: 7px 0; }
.report-lines i { display: block; height: 3px; background: #dfe3e6; }
.report-lines i:nth-child(2) { width: 78%; }
.report-lines i:nth-child(3) { width: 58%; }
.report-gauge { display: grid; place-items: center; width: 68px; height: 68px; margin: 7px auto; border: 8px solid #cfe1d7; border-top-color: #31956c; border-radius: 50%; text-align: center; }
.report-gauge span { color: #185c43; font-size: 1.15rem; font-weight: 800; }
.report-gauge small { margin-top: -6px; color: #74837d; font-size: .38rem; }
.report-sheet svg { display: block; width: 100%; height: 45px; }
.report-sheet svg path { fill: none; stroke: #5b8eb4; stroke-width: 2; }
.report-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 5px; }
.report-table i { height: 18px; background: #e7eef2; }
.report-preview-card > p { margin: 7px 2px 0; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.selected-measurement { display: grid; gap: 2px; text-align: right; }
.selected-measurement strong { color: var(--ui-color-text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.selected-measurement small { color: var(--ui-color-text-muted); }
.chart-help { margin: 0; padding: 6px 14px 7px; border-top: 1px solid #e5eaed; color: #7a8c99; background: #fbfcfc; font-size: .63rem; }
.chart-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--ui-color-border-subtle); background: var(--ui-color-surface-header); }
.chart-action-bar .chart-help { flex: 1 1 auto; padding: 0; border: 0; background: transparent; }
.chart-action-buttons { display: flex; gap: 8px; }
.measurement-actions-button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--ui-color-border-accent); border-radius: 8px; color: var(--ui-color-text); background: color-mix(in srgb, var(--ui-color-accent-strong) 22%, var(--ui-color-surface)); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.measurement-report-button { border-color: var(--ui-color-gold); background: color-mix(in srgb, var(--ui-color-gold) 22%, var(--ui-color-surface)); }
.measurement-actions-button:hover,
.measurement-actions-button:focus-visible { outline: none; border-color: var(--explorer-gold); background: color-mix(in srgb, var(--ui-color-accent-strong) 35%, var(--ui-color-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--explorer-gold) 22%, transparent); }
.chart-point-hit { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.chart-point-hit:focus-visible { outline: none; stroke: var(--explorer-gold); stroke-width: 3; }
.chart-point-selection-guide { stroke: var(--explorer-gold); stroke-width: 2; stroke-dasharray: 6 5; opacity: .72; pointer-events: none; vector-effect: non-scaling-stroke; }
.chart-point-selection-halo { fill: rgba(213, 173, 82, .2); stroke: var(--explorer-gold); stroke-width: 3; pointer-events: none; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(213, 173, 82, .68)); }
.detail-chart .chart-point.selected { fill: #f2c85b; stroke: #fff8dd; stroke-width: 4; filter: drop-shadow(0 0 5px rgba(242, 200, 91, .9)); }
.detail-chart-card .selected-measurement { padding: 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.results-empty { padding: 80px 24px; text-align: center; }
.results-empty > span { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 14px; color: var(--teal-700); background: #e6eff5; font-size: 1.4rem; }
.results-empty h3 { margin: 16px 0 7px; }
.results-empty p { margin: 0; color: var(--muted); font-size: .78rem; }
.patient-analysis-jobs-panel { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--ui-color-results-border); border-radius: 12px; color: var(--ui-color-results-text); background: var(--ui-color-results-panel); }
.patient-analysis-jobs-panel > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.patient-analysis-jobs-panel h3 { margin: 0; font-size: .9rem; }
.patient-analysis-jobs { display: grid; gap: 8px; margin-top: 10px; }
.analysis-job-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--ui-color-results-border); border-radius: 9px; color: var(--ui-color-results-text); background: var(--ui-color-results-card); }
.analysis-job-card > div { display: grid; min-width: 0; gap: 4px; }
.analysis-job-card strong { color: var(--ui-color-results-text); font-size: .76rem; }
.analysis-job-card small { color: var(--ui-color-results-muted); font-size: .64rem; overflow-wrap: anywhere; }
.analysis-job-card > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: var(--ui-color-results-status-text); background: var(--ui-color-results-status-bg); font-size: .62rem; font-weight: 800; }
.analysis-job-card.status-queued > span { color: var(--ui-color-results-success-text); background: var(--ui-color-results-success-bg); }
.analysis-job-card.status-failed > span,
.analysis-job-card.status-manual_attention > span { color: var(--ui-color-results-danger-text); background: var(--ui-color-results-danger-bg); }
.measurement-list-card > span { color: var(--ui-color-results-success-text); background: var(--ui-color-results-success-bg); }
.measurement-list-card.analysis-linked > span { color: var(--ui-color-results-status-text); background: var(--ui-color-results-status-bg); }
.measurement-analysis-button { flex: 0 0 auto; min-height: 2rem; padding: 6px 10px; border: 1px solid var(--explorer-gold, #d5ad52); border-radius: 8px; color: #fffdf8; background: var(--teal-700); font: inherit; font-size: .64rem; font-weight: 800; cursor: pointer; }
.measurement-analysis-button:hover { background: var(--teal-500); }
.measurement-analysis-button:focus-visible { outline: 2px solid var(--explorer-gold, #d5ad52); outline-offset: 2px; }
.measurement-analysis-button:disabled { cursor: wait; opacity: .68; }
.analysis-job-message { margin: 0; color: var(--ui-color-results-muted); font-size: .7rem; }
.analysis-job-message.error { color: var(--ui-color-results-danger-text); }
.patient-analysis-results { display: grid; gap: 10px; margin-top: 10px; }
.analysis-process-dialog { width: min(92vw, 34rem); padding: clamp(1.15rem, 3vw, 1.65rem); }
.analysis-process-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.analysis-process-dismiss { margin-left: auto; }
.analysis-process-intro h2 { margin: 2px 0 0; color: var(--ui-color-gold); font-size: clamp(1.15rem, 3vw, 1.45rem); }
.analysis-process-spinner { width: 38px; height: 38px; flex: 0 0 38px; border: 4px solid color-mix(in srgb, var(--ui-color-accent) 20%, transparent); border-top-color: var(--ui-color-accent); border-radius: 50%; animation: analysis-process-spin .85s linear infinite; }
.analysis-process-status { min-height: 2.6em; margin: 14px 2px 12px; color: var(--ui-color-text-muted); font-size: .78rem; line-height: 1.45; }
.analysis-process-phases { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.analysis-process-phases li { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 11px; border: 1px solid var(--ui-color-border-subtle); border-radius: 10px; color: var(--ui-color-text-muted); background: var(--ui-color-surface-header); transition: border-color 160ms, background 160ms, color 160ms; }
.analysis-process-phases li > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; color: var(--ui-color-text-muted); background: var(--ui-color-surface-soft); font-size: .7rem; font-weight: 850; }
.analysis-process-phases li > div { display: grid; min-width: 0; gap: 2px; }
.analysis-process-phases li strong { font-size: .78rem; }
.analysis-process-phases li small { color: inherit; font-size: .65rem; line-height: 1.35; }
.analysis-process-phases li[data-state="active"] { border-color: var(--ui-color-accent); color: var(--ui-color-text); background: var(--ui-color-surface-hover); box-shadow: inset 3px 0 var(--ui-color-accent); }
.analysis-process-phases li[data-state="active"] > span { color: var(--ui-color-text-inverse); background: var(--ui-color-accent); }
.analysis-process-phases li[data-state="complete"] { color: var(--ui-color-success-text); }
.analysis-process-phases li[data-state="complete"] > span { color: transparent; background: var(--ui-color-accent); }
.analysis-process-phases li[data-state="complete"] > span::after { content: "✓"; color: var(--ui-color-text-inverse); font-size: .85rem; }
.analysis-process-phases li[data-state="failed"] { border-color: var(--ui-color-danger); color: var(--ui-color-danger-text); background: var(--ui-color-danger-bg); box-shadow: inset 3px 0 var(--ui-color-danger); }
.analysis-process-phases li[data-state="failed"] > span { color: var(--ui-color-text-inverse); background: var(--ui-color-danger-text); }
.analysis-process-dialog.failed .analysis-process-spinner { border-color: color-mix(in srgb, var(--ui-color-danger-text) 20%, transparent); border-top-color: var(--ui-color-danger-text); animation: none; }
.analysis-process-dialog.complete .analysis-process-spinner { border-color: var(--ui-color-accent); animation: none; }
.analysis-process-error { margin: 12px 0 0; }
.analysis-process-actions { margin-top: 14px; }
@keyframes analysis-process-spin { to { transform: rotate(360deg); } }
.analysis-result-card { padding: 13px; border: 1px solid var(--ui-color-results-border); border-radius: 10px; color: var(--ui-color-results-text); background: var(--ui-color-results-card); }
.analysis-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.analysis-result-heading > div { display: grid; min-width: 0; gap: 4px; }
.analysis-result-heading strong { color: var(--ui-color-results-text); font-size: .8rem; }
.analysis-result-heading small { color: var(--ui-color-results-muted); font-size: .62rem; overflow-wrap: anywhere; }
.analysis-result-heading > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: var(--ui-color-results-success-text); background: var(--ui-color-results-success-bg); font-size: .62rem; font-weight: 800; }
.analysis-result-card:not(.status-succeeded) .analysis-result-heading > span { color: var(--ui-color-results-danger-text); background: var(--ui-color-results-danger-bg); }
.analysis-result-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.analysis-result-metrics > div { padding: 9px 10px; border: 1px solid var(--ui-color-results-border); border-radius: 8px; background: var(--ui-color-results-panel); }
.analysis-result-metrics dt { color: var(--ui-color-results-muted); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.analysis-result-metrics dd { margin: 4px 0 0; color: var(--ui-color-results-text); font-size: .78rem; font-weight: 800; }
.analysis-result-error, .analysis-result-warning { margin: 10px 0 0; color: var(--ui-color-results-danger-text); font-size: .68rem; line-height: 1.45; }
.analysis-result-warning { color: var(--ui-color-results-muted); }
@media (max-width: 42rem) { .analysis-result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.measurement-wizard, .live-step-dialog { width: min(96vw, 76.9rem); max-height: calc(var(--app-available-height) - clamp(1rem, 3dvh, 1.5rem)); padding: clamp(1.2rem, 3dvh, 1.9rem) clamp(1.4rem, 3vw, 2.1rem); overflow: hidden; }
.live-step-dialog { min-height: min(58dvh, 35rem); }
.measurement-wizard-header { margin-bottom: 16px; }
.measurement-patient { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-bottom: 12px; padding: 9px 14px; border: 1px solid #d8e0e6; border-radius: 9px; background: #f5f7f8; }
.measurement-patient span { color: #738493; font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.measurement-patient strong { font-size: .84rem; }
.measurement-patient small { color: #738493; }
.wizard-step-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.wizard-step-heading > span { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: white; background: var(--teal-700); font-size: .78rem; font-weight: 800; }
.wizard-step-heading h3 { margin: 1px 0 4px; font-size: 1.02rem; }
.wizard-step-heading p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.measurement-options { display: grid; gap: 10px; }
.measurement-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; width: 100%; min-height: 76px; padding: 13px 15px; border: 1px solid #ccd7df; border-radius: 11px; color: var(--ink); text-align: left; background: linear-gradient(#fff, #f7f8f9); transition: border-color 140ms, box-shadow 140ms, transform 140ms; }
.measurement-option:hover:not(:disabled) { border-color: #78a4c4; box-shadow: 0 7px 20px rgba(15,61,98,.09); transform: translateY(-1px); }
.measurement-option-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 10px; color: var(--teal-700); background: #e5eef5; }
.measurement-option svg, .edf-file-picker svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.measurement-option > span:nth-child(2) { display: grid; gap: 4px; }
.measurement-option strong { font-size: .84rem; }
.measurement-option small { color: var(--muted); font-size: .72rem; }
.measurement-option em { padding: 5px 8px; border-radius: 999px; color: #226c59; background: #e5f3ee; font-size: .61rem; font-style: normal; font-weight: 800; }
.measurement-option.locked { border-color: #c9ced2; color: #778187; background: #e7eaec; box-shadow: none; opacity: 1; cursor: not-allowed; }
.measurement-option.locked .measurement-option-icon { color: #7f898f; background: #d8dde0; }
.measurement-option.locked small { color: #7f898f; }
.measurement-option.locked em { color: #687278; background: #d2d7da; }
.wizard-back { margin: 0 0 18px; padding: 0; border: 0; color: var(--teal-700); background: transparent; font-size: .73rem; font-weight: 750; }
.edf-file-picker { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 16px 18px; border: 1px dashed #8ca9bf; border-radius: 11px; color: var(--teal-700); background: #f4f8fb; cursor: pointer; }
.edf-file-picker > span { display: grid; gap: 4px; }
.edf-file-picker strong { font-size: .82rem; }
.edf-file-picker small { color: var(--muted); font-size: .71rem; }
.edf-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.edf-summary { margin-top: 15px; overflow: hidden; border: 1px solid #cddbe4; border-radius: 12px; background: #fff; }
.edf-summary-status { display: flex; align-items: center; gap: 11px; padding: 13px 16px; color: #215f52; background: #edf6f2; }
.edf-summary-status > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: white; background: #2c806d; font-weight: 800; }
.edf-summary-status strong, .edf-summary-status small { display: block; }
.edf-summary-status strong { font-size: .79rem; }
.edf-summary-status small { margin-top: 2px; color: #668078; font-size: .66rem; }
.edf-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.edf-summary dl > div { padding: 14px 16px; border-right: 1px solid #e5eaed; border-bottom: 1px solid #e5eaed; }
.edf-summary dt { margin-bottom: 5px; color: #778895; font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.edf-summary dd { margin: 0; color: #233f58; font-size: .78rem; font-weight: 750; }
.edf-summary > p { margin: 0; padding: 11px 16px; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.edf-technical-details { border-top: 1px solid #e5eaed; }
.edf-technical-details summary { padding: 10px 16px; color: var(--muted); font-size: .7rem; font-weight: 750; cursor: pointer; }
.edf-technical-details[open] summary { border-bottom: 1px solid #e5eaed; }
.edf-technical-details > p { margin: 0; padding: 10px 16px; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.edf-analysis-dialog { width: min(94vw, 53.75rem); max-height: min(calc(var(--app-available-height) - 2dvh), 56.25rem); padding: clamp(1.1rem, 2.6dvh, 1.6rem); overflow-y: auto; }
.edf-analysis-dialog .edf-summary { margin-top: 0; }
.archive-result { display: flex; align-items: center; gap: 11px; margin: -8px 0 14px; padding: 11px 14px; border: 1px solid #cae0d8; border-radius: 9px; color: #215f52; background: #edf6f2; }
.archive-result > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; background: #2c806d; font-weight: 800; }
.archive-result strong, .archive-result small { display: block; }
.archive-result strong { font-size: .75rem; }
.archive-result small { margin-top: 2px; color: #58776f; font-size: .66rem; overflow-wrap: anywhere; }
.measurement-upload-metadata { display: grid; grid-template-columns: 1.35fr 1fr .55fr; align-items: start; gap: 11px; margin: 14px 0; }
.measurement-upload-metadata label { display: grid; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.measurement-time-field { display: grid; gap: 5px; min-width: 0; }
.measurement-time-field > label { display: grid; gap: 5px; min-width: 0; }
.measurement-upload-metadata input { min-width: 0; padding: 9px 10px; border: 1px solid #c6d2da; border-radius: 8px; color: var(--ink); background: #fff; }
.measurement-time-input { display: flex; gap: 5px; }
.measurement-time-input input { flex: 1; }
.measurement-time-warning { border-color: #b46d25 !important; background: #fff8e8 !important; }
.measurement-time-invalid { border-color: #b42318 !important; }
.measurement-time-warning-button { flex: 0 0 28px; width: 28px; height: 28px; align-self: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #b46d25; font-weight: 900; cursor: pointer; }
.measurement-time-warning-text { display: block; grid-column: 1 / -1; margin: .35rem 0 0; font-size: .64rem; font-weight: 650; line-height: 1.4; }
.measurement-time-confirmation { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 7px !important; margin-top: .25rem; color: var(--muted); font-size: .68rem !important; font-weight: 650 !important; line-height: 1.35; }
.measurement-time-confirmation input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; accent-color: var(--ui-color-gold); }
.modal.technical-error-dialog { width: min(calc(100% - 1.5rem), 42rem); padding: clamp(.9rem, 2.5vw, 1.5rem); color: var(--ui-color-text); }
.technical-error-dialog > .modal-header { margin: 0 0 .8rem; }
.technical-error-dialog #technical-error-message { margin: 0 0 .9rem; color: var(--ui-color-text-muted); line-height: 1.5; }
.technical-error-summary { display: grid; gap: .45rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--ui-color-border); border-radius: .7rem; background: var(--ui-color-surface-header); }
.technical-error-summary div { display: grid; grid-template-columns: minmax(7rem, .3fr) minmax(0, 1fr); gap: .65rem; }
.technical-error-summary dt { color: var(--ui-color-text-label); font-size: .78rem; font-weight: 750; }
.technical-error-summary dd { min-width: 0; margin: 0; color: var(--ui-color-text); font-size: .82rem; overflow-wrap: anywhere; }
.technical-error-comment { display: grid; gap: .4rem; margin: .9rem 0; color: var(--ui-color-text-label); font-size: .78rem; font-weight: 750; }
.technical-error-comment textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; padding: .65rem; border: 1px solid var(--ui-color-border); border-radius: .6rem; color: var(--ui-color-text); background: var(--ui-color-surface-input); font: inherit; }
.technical-error-dialog details { min-width: 0; color: var(--ui-color-text); }
.technical-error-dialog details pre { max-height: 15rem; padding: .75rem; overflow: auto; border-radius: .6rem; background: var(--ui-color-surface-code); color: var(--ui-color-text); font-size: .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.technical-error-report-id { display: flex; align-items: center; gap: .65rem; margin-top: .9rem; padding: .75rem; border: 1px solid var(--ui-color-border); border-radius: .7rem; background: var(--ui-color-surface-header); }
.technical-error-report-id strong { flex: 1; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .technical-error-summary div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}
@media (max-height: 520px) {
  .modal.technical-error-dialog { padding-block: .75rem; }
  .technical-error-dialog > .modal-header { margin-bottom: .45rem; }
  .technical-error-dialog #technical-error-message { margin-bottom: .5rem; }
  .technical-error-comment { margin: .5rem 0; }
  .technical-error-comment textarea { min-height: 2.8rem; max-height: 4.5rem; }
}
.analysis-method-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid #dce3e8; }
.analysis-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.analysis-method { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px; min-height: 78px; padding: 14px 15px; border: 1px solid #ccd7df; border-radius: 11px; color: var(--ink); text-align: left; background: linear-gradient(#fff, #f6f8f9); transition: border-color 140ms, box-shadow 140ms, transform 140ms; }
.analysis-method:hover:not(:disabled) { border-color: #78a4c4; box-shadow: 0 7px 20px rgba(15,61,98,.09); transform: translateY(-1px); }
.analysis-method.selected { border-color: var(--teal-700); background: #edf4f9; box-shadow: 0 0 0 2px rgba(6,75,131,.1); }
.analysis-method > span { display: grid; gap: 5px; }
.analysis-method strong { font-size: .82rem; }
.analysis-method small { color: var(--muted); font-size: .69rem; line-height: 1.4; }
.analysis-method em { padding: 5px 8px; border-radius: 999px; color: #226c59; background: #e5f3ee; font-size: .6rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.analysis-method.locked { border-color: #c9ced2; color: #778187; background: #e7eaec; box-shadow: none; opacity: 1; cursor: not-allowed; }
.analysis-method.locked small { color: #7f898f; }
.analysis-method.locked em { color: #687278; background: #d2d7da; }
.analysis-plan { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 15px 16px; border: 1px solid #a9c3d7; border-radius: 10px; color: #153f61; background: #edf5fa; }
.analysis-plan > span { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: white; background: var(--teal-700); font-family: Georgia, serif; font-size: .85rem; font-weight: 800; }
.analysis-plan strong { display: block; font-size: .79rem; }
.analysis-plan p { margin: 5px 0 0; color: #4c687e; font-size: .72rem; line-height: 1.55; }
.analysis-plan small { display: block; margin-top: 8px; color: #315b78; font-size: .67rem; font-weight: 750; overflow-wrap: anywhere; }
.analysis-plan.error { border-color: #d8aaaa; color: #873e3e; background: #fff1f1; }
.analysis-plan.error > span { background: #ad4b4b; }
.analysis-plan.error p { color: #7d5252; }
.edf-analysis-dialog.dialog-paged .edf-upload-actions { display: none; }
.edf-analysis-dialog.dialog-paged.dialog-last-page .dialog-page-status { min-width: 0; width: 0; overflow: hidden; }
.permitted-hardware { display: grid; gap: 10px; }
.hardware-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px; border: 1px solid #ccd7df; border-radius: 10px; background: #f9fafb; }
.hardware-card[type="button"] { width: 100%; color: var(--ink); text-align: left; cursor: pointer; }
.hardware-card[type="button"]:hover { border-color: #78a4c4; background: #f2f7fa; box-shadow: 0 7px 20px rgba(15,61,98,.09); }
.hardware-card strong, .hardware-card small { display: block; }
.hardware-card strong { font-size: .82rem; }
.hardware-card small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.hardware-card > span { padding: 5px 8px; border-radius: 999px; color: #226c59; background: #e5f3ee; font-size: .62rem; font-weight: 800; }
.hardware-empty, .wizard-development-note { padding: 14px; border-radius: 9px; color: var(--muted); background: #f3f5f6; font-size: .73rem; line-height: 1.5; }
.wizard-development-note { margin-top: 14px; }
.live-recorder-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #d4dee4; border-radius: 11px; background: #f5f7f8; }
.live-status-indicator { width: 11px; height: 11px; border-radius: 50%; background: #bd7a39; box-shadow: 0 0 0 5px rgba(189,122,57,.12); }
.live-recorder-status.ready .live-status-indicator { background: #2d9178; box-shadow: 0 0 0 5px rgba(45,145,120,.12); }
.live-recorder-status.recording .live-status-indicator { background: #d13f3f; box-shadow: 0 0 0 5px rgba(209,63,63,.13); animation: live-pulse 1.25s ease-in-out infinite; }
.live-recorder-status.error .live-status-indicator { background: #a94646; box-shadow: 0 0 0 5px rgba(169,70,70,.12); }
.live-recorder-status strong, .live-recorder-status small { display: block; }
.live-recorder-status strong { font-size: .81rem; }
.live-recorder-status small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.live-measurement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 13px 0 0; overflow: hidden; border: 1px solid #d7e0e5; border-radius: 11px; }
.live-measurement-metrics > div { min-width: 0; padding: 13px 15px; border-right: 1px solid #e1e7ea; border-bottom: 1px solid #e1e7ea; background: #fff; }
.live-measurement-metrics dt { margin-bottom: 5px; color: #788895; font-size: .59rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.live-measurement-metrics dd { margin: 0; color: #284154; font-size: .73rem; font-weight: 750; overflow-wrap: anywhere; }
.live-ecg-card { margin-top: 13px; overflow: hidden; border: 1px solid #d7e0e5; border-radius: 11px; background: #fff; }
.live-ecg-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 15px; border-bottom: 1px solid #e1e7ea; }
.live-ecg-heading strong, .live-ecg-heading small { display: block; }
.live-ecg-heading strong { color: #173a59; font-size: .81rem; }
.live-ecg-heading small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.live-ecg-heading label { display: flex; align-items: center; gap: 9px; color: #5d7281; font-size: .66rem; font-weight: 750; white-space: nowrap; }
.live-ecg-heading select { min-width: 105px; min-height: 34px; padding: 0 28px 0 10px; border: 1px solid #cbd8df; border-radius: 8px; color: #173a59; background: #fff; font: inherit; }
.live-ecg-controls { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.live-start-button { min-height: 40px; padding: 0 18px; white-space: nowrap; }
#live-ecg-canvas { display: block; width: 100%; height: clamp(8.5rem, 21dvh, 13rem); }
.live-ecg-card > p { margin: 0; padding: 8px 15px 10px; color: #728694; background: #fbfdfe; font-size: .62rem; line-height: 1.45; }
.live-measurement-message { margin: 11px 0; }
.live-debug-panel { margin-top: 10px; padding: 11px 13px; border: 1px solid #d8e0e5; border-radius: 9px; background: #f5f7f8; }
.live-debug-panel summary { color: #496274; font-size: .7rem; font-weight: 800; cursor: pointer; }
.live-debug-panel pre { max-height: 180px; margin: 10px 0 0; padding: 10px; overflow: auto; border-radius: 7px; color: #294354; background: #e9eef1; font: .65rem/1.5 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.live-measurement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.connection-recorder-name { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 18px 20px; border: 1px solid #d7e0e5; border-radius: 11px; background: #f8fafb; }
.connection-recorder-name span { color: #788895; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.connection-recorder-name strong { color: #173a59; font-size: .85rem; }
.live-quality-dialog .live-ecg-card { margin-top: 8px; }
.live-quality-dialog #live-ecg-canvas { height: clamp(8rem, 19dvh, 11.9rem); }
.ecg-quality-strip { display: grid; grid-template-columns: auto minmax(230px, 1fr) minmax(420px, 1.4fr); align-items: center; gap: 16px; margin-top: 10px; padding: 10px 14px; border: 1px solid #c8d9e2; border-radius: 11px; background: #f5f9fb; }
.ecg-quality-score { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #758b98; line-height: 1; }
.ecg-quality-score strong { font-size: 1.35rem; }
.ecg-quality-score span { font-size: .54rem; font-weight: 750; }
.ecg-quality-summary strong, .ecg-quality-summary small { display: block; }
.ecg-quality-summary strong { color: #173a59; font-size: .77rem; }
.ecg-quality-summary small { margin-top: 4px; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.ecg-quality-strip dl { display: grid; grid-template-columns: .8fr .7fr 1.35fr; margin: 0; }
.ecg-quality-strip dl > div { min-width: 0; padding: 2px 12px; border-left: 1px solid #d8e3e8; }
.ecg-quality-strip dt { color: #788895; font-size: .54rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ecg-quality-strip dd { margin: 4px 0 0; color: #284154; font-size: .65rem; font-weight: 750; overflow-wrap: anywhere; }
.ecg-quality-strip.good { border-color: #9fcbbc; background: #eef8f4; }
.ecg-quality-strip.good .ecg-quality-score { background: #278269; }
.ecg-quality-strip.limited { border-color: #dec68c; background: #fff9eb; }
.ecg-quality-strip.limited .ecg-quality-score { background: #af7628; }
.ecg-quality-strip.poor, .ecg-quality-strip.disconnected { border-color: #dda9a9; background: #fff3f3; }
.ecg-quality-strip.poor .ecg-quality-score, .ecg-quality-strip.disconnected .ecg-quality-score { background: #b54646; }
.ecg-pattern-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; padding: 9px 13px; border: 1px solid #d7e0e5; border-radius: 10px; background: #f8fafb; }
.live-quality-dialog .ecg-pattern-panel { box-sizing: border-box; height: 6.5rem; align-items: flex-start; overflow: hidden; }
.live-quality-dialog .ecg-pattern-panel > div { flex: 0 0 min(19rem, 28%); padding-top: 3px; }
.live-quality-dialog .ecg-pattern-panel ul { max-height: 100%; overflow-y: auto; scrollbar-gutter: stable; }
.ecg-pattern-panel strong, .ecg-pattern-panel small { display: block; }
.ecg-pattern-panel strong { color: #173a59; font-size: .69rem; }
.ecg-pattern-panel small { margin-top: 2px; color: var(--muted); font-size: .57rem; }
.ecg-pattern-panel ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ecg-pattern-panel li { padding: 5px 8px; border-radius: 10px; color: #79531c; background: #fff0c9; font-size: .58rem; font-weight: 800; }
.ecg-pattern-panel li strong, .ecg-pattern-panel li small { color: inherit; font-size: inherit; }
.ecg-pattern-panel li small { max-width: 28rem; font-weight: 600; }
.ecg-pattern-panel li.warning { color: #9a3434; background: #fbe4e4; }
.ecg-pattern-panel li.neutral { color: #536b79; background: #e8eef2; }
.hardware-setup-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; }
.hardware-setup-card { padding: 28px; border: 1px solid #ccd8df; border-radius: 15px; background: #fff; box-shadow: 0 15px 35px rgba(19,55,76,.07); }
.hardware-setup-card h2 { margin: 4px 0 6px; color: var(--ink); }
.hardware-setup-card > div > p:last-child { margin: 0 0 22px; color: var(--muted); }
.hardware-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hardware-form label { display: grid; gap: 7px; color: #294354; font-size: .72rem; font-weight: 750; }
.hardware-form select, .hardware-form input { min-width: 0; height: 48px; padding: 0 13px; border: 1px solid #bdccd5; border-radius: 10px; color: var(--ink); background: #fbfcfc; font: inherit; }
.hardware-serial-field { grid-column: 1 / -1; }
.hardware-form .primary-button { grid-column: 1 / -1; justify-self: end; }
.hardware-form.consumer-hardware-form { grid-template-columns: 1fr; }
.hardware-form.consumer-hardware-form .primary-button { width: 100%; justify-self: stretch; }
.hardware-form .hardware-serial-field[hidden] { display: none; }
.ble-live-summary { display: grid; grid-template-columns: minmax(190px,.65fr) minmax(0,1.35fr); gap: 16px; margin-top: 18px; }
.ble-live-summary[hidden] { display: none; }
.ble-connection-progress { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--ui-color-border-accent); border-radius: 12px; color: var(--ui-color-text); background: var(--ui-color-surface-hover); }
.ble-connection-progress[hidden] { display: none; }
.ble-connection-progress-spinner { width: 23px; height: 23px; border: 3px solid color-mix(in srgb, var(--ui-color-accent) 22%, transparent); border-top-color: var(--ui-color-accent); border-radius: 50%; animation: ble-setup-spin .85s linear infinite; }
.ble-connection-progress strong, .ble-connection-progress small { display: block; }
.ble-connection-progress strong { font-size: .78rem; }
.ble-connection-progress small { margin-top: 3px; color: var(--ui-color-text-muted); font-size: .68rem; line-height: 1.4; }
.ble-connection-progress time { min-width: 3.2rem; color: var(--ui-color-gold-light); text-align: right; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ble-pulse { display: grid; place-items: center; min-height: 175px; padding: 20px; border: 1px solid #bcd9d3; border-radius: 16px; color: #183f40; background: linear-gradient(145deg,#f2fbf8,#e2f4ef); text-align: center; }
.ble-pulse span { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ble-pulse strong { margin: 4px 0; color: #087c69; font-size: clamp(3rem,7vw,5rem); line-height: 1; }
.ble-pulse small { color: #617b7b; }
.ble-live-summary dl { display: grid; gap: 10px; margin: 0; }
.ble-live-summary dl div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 17px; border: 1px solid #d3e0e3; border-radius: 12px; background: #fff; }
.ble-live-summary dt { color: #687d88; font-size: .68rem; font-weight: 750; }
.ble-live-summary dd { margin: 0; color: #203e4e; font-weight: 800; }
.ble-recording-dialog .measurement-countdown { margin-bottom: 12px; }
.ble-measurement-experience {
  --ble-pulse-duration: 3.2s;
  position: relative;
  display: grid;
  min-height: clamp(230px, 30dvh, 320px);
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 58%, var(--ui-color-gold));
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ui-color-accent) 16%, transparent) 0 13%, transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--ui-color-surface-raised) 92%, var(--ui-color-accent)), var(--ui-color-surface));
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--ui-color-accent) 7%, transparent), 0 18px 45px rgba(0,0,0,.16);
  isolation: isolate;
}
.ble-measurement-experience::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ui-color-accent) 18%, transparent), transparent 65%);
  filter: blur(18px);
  animation: ble-ambient-breathe 5.6s ease-in-out infinite;
}
.ble-measurement-aurora {
  position: absolute;
  width: 48%;
  height: 70%;
  border-radius: 50%;
  opacity: .32;
  filter: blur(48px);
  mix-blend-mode: screen;
  animation: ble-aurora-drift 9s ease-in-out infinite alternate;
}
.ble-measurement-aurora-left { left: -12%; top: 4%; background: var(--ui-color-accent); }
.ble-measurement-aurora-right { right: -13%; bottom: -12%; background: var(--ui-color-gold); animation-delay: -4.5s; }
.ble-measurement-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 32%, transparent);
  border-radius: 50%;
  animation: ble-orbit-spin 13s linear infinite;
}
.ble-measurement-orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 67%, color-mix(in srgb, var(--ui-color-gold) 82%, transparent) 78%, transparent 88%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.ble-measurement-orbit i {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-color-gold-light);
  box-shadow: 0 0 8px var(--ui-color-gold), 0 0 22px var(--ui-color-gold);
}
.ble-measurement-orbit-outer { width: min(72vw, 720px); height: min(29dvh, 280px); animation-duration: 18s; }
.ble-measurement-orbit-middle { width: min(54vw, 520px); height: min(23dvh, 220px); border-color: color-mix(in srgb, var(--ui-color-gold) 24%, transparent); animation-duration: 13s; animation-direction: reverse; }
.ble-measurement-orbit-inner { width: min(37vw, 350px); height: min(18dvh, 170px); animation-duration: 9s; }
.ble-live-pulse-display {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(160px, 17vw, 215px);
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  color: var(--ui-color-text);
  text-align: center;
  isolation: isolate;
}
.ble-live-pulse-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 55%, var(--ui-color-gold));
  border-radius: inherit;
  background:
    radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--ui-color-accent) 24%, transparent), transparent 42%),
    color-mix(in srgb, var(--ui-color-surface-raised) 91%, transparent);
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--ui-color-accent) 7%, transparent), 0 0 58px color-mix(in srgb, var(--ui-color-accent) 22%, transparent);
  animation: ble-heartbeat var(--ble-pulse-duration) cubic-bezier(.22,.7,.28,1) infinite;
  backdrop-filter: blur(12px);
}
.ble-live-pulse-display > * { position: relative; z-index: 1; }
.ble-live-pulse-display span { color: var(--ui-color-gold-light); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ble-live-pulse-display strong { margin: .08em 0; color: var(--ui-color-metric-value); font-size: clamp(3.7rem, 7vw, 5.6rem); line-height: .95; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px color-mix(in srgb, var(--ui-color-accent) 25%, transparent); }
.ble-live-pulse-display small { color: var(--ui-color-text-muted); font-size: .72rem; }
.ble-live-status {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-color-text-muted);
  font-size: .68rem;
  font-weight: 700;
}
.ble-live-status > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-color-accent); box-shadow: 0 0 12px var(--ui-color-accent); animation: ble-status-glow 1.8s ease-in-out infinite; }
.ble-measurement-experience.signal-lost .ble-live-status > i { background: var(--ui-color-gold); box-shadow: 0 0 12px var(--ui-color-gold); }
.ble-measurement-experience.complete .ble-measurement-orbit,
.ble-measurement-experience.stopped .ble-measurement-orbit,
.ble-measurement-experience.complete .ble-live-pulse-display::before,
.ble-measurement-experience.stopped .ble-live-pulse-display::before { animation-play-state: paused; }
.ble-measurement-experience.stopped .ble-live-pulse-display > :is(span, strong, small) { visibility: hidden; }
.ble-measurement-experience.stopped .ble-live-pulse-display::before {
  border-color: color-mix(in srgb, var(--ui-color-danger) 72%, var(--ui-color-gold));
  background:
    radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--ui-color-danger) 32%, transparent), transparent 38%),
    radial-gradient(circle at 65% 72%, color-mix(in srgb, var(--ui-color-danger) 15%, transparent), transparent 53%),
    color-mix(in srgb, var(--ui-color-surface-raised) 89%, transparent);
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--ui-color-danger) 9%, transparent), 0 0 42px color-mix(in srgb, var(--ui-color-danger) 31%, transparent);
}
.ble-measurement-experience.stopped .ble-live-pulse-display::after {
  content: "×";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ui-color-danger) 86%, #ffb6aa);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6.5rem, 14vw, 10rem);
  font-weight: 400;
  line-height: .75;
  text-shadow: 0 0 14px color-mix(in srgb, var(--ui-color-danger) 80%, transparent), 0 0 36px color-mix(in srgb, var(--ui-color-danger) 42%, transparent);
  transform: none;
}
@keyframes ble-orbit-spin { to { transform: rotate(360deg); } }
@keyframes ble-ambient-breathe { 0%,100% { opacity: .45; transform: scale(.88); } 50% { opacity: .95; transform: scale(1.12); } }
@keyframes ble-aurora-drift { 0% { transform: translate3d(-4%, -7%, 0) scale(.92); } 100% { transform: translate3d(16%, 10%, 0) scale(1.16); } }
@keyframes ble-heartbeat { 0%,100% { transform: scale(1); box-shadow: 0 0 0 13px color-mix(in srgb, var(--ui-color-accent) 7%, transparent), 0 0 48px color-mix(in srgb, var(--ui-color-accent) 18%, transparent); } 50% { transform: scale(1.02); box-shadow: 0 0 0 14px color-mix(in srgb, var(--ui-color-accent) 6%, transparent), 0 0 56px color-mix(in srgb, var(--ui-color-accent) 23%, transparent); } }
@keyframes ble-status-glow { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ble-measurement-experience::before,
  .ble-measurement-aurora,
  .ble-measurement-orbit,
  .ble-live-status > i { animation: none; }
  .ble-live-pulse-display::before { animation-duration: 4.2s; }
}
.ble-ready-dialog .form-message { min-height: 22px; }
#ble-measurement-message:empty { display: none; }
.ble-recording-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}
.ble-recording-warning {
  display: grid;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border: 1px solid rgba(255, 163, 155, .74);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #d75e56, #a93838);
  box-shadow: 0 .4rem 1rem rgba(167, 56, 56, .25);
  font-size: 1.1rem;
  font-weight: 900;
}
.ble-ready-actions #back-from-ble-ready,
.ble-ready-actions #back-from-ble-sensor { margin-right: auto; }
.licensed-hardware-list { display: grid; gap: 10px; }
.licensed-hardware-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 16px; border: 1px solid #d5dfe5; border-radius: 11px; background: #f8fafb; }
.licensed-hardware-item strong, .licensed-hardware-item small { display: block; }
.licensed-hardware-item small { margin-top: 4px; color: var(--muted); }
.licensed-hardware-item button { min-height: 38px; padding: 0 13px; }
.measurement-countdown { margin: 12px 0 20px; padding: 21px 24px; border: 1px solid #c8dbe7; border-radius: 13px; text-align: center; background: #f3f8fb; }
.measurement-countdown > span { display: block; color: #637a8b; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.measurement-countdown > strong { display: block; margin: 6px 0 13px; color: #07578e; font-size: 2.6rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.measurement-countdown > div { height: 7px; overflow: hidden; border-radius: 999px; background: #dce7ed; }
.measurement-countdown i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #1675aa; transition: width .25s linear; }
.live-recording-dialog {
  width: min(96vw, 76.9rem);
  min-height: 0;
  max-height: calc(var(--app-available-height) - 2dvh);
  padding: clamp(1.1rem, 2.8dvh, 1.75rem) clamp(1.4rem, 3vw, 2.1rem);
  overflow: hidden;
}
.live-recording-dialog[open] { display: flex; flex-direction: column; }
.live-recording-dialog .modal-header { margin-bottom: 14px; }
.live-recording-dialog .measurement-patient { margin-bottom: 14px; padding-block: 9px; }
.live-recording-dialog .wizard-step-heading { margin-bottom: 10px; }
.live-recording-dialog .measurement-countdown { margin: 8px 0 10px; padding: 13px 20px; }
.live-recording-dialog .measurement-countdown > strong { margin: 2px 0 7px; font-size: 2.15rem; }
.live-recording-dialog .live-measurement-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.live-recording-dialog .live-measurement-metrics > div { padding: 10px 13px; }
.live-recording-technical { margin-top: 9px; border: 1px solid #d7e0e5; border-radius: 9px; background: #f7f9fa; }
.live-recording-technical summary { padding: 9px 12px; color: #496274; font-size: .68rem; font-weight: 800; cursor: pointer; }
.live-recording-technical dl { display: grid; grid-template-columns: 2fr 1fr 1fr; margin: 0; border-top: 1px solid #dfe6ea; }
.live-recording-technical dl > div { min-width: 0; padding: 9px 12px; border-right: 1px solid #dfe6ea; }
.live-recording-technical dl > div:last-child { border-right: 0; }
.live-recording-technical dt { margin-bottom: 4px; color: #788895; font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.live-recording-technical dd { margin: 0; color: #284154; font-size: .67rem; font-weight: 750; overflow-wrap: anywhere; }
.live-recording-dialog .live-measurement-message { min-height: 18px; margin: 7px 0 0; }
.live-recording-dialog .live-measurement-actions { margin-top: 8px; }
@keyframes live-pulse { 50% { transform: scale(.78); opacity: .65; } }
.telmed-source-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.telmed-file-fallback { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 17px; border: 1px solid #003c70; border-radius: 11px; color: white; background: linear-gradient(#0a568f, #003d73); box-shadow: 0 10px 24px rgba(0,47,96,.18); font-size: .75rem; font-weight: 750; cursor: pointer; }
.telmed-file-fallback:hover { background: linear-gradient(#12649f, #064b83); transform: translateY(-1px); box-shadow: 0 13px 27px rgba(0,47,96,.24); }
.telmed-file-fallback input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.telmed-import-message { margin: 8px 0 12px; }
.telmed-import-list { display: grid; gap: 11px; }
.telmed-import-card { overflow: hidden; border: 1px solid #ccd8e0; border-radius: 11px; background: #fff; }
.telmed-import-card.error { border-color: #d8aaaa; }
.telmed-import-card.uploaded { border-color: #9fc8b9; }
.telmed-import-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #f4f7f9; }
.telmed-import-card-header strong, .telmed-import-card-header small { display: block; overflow-wrap: anywhere; }
.telmed-import-card-header strong { font-size: .78rem; }
.telmed-import-card-header small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.telmed-file-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #226c59; background: #e5f3ee; font-size: .6rem; font-weight: 800; }
.telmed-import-card.error .telmed-file-state { color: #983b3b; background: #fae8e8; }
.telmed-import-card.uploaded .telmed-file-state { color: #1b6652; background: #dff1ea; }
.telmed-import-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid #e2e8ec; }
.telmed-import-card dl > div { min-width: 0; padding: 11px 13px; border-right: 1px solid #e7ecef; }
.telmed-import-card dt { margin-bottom: 4px; color: #788895; font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.telmed-import-card dd { margin: 0; color: #284154; font-size: .7rem; font-weight: 700; overflow-wrap: anywhere; }
.telmed-detail-success dd { color: #187052; }
.telmed-patient-assignment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid #e2e8ec; }
.telmed-patient-assignment label { color: #536b7c; font-size: .68rem; font-weight: 750; }
.telmed-patient-assignment select { min-width: 0; height: 41px; padding: 0 34px 0 11px; border: 1px solid #bdccd5; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: .71rem; }
.telmed-import-error { margin: 0; padding: 12px 14px; color: #873e3e; background: #fff1f1; font-size: .7rem; line-height: 1.45; }
.telmed-upload-result { margin: 0; padding: 10px 14px; border-top: 1px solid #cfe3dc; color: #1f6653; background: #edf7f3; font-size: .68rem; }
.telmed-upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #dce4e9; }
.telmed-upload-actions > span { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.telmed-upload-actions button:disabled { border-color: #b7bec3; color: #717a80; background: #d8dde0; box-shadow: none; cursor: not-allowed; }
.danger-button { min-height: 49px; padding: 0 17px; border: 1px solid #003c70; border-radius: 11px; color: white; background: linear-gradient(#0a568f, #003d73); box-shadow: 0 10px 24px rgba(0,47,96,.18); font-weight: 750; transition: transform 130ms, box-shadow 130ms, background 130ms; }
.danger-button:hover:not(:disabled) { background: linear-gradient(#12649f, #064b83); transform: translateY(-1px); box-shadow: 0 13px 27px rgba(0,47,96,.24); }
.patient-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 0 24px; border: 1px solid #dfe8e7; border-radius: 13px; background: #dfe8e7; }
.patient-details > div { min-width: 0; padding: 16px 18px; background: #f9fbfb; }
.patient-details dt { margin-bottom: 6px; color: #788b8f; font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.patient-details dd { margin: 0; overflow-wrap: anywhere; color: #263d42; font-size: .9rem; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 681px) and (max-height: 900px) {
  .modal form,
  #customer-account-setup-form,
  .confirm-modal,
  .detail-modal,
  .imprint-dialog { padding: clamp(1rem, 2.5dvh, 1.4rem); }
  .measurement-result-dialog { padding: clamp(1rem, 2.5dvh, 1.4rem); }
  .modal-header { margin-bottom: 11px; }
  .modal-header h2,
  .confirm-modal h2 { font-size: 1.35rem; }
  .modal .field { margin-bottom: clamp(.55rem, 1.6dvh, .8rem); }
  .modal .field label { margin-bottom: .35rem; }
  .modal .field input,
  .modal .field select { height: clamp(2.35rem, 6dvh, 2.7rem); }
  .modal .modal-actions { margin-top: .4rem; }
  .modal .primary-button,
  .modal .secondary-button,
  .modal .danger-button { min-height: clamp(2.35rem, 6dvh, 2.75rem); }
  .imprint-content { gap: 12px; }
  .imprint-content section { padding: 12px 15px; }
  .patient-details { margin-bottom: 14px; }
  .patient-details > div { padding: 11px 14px; }
  .analysis-details-grid { margin-top: 12px; }
  .analysis-details-grid div { padding: 11px 13px; }
  .measurement-demo-ecg { max-height: 300px; margin-top: 12px; }
  .measurement-rhythmogram-chart { margin-top: 12px; }
  .result-demo-note { margin-top: 10px; }

  .measurement-wizard,
  .live-step-dialog {
    min-height: 0;
    max-height: calc(var(--app-available-height) - 2dvh);
    padding: clamp(1rem, 2.2dvh, 1.25rem) clamp(1.2rem, 2.5vw, 1.6rem);
  }
  .measurement-wizard-header { margin-bottom: 9px; }
  .measurement-wizard .measurement-patient,
  .live-step-dialog .measurement-patient { margin-bottom: 8px; padding-block: 7px; }
  .wizard-back { margin-bottom: 9px; }
  .wizard-step-heading { gap: 10px; margin-bottom: 9px; }
  .wizard-step-heading > span { flex-basis: 28px; width: 28px; height: 28px; }
  .wizard-step-heading h3 { margin-top: 0; font-size: .94rem; }
  .wizard-step-heading p { font-size: .69rem; line-height: 1.35; }
  .measurement-options { gap: 7px; }
  .measurement-option { min-height: 58px; padding: 8px 12px; }
  .measurement-option-icon { width: 38px; height: 38px; }
  .measurement-option strong { font-size: .78rem; }
  .measurement-option small { font-size: .66rem; }
  .hardware-card { padding: 11px 13px; }
  .hardware-empty,
  .wizard-development-note { padding: 10px 12px; }
  .wizard-development-note { margin-top: 9px; }

  .live-recorder-status { padding: 10px 13px; }
  .connection-recorder-name { margin-top: 10px; padding: 12px 14px; }
  .live-measurement-actions { margin-top: 9px; }
  .live-debug-panel { margin-top: 7px; padding: 8px 10px; }
  .live-debug-panel pre { max-height: 105px; margin-top: 7px; padding: 8px; }
  .live-quality-dialog .modal-header { margin-bottom: 8px; }
  .ecg-quality-strip { gap: 11px; margin-top: 6px; padding: 7px 11px; }
  .ecg-quality-score { width: 48px; height: 48px; }
  .ecg-quality-score strong { font-size: 1.12rem; }
  .ecg-pattern-panel { margin-top: 6px; padding: 6px 10px; }
  .live-quality-dialog .ecg-pattern-panel { height: 5.8rem; }
  .live-quality-dialog .live-ecg-card { margin-top: 6px; }
  .live-ecg-heading { padding: 8px 11px; }
  .live-quality-dialog #live-ecg-canvas,
  #live-ecg-canvas { height: clamp(7.5rem, 18dvh, 8.7rem); }
  .live-ecg-card > p { padding: 5px 11px 6px; line-height: 1.3; }
  .live-measurement-message { margin: 6px 0; }

  .edf-analysis-dialog { padding: clamp(1rem, 2.2dvh, 1.25rem) clamp(1.1rem, 2.3vw, 1.4rem); }
  .edf-analysis-dialog .measurement-patient { margin-bottom: 8px; }
  .archive-result { margin: -3px 0 8px; padding: 8px 11px; }
  .edf-summary-status { padding: 9px 12px; }
  .edf-summary dl > div { padding: 9px 11px; }
  .edf-summary > p { padding: 7px 11px; }
  .analysis-method-section { margin-top: 12px; padding-top: 11px; }
  .analysis-methods { gap: 8px; }
  .analysis-method { min-height: 58px; padding: 9px 11px; }
  .analysis-plan { margin-top: 8px; padding: 9px 11px; }
  .analysis-plan p { margin-top: 3px; line-height: 1.35; }
  .analysis-plan small { margin-top: 4px; }

  .live-recording-dialog { padding: clamp(1rem, 2.2dvh, 1.25rem) clamp(1.2rem, 2.5vw, 1.6rem); }
  .live-recording-dialog .modal-header,
  .live-recording-dialog .measurement-patient { margin-bottom: 8px; }
  .live-recording-dialog .wizard-step-heading { margin-bottom: 7px; }
  .live-recording-dialog .measurement-countdown { margin: 6px 0 8px; padding: 9px 16px; }
  .live-recording-dialog .measurement-countdown > strong { margin: 1px 0 5px; font-size: 1.8rem; }
  .live-recording-dialog .live-measurement-metrics > div { padding: 8px 11px; }
  .live-recording-technical { margin-top: 7px; }
  .live-recording-technical summary { padding: 7px 10px; }
  .live-recording-dialog .live-measurement-actions { margin-top: 7px; }
}

@media (max-width: 950px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: -270px; width: 250px; transition: left 180ms; box-shadow: 12px 0 35px rgba(4,35,39,.2); }
  .dashboard-shell.menu-open .sidebar { left: 0; }
  .dashboard-shell.menu-open::after { position: fixed; inset: 0; content: ""; background: rgba(3,30,34,.42); z-index: 5; }
  .mobile-menu { display: block; }
  .overview-grid { grid-template-columns: 1fr; }
  .results-overview-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .parameter-panel { padding: 10px; }
  #result-parameter-list { grid-template-columns: 1fr; }
  .results-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .chart-heading { align-items: flex-start; }
  .chart-heading-controls { align-items: flex-end; flex-direction: column; gap: 6px; }
  .settings-row { grid-template-columns: 1fr; gap: 20px; }
  .dashboard-shell[data-active-page="hardware"] .workspace-content { height: auto; overflow: auto; }
  #page-hardware:not([hidden]) { display: block; height: auto; }
  .dashboard-shell[data-active-page="setup"] .workspace-content { height: auto; overflow: auto; }
  #page-setup:not([hidden]) { display: block; height: auto; }
  #page-setup .settings-overview-card { display: block; height: auto; }
  #page-setup .settings-row { grid-template-columns: 1fr; }
  .hardware-setup-layout { grid-template-columns: 1fr; }
  .hardware-management-dialog .hardware-management-content { overflow-y: auto; }
  .hardware-management-dialog .hardware-setup-layout { height: auto; }
  .hardware-management-dialog .hardware-setup-card { overflow: visible; }
  .ecg-quality-strip { grid-template-columns: auto 1fr; }
  .ecg-quality-strip dl { grid-column: 1 / -1; }
}
@media (min-width: 951px) and (max-height: 680px) {
  .hardware-management-dialog .hardware-management-content { overflow-y: auto; }
  .hardware-management-dialog .hardware-setup-layout { height: auto; }
  .hardware-management-dialog .hardware-setup-card,
  .hardware-management-dialog .hardware-setup-card:last-child { overflow: visible; }
}
@media (min-width: 951px) {
  .dashboard-shell { height: 100vh; overflow: hidden; }
  .workspace { height: 100vh; overflow: hidden; }
  .workspace-content { height: calc(100vh - 58px); overflow: auto; }
  .results-dialog[open] {
    display: flex;
    flex-direction: column;
    height: min(calc(var(--app-available-height) - 2dvh), 58.75rem);
    overflow: hidden;
  }
  .results-dialog .results-header,
  .results-dialog > .measurement-patient {
    flex: 0 0 auto;
  }
  .results-dialog #results-content:not([hidden]) {
    display: grid;
    grid-template-columns: clamp(11rem, 15vw, 13.75rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas:
      "parameters heading"
      "parameters overview"
      "parameters detail";
    flex: 1 1 auto;
    min-height: 0;
    gap: clamp(.5rem, 1dvh, .75rem);
  }
  .results-dialog .overview-chart-card,
  .results-dialog .detail-chart-card { height: 100%; min-height: 0; }
  .results-dialog .parameter-panel,
  .results-dialog .report-preview-card,
  .results-dialog .chart-card {
    min-height: 0;
  }
  .results-dialog .chart-card {
    display: flex;
    flex-direction: column;
  }
  .results-dialog .result-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
  .results-dialog .report-preview-card {
    overflow: hidden;
  }
}
@media (min-width: 951px) and (max-height: 700px) {
  .dashboard-shell[data-active-page="overview"] .workspace-content {
    padding: 1rem 2rem;
  }
  .dashboard-shell[data-active-page="overview"] .page-heading {
    margin-bottom: .8rem;
  }
  .dashboard-shell[data-active-page="overview"] .page-heading h1 {
    margin-bottom: .25rem;
    font-size: clamp(1.8rem, 5dvh, 2.25rem);
  }
  .dashboard-shell[data-active-page="overview"] .module-card {
    min-height: 8rem;
    padding: 1rem;
  }
  .dashboard-shell[data-active-page="overview"] .summary-row {
    gap: .75rem;
    margin-top: auto;
    margin-bottom: clamp(.75rem, 2dvh, 1.25rem);
  }
  .dashboard-shell[data-active-page="overview"] .summary-card {
    padding: .8rem;
  }
}
@media (min-width: 951px) and (max-height: 760px) {
  .results-dialog #report-preview-info {
    display: none;
  }
  .results-dialog .report-sheet {
    flex: 1 1 auto;
    min-height: 0;
    padding: .45rem;
    overflow: hidden;
  }
  .results-dialog .report-preview-card {
    display: flex;
    flex-direction: column;
    padding: .5rem;
  }
  .results-dialog .report-preview-heading {
    flex: 0 0 auto;
    margin-bottom: .25rem;
  }
  .results-dialog .report-logo {
    padding-bottom: .25rem;
  }
  .results-dialog .report-lines {
    margin: .25rem 0;
  }
  .results-dialog .report-gauge {
    width: 3.25rem;
    height: 3.25rem;
    margin: .25rem auto;
    border-width: .375rem;
  }
  .results-dialog .report-sheet svg {
    height: 1.75rem;
  }
  .results-dialog .report-table i {
    height: .625rem;
  }
}
@media (max-width: 680px) {
  .topbar { min-height: 56px; padding: 0 16px; }
  .topbar-title { display: block; }
  .topbar-title small, .account-menu { display: none; }
  .account-menu button { margin-left: 0; }
  .topbar-title { min-width: 0; flex: 1 1 auto; }
  .topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home { display: grid; flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto; padding: 0; place-items: center; border: 1px solid rgba(213,173,82,.34); border-radius: 9px; color: var(--explorer-gold-light); background: rgba(255,255,255,.04); font-size: 1.15rem; }
  .mobile-logout { display: block; flex: 0 0 auto; min-height: 36px; margin-left: 7px; padding: 0 8px; border: 1px solid rgba(213,173,82,.34); border-radius: 9px; color: #f6e5bf; background: rgba(213,173,82,.09); font: inherit; font-size: .66rem; font-weight: 800; }
  .mobile-home:focus-visible { outline: 3px solid rgba(213,173,82,.72); outline-offset: 3px; }
  .workspace-content { padding: 24px 16px 32px; }
  .page-heading { margin-bottom: 22px; }
  .page-heading h1 { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .page-heading.with-action { align-items: stretch; flex-direction: column; }
  .compact-button { width: 100%; }
  #page-patients .patient-table { display: none !important; }
  .patient-table-wrap { overflow: visible; }
  .patient-card-list { display: grid; gap: 10px; padding: 10px; }
  .patient-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid rgba(159, 146, 105, .38);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 5px 14px rgba(8, 44, 39, .06);
  }
  .patient-card-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
  .patient-card-initials { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #10251f; background: linear-gradient(145deg, var(--explorer-gold-light), var(--explorer-gold)); font-size: .75rem; font-weight: 850; }
  .patient-card-identity > span:last-child { display: grid; min-width: 0; gap: 3px; }
  .patient-card-identity strong { overflow: hidden; color: var(--ui-color-text); text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
  .patient-card-identity small { color: var(--ui-color-text-muted); font-size: .72rem; }
  .patient-status-chip { align-self: center; padding: 4px 7px; border: 1px solid rgba(10, 125, 80, .25); border-radius: 999px; color: var(--explorer-green); background: rgba(10, 125, 80, .08); font-size: .63rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .patient-card-inactive .patient-status-chip { border-color: rgba(123, 132, 135, .32); color: var(--ui-color-text-muted); background: rgba(123, 132, 135, .1); }
  .patient-card-actions { grid-column: 1 / -1; }
  .patient-card-actions button { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(8, 116, 91, .4); border-radius: 8px; color: var(--explorer-green); background: rgba(8, 116, 91, .06); font-size: .78rem; font-weight: 750; }
  .patient-card-actions button svg { width: 18px; height: 18px; }
  .summary-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .archive-settings-controls { grid-template-columns: 1fr; }
  .pwa-install-controls { grid-template-columns: 1fr; }
  .archive-settings-controls .primary-button, .pwa-install-controls .primary-button { width: 100%; }
  .results-dialog { width: calc(100% - 12px); height: calc(100vh - 12px); padding: 18px; }
  .analysis-results-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  #result-parameter-list { grid-template-columns: 1fr 1fr; }
  .results-overview-layout,
  .results-detail-layout { grid-template-columns: 1fr; }
  .report-preview-card { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
  .report-preview-heading, .report-preview-card > p { grid-column: 1 / -1; }
  .report-sheet { min-height: 210px; }
  .chart-heading { align-items: stretch; flex-direction: column; }
  .chart-heading-controls { align-items: stretch; }
  .alpha-control { grid-template-columns: auto 1fr 34px; }
  .alpha-control input { width: 100%; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-toolbar > span { margin-left: 0; }
  .pagination { align-items: stretch; flex-direction: column; gap: 8px; }
  .pagination-controls { margin-left: 0; justify-content: space-between; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .modal form, #customer-account-setup-form, .confirm-modal { padding: 23px; }
  .detail-modal { padding: 23px; }
  .patient-details { grid-template-columns: 1fr; }
  .measurement-wizard { padding: 23px; }
  .edf-analysis-dialog { padding: 23px; }
  .measurement-option { grid-template-columns: auto 1fr; }
  .measurement-option em { grid-column: 2; justify-self: start; }
  .live-measurement-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-recording-dialog { padding: 20px; }
  .live-recording-dialog .live-measurement-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-recording-technical dl { grid-template-columns: 1fr; }
  .live-recording-technical dl > div { border-right: 0; border-bottom: 1px solid #dfe6ea; }
  .live-recording-technical dl > div:last-child { border-bottom: 0; }
  .live-ecg-heading { align-items: stretch; flex-direction: column; gap: 10px; }
  .live-ecg-heading label { justify-content: space-between; }
  .live-ecg-controls { align-items: stretch; flex-direction: column; }
  #live-ecg-canvas { height: 180px; }
  .ecg-quality-strip { grid-template-columns: auto 1fr; }
  .ecg-quality-strip dl { grid-template-columns: 1fr; }
  .ecg-quality-strip dl > div { padding: 5px 0; border-top: 1px solid #d8e3e8; border-left: 0; }
  .ecg-pattern-panel { align-items: stretch; flex-direction: column; }
  .ecg-pattern-panel ul { justify-content: flex-start; }
  .live-quality-dialog .ecg-pattern-panel { height: 10rem; }
  .live-quality-dialog .ecg-pattern-panel > div { flex-basis: auto; }
  .telmed-import-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telmed-patient-assignment { grid-template-columns: 1fr; }
  .telmed-upload-actions { align-items: stretch; flex-direction: column; }
  .edf-summary dl { grid-template-columns: 1fr 1fr; }
  .analysis-methods { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .coming-soon { margin: 20px auto; padding: 38px 24px; }
}

html:fullscreen {
  --fullscreen-app-bar-height: 36px;
  --app-available-height: calc(100dvh - var(--fullscreen-app-bar-height));
  background: #002f60;
}

html:fullscreen body {
  padding-top: var(--fullscreen-app-bar-height);
}

html:fullscreen .fullscreen-app-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  height: var(--fullscreen-app-bar-height);
  color: #fff;
  background: linear-gradient(90deg, #003a6d, #07568e);
  box-shadow: 0 1px 0 rgba(255,255,255,.14);
}

html:fullscreen .fullscreen-app-bar::before {
  content: "";
}

html:fullscreen .fullscreen-app-bar > span {
  grid-column: 2;
  justify-self: center;
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .025em;
  user-select: none;
}

html:fullscreen .fullscreen-app-bar > button {
  grid-column: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
}

html:fullscreen .fullscreen-app-bar > button:hover {
  background: #c42b1c;
}

html:fullscreen .fullscreen-app-bar > button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

html:fullscreen .account-menu .fullscreen-button {
  display: inline-flex;
  color: var(--ui-color-text-inverse, #071712);
  border-color: var(--explorer-gold-light);
  background: var(--explorer-gold-light);
}

html:fullscreen .page-shell,
html:fullscreen .dashboard-shell {
  min-height: calc(100vh - var(--fullscreen-app-bar-height));
}

html:fullscreen .sidebar {
  top: var(--fullscreen-app-bar-height);
  height: calc(100vh - var(--fullscreen-app-bar-height));
}

@media (min-width: 951px) {
  html:fullscreen .sidebar { top: auto; }
  html:fullscreen .dashboard-shell,
  html:fullscreen .workspace {
    height: calc(100vh - var(--fullscreen-app-bar-height));
  }

  html:fullscreen .workspace-content {
    height: calc(100vh - 58px - var(--fullscreen-app-bar-height));
  }

  html:fullscreen .dashboard-shell[data-active-page="setup"] .workspace-content {
    height: calc(100dvh - 58px - var(--fullscreen-app-bar-height));
  }

  html:fullscreen .dashboard-shell[data-active-page="hardware"] .workspace-content {
    height: calc(100dvh - 58px - var(--fullscreen-app-bar-height));
  }
}

/* ANS-Explorer visual identity
   The internal project and persistence identifiers intentionally remain ANSweb. */
:root {
  --ink: #102d38;
  --muted: #647a7e;
  --teal-900: #063d38;
  --teal-700: #08745b;
  --teal-500: #1b9a72;
  --paper: #fffdf8;
  --line: #d8d8c9;
  --danger: #b6322c;
  --explorer-night: #030b12;
  --explorer-navy: #061a24;
  --explorer-green: #08745b;
  --explorer-green-bright: #4bbd78;
  --explorer-gold: #d5ad52;
  --explorer-gold-light: #f0d88a;
  --explorer-amber: #df8126;
  --explorer-red: #b92d27;
  --explorer-surface: #fffdf7;
  --explorer-surface-soft: #f7f5ea;
  --explorer-surface-green: #edf5ee;
  --explorer-surface-gold: #fbf4df;
  --explorer-surface-line: #ddd2b4;
}

body {
  background:
    radial-gradient(circle at 63% 18%, rgba(16, 121, 75, .16), transparent 32%),
    linear-gradient(135deg, #e8ece7, #f7f6ef 58%, #e7ece8);
}

.intro {
  background:
    radial-gradient(circle at 72% 42%, rgba(7, 133, 80, .72), transparent 29%),
    radial-gradient(circle at 18% 84%, rgba(207, 88, 24, .67), transparent 31%),
    radial-gradient(circle at 86% 84%, rgba(215, 164, 31, .67), transparent 27%),
    linear-gradient(145deg, #020810 0%, #05202a 52%, #031119 100%);
}
.intro::before {
  width: 42rem;
  height: 42rem;
  right: -17rem;
  top: -18rem;
  border-color: rgba(213, 173, 82, .14);
  box-shadow:
    0 0 0 3rem rgba(213, 173, 82, .025),
    0 0 0 7rem rgba(7, 116, 91, .03);
}
.intro::after {
  width: 29rem;
  height: 29rem;
  left: -16rem;
  bottom: -10rem;
  border-color: rgba(223, 129, 38, .2);
  box-shadow:
    0 0 0 2.4rem rgba(223, 129, 38, .035),
    0 0 0 5.5rem rgba(185, 45, 39, .03);
}
.brand-mark,
.mini-mark {
  border-color: rgba(213, 173, 82, .42);
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(7,116,91,.18));
  box-shadow: inset 0 0 22px rgba(74, 189, 120, .08);
}
.brand-mark svg,
.mini-mark svg { stroke: var(--explorer-gold-light); }
.eyebrow,
.section-label {
  color: #a9863c;
  letter-spacing: .19em;
}
.brand-copy h1 {
  font-size: clamp(3.25rem, 6.7vw, 5.8rem);
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand-copy h1 span {
  color: var(--explorer-gold);
  font-weight: 350;
}
.lead { color: rgba(255,255,255,.78); }
.signal-visual span {
  background: linear-gradient(180deg, var(--explorer-gold-light), var(--explorer-green-bright));
  box-shadow: 0 0 11px rgba(75, 189, 120, .35);
}
.platform-note { color: rgba(240,216,138,.62); }

.auth-panel {
  background:
    radial-gradient(circle at 16% 20%, rgba(10, 121, 82, .11), transparent 27%),
    radial-gradient(circle at 92% 88%, rgba(213, 173, 82, .13), transparent 30%),
    linear-gradient(145deg, #e8ece8, #f7f5ed);
}
.auth-card {
  border: 1px solid rgba(213, 173, 82, .5);
  border-top: 4px solid var(--explorer-gold);
  background: rgba(255, 254, 249, .96);
  box-shadow: 0 28px 80px rgba(3, 31, 29, .19);
}
.card-header .section-label { color: #9a7428; }
.field input:focus,
.field select:focus {
  border-color: var(--explorer-green);
  box-shadow: 0 0 0 4px rgba(8,116,91,.12);
}
.success-mark {
  background: var(--explorer-green);
  box-shadow: 0 0 0 9px rgba(75,189,120,.14);
}
.user-summary { background: #eef5ee; }

.secondary-button,
.danger-button,
.telmed-file-fallback {
  border-color: #075747;
  color: #fff;
  background: var(--explorer-back-fill);
  box-shadow: 0 10px 24px rgba(4, 82, 65, .2);
}
.secondary-button:hover:not(:disabled),
.danger-button:hover:not(:disabled),
.telmed-file-fallback:hover {
  border-color: #b68c32;
  background: var(--explorer-back-fill-hover);
  box-shadow: 0 13px 27px rgba(4, 82, 65, .25), inset 0 1px rgba(240,216,138,.35);
}
.primary-button {
  border-color: #148e85;
  color: #f5ffff;
  background: linear-gradient(100deg, #00675f, #006057);
  box-shadow: none;
  font-weight: 600;
  transition: border-color 130ms, box-shadow 130ms, transform 130ms;
}
.primary-button:hover:not(:disabled) {
  border-color: #148e85;
  background: #007467;
  box-shadow: 0 8px 22px rgba(0, 42, 38, .28);
  transform: translateY(-1px);
}

.dashboard-shell {
  background:
    radial-gradient(circle at 76% 12%, rgba(17, 128, 81, .12), transparent 27%),
    radial-gradient(circle at 94% 90%, rgba(213, 173, 82, .11), transparent 26%),
    linear-gradient(135deg, #e9ede9, #f8f7f1 58%, #e8edea);
}
.sidebar {
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 16%, rgba(12, 122, 81, .3), transparent 28%),
    linear-gradient(180deg, #061b27, #030d16 72%);
  box-shadow: 4px 0 24px rgba(2, 19, 25, .22);
}
.sidebar::before,
.sidebar::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(213, 173, 82, .1);
  border-radius: 50%;
}
.sidebar::before { width: 22rem; height: 22rem; top: -13rem; right: -12rem; }
.sidebar::after { width: 18rem; height: 18rem; left: -12rem; bottom: -9rem; border-color: rgba(185,45,39,.1); }
.sidebar-brand { color: #fff; }
.sidebar-brand strong {
  color: var(--explorer-gold);
  font-weight: 350;
}
.nav-item { color: rgba(255,255,255,.7); }
.nav-item > span[aria-hidden="true"] { color: rgba(240,216,138,.75); }
.nav-item:hover { background: rgba(15,143,98,.13); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(11,124,89,.38), rgba(213,173,82,.08));
  box-shadow: inset 3px 0 var(--explorer-gold);
}

.topbar {
  border-bottom-color: rgba(213,173,82,.32);
  color: #fff;
  background:
    radial-gradient(circle at 72% 0, rgba(11,124,89,.27), transparent 30%),
    linear-gradient(90deg, #071b27, #06232a);
}
.topbar-title small,
.topbar .account-menu button {
  border-color: rgba(213,173,82,.35);
  color: #f7f0db;
  background: rgba(255,255,255,.06);
}
.topbar .account-menu button:hover {
  border-color: var(--explorer-gold);
  color: #fff;
  background: rgba(213,173,82,.12);
}
.topbar .account-menu .fullscreen-button { color: var(--explorer-gold-light); }
.demo-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  margin-right: .75rem;
  padding: .42rem .7rem;
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 58%, var(--ui-color-gold));
  border-radius: 999px;
  color: var(--ui-color-text);
  background: color-mix(in srgb, var(--ui-color-accent) 22%, transparent);
  font-size: .68rem;
}
.demo-status[hidden] { display: none; }
.demo-status strong { color: var(--ui-color-gold); text-transform: uppercase; letter-spacing: .06em; }
.demo-status span { color: var(--ui-color-text-muted); }
.demo-status:not([hidden]) ~ .account-menu { margin-left: 0; }

@media (max-width: 680px) {
  .demo-status { margin-left: auto; margin-right: .45rem; padding: .35rem .55rem; }
  .demo-status span { display: none; }
}

.workspace-content { position: relative; }
.workspace-content::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 5%, rgba(10, 125, 80, .075), transparent 25%),
    radial-gradient(circle at 100% 78%, rgba(213, 173, 82, .075), transparent 24%);
}
.page-heading h1 span { color: var(--explorer-green); }
.module-card,
.summary-card,
.data-panel,
.settings-card,
.hardware-setup-card {
  border-color: rgba(159, 146, 105, .42);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,247,239,.96));
  box-shadow: 0 12px 34px rgba(8, 44, 39, .075), inset 0 1px #fff;
}
.module-card { border-top: 3px solid rgba(213,173,82,.72); }
.module-card:hover {
  border-color: var(--explorer-gold);
  box-shadow: 0 17px 38px rgba(7, 72, 57, .13);
}
.module-icon,
.settings-card-heading > span {
  color: var(--explorer-gold);
  background: linear-gradient(145deg, #073d39, #0a7055);
}
.setup-card .module-icon {
  color: var(--explorer-gold);
  background: linear-gradient(145deg, #17352f, #0a5e4b);
}
.module-copy small { color: #9a7428; }
.module-arrow { color: #9a7428; }
.summary-card strong { color: var(--explorer-green); }
.data-panel,
.settings-card,
.hardware-setup-card { border-top: 2px solid rgba(213,173,82,.64); }
.patient-table th {
  color: #ede4c7;
  background: linear-gradient(180deg, #0b3d39, #092e31);
}
.patient-table tr:hover td { background: rgba(34, 139, 93, .045); }
.search-field { border-color: #c9d6ca; background: #f8faf5; }
.row-actions button.details {
  border-color: rgba(8,116,91,.4);
  color: var(--explorer-green);
  background: #edf7f1;
}
.pagination { background: #f8f8f2; }
.settings-row + .settings-row { border-top-color: rgba(159,146,105,.3); }
.archive-folder-status,
.pwa-install-status,
.licensed-hardware-item,
.connection-recorder-name,
.live-debug-panel,
.ecg-pattern-panel {
  border-color: #d7d8ca;
  background: #f7f8f2;
}

.modal {
  border: 1px solid rgba(213,173,82,.42);
  border-top: 4px solid var(--explorer-gold);
  background: #fffefa;
  box-shadow: 0 1.75rem 5.6rem rgba(2, 23, 27, .38);
}
.modal::backdrop {
  background:
    radial-gradient(circle at 65% 20%, rgba(8,116,91,.18), transparent 30%),
    rgba(2, 14, 20, .72);
}
.icon-button {
  border-color: rgba(213,173,82,.42);
  color: #806322;
  background: #fffefa;
}
.icon-button:hover { color: #fff; background: var(--explorer-green); }
.measurement-countdown {
  border-color: rgba(8,116,91,.3);
  background: #f0f7f1;
}
.measurement-countdown > strong { color: var(--explorer-green); }
.measurement-countdown i {
  background: linear-gradient(90deg, var(--explorer-green), var(--explorer-gold));
}

html:fullscreen { background: var(--explorer-night); }
html:fullscreen .fullscreen-app-bar {
  background:
    radial-gradient(circle at 54% 0, rgba(8,116,91,.4), transparent 28%),
    linear-gradient(90deg, #04121b, #073c39);
  box-shadow: 0 1px 0 rgba(213,173,82,.3);
}

@media (max-width: 880px) {
  .brand-copy h1 { font-size: clamp(2.7rem, 12vw, 4.2rem); }
}

@media (max-width: 480px) {
  .auth-panel { background: #fffefa; }
  .auth-card { border-top: 3px solid var(--explorer-gold); }
}

/* Consistent ANS-Explorer surfaces inside dialogs. */
.modal,
.modal form,
#customer-account-setup-form,
.detail-modal,
.confirm-modal,
.measurement-wizard,
.live-step-dialog,
.edf-analysis-dialog,
.live-recording-dialog,
.measurement-result-dialog,
.results-dialog {
  background:
    radial-gradient(circle at 88% 6%, rgba(18, 128, 81, .055), transparent 24%),
    linear-gradient(145deg, var(--explorer-surface), #fdfbf2);
}

.modal .measurement-patient,
.modal .parameter-panel,
.modal .chart-heading,
.modal .report-preview-card,
.modal .analysis-details-grid > div,
.modal .hardware-card,
.modal .hardware-empty,
.modal .wizard-development-note,
.modal .live-recorder-status,
.modal .connection-recorder-name,
.modal .live-debug-panel,
.modal .live-recording-technical,
.modal .telmed-import-card-header,
.modal .patient-details > div,
.modal .imprint-content section,
.modal .ecg-pattern-panel,
.modal .chart-help {
  border-color: var(--explorer-surface-line);
  background: var(--explorer-surface-soft);
}

.modal .measurement-option,
.modal .analysis-method,
.modal .edf-summary,
.modal .live-ecg-card,
.modal .live-measurement-metrics > div,
.modal .telmed-import-card,
.modal .result-chart,
.modal .report-sheet {
  border-color: var(--explorer-surface-line);
  background: linear-gradient(145deg, #fffefa, var(--explorer-surface-soft));
}

.modal .measurement-option:hover:not(:disabled),
.modal .analysis-method:hover:not(:disabled),
.modal .hardware-card[type="button"]:hover {
  border-color: rgba(8,116,91,.5);
  background: var(--explorer-surface-green);
  box-shadow: 0 7px 20px rgba(7,72,57,.09);
}

.modal .analysis-method.selected {
  border-color: var(--explorer-green);
  background: var(--explorer-surface-green);
  box-shadow: 0 0 0 2px rgba(8,116,91,.09);
}

.modal .edf-file-picker,
.modal .edf-summary-status,
.modal .ecg-quality-strip.good,
.modal .telmed-upload-result {
  border-color: rgba(8,116,91,.32);
  background: var(--explorer-surface-green);
}

.modal .measurement-countdown,
.modal .ecg-quality-strip.limited,
.modal .analysis-plan {
  border-color: rgba(213,173,82,.42);
  background: var(--explorer-surface-gold);
}

.modal .field input,
.modal .field select,
.modal select,
.modal .telmed-patient-assignment select,
.modal .live-ecg-heading select {
  border-color: #d5ceb9;
  background: #fffefa;
}

.modal .live-debug-panel pre {
  color: #29463e;
  background: #ececde;
}

.modal .patient-details,
.modal .analysis-details-grid {
  border-color: var(--explorer-surface-line);
  background: var(--explorer-surface-line);
}

.modal .chart-heading,
.modal .live-ecg-heading {
  border-bottom-color: var(--explorer-surface-line);
}

.modal .chart-help,
.modal .live-ecg-card > p {
  border-top-color: var(--explorer-surface-line);
  background: #faf8ee;
}

.modal .analysis-method.locked,
.modal button:disabled {
  border-color: #c9ced0;
  color: #747d80;
  background: #e3e6e5;
  box-shadow: none;
}

.modal .analysis-plan.error,
.modal .telmed-import-card.error,
.modal .ecg-quality-strip.poor,
.modal .ecg-quality-strip.disconnected,
.modal .telmed-import-error {
  border-color: #dda9a9;
  color: #873e3e;
  background: #fff1f1;
}

/* Complete dark ANS-Explorer theme. */
:root {
  color-scheme: dark;
  /* Global semantic colour system. Change colours here, not in components. */
  --ui-color-canvas: #020a11;
  --ui-color-canvas-end: #041218;
  --ui-color-surface: #081b23;
  --ui-color-surface-raised: #0c282b;
  --ui-color-surface-soft: #102f2f;
  --ui-color-surface-input: #06171e;
  --ui-color-dropdown: #081b23;
  --ui-color-dropdown-hover: #0d352f;
  --ui-color-dropdown-selected: #08745b;
  --ui-color-surface-header: #071920;
  --ui-color-surface-hover: #0d352f;
  --ui-color-surface-code: #031219;
  --ui-color-text: #f7f2e4;
  --ui-color-text-muted: #a8bbb7;
  --ui-color-text-label: #d8d2bd;
  /* Textrollen: Überschriften und Beschriftungen werden nicht komponentenweise eingefärbt. */
  --ui-color-text-heading: var(--ui-color-text);
  --ui-color-text-heading-emphasis: var(--ui-color-gold);
  --ui-color-text-heading-muted: var(--ui-color-text-muted);
  --ui-color-text-body: var(--ui-color-text-muted);
  --ui-color-metric-label: #d9b862;
  --ui-color-metric-value: #fffaf0;
  --ui-color-text-placeholder: #768b88;
  --ui-color-text-inverse: #071712;
  --ui-color-border: #31504a;
  --ui-color-border-subtle: #29443e;
  --ui-color-border-accent: rgba(213,173,82,.38);
  --ui-color-accent: #4bbd78;
  --ui-color-accent-strong: #08745b;
  --ui-color-gold: #d5ad52;
  --ui-color-gold-light: #f0d88a;
  --ui-color-success-text: #c9f4de;
  --ui-color-success-bg: #0b302b;
  --ui-color-warning-text: #f7e5ad;
  --ui-color-warning-bg: #342d18;
  --ui-color-danger-text: #ffd6d2;
  --ui-color-danger-bg: #3a171a;
  --ui-color-danger: #da5b52;
  --ui-color-disabled-text: #9ba8a7;
  --ui-color-disabled-bg: #222d30;
  --ui-color-disabled-border: #465553;
  --ui-color-chart-grid: #31504a;
  --ui-color-chart-line: #43a8df;
  --ui-color-chart-trend: #ef5350;
  --ui-color-chart-point: #f7f2e4;
  --ui-shadow-dialog: 0 20px 54px rgba(0,0,0,.3);

  /* Gemeinsames Layoutsystem für Titel und ihre direkten Inhaltsbereiche. */
  --ui-heading-page-width: min(80%, 34rem);
  --ui-dialog-header-min-height: 3.75rem;
  --ui-dialog-header-inline-inset: 1.15rem;
  --ui-dialog-header-gap: .875rem;
  --ui-dialog-content-gap: .75rem;

  /* Ergebnislisten: zentrale Aliase für einheitliche, leicht änderbare Farben. */
  --ui-color-results-panel: var(--ui-color-surface-raised);
  --ui-color-results-card: var(--ui-color-surface);
  --ui-color-results-border: var(--ui-color-border);
  --ui-color-results-text: var(--ui-color-text);
  --ui-color-results-muted: var(--ui-color-text-muted);
  --ui-color-results-status-text: var(--ui-color-text-label);
  --ui-color-results-status-bg: var(--ui-color-surface-soft);
  --ui-color-results-success-text: var(--ui-color-success-text);
  --ui-color-results-success-bg: var(--ui-color-success-bg);
  --ui-color-results-danger-text: var(--ui-color-danger-text);
  --ui-color-results-danger-bg: var(--ui-color-danger-bg);

  /* Compatibility aliases used throughout the existing interface. */
  --ink: var(--ui-color-text);
  --muted: var(--ui-color-text-muted);
  --paper: var(--ui-color-surface);
  --line: var(--ui-color-border-subtle);
  --danger: var(--ui-color-danger);
  --explorer-green: var(--ui-color-accent-strong);
  --explorer-green-bright: var(--ui-color-accent);
  --explorer-gold: var(--ui-color-gold);
  --explorer-gold-light: var(--ui-color-gold-light);
  --explorer-dark-panel: var(--ui-color-surface);
  --explorer-dark-panel-raised: var(--ui-color-surface-raised);
  --explorer-dark-panel-soft: var(--ui-color-surface-soft);
  --explorer-dark-line: var(--ui-color-border-accent);
  --explorer-dark-text: var(--ui-color-text);
  --explorer-dark-muted: var(--ui-color-text-muted);
}

body,
.auth-panel,
.dashboard-shell,
.workspace {
  color: var(--explorer-dark-text);
  background:
    radial-gradient(circle at 72% 12%, rgba(9, 139, 82, .39), transparent 29%),
    radial-gradient(circle at 92% 86%, rgba(213, 173, 82, .28), transparent 30%),
    radial-gradient(circle at 22% 94%, rgba(185, 45, 39, .15), transparent 28%),
    linear-gradient(145deg, #020a11, #072329 58%, #041218);
}

.auth-card,
.module-card,
.summary-card,
.data-panel,
.settings-card,
.hardware-setup-card,
.modal,
.modal form,
#customer-account-setup-form,
.detail-modal,
.confirm-modal,
.measurement-wizard,
.live-step-dialog,
.edf-analysis-dialog,
.live-recording-dialog,
.measurement-result-dialog,
.results-dialog {
  color: var(--explorer-dark-text);
  border-color: var(--explorer-dark-line);
  background:
    radial-gradient(circle at 92% 5%, rgba(15, 125, 78, .13), transparent 26%),
    linear-gradient(145deg, var(--explorer-dark-panel-raised), var(--explorer-dark-panel));
  box-shadow: 0 20px 54px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025);
}

.auth-card,
.module-card,
.data-panel,
.settings-card,
.hardware-setup-card,
.modal {
  border-top-color: var(--explorer-gold);
}

.card-header h2,
.module-copy strong,
.summary-card strong,
.summary-card.muted strong,
.settings-card h2,
.hardware-setup-card h2,
.modal h2,
.modal h3,
.modal strong,
.patient-table .patient-name,
.pagination-controls strong {
  color: var(--ui-color-text-heading);
}

#identity-action-view .card-header h2 {
  color: var(--ui-color-text-heading-emphasis);
}

.card-header p:last-child,
.module-copy span,
.summary-card span,
.summary-card small,
.settings-card-heading p:last-child,
.settings-placeholder > p:last-child,
.hardware-setup-card > div > p:last-child,
.modal p,
.modal small,
.modal .measurement-patient span,
.modal .measurement-patient small,
.modal .measurement-patient dd,
.patient-table td,
.table-toolbar > span,
.pagination {
  color: var(--ui-color-text-body);
}

.field label,
.language-select-field span,
.hardware-form label,
.modal label,
.modal .connection-recorder-name span,
.modal dt {
  color: #d8d2bd;
}

.field input,
.field select,
.language-select-field select,
.hardware-form select,
.hardware-form input,
.search-field,
.modal .field input,
.modal .field select,
.modal select,
.modal .telmed-patient-assignment select,
.modal .live-ecg-heading select {
  color: var(--explorer-dark-text);
  border-color: #31514b;
  background: #06171e;
}

.field input:focus,
.field select:focus,
.language-select-field select:focus,
.hardware-form input:focus,
.hardware-form select:focus {
  border-color: var(--explorer-green-bright);
  background: #081f24;
  box-shadow: 0 0 0 4px rgba(75,189,120,.12);
}

.field input::placeholder,
.hardware-form input::placeholder,
.search-field input::placeholder { color: #768b88; }

.divider { color: #8ca09d; }
.divider::before,
.divider::after { background: rgba(213,173,82,.25); }
.legal-links button { color: rgba(240,216,138,.8); }
.user-summary {
  color: var(--explorer-dark-text);
  background: var(--explorer-dark-panel-soft);
}

.module-card:hover {
  border-color: var(--explorer-gold);
  background: linear-gradient(145deg, #103733, #09242a);
  box-shadow: 0 18px 40px rgba(0,0,0,.33), 0 0 30px rgba(8,116,91,.08);
}
.module-copy small,
.module-arrow,
.summary-card strong { color: var(--explorer-gold-light); }

.table-toolbar,
.pagination {
  border-color: #29443e;
  background: #071920;
}
.patient-table th {
  color: var(--explorer-gold-light);
  border-bottom-color: rgba(213,173,82,.3);
  background: linear-gradient(180deg, #0b403a, #082b2e);
}
.patient-table td {
  border-bottom-color: #1c3734;
  background: rgba(5,20,27,.72);
}
.patient-table tr:hover td { background: rgba(12,92,68,.26); }
.patient-table tbody tr[data-patient-id][tabindex="0"] { cursor: pointer; }
.patient-table tbody tr[data-patient-id]:focus-visible { outline: 2px solid var(--explorer-gold-light); outline-offset: -2px; }
.patient-table .patient-name { color: #f8f3e5; }
.patient-table tr.patient-row-inactive td {
  background: rgba(104,116,115,.16);
}
.patient-table tr.patient-row-inactive td:not(.row-actions),
.patient-table tr.patient-row-inactive .patient-name {
  color: #8f9c9a;
}
.patient-table tr.patient-row-inactive:hover td {
  background: rgba(104,116,115,.23);
}
.pagination-controls button,
.row-actions button {
  color: #d8e5df;
  border-color: #31504a;
  background: linear-gradient(#102b31, #081c24);
  box-shadow: none;
}
.row-actions button.details {
  color: #72d0a1;
  border-color: rgba(75,189,120,.48);
  background: #0a302b;
}
.row-actions button.measure:not(:disabled) {
  color: var(--explorer-gold-light);
  border-color: rgba(213,173,82,.58);
  background: linear-gradient(145deg, rgba(9,78,62,.96), rgba(7,45,42,.98));
  box-shadow: inset 0 0 0 1px rgba(240,216,138,.07), 0 4px 12px rgba(0,0,0,.14);
}
.row-actions button.measure:hover:not(:disabled) {
  color: #fff3c7;
  border-color: rgba(240,216,138,.82);
  background: linear-gradient(145deg, #0d7057, #0a4d43);
  box-shadow: inset 0 0 0 1px rgba(255,244,202,.1), 0 6px 16px rgba(0,0,0,.2);
}
.pagination-controls button:hover:not(:disabled),
.row-actions button:hover {
  color: var(--explorer-gold-light);
  border-color: rgba(213,173,82,.62);
  background: #12372f;
}

.settings-row + .settings-row,
.telmed-upload-actions,
.analysis-method-section {
  border-color: #29443e;
}
.archive-folder-status,
.pwa-install-status,
.licensed-hardware-item {
  color: var(--explorer-dark-text);
  border-color: #31504a;
  background: #091f26;
}

.modal::backdrop {
  background:
    radial-gradient(circle at 64% 20%, rgba(7,116,91,.2), transparent 31%),
    rgba(0,7,11,.82);
}
.modal .measurement-patient,
.modal .parameter-panel,
.modal .chart-heading,
.modal .report-preview-card,
.modal .analysis-details-grid > div,
.modal .hardware-card,
.modal .hardware-empty,
.modal .wizard-development-note,
.modal .live-recorder-status,
.modal .connection-recorder-name,
.modal .live-debug-panel,
.modal .live-recording-technical,
.modal .telmed-import-card-header,
.modal .patient-details > div,
.modal .imprint-content section,
.modal .ecg-pattern-panel,
.modal .chart-help,
.modal .measurement-option,
.modal .analysis-method,
.modal .edf-summary,
.modal .live-ecg-card,
.modal .live-measurement-metrics > div,
.modal .telmed-import-card,
.modal .result-chart {
  color: var(--explorer-dark-text);
  border-color: #31504a;
  background: var(--explorer-dark-panel);
}

.modal .measurement-option:hover:not(:disabled),
.modal .analysis-method:hover:not(:disabled),
.modal .hardware-card[type="button"]:hover,
.modal .analysis-method.selected {
  border-color: rgba(75,189,120,.62);
  background: #0d352f;
}

.modal .edf-file-picker,
.modal .edf-summary-status,
.modal .ecg-quality-strip.good,
.modal .telmed-upload-result,
.modal .measurement-countdown {
  color: var(--explorer-dark-text);
  border-color: rgba(75,189,120,.42);
  background: #0b302b;
}

.modal .ecg-quality-strip.limited,
.modal .analysis-plan {
  color: var(--explorer-dark-text);
  border-color: rgba(213,173,82,.48);
  background: #342d18;
}

.modal .analysis-plan.error,
.modal .telmed-import-card.error,
.modal .ecg-quality-strip.poor,
.modal .ecg-quality-strip.disconnected,
.modal .telmed-import-error {
  color: #ffd6d2;
  border-color: rgba(218,91,82,.62);
  background: #3a171a;
}

.modal .live-debug-panel pre {
  color: #c7ded6;
  background: #031219;
}
.modal .patient-details,
.modal .analysis-details-grid {
  border-color: #31504a;
  background: #31504a;
}
.modal .chart-heading,
.modal .live-ecg-heading,
.modal .chart-help,
.modal .live-ecg-card > p {
  border-color: #29443e;
  background: #071920;
}
.modal .icon-button {
  color: var(--explorer-gold-light);
  border-color: rgba(213,173,82,.38);
  background: #081b23;
}
.modal .icon-button:hover {
  color: #071712;
  background: var(--explorer-gold);
}

/* A generated report remains a white sheet by design. */
.modal .report-sheet {
  color: #173447;
  background: #fff;
}

/* License advisor */
.license-dialog {
  width: min(74rem, calc(100% - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.license-dialog[open] {
  display: flex;
  flex-direction: column;
}
.license-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-dialog-header-gap);
  min-height: var(--ui-dialog-header-min-height);
  padding: 1.6rem 1.8rem 1.25rem;
  border-bottom: 1px solid var(--ui-color-border);
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--ui-color-accent) 16%, transparent), transparent 28%),
    var(--ui-color-surface);
}
.license-dialog-header .section-label { margin: 0 0 .35rem; }
.license-dialog-header h2 { margin: 0 0 .4rem; font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
.license-dialog-header p:last-child { margin: 0; }
.license-steps {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
  align-items: center;
  width: min(42rem, calc(100% - 3rem));
  margin: 1rem auto;
}
.license-steps > i { height: 1px; background: var(--ui-color-border); }
.license-steps button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border: 0;
  color: var(--ui-color-text-muted);
  background: transparent;
  font-size: .73rem;
  font-weight: 750;
}
.license-steps button > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--ui-color-border-accent);
  border-radius: 50%;
  color: var(--ui-color-text-muted);
  background: var(--ui-color-surface-elevated);
}
.license-steps button.active { color: var(--ui-color-gold-light); }
.license-steps button.active > span {
  color: var(--ui-color-text-inverse);
  border-color: var(--ui-color-gold);
  background: var(--ui-color-gold);
}
.license-steps button:disabled { opacity: .55; cursor: default; }
.license-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: .35rem 1.8rem 1.25rem;
  overflow: auto;
}
.license-step { animation: page-in 180ms ease-out; }
.license-step-heading { margin-bottom: 1rem; text-align: center; }
.license-step-heading > span {
  color: var(--ui-color-gold-light);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.license-step-heading h3 { margin: .3rem 0 .35rem; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.license-step-heading p { max-width: 42rem; margin: 0 auto; }
.license-need-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}
.license-need-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: start;
  gap: 1rem;
  min-height: 13.5rem;
  padding: 1.25rem;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-color-text);
  text-align: left;
  background: var(--ui-color-surface-elevated);
  transition: transform 150ms, border-color 150ms, box-shadow 150ms, background 150ms;
}
.license-need-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-color-border-accent);
  background: color-mix(in srgb, var(--ui-color-surface-elevated) 90%, var(--ui-color-accent));
}
.license-need-card.selected {
  border-color: var(--ui-color-gold);
  background: color-mix(in srgb, var(--ui-color-surface-elevated) 91%, var(--ui-color-gold));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-gold) 22%, transparent);
}
.license-need-card > i {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--ui-color-border-accent);
  border-radius: 50%;
}
.license-need-card.selected > i {
  border: .32rem solid var(--ui-color-gold);
  background: var(--ui-color-surface);
}
.license-need-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .75rem;
  color: var(--ui-color-gold-light);
  background: color-mix(in srgb, var(--ui-color-gold) 14%, transparent);
  font-size: 1.25rem;
}
.license-need-card strong,
.license-need-card small { display: block; }
.license-need-card strong { margin-bottom: .55rem; font-size: 1rem; }
.license-need-card small { color: var(--ui-color-text-muted); font-size: .76rem; line-height: 1.55; }
.license-inline-note {
  display: flex;
  gap: .7rem;
  max-width: 58rem;
  margin: 1.1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface-elevated);
  font-size: .73rem;
  line-height: 1.5;
}
.license-inline-note > span {
  flex: 0 0 auto;
  color: var(--ui-color-gold-light);
  font-weight: 800;
}
.license-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.25rem;
  max-width: 54rem;
  margin: 1.25rem auto;
  padding: 1.5rem;
  border: 1px solid var(--ui-color-gold);
  border-radius: var(--ui-radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-color-gold) 9%, transparent), transparent 44%),
    var(--ui-color-surface-elevated);
}
.license-result-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-accent);
  font-size: 1.25rem;
  font-weight: 800;
}
.license-result-copy > span {
  color: var(--ui-color-gold-light);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.license-result-copy h3 { margin: .25rem 0 .35rem; font-size: 1.65rem; }
.license-result-copy p { margin: 0; }
.license-result-copy ul {
  display: grid;
  gap: .45rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}
.license-result-copy li { font-size: .78rem; }
.license-result-copy li::before { content: "✓"; margin-right: .55rem; color: var(--ui-color-success-text); font-weight: 850; }
.license-result-badge {
  min-width: 12rem;
  padding: .8rem 1rem;
  border: 1px solid var(--ui-color-border-accent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
}
.license-result-badge span,
.license-result-badge small { display: block; }
.license-result-badge span { color: var(--ui-color-gold-light); font-size: .78rem; font-weight: 800; }
.license-result-badge small { margin-top: .3rem; font-size: .66rem; line-height: 1.4; }
.license-qualification-note {
  max-width: 54rem;
  margin: 0 auto;
  padding: .9rem 1rem;
  border-left: 3px solid var(--ui-color-gold);
  background: var(--ui-color-warning-bg);
}
.license-qualification-note strong { font-size: .8rem; }
.license-qualification-note p { margin: .25rem 0 0; font-size: .72rem; line-height: 1.5; }
.license-nonbinding { max-width: 54rem; margin: .9rem auto 0; text-align: center; font-size: .68rem; }
.license-table-wrap {
  overflow: auto;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-lg);
}
.license-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}
.license-table th,
.license-table td {
  padding: .64rem .8rem;
  border-right: 1px solid var(--ui-color-border);
  border-bottom: 1px solid var(--ui-color-border);
  text-align: center;
  font-size: var(--table-body-font-size);
}
.license-table tr:last-child > * { border-bottom: 0; }
.license-table tr > *:last-child { border-right: 0; }
.license-table thead th {
  color: var(--ui-color-text);
  background: var(--ui-color-surface-elevated);
  font-size: var(--table-heading-font-size);
}
.license-table thead th:first-child,
.license-table tbody th { text-align: left; }
.license-table thead th:not(:first-child) { min-width: 9.5rem; }
.license-table thead strong,
.license-table thead small { display: block; }
.license-table thead small { margin-top: .2rem; color: var(--ui-color-text-muted); font-size: var(--table-body-font-size); font-weight: 500; }
.license-table tbody th { color: var(--ui-color-text-muted); font-weight: 600; background: var(--ui-color-surface); }
.license-table td { background: var(--ui-color-surface); }
.license-table td.included { color: var(--ui-color-success-text); font-size: .9rem; font-weight: 900; }
.license-table td.excluded { color: var(--ui-color-disabled-text); }
.license-table th:last-child,
.license-table td:last-child { background: color-mix(in srgb, var(--ui-color-surface) 91%, var(--ui-color-gold)); }
.license-dialog-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.6rem;
  padding: .75rem 1.8rem;
  border-top: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface);
}
.license-dialog-actions > span {
  color: var(--ui-color-text-muted);
  text-align: center;
  font-size: .7rem;
}
.license-dialog-actions .primary-button,
.license-dialog-actions .secondary-button { min-width: 11.5rem; }

@media (max-width: 760px) {
  .ble-live-summary { grid-template-columns: 1fr; }
  .ble-pulse { min-height: 130px; }
  .ble-measurement-experience { min-height: 235px; }
  .ble-measurement-orbit-outer { width: 118vw; }
  .ble-measurement-orbit-middle { width: 88vw; }
  .ble-measurement-orbit-inner { width: 62vw; }
  .ble-live-status { right: 12px; bottom: 11px; }
  .license-dialog {
    width: calc(100% - .75rem);
    height: calc(100dvh - .75rem);
  }
  .license-dialog-header { padding: 1.1rem; }
  .license-dialog-header > div > p:last-child { display: none; }
  .license-steps { width: calc(100% - 1.4rem); margin: .7rem auto; }
  .license-steps button { gap: .3rem; padding-inline: .2rem; font-size: .64rem; }
  .license-dialog-body { padding: .25rem 1rem 1rem; }
  .license-need-grid { grid-template-columns: 1fr; }
  .license-need-card { grid-template-columns: auto 1fr; grid-template-rows: auto; min-height: 0; }
  .license-result-card { grid-template-columns: auto 1fr; }
  .license-result-badge { grid-column: 1 / -1; }
  .license-dialog-actions { grid-template-columns: 1fr 1fr; padding: .7rem 1rem; }
  .license-dialog-actions > span { grid-column: 1 / -1; grid-row: 1; }
  .license-dialog-actions .primary-button,
  .license-dialog-actions .secondary-button { min-width: 0; width: 100%; }
  .license-dialog-actions .secondary-button[hidden] + span + .primary-button { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .license-steps button { font-size: 0; }
  .license-steps button > span { font-size: .7rem; }
  .license-dialog-header h2 { font-size: 1.3rem; }
  .license-need-card { padding: 1rem; }
}

.modal .analysis-method.locked,
.modal button:disabled,
button:disabled {
  color: #85908f;
  border-color: #394847;
  background: #222d30;
}

@media (max-width: 480px) {
  .auth-panel { background: #06151c; }
  .auth-card { background: var(--explorer-dark-panel); }
}

.measurement-context-menu {
  color: var(--explorer-dark-text);
  border-color: rgba(213,173,82,.48);
  background:
    radial-gradient(circle at 100% 0, rgba(12,116,77,.18), transparent 42%),
    linear-gradient(145deg, #0d292d, #071a22);
  box-shadow: 0 18px 42px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
}
.measurement-context-menu button {
  color: #eee8d7;
}
.measurement-context-menu .measurement-context-icon {
  color: var(--explorer-gold);
}
.measurement-context-menu button:hover,
.measurement-context-menu button:focus-visible {
  color: #fff;
  background: rgba(18,126,87,.28);
}
.measurement-context-menu button.danger,
.measurement-context-menu button.danger .measurement-context-icon {
  color: #f07870;
}
.measurement-context-menu button.danger:hover,
.measurement-context-menu button.danger:focus-visible {
  color: #ffaaa4;
  background: rgba(185,45,39,.22);
}

/* Explore only: the same actions and point anchoring, with a quiet glass surface. */
.measurement-context-menu[data-point-menu="true"] {
  padding: .5rem; border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--ui-color-border-subtle, #29443e) 68%, var(--ui-color-text-muted, #9bb9b7));
  color: var(--ui-color-text, #f7f2e4); background: var(--ui-color-surface, #081b23);
  box-shadow: 0 12px 32px rgba(0, 12, 18, .3);
  opacity: 1; transform: translateY(0);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .measurement-context-menu[data-point-menu="true"] {
    background: color-mix(in srgb, var(--ui-color-surface, #081b23) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}
.measurement-context-menu[data-point-menu="true"] > .measurement-context-heading {
  display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1;
  min-height: 1.75rem; margin: 0 0 .35rem; padding: .25rem .55rem .6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-color-text-muted, #9bb9b7) 22%, transparent);
  color: var(--ui-color-gold, #d5ad52); font: inherit; font-size: .75rem; font-weight: 650;
  line-height: 1.3; letter-spacing: .12em; pointer-events: none;
}
.measurement-context-heading svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; }
.measurement-context-menu[data-point-menu="true"] button {
  min-height: 2.75rem; padding: .6rem .7rem; border-radius: .6rem;
  color: var(--ui-color-text, #f7f2e4); background: transparent;
  font-size: .875rem; font-weight: 550; line-height: 1.35;
  transition: background-color 180ms ease, color 180ms ease;
}
.measurement-context-menu[data-point-menu="true"] .measurement-context-icon {
  color: var(--ui-color-gold, #d5ad52); transition: color 180ms ease;
}
.measurement-context-menu[data-point-menu="true"] button:is(:hover, :focus-visible) {
  color: var(--ui-color-text, #f7f2e4);
  background: color-mix(in srgb, var(--ui-color-surface-soft, #102f2f) 90%, var(--ui-color-text, #f7f2e4));
}
.measurement-context-menu[data-point-menu="true"] button:is(:hover, :focus-visible) .measurement-context-icon { color: var(--ui-color-gold-light, #f0d18b); }
.measurement-context-menu[data-point-menu="true"] button:focus-visible { outline: 2px solid var(--ui-color-gold, #d5ad52); outline-offset: -2px; }
.measurement-context-menu[data-point-menu="true"] button.danger,
.measurement-context-menu[data-point-menu="true"] button.danger .measurement-context-icon { color: var(--ui-color-danger, #f07870); }
.measurement-context-menu[data-point-menu="true"] button.danger::before { background: var(--ui-color-danger, #f07870); opacity: .25; }
.measurement-context-menu[data-point-menu="true"] button.danger:is(:hover, :focus-visible) {
  color: var(--ui-color-danger-text, #ffd6d2); background: color-mix(in srgb, var(--ui-color-danger, #f07870) 12%, transparent);
}
.measurement-context-menu[data-point-menu="true"] button.danger:is(:hover, :focus-visible) .measurement-context-icon { color: var(--ui-color-danger-text, #ffd6d2); }
.measurement-context-menu[data-point-menu="true"][data-compact="true"] { padding: .25rem; }
.measurement-context-menu[data-point-menu="true"][data-compact="true"] > .measurement-context-heading {
  min-height: 1.25rem; margin-bottom: .25rem; padding: .1rem .35rem .3rem; font-size: .7rem;
}
.measurement-context-menu[data-point-menu="true"][data-compact="true"] button {
  min-height: 2rem; padding: .2rem .4rem; gap: .35rem; font-size: .8rem; line-height: 1.25;
}
.measurement-context-menu[data-point-menu="true"][hidden] { opacity: 0; transform: translateY(5px); pointer-events: none; }
@supports (transition-behavior: allow-discrete) {
  .measurement-context-menu[data-point-menu="true"] {
    transition: opacity 200ms ease-out, transform 200ms ease-out, display 200ms allow-discrete;
  }
}
@starting-style {
  .measurement-context-menu[data-point-menu="true"]:not([hidden]) { opacity: 0; transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .measurement-context-menu[data-point-menu="true"],
  .measurement-context-menu[data-point-menu="true"][hidden] { transition: none; transform: none; }
  .measurement-context-menu[data-point-menu="true"] :is(button, .measurement-context-icon) { transition: none; }
}

.research-partner {
  position: absolute;
  left: clamp(2.5rem, 6vw, 7rem);
  bottom: 2.6rem;
  width: min(calc(100% - 5rem), 28rem);
  margin: 0;
  z-index: 1;
}
.research-partner img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  opacity: .96;
  border-radius: .65rem;
}
.intro .platform-note { bottom: .8rem; }

@media (max-width: 880px) {
  .intro { min-height: 27rem; }
  .research-partner {
    position: static;
    width: min(100%, 20rem);
    margin-top: 1.4rem;
  }
}

@media (max-width: 480px) {
  .intro { min-height: 24rem; }
  .research-partner {
    width: min(100%, 17rem);
    margin-top: 1rem;
  }
}

/* Login: the supplied ANS-Explorer artwork is the complete brand surface. */
.login-visual-panel {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: #020810;
}
.login-visual-panel::before,
.login-visual-panel::after {
  display: none;
}
.login-brand-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 881px) {
  .page-shell {
    grid-template-columns: minmax(0, 1.55fr) minmax(28rem, .8fr);
  }
  .login-visual-panel {
    height: var(--app-available-height, 100vh);
  }
}

@media (max-width: 880px) {
  .login-visual-panel {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 480px) {
  .login-visual-panel {
    min-height: 0;
  }
}

/*
 * Global dark-theme contract for every dialog.
 * Component-specific layout may vary, but all colour decisions come from the
 * semantic variables in :root above.
 */
.modal,
.modal form,
#customer-account-setup-form,
.detail-modal,
.confirm-modal,
.measurement-wizard,
.live-step-dialog,
.edf-analysis-dialog,
.live-recording-dialog,
.measurement-result-dialog,
.results-dialog {
  color: var(--ui-color-text);
  border-color: var(--ui-color-border-accent);
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--ui-color-accent-strong) 18%, transparent), transparent 26%),
    linear-gradient(145deg, var(--ui-color-surface-raised), var(--ui-color-surface));
  box-shadow: var(--ui-shadow-dialog), inset 0 1px color-mix(in srgb, var(--ui-color-text) 3%, transparent);
}

.modal :is(h1, h2, h3, h4, h5, h6, strong, dd, output),
.modal .patient-details dd,
.modal .analysis-details-grid dd,
.modal .connection-recorder-name strong,
.modal .ecg-quality-summary strong,
.modal .ecg-quality-strip dd,
.modal .ecg-pattern-panel strong,
.modal .live-recording-technical dd,
.modal .telmed-import-card dd {
  color: var(--ui-color-text);
}

.modal :is(p, small),
.modal .chart-heading > span,
.modal .chart-heading-controls > span,
.modal .chart-legend,
.modal .chart-help,
.modal .live-ecg-card > p {
  color: var(--ui-color-text-muted);
}

.modal :is(label, legend, dt),
.modal .section-label,
.modal .patient-details dt,
.modal .analysis-details-grid dt,
.modal .live-recording-technical dt,
.modal .telmed-import-card dt {
  color: var(--ui-color-text-label);
}

.modal :is(input, select, textarea),
.modal .field input,
.modal .field select,
.modal .telmed-patient-assignment select,
.modal .live-ecg-heading select {
  color: var(--ui-color-text);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-input);
}

.modal :is(input, textarea)::placeholder {
  color: var(--ui-color-text-placeholder);
}

.modal :is(input, textarea)::selection {
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-accent);
}

.modal input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
.modal input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
.modal input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
.modal input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
.modal input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
.modal input[type="datetime-local"]::-webkit-datetime-edit-ampm-field:focus {
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-accent);
}

.modal input[readonly] {
  color: var(--ui-color-text-muted);
  border-color: var(--ui-color-border-subtle);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--ui-color-surface-input) 0 8px,
      var(--ui-color-surface) 8px 16px
    );
  cursor: not-allowed;
}

.modal :is(input, select, textarea):focus {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-color-accent) 15%, transparent);
}

.modal .customer-account-editable {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  overflow-wrap: anywhere;
  border: 1px solid var(--ui-color-border);
  border-radius: 10px;
  outline: none;
  color: var(--ui-color-text);
  background: var(--ui-color-surface-input);
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
  cursor: text;
}

.modal .customer-account-editable:focus {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-color-accent) 15%, transparent);
}

.modal .customer-account-editable[aria-invalid="true"] {
  border-color: var(--ui-color-danger, #b74242);
}

.modal.registration-email-sending-dialog,
.modal.email-confirmation-dialog {
  width: min(34rem, calc(var(--dialog-viewport-width, 100vw) - 1.5rem));
  padding: clamp(.9rem, 2.5dvh, 1.65rem);
  border: 1px solid #268c91;
  border-radius: .875rem;
  color: #102a44;
  background: linear-gradient(145deg, #fff, #f8fcfa);
  box-shadow: 0 1.5rem 4rem rgba(5, 32, 39, .25);
}
.modal.registration-email-sending-dialog { width: min(29rem, calc(var(--dialog-viewport-width, 100vw) - 1.5rem)); }
.modal.registration-email-sending-dialog::backdrop,
.modal.email-confirmation-dialog::backdrop {
  background: rgba(5, 32, 39, .56);
  backdrop-filter: blur(.35rem);
}
.registration-email-sending-content {
  display: grid;
  justify-items: center;
  gap: clamp(.4rem, 1.4dvh, .7rem);
  text-align: center;
}
.registration-email-sending-content .communication-email-sending-art {
  margin: 0;
  color: #a47d31;
}
.registration-email-sending-content .communication-email-sending-plane { color: #009b99; }
.modal.registration-email-sending-dialog .section-label { margin: 0; color: #a47d31; }
.modal.registration-email-sending-dialog h2 {
  margin: 0;
  color: #10253e;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.modal.registration-email-sending-dialog p:last-child { margin: 0; color: #597176; line-height: 1.5; }

.modal.email-confirmation-dialog > .modal-header { align-items: flex-start; margin-bottom: clamp(.55rem, 1.5dvh, 1rem); }
.modal.email-confirmation-dialog > .modal-header .section-label { display: block; margin: 0 0 .3rem; color: #a47d31; }
.modal.email-confirmation-dialog > .modal-header h2 {
  color: #10253e;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.modal.email-confirmation-dialog > .modal-header .icon-button {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: .35rem;
  color: #007078;
  background: #edf6f4;
}
.modal.email-confirmation-dialog > .modal-header .icon-button::before,
.modal.email-confirmation-dialog > .modal-header .icon-button::after { width: 1.15rem; height: .13rem; }
.modal.email-confirmation-dialog > .modal-header .icon-button:hover { color: #fff; background: #007078; }
.modal.email-confirmation-dialog :is(.icon-button, .primary-button, .secondary-button):focus-visible,
.modal.registration-email-sending-dialog:focus-visible { outline: 2px solid #008f94; outline-offset: 3px; }
.email-confirmation-copy { display: grid; gap: clamp(.5rem, 1.5dvh, .75rem); }
.modal.email-confirmation-dialog .email-confirmation-copy p { margin: 0; }
.modal.email-confirmation-dialog .email-confirmation-copy .email-confirmation-lead { color: #102a44; font-weight: 760; }
.modal.registration-email-delivery-error-dialog #registration-email-delivery-error-message { color: #45656b; line-height: 1.5; }
.modal.registration-error-dialog { width: min(30rem, calc(var(--dialog-viewport-width, 100vw) - 1.5rem)); }
.modal.registration-error-dialog #registration-error-message { color: #45656b; line-height: 1.5; overflow-wrap: anywhere; }
.modal.registration-error-dialog .modal-actions { margin-top: clamp(.65rem, 2dvh, 1.25rem); }
.modal.registration-error-dialog .modal-actions > button { width: 100%; min-width: 0; }
.registration-email-delivery-error-actions { grid-template-columns: 1fr; }
.modal.email-confirmation-dialog #email-confirmation-pending-message { color: #45656b; line-height: 1.5; }
.modal.email-confirmation-dialog #email-confirmation-pending-message strong { color: #102a44; }
.modal.email-confirmation-dialog .email-confirmation-recipient {
  padding: clamp(.55rem, 1.5dvh, .8rem) .85rem;
  border: 1px solid #b5cfce;
  border-radius: .7rem;
  color: #102a44;
  background: #edf6f4;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 650;
  line-height: 1.45;
}
.modal.email-confirmation-dialog .email-confirmation-recipient-address {
  color: #007078;
  font-weight: 780;
}
.modal.email-confirmation-dialog .email-confirmation-hint { color: #597176; font-size: .82rem; line-height: 1.45; }
.email-confirmation-hint::before { margin-right: .45rem; color: #a47d31; content: "↗"; }
.modal.email-confirmation-dialog .email-confirmation-copy .form-message { margin: 0; color: #9a452e; }
.modal.email-confirmation-dialog .email-confirmation-copy .form-message:empty { display: none; }
.modal.email-confirmation-dialog .email-confirmation-copy .form-message.success { color: #007078; }
.email-confirmation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: .75rem;
  margin-top: clamp(.65rem, 2dvh, 1.25rem);
}
.email-confirmation-actions > #email-confirmation-pending-resend[hidden] + #email-confirmation-pending-close { grid-column: 1 / -1; }
.modal.email-confirmation-dialog .email-confirmation-actions .secondary-button {
  color: #007078;
  border-color: #b5cfce;
  background: #edf6f4;
  box-shadow: none;
}
.modal.email-confirmation-dialog .email-confirmation-actions .secondary-button:hover:not(:disabled) { color: #fff; border-color: #007078; background: #007078; }
.modal.email-confirmation-dialog .modal-actions .primary-button { border-color: #007078; background: #007078; color: #fff; }
.modal.email-confirmation-dialog .modal-actions .primary-button:hover:not(:disabled) { background: #00646d; }

.app-action-dialog {
  width: min(calc(100% - 2rem), 34rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(213, 173, 82, .52);
  border-top: .28rem solid var(--gold, #d5ad52);
  border-radius: 1.35rem;
  color: #f7f3e8;
  background:
    radial-gradient(circle at 100% 0, rgba(18, 115, 91, .18), transparent 42%),
    linear-gradient(145deg, #082d31, #071f25 72%);
  box-shadow: 0 2rem 6rem rgba(0, 10, 14, .52);
}
.app-action-dialog[open] {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.15rem;
  padding: 1.7rem 1.7rem 0;
}
.app-action-dialog::backdrop {
  background: rgba(0, 18, 23, .72);
  backdrop-filter: blur(.35rem);
}
.app-action-dialog[data-login-notice="true"]::backdrop {
  background: rgba(0, 18, 23, .38);
  backdrop-filter: blur(.25rem);
}
.app-action-dialog-mark {
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(213, 173, 82, .65);
  border-radius: 1rem;
  color: #082d31;
  background: linear-gradient(145deg, #f0cf78, #d5ad52);
  font-size: 1.65rem;
  font-weight: 900;
  box-shadow: 0 .65rem 1.6rem rgba(213, 173, 82, .16);
}
.app-action-dialog:is([data-tone="danger"], [data-tone="error"]) .app-action-dialog-mark {
  color: #fff;
  background: linear-gradient(145deg, #d75e56, #a93838);
  border-color: rgba(255, 155, 146, .7);
}
.app-action-dialog[data-tone="error"] { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.app-action-dialog[data-tone="info"] .app-action-dialog-mark {
  color: #eafff7;
  background: linear-gradient(145deg, #159476, #08705f);
  border-color: rgba(79, 220, 179, .62);
}
.app-action-dialog-copy .section-label { margin: .05rem 0 .42rem; color: #d5ad52; }
.app-action-dialog-copy h2 { margin: 0; color: #fffaf0; font-size: clamp(1.45rem, 3vw, 1.8rem); }
.app-action-dialog-copy > p:last-of-type {
  margin: .75rem 0 0;
  color: #bcd4d5;
  line-height: 1.6;
  white-space: pre-line;
}
.app-action-dialog-input { display: grid; gap: .45rem; margin-top: 1.2rem; color: #f7f3e8; font-weight: 750; }
.app-action-dialog-input[hidden] { display: none; }
.app-action-dialog-input input {
  height: 3.15rem;
  margin: 0;
  padding: 0 1rem;
  color: #fff;
  background: rgba(2, 20, 25, .72);
  border: 1px solid #31585b;
  border-radius: .85rem;
}
.app-action-dialog-input input:focus { border-color: #d5ad52; box-shadow: 0 0 0 .2rem rgba(213, 173, 82, .14); }
.app-action-dialog-actions {
  grid-column: 1 / -1;
  margin: 1.5rem -1.7rem 0;
  padding: 1.1rem 1.7rem 1.35rem;
  border-top: 1px solid rgba(213, 173, 82, .18);
  background: rgba(0, 12, 17, .22);
}
.app-action-dialog-actions .danger-button { min-width: 9rem; }
.app-action-dialog-actions .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Fehler: Symbol, Titel und X teilen eine Kopfzeile. Nachricht und Fußzeile
   verwenden dieselben Innenkanten, auch bei mehrzeiligen mobilen Titeln. */
.modal.app-action-dialog[data-tone="error"][open] {
  --error-dialog-padding: clamp(1rem, 3vw, 1.7rem);
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  column-gap: .85rem;
  row-gap: 1.15rem;
  padding: var(--error-dialog-padding) var(--error-dialog-padding) 0;
}
.modal.app-action-dialog[data-login-notice="true"][open] {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  cursor: pointer;
}
.app-action-dialog[data-tone="error"] .app-action-dialog-copy { display: contents; }
.app-action-dialog[data-tone="error"] .app-action-dialog-mark {
  grid-area: 1 / 1;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .8rem;
}
.app-action-dialog[data-tone="error"] .app-action-dialog-copy h2 {
  grid-area: 1 / 2;
  align-self: center;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  text-align: left;
}
.modal.app-action-dialog[data-tone="error"] .app-action-dialog-close {
  grid-area: 1 / 3;
  position: relative;
  inset: auto;
  align-self: center;
  margin: 0;
}
.app-action-dialog[data-tone="error"] .app-action-dialog-copy > p:last-of-type {
  grid-area: 2 / 1 / auto / -1;
  margin: 0;
  text-align: left;
}
.app-action-dialog[data-tone="error"] .app-action-dialog-actions {
  grid-area: 3 / 1 / auto / -1;
  margin: 0 calc(-1 * var(--error-dialog-padding));
  padding: 1.1rem var(--error-dialog-padding);
}

/* Gemeinsamer Dropdown-Stil C. Die eigenständige Sprachauswahl nutzt keinen Custom Select. */
.custom-select { position: relative; width: 100%; }
.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.custom-select-trigger {
  width: 100%;
  min-height: 3rem;
  padding: 0 .875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #f2f7f4;
  background: #073238;
  border: 1px solid #258f8b;
  border-radius: .5625rem;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.hardware-form .custom-select-trigger { min-height: 4.45rem; }
.language-select-field .custom-select-trigger { min-height: 2.75rem; font-size: .82rem; }
.modal .field .custom-select-trigger { min-height: clamp(2.35rem, 6dvh, 2.7rem); }
.modal .telmed-patient-assignment .custom-select-trigger { min-height: 2.55rem; font-size: .71rem; }
.modal .live-ecg-heading .custom-select { width: auto; min-width: 6.6rem; }
.modal .live-ecg-heading .custom-select-trigger { min-height: 2.15rem; padding: 0 .8rem; font-size: .66rem; }
.custom-select-trigger:hover { border-color: #66b4ac; background: #0a3c42; }
.custom-select-trigger:focus-visible { outline: 2px solid #e2c275; outline-offset: 2px; }
.custom-select.open .custom-select-trigger {
  border-color: #50bcb3;
  box-shadow: 0 0 0 2px rgba(37, 143, 139, .22);
}
.custom-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.custom-select-chevron {
  width: .72rem;
  height: .72rem;
  flex: 0 0 auto;
  border-right: .14rem solid #f5ead0;
  border-bottom: .14rem solid #f5ead0;
  transform: translateY(-.2rem) rotate(45deg);
  transition: transform .16s ease;
}
.custom-select.open .custom-select-chevron { transform: translateY(.2rem) rotate(225deg); }
.custom-select-options {
  position: fixed;
  z-index: 80;
  inset: auto;
  margin: 0;
  max-height: 17rem;
  padding: .3125rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #d7e7e3;
  background: #082e34;
  border: 1px solid #258f8b;
  border-radius: .5625rem;
  box-shadow: 0 .75rem 1.375rem rgba(0, 19, 22, .53);
}
.custom-select-options::backdrop { background: transparent; pointer-events: none; }
.custom-select-options[hidden] { display: none; }
.custom-select-option {
  width: 100%;
  min-height: 2.625rem;
  padding: .5rem .6875rem;
  display: flex;
  align-items: center;
  gap: .5625rem;
  color: #d7e7e3;
  background: transparent;
  border: 0;
  border-radius: .375rem;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.custom-select-option::before {
  content: "";
  flex: 0 0 .375rem;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: #e2c275;
  opacity: 0;
}
.custom-select-option:hover,
.custom-select-option:focus-visible { outline: none; color: #fff; background: #16464a; }
.custom-select-option[aria-selected="true"] {
  color: #fff8e7;
  background: #155358;
  font-weight: 760;
}
.custom-select-option[aria-selected="true"]::before { opacity: 1; }
.custom-select-option:focus-visible { outline: 2px solid #e2c275; outline-offset: -2px; }
.custom-select-option:disabled { color: #71888a; cursor: not-allowed; }
@media (max-width: 600px) {
  .app-action-dialog[open] { grid-template-columns: 2.8rem minmax(0, 1fr); padding: 1.3rem 1.3rem 0; }
  .app-action-dialog-mark { width: 2.8rem; height: 2.8rem; border-radius: .8rem; }
  .app-action-dialog-actions { margin-left: -1.3rem; margin-right: -1.3rem; padding: 1rem 1.3rem 1.2rem; }
  .modal.registration-email-sending-dialog,
  .modal.email-confirmation-dialog { padding: clamp(.8rem, 2dvh, 1.2rem); }
  .email-confirmation-actions { grid-template-columns: 1fr; }
}
@media (max-height: 480px) {
  .modal.email-confirmation-dialog > .modal-header { min-height: 0; margin-bottom: .45rem; }
  .modal.email-confirmation-dialog > .modal-header .section-label { display: none; }
  .email-confirmation-copy { gap: .4rem; }
  .email-confirmation-actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: .5rem; margin-top: .55rem; }
  .registration-email-sending-content .communication-email-sending-art { height: 4rem; }
}

/*
 * Shared native dropdown appearance.
 * The popup remains a real operating-system/browser select for accessibility,
 * while its colours follow the same global theme as the input fields.
 */
select,
.field select,
.language-select-field select,
.hardware-form select,
.modal select,
.modal .field select,
.modal .telmed-patient-assignment select,
.modal .live-ecg-heading select {
  color-scheme: dark;
  accent-color: var(--ui-color-accent-strong);
  color: var(--ui-color-text);
  border-color: var(--ui-color-border);
  background-color: var(--ui-color-surface-input);
}

select:hover:not(:disabled) {
  border-color: var(--ui-color-accent);
}

select option,
select optgroup {
  color: var(--ui-color-text);
  background-color: var(--ui-color-dropdown);
}

select option:checked {
  color: var(--ui-color-text);
  background: var(--ui-color-dropdown-selected);
}

select option:hover,
select option:focus {
  color: var(--ui-color-text);
  background: var(--ui-color-dropdown-hover);
}

select:disabled {
  color: var(--ui-color-disabled-text);
  border-color: var(--ui-color-disabled-border);
  background: var(--ui-color-disabled-bg);
}

.modal .measurement-patient,
.modal .parameter-panel,
.modal .chart-heading,
.modal .report-preview-card,
.modal .analysis-details-grid > div,
.modal .hardware-card,
.modal .hardware-empty,
.modal .wizard-development-note,
.modal .live-recorder-status,
.modal .connection-recorder-name,
.modal .live-debug-panel,
.modal .live-recording-technical,
.modal .telmed-import-card-header,
.modal .patient-details > div,
.modal .imprint-content section,
.modal .ecg-pattern-panel,
.modal .chart-help,
.modal .measurement-option,
.modal .analysis-method,
.modal .edf-summary,
.modal .live-ecg-card,
.modal .live-measurement-metrics > div,
.modal .telmed-import-card,
.modal .result-chart {
  color: var(--ui-color-text);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
}

.modal .chart-heading,
.modal .live-ecg-heading,
.modal .chart-help,
.modal .live-ecg-card > p,
.modal .table-toolbar,
.modal .pagination {
  border-color: var(--ui-color-border-subtle);
  background: var(--ui-color-surface-header);
}

.modal .patient-details,
.modal .analysis-details-grid {
  border-color: var(--ui-color-border);
  background: var(--ui-color-border);
}

/* Clearly separate a metric's name from its actual value. */
.modal .patient-details dt,
.modal .analysis-details-grid dt {
  margin-bottom: .55rem;
  color: var(--ui-color-metric-label);
  font-size: clamp(.62rem, .74vw, .72rem);
  font-weight: 750;
  letter-spacing: .105em;
  line-height: 1.25;
}

.modal .patient-details dd,
.modal .analysis-details-grid dd {
  color: var(--ui-color-metric-value);
  font-size: clamp(.9rem, 1.12vw, 1.06rem);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.25;
}

.modal .measurement-option:hover:not(:disabled),
.modal .analysis-method:hover:not(:disabled),
.modal .hardware-card[type="button"]:hover,
.modal .analysis-method.selected {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-surface-hover);
}

.modal .edf-file-picker,
.modal .edf-summary-status,
.modal .archive-result,
.modal .ecg-quality-strip.good,
.modal .telmed-upload-result,
.modal .measurement-countdown {
  color: var(--ui-color-success-text);
  border-color: var(--ui-color-accent);
  background: var(--ui-color-success-bg);
}

.modal .archive-result > span {
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-accent);
}

.modal .archive-result strong { color: var(--ui-color-success-text); }
.modal .archive-result small { color: var(--ui-color-text-muted); }

.modal .measurement-time-warning {
  color-scheme: dark;
  color: var(--ui-color-warning-text) !important;
  border-color: var(--ui-color-gold) !important;
  background: var(--ui-color-warning-bg) !important;
}

.modal .measurement-time-warning:focus {
  border-color: var(--ui-color-gold-light) !important;
  background: color-mix(in srgb, var(--ui-color-warning-bg) 86%, var(--ui-color-surface)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-color-gold) 18%, transparent);
}

.modal .measurement-time-invalid {
  color: var(--ui-color-warning-text) !important;
  border-color: var(--ui-color-gold) !important;
  background: var(--ui-color-warning-bg) !important;
}

.modal .measurement-time-warning-text {
  color: var(--ui-color-warning-text);
}

.modal .ecg-quality-strip.limited,
.modal .analysis-plan {
  color: var(--ui-color-warning-text);
  border-color: var(--ui-color-gold);
  background: var(--ui-color-warning-bg);
}

.modal .analysis-plan.error,
.modal .telmed-import-card.error,
.modal .ecg-quality-strip.poor,
.modal .ecg-quality-strip.disconnected,
.modal .telmed-import-error {
  color: var(--ui-color-danger-text);
  border-color: var(--ui-color-danger);
  background: var(--ui-color-danger-bg);
}

.modal .ble-pulse,
.modal .ble-live-summary dl div {
  color: var(--ui-color-text);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
}

.modal .ble-pulse span,
.modal .ble-pulse small,
.modal .ble-live-summary dt {
  color: var(--ui-color-text-muted);
}

.modal .ble-pulse strong,
.modal .ble-live-summary dd {
  color: var(--ui-color-metric-value);
}

.modal .live-debug-panel pre {
  color: var(--ui-color-success-text);
  background: var(--ui-color-surface-code);
}

.modal .icon-button {
  color: var(--ui-color-gold-light);
  border-color: var(--ui-color-border-accent);
  background: var(--ui-color-surface);
}

.modal .icon-button:hover {
  color: var(--ui-color-text-inverse);
  background: var(--ui-color-gold);
}

.modal .analysis-method.locked,
.modal button:disabled,
button:disabled {
  color: var(--ui-color-disabled-text);
  border-color: var(--ui-color-disabled-border);
  background: var(--ui-color-disabled-bg);
}

.modal .chart-grid-line,
.modal .ecg-grid-major,
.modal .rhythmogram-grid {
  stroke: var(--ui-color-chart-grid);
}
.modal .ecg-grid-minor {
  stroke: color-mix(in srgb, var(--ui-color-chart-grid) 55%, transparent);
}
.modal .chart-axis-label,
.modal .chart-date-label,
.modal .rhythmogram-label,
.modal .rhythmogram-axis-title {
  fill: var(--ui-color-text-muted);
}
.modal .chart-line,
.modal .measurement-demo-ecg-line,
.modal .rhythmogram-line {
  stroke: var(--ui-color-chart-line);
}
.modal .measurement-rhythmogram-chart {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-header);
}
.modal .rhythmogram-point {
  fill: var(--ui-color-gold);
  stroke: var(--ui-color-surface-header);
}
.modal .chart-trend-line {
  stroke: var(--ui-color-chart-trend);
}
.modal .chart-point {
  fill: var(--ui-color-surface);
  stroke: var(--ui-color-chart-line);
}

/* The generated report deliberately remains a printable white document. */
.modal .report-sheet {
  color: #173447;
  background: #fff;
}
#patient-number-help {
  display: none;
}

.personal-access-panel,
.patient-group-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--ui-color-accent-strong) 15%, transparent), transparent 30%),
    linear-gradient(145deg, var(--ui-color-surface-raised), var(--ui-color-surface));
  box-shadow: inset 0 1px color-mix(in srgb, var(--ui-color-text) 3%, transparent);
}

.personal-access-panel .field,
.patient-group-panel .field {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.personal-access-panel .modal-actions,
.patient-group-panel .modal-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.panel-heading-with-help { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-heading-with-help .field-info-button { margin-left: auto; }
#patient-detail-dialog > .modal-header {
  position: static;
  min-height: var(--ui-dialog-header-min-height);
  margin: 0 0 var(--ui-dialog-content-gap);
  padding: 0;
  border: 0;
  background: transparent;
}
#patient-detail-dialog > .modal-header > div:first-child { text-align: center; }
#patient-detail-dialog { overflow-x: hidden; }
#patient-detail-dialog > * { min-width: 0; }
#patient-detail-dialog :is(.patient-group-panel, .personal-access-panel, #detail-patient-group-selection) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#personal-access-dialog .personal-access-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#personal-access-dialog #personal-access-message {
  min-height: 1.25rem;
  margin: .85rem 0 1rem;
  color: var(--ui-color-danger-text);
  font-weight: 700;
}
#personal-access-dialog #personal-access-message:not(:empty) {
  padding: .72rem .82rem;
  border: 1px solid color-mix(in srgb, var(--ui-color-danger) 55%, transparent);
  border-radius: .7rem;
  color: var(--ui-color-danger-text);
  background: color-mix(in srgb, var(--ui-color-danger-bg) 80%, transparent);
}
#personal-access-dialog #personal-access-message.success {
  color: var(--ui-color-success-text);
  border-color: color-mix(in srgb, var(--ui-color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--ui-color-success-bg) 88%, transparent);
}
#personal-access-dialog #personal-access-message.is-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ui-color-gold-light);
  border-color: color-mix(in srgb, var(--ui-color-gold) 60%, transparent);
  background: color-mix(in srgb, var(--ui-color-gold) 12%, var(--ui-color-surface));
}
#personal-access-dialog #personal-access-message.is-loading::before {
  width: .9rem;
  height: .9rem;
  flex: 0 0 .9rem;
  border: 2px solid color-mix(in srgb, var(--ui-color-gold-light) 25%, transparent);
  border-top-color: var(--ui-color-gold-light);
  border-radius: 50%;
  content: "";
  animation: personal-access-spin .8s linear infinite;
}
@keyframes personal-access-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  #personal-access-dialog #personal-access-message.is-loading::before { animation: none; }
}
#close-patient-details {
  position: relative;
  z-index: 31;
  touch-action: manipulation;
}

/* Dialogköpfe und ihre Schließen-Schaltflächen müssen immer über dem
   nachfolgenden Dialoginhalt liegen. Andernfalls können überlappende Karten
   einen Teil der sichtbaren Trefferfläche des X abfangen. */
.modal-header,
.license-dialog-header {
  position: relative;
  z-index: 20;
}

.modal .icon-button {
  display: grid;
  position: relative;
  z-index: 21;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  place-items: center;
  /* The accessible name comes from aria-label. Draw the cross below instead
     of aligning a font glyph whose visible bounds depend on its baseline. */
  font-size: 0;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.modal .icon-button::before,
.modal .icon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: .25rem;
  background: currentColor;
  transform-origin: center;
  pointer-events: none;
}
.modal .icon-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal .icon-button::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-header > .icon-button,
.license-dialog-header > .icon-button,
.live-stop-confirm-dialog > .icon-button {
  z-index: 21;
}

.management-dialog {
  width: min(calc(100vw - 2rem), 72rem);
  max-height: min(46rem, calc(var(--app-available-height) - 2rem));
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
  overflow: hidden;
}

.management-dialog[open] {
  display: flex;
  flex-direction: column;
}

.management-dialog-header {
  flex: 0 0 auto;
  align-items: flex-start;
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ui-color-border);
}

.management-dialog-header .section-label { margin: 0 0 .25rem; }
.management-dialog-header h2 { margin: 0 0 .35rem; color: var(--ui-color-text-heading-emphasis); }
.management-dialog-header p:last-child { margin: 0; color: var(--ui-color-text-muted); line-height: 1.45; }
.management-dialog-header-with-icon {
  /* Die Pfade belegen vertikal nur rund zwei Drittel ihrer 24er-ViewBox.
     Die größere SVG-Fläche gleicht diesen unsichtbaren Rand aus. */
  --management-dialog-title-icon-size: clamp(2.4rem, 4.9vw, 3.65rem);
}
.management-dialog-heading {
  display: grid;
  grid-template-columns: var(--management-dialog-title-icon-size) minmax(0, 1fr);
  align-items: center;
  gap: .35rem .85rem;
  min-width: 0;
}
.management-dialog-heading h2 { grid-column: 2; margin: 0; }
.management-dialog-heading p:last-child { grid-column: 2; margin: 0; }
.management-dialog-context-icon {
  display: grid;
  grid-area: 1 / 1;
  width: var(--management-dialog-title-icon-size);
  height: var(--management-dialog-title-icon-size);
  place-items: center;
  color: var(--ui-color-gold);
}
.management-dialog-context-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.management-dialog-content {
  min-height: 0;
  padding: 1rem .25rem .25rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.management-dialog form {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--ui-color-border);
  border-radius: .85rem;
}

.management-dialog .management-form { display: grid; gap: 1rem; }
.management-dialog .management-form > .primary-button { justify-self: start; }
.management-dialog .form-message { min-height: 1.25rem; margin: .8rem 0 0; }
.management-dialog .form-hint { margin: .35rem 0 .8rem; color: var(--ui-color-text-muted); }

.user-management-dialog { width: min(calc(100vw - 2rem), 82rem); }

.user-management-overview { display: grid; gap: .75rem; }

.user-management-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5625rem;
}

.management-quota {
  margin: 0;
  color: var(--ui-color-text-muted);
  font-size: .78rem;
  font-weight: 750;
}

.user-management-dialog .form-message {
  min-height: 0;
  margin: 0;
}

.user-management-dialog .form-message:empty { display: none; }

.customer-user-data-panel {
  overflow: hidden;
  border-color: var(--ui-color-border-accent);
  background: var(--ui-color-surface);
  box-shadow: none;
}

.customer-user-table-wrap { overflow-x: auto; }

.customer-user-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.customer-user-table th,
.customer-user-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--ui-color-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.customer-user-table th {
  color: var(--ui-color-gold-light);
  background: color-mix(in srgb, var(--ui-color-accent-strong) 34%, var(--ui-color-surface));
  font-size: var(--table-heading-font-size);
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
}

.customer-user-table td {
  color: var(--ui-color-text-muted);
  font-size: var(--table-body-font-size);
}

.customer-user-table th:nth-child(1) { width: 25%; }
.customer-user-table th:nth-child(2) { width: 18%; }
.customer-user-table th:nth-child(3) { width: 27%; }
.customer-user-table th:nth-child(4) { width: 14%; }
.customer-user-table th:nth-child(5) { width: 16%; }
.customer-user-table tbody tr:last-child td { border-bottom: 0; }
.customer-user-login { color: var(--ui-color-text) !important; font-weight: 800; overflow-wrap: anywhere; }

.customer-user-permissions { display: grid; gap: .22rem; }
.customer-user-permissions strong { color: var(--ui-color-text); font-size: .74rem; }
.customer-user-permissions small { color: var(--ui-color-text-muted); line-height: 1.35; }

.customer-user-status {
  display: inline-flex;
  padding: .28rem .55rem;
  border: 1px solid color-mix(in srgb, var(--ui-color-success-text) 45%, transparent);
  border-radius: 999px;
  color: var(--ui-color-success-text);
  background: var(--ui-color-success-bg);
  font-size: .66rem;
  font-weight: 850;
  white-space: nowrap;
}

.customer-user-status.status-disabled,
.customer-user-status.status-invitation_expired {
  border-color: color-mix(in srgb, var(--ui-color-danger-text) 45%, transparent);
  color: var(--ui-color-danger-text);
  background: var(--ui-color-danger-bg);
}

.customer-user-status.status-pending_activation {
  border-color: color-mix(in srgb, var(--ui-color-gold) 55%, transparent);
  color: var(--ui-color-gold-light);
  background: color-mix(in srgb, var(--ui-color-gold) 12%, var(--ui-color-surface));
}

.customer-user-action-cell { padding-inline: .65rem !important; }
.customer-user-actions { justify-content: flex-end; }
.management-dialog .customer-user-actions button {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-color: var(--ui-color-border);
  color: var(--ui-color-success-text);
  background: var(--ui-color-surface-raised);
}
.management-dialog .customer-user-actions button:hover { border-color: var(--ui-color-gold); color: var(--ui-color-gold-light); background: var(--ui-color-surface-header); }
.management-dialog .customer-user-actions button.danger { color: var(--ui-color-danger-text); }

.customer-user-empty { padding: 2.5rem 1rem; }
.customer-user-empty h3 { margin: 1rem 0 .35rem; }

.customer-group-table th:nth-child(1) { width: 42%; }
.customer-group-table th:nth-child(2) { width: 22%; }
.customer-group-table th:nth-child(3) { width: 20%; }
.customer-group-table th:nth-child(4) { width: 16%; }
.customer-group-table th { padding-block: .75rem; }
.customer-group-table td { padding-block: .7rem; }
.customer-group-name { color: var(--ui-color-text) !important; font-weight: 800; overflow-wrap: anywhere; }
.customer-group-patient-count { color: var(--ui-color-text) !important; font-weight: 750; }

.customer-group-type {
  display: inline-flex;
  padding: .28rem .55rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 999px;
  color: var(--ui-color-text-muted);
  background: var(--ui-color-surface-raised);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

.customer-group-type.is-standard {
  border-color: color-mix(in srgb, var(--ui-color-gold) 50%, transparent);
  color: var(--ui-color-gold-light);
  background: color-mix(in srgb, var(--ui-color-gold) 10%, var(--ui-color-surface));
}

.customer-group-protected {
  color: var(--ui-color-text-muted);
  font-size: .67rem;
  font-weight: 750;
}

.group-editor-dialog { width: min(calc(100vw - 2rem), 38rem); }
.group-editor-form { gap: 1rem; }
.group-management-dialog .management-dialog-content { overflow: hidden; }
.management-pagination {
  min-height: 2.75rem;
  padding: .4rem .75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: .75rem;
}

.user-editor-dialog {
  width: min(calc(100vw - 2rem), 55rem);
  max-height: min(46rem, calc(var(--app-available-height) - 2rem));
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
  overflow-y: auto;
}

.user-editor-form {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 0 !important;
}

.user-identity-fields { gap: 1rem; }

.user-permission-fieldset {
  min-width: 0;
  margin: 0;
  padding: .85rem;
  border: 1px solid var(--ui-color-border);
  border-radius: .8rem;
}

.user-permission-fieldset legend {
  padding: 0 .35rem;
  color: var(--ui-color-text-heading);
  font-size: .78rem;
  font-weight: 850;
}

.user-permission-options,
.user-group-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.user-group-options {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--ui-color-border-subtle);
}

.user-group-options:empty { display: none; }

.checkbox-option {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  min-width: 0;
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--ui-color-border-subtle);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--ui-color-surface-raised) 76%, transparent);
  cursor: pointer;
}

.checkbox-option-compact { padding: .65rem .75rem; }
.user-editor-dialog .checkbox-option input[type="checkbox"] {
  width: 1.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: .1rem 0 0;
  padding: 0;
}
.checkbox-option > span { display: grid; min-width: 0; gap: .16rem; }
.checkbox-option strong { color: var(--ui-color-text); font-size: .76rem; }
.checkbox-option small { color: var(--ui-color-text-muted); font-size: .67rem; line-height: 1.35; }
.user-group-options.selection-disabled { opacity: .45; }
.user-editor-actions { margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--ui-color-border); }

/* Benutzerzuordnung: ein Formular, feste Aktionen, unabhängig scrollbar
   bleibende Rollen/Gruppen. Keine vom Inhalt abhängige Formularpaginierung. */
#user-editor-dialog {
  width: min(94vw, 64rem);
  height: min(48rem, calc(var(--dialog-viewport-height, 100dvh) * .92));
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 1rem);
  padding: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
}
#user-editor-dialog[open] { display: flex; flex-direction: column; }
#user-editor-dialog > .modal-header { flex: 0 0 auto; min-height: 0; margin: 0; padding: 0 0 .8rem; align-items: start; }
#user-editor-dialog .modal-header h2 { font-size: 1.5rem; }
#user-editor-description { font-size: .85rem; }
#user-invite-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: .8rem;
  padding: .8rem 0 0 !important;
  background: transparent;
  box-shadow: none;
}
#user-editor-dialog .user-editor-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .9rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#user-editor-dialog .user-identity-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#user-editor-dialog .user-identity-fields .field { margin: 0; font-size: .85rem; }
#user-editor-dialog .user-access-panels {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 1rem;
  min-height: 0;
}
#user-editor-dialog .user-permission-fieldset { display: flex; flex-direction: column; min-height: 0; gap: .65rem; }
#user-editor-dialog .user-permission-fieldset h3 { margin: 0; font-size: 1rem; color: var(--ui-color-text-heading-emphasis); }
#user-editor-dialog :is(.user-access-description, .user-access-note, .user-access-summary) { margin: 0; color: var(--ui-color-text-muted); font-size: .75rem; line-height: 1.4; }
#user-editor-dialog .user-access-description { margin-top: -.4rem; }
#user-editor-dialog .user-access-summary { flex: 0 0 auto; font-weight: 750; }
#user-editor-dialog .user-permission-options {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  gap: .6rem;
}
#user-editor-dialog .user-permission-options .checkbox-option { flex: 0 0 auto; }
#user-editor-dialog .user-group-list {
  flex: 1 1 auto;
  min-height: 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-color-border-subtle);
  border-radius: .6rem;
  scrollbar-gutter: stable;
}
#user-editor-dialog .user-group-options { display: block; margin: 0; padding: 0; border: 0; }
#user-editor-dialog .user-group-option { grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem .6rem; border: 0; border-bottom: 1px solid var(--ui-color-border-subtle); border-radius: 0; background: transparent; }
#user-editor-dialog .user-group-option:last-child { border-bottom: 0; }
#user-editor-dialog .user-group-option:has(input:checked) { background: color-mix(in srgb, var(--ui-color-accent) 10%, transparent); }
#user-editor-dialog .checkbox-option:has(input:disabled) { cursor: default; }
#user-editor-dialog .user-group-option input { margin: 0; }
#user-editor-dialog .user-group-access-reason { font-size: .62rem; text-align: right; }
#user-editor-dialog .user-group-empty { margin: 0; padding: .8rem; font-size: .8rem; color: var(--ui-color-text-muted); }
#user-editor-dialog .user-editor-actions { flex: 0 0 auto; display: flex; flex-direction: row; justify-content: flex-end; gap: .65rem; margin: 0; padding: .8rem 0 0; }
#user-editor-dialog .user-editor-actions button { width: auto; min-height: 2.75rem; }
#user-editor-message { flex: 0 0 auto; margin: 0; }
#user-editor-message:empty { display: none; }
@media (max-width: 760px), (max-height: 650px) {
  #user-editor-dialog .user-editor-content { display: block; overflow-y: auto; padding: .2rem; scrollbar-gutter: stable; }
  #user-editor-dialog .user-access-panels { margin-top: 1rem; }
  #user-editor-dialog .user-group-panel { height: 26rem; }
  #user-editor-dialog .user-permission-options { max-height: 16rem; }
}
@media (max-width: 760px) {
  #user-editor-dialog { width: calc(var(--dialog-viewport-width, 100vw) - 1rem); height: calc(var(--dialog-viewport-height, 100dvh) - 1rem); }
  #user-editor-dialog .user-access-panels { grid-template-columns: 1fr; }
  #user-editor-dialog .user-identity-fields { grid-template-columns: 1fr; gap: .6rem; }
  #user-editor-dialog .user-editor-actions button { flex: 1 1 0; min-width: 0; padding-inline: .6rem; }
}

.inline-management-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.inline-management-form .field,
.management-form .field {
  display: grid;
  gap: 0.35rem;
}

.management-dialog :is(.inline-management-form, .management-form) input,
.management-dialog :is(.inline-management-form, .management-form) select { width: 100%; }

.inline-management-form .primary-button { min-width: 10rem; }

.management-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.management-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(55, 126, 136, 0.2);
  border-radius: 0.7rem;
}

.management-list-item > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (max-width: 760px) {
  .management-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(var(--app-available-height) - 1rem);
    padding: 1rem;
  }
  .management-dialog-content { padding: .8rem 0 0; }
  .inline-management-form { grid-template-columns: 1fr; }
  .inline-management-form .primary-button,
  .management-dialog .management-form > .primary-button { width: 100%; }
  .management-list-item { align-items: stretch; flex-direction: column; }
  .user-management-toolbar { align-items: stretch; flex-direction: column; }
  .user-management-toolbar .primary-button { width: 100%; }
  .customer-user-table,
  .customer-user-table tbody,
  .customer-user-table tr,
  .customer-user-table td { display: block; width: 100%; }
  .customer-user-table thead { display: none; }
  .customer-user-table tbody { display: grid; gap: .75rem; padding: .75rem; }
  .customer-user-table tr { overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: .8rem; background: var(--ui-color-surface-raised); }
  .customer-user-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .65rem .75rem; white-space: normal; }
  .customer-user-table td::before { color: var(--ui-color-gold-light); content: attr(data-label); font-size: .62rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
  .customer-user-table .customer-user-action-cell { display: grid; padding: .65rem .75rem !important; }
  .customer-user-actions { justify-content: flex-start; }
  .user-editor-dialog { width: calc(100vw - 1rem); max-height: calc(var(--app-available-height) - 1rem); padding: 1rem; }
  .user-identity-fields,
  .user-permission-options,
  .user-group-options { grid-template-columns: 1fr; }
  .user-editor-actions { display: grid; grid-template-columns: 1fr; }
  .user-editor-actions button { width: 100%; }
}

.measurement-time-warning {
  border-color: #b42318 !important;
  color: #b42318;
  font-weight: 700;
}

/* Visuelle Designstudie für die spätere Pulsmesser-Auswahl. */
.sensor-showcase-dialog {
  width: min(calc(100vw - 2rem), 78rem);
  max-width: 78rem;
  overflow-x: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-color-gold) 52%, transparent);
  background:
    radial-gradient(circle at 50% 43%, rgba(15, 143, 98, .18), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(213, 173, 82, .14), transparent 28%),
    linear-gradient(145deg, #071e25, #06171e 62%, #091b20);
}

.sensor-showcase-shell { padding: clamp(1.15rem, 2.5vw, 2rem); }
.sensor-showcase-header { align-items: flex-start; margin-bottom: .75rem; }
.sensor-showcase-header h2 { margin: 0; color: var(--ui-color-text); font-size: clamp(1.55rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.sensor-showcase-header-actions { display: flex; align-items: center; gap: .75rem; }
.sensor-showcase-preview-badge { padding: .38rem .7rem; border: 1px solid rgba(213, 173, 82, .38); border-radius: 999px; color: var(--ui-color-gold-light); background: rgba(213, 173, 82, .09); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sensor-showcase-description { max-width: 55rem; margin: 0 0 .8rem; color: var(--ui-color-text-muted); line-height: 1.55; }

.sensor-showcase-stage {
  position: relative;
  overflow: hidden;
  margin-inline: calc(clamp(1.15rem, 2.5vw, 2rem) * -1);
  isolation: isolate;
}
.sensor-showcase-stage::before,
.sensor-showcase-stage::after { position: absolute; z-index: 3; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem); content: ""; pointer-events: none; }
.sensor-showcase-stage::before { left: 0; background: linear-gradient(90deg, #071c23, transparent); }
.sensor-showcase-stage::after { right: 0; background: linear-gradient(-90deg, #071c23, transparent); }
.sensor-showcase-aura { position: absolute; z-index: -1; inset: 10% 30%; pointer-events: none; }
.sensor-showcase-aura span { position: absolute; inset: 0; border: 1px solid rgba(75, 189, 120, .17); border-radius: 50%; animation: sensor-showcase-orbit 12s linear infinite; }
.sensor-showcase-aura span:nth-child(2) { inset: 13%; border-color: rgba(213, 173, 82, .2); animation-duration: 9s; animation-direction: reverse; }
.sensor-showcase-aura span:nth-child(3) { inset: 27%; border-color: rgba(75, 189, 120, .28); animation-duration: 7s; }

.sensor-showcase-track {
  --sensor-card-width: clamp(16rem, 35vw, 24rem);
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  overflow-x: auto;
  padding: 1.25rem max(1rem, calc(50% - var(--sensor-card-width) / 2)) 1.6rem;
  scroll-padding-inline: max(1rem, calc(50% - var(--sensor-card-width) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}
.sensor-showcase-track::-webkit-scrollbar { display: none; }
.sensor-showcase-track:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: -3px; }
.sensor-showcase-track.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.sensor-showcase-card {
  display: grid;
  flex: 0 0 var(--sensor-card-width);
  min-width: 0;
  padding: 1rem 1rem 1.1rem;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(75, 189, 120, .2);
  border-radius: 1.4rem;
  color: var(--ui-color-text);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 48%),
    rgba(5, 28, 33, .9);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .22);
  opacity: .5;
  transform: scale(.88);
  transition: opacity 300ms ease, transform 360ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease, box-shadow 300ms ease;
}
.sensor-showcase-card:hover { opacity: .78; border-color: rgba(213, 173, 82, .38); }
.sensor-showcase-card.selected {
  border-color: var(--ui-color-gold);
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 1px rgba(213, 173, 82, .16), 0 1.6rem 4rem rgba(0, 0, 0, .38), 0 0 4rem rgba(15, 143, 98, .12);
}
.sensor-showcase-visual { display: grid; position: relative; min-height: clamp(11.5rem, 28vh, 17rem); place-items: center; border-radius: 1rem; background: radial-gradient(circle, rgba(232, 245, 236, .14), rgba(30, 92, 74, .08) 50%, transparent 72%); }
.sensor-showcase-visual::after { position: absolute; right: 12%; bottom: 8%; left: 12%; height: 1.25rem; content: ""; border-radius: 50%; background: rgba(0,0,0,.32); filter: blur(12px); }
.sensor-showcase-visual img { position: relative; z-index: 1; width: 100%; height: clamp(11rem, 27vh, 16.5rem); object-fit: contain; filter: drop-shadow(0 1rem 1.1rem rgba(0,0,0,.32)); pointer-events: none; transform: scale(1.32); transition: transform 450ms cubic-bezier(.2,.8,.2,1); }
.sensor-showcase-card.selected .sensor-showcase-visual img { transform: translateY(-.25rem) scale(1.42); }
.sensor-showcase-card[data-sensor-category="Fingersensor"] .sensor-showcase-visual img,
.sensor-showcase-card[data-sensor-category="Bluetooth-Sensormodul"] .sensor-showcase-visual img { transform: scale(.92); }
.sensor-showcase-card.selected[data-sensor-category="Fingersensor"] .sensor-showcase-visual img,
.sensor-showcase-card.selected[data-sensor-category="Bluetooth-Sensormodul"] .sensor-showcase-visual img { transform: translateY(-.25rem) scale(1); }
.sensor-showcase-card-copy { display: grid; gap: .2rem; padding: .85rem .35rem 0; }
.sensor-showcase-card-copy > span { color: var(--ui-color-accent); font-size: .63rem; font-weight: 900; letter-spacing: .16em; }
.sensor-showcase-card-copy strong { overflow: hidden; color: var(--ui-color-text); font-size: clamp(1.15rem, 2vw, 1.45rem); text-overflow: ellipsis; white-space: nowrap; }
.sensor-showcase-card-copy small { color: var(--ui-color-text-muted); font-size: .8rem; }

.sensor-showcase-arrow { display: grid; position: absolute; z-index: 5; top: 50%; width: 2.8rem; height: 2.8rem; padding: 0 0 .12rem; place-items: center; border: 1px solid rgba(213,173,82,.45); border-radius: 50%; color: var(--ui-color-gold-light); background: rgba(5, 29, 34, .84); box-shadow: 0 .8rem 2rem rgba(0,0,0,.25); backdrop-filter: blur(8px); font-size: 2rem; line-height: 1; transform: translateY(-50%); }
.sensor-showcase-arrow:hover,
.sensor-showcase-arrow:focus-visible { color: #071712; background: var(--ui-color-gold); outline: none; }
.sensor-showcase-arrow.previous { left: clamp(.65rem, 2vw, 1.4rem); }
.sensor-showcase-arrow.next { right: clamp(.65rem, 2vw, 1.4rem); }

.sensor-showcase-current { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .95rem 1.1rem; border: 1px solid var(--ui-color-border); border-radius: 1rem; background: rgba(4, 27, 32, .72); }
.sensor-showcase-current > div:first-child { display: grid; min-width: 12rem; }
.sensor-showcase-current > div:first-child span { color: var(--ui-color-gold); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sensor-showcase-current strong { color: var(--ui-color-text); font-size: 1.25rem; }
.sensor-showcase-current small { color: var(--ui-color-text-muted); }
.sensor-showcase-capabilities { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.sensor-showcase-capabilities span { padding: .38rem .62rem; border: 1px solid rgba(75,189,120,.25); border-radius: 999px; color: #b9dfca; background: rgba(15,143,98,.1); font-size: .68rem; font-weight: 700; }
.sensor-showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .85rem; }
.sensor-showcase-footer p { margin: 0; color: var(--ui-color-text-muted); font-size: .72rem; }
.sensor-showcase-footer p span { color: var(--ui-color-gold); }
.sensor-showcase-position { display: flex; align-items: center; gap: .8rem; color: var(--ui-color-text-label); font-size: .72rem; }
#sensor-showcase-dots { display: flex; gap: .28rem; }
#sensor-showcase-dots button { width: .42rem; height: .42rem; padding: 0; border: 0; border-radius: 999px; background: rgba(216,210,189,.25); transition: width 220ms ease, background 220ms ease; }
#sensor-showcase-dots button.active { width: 1.4rem; background: var(--ui-color-gold); }

@keyframes sensor-showcase-orbit { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .sensor-showcase-dialog { width: calc(100vw - .75rem); }
  .sensor-showcase-shell { padding: 1rem; }
  .sensor-showcase-header-actions { gap: .4rem; }
  .sensor-showcase-preview-badge { display: none; }
  .sensor-showcase-stage { margin-inline: -1rem; }
  .sensor-showcase-track { --sensor-card-width: min(78vw, 20rem); padding-block: .8rem 1.1rem; }
  .sensor-showcase-current { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .sensor-showcase-capabilities { justify-content: flex-start; }
  .sensor-showcase-footer { align-items: flex-start; flex-direction: column; }
  .sensor-showcase-footer p { max-width: 26rem; }
}
@media (max-height: 750px) and (min-width: 701px) {
  .sensor-showcase-shell { padding: .8rem 1.5rem; }
  .sensor-showcase-header { margin-bottom: .3rem; }
  .sensor-showcase-header h2 { font-size: 1.7rem; }
  .sensor-showcase-description { margin-bottom: .2rem; font-size: .78rem; line-height: 1.35; }
  .sensor-showcase-stage { margin-inline: -1.5rem; }
  .sensor-showcase-track { --sensor-card-width: clamp(15rem, 31vw, 21rem); padding-block: .5rem .7rem; }
  .sensor-showcase-card { padding: .65rem; border-radius: 1.1rem; }
  .sensor-showcase-visual { min-height: 8.5rem; }
  .sensor-showcase-visual img { height: 8.75rem; }
  .sensor-showcase-card-copy { padding-top: .25rem; }
  .sensor-showcase-card-copy strong { font-size: 1rem; }
  .sensor-showcase-current { padding: .55rem .8rem; }
  .sensor-showcase-current strong { font-size: 1rem; }
  .sensor-showcase-footer { padding-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sensor-showcase-aura span { animation: none; }
  .sensor-showcase-card,
  .sensor-showcase-visual img { transition-duration: 1ms; }
}

/* Räumliche Designstudie: geschlossenes Geräte-Rundkarussell. */
.sensor-orbit-dialog {
  width: min(82rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 1.25rem);
  padding: 0;
  overflow: hidden;
  border-color: rgba(213, 173, 82, .58);
  background:
    radial-gradient(circle at 50% 54%, rgba(18, 111, 79, .22), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(213, 173, 82, .12), transparent 29%),
    linear-gradient(148deg, #09292c, #061b23 58%, #0d2425);
  box-shadow: 0 2rem 6rem rgba(0, 8, 12, .65), inset 0 1px rgba(255,255,255,.04);
}
.sensor-orbit-shell { padding: clamp(1rem, 2.1vw, 1.7rem); }
.sensor-orbit-header { align-items: flex-start; margin-bottom: .35rem; }
.sensor-orbit-header h2 { margin: 0; color: var(--ui-color-text); font-size: clamp(1.6rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.sensor-orbit-description { max-width: 60rem; margin: 0 0 .5rem; color: var(--ui-color-text-muted); line-height: 1.5; }
.sensor-orbit-stage {
  position: relative;
  height: clamp(22rem, 49vh, 31rem);
  margin-inline: calc(clamp(1rem, 2.1vw, 1.7rem) * -1);
  overflow: hidden;
  outline: none;
  cursor: grab;
  perspective: 1100px;
  touch-action: pan-y;
  user-select: none;
}
.sensor-orbit-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-color-gold); }
.sensor-orbit-stage.dragging { cursor: grabbing; }
.sensor-orbit-stage::before,
.sensor-orbit-stage::after {
  position: absolute;
  z-index: 150;
  top: 5%;
  bottom: 8%;
  width: clamp(1rem, 7vw, 6rem);
  content: "";
  pointer-events: none;
}
.sensor-orbit-stage::before { left: 0; background: linear-gradient(90deg, #082328 12%, transparent); }
.sensor-orbit-stage::after { right: 0; background: linear-gradient(-90deg, #0b2425 12%, transparent); }
.sensor-orbit-light {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(44rem, 62vw);
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(61, 196, 135, .2), rgba(61, 196, 135, .055) 42%, transparent 70%);
  filter: blur(9px);
  pointer-events: none;
  transform: translateX(-50%);
}
.sensor-orbit-horizon {
  position: absolute;
  z-index: 1;
  top: 49%;
  left: 50%;
  width: min(74rem, 91vw);
  height: 9.5rem;
  border: 1px solid rgba(213, 173, 82, .26);
  border-radius: 50%;
  background: radial-gradient(ellipse, transparent 54%, rgba(213,173,82,.035) 56%, transparent 65%);
  box-shadow: 0 1.6rem 4rem rgba(0,0,0,.3), inset 0 -1px rgba(70,202,143,.16);
  pointer-events: none;
  transform: translate(-50%, -50%) rotateX(64deg);
}
.sensor-orbit-horizon::before,
.sensor-orbit-horizon::after,
.sensor-orbit-horizon span { position: absolute; content: ""; border-radius: 50%; pointer-events: none; }
.sensor-orbit-horizon::before { inset: 13%; border: 1px solid rgba(58, 185, 125, .13); }
.sensor-orbit-horizon::after { inset: 31%; border: 1px solid rgba(213, 173, 82, .12); }
.sensor-orbit-horizon span:nth-child(1) { top: 50%; left: 50%; width: 1.2rem; height: 1.2rem; background: var(--ui-color-gold); box-shadow: 0 0 2.5rem rgba(213,173,82,.8); transform: translate(-50%, -50%); }
.sensor-orbit-horizon span:nth-child(2) { inset: -6%; border: 1px dashed rgba(75,189,120,.12); animation: sensor-orbit-rail 36s linear infinite; }
.sensor-orbit-horizon span:nth-child(3) { inset: 22%; border: 1px dashed rgba(213,173,82,.11); animation: sensor-orbit-rail 26s linear infinite reverse; }
.sensor-orbit-dialog-tilted .sensor-orbit-horizon { transform: translate(-50%, -58%) rotateX(84deg); }
.sensor-orbit-track { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.sensor-orbit-card {
  display: grid;
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(9.5rem, 17vw, 14.5rem);
  min-width: 0;
  height: clamp(12.5rem, 29vh, 18.5rem);
  padding: .5rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 1.4rem;
  opacity: var(--orbit-opacity);
  background: transparent;
  filter: blur(var(--orbit-blur));
  box-shadow: none;
  pointer-events: auto;
  transform: translate(-50%, -50%) translate3d(var(--orbit-x), var(--orbit-y), 0) scale(var(--orbit-scale));
  transform-origin: 50% 60%;
  will-change: transform, opacity, filter;
}
.sensor-orbit-card::after {
  position: absolute;
  right: 15%;
  bottom: 2.6rem;
  left: 15%;
  height: 1rem;
  content: "";
  border-radius: 50%;
  opacity: .7;
  background: rgba(0,0,0,.55);
  filter: blur(10px);
}
.sensor-orbit-card img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(10rem, 25vh, 15.5rem);
  object-fit: contain;
  filter: drop-shadow(0 1.2rem 1rem rgba(0,0,0,.36));
  pointer-events: none;
  transform: scale(1.26);
}
.sensor-orbit-card[data-sensor-category="Fingersensor"] img,
.sensor-orbit-card[data-sensor-category="Bluetooth-Sensormodul"] img { transform: scale(.88); }
.sensor-orbit-card > span {
  display: grid;
  position: absolute;
  z-index: 3;
  right: .7rem;
  bottom: .45rem;
  left: .7rem;
  padding: .45rem .6rem;
  border: 1px solid rgba(213,173,82,.18);
  border-radius: .75rem;
  opacity: .25;
  background: rgba(3,23,29,.72);
  backdrop-filter: blur(8px);
  text-align: left;
}
.sensor-orbit-card > span small { overflow: hidden; color: var(--ui-color-accent); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sensor-orbit-card > span strong { overflow: hidden; color: var(--ui-color-text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.sensor-orbit-card.selected {
  border-color: rgba(213, 173, 82, .7);
  background: radial-gradient(circle at 50% 38%, rgba(239, 250, 242, .15), rgba(11,73,57,.16) 58%, rgba(4,29,34,.55));
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.06), 0 0 0 5px rgba(213,173,82,.035);
}
.sensor-orbit-card.selected > span { opacity: 1; border-color: rgba(213,173,82,.38); background: rgba(3,23,29,.9); }
.sensor-orbit-card.selected img { filter: drop-shadow(0 1.25rem 1.1rem rgba(0,0,0,.42)) drop-shadow(0 0 1.1rem rgba(67,192,132,.13)); }
.sensor-orbit-arrow {
  display: grid;
  position: absolute;
  z-index: 180;
  top: 47%;
  width: 3rem;
  height: 3rem;
  padding: 0 0 .12rem;
  place-items: center;
  border: 1px solid rgba(213,173,82,.5);
  border-radius: 50%;
  color: var(--ui-color-gold-light);
  background: rgba(4,27,32,.86);
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
}
.sensor-orbit-arrow:hover,
.sensor-orbit-arrow:focus-visible { color: #071712; background: var(--ui-color-gold); outline: none; }
.sensor-orbit-arrow.previous { left: clamp(.7rem, 2.4vw, 2rem); }
.sensor-orbit-arrow.next { right: clamp(.7rem, 2.4vw, 2rem); }
.sensor-orbit-drag-hint { display: flex; position: absolute; z-index: 160; bottom: .15rem; left: 50%; align-items: center; gap: .45rem; color: rgba(216,225,218,.5); font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transform: translateX(-50%); }
.sensor-orbit-drag-hint span { color: var(--ui-color-gold); font-size: 1.15rem; }
.sensor-orbit-console {
  display: grid;
  grid-template-columns: minmax(8rem, .65fr) minmax(15rem, 1.45fr) minmax(13rem, 1fr);
  align-items: center;
  border: 1px solid rgba(75,189,120,.2);
  border-radius: 1rem;
  background: rgba(3,24,30,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.sensor-orbit-console > div { min-width: 0; padding: .75rem 1rem; }
.sensor-orbit-console > div + div { border-left: 1px solid rgba(75,189,120,.16); }
.sensor-orbit-counter,
.sensor-orbit-current { display: grid; }
.sensor-orbit-counter span,
.sensor-orbit-current > span { color: var(--ui-color-gold); font-size: .61rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sensor-orbit-counter strong { color: var(--ui-color-text); font-size: 1.05rem; }
.sensor-orbit-current strong { overflow: hidden; color: var(--ui-color-text); font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.sensor-orbit-current small { color: var(--ui-color-text-muted); }
.sensor-orbit-compatibility { display: flex; align-items: center; gap: .65rem; }
.sensor-orbit-compatibility > span { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(75,189,120,.42); border-radius: 50%; color: #061d18; background: var(--ui-color-accent); font-weight: 950; }
.sensor-orbit-compatibility div { display: grid; }
.sensor-orbit-compatibility strong { color: var(--ui-color-text); font-size: .9rem; }
.sensor-orbit-compatibility small { color: var(--ui-color-text-muted); font-size: .69rem; }
.sensor-orbit-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; }
.sensor-orbit-footer p { margin: 0; color: var(--ui-color-text-muted); font-size: .71rem; }
.sensor-orbit-footer p span { color: var(--ui-color-gold); }
#sensor-orbit-dots,
#sensor-orbit-tilted-dots { display: flex; gap: .3rem; }
#sensor-orbit-dots button,
#sensor-orbit-tilted-dots button { width: .42rem; height: .42rem; padding: 0; border: 0; border-radius: 50%; background: rgba(216,210,189,.23); transition: width 220ms ease, background 220ms ease; }
#sensor-orbit-dots button.active,
#sensor-orbit-tilted-dots button.active { width: 1.45rem; border-radius: 999px; background: var(--ui-color-gold); }
@keyframes sensor-orbit-rail { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .sensor-orbit-dialog { width: calc(100vw - .75rem); }
  .sensor-orbit-shell { padding: 1rem; }
  .sensor-orbit-stage { height: 22rem; margin-inline: -1rem; }
  .sensor-orbit-card { width: min(42vw, 11rem); height: 14.5rem; }
  .sensor-orbit-card img { height: 11.5rem; }
  .sensor-orbit-console { grid-template-columns: 5.5rem 1fr; }
  .sensor-orbit-console > div { padding: .65rem .75rem; }
  .sensor-orbit-console > div:nth-child(3) { display: none; }
  .sensor-orbit-footer { align-items: flex-start; flex-direction: column; }
  .sensor-orbit-footer p { max-width: 25rem; }
}
@media (max-height: 750px) and (min-width: 701px) {
  .sensor-orbit-shell { padding: .75rem 1.4rem; }
  .sensor-orbit-header { margin-bottom: .1rem; }
  .sensor-orbit-header h2 { font-size: 1.65rem; }
  .sensor-orbit-description { margin-bottom: 0; font-size: .75rem; line-height: 1.3; }
  .sensor-orbit-stage { height: 17.5rem; margin-inline: -1.4rem; }
  .sensor-orbit-card { width: clamp(8.5rem, 15vw, 11rem); height: 12.5rem; }
  .sensor-orbit-card img { height: 10rem; }
  .sensor-orbit-console > div { padding: .5rem .8rem; }
  .sensor-orbit-current strong { font-size: 1rem; }
  .sensor-orbit-footer { padding-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sensor-orbit-horizon span { animation: none; }
}

.medical-history-dialog { width: min(960px, 95vw); }
.medical-preparation { display: flex; gap: 18px; align-items: center; margin-block: 12px; }
.medical-preparation[hidden] { display: none; }
.medical-preparation svg { width: 90px; flex-shrink: 0; color: var(--ui-color-text); }
.medical-preparation p { font-size: .85rem; }
#medical-diagnoses-dialog { overflow: hidden; }
#medical-diagnoses-dialog form { display: flex; flex-direction: column; max-height: calc(var(--dialog-viewport-height, 100dvh) - 5rem); min-height: 0; }
#medical-diagnoses-dialog .modal-header { flex: 0 0 auto; }
.medical-diagnoses-panel { display: flex; flex-direction: column; min-height: 0; }
.medical-diagnoses-toolbar { flex: 0 0 auto; justify-content: flex-end; }
.medical-diagnoses-content { min-height: 0; overflow: auto; }
.medical-diagnoses-table { min-width: 42rem; table-layout: fixed; }
.medical-diagnoses-table th:first-child { width: auto; }
.medical-diagnoses-table th:nth-child(2) { width: 8.5rem; }
.medical-diagnoses-table th:nth-child(3) { width: 12rem; }
.medical-diagnoses-table th:nth-child(4) { width: 8rem; }
.medical-diagnoses-table th { position: sticky; top: 0; z-index: 1; }
.medical-diagnoses-table :is(th, td) { padding: .75rem 1rem; }
.medical-diagnoses-table td { vertical-align: middle; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.medical-diagnoses-table td:first-child { color: var(--ui-color-text); font-weight: 750; }
.medical-diagnoses-table td:nth-child(3) { white-space: nowrap; }
.medical-diagnoses-table .row-actions { justify-content: flex-start; }
.medical-diagnoses-empty { display: grid; justify-items: center; gap: .65rem; padding: clamp(1.25rem, 4dvh, 2.5rem) 1.25rem; text-align: center; background: var(--ui-color-surface-input); }
.medical-diagnoses-empty svg { width: 2.75rem; height: 2.75rem; fill: none; stroke: var(--ui-color-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.medical-diagnoses-empty h3 { margin: 0; font-size: 1.1rem; color: var(--ui-color-text-heading-emphasis); }
.medical-diagnoses-empty p { max-width: 36rem; margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ui-color-text-muted); }
.medical-diagnoses-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ui-color-border); }
.medical-diagnoses-footer p { margin: 0; font-size: .85rem; }
.medical-diagnoses-footer small { font-size: .75rem; color: var(--ui-color-text-muted); }
#medical-diagnoses-dialog .modal-actions { flex-direction: row; flex-wrap: wrap; gap: .65rem; margin: 0 0 0 auto; }
#medical-diagnoses-dialog :is(.form-message, .medical-error-code):empty { display: none; }
.medical-diagnosis-name-field { grid-column: 1 / -1; }
#medical-diagnosis-editor-dialog .field { min-width: 0; }
#medical-diagnosis-editor-dialog .field label { flex-wrap: wrap; gap: .2em; }
@media (max-width: 680px) {
  #medical-diagnoses-dialog .modal-actions { width: 100%; }
  #medical-diagnoses-dialog .modal-actions > button { flex: 1; width: auto; min-width: 0; }
  #medical-diagnosis-editor-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.medical-error-code { display: block; font-size: .7rem; opacity: .72; }
.medical-sort-button { background: transparent; color: inherit; border: 0; font: inherit; padding: 0; cursor: pointer; }
.medical-measurement-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border-bottom: 1px solid var(--ui-color-border, #68776f); }
.medical-history-dialog textarea { width: 100%; resize: vertical; }
#medical-anamnesis-dialog textarea {
  box-sizing: border-box;
  font: inherit;
  line-height: 1.5;
  padding: .75rem;
  border-width: 1px;
  /* Keep ten complete lines visible, including in the compact dialog layout. */
  min-height: calc(15em + 1.5rem + 2px);
  max-height: none;
}
.patient-group-list {
  --patient-group-row-height: 2.35rem;
  height: calc(var(--patient-group-row-height) * 5 + 2px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-color-border);
  border-radius: .65rem;
  background: var(--ui-color-surface-input);
}
.patient-group-list .patient-group-choice {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: var(--patient-group-row-height);
  box-sizing: border-box;
  padding: .35rem .75rem;
  margin: 0;
  border-bottom: 1px solid var(--ui-color-border);
  color: var(--ui-color-text);
  font-weight: 500;
  cursor: pointer;
}
.patient-group-list .patient-group-choice:last-child { border-bottom: 0; }
.patient-group-list .patient-group-choice > span {
  overflow-wrap: anywhere;
  color: var(--ui-color-text);
  font-weight: inherit;
}
.patient-group-list .patient-group-choice:has(input:checked) {
  background: color-mix(in srgb, var(--ui-color-accent) 22%, var(--ui-color-surface-input));
  box-shadow: inset 3px 0 var(--ui-color-gold);
  font-weight: 700;
}
.patient-group-list .patient-group-choice:focus-within { outline: 2px solid var(--ui-color-gold); outline-offset: -2px; }
.patient-group-list .patient-group-choice input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-color-accent);
  opacity: 1;
}
/* Mobile Patientenansicht: Tabellen dürfen hier keine horizontale Breite erzwingen. */
@media (max-width: 680px) {
  #page-patients .patient-table { display: none !important; }
  #page-patients .patient-table-wrap { overflow-x: hidden; }
  #page-patients .patient-card-list { display: grid; }
  #page-patients .patient-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #page-patients .patient-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(213,173,82,.52);
    color: #f8f3e5;
    background:
      radial-gradient(ellipse 74% 135% at 102% 108%, color-mix(in srgb, var(--ui-color-gold) 29%, transparent), transparent 68%),
      radial-gradient(ellipse 68% 120% at -7% 8%, color-mix(in srgb, var(--ui-color-accent) 28%, transparent), transparent 72%),
      linear-gradient(135deg, rgba(3,25,34,.97), rgba(5,49,41,.93));
    box-shadow: 0 9px 22px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
  }
  #page-patients .patient-card::before {
    position: absolute;
    z-index: -1;
    top: -54%;
    left: -22%;
    width: 144%;
    height: 186%;
    content: "";
    border-radius: 50%;
    opacity: .32;
    pointer-events: none;
    transform: rotate(-18deg) scaleX(1.12);
    background:
      repeating-radial-gradient(ellipse at 47% 48%, transparent 0 13.5%, color-mix(in srgb, var(--ui-color-accent) 27%, transparent) 14% 14.7%, transparent 15.2% 26%),
      radial-gradient(ellipse at 46% 47%, color-mix(in srgb, var(--ui-color-accent) 18%, transparent), transparent 41%);
  }
  #page-patients .patient-card::after {
    position: absolute;
    z-index: -1;
    top: -51%;
    left: -18%;
    width: 138%;
    height: 180%;
    content: "";
    border-radius: 50%;
    opacity: .17;
    pointer-events: none;
    transform: rotate(25deg) scaleX(.82);
    background: repeating-radial-gradient(ellipse at 52% 49%, transparent 0 16%, color-mix(in srgb, var(--ui-color-gold) 38%, transparent) 16.6% 17.2%, transparent 17.8% 31%);
  }
  #page-patients .patient-card-identity strong { color: #fffaf0; }
  #page-patients .patient-card-identity small { color: rgba(236,241,227,.64); }
  #page-patients .patient-card-actions .patient-card-action { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: 9px; font-size: .72rem; font-weight: 800; line-height: 1.15; }
  #page-patients .patient-card-actions .patient-card-action svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; }
  #page-patients :is(.patient-card-measure, .patient-card-results) { border-color: #08745b; color: #fff; background: linear-gradient(145deg, #119a70, #075448); box-shadow: 0 6px 14px rgba(4,82,65,.2); }
  #page-patients .patient-card-details { grid-column: 1 / -1; min-height: 36px !important; border-color: transparent; color: rgba(240,216,138,.76); background: transparent; font-weight: 700; }
  #page-patients .patient-card-measure:disabled { border-color: rgba(123,132,135,.35); color: rgba(255,255,255,.55); background: #455353; box-shadow: none; }

  /* Ab vier Profilen wird ausschließlich der Kachelbereich zur vertikalen
     Walze. Die Aktionen bleiben echte Schaltflächen; Scroll-Snap und die
     räumliche Staffelung betreffen nur die umgebenden Profilkarten. */
  #page-patients .patient-table-wrap.patient-card-wheel-active {
    position: relative;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    isolation: isolate;
    perspective: 52rem;
    touch-action: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  #page-patients .patient-card-list.patient-card-wheel {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    padding: 0;
    overscroll-behavior: none;
    perspective: 52rem;
    touch-action: none;
    transform-style: preserve-3d;
  }
  #page-patients .patient-card-list.patient-card-wheel .patient-card {
    position: absolute;
    top: 50%;
    right: 9px;
    left: 9px;
    width: auto;
    margin: 0;
    /* Gold ist ausschließlich die feste Auswahlmarke der Walze. Die
       drehenden Karten behalten bewusst nur eine dezente grüne Kontur. */
    border-color: rgba(92, 157, 138, .34);
    opacity: var(--patient-wheel-opacity, .72);
    filter: brightness(var(--patient-wheel-brightness, .88)) saturate(var(--patient-wheel-saturation, .86));
    transform: translate3d(0, calc(-50% + var(--patient-wheel-y, 0px)), var(--patient-wheel-depth, -1rem)) rotateX(var(--patient-wheel-tilt, 0deg)) scale(var(--patient-wheel-scale, .96));
    transform-origin: center;
    transition: transform 210ms cubic-bezier(.2,.75,.25,1), opacity 180ms ease, filter 180ms ease, border-color 150ms ease, box-shadow 150ms ease;
    will-change: transform, opacity, filter;
  }
  #page-patients .patient-card-list.patient-card-wheel.dragging .patient-card { transition: none; }
  #page-patients .patient-card-list.patient-card-wheel.settling .patient-card {
    transition: transform 520ms cubic-bezier(.14,.84,.2,1), opacity 360ms ease-out, filter 360ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
  }
  #page-patients .patient-card-list.patient-card-wheel .patient-card:not(.patient-card-wheel-current) .patient-card-actions { pointer-events: none; }
  #page-patients .patient-card-list.patient-card-wheel .patient-card.patient-card-wheel-current {
    /* Der gelbe Auswahlrahmen liegt statisch auf der Walzenhülle.
       Die aktive Karte bleibt bewusst ohne einen zweiten gelben Rahmen. */
    border-color: rgba(122, 181, 162, .44);
    opacity: 1;
    /* Die aktive Kachel ist die Bedienebene. Sie bleibt bewusst außerhalb
       der 3D-/Filter-Komposition, damit Schriften und Buttonbeschriftungen
       mit derselben Kantenschärfe wie normale Schaltflächen gerendert werden. */
    filter: none;
    transform: translateY(calc(-50% + var(--patient-wheel-y, 0px)));
    transform-style: flat;
    backface-visibility: visible;
    will-change: auto;
    box-shadow: 0 9px 22px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
  }

  /* Die langen BLE-Aktionen bleiben auf schmalen Geräten klar lesbar und
     folgen derselben Kante, statt durch Flex-Wrapping versetzt zu stehen. */
  .ble-ready-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .ble-ready-actions > .inline-button {
    width: 100%;
  }
  .ble-ready-actions :is(#back-from-ble-ready, #back-from-ble-sensor) {
    margin-right: 0;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  #page-patients .patient-card-list.patient-card-wheel .patient-card {
    transition: none;
  }
}

/* Der Rahmen liegt als unbewegtes Geschwister der drehenden Karten direkt in
   der nicht scrollbaren Walzenhülle. Dadurch teilt er exakt deren Mitte,
   ohne selbst Teil der 3D-Transformation zu werden. */
.patient-card-wheel-selection-frame {
  position: absolute;
  z-index: 200;
  top: 50%;
  right: 9px;
  left: 9px;
  box-sizing: border-box;
  border: 2px solid var(--ui-color-gold-light);
  border-radius: 13px;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(16, 54, 43, .56), 0 0 16px rgba(213, 173, 82, .2);
}
.patient-card-wheel-selection-frame[hidden] { display: none; }

/* Auf dem Handy werden die vollwertigen Lizenzkacheln wie die Profile auf
   einer endlosen vertikalen Trommel angeordnet. Die goldene Auswahlmarke ist
   ein festes Geschwister der Karten und nimmt an ihrer Bewegung nicht teil. */
@media (max-width: 680px) {
  #register-view .registration-license-grid.registration-license-wheel {
    position: relative;
    display: block;
    height: clamp(23.5rem, 52dvh, 28rem);
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
    perspective: 54rem;
    overscroll-behavior: none;
    touch-action: none;
    transform-style: preserve-3d;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  }

  #register-view .registration-license-wheel .registration-license-card {
    position: absolute;
    top: 50%;
    right: 6px;
    left: 6px;
    width: auto;
    height: 20rem;
    min-height: 20rem;
    margin: 0;
    padding: .7rem .9rem;
    border-color: rgba(92, 157, 138, .34);
    opacity: var(--registration-license-wheel-opacity, .7);
    filter: brightness(var(--registration-license-wheel-brightness, .86)) saturate(var(--registration-license-wheel-saturation, .82));
    transform: translate3d(0, calc(-50% + var(--registration-license-wheel-y, 0px)), var(--registration-license-wheel-depth, -1rem)) rotateX(var(--registration-license-wheel-tilt, 0deg)) scale(var(--registration-license-wheel-scale, .94));
    transform-origin: center;
    transition: transform 210ms cubic-bezier(.2,.75,.25,1), opacity 180ms ease, filter 180ms ease, border-color 150ms ease, box-shadow 150ms ease;
    will-change: transform, opacity, filter;
  }
  #register-view .registration-license-wheel.dragging .registration-license-card { transition: none; }
  #register-view .registration-license-wheel.settling .registration-license-card {
    transition: transform 520ms cubic-bezier(.14,.84,.2,1), opacity 360ms ease-out, filter 360ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
  }
  #register-view .registration-license-wheel .registration-license-card.registration-license-wheel-current,
  #register-view .registration-license-wheel .registration-license-card.selected.registration-license-wheel-current {
    border-color: rgba(122, 181, 162, .44);
    opacity: 1;
    filter: none;
    transform: translateY(calc(-50% + var(--registration-license-wheel-y, 0px)));
    transform-style: flat;
    backface-visibility: visible;
    will-change: auto;
    box-shadow: 0 12px 27px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.06);
  }

  #register-view .registration-license-wheel .registration-license-icon {
    width: 3.1rem;
    height: 3.1rem;
    margin: .15rem auto .55rem;
    font-size: 1.28rem;
  }
  #register-view .registration-license-wheel .registration-license-name { font-size: 1.17rem; }
  #register-view .registration-license-wheel .registration-license-description {
    min-height: 2.6rem;
    margin-top: .32rem;
    font-size: .72rem;
    line-height: 1.42;
  }
  #register-view .registration-license-wheel .registration-license-card ul {
    gap: .32rem;
    margin: .55rem 0 .65rem;
    padding: .58rem 0 0;
  }
  #register-view .registration-license-wheel .registration-license-card li { font-size: .7rem; line-height: 1.3; }
  #register-view .registration-license-wheel .registration-license-price strong { font-size: 1.1rem; }
  #register-view .registration-license-wheel .registration-license-action {
    display: none;
  }
}

.registration-license-wheel-selection-frame {
  position: absolute;
  z-index: 200;
  top: 50%;
  right: 6px;
  left: 6px;
  box-sizing: border-box;
  border: 2px solid var(--ui-color-gold-light);
  border-radius: 1rem;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(16, 54, 43, .56), 0 0 18px rgba(213, 173, 82, .22);
}
.registration-license-wheel-selection-frame[hidden] { display: none; }

.registration-license-wheel-hint {
  position: absolute;
  z-index: 190;
  top: 50%;
  right: 1.5rem;
  left: 1.5rem;
  display: grid;
  justify-items: center;
  gap: .55rem;
  color: var(--ui-color-text);
  text-align: center;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
}
.registration-license-wheel-hint-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
}
.registration-license-wheel-hint-arrow {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-color-gold-light) 78%, transparent);
  border-radius: 50%;
  color: var(--ui-color-gold-light);
  background: radial-gradient(circle, color-mix(in srgb, var(--ui-color-gold) 17%, transparent), color-mix(in srgb, var(--ui-color-surface) 92%, transparent));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 1.1rem color-mix(in srgb, var(--ui-color-gold) 15%, transparent);
}
.registration-license-wheel-hint-arrow svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.registration-license-wheel-hint-arrow.up svg {
  animation: registration-license-wheel-hint-up 1.35s ease-in-out infinite;
}
.registration-license-wheel-hint-arrow.down svg {
  animation: registration-license-wheel-hint-down 1.35s ease-in-out infinite;
}
.registration-license-wheel-hint strong {
  color: var(--ui-color-text-heading-emphasis);
  font-size: 1.05rem;
}
.registration-license-wheel-hint small {
  color: var(--ui-color-text-muted);
  font-size: .74rem;
}
.registration-license-wheel-hint[hidden] { display: none; }

@keyframes registration-license-wheel-hint-up {
  0%, 100% { transform: translateY(.18rem); opacity: .72; }
  50% { transform: translateY(-.28rem); opacity: 1; }
}
@keyframes registration-license-wheel-hint-down {
  0%, 100% { transform: translateY(-.18rem); opacity: .72; }
  50% { transform: translateY(.28rem); opacity: 1; }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  #register-view .registration-license-wheel .registration-license-card { transition: none; }
  .registration-license-wheel-hint-arrow svg { animation: none; }
}

/* Portrait: Die primären Überschriften bilden auf allen Ansichten und
   Dialogen dieselbe ruhige, zentral ausgerichtete visuelle Hierarchie. */
@media (max-width: 680px) and (orientation: portrait) {
  .app-page > .page-heading > div {
    width: var(--ui-heading-page-width);
    margin-inline: auto;
    text-align: center;
  }

  .app-page > .page-heading :is(h1, h2, .section-label),
  #page-overview #overview-name {
    color: var(--ui-color-text-heading-emphasis);
    text-align: center;
  }

  #page-overview .page-heading > div {
    width: var(--ui-heading-page-width);
  }

  #page-overview .page-heading h1 {
    color: var(--ui-color-text-heading-emphasis);
  }

  #patient-detail-dialog > .modal-header {
    margin: 0 0 var(--ui-dialog-content-gap);
    min-height: var(--ui-dialog-header-min-height);
    padding: 0;
  }

  #patient-detail-dialog #close-patient-details {
    position: static;
    align-self: center;
    justify-self: end;
    z-index: 31;
  }

  #patient-detail-dialog .patient-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #patient-detail-dialog .patient-details > div:not(.patient-detail-measure) {
    grid-column: 1 / -1;
  }

  /* Einheitliche Dialogkopfleiste: Einzeilige Titel beginnen an derselben
     Innenkante wie der Inhalt. Umbruch-Titel werden per JS als mehrzeilig
     markiert und im freien Bereich zwischen linker Kante und X zentriert. */
  .modal :is(.modal-header, .license-dialog-header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ui-dialog-header-gap);
    min-height: var(--ui-dialog-header-min-height);
  }

  .modal :is(.modal-header, .license-dialog-header) > div:first-child {
    width: auto;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  .modal :is(.modal-header, .license-dialog-header) > .icon-button {
    /* Keep the cross anchored to its button inside responsive header grids. */
    position: relative;
    justify-self: end;
  }

  .modal :is(.sensor-showcase-header, .sensor-orbit-header) .sensor-showcase-header-actions {
    position: static;
    justify-self: end;
  }

  .modal :is(.modal-header, .license-dialog-header).dialog-title-wraps > div:first-child {
    text-align: center;
  }

  .modal :is(.modal-header, .license-dialog-header) :is(h1, h2, h3),
  .modal.confirm-modal > h2 {
    color: var(--ui-color-text-heading-emphasis);
    text-align: inherit;
  }

  .modal.confirm-modal > h2 {
    width: min(80%, 34rem);
    margin-inline: auto;
  }

  .modal :is(.email-confirmation-copy, .app-action-dialog-copy, .ble-setup-progress-copy) > h2 {
    width: min(80%, 34rem);
    margin-inline: auto;
    color: var(--ui-color-text-heading-emphasis);
    text-align: center;
  }

  /* Im schmalen Hochformat bleibt die vorhandene Auswahlwalze erhalten. */

  .setup-detail-dialog .language-wheel-shell {
    position: relative;
    display: grid;
    gap: .35rem;
    margin-top: .25rem;
  }

  .setup-detail-dialog .language-wheel-picker {
    height: clamp(10.5rem, 27dvh, 12rem);
  }

}

/* Die Anmeldung ist die Visitenkarte der Anwendung und soll mobil stets als
   geschlossene, scrollfreie Komposition erscheinen. */
@media (max-width: 880px) {
  /* Die Registrierung nutzt mobil die gesamte Hoehe fuer ihre drei Schritte. */
  #login-shell:has(#register-view:not([hidden])) .login-visual-panel {
    display: none;
  }
  #login-shell:has(#register-view:not([hidden])) .auth-panel {
    min-height: var(--app-available-height, 100vh);
    justify-content: flex-start;
  }
  #login-shell:has(#register-view:not([hidden])) .registration-step .registration-section {
    padding-top: .75rem;
  }

  #login-shell:has(#auth-view:not([hidden])) {
    height: var(--app-available-height);
    min-height: 0;
    grid-template-rows: clamp(8.75rem, 23dvh, 11.5rem) minmax(0, 1fr);
    overflow: hidden;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-visual-panel {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    background: #020810 url("./assets/branding/ans-explorer.png") center / contain no-repeat;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-brand-visual {
    display: none;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(.35rem, .75dvh, .55rem) 1.15rem .4rem;
    overflow: hidden;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-card {
    width: min(100%, 27rem);
    padding: clamp(1rem, 2.4dvh, 1.45rem) clamp(1.25rem, 5vw, 1.7rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header {
    margin-bottom: clamp(.7rem, 1.7dvh, 1rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header h2 {
    margin-bottom: .3rem;
    font-size: clamp(1.75rem, 7vw, 2.2rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header p:last-child { font-size: .85rem; line-height: 1.35; }
  #login-shell:has(#auth-view:not([hidden])) .field { margin-bottom: clamp(.5rem, 1.3dvh, .7rem); }
  #login-shell:has(#auth-view:not([hidden])) .field > label { min-height: auto; margin-bottom: .25rem; }
  #login-shell:has(#auth-view:not([hidden])) .field input { height: clamp(2.6rem, 6dvh, 2.9rem); }
  #login-shell:has(#auth-view:not([hidden])) .login-save-credentials { margin: -.05rem 0 .5rem; }
  #login-shell:has(#auth-view:not([hidden])) .form-message { min-height: .65rem; margin: 0 0 .35rem; }
  #login-shell:has(#auth-view:not([hidden])) .primary-button,
  #login-shell:has(#auth-view:not([hidden])) .secondary-button { min-height: clamp(2.65rem, 6.2dvh, 3rem); }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions { gap: .55rem; margin-top: .65rem; }
  #login-shell:has(#auth-view:not([hidden])) .auth-link-button { padding-block: .15rem; }
  #login-shell:has(#auth-view:not([hidden])) .legal-links { margin-top: 0; }
}

@media (min-height: 760px) and (max-width: 880px) {
  #login-shell:has(#auth-view:not([hidden])) {
    grid-template-rows: min(30dvh, 17.2rem) minmax(0, 1fr);
  }
}

/* Phone login: reserve the form's actual height first. Only the artwork takes
   the remaining space; input focus must not scroll a clipped form into view.
   Keep tablet/desktop, registration and all licensed workspaces unchanged. */
@media (max-width: 480px) and (min-height: 600px) {
  #login-shell:has(#auth-view:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: visible;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    min-width: 0;
    padding: .25rem .75rem .5rem;
    overflow: visible;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-card {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: clamp(.7rem, 2dvh, 1rem) clamp(.75rem, 3vw, 1rem);
  }
  #login-shell:has(#auth-view:not([hidden])) :is(#auth-view, .field, .password-field, .field input) {
    min-width: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) :is(.card-header p, .form-message, .login-save-credentials span) {
    overflow-wrap: anywhere;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-save-credentials input {
    flex-shrink: 0;
  }
}

#page-patients #patient-pagination {
  flex: 0 0 auto;
  min-height: 2.35rem;
  margin-top: .65rem;
  padding: .25rem 0;
  border: 0;
  background: transparent;
}
.dashboard-shell[data-active-page="patients"] .topbar-title { display: none; }
.dashboard-shell[data-active-page="overview"] .topbar-title { display: none; }
.dashboard-shell[data-active-page="setup"] .topbar-title { display: none; }
#page-setup #setup-heading { color: var(--explorer-gold); }
#page-overview .page-heading > div { width: 100%; }
#page-overview .page-heading h1 { color: var(--ui-color-text-heading-muted); }
#page-overview #overview-name {
  display: block;
  margin-top: .08em;
  overflow-wrap: anywhere;
}

@media (max-width: 950px) {
  .topbar .mobile-menu {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(213,173,82,.38);
    border-radius: 9px;
    color: var(--explorer-gold-light);
    background: rgba(213,173,82,.08);
    font-size: 1.2rem;
    line-height: 1;
  }
  .topbar .mobile-menu:hover,
  .topbar .mobile-menu:focus-visible {
    border-color: var(--explorer-gold);
    color: #fff7dc;
    background: rgba(213,173,82,.17);
    outline: none;
  }
}

@media (max-width: 680px) {
  .dashboard-shell[data-active-page="patients"] {
    height: var(--app-available-height);
    min-height: 0;
    overflow: hidden;
  }
  .dashboard-shell[data-active-page="patients"] .workspace {
    height: 100%;
    min-height: 0;
  }
  .dashboard-shell[data-active-page="patients"] .workspace-content {
    height: calc(var(--app-available-height) - 56px);
    padding: 16px;
    overflow: hidden;
  }
  #page-patients:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #page-patients .data-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
  }
  .dashboard-shell[data-active-page="setup"] {
    height: var(--app-available-height);
    min-height: 0;
    overflow: hidden;
  }
  .dashboard-shell[data-active-page="setup"] .workspace {
    height: 100%;
    min-height: 0;
  }
  .dashboard-shell[data-active-page="setup"] .workspace-content {
    height: calc(var(--app-available-height) - 56px);
    padding: 16px;
    overflow: hidden;
  }
  #page-setup:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #page-setup .page-heading {
    flex: 0 0 auto;
    margin-bottom: 12px;
  }
  #page-setup .page-heading h1 { margin-bottom: 2px; font-size: 1.55rem; }
  #page-setup .page-heading p:last-child { font-size: .76rem; }
  #page-setup .setup-tile-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    flex: 0 1 auto;
    min-height: 0;
    gap: 0;
    align-content: start;
    overflow-y: auto;
  }
  #page-setup .setup-tile {
    min-height: 4.25rem;
    padding: 10px 14px;
  }
  #page-setup .setup-tile .module-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 1.25rem; }
  #page-setup .setup-tile .module-icon svg { width: 1.5rem; height: 1.5rem; }
  #page-setup .setup-tile .module-copy strong { font-size: clamp(1rem, 5.5vw, 1.2rem); }
  #page-setup .setup-tile .module-copy span { font-size: .7rem; }
  #page-patients .patient-table-wrap {
    grid-row: 2;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scrollbar-color: color-mix(in srgb, var(--ui-color-gold) 62%, transparent) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  #page-patients #patient-pagination {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .25rem .45rem;
    min-height: 2.35rem;
    margin-top: .4rem;
    padding: .25rem 0;
    border: 0;
    background: transparent;
  }
  #page-patients .quota-expansion-link {
    padding: 0;
    border: 0;
    color: var(--ui-color-gold);
    background: transparent;
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-underline-offset: .18rem;
  }
  #page-patients .quota-expansion-link:focus-visible {
    outline: 2px solid var(--ui-color-gold);
    outline-offset: .25rem;
    border-radius: .15rem;
  }
  #page-patients .patient-card { scroll-snap-align: start; }
  #page-overview .page-heading { margin-bottom: 16px; }
  #page-overview .page-heading h1 { display: block; margin-bottom: 6px; font-size: clamp(1.7rem, 8vw, 2.15rem); }
  #page-overview .page-heading p:last-child { display: block; font-size: .82rem; }
  #page-overview .summary-row { display: none; }
  #page-overview .overview-measurement-stage { padding: 0; }
  #page-overview .overview-measurement-assistant { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .9rem; padding: 1.1rem; border-radius: 14px; }
  #page-overview .overview-measurement-icon { width: 3.5rem; border-radius: 13px; }
  #page-overview .overview-measurement-copy h2 { font-size: 1.25rem; }
  #page-overview .overview-measurement-copy > p:last-child { font-size: .78rem; }
  #page-overview .overview-measurement-steps { grid-template-columns: 1fr; gap: .55rem; }
  #page-overview .overview-grid { gap: 12px; }
  #page-overview .module-card {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas: "icon copy";
    gap: 12px;
    min-height: 118px;
    padding: 18px;
    border-color: rgba(213,173,82,.52);
    background:
      linear-gradient(135deg, rgba(3,25,34,.95), rgba(5,49,41,.89)),
      url("./assets/branding/ans-explorer-login-scientific-platform.jpg") 74% 48% / cover;
    box-shadow: 0 9px 22px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
  }
  #page-overview .module-icon { grid-area: icon; width: 50px; height: 50px; border-radius: 12px; }
  #page-overview .module-copy { grid-area: copy; min-width: 0; }
  #page-overview .module-copy strong { margin: 3px 0 5px; color: var(--explorer-gold); font-size: 1.15rem; }
  #page-overview .module-copy span { line-height: 1.4; }
  #page-overview .module-arrow { display: none; }
}

/* Dialogtitel tragen unabhängig von der Auflösung die Produkt-Akzentfarbe.
   Der dunkle Inhaltsbereich behält damit seine ruhige Lesbarkeit, während
   der Kopf eines Dialogs sofort als Orientierungspunkt erkennbar bleibt. */
.modal :is(.modal-header, .license-dialog-header) :is(h1, h2, h3),
.modal.confirm-modal > h2,
.modal :is(.email-confirmation-copy, .app-action-dialog-copy, .ble-setup-progress-copy) > h2,
.modal .analysis-process-intro h2 {
  color: var(--ui-color-text-heading-emphasis);
}

/* Die Kopfzeile enthält ausschließlich den eigentlichen Dialogtitel. Eine
   vorangestellte Bereichsmarke erzeugt sonst unterschiedliche Höhen und ist
   bei Titeln wie „System“ oder „Appmodus“ nur eine Wiederholung. */
.modal :is(.modal-header, .license-dialog-header) .section-label {
  display: none;
}

/* Seiten- und Bereichsüberschriften bilden außerhalb von Dialogen dieselbe
   Gold-Hierarchie. Namen von Personen oder Messungen bleiben bewusst
   Inhaltswerte und damit gut lesbar in der Standard-Textfarbe. */
.app-page > .page-heading :is(h1, h2, .section-label),
#page-setup .setup-tile .module-copy strong {
  color: var(--ui-color-text-heading-emphasis);
}

/* Touch-Bedienung des Messwertverlaufs: große Ziele statt präzisem Ziehen
   und ein sichtbarer Aktionsweg ohne Rechtsklick. */
@media (max-width: 680px) {
  /* Auf dem Handy sind die Verläufe der Hauptinhalt. Die umgebenden
     Bedienelemente bleiben erreichbar, geben den beiden Diagrammen aber
     deutlich mehr vertikale und horizontale Fläche. */
  .results-dialog[open] {
    display: flex;
    flex-direction: column;
    width: calc(100% - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 10px;
    overflow: hidden;
  }
  .results-dialog .results-header,
  .results-dialog > .measurement-patient {
    flex: 0 0 auto;
  }
  .results-dialog .results-header {
    min-height: 46px;
    margin-bottom: 5px;
  }
  .results-dialog > .measurement-patient {
    min-height: 34px;
    margin-bottom: 6px;
    padding: 6px 10px;
  }
  .results-dialog #results-content:not([hidden]) {
    display: grid;
    grid-template-rows: auto auto minmax(0, .88fr) minmax(0, 1.12fr);
    flex: 1 1 auto;
    min-height: 0;
    gap: 5px;
    overflow: hidden;
  }
  .results-dialog .results-parameter-panel {
    padding: 6px 8px;
  }
  .results-dialog .results-parameter-panel .section-label {
    margin-bottom: 4px;
  }
  .results-dialog #result-parameter-list {
    display: none;
  }
  .results-dialog .result-parameter-wheel-shell {
    display: grid;
    gap: .25rem;
  }
  .results-dialog .result-parameter-wheel {
    height: clamp(6.25rem, 14dvh, 7.25rem);
  }
  .results-dialog .result-parameter-wheel .wheel-picker-option {
    right: .5rem;
    left: .5rem;
    gap: .65rem;
    padding-inline: .65rem;
  }
  .results-dialog .result-parameter-wheel .wheel-picker-option strong {
    overflow: visible;
    font-size: .74rem;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }
  .results-dialog .analysis-results-heading {
    margin: 0 2px;
  }
  .results-dialog .analysis-results-heading h3 {
    margin: 0;
    font-size: .82rem;
  }
  .results-dialog .overview-chart-card,
  .results-dialog .detail-chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  .results-dialog .chart-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 8px;
    min-height: 0;
    padding: 6px 9px;
  }
  .results-dialog .chart-heading-controls {
    display: grid;
    flex: none;
    justify-items: end;
    align-items: end;
    gap: 3px;
    margin-left: 0;
  }
  .results-dialog .chart-heading-controls > span {
    font-size: .61rem;
  }
  .results-dialog .chart-legend {
    gap: 7px;
    margin-left: 0;
    font-size: .56rem;
  }
  .results-dialog .detail-chart-card .chart-heading {
    align-items: center;
  }
  .results-dialog .detail-chart-card .selected-measurement {
    min-width: 8.5rem;
    padding: 4px 7px;
  }
  .results-dialog .detail-chart-card .selected-measurement strong {
    font-size: .9rem;
  }
  .results-dialog .detail-chart-card .selected-measurement small {
    font-size: .57rem;
  }
  .results-dialog .overview-chart-card .result-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .results-dialog .detail-chart-card .result-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .results-dialog .chart-selection-handle { display: none; }
  .results-dialog .chart-action-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px;
  }
  .results-dialog .chart-action-bar .chart-help {
    padding: 0 2px;
    font-size: .57rem;
    text-align: center;
  }
  .results-dialog .chart-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .results-dialog .measurement-actions-button {
    width: 100%;
    min-height: 36px;
    font-size: .7rem;
  }
  .results-dialog .measurement-context-menu:not([data-point-menu="true"]) {
    position: fixed;
    z-index: 100;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    top: auto !important;
    width: auto;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,.62);
  }
  .results-dialog .measurement-context-menu:not([data-point-menu="true"]) button {
    min-height: 46px;
    padding: 11px 13px;
    font-size: .8rem;
  }
}

.stored-ecg-modal { width: min(1100px, calc(100vw - 48px)); }
#stored-ecg-canvas { display: block; width: 100%; height: 310px; touch-action: none; cursor: grab; }
#stored-ecg-position { width: 100%; }

@media (max-width: 680px) and (max-height: 700px) {
  .results-dialog[open] {
    padding: 7px;
  }
  .results-dialog .results-header {
    min-height: 40px;
    margin-bottom: 3px;
  }
  .results-dialog > .measurement-patient {
    min-height: 30px;
    margin-bottom: 4px;
    padding-block: 4px;
  }
  .results-dialog .result-parameter-wheel {
    height: 5.25rem;
  }
  .results-dialog .wheel-picker-scroll-hint {
    min-height: .65rem;
  }
  .results-dialog .chart-heading {
    padding-block: 4px;
  }
  .results-dialog .chart-heading small,
  .results-dialog .chart-action-bar .chart-help {
    display: none;
  }
  .results-dialog .measurement-actions-button {
    min-height: 32px;
  }
}
#person-assignment-dialog { width: min(50rem, calc(100vw - 2rem)); padding: clamp(.6rem, 2vmin, 1.2rem); }
#person-assignment-dialog > p { margin-block: .35rem; line-height: 1.3; overflow-wrap: anywhere; }
#person-assignment-dialog > label { min-width: 0; margin-block: .35rem; }
#person-assignment-dialog select { width: 100%; min-width: 0; color: #eef4f2; background: #092e35; }
#person-assignment-dialog .person-comparison-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem .8rem; padding: .35rem .6rem; margin-block: .25rem;
  border: 1px solid var(--ui-color-border-subtle); border-radius: .5rem;
  min-width: 0; overflow-wrap: anywhere;
}
#person-assignment-dialog .person-comparison-field { grid-column: 1 / -1; }
#person-assignment-dialog .person-comparison-row small { display: block; color: var(--ui-color-text-muted); }
#person-assignment-dialog .person-comparison-different { border-color: var(--ui-color-warning-text); }
#person-assignment-dialog .modal-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#person-assignment-dialog .modal-actions button { flex: 1 1 12rem; min-width: 0; white-space: normal; }

/* Gemeinsamer Fokusrahmen für bearbeitbare Explorer-Felder. Die hellen
   Registrierungsansichten behalten ihren eigenen Fokusstil. */
body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not(.search-field input),
  select:not(.custom-select-native):not([data-native-control]),
  textarea,
  [contenteditable="true"],
  .custom-select-trigger
):focus:not(#login-shell .auth-card.register-mode *) {
  border-color: var(--ui-color-accent, #4bbd78);
  outline: none;
  box-shadow: 0 0 0 4px rgba(75, 189, 120, .15);
}

/* Das Suchfeld besitzt einen gemeinsamen Rahmen um Symbol und Eingabe. */
body .search-field:focus-within {
  border-color: var(--ui-color-accent, #4bbd78);
  box-shadow: 0 0 0 4px rgba(75, 189, 120, .15);
}
body .search-field input:focus { box-shadow: none; }

/* Die Anmeldung hat einen spezifischeren bisherigen Fokus-Selektor. */
body #login-shell:has(#auth-view:not([hidden])) .field input:focus {
  border-color: var(--ui-color-accent, #4bbd78);
  outline: none;
  box-shadow: 0 0 0 4px rgba(75, 189, 120, .15);
}

/* Results-page hero; its rules do not affect result dialogs or other pages. */
#dashboard-shell[data-active-page="results"] .workspace-content {
  padding-top: 0;
  overflow-x: hidden;
  background: #082329;
}
#page-results {
  width: calc(100% + 5rem);
  margin: 0 -2.5rem 0;
}
#page-results .results-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  min-height: clamp(18rem, 28dvh, 24rem);
  margin: 0 calc(-1 * clamp(2rem, 5vw, 4rem)) clamp(1rem, 2vw, 1.5rem);
  width: calc(100% + clamp(2rem, 5vw, 4rem) + clamp(2rem, 5vw, 4rem));
  box-sizing: border-box;
  overflow: hidden;
  background: #082329;
}
#page-results .results-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
#page-results .results-hero-background,
#page-results .results-hero-foreground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  opacity: 1;
}
#page-results .results-hero-background { z-index: -2; }
#page-results .results-hero-foreground { z-index: -1; }
#page-results .results-hero-copy {
  max-width: min(48rem, 62%);
  margin-left: 0;
  position: relative;
  z-index: 1;
  left: clamp(1rem, 1.8vw, 1.5rem) !important;
  padding: clamp(6rem, 12dvh, 8rem) 0 clamp(1.5rem, 3dvh, 2.25rem);
  color: #f5faf8;
}
#page-results .results-hero h1 {
  margin: 0 !important;
  padding: 0 0 .8rem;
  color: #f5faf8;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 20, 24, .7);
}
#page-results .results-hero h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  margin-top: .8rem;
  border-bottom: 3px solid #dfbd69;
}
#page-results .results-hero p {
  margin: 0 !important;
  color: rgba(245, 250, 248, .92);
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0, 20, 24, .7);
}

@media (max-width: 680px) {
  #page-results {
    width: calc(100% + 32px);
    margin: 0 -16px;
  }
  #page-results .results-hero {
    min-height: 16rem;
    margin: 0 -16px 1rem;
    width: calc(100% + 32px);
  }
  #page-results .results-hero-copy {
    max-width: 88%;
    margin-left: 0;
    left: 0;
    padding: 5rem 1.25rem 2rem;
  }
  #page-results .results-hero h1,
  #page-results .results-hero p {
    margin-left: 0 !important;
  }
}

@media (max-width: 680px) {
  #page-measure .measurement-hero-copy {
    padding-top: 5rem;
  }
}

@media (min-width: 681px) and (max-width: 1100px) {
  #page-results {
    width: calc(100% + 4rem);
    margin: 0 -2rem;
  }
  #page-results .results-hero {
    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem);
  }
}

/* The results hero uses the full workspace width without creating a horizontal
   overflow; the image itself supplies the intentional left-side crop. */
#dashboard-shell[data-active-page="results"] .workspace-content {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#dashboard-shell[data-active-page="results"] #page-results {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#dashboard-shell[data-active-page="results"] #page-results .results-hero {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#dashboard-shell[data-active-page="measure"] .workspace-content {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
  background: #082329;
}
#dashboard-shell[data-active-page="measure"] > .workspace,
#dashboard-shell[data-active-page="results"] > .workspace,
#dashboard-shell[data-active-page="setup"] > .workspace {
  position: relative;
}
#dashboard-shell[data-active-page="measure"] .topbar,
#dashboard-shell[data-active-page="results"] .topbar,
#dashboard-shell[data-active-page="setup"] .topbar {
  position: relative;
  inset: auto;
  z-index: 10;
  background: #10262a;
  border-bottom-color: #29403f;
  backdrop-filter: none;
}
#dashboard-shell[data-active-page="measure"] .workspace-content,
#dashboard-shell[data-active-page="results"] .workspace-content,
#dashboard-shell[data-active-page="setup"] .workspace-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-top: 0;
  overflow-y: auto;
}
#dashboard-shell[data-active-page="measure"] #page-measure {
  width: 100%;
  margin: 0;
}
#page-measure .measurement-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  min-height: clamp(18rem, 28dvh, 24rem);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #082329;
}
#page-measure .measurement-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}
#page-measure .measurement-hero-background,
#page-measure .measurement-hero-foreground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
#page-measure .measurement-hero-background { z-index: -2; }
#page-measure .measurement-hero-foreground { z-index: -1; }
#page-results .results-hero-foreground,
#page-measure .measurement-hero-foreground {
  inset: auto 0 auto auto;
  top: 68%;
  width: min(48%, 32rem);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: translateY(-50%);
}
#page-measure .measurement-hero-copy {
  padding: clamp(6rem, 12dvh, 8rem) 0 clamp(1.5rem, 3dvh, 2.25rem);
  position: relative;
  left: clamp(1rem, 1.8vw, 1.5rem);
}
#page-measure .measurement-hero h1 {
  margin: 0;
  padding: 0 0 .8rem;
  color: #f5faf8;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 20, 24, .7);
}
#page-measure .measurement-hero h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  margin-top: .8rem;
  border-bottom: 3px solid #dfbd69;
}

/* Shared onboarding for Messen and the empty Results states only. */
.results-profile-introduction,
#measure-first-profile {
  width: min(100%, 35rem);
  margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--ui-color-border-subtle);
  border-radius: 14px;
  color: var(--ui-color-text);
  background: var(--ui-color-surface);
  overflow-wrap: anywhere;
  text-align: center;
}
.results-profile-introduction h2, .results-profile-introduction h3,
#measure-first-profile h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.results-profile-introduction p,
#measure-first-profile p { max-width: 65ch; margin: 0 auto 1.25rem; color: var(--ui-color-text-muted); text-align: center; }
.results-profile-introduction button,
#measure-first-profile button { max-width: 100%; margin-inline: auto; white-space: normal; }
#personal-results-overview .results-profile-introduction > span { display: none; }

#page-results .results-content > .results-profile-introduction {
  margin: -.5rem auto 0;
  padding: 0 clamp(1.5rem, 3vw, 3rem) 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#page-measure .measure-profile-content > #measure-first-profile {
  margin: -.5rem auto 0;
  padding: 0 clamp(1.5rem, 3vw, 3rem) 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#page-results .results-content,
#page-measure .measure-profile-content {
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(1rem, 2vw, 2rem);
}

/* Shared profile toolbar for the measurement and results destinations. */
.personal-measurement-page .personal-profile-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
}
.personal-measurement-page .personal-profile-toolbar > label {
  display: grid;
  flex: 1 1 16rem;
  min-width: 0;
  gap: .35rem;
}
.personal-measurement-page .personal-profile-toolbar > button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}
.personal-measurement-page .measurement-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: .8rem;
}
.personal-measurement-page .measurement-option {
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--ui-color-text);
  background: var(--ui-color-surface);
  border-color: var(--ui-color-border-subtle);
  overflow-wrap: anywhere;
}
.personal-measurement-page .measurement-option small { color: var(--ui-color-text-muted); }
.personal-measurement-page .measurement-option:disabled { opacity: .6; cursor: not-allowed; }

/* Only the live entry on Messen has an independently operable remedy. */
#measure-actions { align-items: start; }
#measure-actions .measurement-live-option { min-width: 0; }
#measure-actions .measurement-live-option > .measurement-option { width: 100%; }
#measure-actions .measurement-live-option.locked {
  border: 1px solid var(--ui-color-border-subtle);
  border-radius: 14px;
  background: var(--ui-color-surface);
}
#measure-actions .measurement-live-option.locked > .measurement-option {
  border-color: transparent;
  opacity: 1;
  color: var(--ui-color-text-muted);
}
#measure-actions .measurement-live-option.locked .measurement-option-icon { opacity: .6; }
#measure-actions .measurement-availability {
  padding: 0 clamp(.75rem, 2vw, 1.25rem) 1rem;
  color: var(--ui-color-text);
  overflow-wrap: anywhere;
}
#measure-actions .measurement-availability p { margin: .35rem 0 .75rem; color: var(--ui-color-text-muted); }
#measure-actions .measurement-availability button { max-width: 100%; white-space: normal; }

/* Showcase treatment for the page-level measurement choices. The existing
   button structure and data attributes remain the functional entry points. */
#dashboard-shell #page-measure #measure-actions {
  width: calc(100% - clamp(2rem, 6vw, 6rem));
  max-width: 88rem;
  margin-inline: auto;
  box-sizing: border-box;
}
#dashboard-shell #page-measure .measure-profile-panel {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: end;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin-right: 0;
  margin-bottom: 2rem;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#dashboard-shell #page-measure .measure-profile-panel > label {
  flex: 1 1 16rem;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#dashboard-shell #page-measure .measure-profile-panel > label select {
  margin-top: 0;
  width: 100%;
}
#dashboard-shell #page-measure #measure-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
}
#dashboard-shell #page-measure #measure-actions .measurement-live-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
#dashboard-shell #page-measure #measure-actions > .measurement-option,
#dashboard-shell #page-measure #measure-actions .measurement-live-option > .measurement-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(10rem, 18dvh, 13rem);
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(148, 199, 197, .3);
  border-radius: 1rem;
  color: #edf4f2;
  background: linear-gradient(135deg, rgba(18, 67, 70, .9), rgba(6, 37, 43, .92));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .08);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#dashboard-shell #page-measure #measure-actions .measurement-option:hover:not(:disabled) {
  border-color: rgba(226, 194, 117, .78);
  background: linear-gradient(135deg, rgba(29, 87, 86, .94), rgba(7, 46, 50, .96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}
#dashboard-shell #page-measure #measure-actions .measurement-option:focus-visible {
  outline: 2px solid #e2c275;
  outline-offset: 4px;
}
#dashboard-shell #page-measure #measure-actions .measurement-option-icon {
  width: clamp(3.5rem, 6vw, 4.75rem);
  height: clamp(3.5rem, 6vw, 4.75rem);
  border: 1px solid rgba(226, 194, 117, .38);
  border-radius: 1.1rem;
  color: #e6c365;
  background: rgba(8, 104, 100, .42);
}
#dashboard-shell #page-measure #measure-actions .measurement-option-icon svg {
  width: clamp(1.9rem, 3.5vw, 2.65rem);
  height: clamp(1.9rem, 3.5vw, 2.65rem);
}
#dashboard-shell #page-measure #measure-actions .measurement-option > span:nth-child(2) {
  gap: .45rem;
}
#dashboard-shell #page-measure #measure-actions .measurement-option strong {
  color: #f1f6f4;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}
#dashboard-shell #page-measure #measure-actions .measurement-option small {
  color: #b9d0cc;
  font-size: clamp(.78rem, 1.2vw, .92rem);
  line-height: 1.45;
}
#dashboard-shell #page-measure #measure-actions .setup-more { align-self: center; }
#dashboard-shell #page-measure #measure-actions .measurement-live-option.locked {
  border: 1px solid rgba(148, 199, 197, .24);
  border-radius: 1rem;
  background: rgba(7, 37, 43, .72);
}
#dashboard-shell #page-measure #measure-actions .measurement-live-option.locked > .measurement-option {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
#dashboard-shell #page-measure #measure-actions .measurement-live-option.locked .measurement-option-icon { opacity: .6; }

@media (max-width: 760px) {
  #dashboard-shell #page-measure .measure-profile-panel {
    align-items: stretch;
    flex-direction: column;
  }
  #dashboard-shell #page-measure .measure-profile-panel > button { width: 100%; }
  #dashboard-shell #page-measure #measure-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 430px) {
  #dashboard-shell #page-measure #measure-actions > .measurement-option,
  #dashboard-shell #page-measure #measure-actions .measurement-live-option > .measurement-option {
    min-height: 9rem;
    padding: 1rem;
    gap: .75rem;
  }
  #dashboard-shell #page-measure #measure-actions .measurement-option-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .9rem;
  }
}

/* The same result controls live here on the Results page, or in their
   original modal for the other entry points. Only the page host is fluid. */
#personal-results-overview {
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin-top: .8rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#personal-results-overview > .measurement-patient { display: none; }
#personal-results-overview .results-parameter-panel {
  border: 0;
  box-shadow: none;
}
#personal-results-overview:has(> #results-empty:not([hidden])) {
  margin-top: .8rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#personal-results-overview:has(> #results-empty:not([hidden])) > #results-empty {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}
#personal-results-overview #results-content:not([hidden]) {
  grid-template-rows: auto auto auto auto;
  overflow: visible;
}
#personal-results-overview .chart-card { height: auto; min-width: 0; }
#personal-results-overview .result-chart {
  flex: none;
  height: clamp(10rem, 24dvh, 16rem);
}
#personal-results-overview .detail-chart { height: clamp(14rem, 32dvh, 24rem); }
#personal-results-overview .chart-heading { display: flex; flex-wrap: wrap; }
#personal-results-overview .chart-action-buttons { display: flex; flex-wrap: wrap; }
#personal-results-overview .chart-action-buttons button { flex: 1 1 12rem; white-space: normal; }

/* Central demo controls stay local to results and reuse the existing report dialog. */
.central-demo-notice { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem; padding:.45rem .7rem; border-inline-start:3px solid #d49b43; background:rgba(212,155,67,.1); }
.central-demo-notice[hidden], .central-demo-label[hidden] { display:none; }
.central-demo-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.central-demo-actions:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
.central-demo-label { color:#915900; font-size:.9rem; }
.custom-select-option.central-demo-option { border-block-start:2px solid #d49b43; margin-block-start:.35rem; font-weight:700; }

/* The measurement wizard follows the current Messen glass language while
   keeping its existing steps, controls and file input unchanged. */
.measurement-glass-dialog {
  border: 1px solid #268c91;
  border-radius: .875rem;
  color: #edf4f2;
  background: linear-gradient(130deg, #0b353a, #041f26);
  box-shadow: 0 1.25rem 4.375rem #00181e55;
}
.measurement-dialog-shell {
  width: min(92vw, 56.25rem);
  max-width: 56.25rem;
  max-height: min(calc(var(--app-available-height) - 1.5rem), 48rem);
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.measurement-glass-dialog .icon-button {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: .35rem;
  color: #c0d6d8;
  background: #10333a;
}
.measurement-glass-dialog .icon-button::before,
.measurement-glass-dialog .icon-button::after {
  width: 1.15rem;
  height: .13rem;
}
.measurement-glass-dialog .icon-button:hover {
  color: #eef4f2;
  background: #17515a;
}
.measurement-glass-dialog .icon-button:focus-visible {
  outline: 2px solid #e2c275;
  outline-offset: 3px;
}
.measurement-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(148, 199, 197, .2);
}
.measurement-dialog-header h2 {
  color: #f1f6f4;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.measurement-dialog-header p {
  margin: .35rem 0 0;
  color: #b9d0cc;
  font-size: .8rem;
  line-height: 1.4;
}
.measurement-dialog-profile-label .custom-select {
  flex: 0 1 24rem;
  width: 100%;
  max-width: 24rem;
  min-width: 0;
}
.measurement-dialog-profile-label .custom-select-trigger {
  min-height: 2.5rem;
  padding-inline: .8rem;
}
.measurement-dialog-profile-label .custom-select-value {
  text-transform: none;
}
#measurement-wizard-dialog .measurement-patient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding: .8rem 1rem;
  border: 1px solid rgba(148, 199, 197, .3);
  border-radius: .9rem;
  background: rgba(7, 37, 43, .68);
}
#measurement-wizard-dialog .measurement-patient > #measurement-person-label {
  color: #b9d0cc;
  font-size: .7rem;
  letter-spacing: .1em;
}
#measurement-wizard-dialog .measurement-patient strong {
  min-width: 0;
  color: #f1f6f4;
  font-size: .95rem;
  overflow-wrap: anywhere;
}
#measurement-wizard-dialog .measurement-import-profile-label {
  display: none;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
#measurement-wizard-dialog .measurement-import-profile-label .custom-select {
  flex: 0 1 24rem;
  width: 100%;
  max-width: 24rem;
  min-width: 0;
}
#measurement-wizard-dialog .measurement-import-profile-label .custom-select-trigger {
  min-height: 2.5rem;
  padding-inline: .8rem;
}
#measurement-wizard-dialog .measurement-import-profile-label .custom-select-value {
  text-transform: none;
}
#measurement-wizard-dialog.personal-file-import .measurement-patient {
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
}
#measurement-wizard-dialog.personal-file-import .measurement-patient > #measurement-person-label {
  display: block;
  margin: 0;
}
#measurement-wizard-dialog.personal-file-import .measurement-patient > #measurement-patient-name {
  display: none;
}
#measurement-wizard-dialog.personal-file-import .measurement-import-profile-label {
  display: grid;
  grid-column: 1;
  gap: .45rem;
  width: 100%;
}
#measurement-wizard-dialog.personal-file-import .measurement-import-profile-label .custom-select {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  border: 0;
  box-shadow: none;
}
#measurement-wizard-dialog.personal-file-import .measurement-import-profile-label .custom-select-trigger {
  box-shadow: none;
}
#measurement-wizard-dialog .wizard-step-heading {
  gap: .9rem;
  margin-bottom: 1rem;
}
#measurement-wizard-dialog .wizard-step-heading > span {
  width: 2.35rem;
  height: 2.35rem;
  flex-basis: 2.35rem;
  border: 1px solid rgba(226, 194, 117, .8);
  border-radius: 50%;
  color: #e6c365;
  background: rgba(8, 104, 100, .3);
  font-size: .9rem;
}
#measurement-wizard-dialog .wizard-step-heading h3 {
  color: #f1f6f4;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
}
#measurement-wizard-dialog .wizard-step-heading p {
  color: #b9d0cc;
  font-size: .82rem;
  line-height: 1.45;
}
#measurement-wizard-dialog .wizard-back {
  margin-bottom: .9rem;
  color: #e6c365;
  font-size: .82rem;
}
#measurement-wizard-dialog .wizard-back:hover { color: #f7f0db; }
#measurement-wizard-dialog .measurement-options { gap: .85rem; }
#measurement-wizard-dialog .measurement-option {
  min-height: 5.8rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(148, 199, 197, .3);
  border-radius: 1rem;
  color: #edf4f2;
  background: linear-gradient(135deg, rgba(18, 67, 70, .88), rgba(6, 37, 43, .92));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .07);
}
#measurement-wizard-dialog .measurement-option:hover:not(:disabled) {
  border-color: rgba(226, 194, 117, .72);
  background: linear-gradient(135deg, rgba(29, 87, 86, .94), rgba(7, 46, 50, .96));
  box-shadow: 0 16px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .1);
  transform: translateY(-2px);
}
#measurement-wizard-dialog .measurement-option-icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(226, 194, 117, .42);
  border-radius: .95rem;
  color: #e6c365;
  background: rgba(8, 104, 100, .4);
}
#measurement-wizard-dialog .measurement-option strong { color: #f1f6f4; font-size: 1rem; }
#measurement-wizard-dialog .measurement-option small { color: #b9d0cc; font-size: .77rem; }
#measurement-wizard-dialog .measurement-option em {
  color: #e6c365;
  background: rgba(226, 194, 117, .12);
}
#measurement-wizard-dialog #measurement-file-step:not([hidden]) {
  display: grid;
  gap: .8rem;
}
#measurement-wizard-dialog .edf-file-picker {
  display: grid;
  place-items: center;
  gap: .65rem;
  min-height: clamp(8rem, 16dvh, 10.5rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(148, 199, 197, .42);
  border-radius: 1rem;
  color: #edf4f2;
  background: linear-gradient(135deg, rgba(18, 67, 70, .88), rgba(6, 37, 43, .94));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .07);
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#measurement-wizard-dialog .edf-file-picker:hover,
#measurement-wizard-dialog .edf-file-picker:focus-visible,
#measurement-wizard-dialog .edf-file-picker:focus-within,
#measurement-wizard-dialog .edf-file-picker.is-dragover {
  border-color: rgba(226, 194, 117, .78);
  background: linear-gradient(135deg, rgba(29, 87, 86, .94), rgba(7, 46, 50, .96));
  box-shadow: 0 16px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .1);
  transform: translateY(-2px);
}
#measurement-wizard-dialog .edf-file-picker > svg {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  color: #e6c365;
}
#measurement-wizard-dialog .edf-file-picker-copy {
  display: grid;
  gap: .25rem;
  min-width: 0;
}
#measurement-wizard-dialog .edf-file-picker strong { color: #f1f6f4; font-size: 1.05rem; }
#measurement-wizard-dialog .edf-file-picker small { color: #b9d0cc; font-size: .8rem; }
#measurement-wizard-dialog .edf-file-picker #edf-file-drop-message { color: #f2d17e; }
#measurement-wizard-dialog .edf-file-select-button {
  min-width: 10rem;
  min-height: 2.4rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(226, 194, 117, .62);
  border-radius: .45rem;
  color: #f7f0db;
  background: rgba(8, 104, 100, .48);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
#measurement-wizard-dialog .edf-file-select-button:hover,
#measurement-wizard-dialog .edf-file-select-button:focus-visible {
  border-color: #e6c365;
  background: rgba(8, 104, 100, .72);
}
@media (max-width: 680px) {
  .measurement-dialog-shell { width: calc(100vw - 1rem); max-width: none; padding: 1rem; }
  #measurement-wizard-dialog .measurement-patient {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  #measurement-wizard-dialog.personal-file-import .measurement-patient {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
  }
  #measurement-wizard-dialog.personal-file-import .measurement-patient > #measurement-person-label,
  #measurement-wizard-dialog.personal-file-import .measurement-import-profile-label {
    grid-column: 1;
  }
  #measurement-wizard-dialog.personal-file-import .measurement-import-profile-label {
    display: grid;
    gap: .35rem;
  }
  #measurement-wizard-dialog .measurement-import-profile-label .custom-select {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }
  #measurement-wizard-dialog .measurement-option { min-height: 5.2rem; padding: .85rem; }
  #measurement-wizard-dialog .measurement-option-icon { width: 2.8rem; height: 2.8rem; }
  #measurement-wizard-dialog .edf-file-picker { min-height: 8.5rem; padding: 1rem; }
}

/* The Personal BLE chooser uses the same content grid as the file-import
   dialog. Medical keeps its existing patient context and copy. */
#measurement-wizard-dialog.personal-file-import.fixed-measurement-person .measurement-patient > #measurement-patient-name {
  display: block; color: #edf4f2; font-size: 1rem; text-transform: none; overflow-wrap: anywhere;
}
/* Connection preview shares the chooser's compact dialog and theme tokens. */
:is(#ble-ready-dialog, #ble-recording-dialog) {
  width: min(calc(var(--dialog-viewport-width, 100vw) - 1rem), 43.75rem);
  max-width: 43.75rem; min-height: 0; max-height: none;
  padding: clamp(.85rem, 2.5vw, 1.5rem);
  color: var(--ui-color-text); border-color: var(--ui-color-border);
  background: var(--ui-color-surface); box-shadow: var(--ui-shadow-dialog);
}
:is(#ble-ready-dialog, #ble-recording-dialog) .measurement-dialog-header { margin-bottom: .8rem; padding-bottom: .65rem; border-color: var(--ui-color-border-subtle); }
:is(#ble-ready-dialog, #ble-recording-dialog) .measurement-dialog-header h2 { color: var(--ui-color-gold); }
:is(#ble-ready-dialog, #ble-recording-dialog) .icon-button { color: var(--ui-color-text-muted); background: var(--ui-color-surface-soft); }
:is(#ble-ready-dialog, #ble-recording-dialog) .icon-button:hover { color: var(--ui-color-gold-light); background: var(--ui-color-surface-hover); }
:is(#ble-ready-dialog, #ble-recording-dialog) .ble-flow-person {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  margin: 0 0 .65rem; padding: 0; border: 0; background: transparent;
}
:is(#ble-ready-dialog, #ble-recording-dialog) .ble-flow-person > span { color: var(--ui-color-text-muted); font-size: .9rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
:is(#ble-ready-dialog, #ble-recording-dialog) .ble-flow-person > strong { min-width: 0; color: var(--ui-color-text); font-size: .9rem; overflow-wrap: anywhere; }
#ble-ready-dialog .ble-ready-detail { margin: 0; color: var(--ui-color-text-muted); font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
#ble-ready-dialog .ble-connection-progress { border-color: var(--ui-color-border); background: var(--ui-color-surface-raised); }
#ble-ready-dialog .ble-live-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: .85rem; padding: .85rem 1rem;
  border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md, .65rem); background: var(--ui-color-surface-raised);
}
#ble-ready-dialog .ble-live-summary[hidden] { display: none; }
#ble-ready-dialog .ble-pulse {
  flex: 1 1 9rem; display: grid; place-items: start; gap: .35rem;
  min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; text-align: left;
}
#ble-ready-dialog .ble-pulse > span { font-size: .75rem; letter-spacing: normal; text-transform: none; }
#ble-ready-dialog .ble-pulse-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
#ble-ready-dialog .ble-pulse strong { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); font-variant-numeric: tabular-nums; }
#ble-ready-dialog .ble-pulse small { font-size: .85rem; }
#ble-ready-dialog .ble-live-summary dl { flex: 1 1 12rem; min-width: 0; }
#ble-ready-dialog .ble-live-summary dl div { justify-content: flex-start; flex-wrap: wrap; gap: .35rem .5rem; min-height: 0; padding: 0; border: 0; background: transparent; }
#ble-ready-dialog .ble-live-summary dt { font-size: .85rem; font-weight: 400; }
#ble-ready-dialog .ble-live-summary dd { font-size: .95rem; overflow-wrap: anywhere; }
#ble-ready-dialog #ble-ready-message { margin-block: .65rem; overflow-wrap: anywhere; }
#ble-ready-dialog #ble-ready-message:empty { display: none; }
#ble-ready-dialog .ble-ready-actions { flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
#ble-ready-dialog .ble-ready-actions button { min-width: 0; min-height: 2.5rem; white-space: normal; }
#ble-ready-dialog #back-from-ble-ready { margin-right: auto; }
@media (max-height: 480px) {
  :is(#ble-ready-dialog, #ble-recording-dialog) { padding: .65rem; }
  :is(#ble-ready-dialog, #ble-recording-dialog) .measurement-dialog-header { margin-bottom: .45rem; padding-bottom: .35rem; }
  :is(#ble-ready-dialog, #ble-recording-dialog) .ble-flow-person { margin-bottom: .4rem; }
  #ble-ready-dialog .ble-live-summary { margin-top: .5rem; padding: .6rem; gap: .4rem .75rem; }
  #ble-ready-dialog .ble-pulse strong { font-size: 2rem; }
  #ble-ready-dialog .ble-ready-actions { margin-top: .5rem; }
}
/* Running measurement keeps its animation and controls within the same shell. */
#ble-recording-dialog .ble-recording-guidance { margin-bottom: .65rem; }
#ble-recording-dialog .ble-recording-guidance h3 { margin: 0; color: var(--ui-color-text); font-size: .95rem; }
#ble-recording-dialog .ble-recording-guidance p { margin: .25rem 0 0; color: var(--ui-color-text-muted); font-size: .8rem; overflow-wrap: anywhere; }
#ble-recording-dialog .ble-recording-guidance p:empty { display: none; }
#ble-recording-dialog .measurement-countdown { margin: .65rem 0; padding: .65rem .85rem; border-color: var(--ui-color-border); background: var(--ui-color-surface-raised); }
#ble-recording-dialog .measurement-countdown > span { color: var(--ui-color-text-muted); }
#ble-recording-dialog .measurement-countdown > strong { margin: .25rem 0 .5rem; color: var(--ui-color-metric-value); font-size: 2rem; }
#ble-recording-dialog .ble-measurement-experience { min-height: clamp(9rem, 26dvh, 14rem); padding: .65rem; border-radius: var(--ui-radius-md, .65rem); }
#ble-recording-dialog .ble-live-pulse-display { width: clamp(7rem, 20dvh, 10rem); }
#ble-recording-dialog .ble-live-pulse-display strong { font-size: clamp(2.75rem, 9dvh, 4rem); }
#ble-recording-dialog .ble-live-status { position: static; max-width: 100%; margin-top: .4rem; text-align: center; overflow-wrap: anywhere; }
#ble-recording-dialog #ble-measurement-message { margin-block: .65rem; overflow-wrap: anywhere; }
#ble-recording-dialog #ble-measurement-message:empty { display: none; }
#ble-recording-dialog .live-measurement-actions { flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
#ble-recording-dialog .live-measurement-actions button { min-width: 0; min-height: 2.5rem; white-space: normal; }
@media (max-height: 480px) {
  #ble-recording-dialog .ble-recording-guidance { margin-bottom: .4rem; }
  #ble-recording-dialog .measurement-countdown { margin-block: .4rem; padding: .4rem .65rem; }
  #ble-recording-dialog .measurement-countdown > strong { margin: .15rem 0 .3rem; font-size: 1.6rem; }
  #ble-recording-dialog .ble-measurement-experience { padding: .4rem; }
  #ble-recording-dialog .live-measurement-actions { margin-top: .4rem; }
}
@media (max-height: 480px) and (min-width: 600px) {
  #ble-recording-dialog[open] { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr); gap: .4rem .65rem; }
  #ble-recording-dialog > :is(.measurement-dialog-header, .ble-flow-person, .ble-recording-guidance, .form-message, .live-measurement-actions) { grid-column: 1 / -1; margin-block: 0; }
  #ble-recording-dialog .measurement-countdown { grid-column: 1; grid-row: 4; align-self: center; margin: 0; }
  #ble-recording-dialog .ble-measurement-experience { grid-column: 2; grid-row: 4; min-height: 0; }
  #ble-recording-dialog .ble-live-pulse-display { width: clamp(5rem, 22dvh, 7rem); }
}
/* Compact Personal sensor chooser. Only the sensor list may scroll. */
#ble-sensor-dialog.personal-ble-sensor-dialog {
  width: min(calc(var(--dialog-viewport-width, 100vw) - 1rem), 43.75rem);
  max-width: 43.75rem;
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 1rem);
  min-height: 0;
  padding: clamp(.85rem, 2.5vw, 1.5rem);
  overflow: visible;
  color: var(--ui-color-text);
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-dialog);
}
#ble-sensor-dialog.personal-ble-sensor-dialog[open] { display: flex; flex-direction: column; gap: .85rem; }
#ble-sensor-dialog.personal-ble-sensor-dialog .measurement-dialog-header {
  flex: 0 0 auto; margin: 0; padding-bottom: .65rem; border-color: var(--ui-color-border-subtle);
}
#ble-sensor-dialog.personal-ble-sensor-dialog .measurement-dialog-header h2 { color: var(--ui-color-gold); }
#ble-sensor-dialog.personal-ble-sensor-dialog .icon-button { color: var(--ui-color-text-muted); background: var(--ui-color-surface-soft); }
#ble-sensor-dialog.personal-ble-sensor-dialog .icon-button:hover { color: var(--ui-color-gold-light); background: var(--ui-color-surface-hover); }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-patient-context {
  flex: 0 0 auto; display: block; margin: 0; padding: 0; border: 0; background: transparent;
}
#ble-sensor-dialog.personal-ble-sensor-dialog.fixed-measurement-person .ble-patient-context {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
}
#ble-sensor-dialog.personal-ble-sensor-dialog :is(.ble-static-person-label, .ble-static-patient-name) { display: none; }
#ble-sensor-dialog.personal-ble-sensor-dialog.fixed-measurement-person :is(.ble-static-person-label, .ble-static-patient-name) {
  display: block; font-size: .9rem; letter-spacing: normal; text-transform: none;
}
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-static-person-label { color: var(--ui-color-text-muted); font-weight: 400; }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-static-patient-name { min-width: 0; overflow-wrap: anywhere; color: var(--ui-color-text); }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-profile-selector { display: grid; gap: .35rem; width: 100%; }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-profile-selector > span { color: var(--ui-color-text-muted); font-size: .8rem; }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-profile-selector .custom-select { width: 100%; max-width: none; }
#ble-sensor-dialog.personal-ble-sensor-dialog #ble-permitted-hardware {
  display: grid; gap: .5rem; min-height: 0; max-height: min(18rem, 40dvh); overflow: auto; padding: .2rem;
}
#ble-sensor-dialog.personal-ble-sensor-dialog #ble-permitted-hardware .hardware-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  width: 100%; min-height: 0; padding: .7rem .8rem;
  border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md, .65rem);
  color: var(--ui-color-text); background: var(--ui-color-surface-raised); box-shadow: none;
}
#ble-sensor-dialog.personal-ble-sensor-dialog #ble-permitted-hardware .hardware-card:not(:has(> svg)) { grid-template-columns: minmax(0, 1fr) auto; }
#ble-sensor-dialog.personal-ble-sensor-dialog #ble-permitted-hardware .hardware-card:hover {
  border-color: var(--ui-color-gold); background: var(--ui-color-surface-hover);
}
#ble-sensor-dialog.personal-ble-sensor-dialog .hardware-card > svg {
  width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; color: var(--ui-color-gold);
}
#ble-sensor-dialog.personal-ble-sensor-dialog .hardware-card > div { min-width: 0; }
#ble-sensor-dialog.personal-ble-sensor-dialog .hardware-card :is(strong, small) { display: block; min-width: 0; overflow-wrap: anywhere; }
#ble-sensor-dialog.personal-ble-sensor-dialog .hardware-card strong { color: var(--ui-color-text); font-size: .9rem; }
#ble-sensor-dialog.personal-ble-sensor-dialog .hardware-card small { margin-top: .2rem; color: var(--ui-color-text-muted); font-size: .75rem; }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-sensor-connect { min-width: 0; min-height: 2.5rem; margin: 0; padding: .5rem .8rem; font-size: .85rem; }
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-sensor-connect:focus-visible { outline: 2px solid var(--ui-color-gold-light); outline-offset: 2px; }
#ble-sensor-dialog.personal-ble-sensor-dialog #ble-sensor-note {
  flex: 0 0 auto; margin: 0; padding: 0; border: 0; color: var(--ui-color-text-muted); background: transparent; font-size: .75rem; line-height: 1.4;
}
#ble-sensor-dialog.personal-ble-sensor-dialog .ble-ready-actions { flex: 0 0 auto; justify-content: flex-start; margin: 0; }
#ble-sensor-dialog.personal-ble-sensor-dialog #back-from-ble-sensor { min-height: 2.5rem; margin: 0; }
@media (max-width: 380px) {
  #ble-sensor-dialog.personal-ble-sensor-dialog #ble-permitted-hardware .hardware-card { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  #ble-sensor-dialog.personal-ble-sensor-dialog .ble-sensor-connect { grid-column: 1 / -1; justify-self: end; }
}
@media (max-height: 480px) {
  #ble-sensor-dialog.personal-ble-sensor-dialog { padding: .65rem; }
  #ble-sensor-dialog.personal-ble-sensor-dialog[open] { gap: .45rem; }
  #ble-sensor-dialog.personal-ble-sensor-dialog .measurement-dialog-header { padding-bottom: .35rem; }
}

/* Context fields belong only to the existing ready/import dialogs. */
:is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions { margin-block: .5rem; min-width: 0; }
:is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions h3 { margin: 0 0 .35rem; font-size: .9rem; }
:is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .75rem; }
:is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions label { min-width: 0; margin: 0; gap: .2rem; }
:is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions :is(select, .custom-select-trigger) { width: 100%; min-width: 0; min-height: 2.25rem; padding-block: .3rem; }
@media (max-width: 360px) and (min-height: 481px) {
  :is(#ble-ready-dialog, #edf-analysis-dialog) .measurement-conditions-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 480px) {
  #ble-ready-dialog .measurement-conditions { margin-block: .25rem; }
  #ble-ready-dialog .measurement-conditions h3 { margin-bottom: .15rem; }
  #ble-ready-dialog .measurement-conditions :is(select, .custom-select-trigger) { min-height: 2rem; }
}