/* v168 DroneHQ Theme Contract
   Component Gallery is the visual source of truth.
   Pages should migrate to these tokens/classes instead of hard-coded dark/light colors.
*/

:root {
  --dhq-font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --dhq-light-page: #eaf3fb;
  --dhq-light-surface: #ffffff;
  --dhq-light-surface-soft: #f6fbff;
  --dhq-light-surface-tint: #eef7ff;
  --dhq-light-border: #c8d8e8;
  --dhq-light-border-strong: #9fb9d4;
  --dhq-light-text: #0d2136;
  --dhq-light-muted: #50677d;
  --dhq-light-link: #0675bd;
  --dhq-light-primary: #0876c9;
  --dhq-light-primary-hover: #075f9f;
  --dhq-light-disabled-bg: #d8e8f5;
  --dhq-light-disabled-text: #526c82;

  --dhq-dark-page: #051423;
  --dhq-dark-surface: #08223a;
  --dhq-dark-surface-soft: #0b2a46;
  --dhq-dark-surface-tint: #0e3558;
  --dhq-dark-border: rgba(92, 178, 255, 0.28);
  --dhq-dark-border-strong: rgba(92, 178, 255, 0.52);
  --dhq-dark-text: #f7fbff;
  --dhq-dark-muted: #b6d4ee;
  --dhq-dark-link: #54c4ff;
  --dhq-dark-primary: #1596e8;
  --dhq-dark-primary-hover: #0f78bd;
  --dhq-dark-disabled-bg: #173958;
  --dhq-dark-disabled-text: #9ab6cc;
}

html[data-theme="light"],
body[data-theme="light"],
html.theme-light,
body.theme-light,
html.light,
body.light,
html[data-bs-theme="light"],
body[data-bs-theme="light"] {
  --dhq-page: var(--dhq-light-page);
  --dhq-surface: var(--dhq-light-surface);
  --dhq-surface-soft: var(--dhq-light-surface-soft);
  --dhq-surface-tint: var(--dhq-light-surface-tint);
  --dhq-border: var(--dhq-light-border);
  --dhq-border-strong: var(--dhq-light-border-strong);
  --dhq-text: var(--dhq-light-text);
  --dhq-muted: var(--dhq-light-muted);
  --dhq-link: var(--dhq-light-link);
  --dhq-primary: var(--dhq-light-primary);
  --dhq-primary-hover: var(--dhq-light-primary-hover);
  --dhq-disabled-bg: var(--dhq-light-disabled-bg);
  --dhq-disabled-text: var(--dhq-light-disabled-text);
}

html[data-theme="dark"],
body[data-theme="dark"],
html.theme-dark,
body.theme-dark,
html.dark,
body.dark,
html[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
  --dhq-page: var(--dhq-dark-page);
  --dhq-surface: var(--dhq-dark-surface);
  --dhq-surface-soft: var(--dhq-dark-surface-soft);
  --dhq-surface-tint: var(--dhq-dark-surface-tint);
  --dhq-border: var(--dhq-dark-border);
  --dhq-border-strong: var(--dhq-dark-border-strong);
  --dhq-text: var(--dhq-dark-text);
  --dhq-muted: var(--dhq-dark-muted);
  --dhq-link: var(--dhq-dark-link);
  --dhq-primary: var(--dhq-dark-primary);
  --dhq-primary-hover: var(--dhq-dark-primary-hover);
  --dhq-disabled-bg: var(--dhq-dark-disabled-bg);
  --dhq-disabled-text: var(--dhq-dark-disabled-text);
}

/* Shared contract classes */
.dhq-page-shell {
  background: var(--dhq-surface);
  color: var(--dhq-text);
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(22, 62, 96, 0.14);
}

.dhq-card {
  background: var(--dhq-surface);
  color: var(--dhq-text);
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  padding: 16px;
}

.dhq-card-soft {
  background: var(--dhq-surface-soft);
  color: var(--dhq-text);
  border: 1px solid var(--dhq-border);
  border-radius: 12px;
  padding: 14px;
}

