/* =========================================================
   DHACEL APP · UI V129
   Capa visual global. No modifica lógica de negocio.
   ========================================================= */

:root {
  --dh-red: #f34f57;
  --dh-red-hover: #e6424c;
  --dh-red-active: #d83843;
  --dh-red-soft: #fff0f1;
  --dh-red-border: #f7c3c7;

  --dh-bg: #f4f6f8;
  --dh-bg-2: #eef2f6;
  --dh-surface: #ffffff;
  --dh-surface-soft: #f8fafc;
  --dh-surface-muted: #f1f4f7;
  --dh-text: #1c2838;
  --dh-text-2: #405066;
  --dh-muted: #68778b;
  --dh-border: #d9e1e8;
  --dh-border-strong: #c9d3dd;
  --dh-success: #20b978;
  --dh-success-soft: #e7f8f0;
  --dh-warning: #d79a28;
  --dh-danger: #d83f49;

  --dh-radius-sm: 9px;
  --dh-radius: 14px;
  --dh-radius-lg: 18px;
  --dh-radius-xl: 22px;
  --dh-shadow-sm: 0 2px 7px rgba(22, 34, 51, .035);
  --dh-shadow: 0 10px 28px rgba(22, 34, 51, .06);
  --dh-shadow-lg: 0 20px 55px rgba(22, 34, 51, .09);

  --primary: var(--dh-red);
  --primary-dark: var(--dh-red-hover);
  --primary-soft: rgba(243, 79, 87, .11);
  --bg: var(--dh-bg);
  --background: var(--dh-bg);
  --surface: var(--dh-surface);
  --surface-soft: var(--dh-surface-soft);
  --text: var(--dh-text);
  --muted: var(--dh-muted);
  --border: var(--dh-border);
  --shadow: var(--dh-shadow);

  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  --dh-bg: #14191f;
  --dh-bg-2: #181e25;
  --dh-surface: #1d242c;
  --dh-surface-soft: #222a33;
  --dh-surface-muted: #252e38;
  --dh-text: #edf2f7;
  --dh-text-2: #c6d0db;
  --dh-muted: #9ca9b7;
  --dh-border: #35404b;
  --dh-border-strong: #465361;
  --dh-red-soft: #3b2429;
  --dh-red-border: #63343b;
  --dh-success-soft: #18382c;
  --dh-shadow-sm: 0 2px 8px rgba(0, 0, 0, .18);
  --dh-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  --dh-shadow-lg: 0 22px 60px rgba(0, 0, 0, .28);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--dh-bg); }
body {
  min-height: 100vh;
  color: var(--dh-text) !important;
  background: var(--dh-bg) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea { font-family: inherit; }

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

a { transition: color .16s ease, border-color .16s ease, background-color .16s ease, opacity .16s ease; }
button { transition: transform .12s ease, background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease; }
button:active:not(:disabled),
.button:active:not(:disabled) { transform: translateY(1px); }

::selection { background: rgba(243,79,87,.20); }

/* ---------------------------------------------------------
   Barra de desplazamiento discreta
--------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #bdc7d1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c4cdd6; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
html[data-theme="dark"] * { scrollbar-color: #53606e transparent; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #53606e; border-color: transparent; background-clip: padding-box; }

/* ---------------------------------------------------------
   Botón global de tema
--------------------------------------------------------- */
.global-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--dh-border) !important;
  border-radius: 11px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-sm) !important;
  cursor: pointer;
}
.global-theme-toggle:hover { border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; color: var(--dh-red) !important; }

/* ---------------------------------------------------------
   Marca DHACEL APP para flujos de acceso
--------------------------------------------------------- */
.dhacel-ui-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 28px;
  color: var(--dh-text);
  font-size: 1.38rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
}
.dhacel-ui-wordmark span { color: var(--dh-red); }
.login-header > .brand-logo,
.account-header > .brand-logo { display: none !important; }
.login-header > .eyebrow,
.account-header > .eyebrow { display: none !important; }

/* =========================================================
   LOGIN / REGISTRO / RECUPERACIÓN
========================================================= */
.login-page,
.account-page {
  width: min(100% - 28px, 460px) !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.login-card,
.account-card {
  position: relative;
  width: 100% !important;
  padding: 34px 32px !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-xl) !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow) !important;
}

.login-header,
.account-header { margin-bottom: 26px !important; }
.login-header h1,
.account-header h1 {
  margin: 0 !important;
  color: var(--dh-text) !important;
  font-size: clamp(1.8rem, 5vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
}
.login-header .subtitle,
.account-header .subtitle {
  max-width: 34rem;
  margin: 9px 0 0 !important;
  color: var(--dh-muted) !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
}

.login-form,
.account-form { gap: 15px !important; }
.login-form label,
.account-form label {
  gap: 8px !important;
  color: var(--dh-text-2) !important;
  font-size: .82rem !important;
  font-weight: 720 !important;
}
.login-form input,
.account-form input,
.login-form select,
.account-form select {
  min-height: 50px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--dh-border-strong) !important;
  border-radius: 10px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface-soft) !important;
  outline: none !important;
  box-shadow: none !important;
}
.login-form input::placeholder,
.account-form input::placeholder { color: #98a5b5 !important; }
.login-form input:focus,
.account-form input:focus,
.login-form select:focus,
.account-form select:focus {
  border-color: var(--dh-red) !important;
  box-shadow: 0 0 0 3px rgba(243,79,87,.10) !important;
}

.password-field { gap: 8px !important; }
.password-toggle,
.show-password {
  min-height: 46px !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 10px !important;
  color: var(--dh-text-2) !important;
  background: var(--dh-surface) !important;
  box-shadow: none !important;
  font-weight: 730 !important;
}
.password-toggle:hover,
.show-password:hover { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }

.login-button,
.primary-button,
.account-primary-button,
.pwa-install-button {
  min-height: 48px !important;
  border: 1px solid var(--dh-red) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--dh-red) !important;
  box-shadow: none !important;
  font-weight: 780 !important;
}
.login-button:hover,
.primary-button:hover:not(:disabled),
.account-primary-button:hover:not(:disabled),
.pwa-install-button:hover:not(:disabled) { background: var(--dh-red-hover) !important; border-color: var(--dh-red-hover) !important; }

.account-links { margin-top: 24px !important; border-top: 1px solid var(--dh-border) !important; }
.account-links a {
  padding: 15px 0 !important;
  color: var(--dh-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.account-links a:last-child { border-bottom: 0 !important; }
.account-links a strong { color: var(--dh-red) !important; }
.account-links a:hover strong { color: var(--dh-red-hover) !important; }
.response-message { color: var(--dh-muted) !important; font-size: .8rem !important; }
.response-message.error,
.dhacel-passkey-message.error { color: var(--dh-danger) !important; }
.page-footer { color: var(--dh-muted) !important; }
.page-footer span:first-child { color: var(--dh-red) !important; font-weight: 850 !important; }

.dhacel-passkey-button {
  border-color: var(--dh-border) !important;
  border-radius: 10px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
}
.dhacel-passkey-button:hover { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }
.dhacel-passkey-icon { color: var(--dh-red) !important; background: transparent !important; }
.dhacel-passkey-separator { color: var(--dh-muted) !important; }
.dhacel-passkey-separator::before,
.dhacel-passkey-separator::after { background: var(--dh-border) !important; }

/* Recuperar acceso */
.access-help-page { background: var(--dh-bg) !important; }
.access-help-card {
  width: min(100%, 480px) !important;
  padding: 34px !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-xl) !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow) !important;
}
.access-help-brand b { color: var(--dh-text) !important; }
.access-help-brand span { color: var(--dh-red) !important; }
.access-help-card > p,
.access-help-option small,
.access-help-back { color: var(--dh-muted) !important; }
.access-help-option {
  border-color: var(--dh-border) !important;
  border-radius: 12px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface-soft) !important;
  box-shadow: none !important;
}
.access-help-option:hover { border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; transform: translateY(-1px); }
.access-help-icon { color: var(--dh-red) !important; background: var(--dh-red-soft) !important; }

/* PWA */
.pwa-install-overlay { background: rgba(12, 17, 23, .68) !important; backdrop-filter: blur(7px); }
.pwa-install-card {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-xl) !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-lg) !important;
}
.pwa-install-card p,
.pwa-ios-step,
.pwa-ios-notice p { color: var(--dh-muted) !important; }
.pwa-ios-notice { background: var(--dh-red-soft) !important; }
.pwa-ios-notice strong,
.pwa-ios-section h3 { color: var(--dh-text) !important; }
.pwa-bluefy-button { background: var(--dh-red) !important; }
.pwa-cancel-button,
.pwa-close-button { color: var(--dh-text-2) !important; background: var(--dh-surface-soft) !important; border-color: var(--dh-border) !important; }