.dhq-eyebrow {
  color: var(--dhq-primary);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dhq-title {
  color: var(--dhq-text);
  margin: 0;
  font-weight: 900;
}

.dhq-subtitle,
.dhq-muted {
  color: var(--dhq-muted);
}

.dhq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.dhq-btn-primary {
  background: var(--dhq-primary);
  border-color: var(--dhq-primary);
  color: #ffffff !important;
}

.dhq-btn-primary:hover,
.dhq-btn-primary:focus-visible {
  background: var(--dhq-primary-hover);
  border-color: var(--dhq-primary-hover);
  color: #ffffff !important;
}

.dhq-btn-secondary {
  background: var(--dhq-surface-soft);
  border-color: var(--dhq-border-strong);
  color: var(--dhq-text) !important;
}

.dhq-btn-disabled,
.dhq-btn[disabled],
.dhq-btn[aria-disabled="true"] {
  background: var(--dhq-disabled-bg) !important;
  border-color: var(--dhq-border) !important;
  color: var(--dhq-disabled-text) !important;
  cursor: not-allowed;
  opacity: 1;
}

.dhq-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  background: var(--dhq-surface-tint);
}

.dhq-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 10px;
  background: var(--dhq-surface);
  color: var(--dhq-text);
  font-weight: 900;
}

.dhq-tab.is-active {
  background: linear-gradient(180deg, #2aa7f4, var(--dhq-primary));
  border-color: var(--dhq-primary);
  color: #ffffff !important;
}

.dhq-field,
.dhq-select,
.dhq-textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--dhq-surface);
  color: var(--dhq-text);
}

.dhq-field::placeholder,
.dhq-textarea::placeholder {
  color: var(--dhq-muted);
}

.dhq-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--dhq-border);
  border-radius: 10px;
  overflow: hidden;
}

.dhq-table th {
  background: var(--dhq-surface-tint);
  color: var(--dhq-text);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  padding: 12px 14px;
}

.dhq-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 18px;
  text-align: center;
  color: var(--dhq-muted);
}

.dhq-empty strong {
  color: var(--dhq-text);
}

/* Current-page bridge: action buttons inside custom workspaces must stay readable */
:is(
  .fleet-overview-shell,
  .fleet-workspace-shell,
  .business-workspace-shell,
  .reports-workspace-shell,
  .preflight-workspace,
  .preflight-shell
) :is(a.button, button.button, .button-primary, .btn-primary):not([disabled]):not([aria-disabled="true"]) {
  color: #ffffff !important;
}

:is(
  .fleet-overview-shell,
  .fleet-workspace-shell,
  .business-workspace-shell,
  .reports-workspace-shell,
  .preflight-workspace,
  .preflight-shell
) :is(button[disabled], .button[disabled], .button.disabled, .button[aria-disabled="true"], .btn[disabled]) {
  background: var(--dhq-disabled-bg) !important;
  color: var(--dhq-disabled-text) !important;
  opacity: 1 !important;
}

/* Component Gallery contract examples */
.dhq-contract-gallery {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.dhq-contract-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dhq-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhq-contract-demo {
  --dhq-page: var(--dhq-light-page);
  --dhq-surface: var(--dhq-light-surface);
  --dhq-surface-soft: var(--dhq-light-surface-soft);
  --dhq-surface-tint: var(--dhq-light-surface-tint);
  --dhq-border: var(--dhq-light-border);
  --dhq-border-strong: var(--dhq-light-border-strong);
  --dhq-text: var(--dhq-light-text);
  --dhq-muted: var(--dhq-light-muted);
  --dhq-link: var(--dhq-light-link);
  --dhq-primary: var(--dhq-light-primary);
  --dhq-primary-hover: var(--dhq-light-primary-hover);
  --dhq-disabled-bg: var(--dhq-light-disabled-bg);
  --dhq-disabled-text: var(--dhq-light-disabled-text);
  display: grid;
  gap: 12px;
  background: var(--dhq-page);
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  padding: 14px;
}

.dhq-contract-demo.is-dark-demo {
  --dhq-page: var(--dhq-dark-page);
  --dhq-surface: var(--dhq-dark-surface);
  --dhq-surface-soft: var(--dhq-dark-surface-soft);
  --dhq-surface-tint: var(--dhq-dark-surface-tint);
  --dhq-border: var(--dhq-dark-border);
  --dhq-border-strong: var(--dhq-dark-border-strong);
  --dhq-text: var(--dhq-dark-text);
  --dhq-muted: var(--dhq-dark-muted);
  --dhq-link: var(--dhq-dark-link);
  --dhq-primary: var(--dhq-dark-primary);
  --dhq-primary-hover: var(--dhq-dark-primary-hover);
  --dhq-disabled-bg: var(--dhq-dark-disabled-bg);
  --dhq-disabled-text: var(--dhq-dark-disabled-text);
}

.dhq-contract-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dhq-contract-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--dhq-border);
  border-radius: 10px;
  overflow: hidden;
}

.dhq-contract-metrics div {
  padding: 12px;
  background: var(--dhq-surface);
  border-left: 1px solid var(--dhq-border);
}

.dhq-contract-metrics div:first-child {
  border-left: 0;
}

.dhq-contract-metrics span,
.dhq-contract-metrics small {
  display: block;
  color: var(--dhq-muted);
}

.dhq-contract-metrics strong {
  display: block;
  margin: 6px 0;
  color: var(--dhq-text);
  font-size: 1.2rem;
}

@media (max-width: 1000px) {
  .dhq-contract-grid,
  .dhq-contract-metrics {
    grid-template-columns: 1fr;
  }
}

/* v169 Header utility controls contract */
.dhq-contract-header-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhq-contract-toolbar-demo {
  display: grid;
  gap: 12px;
  background: var(--dhq-page);
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  padding: 14px;
}

.dhq-contract-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--dhq-border);
  border-radius: 14px;
  background: var(--dhq-surface);
}

.dhq-top-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 10px;
  background: var(--dhq-surface);
  color: var(--dhq-primary);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.dhq-top-icon-btn.is-active {
  background: var(--dhq-dark-surface);
  color: #ffffff;
  border-color: var(--dhq-primary);
}

.dhq-top-icon-btn.is-disabled {
  background: var(--dhq-disabled-bg);
  color: var(--dhq-disabled-text);
  border-color: var(--dhq-border);
  cursor: not-allowed;
}

.dhq-theme-selector {
  min-height: 38px;
  min-width: 112px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--dhq-surface);
  color: var(--dhq-text);
  font-weight: 800;
}

.dhq-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 12px;
  background: var(--dhq-surface);
  color: var(--dhq-text);
}

.dhq-account-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--dhq-primary);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.dhq-account-copy {
  display: grid;
  line-height: 1.1;
}

.dhq-account-copy strong {
  color: var(--dhq-text);
  font-size: 0.82rem;
}

.dhq-account-copy span {
  color: var(--dhq-muted);
  font-size: 0.68rem;
}