/* =========================================================
   ESTRUCTURA DE APLICACIÓN: HEADER / SIDEBAR / CONTENIDO
========================================================= */
.app-header {
  height: 78px !important;
  padding: 0 22px !important;
  border-bottom: 1px solid var(--dh-border) !important;
  color: var(--dh-text) !important;
  background: color-mix(in srgb, var(--dh-bg-2) 92%, transparent) !important;
  backdrop-filter: blur(10px);
}
.app-header-brand { color: var(--dh-text) !important; }
.app-header-brand strong { font-size: 1.28rem !important; font-weight: 900 !important; }
.app-header-brand strong span { color: var(--dh-red) !important; }
.app-header-brand small { color: var(--dh-muted) !important; }
.app-header-actions { gap: 8px !important; }
.app-header-icon,
.boton-tema {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 10px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-sm) !important;
}
.app-header-icon:hover,
.boton-tema:hover { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }
.header-notification-count,
.notification-badge { background: var(--dh-red) !important; color: #fff !important; }

.app-layout { background: var(--dh-bg) !important; }
.sidebar {
  color: var(--dh-text) !important;
  background: var(--dh-bg-2) !important;
  border-right: 1px solid var(--dh-border) !important;
  box-shadow: none !important;
}
.main-nav { gap: 7px !important; }
.main-nav-link {
  min-height: 44px !important;
  border-radius: 10px !important;
  color: var(--dh-text-2) !important;
  background: transparent !important;
  font-weight: 650 !important;
}
.main-nav-link:hover { color: var(--dh-text) !important; background: var(--dh-surface-muted) !important; }
.main-nav-link.active {
  color: var(--dh-red) !important;
  background: var(--dh-red-soft) !important;
  box-shadow: inset 3px 0 0 var(--dh-red) !important;
}
.main-nav-icon { color: currentColor !important; }
.clean-session,
.session { border-color: var(--dh-border) !important; }
.clean-session > span,
.session small { color: var(--dh-muted) !important; }
.compact-logout { color: var(--dh-muted) !important; }
.compact-logout:hover { color: var(--dh-red) !important; }

.content { color: var(--dh-text) !important; background: var(--dh-bg) !important; }
.topbar h1,
.reference-topbar h1,
.account-topbar h1,
.history-topbar h1,
.program-editor-topbar h1 { color: var(--dh-text) !important; font-weight: 800 !important; }
.subtitle,
.history-summary,
.dashboard-summary { color: var(--dh-muted) !important; }
.eyebrow,
.section-label,
.step-kicker,
.program-editor-label { color: var(--dh-red) !important; }

/* =========================================================
   BOTONES DE ACCIÓN
========================================================= */
.reference-add-button,
.ble-button,
.primary-action,
.file-download-button,
.settings-save,
.settings-add-alarm,
.settings-delete,
.instrument-delete-button,
.setpoint-dialog-save,
.save-program-button,
.boton-agregar,
.primary,
.button.primary,
button.primary,
.account-danger-button,
.connect-button,
.save-button,
.dhacel-red-action {
  border-color: var(--dh-red) !important;
  color: #fff !important;
  background: var(--dh-red) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.reference-add-button:hover,
.ble-button:hover,
.primary-action:hover:not(:disabled),
.file-download-button:hover,
.settings-save:hover:not(:disabled),
.settings-add-alarm:hover:not(:disabled),
.settings-delete:hover:not(:disabled),
.instrument-delete-button:hover:not(:disabled),
.setpoint-dialog-save:hover:not(:disabled),
.save-program-button:hover:not(:disabled),
.boton-agregar:hover:not(:disabled),
.primary:hover:not(:disabled),
.button.primary:hover:not(:disabled),
.account-danger-button:hover:not(:disabled),
.connect-button:hover:not(:disabled),
.save-button:hover:not(:disabled),
.dhacel-red-action:hover:not(:disabled) {
  border-color: var(--dh-red-hover) !important;
  background: var(--dh-red-hover) !important;
}
.secondary-action,
.secondary-button,
.secondary-program-button,
.boton-volver,
.dashboard-back-button,
.history-action-button,
.neutral,
.button.neutral,
button.neutral {
  border: 1px solid var(--dh-border) !important;
  color: var(--dh-text-2) !important;
  background: var(--dh-surface) !important;
  box-shadow: none !important;
}
.secondary-action:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.secondary-program-button:hover:not(:disabled),
.boton-volver:hover,
.dashboard-back-button:hover,
.history-action-button:hover,
.neutral:hover:not(:disabled) { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(243,79,87,.18) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   DASHBOARD / TARJETAS DE INSTRUMENTOS
========================================================= */
.dashboard-section { margin-top: 0 !important; }
.instrument-filters {
  border: 1px solid var(--dh-border) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-sm) !important;
}
.instrument-filter { color: var(--dh-muted) !important; }
.instrument-filter:hover { color: var(--dh-text) !important; }
.instrument-filter.active {
  color: var(--dh-red) !important;
  background: var(--dh-red-soft) !important;
  box-shadow: none !important;
}

.instrument-selector-card,
.instrument-card,
.channel-card,
.program-panel,
.power-item,
.program-mini-display,
.counter-totalizer-card,
.account-panel,
.datalogger-panel,
.program-editor-card,
.card,
.tarjeta,
.configuration-card,
.progress-panel {
  border-color: var(--dh-border) !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-sm) !important;
}
.instrument-selector-card,
.instrument-card { border-radius: 16px !important; }
.instrument-selector-card:hover { border-color: var(--dh-border-strong) !important; box-shadow: var(--dh-shadow) !important; transform: translateY(-1px); }
.selector-card-title,
.instrument-header h2,
.instrument-card h2,
.channel-card h3 { color: var(--dh-text) !important; }
.selector-card-model,
.selector-last-seen,
.last-seen,
.instrument-id,
.selector-reading-cell > span { color: var(--dh-muted) !important; }
.selector-reading-cell { background: transparent !important; }
.selector-reading-cell strong { color: var(--dh-text) !important; font-variant-numeric: tabular-nums; }
.selector-reading-cell.setpoint strong,
.sp-value { color: var(--dh-red) !important; }
.instrument-status.connected,
.status-connected { color: var(--dh-success) !important; background: var(--dh-success-soft) !important; }
.instrument-status.disconnected { color: var(--dh-muted) !important; }
.instrument-menu-button,
.settings-close { border-color: var(--dh-border) !important; color: var(--dh-text-2) !important; background: var(--dh-surface) !important; box-shadow: none !important; }
.instrument-menu-button:hover,
.settings-close:hover { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }

/* Espera conexión */
.dhacel-connection-wait { height: 4px !important; background: var(--dh-border) !important; }
.dhacel-connection-wait > span { background: var(--dh-red) !important; }

/* Display del instrumento conserva semántica visual */
.digital-display,
.vm-display,
.compact-setpoint-display {
  border-color: #171313 !important;
  background: linear-gradient(180deg,#171313,#0f0d0d) !important;
  box-shadow: inset 0 0 24px rgba(255,255,255,.018), 0 8px 20px rgba(18,15,15,.08) !important;
}
.display-label { color: #f3f4f6 !important; }
.vm-value,
.digital-display .vm-value { color: var(--green-display, #35ff76) !important; }
.sp-value,
.compact-setpoint-display strong { color: var(--red-display, #ff4038) !important; }

/* Contador tipo 7 */
.counter-inline-meta,
.counter-output-item,
.counter-totalizers .program-mini-display,
.counter-totalizer-card {
  border: 1px solid var(--dh-border) !important;
  border-radius: 11px !important;
  background: var(--dh-surface-soft) !important;
  box-shadow: none !important;
}
.counter-inline-meta-label,
.counter-output-item span,
.counter-totalizers .program-mini-display span,
.counter-totalizer-card span { color: var(--dh-muted) !important; }
.counter-inline-meta-value,
.counter-totalizers .program-mini-display strong,
.counter-totalizer-card strong { color: var(--dh-text) !important; }
.counter-output-item strong { color: var(--dh-red) !important; }
.counter-reset-button,
.settings-reset-counter-all,
[data-action="reset-counter"],
[data-action="reset-count"],
[data-action="reset-total"] { border-radius: 10px !important; color:#fff !important; background: var(--dh-red) !important; border-color: var(--dh-red) !important; }

/* =========================================================
   MODALES / CONFIGURACIÓN DE INSTRUMENTO
========================================================= */
dialog::backdrop { background: rgba(12,17,23,.52) !important; backdrop-filter: blur(5px); }
.instrument-settings-content,
.setpoint-dialog-content,
.history-graph-content,
.history-scale-content {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-lg) !important;
}
.settings-heading { border-color: var(--dh-border) !important; }
.settings-eyebrow { color: var(--dh-red) !important; }
.settings-tabs,
.account-tabs {
  border-color: var(--dh-border) !important;
  background: var(--dh-surface-muted) !important;
}
.settings-tab,
.account-tab { color: var(--dh-muted) !important; }
.settings-tab:hover,
.account-tab:hover { color: var(--dh-text) !important; }
.settings-tab.active,
.account-tab.active {
  color: var(--dh-red) !important;
  background: var(--dh-surface) !important;
  box-shadow: var(--dh-shadow-sm) !important;
}
.settings-tab-panel,
.settings-counter-reset-section > div:first-child { color: var(--dh-text) !important; background: var(--dh-surface-soft) !important; border-color: var(--dh-border) !important; }
.settings-tab-panel label,
.settings-tab-panel p,
.settings-tab-panel span,
.settings-counter-reset-section p { color: var(--dh-muted) !important; }

/* =========================================================
   FORMULARIOS DE LA APP
========================================================= */
.content input,
.content select,
.content textarea,
.configuration-card input,
.configuration-card select,
.parametros input,
.parametros select,
.campo input,
.campo select,
.field input,
.field select,
.field textarea,
.account-panel input,
.account-panel select {
  border-color: var(--dh-border-strong) !important;
  border-radius: 10px !important;
  color: var(--dh-text) !important;
  background: var(--dh-surface-soft) !important;
  box-shadow: none !important;
  outline: none !important;
}
.content input:focus,
.content select:focus,
.content textarea:focus,
.configuration-card input:focus,
.configuration-card select:focus,
.campo input:focus,
.campo select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.account-panel input:focus,
.account-panel select:focus {
  border-color: var(--dh-red) !important;
  box-shadow: 0 0 0 3px rgba(243,79,87,.10) !important;
}
label { color: var(--dh-text-2); }

/* =========================================================
   HISTORIAL
========================================================= */
.datalogger-panel { overflow: hidden; border-radius: var(--dh-radius-lg) !important; }
.datalogger-toolbar { border-color: var(--dh-border) !important; background: var(--dh-surface-soft) !important; }
.history-toolbar-title strong { color: var(--dh-text) !important; }
.history-toolbar-title span { color: var(--dh-muted) !important; }
.datalogger-table { background: var(--dh-surface) !important; }
.datalogger-table th {
  color: var(--dh-muted) !important;
  background: var(--dh-surface-soft) !important;
  border-color: var(--dh-border) !important;
  font-size: .69rem !important;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.datalogger-table td { color: var(--dh-text-2) !important; border-color: var(--dh-border) !important; }
.datalogger-table tbody tr:hover { background: var(--dh-surface-soft) !important; }
.datalogger-table code { color: var(--dh-muted) !important; background: var(--dh-surface-muted) !important; }
.history-filter-field select,
.history-filter-field input { background: var(--dh-surface) !important; }
.file-graph-button,
.history-icon-button { color: var(--dh-text-2) !important; background: var(--dh-surface) !important; border-color: var(--dh-border) !important; }
.file-graph-button:hover,
.history-icon-button:hover { color: var(--dh-red) !important; border-color: var(--dh-red-border) !important; background: var(--dh-red-soft) !important; }
.history-sync-progress-bar,
.history-download-progress-bar { background: var(--dh-red) !important; }

/* =========================================================
   MI CUENTA
========================================================= */
.account-content { color: var(--dh-text) !important; }
.account-panel { border-radius: var(--dh-radius-lg) !important; }
.account-panel-header { border-color: var(--dh-border) !important; }
.account-panel-icon {
  color: var(--dh-red) !important;
  background: var(--dh-red-soft) !important;
}
.account-panel h2 { color: var(--dh-text) !important; }
.account-panel p,
.account-form label,
.notification-setting-help { color: var(--dh-muted) !important; }
.notification-preference-card,
.notification-setting-blocked { border-color: var(--dh-border) !important; background: var(--dh-surface-soft) !important; }
.notification-switch-track { background: #bfc8d2 !important; }
.notification-switch input:checked + .notification-switch-track { background: var(--dh-red) !important; }
.danger-panel { border-color: #f0b9be !important; background: #fff7f8 !important; }
.danger-icon { color: var(--dh-danger) !important; background: #ffe5e7 !important; }

/* =========================================================
   PROGRAMAS
========================================================= */
.program-editor-card { border-radius: var(--dh-radius-lg) !important; }
.program-editor-card h2 { color: var(--dh-text) !important; }
.program-editor-card p,
.stage-count-field span,
.program-decimals-info { color: var(--dh-muted) !important; }
.program-editor-chart-wrap { border-color: var(--dh-border) !important; background: var(--dh-surface) !important; }
.program-message { border-color: var(--dh-border) !important; color: var(--dh-muted) !important; background: var(--dh-surface-soft) !important; }
.program-message.success { color: #14714d !important; border-color: #b9ead5 !important; background: #eefbf5 !important; }
.program-message.error { color: var(--dh-danger) !important; border-color: #f4c2c6 !important; background: #fff3f4 !important; }
.program-message.loading { color: var(--dh-text-2) !important; border-color: var(--dh-border) !important; background: var(--dh-surface-soft) !important; }

/* =========================================================
   BLUETOOTH / ALTA DE EQUIPO
========================================================= */
.page { color: var(--dh-text) !important; }
.back-link { color: var(--dh-red) !important; }
.heading h1,
.step-heading h2,
.progress-panel h2 { color: var(--dh-text) !important; }
.heading > p:last-child,
.step-heading p,
.step-help,
.progress-panel p { color: var(--dh-muted) !important; }
.stepper-item { color: var(--dh-muted) !important; }
.stepper-item span { border-color: var(--dh-border-strong) !important; background: var(--dh-bg) !important; }
.stepper-item.active,
.stepper-item.done { color: var(--dh-red) !important; }
.stepper-item.active span { color:#fff !important; border-color:var(--dh-red) !important; background:var(--dh-red) !important; box-shadow:0 0 0 5px rgba(243,79,87,.10) !important; }
.stepper-item.done span { color:var(--dh-red) !important; border-color:var(--dh-red-border) !important; background:var(--dh-red-soft) !important; }
.stepper-line { background: var(--dh-border) !important; }
.stepper-line.done { background: var(--dh-red) !important; }
.connection-strip { border-color: var(--dh-border) !important; background: var(--dh-surface-soft) !important; }
.connection-status.connected { color: var(--dh-success) !important; background: var(--dh-success-soft) !important; }
.connection-status.disconnected { color: var(--dh-danger) !important; background: #fff0f1 !important; }
.progress-track { background: var(--dh-border) !important; }
.progress-bar { background: var(--dh-red) !important; }
.spinner { border-color: var(--dh-border) !important; border-top-color: var(--dh-red) !important; }
#countdown { color: var(--dh-red) !important; }
.review-card { border-color: var(--dh-border) !important; }
.review-card > div { border-color: var(--dh-border) !important; }
.review-card span { color: var(--dh-muted) !important; }
.step-help { background: var(--dh-surface-soft) !important; }

/* =========================================================
   PARÁMETROS
========================================================= */
.card {
  border-radius: var(--dh-radius-lg) !important;
  background: var(--dh-surface) !important;
}
.card-header { border-color: var(--dh-border) !important; }
.card-header h2,
.card h2,
.card h3 { color: var(--dh-text) !important; }
.card-header p,
.card p { color: var(--dh-muted) !important; }
.parameter-grid { gap: 14px !important; }
.field label { color: var(--dh-text-2) !important; }
.resultado-operacion { border-color: var(--dh-border) !important; background: var(--dh-surface-soft) !important; }
.resultado-valor { color: var(--dh-red) !important; }

/* =========================================================
   NOTIFICACIONES
========================================================= */
.contenedor { color: var(--dh-text) !important; }
.encabezado h1 { color: var(--dh-text) !important; }
.encabezado p { color: var(--dh-muted) !important; }
.encabezado-acciones { display:flex; align-items:center; gap:10px; }
.tarjeta { border-radius: var(--dh-radius-lg) !important; }
.tarjeta h2 { color: var(--dh-text) !important; }
.campo label { color: var(--dh-text-2) !important; }
.tabla-contenedor { border-color: var(--dh-border) !important; background: var(--dh-surface) !important; }
.notificaciones-tabla { background: var(--dh-surface) !important; }
.notificaciones-tabla th { color: var(--dh-muted) !important; background: var(--dh-surface-soft) !important; border-color: var(--dh-border) !important; }
.notificaciones-tabla td { color: var(--dh-text-2) !important; border-color: var(--dh-border) !important; }
.notificaciones-tabla tbody tr:hover { background: var(--dh-surface-soft) !important; }

/* =========================================================
   NAVEGACIÓN MÓVIL
========================================================= */
.mobile-bottom-nav {
  display: none;
  border-top: 1px solid var(--dh-border) !important;
  background: color-mix(in srgb, var(--dh-surface) 96%, transparent) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgba(20,30,44,.045) !important;
}
.mobile-bottom-nav a { color: var(--dh-muted) !important; }
.mobile-bottom-nav a.active { color: var(--dh-red) !important; }
.mobile-add-instrument { color:#fff !important; background:var(--dh-red) !important; box-shadow:0 10px 24px rgba(243,79,87,.28) !important; }

/* =========================================================
   MODO OSCURO: REGLAS EXPLÍCITAS
========================================================= */
html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] .app-layout,
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .account-page,
html[data-theme="dark"] .access-help-page { background: var(--dh-bg) !important; color: var(--dh-text) !important; }

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .sidebar { background: var(--dh-bg-2) !important; border-color: var(--dh-border) !important; }

html[data-theme="dark"] .login-card,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .access-help-card,
html[data-theme="dark"] .instrument-selector-card,
html[data-theme="dark"] .instrument-card,
html[data-theme="dark"] .channel-card,
html[data-theme="dark"] .program-panel,
html[data-theme="dark"] .power-item,
html[data-theme="dark"] .program-mini-display,
html[data-theme="dark"] .counter-totalizer-card,
html[data-theme="dark"] .instrument-settings-content,
html[data-theme="dark"] .setpoint-dialog-content,
html[data-theme="dark"] .history-graph-content,
html[data-theme="dark"] .history-scale-content,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .datalogger-panel,
html[data-theme="dark"] .program-editor-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .tarjeta,
html[data-theme="dark"] .configuration-card,
html[data-theme="dark"] .progress-panel,
html[data-theme="dark"] .pwa-install-card {
  color: var(--dh-text) !important;
  background: var(--dh-surface) !important;
  border-color: var(--dh-border) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] label { color: var(--dh-text) !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .last-seen,
html[data-theme="dark"] .instrument-id { color: var(--dh-muted) !important; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--dh-text) !important;
  background: var(--dh-surface-soft) !important;
  border-color: var(--dh-border-strong) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #778594 !important; }

html[data-theme="dark"] .datalogger-toolbar,
html[data-theme="dark"] .datalogger-table th,
html[data-theme="dark"] .connection-strip,
html[data-theme="dark"] .settings-tab-panel,
html[data-theme="dark"] .notification-preference-card,
html[data-theme="dark"] .notification-setting-blocked,
html[data-theme="dark"] .step-help,
html[data-theme="dark"] .resultado-operacion,
html[data-theme="dark"] .counter-inline-meta,
html[data-theme="dark"] .counter-output-item,
html[data-theme="dark"] .counter-totalizer-card,
html[data-theme="dark"] .counter-totalizers .program-mini-display { background: var(--dh-surface-soft) !important; border-color: var(--dh-border) !important; }

html[data-theme="dark"] .datalogger-table td,
html[data-theme="dark"] .datalogger-table th,
html[data-theme="dark"] .notificaciones-tabla td,
html[data-theme="dark"] .notificaciones-tabla th { border-color: var(--dh-border) !important; }
html[data-theme="dark"] .datalogger-table tbody tr:hover,
html[data-theme="dark"] .notificaciones-tabla tbody tr:hover { background: var(--dh-surface-soft) !important; }

html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .secondary-program-button,
html[data-theme="dark"] .boton-volver,
html[data-theme="dark"] .dashboard-back-button,
html[data-theme="dark"] .history-action-button,
html[data-theme="dark"] .app-header-icon,
html[data-theme="dark"] .boton-tema,
html[data-theme="dark"] .global-theme-toggle,
html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .show-password,
html[data-theme="dark"] .dhacel-passkey-button {
  color: var(--dh-text-2) !important;
  background: var(--dh-surface) !important;
  border-color: var(--dh-border) !important;
}

html[data-theme="dark"] .danger-panel { background: #321f23 !important; border-color: #603039 !important; }
html[data-theme="dark"] .danger-icon { color: #ff7a83 !important; background: #45252b !important; }
html[data-theme="dark"] .program-message.success { color:#7de0b2 !important; background:#183328 !important; border-color:#285844 !important; }
html[data-theme="dark"] .program-message.error { color:#ff8b92 !important; background:#372126 !important; border-color:#67323a !important; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
  .account-settings-grid { grid-template-columns: 1fr !important; }
  .contenedor { width: min(100% - 26px, 1180px) !important; }
}

@media (max-width: 700px) {
  .app-header { height: 70px !important; padding: 0 12px !important; }
  .app-header-brand strong { font-size: 1rem !important; }
  .app-header-brand small { display: none !important; }
  .app-header-icon { width: 38px !important; height: 38px !important; }
  .content { padding: 22px 14px 90px !important; }
  .reference-topbar { margin-bottom: 20px !important; }
  .reference-topbar h1 { font-size: 1.55rem !important; }

  .login-page,
  .account-page { width: min(100% - 18px, 460px) !important; padding: 10px 0 22px !important; justify-content: flex-start !important; }
  .login-card,
  .account-card { padding: 27px 22px !important; border-radius: 18px !important; }
  .dhacel-ui-wordmark { margin-bottom: 24px; }
  .global-theme-toggle { top: 12px; right: 12px; width: 40px; height: 40px; }

  .encabezado { gap: 16px !important; }
  .encabezado h1 { font-size: 1.65rem !important; }
  .encabezado-acciones { width: auto !important; }
  .boton-volver { font-size: .76rem !important; padding: 9px 11px !important; }

  .datalogger-panel,
  .program-editor-card,
  .account-panel,
  .tarjeta { border-radius: 14px !important; }
  .datalogger-toolbar { align-items: flex-start !important; }
  .datalogger-toolbar-actions { width: 100%; }
  .datalogger-toolbar-actions > * { flex: 1 1 auto; }

  .counter-totalizers { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .login-card,
  .account-card { padding: 24px 18px !important; }
  .login-header h1,
  .account-header h1 { font-size: 1.7rem !important; }
  .access-help-card { padding: 26px 18px !important; }
  .access-help-option { grid-template-columns: 38px 1fr auto !important; padding: 13px !important; }
  .access-help-icon { width: 38px !important; height: 38px !important; }

  .reference-add-button { min-height: 42px !important; padding: 0 11px !important; font-size: .76rem !important; }
  .instrument-filters { width: max-content; }
  .counter-totalizers { grid-template-columns: 1fr !important; }
  .counter-inline-meta,
  .counter-output-item { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* =========================================================
   V130 - CONTADOR TIPO 7: RESTAURAR ESTÉTICA DE REFERENCIA
   ========================================================= */

/* El tipo 7 conserva su composición original: display grande de cuenta,
   display de SP más angosto, dos totalizadores, dos resets y dos salidas. */
.counter-channel-card {
  padding: 32px 18px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #edf3f6 !important;
  box-shadow: none !important;
}

.counter-main-layout {
  display: block !important;
  width: 100% !important;
  max-width: 552px !important;
  margin: 0 auto !important;
}

.counter-display-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.counter-vm-display {
  width: 100% !important;
  max-width: 524px !important;
  min-height: 152px !important;
  padding: 18px 22px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#171313,#0f0d0d) !important;
  box-shadow: inset 0 0 24px rgba(255,255,255,.018), 0 8px 20px rgba(18,15,15,.08) !important;
}

.counter-sp-display {
  width: 80% !important;
  max-width: 420px !important;
  min-height: 155px !important;
  padding: 18px 22px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#171313,#0f0d0d) !important;
  box-shadow: inset 0 0 24px rgba(255,255,255,.018), 0 8px 20px rgba(18,15,15,.08) !important;
}

.counter-vm-display > span,
.counter-sp-display > span {
  margin: 0 0 10px !important;
  color: #f6eaea !important;
  font-size: .70rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.counter-vm-display .counter-six-digit-value {
  color: #27ff73 !important;
  font-size: clamp(4rem, 8vw, 5.25rem) !important;
  font-weight: 650 !important;
  line-height: .95 !important;
  text-shadow: 0 0 5px rgba(39,255,115,.85), 0 0 18px rgba(39,255,115,.45) !important;
}

.counter-sp-display .counter-six-digit-value {
  color: #ff3f38 !important;
  font-size: clamp(3.2rem, 6vw, 4rem) !important;
  font-weight: 650 !important;
  line-height: .98 !important;
  text-shadow: 0 0 5px rgba(255,63,56,.9), 0 0 18px rgba(255,63,56,.48) !important;
}

.counter-sp-display.editable-setpoint-display::after {
  margin-top: 12px !important;
  color: #bdaaaa !important;
  font-size: .56rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.counter-side-panel {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 32px !important;
}

.counter-totalizer-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}

.counter-totalizer-item {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 15px 16px 13px !important;
  border: 1px solid #c9d3dd !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.counter-totalizer-item > span {
  display: block !important;
  margin-bottom: 12px !important;
  color: #5d6d82 !important;
  font-size: .67rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.counter-totalizer-item > strong {
  display: block !important;
  color: #10213a !important;
  font-size: 1.95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.counter-totalizer-item > small {
  display: block !important;
  margin-top: 9px !important;
  color: #60728a !important;
  font-size: .70rem !important;
  line-height: 1.25 !important;
}

.counter-reset-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

.counter-reset-actions .counter-reset-button {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #15857d !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
}

.counter-reset-actions .counter-reset-button:hover:not(:disabled) {
  background: #11736c !important;
}

.counter-reset-actions .counter-reset-all-button {
  background: #c52319 !important;
}

.counter-reset-actions .counter-reset-all-button:hover:not(:disabled) {
  background: #a91d15 !important;
}

.counter-output-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}

.counter-output-grid .counter-output-item {
  display: block !important;
  min-width: 0 !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 13px 15px 12px !important;
  border: 1px solid #c9d3dd !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.counter-output-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.counter-output-heading > span {
  color: #5d6d82 !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.counter-output-heading > strong {
  color: #071327 !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.counter-output-bar {
  width: 100% !important;
  height: 8px !important;
  margin-top: 11px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #dce6ed !important;
}

.counter-output-bar > i {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: #15857d !important;
  transition: width .2s ease !important;
}

/* Modo oscuro: se conserva la misma geometría y se cambia sólo superficie/texto. */
html[data-theme="dark"] .counter-channel-card {
  background: #1a2027 !important;
}
html[data-theme="dark"] .counter-totalizer-item,
html[data-theme="dark"] .counter-output-grid .counter-output-item {
  background: #222a33 !important;
  border-color: #3d4855 !important;
}
html[data-theme="dark"] .counter-totalizer-item > span,
html[data-theme="dark"] .counter-totalizer-item > small,
html[data-theme="dark"] .counter-output-heading > span {
  color: #aeb9c6 !important;
}
html[data-theme="dark"] .counter-totalizer-item > strong,
html[data-theme="dark"] .counter-output-heading > strong {
  color: #f4f7fa !important;
}
html[data-theme="dark"] .counter-output-bar {
  background: #39434e !important;
}

/* Eliminar restos de la normalización visual de V128 en el tipo 7. */
.counter-channel-card .counter-inline-meta { display: none !important; }

/* =========================================================
   V130 - CERRAR SESIÓN SIEMPRE VISIBLE
   ========================================================= */
.v130-logout-form {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.v130-logout-button {
  min-height: 40px !important;
  padding: 9px 13px !important;
  border: 1px solid var(--dh-red-border) !important;
  border-radius: 10px !important;
  color: var(--dh-red) !important;
  background: var(--dh-surface) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.v130-logout-button:hover {
  color: #fff !important;
  background: var(--dh-red) !important;
  border-color: var(--dh-red) !important;
}
.app-header-actions .v130-logout-button {
  min-height: 42px !important;
  height: 42px !important;
}
html[data-theme="dark"] .v130-logout-button {
  color: #ff767d !important;
  background: #20262e !important;
  border-color: #734148 !important;
}
html[data-theme="dark"] .v130-logout-button:hover {
  color: #fff !important;
  background: var(--dh-red) !important;
  border-color: var(--dh-red) !important;
}

@media (max-width: 700px) {
  .counter-channel-card { padding: 24px 12px 16px !important; }
  .counter-main-layout { max-width: 100% !important; }
  .counter-vm-display { min-height: 132px !important; }
  .counter-sp-display { width: 82% !important; min-height: 138px !important; }
  .counter-side-panel { margin-top: 24px !important; gap: 10px !important; }
  .counter-totalizer-grid,
  .counter-reset-actions,
  .counter-output-grid { gap: 9px !important; }
  .counter-totalizer-item { min-height: 104px !important; padding: 13px !important; }
  .counter-totalizer-item > strong { font-size: 1.65rem !important; }
  .counter-output-grid .counter-output-item { padding: 11px 12px !important; }
  .v130-logout-button { padding: 8px 10px !important; font-size: .72rem !important; }
}

@media (max-width: 430px) {
  .counter-vm-display { min-height: 118px !important; }
  .counter-sp-display { width: 86% !important; min-height: 126px !important; }
  .counter-vm-display .counter-six-digit-value { font-size: 3.65rem !important; }
  .counter-sp-display .counter-six-digit-value { font-size: 3rem !important; }
  .counter-totalizer-grid,
  .counter-reset-actions,
  .counter-output-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .counter-totalizer-item > span { font-size: .58rem !important; }
  .counter-output-heading > span { font-size: .59rem !important; }
  .counter-reset-actions .counter-reset-button { font-size: .76rem !important; padding: 9px 8px !important; }
}

.ble-header-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
@media (max-width:520px){ .ble-header-actions{align-items:flex-start;} }

/* V131: iconografía vectorial y contraste. Sin cambios de geometría ni lógica. */
.dh-ui-icon {display:inline-block;width:22px;height:22px;min-width:22px;vertical-align:middle;flex-shrink:0;pointer-events:none;}
.main-nav-icon,.notification-bell-icon,.account-settings-button > span,.header-notification-link > span,.mobile-bottom-nav a > span {display:inline-flex;align-items:center;justify-content:center;}
.mobile-bottom-nav .dh-ui-icon {width:23px;height:23px;}
.notification-center {color:var(--dh-text);background:var(--dh-surface);border-color:var(--dh-border);}
.notification-center-header,.notification-center-toolbar {border-color:var(--dh-border);}
.notification-center-toolbar,.notification-list {background:var(--dh-surface-soft);}
.notification-item,.notification-empty {background:var(--dh-surface);border-color:var(--dh-border);color:var(--dh-text-2);}
.notification-item-title,.notification-center-header h2 {color:var(--dh-text);}
.notification-item-message {color:var(--dh-text-2);}
.notification-center-toolbar span,.notification-item-footer {color:var(--dh-muted);}
.notification-center-eyebrow,.notification-item-link {color:var(--dh-red);}
.notification-item.unread {border-color:var(--dh-red-border);box-shadow:inset 3px 0 0 var(--dh-red);}
.notification-center-close,.notification-item-delete {background:var(--dh-surface-muted);color:var(--dh-text-2);border-color:var(--dh-border);}
.notification-delete-all,.notification-item-delete:hover,.notification-error {background:var(--dh-red-soft);color:var(--dh-red);border-color:var(--dh-red-border);}
.notification-badge {border-color:var(--dh-surface);}
html[data-theme="dark"] {--dh-danger:#ff8b92;}
html[data-theme="dark"] :is(.program-stage-card,.program-decimals-info,.biometric-hero,.biometric-device,.biometric-empty,.biometric-dialog-content,.history-filter-panel,.history-scale-content) {background:var(--dh-surface-soft)!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] :is(.biometric-hero-copy span,.biometric-device-copy small,.program-stage-card label span,.settings-description,.channel-label,.power-label,.display-label,.totalizer-label) {color:var(--dh-muted)!important;}
html[data-theme="dark"] :is(.biometric-hero-copy strong,.biometric-device-copy strong,.instrument-name,.selector-card-name,.channel-title,.program-save-row strong) {color:var(--dh-text)!important;}
html[data-theme="dark"] :is(.biometric-delete,.settings-cancel,.history-scale-cancel,.back-dashboard-button) {background:var(--dh-surface-muted)!important;color:var(--dh-text-2)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] :is(.account-message.success,.response-message.success) {background:#18382c!important;color:#7de0b2!important;border-color:#285844!important;}
html[data-theme="dark"] :is(.account-message.error,.response-message.error,.notification-setting-blocked) {background:var(--dh-red-soft)!important;color:#ffadb3!important;border-color:var(--dh-red-border)!important;}
html[data-theme="dark"] .stage-number {background:var(--dh-surface-muted)!important;color:var(--dh-text)!important;}
html[data-theme="dark"] .connection-status.disconnected {background:var(--dh-red-soft)!important;color:#ffadb3!important;}
html[data-theme="dark"] :is(.program-save-row,.program-stage-card,.review-card,.review-card > div) {border-color:var(--dh-border)!important;}
html[data-theme="dark"] :is(input,textarea)::placeholder {color:#a1aebd!important;opacity:1;}
html[data-theme="dark"] :is(.settings-tab,.account-tab):not(.active) {color:var(--dh-muted)!important;}
html[data-theme="dark"] :is(.notification-switch input:not(:checked) + .notification-switch-track) {background:#546171!important;}

/* V132 · Superficies internas de equipos y encabezados de gráficos. */
html[data-theme="dark"] .instrument-card .instrument-header,
html[data-theme="dark"] .instrument-card .channel-header,
html[data-theme="dark"] .instrument-card .channels-grid,
html[data-theme="dark"] .instrument-card .channel-main-layout,
html[data-theme="dark"] .instrument-selector-card .selector-reading-grid,
html[data-theme="dark"] .instrument-selector-card .selector-reading-grid .selector-reading-cell {
  background:var(--dh-surface-soft)!important;
  background-image:none!important;
  border-color:var(--dh-border)!important;
}
html[data-theme="dark"] .instrument-card .instrument-header {background:var(--dh-surface)!important;}
html[data-theme="dark"] .instrument-selector-card .selector-reading-cell strong {color:#f0f4f8!important;}
html[data-theme="dark"] .instrument-selector-card .selector-reading-cell.setpoint strong {color:#ff838b!important;}
html[data-theme="dark"] .instrument-selector-card .selector-reading-cell > span,
html[data-theme="dark"] .instrument-selector-card .selector-reading-cell small {color:#b5c2d0!important;}
html[data-theme="dark"] .instrument-selector-card .instrument-type-badge {color:#cbd7e5!important;background:#303d4b!important;}
html[data-theme="dark"] .instrument-card .channel-header strong {color:#edf2f7!important;}
html[data-theme="dark"] .instrument-card .last-seen,
html[data-theme="dark"] .instrument-card .instrument-id {color:#acbac9!important;}
html[data-theme="dark"] .instrument-card .instrument-status.disconnected {color:#c2cbd5!important;background:#303d4b!important;}
html[data-theme="dark"] .program-scale-dialog-content {background:var(--dh-surface)!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
/* Title, legend and controls each get a full row at every card width. */
.program-chart-heading {display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;}
.program-chart-heading > div:first-child {width:100%;min-width:0;}
.program-chart-heading-actions {display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;gap:12px!important;width:100%;min-width:0;}
.program-chart-heading .program-chart-legend {position:static!important;display:flex!important;flex:1 1 260px!important;min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:9px 14px!important;margin:0!important;}
.program-chart-heading .program-chart-legend > span {line-height:1.5;}
.program-chart-heading-actions > button {flex:0 0 auto;}
/* Canvas has its own light palette in the existing chart renderer. */
html[data-theme="dark"] .program-chart-wrap {background:#fff!important;}
@media(max-width:700px){
  .instrument-reference-topbar {display:none!important;}
  .content:has(.instrument-reference-topbar) {padding-top:12px!important;}
  .content:has(.instrument-reference-topbar) .instrument-grid {margin-top:0!important;}
  .program-chart-heading-actions .program-chart-legend {flex-basis:100%!important;}
}

/* V133 · Historial, navegación móvil y configuración de notificaciones. */
html[data-theme="dark"] .history-filters,
html[data-theme="dark"] .datalogger-table tbody tr,
html[data-theme="dark"] .datalogger-table tbody td,
html[data-theme="dark"] .history-filter-empty,
html[data-theme="dark"] .history-graph-heading,
html[data-theme="dark"] .history-scale-heading,
html[data-theme="dark"] .history-scale-guide,
html[data-theme="dark"] .history-scale-section {
 background:var(--dh-surface-soft)!important;background-image:none!important;color:var(--dh-text-2)!important;border-color:var(--dh-border)!important;
}
html[data-theme="dark"] .datalogger-table tbody td::before,
html[data-theme="dark"] .history-filter-field > span {color:#b9c6d5!important;}
html[data-theme="dark"] .history-graph-date {background:var(--dh-success-soft)!important;color:#7de0b2!important;border-color:#285844!important;}
/* SVG masks follow the current theme, without replacing theme event handlers. */
#themeToggle > span {display:none!important;}
#themeToggle::before {content:"";display:block;width:22px;height:22px;background:currentColor;mask:var(--dh-theme-icon) center/contain no-repeat;-webkit-mask:var(--dh-theme-icon) center/contain no-repeat;}
:root {--dh-theme-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z'/%3E%3C/svg%3E");}
html[data-theme="dark"] {--dh-theme-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/svg%3E");}
.dh-mobile-header {display:none;}
.notifications-page .contenedor {max-width:1320px;padding-top:28px;}
.notifications-page .encabezado h1 {font-size:clamp(1.6rem,3vw,2.1rem)!important;line-height:1.2;}
.notifications-page .tarjeta {padding:24px;margin-bottom:24px;}
.notifications-page .tarjeta h2 {font-size:1.1rem;margin-bottom:20px;}
.notifications-page .formulario {max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:end;}
.notifications-page .campo {margin:0;min-width:0;}
.notifications-page .umbrales,.notifications-page #mensaje {grid-column:1/-1;}
.notifications-page .umbrales:empty,.notifications-page #mensaje:empty {display:none;}
.notifications-page #btnAgregar {grid-column:1/-1;justify-self:end;width:auto;min-height:44px;margin:0;}
.notifications-page .notificaciones-tabla td {line-height:1.45;overflow-wrap:anywhere;}
.notifications-page .notificaciones-tabla .cell-disparo {white-space:normal;}
html[data-theme="dark"] .notifications-page {--success:#7de0b2;--success-bg:#18382c;--danger:#ffadb3;--danger-dark:#ffadb3;--danger-bg:#3b2429;--disabled-bg:#303d4b;--disabled-text:#cbd7e5;}
html[data-theme="dark"] .notifications-page .contenedor,
html[data-theme="dark"] .notifications-page .encabezado {background:var(--dh-bg)!important;}
@media(max-width:700px){
 .dh-mobile-navigation {padding-top:calc(64px + env(safe-area-inset-top))!important;padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;}
 .dh-mobile-navigation .app-header,.dh-mobile-header {position:fixed!important;display:flex!important;top:0;left:0;right:0;width:100%;height:calc(64px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 12px 0!important;align-items:center;justify-content:space-between;gap:8px;background:var(--dh-bg-2)!important;color:var(--dh-text);border-bottom:1px solid var(--dh-border);z-index:1200;}
 .dh-mobile-brand {font-size:16px;font-weight:850;color:var(--dh-text);text-decoration:none;white-space:nowrap;}
 .dh-mobile-brand span {color:var(--dh-red);}
 .dh-mobile-navigation .app-header-actions {display:flex;align-items:center;gap:6px;}
 .dh-mobile-navigation .app-header-icon,.dh-mobile-header #themeToggle {position:relative!important;inset:auto!important;display:inline-grid!important;place-items:center;width:40px!important;height:40px!important;min-width:40px;padding:0!important;border-radius:10px!important;border:1px solid var(--dh-border)!important;background:var(--dh-surface)!important;color:var(--dh-text)!important;box-shadow:none!important;}
 .dh-mobile-navigation .v130-logout-form,.dh-mobile-navigation .v130-logout-button,.dh-mobile-navigation .logout {display:none!important;}
 .dh-mobile-navigation .mobile-bottom-nav {position:fixed!important;bottom:0!important;left:0;right:0;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%;height:auto!important;min-height:66px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;z-index:1200;background:var(--dh-surface)!important;border-top:1px solid var(--dh-border);}
 .dh-mobile-navigation .mobile-bottom-nav a {display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:3px!important;min-width:0;color:var(--dh-muted);text-decoration:none;}
 .dh-mobile-navigation .mobile-bottom-nav small {font-size:11px!important;line-height:1.3;}
 .dh-mobile-navigation .mobile-bottom-nav a.active,.dh-mobile-navigation .mobile-bottom-nav a.active small {color:var(--dh-red)!important;}
 .notifications-page .contenedor {width:100%!important;padding:20px 12px!important;}
 .notifications-page .encabezado {margin-bottom:20px;}
 .notifications-page .encabezado-acciones {display:none;}
 .notifications-page .tarjeta {padding:18px 14px;margin-bottom:18px;}
 .notifications-page .formulario {grid-template-columns:1fr;gap:16px;}
 .notifications-page #btnAgregar {width:100%;}
 .notifications-page .notificaciones-tabla tbody td {grid-template-columns:minmax(95px,38%) minmax(0,1fr);padding:11px 12px;}
 .notifications-page .notificaciones-tabla td[colspan] {display:block;text-align:center;}
 .notifications-page .notificaciones-tabla td[colspan]::before {content:none;}
}

/* V134 · Shared desktop header, settings surfaces, delete tab. */
.dh-shared-header #themeToggle {position:relative!important;inset:auto!important;flex:0 0 44px;}
.dh-shared-header .app-header-actions {margin-left:auto;}
html[data-theme="dark"] #instrumentSettingsDialog .settings-parameters-section,
html[data-theme="dark"] #instrumentSettingsDialog .settings-datalogger-section,
html[data-theme="dark"] #instrumentSettingsDialog .settings-alarm-section,
html[data-theme="dark"] #instrumentSettingsDialog .settings-counter-reset-section,
html[data-theme="dark"] #instrumentSettingsDialog .settings-actions,
html[data-theme="dark"] #instrumentSettingsDialog .settings-heading {
 background:var(--dh-surface-soft)!important;background-image:none!important;border-color:var(--dh-border)!important;color:var(--dh-text)!important;
}
html[data-theme="dark"] #instrumentSettingsDialog .settings-tab-panel strong,
html[data-theme="dark"] #instrumentSettingsDialog .settings-tab-panel label {color:var(--dh-text)!important;}
html[data-theme="dark"] #instrumentSettingsDialog .settings-tab-panel p {color:#b7c4d3!important;}
html[data-theme="dark"] #instrumentSettingsDialog .settings-parameters-link {color:#ff9299!important;background:var(--dh-red-soft)!important;border-color:var(--dh-red-border)!important;}
#instrumentsContainer .instrument-header .instrument-delete-button {display:none!important;}
.settings-delete-panel > strong {display:block;color:var(--dh-text);font-size:1rem;}
.settings-delete-panel > p {margin:10px 0 20px;color:var(--dh-muted);line-height:1.6;}
.settings-delete-slot .instrument-delete-button {display:inline-flex!important;min-height:44px;padding:10px 16px;align-items:center;justify-content:center;}
.settings-tab[data-settings-tab="eliminar"] {white-space:nowrap;}
.settings-tabs {flex-wrap:wrap;}

/* V135: shared header foundations, desktop navigation and viewport height. */
.app-header {box-sizing:border-box;position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0;}
.app-header-brand {display:flex;align-items:baseline;gap:9px;text-decoration:none;}
.app-header-brand strong {letter-spacing:.055em;}
.app-header-brand small {font-size:.73rem;font-weight:760;letter-spacing:.14em;}
.app-header-actions {display:flex;align-items:center;flex-wrap:nowrap;}
.app-header-icon {box-sizing:border-box;position:relative;display:inline-grid;place-items:center;flex-shrink:0;padding:0;text-decoration:none;line-height:1;cursor:pointer;}
.app-header-actions form {margin:0;}
@media (min-width:701px) {
 .dh-mobile-navigation .app-layout {min-height:calc(100vh - 78px)!important;min-height:calc(100dvh - 78px)!important;}
 .dh-mobile-navigation .sidebar {top:78px;height:calc(100vh - 78px);height:calc(100dvh - 78px);overflow-y:auto;box-sizing:border-box;}
}

/* V136: desktop shell shared by all signed-in pages. */
.dh-update-version {color:var(--dh-muted);font:600 11px/1.3 system-ui,sans-serif;}
@media (min-width:701px) {
 .dh-shell-layout {display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;align-items:start;}
 .dh-shell-layout > .sidebar {position:sticky;display:flex!important;flex-direction:column;width:180px!important;min-width:180px!important;padding:24px 14px 28px!important;border-right:1px solid var(--dh-border);background:var(--dh-bg-2);color:var(--dh-text);}
 .dh-shell-layout > .sidebar > .brand {display:none!important;}
 .dh-shell-layout .main-nav {display:grid;gap:7px;margin-top:0;}
 .dh-shell-layout .main-nav-link {display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:46px;text-decoration:none;font-size:.84rem;line-height:1.3;}
 .dh-shell-layout .main-nav-icon {display:inline-flex;align-items:center;justify-content:center;width:20px;flex:0 0 20px;}
 .dh-shell-layout > :not(.sidebar) {min-width:0;}
}
@media (max-width:700px) {
 .dh-shell-layout > .sidebar {display:none!important;}
}

/* V137: shared navigation, in-flow release footer, account feedback and prompt. */
.header-notification-count {position:absolute!important;top:3px!important;right:3px!important;min-width:16px!important;height:16px!important;padding:0 3px!important;display:grid!important;place-items:center;border:0!important;border-radius:999px;font-size:10px!important;line-height:1!important;}
.header-notification-count[hidden] {display:none!important;}
.notification-center,.notification-center * {box-sizing:border-box;}
.notification-center-header h2,.notification-center-eyebrow {margin:0;}
.dh-version-footer {height:32px;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;background:var(--dh-bg);color:var(--dh-muted);}
.dh-version-footer .dh-update-version {position:static;padding:0;border:0;background:transparent;color:var(--dh-muted);font-size:11px;}
body > .login-page,body > .account-page {min-height:calc(100vh - 32px)!important;min-height:calc(100dvh - 32px)!important;}
.dh-account-session {display:none;}
.dh-signout-button {min-height:44px;padding:10px 18px;border:1px solid var(--dh-red-border);border-radius:10px;background:var(--dh-red-soft);color:var(--dh-red);font:inherit;font-weight:700;cursor:pointer;}
.dh-eye-slash {display:none;}
.password-toggle.active .dh-eye-slash {display:block;}
.settings-tab[hidden] {display:none!important;}
#dhacelPushPrompt {background:var(--dh-surface)!important;color:var(--dh-text)!important;border:1px solid var(--dh-border);bottom:20px!important;max-height:calc(100dvh - 110px);overflow:auto;}
#dhacelPushPrompt button {min-height:44px;font:inherit;}
#dhacelPushPrompt [data-enable] {background:var(--dh-red)!important;color:#fff!important;}
#dhacelPushPrompt [data-cancel] {background:var(--dh-surface-muted)!important;color:var(--dh-text)!important;border:1px solid var(--dh-border)!important;}
html[data-theme="dark"] .biometric-dialog input {background:var(--dh-surface)!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
@media(min-width:701px) {
 .dh-mobile-navigation .app-layout {min-height:calc(100vh - 110px)!important;min-height:calc(100dvh - 110px)!important;}
 .dh-mobile-navigation .sidebar {height:calc(100vh - 110px);height:calc(100dvh - 110px);}
 .dh-mobile-navigation .mobile-bottom-nav {display:none!important;}
}
@media(max-width:700px) {
 .dh-mobile-navigation .app-layout {min-height:calc(100vh - 172px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:calc(100dvh - 172px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;}
 .dh-account-session {display:block;margin-top:24px;padding:18px 0;border-top:1px solid var(--dh-border);}
 .dh-account-signout {margin:0;}
 .dh-signout-button {width:100%;}
 #dhacelPushPrompt {bottom:calc(84px + env(safe-area-inset-bottom))!important;max-height:calc(100dvh - 164px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
 .notification-center-header {padding-top:calc(20px + env(safe-area-inset-top));}
 .notification-list {padding-bottom:calc(18px + env(safe-area-inset-bottom));}
}

body.notification-center-open {overflow:hidden;}

.app-header-actions > :is(.app-header-icon,#themeToggle) {display:inline-grid!important;place-items:center;flex:0 0 42px!important;width:42px!important;height:42px!important;}
@media(max-width:700px) {
 .app-header-actions > :is(.app-header-icon,#themeToggle) {flex-basis:40px!important;width:40px!important;height:40px!important;}
}

/* V138: chart export actions. */
.history-graph-actions {flex-wrap:wrap;gap:10px;}
.history-export-help,.history-export-status {margin:8px 24px 14px;color:var(--dh-muted);font-size:.8rem;line-height:1.5;}
.history-export-status:empty {display:none;}
@media(max-width:700px){.history-graph-actions > button {flex:1 1 150px;}.history-export-help,.history-export-status{margin-left:14px;margin-right:14px;}}

.history-graph-content {overflow-y:auto!important;overflow-x:hidden!important;max-height:calc(100dvh - 32px)!important;}
@media(max-width:760px){.history-graph-content{max-height:calc(100dvh - 16px)!important;}}

/* V139: remove session caption and decorative signal glyph. */
.sidebar > .clean-session {display:none!important;}
.selector-card-footer .selector-signal {display:none!important;}

/* V140: spacious HTML legend, exclusive local palette and graph wordmark. */
.dh-graph-brand {display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0 0 14px;}
.dh-graph-brand > span {font:900 clamp(28px,4vw,42px)/1.1 system-ui,sans-serif;letter-spacing:.015em;color:#111;}
html[data-theme="dark"] .dh-graph-brand > span {color:var(--dh-text);}
.dh-graph-brand .dh-graph-app {color:#d22f40;}
.dh-graph-brand > small {font:700 13px/1.3 system-ui,sans-serif;letter-spacing:.14em;color:var(--dh-muted);}
.dh-curve-legend {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:22px;row-gap:10px;padding:16px 20px 12px;}
.dh-curve-legend[hidden] {display:none!important;}
.dh-curve-item {display:inline-flex;align-items:center;gap:7px;min-width:0;}
.dh-curve-color,.dh-curve-name {display:inline-flex!important;align-items:center;justify-content:center;border:0!important;background:transparent!important;color:var(--dh-text)!important;box-shadow:none!important;cursor:pointer;font:inherit;}
.dh-curve-color {width:36px!important;min-width:36px!important;height:36px!important;padding:6px!important;border-radius:8px;}
.dh-curve-color > span {display:block;width:20px;height:20px;border-radius:50%;background:var(--curve-color);border:2px solid color-mix(in srgb,var(--curve-color) 75%,var(--dh-text));}
.dh-curve-name {min-height:36px!important;padding:0!important;line-height:1.3;white-space:nowrap;font-size:13px;}
.dh-curve-name[aria-pressed="false"] {text-decoration:line-through;opacity:.55;}
.dh-color-picker {width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px;border:1px solid var(--dh-border);border-radius:16px;background:var(--dh-surface);color:var(--dh-text);box-shadow:0 18px 60px #0004;}
.dh-color-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.dh-color-close {width:34px;min-height:34px;border:1px solid var(--dh-border);border-radius:8px;background:var(--dh-surface-muted);color:var(--dh-text);font-size:22px;cursor:pointer;}
.dh-color-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.dh-color-choice {position:relative;display:grid;place-items:center;min-width:0;width:100%;aspect-ratio:1;padding:4px;border:2px solid transparent;border-radius:9px;background:var(--dh-surface-muted);cursor:pointer;}
.dh-color-dot {display:block;width:27px;height:27px;max-width:100%;border-radius:50%;background:var(--curve-color);}
.dh-color-choice[aria-pressed="true"] {border-color:var(--dh-text);}
.dh-color-choice:disabled {opacity:.22;cursor:not-allowed;}
.dh-color-check {position:absolute;right:0;bottom:-2px;background:var(--dh-surface);color:var(--dh-text);border-radius:50%;font-size:14px;font-weight:900;}
.dh-color-picker p {margin:14px 0 0;color:var(--dh-muted);font-size:12px;line-height:1.5;}
@media(max-width:700px){.dh-curve-legend{column-gap:14px;row-gap:10px;padding:12px 10px;}.dh-curve-color{width:40px!important;min-width:40px!important;height:44px!important;}.dh-curve-name{min-height:44px!important;}}

.dh-graph-brand > span {background:#fff;padding:6px 10px;border-radius:6px;}
html[data-theme="dark"] .dh-graph-brand > span {color:#111;}

/* V141: optional compact instrument view. Existing channel-card styling is untouched. */
#instrumentsContainer .dh-channel-view-controls {display:inline-flex;align-items:center;gap:5px;}
#instrumentsContainer .dh-channel-view-button {display:inline-grid;place-items:center;flex:0 0 36px;width:36px!important;min-width:36px;min-height:36px!important;height:36px;padding:0!important;border:1px solid var(--dh-border)!important;border-radius:9px;background:var(--dh-surface)!important;color:var(--dh-muted)!important;box-shadow:none!important;cursor:pointer;}
#instrumentsContainer .dh-channel-view-button[aria-pressed="true"] {background:var(--dh-red-soft)!important;border-color:var(--dh-red-border)!important;color:var(--dh-red)!important;}
#instrumentsContainer .dh-channel-view-button .dh-ui-icon {width:19px;height:19px;min-width:19px;}
#instrumentsContainer .instrument-card.dh-use-compact > .channels-grid {display:none!important;}
#instrumentsContainer .dh-compact-channels {--dh-compact-vm-color:#187347;margin:20px;border:1px solid var(--dh-border);border-radius:12px;background:var(--dh-surface);overflow:hidden;}
#instrumentsContainer .dh-compact-channels[hidden] {display:none!important;}
#instrumentsContainer .dh-compact-table {width:100%;table-layout:fixed;border-collapse:collapse;background:transparent;}
#instrumentsContainer .dh-compact-table th,#instrumentsContainer .dh-compact-table td {padding:16px 20px;vertical-align:middle;background:transparent;border:0;}
#instrumentsContainer .dh-compact-table thead {background:var(--dh-surface-muted);}
#instrumentsContainer .dh-compact-table thead th {color:var(--dh-muted);font-size:12px;font-weight:600;}
#instrumentsContainer .dh-compact-table th:first-child {text-align:left;}
#instrumentsContainer .dh-compact-table th:not(:first-child),#instrumentsContainer .dh-compact-table td {text-align:right;}
#instrumentsContainer .dh-compact-table tbody th {font-size:14px;font-weight:600;color:var(--dh-text);}
#instrumentsContainer .dh-compact-table tbody tr + tr {border-top:1px solid var(--dh-border);}
#instrumentsContainer .dh-compact-reading {display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;}
#instrumentsContainer .dh-compact-vm {font-size:30px;font-weight:700;line-height:1.2;color:var(--dh-compact-vm-color);}
#instrumentsContainer button.dh-compact-sp {min-height:40px!important;padding:0!important;border:0!important;border-radius:6px;background:transparent!important;color:var(--dh-red)!important;box-shadow:none!important;font-size:24px;font-weight:700;line-height:1.2;cursor:pointer;}
#instrumentsContainer button.dh-compact-sp:hover:not(:disabled) {background:var(--dh-red-soft)!important;color:var(--dh-red)!important;}
#instrumentsContainer .dh-compact-reading small {font:400 12px/1.2 system-ui,sans-serif;color:var(--dh-muted);}
#instrumentsContainer .instrument-offline .dh-compact-reading {color:var(--dh-muted)!important;}
#instrumentsContainer .telemetry-chart-panel-multi .program-chart-legend.dh-ordered-legend {display:grid!important;grid-template-columns:repeat(var(--dh-channel-count),minmax(0,1fr));flex:1 1 260px!important;gap:9px 20px!important;align-items:center;}
#instrumentsContainer .dh-ordered-legend > span {display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;margin:0;min-height:28px;}
.mobile-add-instrument {display:none!important;}
@media(max-width:700px){
 body.dh-dashboard-page .mobile-add-instrument {position:fixed;display:grid!important;place-items:center;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;text-decoration:none;line-height:1;font-size:32px;z-index:1250;}
 #instrumentsContainer .dh-compact-channels {margin:14px 10px;}
 #instrumentsContainer .dh-compact-table th,#instrumentsContainer .dh-compact-table td {padding:15px 10px;}
 #instrumentsContainer .dh-compact-vm {font-size:26px;}
 #instrumentsContainer button.dh-compact-sp {font-size:22px;min-height:44px!important;}
 #instrumentsContainer .dh-compact-reading {gap:4px;}
 #instrumentsContainer .dh-compact-reading small {font-size:11px;}
 #instrumentsContainer .telemetry-chart-panel-multi .program-chart-legend.dh-ordered-legend {flex-basis:100%!important;gap:7px 8px!important;}
 #instrumentsContainer .dh-ordered-legend > span {font-size:12px;gap:5px;}
}
@media(max-width:360px){
 #instrumentsContainer .dh-compact-table th,#instrumentsContainer .dh-compact-table td {padding:14px 7px;}
 #instrumentsContainer .dh-compact-table tbody th {font-size:12px;}
 #instrumentsContainer .dh-compact-vm {font-size:24px;}
 #instrumentsContainer button.dh-compact-sp {font-size:20px;}
 #instrumentsContainer .dh-compact-reading {flex-wrap:wrap;gap:3px;}
}

html[data-theme="dark"] #instrumentsContainer .dh-compact-channels {--dh-compact-vm-color:#6be0a3;}

/* V142: dark chart surfaces, programmer controls and contextual History block. */
html[data-theme="dark"] .instrument-card :is(.program-panel,.program-mini-grid,.program-mini-display,.program-editor,.program-chart-panel,.telemetry-chart-panel,.program-chart-heading,.display-stack) {background:var(--dh-surface-soft)!important;background-image:none!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] .instrument-card .program-editor select,
html[data-theme="dark"] .instrument-card .program-editor select:disabled {background:var(--dh-surface-muted)!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] .instrument-card .edit-programs-button {background:var(--dh-surface-muted)!important;color:var(--dh-red)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] :is(.program-chart-wrap,.telemetry-chart-wrap,.history-graph-wrap,.csv-plot) {background:#171f29!important;background-image:none!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] .program-chart-legend .legend-theoretical i {background:#a7b8cc!important;border-color:#a7b8cc!important;}
html[data-theme="dark"] .program-chart-legend .legend-sp i {background:#ff7385!important;border-color:#ff7385!important;}
html[data-theme="dark"] .program-chart-legend .legend-vm i {background:#4dd38c!important;border-color:#4dd38c!important;}
html[data-theme="dark"] .history-context-instrument {background:var(--dh-surface-soft)!important;background-image:none!important;border-color:var(--dh-border)!important;color:var(--dh-text)!important;}
html[data-theme="dark"] .history-context-instrument > span,
html[data-theme="dark"] .history-context-instrument small {color:var(--dh-muted)!important;}
html[data-theme="dark"] .history-context-instrument strong {color:var(--dh-text)!important;}
html[data-theme="dark"] .history-sync-progress {background:var(--dh-surface-soft)!important;background-image:none!important;color:var(--dh-text)!important;border-color:var(--dh-border)!important;}
html[data-theme="dark"] .history-sync-progress-track {background:var(--dh-surface-muted)!important;}
.dh-graph-brand > span {background:transparent!important;padding:0!important;border-radius:0;}
html[data-theme="dark"] .dh-graph-brand > span {color:var(--dh-text)!important;}
.dh-graph-brand .dh-graph-app {color:#d22f40!important;}

/* Fit the combined chart in the viewport; the canvas takes the remaining height. */
#historyGraphDialog .history-graph-content {display:flex;flex-direction:column;height:min(880px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)!important;overflow:hidden!important;}
#historyGraphDialog:has(#historyGraphWrap[hidden]) .history-graph-content {height:auto;}
#historyGraphDialog .history-graph-heading {flex:0 0 auto;padding:14px 20px!important;}
#historyGraphDialog .dh-graph-brand {margin-bottom:8px;}
#historyGraphDialog .dh-graph-brand > span {font-size:clamp(28px,3vw,36px);}
#historyGraphDialog .history-graph-heading h3 {font-size:clamp(16px,1.7vw,21px);margin:2px 0 4px;}
#historyGraphDialog .history-graph-heading p {font-size:12px;line-height:1.4;}
#historyGraphDialog .history-sync-progress {flex:0 0 auto;}
#historyGraphDialog .dh-curve-legend {flex:0 0 auto;padding:8px 16px;gap:4px 16px;}
#historyGraphDialog .history-graph-wrap {flex:1 1 0;height:auto!important;min-height:0!important;padding:8px 16px!important;}
#historyGraphDialog .history-graph-actions {flex:0 0 auto;gap:8px;padding:10px 16px!important;}
#historyGraphDialog .history-graph-actions > button {min-height:38px;padding:8px 12px;font-size:12px;}
#historyGraphDialog .history-export-help,#historyGraphDialog .history-export-status {flex:0 0 auto;margin:4px 16px 10px;font-size:11px;line-height:1.4;}
@media(max-width:760px){
 #historyGraphDialog .history-graph-content {height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)!important;}
 #historyGraphDialog .history-graph-heading {padding:12px 14px!important;}
 #historyGraphDialog .history-graph-actions {padding:8px 12px!important;}
 #historyGraphDialog .history-graph-actions > button {flex:1 1 130px;}
}
@media(max-height:600px){
 #historyGraphDialog .history-graph-heading {padding:8px 12px!important;}
 #historyGraphDialog .dh-graph-brand {margin-bottom:3px;gap:1px;}
 #historyGraphDialog .dh-graph-brand > span {font-size:26px;}
 #historyGraphDialog .dh-graph-brand > small {font-size:11px;}
 #historyGraphDialog #historyGraphSubtitle,#historyGraphDialog .history-export-help {display:none;}
 #historyGraphDialog .history-graph-date {padding:3px 6px;margin-top:4px;}
 #historyGraphDialog .dh-curve-legend {padding:3px 10px;gap:2px 12px;}
 #historyGraphDialog .dh-curve-color {height:30px!important;min-height:30px!important;}
 #historyGraphDialog .dh-curve-name {min-height:30px!important;font-size:12px;}
 #historyGraphDialog .history-graph-actions > button {min-height:32px;padding:6px 9px;font-size:11px;}
 #historyGraphDialog .history-export-status {margin:2px 12px 4px;}
}

@media(min-width:701px){
 #instrumentsContainer.instrument-selector-grid {display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:760px;margin-left:auto!important;margin-right:auto!important;gap:16px!important;}
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card {flex:1 1 280px;max-width:372px;min-width:0;}
}

/* V145: aligned scale fields and shared, modern scale-dialog actions. */
#programScaleDialog {width:min(540px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:20px;overflow-y:auto;}
#programScaleDialog .program-scale-dialog-content {box-sizing:border-box;padding:24px!important;background:var(--dh-surface)!important;color:var(--dh-text)!important;border:1px solid var(--dh-border)!important;border-radius:20px;}
#programScaleDialog .settings-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0;}
#programScaleDialog .settings-heading h3 {margin:4px 0 0;font-size:23px;line-height:1.25;color:var(--dh-text);}
#programScaleDialog .settings-eyebrow {margin:0;color:var(--dh-muted);font-size:11px;letter-spacing:.08em;}
#programScaleDialog .settings-close {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;border:0!important;border-radius:10px;background:var(--dh-surface-muted)!important;color:var(--dh-text-2)!important;box-shadow:none!important;font-size:24px;line-height:1;}
#programScaleDialog .program-scale-guide {display:flex;flex-direction:column;gap:6px;margin:18px 0 22px;padding:14px 16px;background:var(--dh-surface-soft);border:1px solid var(--dh-border);border-radius:12px;}
#programScaleDialog .program-scale-guide strong {font-size:14px;font-weight:600;line-height:1.5;color:var(--dh-text);}
#programScaleDialog .program-scale-guide span {font-size:13px;line-height:1.6;color:var(--dh-text-2);}
#programScaleDialog .program-scale-grid {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 16px!important;margin:0!important;}
#programScaleDialog .program-scale-grid > label {display:flex!important;flex-direction:column;align-items:stretch;gap:8px!important;grid-column:auto!important;min-width:0;margin:0;}
#programScaleDialog .program-scale-field-title {font-size:13px;line-height:1.4;font-weight:600;color:var(--dh-text)!important;}
#programScaleDialog .program-scale-grid input {box-sizing:border-box;display:block;width:100%;min-width:0;height:46px;min-height:46px;padding:11px 12px!important;border:1px solid var(--dh-border-strong)!important;border-radius:11px!important;background:var(--dh-surface-soft)!important;color:var(--dh-text)!important;font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;box-shadow:none!important;}
#programScaleDialog .program-scale-grid input:focus {outline:2px solid var(--dh-red);outline-offset:2px;}
#programScaleDialog .program-scale-field-help {display:block;min-height:36px;font-size:12px!important;font-weight:400!important;line-height:1.5;color:var(--dh-muted)!important;}
#programScaleDialog .program-scale-actions,#historyGraphScaleDialog .history-scale-actions {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch;gap:12px!important;margin-top:24px!important;padding-top:18px!important;border-top:1px solid var(--dh-border);}
#programScaleDialog .program-scale-actions > button,#historyGraphScaleDialog .history-scale-actions > button {display:flex!important;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;width:100%;min-width:0;min-height:46px;height:auto;padding:11px 14px!important;border:1px solid var(--dh-border-strong)!important;border-radius:12px!important;background:var(--dh-surface-muted)!important;color:var(--dh-text)!important;font-family:inherit;font-size:14px!important;font-weight:600!important;line-height:1.4;text-align:center;box-shadow:none!important;cursor:pointer;transition:background .15s,border-color .15s;}
#programScaleDialog #programScaleApply,#historyGraphScaleDialog #historyScaleApply {background:var(--dh-red)!important;border-color:var(--dh-red)!important;color:#fff!important;}
#programScaleDialog .program-scale-actions > button svg,#historyGraphScaleDialog .history-scale-actions > button svg {display:block;flex:0 0 19px;width:19px;height:19px;}
#programScaleDialog .program-scale-actions > button:hover,#historyGraphScaleDialog .history-scale-actions > button:hover {background:var(--dh-surface-soft)!important;border-color:var(--dh-muted)!important;}
#programScaleDialog #programScaleApply:hover,#historyGraphScaleDialog #historyScaleApply:hover {background:var(--dh-red-hover)!important;border-color:var(--dh-red-hover)!important;}
#programScaleDialog .program-scale-actions > button:focus-visible,#historyGraphScaleDialog .history-scale-actions > button:focus-visible {outline:2px solid var(--dh-red);outline-offset:3px;}
@media(max-width:380px){
 #programScaleDialog .program-scale-dialog-content {padding:18px!important;}
 #programScaleDialog .program-scale-grid {gap:18px 12px!important;}
 #programScaleDialog .program-scale-actions,#historyGraphScaleDialog .history-scale-actions {grid-template-columns:1fr!important;gap:10px!important;}
 #programScaleDialog .program-scale-field-title {min-height:36px;}
 #programScaleDialog .program-scale-field-help {min-height:54px;}
}
@media(prefers-reduced-motion:reduce){
 #programScaleDialog .program-scale-actions > button,#historyGraphScaleDialog .history-scale-actions > button {transition:none;}
}

/* V147: dark, centered readouts in the compact view of types 3 and 4. */
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-channels {container-type:inline-size;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table th:first-child {width:22%;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table th:not(:first-child),
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table td {text-align:center;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table td {padding:14px 10px;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-reading {display:flex!important;box-sizing:border-box;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:5px;min-height:64px!important;width:100%;margin:0 auto;padding:12px 8px!important;border:1px solid #272122!important;border-radius:11px!important;background:linear-gradient(180deg,#171313,#0f0d0d)!important;box-shadow:inset 0 0 18px rgba(0,0,0,.3)!important;font-size:clamp(18px,7cqi,30px)!important;line-height:1.2;text-align:center;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-reading .dh-compact-value {display:block;max-width:100%;text-align:center;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-reading small {flex:0 0 auto;color:#f3f4f6!important;text-shadow:none!important;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) button.dh-compact-sp:hover:not(:disabled) {background:linear-gradient(180deg,#211819,#171011)!important;border-color:var(--dh-red)!important;}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) button.dh-compact-sp:focus-visible {outline:2px solid var(--dh-red);outline-offset:3px;}
@media(max-width:420px){
 #instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table td {padding:12px 5px;}
 #instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-table tbody th {padding-left:9px;padding-right:5px;font-size:12px;}
 #instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) .dh-compact-reading {min-height:58px!important;padding:10px 6px!important;gap:4px;}
}

/* V148: saved dashboard order. CSS order preserves operational DOM indices. */
.dh-order-hint {max-width:760px;margin:12px auto 4px;color:var(--dh-muted);font-size:12px;line-height:1.5;text-align:center;}
.dh-order-hint[hidden] {display:none;}
.dh-order-announcement {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card {user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#instrumentsContainer.instrument-selector-grid > .dh-order-holding {cursor:grab;}
#instrumentsContainer.instrument-selector-grid > .dh-order-dragging {opacity:.32!important;outline:2px dashed var(--dh-red);outline-offset:3px;}
body.dh-order-active {cursor:grabbing;}
body.dh-order-active * {cursor:grabbing!important;}
body > .dh-order-ghost {position:fixed!important;left:0!important;top:0!important;margin:0!important;box-sizing:border-box;pointer-events:none!important;z-index:10000;opacity:.95!important;overflow:hidden;border:2px solid var(--dh-red)!important;border-radius:var(--dh-radius-lg);background:var(--dh-surface)!important;color:var(--dh-text)!important;box-shadow:var(--dh-shadow-lg)!important;will-change:transform;}
body > .dh-order-ghost .instrument-selector-menu-button {display:none;}

/* V149: wider desktop dashboard, with as many columns as fit comfortably. */
@media(min-width:701px){
 #instrumentsContainer.instrument-selector-grid {max-width:1440px!important;gap:20px!important;}
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card {flex:1 1 260px!important;max-width:340px!important;min-width:0;}
 .dh-order-hint {max-width:1440px;}
}
.dh-order-sync {display:block;margin-top:4px;color:var(--dh-muted);font-size:12px;line-height:1.5;}

/* V150: readable desktop cards; avoid narrow columns and duplicated inner padding. */
@media(min-width:701px){
 #instrumentsContainer.instrument-selector-grid {max-width:1600px!important;gap:22px!important;}
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card {display:block!important;box-sizing:border-box;flex:1 1 340px!important;min-width:min(100%,340px)!important;max-width:420px!important;padding:0!important;}
 #instrumentsContainer.instrument-selector-grid .instrument-selector-link {display:flex!important;flex-direction:column;box-sizing:border-box;width:100%;height:100%;min-height:310px;padding:22px!important;}
 #instrumentsContainer.instrument-selector-grid .selector-card-header {box-sizing:border-box;align-items:flex-start;min-height:88px;padding:0 32px 0 0!important;gap:14px;}
 #instrumentsContainer.instrument-selector-grid .instrument-selector-content {flex:1;min-width:0;gap:10px;}
 #instrumentsContainer.instrument-selector-grid .instrument-selector-name {max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4;}
 #instrumentsContainer.instrument-selector-grid .instrument-selector-meta {display:flex;flex-wrap:wrap;gap:7px;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-grid {flex:0 0 auto;margin-top:18px;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-cell {padding:13px 14px!important;min-width:0;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-cell > span {white-space:normal;line-height:1.4;letter-spacing:.04em!important;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-cell > div {flex-wrap:wrap;align-items:baseline;gap:4px;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-cell strong {font-size:1.9rem!important;white-space:nowrap;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-grid-4 .selector-reading-cell:nth-child(3) {border-left:0!important;}
 #instrumentsContainer.instrument-selector-grid .selector-reading-grid-4 .selector-reading-cell:nth-child(n+3) {border-top:1px solid var(--dh-border)!important;}
 #instrumentsContainer.instrument-selector-grid .selector-card-footer {margin-top:auto;padding:20px 0 0!important;}
 #instrumentsContainer.instrument-selector-grid .selector-last-seen {line-height:1.6;overflow-wrap:anywhere;}
 .dh-order-hint {max-width:1600px;margin-bottom:14px;}
}

/* V151: a stale remembered state is being checked, not reported as connected. */
#instrumentsContainer .instrument-status.checking {background:var(--dh-surface-muted)!important;color:var(--dh-text-2)!important;border-color:var(--dh-border)!important;}
#instrumentsContainer .instrument-status.checking::before {background:var(--dh-warning)!important;box-shadow:none!important;}

/* V152: restore the original program readouts in light mode (types 2/6 only). */
html:not([data-theme="dark"]) #instrumentsContainer > .instrument-card:is([data-instrument-type="2"],[data-instrument-type="6"]) .program-panel .program-mini-grid > .program-mini-display {
 background:linear-gradient(145deg,#211818,#0d0b0b)!important;
 border-color:#272020!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 14px rgba(0,0,0,.88)!important;
 text-align:center;
}
html:not([data-theme="dark"]) #instrumentsContainer > .instrument-card:is([data-instrument-type="2"],[data-instrument-type="6"]) .program-panel .program-mini-display > span {
 color:#f3f4f6!important;
}
html:not([data-theme="dark"]) #instrumentsContainer > .instrument-card:is([data-instrument-type="2"],[data-instrument-type="6"]) .program-panel .program-mini-display > strong {
 color:var(--red-display,#ff4038)!important;
 font-family:"Courier New",ui-monospace,monospace!important;
 font-weight:900!important;
 text-shadow:0 0 4px rgba(255,64,56,.8),0 0 10px rgba(255,64,56,.35)!important;
}

/* V153: dark theoretical program preview with readable axes and curve. */
html[data-theme="dark"] .program-editor-chart-wrap {background:#171f29!important;background-image:none!important;border-color:var(--dh-border)!important;}

/* V154: inset the lower chart in two/four-channel instrument cards. */
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) > .telemetry-chart-panel {
 box-sizing:border-box;
 margin:20px 16px 18px!important;
 padding:16px!important;
 border:1px solid var(--dh-border)!important;
 border-radius:14px!important;
 background:var(--dh-surface-soft)!important;
}
#instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) > .telemetry-chart-panel .telemetry-chart-wrap {
 box-sizing:border-box;
 width:100%!important;
 margin:0!important;
 border-radius:10px;
}
@media(max-width:700px){
 #instrumentsContainer > .instrument-card:is([data-instrument-type="3"],[data-instrument-type="4"]) > .telemetry-chart-panel {margin:16px 10px 14px!important;padding:12px!important;}
}

/* V155: place the SetPoint form above the mobile keyboard, with reachable actions. */
#setpointDialog.dh-keyboard-aware[open] {
 position:fixed!important;
 box-sizing:border-box;
 top:calc(var(--dh-vv-top,0px) + 12px)!important;
 bottom:auto!important;
 left:calc(var(--dh-vv-left,0px) + var(--dh-vv-width,100vw)/2)!important;
 right:auto!important;
 transform:translateX(-50%)!important;
 margin:0!important;
 width:min(420px,calc(var(--dh-vv-width,100vw) - 24px))!important;
 max-width:calc(var(--dh-vv-width,100vw) - 24px)!important;
 max-height:calc(var(--dh-vv-height,100dvh) - 24px)!important;
 overflow-x:hidden;
 overflow-y:auto;
 overscroll-behavior:contain;
 scroll-padding-block:16px 80px;
 background:var(--dh-surface)!important;
}
#setpointDialog.dh-keyboard-aware .setpoint-dialog-content {padding:20px!important;}
#setpointDialog.dh-keyboard-aware .setpoint-dialog-content input {box-sizing:border-box;max-width:100%;font-size:18px;min-height:48px;}
#setpointDialog.dh-keyboard-aware .setpoint-dialog-actions {position:sticky;bottom:0;z-index:1;display:flex;gap:10px;margin-top:16px;padding:12px 0 0;background:var(--dh-surface)!important;}
#setpointDialog.dh-keyboard-aware .setpoint-dialog-actions > button {flex:1 1 0;min-height:44px;}

/* V156: chart image/share/print actions and native-file sharing confirmation. */
.history-graph-actions button[data-history-export],.csv-actions > button {display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
.dh-graph-action-icon {display:block;width:19px;height:19px;flex:0 0 19px;}
.dh-chart-share-dialog {box-sizing:border-box;width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid var(--dh-border);border-radius:18px;background:var(--dh-surface);color:var(--dh-text);box-shadow:var(--dh-shadow-lg);overflow-y:auto;}
.dh-chart-share-dialog::backdrop {background:rgba(0,0,0,.55);}
.dh-chart-share-content {padding:22px;}
.dh-chart-share-content h3 {margin:0 0 10px;color:var(--dh-text);}
.dh-chart-share-description,.dh-chart-share-status {color:var(--dh-text-2);font-size:13px;line-height:1.5;}
.dh-chart-share-preview {display:block;max-width:100%;width:100%;max-height:220px;object-fit:contain;border-radius:8px;}
.dh-chart-share-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.dh-chart-share-actions > button {flex:1 1 150px;min-height:44px;padding:10px 14px;border:1px solid var(--dh-border);border-radius:11px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;background:var(--dh-surface-muted);color:var(--dh-text);cursor:pointer;}
.dh-chart-share-actions > .primary-action {background:var(--dh-red);border-color:var(--dh-red);color:#fff;}
.dh-chart-share-actions > button[hidden] {display:none!important;}
.dh-chart-share-actions > button:focus-visible {outline:2px solid var(--dh-red);outline-offset:3px;}
.dh-chart-share-actions > button:disabled {opacity:.6;cursor:wait;}

/* V157: compact, accessible chart actions beside the heading. */
#historyGraphDialog .dh-chart-heading,.csv-card .dh-chart-heading {display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:12px 20px;}
.csv-card .dh-chart-heading {grid-template-columns:minmax(0,1fr) auto;margin:16px 0;}
.dh-chart-title {min-width:0;overflow-wrap:anywhere;}
.dh-chart-toolbar {display:flex;justify-content:flex-end;align-items:center;gap:10px;}
.dh-chart-toolbar .dh-chart-icon-button {box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px;padding:0!important;margin:0!important;border:1px solid var(--dh-border)!important;border-radius:50%!important;background:var(--dh-surface-soft)!important;color:var(--dh-text)!important;box-shadow:none!important;cursor:pointer;}
.dh-chart-toolbar .dh-graph-action-icon {width:21px;height:21px;flex:0 0 21px;}
.dh-chart-toolbar .dh-chart-icon-button:hover:not(:disabled) {border-color:var(--dh-red)!important;color:var(--dh-red)!important;}
.dh-chart-toolbar .dh-chart-icon-button:focus-visible {outline:2px solid var(--dh-red);outline-offset:3px;}
.dh-chart-toolbar .dh-chart-icon-button:disabled {opacity:.45;cursor:default;}
#historyGraphDialog .history-graph-close {grid-column:3;grid-row:1;position:static!important;margin:0!important;}
@media(max-width:700px){
 #historyGraphDialog .dh-chart-heading {grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;}
 #historyGraphDialog .history-graph-close {grid-column:2;grid-row:1;}
 .csv-card .dh-chart-heading {grid-template-columns:minmax(0,1fr);gap:10px;}
 .dh-chart-heading .dh-chart-toolbar {grid-column:1 / -1;grid-row:2;justify-self:end;}
}

/* V158: stop background scrolling while the history graph is open. */
html.dh-history-graph-open,html.dh-history-graph-open body {overflow:hidden!important;overscroll-behavior:none;}
#historyGraphDialog {overscroll-behavior:contain;}

/* V161: room for four figures on desktop; counter dimensions remain unchanged. */
@media(min-width:701px){
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card:not([data-instrument-type="7"]) .selector-reading-grid {box-sizing:border-box;width:100%!important;max-width:360px!important;justify-self:center;align-self:center;}
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card:not([data-instrument-type="7"]) .selector-reading-cell > div {flex-wrap:nowrap!important;gap:5px!important;}
 #instrumentsContainer.instrument-selector-grid > .instrument-selector-card:not([data-instrument-type="7"]) .selector-reading-cell strong {display:inline-block;min-width:4ch;white-space:nowrap;font-variant-numeric:tabular-nums;}
 #instrumentsContainer > .instrument-card:not(.instrument-selector-card):not([data-instrument-type="7"]) .compact-width-display {box-sizing:border-box;width:80%!important;min-width:min(100%,240px)!important;max-width:360px!important;}
 #instrumentsContainer > .instrument-card:not([data-instrument-type="7"]) .display-value {min-width:4ch;white-space:nowrap;}
}
/* Hide stale readings only in the presentation; telemetry and stored values are untouched. */
#instrumentsContainer > .instrument-offline :is([id^="vm-"],[id^="sp-"],.dh-compact-value) {position:relative!important;color:transparent!important;text-shadow:none!important;min-width:2ch;}
#instrumentsContainer > .instrument-offline :is([id^="vm-"],[id^="sp-"],.dh-compact-value)::after {content:"--";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dh-text)!important;text-shadow:none!important;font:inherit;letter-spacing:inherit;}

/* V162: consistent light dashboard readouts and right-aligned figures. */
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-grid,
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-cell {background:#e5ebef!important;}
#instrumentsContainer.instrument-selector-grid .selector-reading-cell > div {justify-content:flex-end!important;}
#instrumentsContainer.instrument-selector-grid .selector-reading-cell strong {text-align:right!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-offline .selector-reading-cell strong::after {justify-content:flex-end!important;}

/* V163: keep dashboard ordering without the visible hint/status copy. */
#dh-order-hint {display:none!important;}

/* V164: a single heading layout for the four main sections. */
.dh-shell-layout .dh-page-heading {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;margin:0 0 28px!important;padding:0!important;border:0!important;background:transparent!important;min-height:0!important;}
.dh-shell-layout .dh-page-heading > div:first-child {min-width:0;margin:0!important;padding:0!important;}
.dh-shell-layout .dh-page-heading h1 {margin:0!important;padding:0!important;font-size:1.72rem!important;font-weight:800!important;line-height:1.12!important;letter-spacing:-.025em!important;color:var(--dh-text)!important;text-align:left!important;}
.dh-shell-layout .dh-page-heading > div:first-child > :is(p,.history-summary) {margin:9px 0 0!important;font-size:.83rem!important;line-height:1.5!important;color:var(--dh-muted)!important;}
.app-header .app-header-brand strong {font-size:1.85rem!important;line-height:1.1;white-space:nowrap;}
@media(min-width:701px){
 .dh-shell-layout > .content:has(> .dh-page-heading),.notifications-page .dh-shell-layout > .contenedor {box-sizing:border-box;max-width:none!important;width:100%!important;margin:0!important;padding:32px 28px 48px!important;}
}
@media(max-width:700px){
 .dh-shell-layout > .content:has(> .dh-page-heading),.notifications-page .dh-shell-layout > .contenedor {box-sizing:border-box;width:100%!important;margin:0!important;padding:24px 14px 96px!important;}
 .dh-shell-layout .dh-page-heading {align-items:flex-start!important;gap:12px!important;flex-wrap:wrap;}
 .dh-shell-layout .dh-page-heading h1 {font-size:1.55rem!important;}
 .app-header {gap:8px!important;}
 .app-header .app-header-brand strong {font-size:clamp(1.125rem,5.7vw,1.4rem)!important;}
}

/* V165: match the instrument's digital typography and VM/SP colors. */
#instrumentsContainer.instrument-selector-grid .selector-reading-cell strong {box-sizing:border-box;font-family:"Courier New",ui-monospace,monospace!important;font-weight:900!important;font-style:normal;letter-spacing:.05em!important;font-variant-numeric:tabular-nums;line-height:1.1!important;border-radius:0;padding:0;background:transparent!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card:not(.instrument-offline) .selector-reading-cell [id^="vm-"] {color:var(--green-display,#35ff76)!important;text-shadow:0 0 5px rgba(53,255,118,.95),0 0 14px rgba(53,255,118,.48)!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card:not(.instrument-offline) .selector-reading-cell [id^="sp-"] {color:var(--red-display,#ff4038)!important;text-shadow:0 0 5px rgba(255,64,56,.95),0 0 14px rgba(255,64,56,.48)!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card[data-instrument-type="7"] .selector-reading-cell strong {font-weight:650!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card[data-instrument-type="7"]:not(.instrument-offline) [id^="vm-"] {color:#27ff73!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-selector-card[data-instrument-type="7"]:not(.instrument-offline) [id^="sp-"] {color:#ff3f38!important;}
#instrumentsContainer.instrument-selector-grid > .instrument-offline .selector-reading-cell strong::after {color:var(--dh-text)!important;padding-right:0;}

/* V167: a medium slate gray improves digital readout contrast in light mode. */
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-grid,
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-cell {background:#56616b!important;border-color:#74818c!important;}
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-cell > span,
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid .selector-reading-cell small {color:#f0f3f6!important;}
html:not([data-theme="dark"]) #instrumentsContainer.instrument-selector-grid > .instrument-offline .selector-reading-cell strong::after {color:#f0f3f6!important;}

/* V168: tabs stay inside the account page; excess options live behind +. */
.dh-account-tabs-wrap {position:relative;min-width:0;max-width:100%;margin-bottom:20px;}
.dh-account-tabs-wrap .account-tabs {box-sizing:border-box;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:8px!important;overflow:hidden!important;}
.dh-account-tabs-wrap .account-tab {flex:0 0 auto!important;white-space:nowrap;min-height:44px;padding:10px 14px;}
.dh-account-tabs-wrap button[hidden],.install-app-panel [hidden] {display:none!important;}
.dh-tabs-more {box-sizing:border-box;flex:0 0 44px;width:44px;min-height:44px;margin-left:auto;padding:0;border:1px solid var(--dh-border);border-radius:10px;background:var(--dh-surface);color:var(--dh-text);font:600 26px/1 system-ui;cursor:pointer;}
.dh-tabs-more.active {color:var(--dh-red);border-color:var(--dh-red);}
.dh-tabs-menu {position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;gap:4px;box-sizing:border-box;width:min(260px,100%);padding:8px;border:1px solid var(--dh-border);border-radius:12px;background:var(--dh-surface);box-shadow:var(--dh-shadow-lg);}
.dh-tabs-menu[hidden] {display:none!important;}
.dh-tabs-menu button {width:100%;min-height:44px;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--dh-text);font:inherit;cursor:pointer;overflow-wrap:anywhere;}
.dh-tabs-menu button:hover,.dh-tabs-menu button.active {background:var(--dh-red-soft);color:var(--dh-red);}
.dh-account-tabs-wrap button:focus-visible {outline:2px solid var(--dh-red);outline-offset:2px;}
.install-app-panel p {color:var(--dh-muted);line-height:1.6;overflow-wrap:anywhere;}
.install-app-panel h3 {color:var(--dh-text);font-size:1rem;margin-top:24px;}
#dhInstallApp {box-sizing:border-box;max-width:100%;white-space:normal;min-height:44px;margin:14px 0;}
@media(max-width:700px){.account-content,.account-settings-grid,.account-panel {min-width:0;}.account-content .account-panel {box-sizing:border-box;max-width:100%;}.account-content .account-form button {max-width:100%;white-space:normal;}}
#dhInstallApp {padding:12px 18px;border:1px solid var(--dh-red);border-radius:10px;background:var(--dh-red);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer;}
@media(max-width:700px){.account-content .account-form button {min-width:0!important;}}