.dhq-contract-do-dont {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dhq-contract-note {
  border: 1px solid var(--dhq-border);
  border-radius: 12px;
  background: var(--dhq-surface-soft);
  padding: 12px;
}

.dhq-contract-note strong {
  display: block;
  color: var(--dhq-text);
  margin-bottom: 4px;
}

.dhq-contract-note p {
  color: var(--dhq-muted);
  margin: 0;
}

@media (max-width: 1000px) {
  .dhq-contract-header-control-grid,
  .dhq-contract-do-dont {
    grid-template-columns: 1fr;
  }

  .dhq-contract-toolbar-row {
    justify-content: flex-start;
  }
}

/* v170 Header utility preview theme correction */
.dhq-contract-toolbar-demo.is-light-demo {
  --dhq-page: var(--dhq-light-page);
  --dhq-surface: var(--dhq-light-surface);
  --dhq-surface-soft: var(--dhq-light-surface-soft);
  --dhq-surface-tint: var(--dhq-light-surface-tint);
  --dhq-border: var(--dhq-light-border);
  --dhq-border-strong: var(--dhq-light-border-strong);
  --dhq-text: var(--dhq-light-text);
  --dhq-muted: var(--dhq-light-muted);
  --dhq-link: var(--dhq-light-link);
  --dhq-primary: var(--dhq-light-primary);
  --dhq-primary-hover: var(--dhq-light-primary-hover);
  --dhq-disabled-bg: var(--dhq-light-disabled-bg);
  --dhq-disabled-text: var(--dhq-light-disabled-text);
}

.dhq-contract-toolbar-demo.is-dark-demo {
  --dhq-page: var(--dhq-dark-page);
  --dhq-surface: var(--dhq-dark-surface);
  --dhq-surface-soft: var(--dhq-dark-surface-soft);
  --dhq-surface-tint: var(--dhq-dark-surface-tint);
  --dhq-border: var(--dhq-dark-border);
  --dhq-border-strong: var(--dhq-dark-border-strong);
  --dhq-text: var(--dhq-dark-text);
  --dhq-muted: var(--dhq-dark-muted);
  --dhq-link: var(--dhq-dark-link);
  --dhq-primary: var(--dhq-dark-primary);
  --dhq-primary-hover: var(--dhq-dark-primary-hover);
  --dhq-disabled-bg: var(--dhq-dark-disabled-bg);
  --dhq-disabled-text: var(--dhq-dark-disabled-text);
}

.dhq-theme-preview {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  min-width: 112px;
  border: 1px solid var(--dhq-border-strong);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--dhq-surface);
  color: var(--dhq-text);
  font-weight: 900;
}

.dhq-theme-preview::after {
  content: "⌄";
  margin-left: auto;
  color: var(--dhq-muted);
}

/* v171 Real shell icon contract */
.dhq-contract-toolbar-demo.is-light-demo {
  --dhq-preview-icon-bg: #ffffff;
  --dhq-preview-icon-border: #9fc4e5;
  --dhq-preview-icon-text: #0675bd;
  --dhq-preview-icon-active-bg: #06365d;
  --dhq-preview-icon-active-border: #0876c9;
  --dhq-preview-icon-active-text: #ffffff;
  --dhq-preview-toolbar-bg: #ffffff;
}

.dhq-contract-toolbar-demo.is-dark-demo {
  --dhq-preview-icon-bg: rgba(8, 34, 58, 0.86);
  --dhq-preview-icon-border: rgba(84, 196, 255, 0.58);
  --dhq-preview-icon-text: #54c4ff;
  --dhq-preview-icon-active-bg: #031d33;
  --dhq-preview-icon-active-border: #1596e8;
  --dhq-preview-icon-active-text: #ffffff;
  --dhq-preview-toolbar-bg: rgba(8, 34, 58, 0.76);
}

.dhq-contract-toolbar-demo .dhq-contract-toolbar-row {
  background: var(--dhq-preview-toolbar-bg) !important;
}

.dhq-top-icon-btn {
  background: var(--dhq-preview-icon-bg) !important;
  border-color: var(--dhq-preview-icon-border) !important;
  color: var(--dhq-preview-icon-text) !important;
}

.dhq-top-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dhq-top-icon-btn.is-active {
  background: var(--dhq-preview-icon-active-bg) !important;
  border-color: var(--dhq-preview-icon-active-border) !important;
  color: var(--dhq-preview-icon-active-text) !important;
}

.dhq-top-icon-btn.is-active svg {
  stroke: currentColor;
}

.dhq-theme-preview {
  background: var(--dhq-preview-icon-bg) !important;
  border-color: var(--dhq-preview-icon-border) !important;
  color: var(--dhq-text) !important;
}

.dhq-account-pill {
  background: var(--dhq-preview-icon-bg) !important;
  border-color: var(--dhq-preview-icon-border) !important;
}

/* Bridge rule for real header utility buttons once converted to tokenized classes */
.app-shell-header :is(.dhq-top-icon-btn, .header-icon-button, .shell-icon-button, .app-shell-icon-button).is-active,
.app-shell-header :is(.dhq-top-icon-btn, .header-icon-button, .shell-icon-button, .app-shell-icon-button)[aria-pressed="true"] {
  color: #ffffff !important;
}

/* v172 Component Gallery header utility preview correction */
.dhq-contract-toolbar-demo.is-light-demo {
  --dhq-preview-bg: #eaf3fb;
  --dhq-preview-panel: #ffffff;
  --dhq-preview-control-bg: #ffffff;
  --dhq-preview-control-border: #9fc4e5;
  --dhq-preview-control-text: #0876c9;
  --dhq-preview-active-bg: #062b49;
  --dhq-preview-active-border: #0876c9;
  --dhq-preview-active-text: #ffffff;
  --dhq-preview-title: #0d2136;
  --dhq-preview-muted: #50677d;
}

.dhq-contract-toolbar-demo.is-dark-demo {
  --dhq-preview-bg: #051423;
  --dhq-preview-panel: #08223a;
  --dhq-preview-control-bg: #092d4d;
  --dhq-preview-control-border: rgba(84, 196, 255, 0.58);
  --dhq-preview-control-text: #54c4ff;
  --dhq-preview-active-bg: #031d33;
  --dhq-preview-active-border: #1596e8;
  --dhq-preview-active-text: #ffffff;
  --dhq-preview-title: #ffffff;
  --dhq-preview-muted: #b6d4ee;
}

.dhq-contract-toolbar-demo.is-light-demo,
.dhq-contract-toolbar-demo.is-dark-demo {
  background: var(--dhq-preview-bg) !important;
  color: var(--dhq-preview-title) !important;
}

.dhq-contract-toolbar-demo.is-light-demo .dhq-contract-toolbar-row,
.dhq-contract-toolbar-demo.is-dark-demo .dhq-contract-toolbar-row {
  background: var(--dhq-preview-panel) !important;
  border-color: var(--dhq-preview-control-border) !important;
}

.dhq-shell-icon-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 10px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-control-text) !important;
  box-shadow: none !important;
}

.dhq-shell-icon-preview.is-active {
  background: var(--dhq-preview-active-bg) !important;
  border-color: var(--dhq-preview-active-border) !important;
  color: var(--dhq-preview-active-text) !important;
}

.dhq-shell-icon-preview svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dhq-shell-theme-preview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  min-width: 112px !important;
  padding: 0 12px !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 10px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-title) !important;
  font-weight: 900 !important;
}

.dhq-shell-theme-preview::before {
  content: "*";
  color: #d99b26;
  font-weight: 900;
}

.dhq-shell-theme-preview::after {
  content: "⌄";
  margin-left: auto;
  color: var(--dhq-preview-muted);
}

.dhq-shell-account-preview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 12px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-title) !important;
}

.dhq-shell-account-avatar-preview {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: #1687d9 !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.dhq-shell-account-copy-preview {
  display: grid !important;
  line-height: 1.1 !important;
}

.dhq-shell-account-copy-preview strong {
  color: var(--dhq-preview-title) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

.dhq-shell-account-copy-preview span {
  color: var(--dhq-preview-muted) !important;
  font-size: 0.68rem !important;
}

.dhq-contract-toolbar-demo.is-dark-demo .dhq-shell-account-copy-preview strong,
.dhq-contract-toolbar-demo.is-dark-demo .dhq-shell-theme-preview {
  color: #ffffff !important;
}

.dhq-contract-toolbar-demo.is-dark-demo .dhq-shell-account-copy-preview span {
  color: #b6d4ee !important;
}

/* v173 Component Gallery uses real shell header icons */
.dhq-contract-toolbar-demo.is-light-demo {
  --dhq-preview-bg: #eaf3fb;
  --dhq-preview-panel: #ffffff;
  --dhq-preview-control-bg: #ffffff;
  --dhq-preview-control-border: #9fc4e5;
  --dhq-preview-control-text: #0876c9;
  --dhq-preview-active-bg: #062b49;
  --dhq-preview-active-border: #0876c9;
  --dhq-preview-active-text: #ffffff;
  --dhq-preview-title: #0d2136;
  --dhq-preview-muted: #50677d;
}

.dhq-contract-toolbar-demo.is-dark-demo {
  --dhq-preview-bg: #051423;
  --dhq-preview-panel: #08223a;
  --dhq-preview-control-bg: #092d4d;
  --dhq-preview-control-border: rgba(84, 196, 255, 0.58);
  --dhq-preview-control-text: #54c4ff;
  --dhq-preview-active-bg: #031d33;
  --dhq-preview-active-border: #1596e8;
  --dhq-preview-active-text: #ffffff;
  --dhq-preview-title: #ffffff;
  --dhq-preview-muted: #b6d4ee;
}

.dhq-contract-toolbar-demo.is-light-demo,
.dhq-contract-toolbar-demo.is-dark-demo {
  background: var(--dhq-preview-bg) !important;
  color: var(--dhq-preview-title) !important;
}

.dhq-contract-toolbar-demo.is-light-demo .dhq-contract-toolbar-row,
.dhq-contract-toolbar-demo.is-dark-demo .dhq-contract-toolbar-row {
  background: var(--dhq-preview-panel) !important;
  border-color: var(--dhq-preview-control-border) !important;
}

.dhq-shell-icon-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 10px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-control-text) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.dhq-shell-icon-preview.is-active {
  background: var(--dhq-preview-active-bg) !important;
  border-color: var(--dhq-preview-active-border) !important;
  color: var(--dhq-preview-active-text) !important;
}

.dhq-shell-icon-preview :is(svg, .lucide, [data-lucide]) {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dhq-shell-icon-preview :is(i, .fa, .fas, .far, .fal, .material-icons, .material-symbols-outlined, span) {
  color: currentColor !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dhq-shell-icon-preview img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

.dhq-shell-theme-preview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  min-width: 112px !important;
  padding: 0 12px !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 10px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-title) !important;
  font-weight: 900 !important;
}

.dhq-shell-theme-preview::before {
  content: "*";
  color: #d99b26;
  font-weight: 900;
}

.dhq-shell-theme-preview::after {
  content: "⌄";
  margin-left: auto;
  color: var(--dhq-preview-muted);
}

.dhq-shell-account-preview {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--dhq-preview-control-border) !important;
  border-radius: 12px !important;
  background: var(--dhq-preview-control-bg) !important;
  color: var(--dhq-preview-title) !important;
}

.dhq-shell-account-avatar-preview {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: #1687d9 !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.dhq-shell-account-copy-preview {
  display: grid !important;
  line-height: 1.1 !important;
}

.dhq-shell-account-copy-preview strong {
  color: var(--dhq-preview-title) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

.dhq-shell-account-copy-preview span {
  color: var(--dhq-preview-muted) !important;
  font-size: 0.68rem !important;
}

/* v174 Clean locked header utility previews */
.dhq-header-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhq-header-preview-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--preview-border);
  border-radius: 14px;
  padding: 14px;
  background: var(--preview-page);
  color: var(--preview-text);
}

.dhq-header-preview-card.is-light {
  --preview-page: #eaf3fb;
  --preview-panel: #ffffff;
  --preview-control-bg: #ffffff;
  --preview-control-border: #9fc4e5;
  --preview-control-text: #0876c9;
  --preview-active-bg: #062b49;
  --preview-active-text: #ffffff;
  --preview-text: #0d2136;
  --preview-muted: #50677d;
  --preview-border: #c8d8e8;
}

.dhq-header-preview-card.is-dark {
  --preview-page: #051423;
  --preview-panel: #08223a;
  --preview-control-bg: #092d4d;
  --preview-control-border: rgba(84, 196, 255, 0.58);
  --preview-control-text: #54c4ff;
  --preview-active-bg: #031d33;
  --preview-active-text: #ffffff;
  --preview-text: #ffffff;
  --preview-muted: #b6d4ee;
  --preview-border: rgba(84, 196, 255, 0.35);
}

.dhq-header-preview-card .dhq-eyebrow {
  color: #1aa8ff !important;
}

.dhq-header-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--preview-control-border);
  border-radius: 14px;
  background: var(--preview-panel);
}

.dhq-header-preview-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1px solid var(--preview-control-border);
  border-radius: 10px;
  background: var(--preview-control-bg);
  color: var(--preview-control-text);
  padding: 0;
}

.dhq-header-preview-icon.is-active {
  background: var(--preview-active-bg);
  color: var(--preview-active-text);
}

.dhq-header-preview-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dhq-header-preview-theme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  min-width: 112px;
  padding: 0 12px;
  border: 1px solid var(--preview-control-border);
  border-radius: 10px;
  background: var(--preview-control-bg);
  color: var(--preview-text);
  font-weight: 900;
}

.dhq-header-preview-theme::before {
  content: "*";
  color: #d99b26;
}

.dhq-header-preview-theme::after {
  content: "⌄";
  margin-left: auto;
  color: var(--preview-muted);
}

.dhq-header-preview-account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid var(--preview-control-border);
  border-radius: 12px;
  background: var(--preview-control-bg);
  color: var(--preview-text);
}

.dhq-header-preview-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #1687d9;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.dhq-header-preview-copy {
  display: grid;
  line-height: 1.1;
}

.dhq-header-preview-copy strong {
  color: var(--preview-text) !important;
  font-size: 0.82rem;
  font-weight: 900;
}

.dhq-header-preview-copy span {
  color: var(--preview-muted) !important;
  font-size: 0.68rem;
}

@media (max-width: 1000px) {
  .dhq-header-preview-grid {
    grid-template-columns: 1fr;
  }

  .dhq-header-preview-toolbar {
    justify-content: flex-start;
  }
}

/* v175 Header preview neutral theme states */
.dhq-header-preview-card.is-light .dhq-header-preview-icon {
  background: #ffffff !important;
  color: #0876c9 !important;
  border-color: #9fc4e5 !important;
}

.dhq-header-preview-card.is-dark .dhq-header-preview-icon {
  background: #092d4d !important;
  color: #54c4ff !important;
  border-color: rgba(84, 196, 255, 0.58) !important;
}

.dhq-header-preview-card.is-light .dhq-header-preview-icon svg,
.dhq-header-preview-card.is-dark .dhq-header-preview-icon svg {
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* v176a System Status / Crawler Bar contract */
.dhq-status-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhq-status-preview-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--status-border);
  border-radius: 14px;
  padding: 14px;
  background: var(--status-page);
  color: var(--status-text);
}

.dhq-status-preview-card.is-light {
  --status-page: #eaf3fb;
  --status-strip: #ffffff;
  --status-soft: #f6fbff;
  --status-border: #c8d8e8;
  --status-border-strong: #9fc4e5;
  --status-text: #0d2136;
  --status-muted: #50677d;
  --status-online: #087a3d;
  --status-attention: #a15c00;
  --status-offline: #b42318;
  --status-waiting: #6b5f00;
}

.dhq-status-preview-card.is-dark {
  --status-page: #051423;
  --status-strip: #08223a;
  --status-soft: #0b2a46;
  --status-border: rgba(84, 196, 255, 0.35);
  --status-border-strong: rgba(84, 196, 255, 0.58);
  --status-text: #ffffff;
  --status-muted: #b6d4ee;
  --status-online: #55f0a0;
  --status-attention: #ffd166;
  --status-offline: #ff7d7d;
  --status-waiting: #f7d774;
}

.dhq-status-preview-card .dhq-eyebrow {
  color: #1aa8ff !important;
}

.dhq-status-strip-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--status-border);
  border-radius: 12px;
  background: var(--status-strip);
  color: var(--status-text);
}

.dhq-status-strip-left,
.dhq-status-strip-right,
.dhq-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dhq-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--status-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.dhq-status-dot.is-online {
  background: var(--status-online);
}

.dhq-status-dot.is-attention {
  background: var(--status-attention);
}

.dhq-status-dot.is-offline {
  background: var(--status-offline);
}

.dhq-status-dot.is-waiting {
  background: var(--status-waiting);
}

.dhq-status-label {
  color: var(--status-text);
  font-weight: 900;
}

.dhq-status-label.is-online {
  color: var(--status-online);
}

.dhq-status-label.is-attention {
  color: var(--status-attention);
}

.dhq-status-label.is-offline {
  color: var(--status-offline);
}

.dhq-status-label.is-waiting {
  color: var(--status-waiting);
}

.dhq-status-message,
.dhq-status-meta {
  color: var(--status-muted);
  font-weight: 700;
}

.dhq-status-state-list {
  display: grid;
  gap: 8px;
}

.dhq-status-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--status-border);
  border-radius: 12px;
  background: var(--status-soft);
}

.dhq-status-state strong {
  color: var(--status-text) !important;
}

.dhq-status-state p {
  margin: 2px 0 0;
  color: var(--status-muted) !important;
}

@media (max-width: 1000px) {
  .dhq-status-contract-grid,
  .dhq-status-strip-preview {
    grid-template-columns: 1fr;
  }

  .dhq-status-strip-right {
    justify-content: flex-start;
  }
}

/* v176b Help Drawer Component Gallery contract */
.dhq-help-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhq-help-preview-card {
  border: 1px solid var(--help-border);
  border-radius: 14px;
  background: var(--help-page);
  color: var(--help-text);
  overflow: hidden;
}

.dhq-help-preview-card.is-light {
  --help-page: #ffffff;
  --help-panel: #f6fbff;
  --help-soft: #eef7ff;
  --help-border: #c8d8e8;
  --help-border-strong: #9fc4e5;
  --help-text: #0d2136;
  --help-muted: #50677d;
  --help-primary: #0876c9;
}

.dhq-help-preview-card.is-dark {
  --help-page: #051423;
  --help-panel: #08223a;
  --help-soft: #0b2a46;
  --help-border: rgba(84, 196, 255, 0.35);
  --help-border-strong: rgba(84, 196, 255, 0.58);
  --help-text: #ffffff;
  --help-muted: #b6d4ee;
  --help-primary: #54c4ff;
}

.dhq-help-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--help-panel);
  border-bottom: 1px solid var(--help-border);
}

.dhq-help-preview-header h4 {
  margin: 4px 0 0;
  color: var(--help-text) !important;
  font-size: 1.1rem;
}

.dhq-help-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--help-border-strong);
  border-radius: 10px;
  background: var(--help-soft);
  color: var(--help-primary);
  font-weight: 900;
}

.dhq-help-preview-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--help-panel);
  border-bottom: 1px solid var(--help-border);
}

.dhq-help-preview-tab {
  padding: 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--help-muted);
  font-weight: 900;
}

.dhq-help-preview-tab.is-active {
  color: var(--help-primary);
  border-bottom-color: var(--help-primary);
  background: var(--help-soft);
}

.dhq-help-preview-body {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--help-page);
}

.dhq-help-preview-pill {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--help-border-strong);
  border-radius: 999px;
  background: var(--help-soft);
  color: var(--help-text);
  font-size: 0.78rem;
  font-weight: 900;
}

.dhq-help-preview-callout,
.dhq-help-preview-note,
.dhq-help-preview-link {
  border: 1px solid var(--help-border);
  border-radius: 12px;
  background: var(--help-soft);
  color: var(--help-text);
  padding: 12px;
}

.dhq-help-preview-callout p,
.dhq-help-preview-note p,
.dhq-help-preview-body p,
.dhq-help-preview-body li {
  color: var(--help-muted) !important;
}

.dhq-help-preview-body h5,
.dhq-help-preview-note strong {
  color: var(--help-text) !important;
  margin: 0;
}

.dhq-help-preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dhq-help-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--help-border-strong);
  background: var(--help-soft);
  color: var(--help-text);
  font-weight: 900;
}

.dhq-help-preview-btn.is-primary {
  background: #0876c9;
  border-color: #0876c9;
  color: #ffffff !important;
}

@media (max-width: 1000px) {
  .dhq-help-contract-grid,
  .dhq-help-preview-actions {
    grid-template-columns: 1fr;
  }
}