:root,
[data-theme="light"] {
  --hdk-surface-page: #f5f7fb;
  --hdk-surface-panel: #ffffff;
  --hdk-surface-panel-strong: #f0f4fa;
  --hdk-surface-raised: #fbfcff;
  --hdk-text-primary: #111827;
  --hdk-text-secondary: #4b5563;
  --hdk-text-muted: #7b8494;
  --hdk-border-subtle: #dfe5ee;
  --hdk-accent: #245bff;
  --hdk-accent-2: #15a37f;
  --hdk-accent-3: #f59e0b;
  --hdk-accent-4: #ef4444;
  --hdk-success: #15803d;
  --hdk-success-soft: #e9f8ef;
  --hdk-warning: #b45309;
  --hdk-warning-soft: #fff4df;
  --hdk-critical: #b91c1c;
  --hdk-critical-soft: #fff0f0;
  --hdk-chart-grid: #e5ebf3;
  --hdk-chart-axis: #667085;
  --hdk-chart-line: #245bff;
  --hdk-chart-fill: rgba(36, 91, 255, 0.16);
  --hdk-series-blue: #245bff;
  --hdk-series-green: #15a37f;
  --hdk-series-red: #ef4444;
  --hdk-series-amber: #f59e0b;
  --hdk-shadow: 0 18px 54px rgba(15, 23, 42, 0.10);
  --hdk-space-1: 4px;
  --hdk-space-2: 8px;
  --hdk-space-3: 12px;
  --hdk-space-4: 16px;
  --hdk-space-5: 20px;
  --hdk-space-6: 24px;
  --hdk-space-8: 32px;
  --hdk-space-page-x: clamp(20px, 3vw, 40px);
  --hdk-space-page-y: clamp(20px, 2.6vw, 36px);
  --hdk-space-section: var(--hdk-space-5);
  --hdk-space-card: var(--hdk-space-4);
  --hdk-space-grid: var(--hdk-space-3);
  --hdk-radius-card: 8px;
  --hdk-radius-control: 8px;
  --hdk-max-content: 1480px;
  --hdk-sidebar-width: 264px;
  --hdk-sidebar-collapsed-width: 78px;
  --hdk-sidebar-padding: 14px;
  --hdk-sidebar-group-gap: 14px;
  --hdk-sidebar-item-height: 38px;
  --hdk-sidebar-item-gap: 6px;
  --hdk-sidebar-z: 20;
}

[data-theme="dark"] {
  --hdk-surface-page: #0b1016;
  --hdk-surface-panel: #111821;
  --hdk-surface-panel-strong: #172231;
  --hdk-surface-raised: #131c28;
  --hdk-text-primary: #f8fafc;
  --hdk-text-secondary: #cbd5e1;
  --hdk-text-muted: #94a3b8;
  --hdk-border-subtle: #273244;
  --hdk-chart-grid: #263244;
  --hdk-chart-axis: #aab6c7;
  --hdk-chart-line: #8fb2ff;
  --hdk-chart-fill: rgba(143, 178, 255, 0.18);
  --hdk-series-blue: #8fb2ff;
  --hdk-series-green: #65d98b;
  --hdk-series-red: #ff8a8a;
  --hdk-series-amber: #f8c36a;
  --hdk-success: #65d98b;
  --hdk-success-soft: rgba(101, 217, 139, 0.14);
  --hdk-warning: #f8c36a;
  --hdk-warning-soft: rgba(248, 195, 106, 0.14);
  --hdk-critical: #ff8a8a;
  --hdk-critical-soft: rgba(255, 138, 138, 0.14);
  --hdk-shadow: 0 22px 64px rgba(0, 0, 0, 0.32);
}

.hdk-shell,
.hdk-shell * {
  box-sizing: border-box;
}

.hdk-shell {
  display: grid;
  grid-template-columns: minmax(232px, var(--hdk-sidebar-width)) minmax(0, 1fr);
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--hdk-surface-page);
  color: var(--hdk-text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: grid-template-columns 180ms ease;
}

.hdk-shell.sidebar-collapsed {
  grid-template-columns: var(--hdk-sidebar-collapsed-width) minmax(0, 1fr);
}

.hdk-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--hdk-sidebar-z);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 20px var(--hdk-sidebar-padding);
  background: color-mix(in srgb, var(--hdk-surface-panel) 92%, transparent);
  border-right: 1px solid var(--hdk-border-subtle);
  backdrop-filter: blur(18px);
}

.hdk-sidebar-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.hdk-brand {
  display: grid;
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  margin-bottom: 26px;
}

.hdk-brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hdk-accent);
  color: #ffffff;
  font-weight: 900;
}

.hdk-brand strong,
.hdk-brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-brand small {
  margin-top: 2px;
  color: var(--hdk-text-muted);
}

.hdk-nav {
  display: grid;
  align-content: start;
  gap: var(--hdk-sidebar-group-gap);
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.hdk-nav-group {
  display: grid;
  gap: var(--hdk-sidebar-item-gap);
  min-width: 0;
}

.hdk-nav-group-title {
  margin: 0 0 2px;
  padding: 0 4px;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hdk-nav-item {
  min-height: var(--hdk-sidebar-item-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hdk-text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
}

.hdk-sidebar-toggle {
  width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.hdk-sidebar-toggle:hover,
.hdk-sidebar-toggle:focus-visible {
  background: var(--hdk-surface-raised);
  outline: 2px solid var(--hdk-accent);
  outline-offset: 2px;
}

.hdk-shell.sidebar-collapsed .hdk-sidebar {
  padding: 12px 10px;
}

.hdk-shell.sidebar-collapsed .hdk-brand {
  grid-template-columns: 1fr;
  justify-items: center;
}

.hdk-shell.sidebar-collapsed .hdk-brand span:not(.hdk-brand__mark),
.hdk-shell.sidebar-collapsed .hdk-nav-group-title,
.hdk-shell.sidebar-collapsed .hdk-nav-item > span,
.hdk-shell.sidebar-collapsed .hdk-sidebar-footer {
  display: none;
}

.hdk-shell.sidebar-collapsed .hdk-nav-item {
  aspect-ratio: 1;
  color: transparent;
  font-size: 0;
  justify-content: center;
  min-height: 46px;
  padding: 0;
}

.hdk-shell.sidebar-collapsed .hdk-nav-item::before {
  color: var(--hdk-text-primary);
  content: attr(data-short);
  font-size: 12px;
  font-weight: 900;
}

.hdk-nav-item:hover,
.hdk-nav-item:focus-visible,
.hdk-nav-item.is-active,
.hdk-nav-item[aria-current="page"] {
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  outline: 0;
}

.hdk-nav span {
  color: var(--hdk-text-muted);
  font-size: 11px;
}

.hdk-sidebar-status {
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-inset);
  color: var(--hdk-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.hdk-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--hdk-space-page-y) var(--hdk-space-page-x);
  scroll-behavior: smooth;
}

.hdk-main > :not(.hdk-header) {
  width: min(100%, var(--hdk-max-content));
  margin-inline: auto;
}

.hdk-main > :not(.hdk-header) + :not(.hdk-header) {
  margin-top: var(--hdk-space-section);
}

.hdk-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, var(--hdk-max-content));
  margin: 0 auto var(--hdk-space-section);
}

.hdk-header h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 0.96;
  letter-spacing: 0;
}

.hdk-header p,
.hdk-card__header p,
.hdk-state p,
.hdk-proof p,
.hdk-metric p {
  margin: 8px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-page-frame,
.hdk-page,
.hdk-route,
.hdk-query-boundary {
  width: min(100%, var(--hdk-max-content));
  margin-inline: auto;
}

.hdk-page,
.hdk-route,
.hdk-section-stack,
.hdk-query-boundary {
  display: grid;
  gap: var(--hdk-space-section);
  align-content: start;
}

.hdk-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--hdk-space-grid);
  align-items: stretch;
}

.hdk-section-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdk-section-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdk-section-full,
.hdk-card-full {
  grid-column: 1 / -1;
}

.hdk-page-section,
.hdk-section {
  min-width: 0;
}

.hdk-page-section > .hdk-card,
.hdk-section > .hdk-card {
  height: 100%;
}

.hdk-query-boundary > * + *,
.hdk-page-frame > * + *,
.hdk-page > * + *,
.hdk-route > * + * {
  margin-top: var(--hdk-space-section);
}

.hdk-eyebrow {
  margin: 0 0 8px;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hdk-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.hdk-button-primary {
  border-color: var(--hdk-accent);
  background: var(--hdk-accent);
  color: #fff;
}

.hdk-card {
  min-width: 0;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-card);
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  overflow-wrap: anywhere;
}

.hdk-card > :last-child {
  margin-bottom: 0;
}

/*
  Compatibility layer for legacy dashboards.

  These selectors intentionally apply shared dashboard-kit rhythm to older
  project-owned names while route markup is decomposed into real kit
  components. They are not an excuse to mark a project component-native:
  audits still flag local primitives until the rendered route is migrated.
*/
 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.workspace, .layout, .meal-content, .view, .meal-page, .dashboard-view, .page, .route),
:where(.hdk-page-frame, .hdk-page, .hdk-route, .hdk-query-boundary) {
  min-width: 0;
  overflow-wrap: anywhere;
}

 :where(.hdk-main, [data-component="DashboardShell"]) :where(.workspace, .meal-content, .view, .meal-page, .dashboard-view, .page, .route),
 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.hdk-section-stack, .panel-grid, .metric-strip, .metric-row, .proof-grid, .card-grid, .dashboard-grid, .two-column, .research-grid, .mbo-grid) {
  display: grid;
  gap: var(--hdk-space-section);
  align-content: start;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-grid, .metric-strip, .metric-row, .proof-grid, .card-grid, .dashboard-grid, .two-column, .research-grid, .mbo-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.span-2, .span-3, .wide, .full-width, .hdk-section-full) {
  grid-column: 1 / -1;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .metric, .dashboard-row, .meal-section, .row, .table-wrap, .graph-canvas, .report, .ops-result):not(.hdk-nav):not(.hdk-sidebar):not(.hdk-main) {
  min-width: 0;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-card);
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-text-primary);
  overflow-wrap: anywhere;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .metric, .dashboard-row, .meal-section, .row):not(.hdk-card) {
  padding: var(--hdk-space-card);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-header, .card-header, .section-head, .topbar, .metric-header, .table-header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hdk-space-3);
  min-width: 0;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-header, .card-header, .section-head, .metric-header, .table-header) + * {
  margin-top: var(--hdk-space-3);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .meal-section, .hdk-card) :where(h2, h3, p) {
  overflow-wrap: anywhere;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .meal-section, .hdk-card) :where(h2, h3) {
  margin-block-start: 0;
  letter-spacing: 0;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.muted, .helper, .helper-text, .eyebrow, small) {
  color: var(--hdk-text-muted);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(th, td) {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hdk-border-subtle);
  text-align: left;
  vertical-align: top;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(th) {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(input, select, textarea) {
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font: inherit;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(button, .button, .secondary) {
  border-radius: var(--hdk-radius-control);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(form, .input-row, .toolbar, .dcf-grid, .meal-form-grid, .topbar-actions, .button-row) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-3);
  align-items: center;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(textarea) {
  min-height: 96px;
  resize: vertical;
}

.hdk-gallery-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hdk-space-grid);
  margin-bottom: var(--hdk-space-section);
}

.hdk-gallery-section,
.hdk-component-intake {
  margin-top: var(--hdk-space-section);
}

.hdk-gallery-status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hdk-space-2);
}

.hdk-gallery-status,
.hdk-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.hdk-gallery-status strong {
  color: var(--hdk-text-primary);
}

.hdk-gallery-status-approved {
  border-color: color-mix(in srgb, var(--hdk-success) 34%, var(--hdk-border-subtle));
  background: var(--hdk-success-soft);
}

.hdk-gallery-status-reviewing {
  border-color: color-mix(in srgb, var(--hdk-warning) 42%, var(--hdk-border-subtle));
  background: var(--hdk-warning-soft);
}

.hdk-gallery-status-draft,
.hdk-gallery-status-needs-redesign,
.hdk-gallery-status-deprecated {
  background: var(--hdk-surface-panel-strong);
}

.hdk-reference-family-grid,
.hdk-component-intake__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hdk-space-grid);
}

.hdk-reference-family,
.hdk-component-card {
  min-width: 0;
  padding: var(--hdk-space-card);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-reference-family span,
.hdk-component-card header span {
  display: block;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-reference-family strong {
  display: block;
  margin-top: 8px;
  color: var(--hdk-text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.hdk-reference-family p,
.hdk-component-card p,
.hdk-component-card dd {
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.hdk-component-card {
  display: grid;
  gap: var(--hdk-space-3);
  border-top: 4px solid var(--hdk-border-subtle);
}

.hdk-component-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hdk-space-3);
}

.hdk-component-card header strong {
  flex: 0 0 auto;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--hdk-text-primary);
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-component-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hdk-component-card__chips span {
  max-width: 100%;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.hdk-component-card dl {
  display: grid;
  gap: var(--hdk-space-2);
  margin: 0;
}

.hdk-component-card dt {
  margin: 0 0 2px;
  color: var(--hdk-text-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-component-card dd {
  margin: 0;
}

.hdk-gallery-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--hdk-space-grid);
}

.hdk-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 0;
}

.hdk-card__header h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.hdk-metric {
  padding: 16px;
  box-shadow: none;
}

.hdk-metric span,
.hdk-proof span,
.hdk-state span {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-metric strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
}

.hdk-proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.hdk-proof {
  padding: 13px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-data-freshness-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.hdk-freshness {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-freshness strong {
  display: block;
  margin-top: 6px;
}

.hdk-freshness p {
  margin: 6px 0 0;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-proof strong {
  display: block;
  margin-top: 6px;
}

.hdk-tone-success {
  --hdk-tone: #15803d;
}

.hdk-tone-warning {
  --hdk-tone: #b45309;
}

.hdk-tone-danger {
  --hdk-tone: #b91c1c;
}

.hdk-tone-info {
  --hdk-tone: #2563eb;
}

.hdk-tone-success,
.hdk-tone-warning,
.hdk-tone-danger,
.hdk-tone-info {
  border-color: color-mix(in srgb, var(--hdk-tone) 28%, var(--hdk-border-subtle));
}

.hdk-tone-success strong,
.hdk-tone-warning strong,
.hdk-tone-danger strong,
.hdk-tone-info strong {
  color: var(--hdk-tone);
}

.hdk-chart-card {
  overflow: hidden;
}

.hdk-chart {
  width: 100%;
  display: block;
  padding: 10px 12px 14px;
}

.hdk-chart__grid {
  stroke: var(--hdk-chart-grid);
  stroke-width: 1;
}

.hdk-chart__axis,
.hdk-chart__label {
  fill: var(--hdk-chart-axis);
  font-size: 12px;
  font-weight: 700;
}

.hdk-chart__label {
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-chart__line {
  fill: none;
  stroke: var(--hdk-series-color, var(--hdk-chart-line));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdk-chart__area {
  fill: var(--hdk-chart-fill);
}

.hdk-chart__point,
.hdk-chart__bar {
  fill: var(--hdk-series-color, var(--hdk-chart-line));
}

.hdk-sparkline {
  width: 100%;
  height: 64px;
}

.hdk-donut-layout {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.hdk-donut {
  width: 100%;
  transform: rotate(-90deg);
}

.hdk-donut__track {
  stroke: var(--hdk-surface-panel-strong);
}

.hdk-donut__segment {
  stroke-linecap: round;
}

.hdk-fill-0 { stroke: #245bff; background: #245bff; }
.hdk-fill-1 { stroke: #15a37f; background: #15a37f; }
.hdk-fill-2 { stroke: #f59e0b; background: #f59e0b; }
.hdk-fill-3 { stroke: #ef4444; background: #ef4444; }
.hdk-fill-4 { stroke: #8b5cf6; background: #8b5cf6; }
.hdk-fill-5 { stroke: #06b6d4; background: #06b6d4; }
.hdk-fill-6 { stroke: #84cc16; background: #84cc16; }
.hdk-fill-7 { stroke: #f97316; background: #f97316; }

.hdk-legend {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hdk-legend li,
.hdk-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--hdk-text-secondary);
  font-size: 13px;
}

.hdk-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--hdk-series-color, var(--hdk-chart-line));
}

.hdk-heatmap {
  display: grid;
  grid-template-columns: minmax(88px, 0.6fr) repeat(var(--hdk-heatmap-cols), minmax(84px, 1fr));
  gap: 6px;
  padding: 18px;
  overflow-x: auto;
}

.hdk-heatmap b,
.hdk-heatmap__cell {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
}

.hdk-heatmap b {
  color: var(--hdk-text-muted);
}

.hdk-heatmap__cell {
  background: color-mix(in srgb, var(--hdk-accent) calc(var(--hdk-heat) * 72%), var(--hdk-surface-panel-strong));
  color: var(--hdk-text-primary);
  font-weight: 800;
}

.hdk-table-card {
  overflow: hidden;
}

.hdk-table-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  align-items: center;
  justify-content: flex-end;
}

.hdk-table-toolbar label {
  display: inline-flex;
  gap: var(--hdk-space-2);
  align-items: center;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.hdk-table-toolbar select {
  min-height: 32px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font: inherit;
  padding: 5px 28px 5px 10px;
}

.hdk-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 14px 18px 0;
}

.hdk-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.hdk-table th,
.hdk-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hdk-border-subtle);
  text-align: left;
  vertical-align: top;
}

.hdk-table th {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 18px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-pagination button,
.hdk-pagination select,
.hdk-segmented button,
.hdk-drawer button {
  min-height: 32px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 800;
}

.hdk-pagination label {
  display: inline-flex;
  align-items: center;
  gap: var(--hdk-space-2);
}

.hdk-help {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

.hdk-help__trigger,
.hdk-info-popover summary {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-muted);
  cursor: help;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.hdk-help__trigger:hover,
.hdk-help__trigger:focus-visible,
.hdk-info-popover summary:hover,
.hdk-info-popover summary:focus-visible {
  border-color: var(--hdk-accent);
  color: var(--hdk-accent);
  outline: 2px solid color-mix(in srgb, var(--hdk-accent) 18%, transparent);
  outline-offset: 2px;
}

.hdk-help__bubble {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: min(320px, 70vw);
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--hdk-text-primary);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-surface-panel);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}

.hdk-help__trigger:hover + .hdk-help__bubble,
.hdk-help__trigger:focus-visible + .hdk-help__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hdk-info-popover {
  position: relative;
  display: inline-flex;
}

.hdk-info-popover summary {
  list-style: none;
}

.hdk-info-popover summary::-webkit-details-marker {
  display: none;
}

.hdk-info-popover__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 80vw);
  padding: var(--hdk-space-3);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.hdk-info-popover__panel strong {
  display: block;
  color: var(--hdk-text-primary);
  margin-bottom: var(--hdk-space-1);
}

.hdk-info-popover__panel p {
  margin: 0;
}

.hdk-ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hdk-space-card);
  align-items: center;
}

.hdk-ai-panel__body {
  min-width: 0;
}

.hdk-ai-panel__body h3,
.hdk-entity-card h3 {
  margin: 0;
  color: var(--hdk-text-primary);
  font-size: 18px;
  line-height: 1.16;
  text-wrap: balance;
}

.hdk-ai-panel__body p,
.hdk-entity-card p,
.hdk-muted {
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.42;
}

.hdk-ai-panel details {
  margin-top: var(--hdk-space-3);
}

.hdk-ai-panel summary {
  cursor: pointer;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.hdk-ai-panel pre {
  max-height: 180px;
  overflow: auto;
  margin: var(--hdk-space-2) 0 0;
  padding: var(--hdk-space-3);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.hdk-ai-panel__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  justify-content: flex-end;
}

.hdk-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--hdk-space-grid);
}

.hdk-entity-card {
  display: grid;
  gap: var(--hdk-space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hdk-entity-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hdk-space-3);
  align-items: start;
}

.hdk-entity-card__header p {
  margin: 4px 0 0;
  color: var(--hdk-text-muted);
}

.hdk-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  background: var(--hdk-surface-panel-strong);
}

.hdk-segmented button {
  border: 0;
  background: transparent;
  color: var(--hdk-text-secondary);
}

.hdk-segmented button.is-active {
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.hdk-state {
  padding: 18px;
  box-shadow: none;
}

.hdk-loading-shell,
.hdk-query-boundary {
  min-width: 0;
}

.hdk-loading-shell {
  padding: 18px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-loading-shell__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.hdk-loading-shell__header h2 {
  margin: 0;
  font-size: 17px;
}

.hdk-loading-shell__header p {
  margin: 5px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-loading-shell__spinner {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--hdk-border-subtle);
  border-top-color: var(--hdk-accent);
  border-radius: 999px;
  animation: hdk-spin 820ms linear infinite;
}

.hdk-skeleton-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hdk-skeleton-card {
  min-height: 118px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-skeleton-card span,
.hdk-skeleton-card strong,
.hdk-skeleton-card p,
.hdk-skeleton-card div {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hdk-surface-panel-strong), var(--hdk-surface-raised), var(--hdk-surface-panel-strong));
  background-size: 220% 100%;
  animation: hdk-shimmer 1.2s ease-in-out infinite;
}

.hdk-skeleton-card span {
  width: 42%;
  height: 12px;
}

.hdk-skeleton-card strong {
  width: 70%;
  height: 28px;
  margin-top: 18px;
}

.hdk-skeleton-card p {
  width: 55%;
  height: 10px;
  margin-top: 14px;
}

.hdk-skeleton-chart {
  grid-column: span 2;
  min-height: 260px;
}

.hdk-skeleton-chart div {
  width: 100%;
  height: 190px;
  margin-top: 18px;
  border-radius: 8px;
}

.hdk-skeleton-table {
  min-height: 260px;
}

.hdk-skeleton-table span {
  width: 100%;
  height: 16px;
  margin-bottom: 16px;
}

.hdk-partial-banner,
.hdk-stale-inline,
.hdk-stale-badge {
  border: 1px solid color-mix(in srgb, #b45309 28%, var(--hdk-border-subtle));
  background: color-mix(in srgb, #f59e0b 12%, var(--hdk-surface-panel));
  color: var(--hdk-text-primary);
}

.hdk-partial-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
}

.hdk-partial-banner strong {
  display: block;
}

.hdk-partial-banner p {
  margin: 4px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-stale-inline {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--hdk-text-secondary);
  font-size: 13px;
  font-weight: 750;
}

.hdk-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.hdk-state h2 {
  margin: 6px 0 0;
}

.hdk-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  padding: 18px;
  background: var(--hdk-surface-panel);
  border-left: 1px solid var(--hdk-border-subtle);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  transform: translateX(105%);
  transition: transform 160ms ease;
  z-index: 50;
}

.hdk-drawer.is-open {
  transform: translateX(0);
}

.hdk-drawer header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.hdk-action-queue,
.hdk-alert-queue,
.hdk-content-package,
.hdk-brand-portfolio,
.hdk-channel-matrix,
.hdk-operations-funnel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-action-list,
.hdk-alert-list,
.hdk-funnel,
.hdk-brand-grid {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.hdk-action-row,
.hdk-alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-action-row h3,
.hdk-alert-row h3,
.hdk-brand-card h3,
.hdk-package-copy h3 {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hdk-action-row p,
.hdk-alert-row p,
.hdk-brand-card p,
.hdk-package-copy p {
  margin: 7px 0 0;
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.hdk-action-row__priority,
.hdk-alert-row__severity {
  display: inline-flex;
  color: var(--hdk-tone, var(--hdk-text-muted));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-action-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-action-row__meta span,
.hdk-package-assets a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel);
}

.hdk-action-row__status,
.hdk-alert-row__actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.hdk-action-row button,
.hdk-alert-row button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 850;
}

.hdk-content-package__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
}

.hdk-package-preview {
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel-strong);
}

.hdk-package-preview img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
}

.hdk-package-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.hdk-package-status,
.hdk-postability {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 28%, var(--hdk-border-subtle));
  border-radius: 999px;
  color: var(--hdk-tone, var(--hdk-text-secondary));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-package-link,
.hdk-package-assets a {
  color: var(--hdk-accent);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.hdk-package-copy {
  padding: 12px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-package-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hdk-fact-grid,
.hdk-mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.hdk-fact-grid div,
.hdk-mini-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-fact-grid dt,
.hdk-mini-metrics dt {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-fact-grid dd,
.hdk-mini-metrics dd {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.hdk-brand-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hdk-brand-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-brand-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.hdk-brand-card__head strong {
  color: var(--hdk-tone, var(--hdk-text-secondary));
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-brand-card__blocker {
  padding: 9px;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 12%, var(--hdk-surface-panel));
}

.hdk-channel-matrix__scroll {
  overflow-x: auto;
  padding: 18px;
}

.hdk-channel-table small {
  display: block;
  margin-top: 5px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-funnel-stage {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.hdk-funnel-stage div {
  width: var(--hdk-funnel-width);
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-accent)) 28%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: color-mix(in srgb, var(--hdk-tone, var(--hdk-accent)) 10%, var(--hdk-surface-raised));
}

.hdk-funnel-stage span {
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.hdk-funnel-stage strong {
  color: var(--hdk-tone, var(--hdk-text-primary));
  font-size: 22px;
}

.hdk-funnel-stage p {
  margin: 0;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-operational-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hdk-panel-actions button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 850;
}

.hdk-panel-metrics {
  padding: 18px 18px 0;
}

.hdk-operational-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.hdk-operational-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-operational-row span {
  color: var(--hdk-tone, var(--hdk-text-muted));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-operational-row h3 {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.hdk-operational-row p {
  margin: 7px 0 0;
  color: var(--hdk-text-secondary);
  font-size: 13px;
}

.hdk-operational-row strong {
  color: var(--hdk-text-primary);
  white-space: nowrap;
}

.hdk-advanced-viz {
  min-height: 220px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--hdk-border-subtle);
}

.hdk-advanced-viz span {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 8px;
  height: 190px;
}

.hdk-advanced-viz b,
.hdk-advanced-viz strong {
  overflow: hidden;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-advanced-viz i {
  display: block;
  min-height: 18px;
  height: var(--hdk-viz-value);
  border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--hdk-accent) calc(52% + var(--hdk-viz-index) * 7%), var(--hdk-surface-panel-strong));
}

.hdk-market-explorer-page {
  display: grid;
  gap: var(--hdk-space-section, 16px);
  min-width: 0;
}

.hdk-market-explorer {
  display: grid;
  gap: var(--hdk-space-section, 16px);
  grid-template-columns: minmax(220px, 280px) minmax(460px, 1.25fr) minmax(360px, .9fr);
  min-height: min(820px, calc(100dvh - 140px));
}

.hdk-browser-pane,
.hdk-browser-results,
.hdk-market-detail-panel {
  min-width: 0;
}

.hdk-browser-pane {
  align-content: start;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 14px;
}

.hdk-card__header-row {
  align-items: center;
}

.hdk-status-badge {
  align-self: start;
  background: var(--hdk-surface-panel-strong);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  padding: 5px 8px;
  white-space: nowrap;
}

.hdk-browser-category-list,
.hdk-browser-movers,
.hdk-browser-results {
  align-content: start;
  display: grid;
  gap: 10px;
}

.hdk-browser-category {
  align-items: center;
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 11px;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hdk-browser-category:hover {
  border-color: color-mix(in srgb, var(--hdk-accent) 38%, var(--hdk-border-subtle));
  transform: translateY(-1px);
}

.hdk-browser-category.is-active {
  background: var(--hdk-text-primary);
  border-color: var(--hdk-text-primary);
  color: var(--hdk-surface-page);
}

.hdk-browser-category span {
  min-width: 0;
  overflow: hidden;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-browser-category strong {
  background: color-mix(in srgb, var(--hdk-accent) 12%, transparent);
  border-radius: 999px;
  color: var(--hdk-accent-strong, var(--hdk-accent));
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
}

.hdk-browser-category.is-active strong {
  background: color-mix(in srgb, var(--hdk-surface-page) 16%, transparent);
  color: color-mix(in srgb, var(--hdk-surface-page) 82%, white);
}

.hdk-browser-movers {
  border-top: 1px solid var(--hdk-border-subtle);
  padding-top: 12px;
}

.hdk-section-kicker {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  margin: 0;
  text-transform: uppercase;
}

.hdk-browser-mover {
  align-items: center;
  background: var(--hdk-surface-panel-strong);
  border: 0;
  border-radius: 9px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
  text-align: left;
}

.hdk-browser-mover:hover {
  background: color-mix(in srgb, var(--hdk-accent) 9%, var(--hdk-surface-panel-strong));
}

.hdk-browser-mover span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-positive {
  color: var(--hdk-status-success);
}

.hdk-negative {
  color: var(--hdk-status-error);
}

.hdk-muted-note {
  color: var(--hdk-text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.hdk-search {
  display: grid;
  gap: 6px;
}

.hdk-search span {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hdk-search input {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-primary);
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
}

.hdk-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hdk-topic-chip {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  font-weight: 760;
  min-height: 34px;
  padding: 7px 11px;
}

.hdk-topic-chip.is-active {
  background: var(--hdk-text-primary);
  border-color: var(--hdk-text-primary);
  color: var(--hdk-surface-page);
}

.hdk-market-detail-panel {
  align-self: start;
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--hdk-accent) 24%, transparent), transparent 18rem),
    var(--hdk-surface-inverse, #101412);
  border: 1px solid color-mix(in srgb, white 14%, transparent);
  border-radius: var(--hdk-radius-lg, 12px);
  color: var(--hdk-text-inverse, #fff);
  min-height: 520px;
  overflow: hidden;
  padding: 16px;
  position: sticky;
  top: 14px;
}

.hdk-market-detail-panel .hdk-state {
  background: color-mix(in srgb, white 7%, transparent);
  border-color: color-mix(in srgb, white 14%, transparent);
  color: inherit;
}

.hdk-market-detail-panel .hdk-state p,
.hdk-market-detail-panel .hdk-state span {
  color: color-mix(in srgb, white 66%, transparent);
}

.hdk-quality-graph,
.hdk-premium-chart,
.hdk-premium-market-browser > *,
.hdk-premium-media-workspace,
.hdk-premium-planner > *,
.hdk-premium-drilldown > * {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-lg, 12px);
  box-shadow: var(--hdk-shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
}

.hdk-quality-graph,
.hdk-premium-chart,
.hdk-premium-media-workspace {
  padding: 16px;
}

.hdk-quality-graph__rows {
  display: grid;
  gap: 10px;
}

.hdk-quality-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 0.32fr) minmax(160px, 1fr) 40px;
}

.hdk-quality-row strong,
.hdk-premium-media-workspace h3,
.hdk-premium-planner__drawer h2,
.hdk-premium-drilldown__drawer h2 {
  color: var(--hdk-text-primary);
}

.hdk-quality-row span {
  color: var(--hdk-text-muted);
  display: block;
  font-size: 0.78rem;
  margin-top: 2px;
}

.hdk-quality-row b {
  color: var(--hdk-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hdk-quality-row__bar {
  background: var(--hdk-surface-muted);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.hdk-quality-row__bar i {
  background: linear-gradient(90deg, var(--hdk-accent), color-mix(in srgb, var(--hdk-accent) 48%, var(--hdk-text-primary)));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.hdk-chart-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hdk-chart-toolbar label {
  align-items: center;
  color: var(--hdk-text-muted);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 720;
  gap: 8px;
  text-transform: uppercase;
}

.hdk-chart-toolbar select,
.hdk-premium-planner__drawer input,
.hdk-premium-planner__drawer textarea {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  min-height: 34px;
  padding: 7px 10px;
}

.hdk-premium-chart__svg {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hdk-accent) 5%, transparent), transparent 44%),
    var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-lg, 12px);
  min-height: 280px;
  width: 100%;
}

.hdk-premium-chart .hdk-chart__line {
  fill: none;
  stroke: var(--hdk-series-color, var(--hdk-accent));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.hdk-premium-market-browser {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(190px, 0.58fr) minmax(360px, 1.1fr) minmax(320px, 0.9fr);
}

.hdk-premium-market-browser > * {
  min-width: 0;
  padding: 14px;
}

.hdk-premium-market-browser__categories {
  align-self: start;
  display: grid;
  gap: 8px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-body {
  gap: 8px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-row {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(70px, 0.45fr));
  padding: 11px 12px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-row.is-active {
  border-color: color-mix(in srgb, var(--hdk-accent) 42%, var(--hdk-border-subtle));
  box-shadow: inset 3px 0 0 var(--hdk-accent);
}

.hdk-premium-market-browser__detail {
  align-self: start;
  position: sticky;
  top: 12px;
}

.hdk-premium-market-browser__detail .hdk-premium-chart {
  box-shadow: none;
  margin-top: 12px;
  padding: 12px;
}

.hdk-premium-media-workspace__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr) minmax(240px, 0.7fr);
}

.hdk-premium-media-workspace__grid > article {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-md, 10px);
  min-width: 0;
  padding: 14px;
}

.hdk-premium-media-workspace__checklist {
  grid-column: 1 / -1;
}

.hdk-thumbnail-placeholder {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--hdk-accent) 24%, transparent), transparent 26%),
    linear-gradient(135deg, var(--hdk-surface-muted), var(--hdk-surface-panel));
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-md, 10px);
  color: var(--hdk-text-muted);
  display: flex;
  font-weight: 800;
  justify-content: center;
  margin-bottom: 12px;
}

.hdk-state-line {
  align-items: center;
  border-bottom: 1px solid var(--hdk-border-subtle);
  color: var(--hdk-text-muted);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0;
}

.hdk-state-line strong {
  color: var(--hdk-text-primary);
}

.hdk-premium-planner {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.38fr);
}

.hdk-premium-planner > * {
  min-width: 0;
  padding: 14px;
}

.hdk-calendar-weekdays,
.hdk-calendar-month-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.hdk-calendar-weekdays {
  color: var(--hdk-text-muted);
  font-size: 0.75rem;
  font-weight: 760;
  margin: 12px 0 6px;
  text-align: center;
  text-transform: uppercase;
}

.hdk-calendar-day {
  aspect-ratio: 1 / 0.86;
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 9px;
  text-align: left;
}

.hdk-calendar-day strong {
  color: var(--hdk-text-primary);
  font-size: 0.95rem;
}

.hdk-calendar-day span {
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-calendar-day.is-selected {
  background: color-mix(in srgb, var(--hdk-accent) 12%, var(--hdk-surface-panel));
  border-color: color-mix(in srgb, var(--hdk-accent) 50%, var(--hdk-border-subtle));
}

.hdk-premium-planner__drawer {
  align-self: start;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.hdk-premium-planner__drawer label {
  color: var(--hdk-text-muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 740;
  gap: 6px;
  text-transform: uppercase;
}

.hdk-premium-planner__drawer button,
.hdk-panel-actions button {
  background: var(--hdk-text-primary);
  border: 1px solid var(--hdk-text-primary);
  border-radius: 8px;
  color: var(--hdk-surface-page);
  cursor: pointer;
  font-weight: 780;
  min-height: 36px;
  padding: 8px 12px;
}

.hdk-panel-actions button + button {
  background: var(--hdk-surface-page);
  border-color: var(--hdk-border-subtle);
  color: var(--hdk-text-primary);
}

.hdk-premium-drilldown {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 0.52fr);
}

.hdk-premium-drilldown > * {
  min-width: 0;
  padding: 14px;
}

.hdk-premium-drilldown__drawer {
  align-self: start;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.hdk-research-desk {
  display: grid;
  gap: var(--hdk-space-section);
  min-width: 0;
}

.hdk-research-command {
  display: grid;
  gap: var(--hdk-space-5);
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1fr);
  padding: var(--hdk-space-5);
}

.hdk-research-command h2,
.hdk-research-active h2,
.hdk-research-workboards h2,
.hdk-research-composer h2,
.hdk-research-inspector h2 {
  margin: 0;
}

.hdk-research-command > div:first-child > p:last-child {
  margin-bottom: 0;
  max-width: 72ch;
}

.hdk-research-command__metrics {
  display: grid;
  gap: var(--hdk-space-grid);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hdk-research-command__metrics .hdk-metric,
.hdk-research-inspector-stack .hdk-metric {
  box-shadow: none;
}

.hdk-research-layout {
  align-items: start;
  display: grid;
  gap: var(--hdk-space-section);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.hdk-research-main,
.hdk-research-inspector {
  display: grid;
  gap: var(--hdk-space-section);
  min-width: 0;
}

.hdk-research-navigator,
.hdk-research-composer,
.hdk-research-active,
.hdk-research-workboards,
.hdk-research-inspector-card {
  min-width: 0;
  padding: var(--hdk-space-4);
}

.hdk-research-panel-head,
.hdk-research-active__head,
.hdk-research-active__actions,
.hdk-research-board-tabs,
.hdk-research-filter-row,
.hdk-research-stack-item {
  align-items: center;
  display: flex;
  gap: var(--hdk-space-3);
}

.hdk-research-panel-head,
.hdk-research-active__head,
.hdk-research-stack-item {
  justify-content: space-between;
}

.hdk-research-panel-head span,
.hdk-research-next-card span {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
  font-weight: 820;
  text-transform: uppercase;
}

.hdk-research-panel-head strong {
  display: block;
  margin-top: 3px;
}

.hdk-research-panel-head b {
  background: var(--hdk-surface-panel-strong);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-primary);
  font-size: 0.72rem;
  padding: 5px 8px;
  white-space: nowrap;
}

.hdk-research-project-list {
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--hdk-space-4);
  max-height: none;
  overflow: visible;
  padding-right: 2px;
}

.hdk-research-nav-project,
.hdk-research-filter-row,
.hdk-research-board-tabs button {
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  cursor: pointer;
}

.hdk-research-nav-project {
  background: var(--hdk-surface-raised);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: var(--hdk-space-3);
  text-align: left;
}

.hdk-research-nav-project span,
.hdk-research-nav-project small,
.hdk-research-nav-project b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-research-nav-project small {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
}

.hdk-research-nav-project b {
  color: var(--hdk-text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hdk-research-nav-project.is-selected,
.hdk-research-nav-project:hover,
.hdk-research-board-tabs button.is-active {
  background: color-mix(in srgb, var(--hdk-accent) 10%, var(--hdk-surface-panel));
  border-color: color-mix(in srgb, var(--hdk-accent) 42%, var(--hdk-border-subtle));
}

.hdk-research-filter-stack {
  border-top: 1px solid var(--hdk-border-subtle);
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
  padding-top: var(--hdk-space-4);
}

.hdk-research-filter-row {
  background: transparent;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
}

.hdk-research-filter-row:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hdk-research-project-form {
  display: grid;
  gap: var(--hdk-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.hdk-research-project-form label {
  color: var(--hdk-text-muted);
  display: grid;
  font-size: 0.74rem;
  font-weight: 780;
  gap: 6px;
  min-width: 0;
  text-transform: uppercase;
}

.hdk-research-project-form input {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  min-height: 38px;
  min-width: 0;
  padding: 9px 10px;
}

.hdk-research-project-form button {
  align-self: end;
  justify-self: start;
}

.hdk-research-active__head {
  align-items: flex-start;
}

.hdk-research-active__head p {
  color: var(--hdk-text-secondary);
  margin: var(--hdk-space-2) 0 0;
  max-width: 78ch;
}

.hdk-research-active__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hdk-research-phase-stepper {
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
}

.hdk-research-phase-stepper button {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-muted);
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--hdk-space-2);
  text-align: left;
}

.hdk-research-phase-stepper button.is-active,
.hdk-research-phase-stepper button:hover {
  background: color-mix(in srgb, var(--hdk-accent) 10%, var(--hdk-surface-panel));
  color: var(--hdk-text-primary);
}

.hdk-research-phase-stepper b {
  color: var(--hdk-accent);
  font-size: 0.72rem;
}

.hdk-research-active__grid {
  display: grid;
  gap: var(--hdk-space-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
}

.hdk-research-next-card {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: var(--hdk-space-3);
}

.hdk-research-next-card strong,
.hdk-research-next-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hdk-research-saved-plan {
  grid-column: 1 / -1;
}

.hdk-research-saved-plan em {
  color: var(--hdk-text-muted);
  font-size: 0.75rem;
  font-style: normal;
}

.hdk-research-next-card .hdk-button {
  justify-self: start;
  margin-top: var(--hdk-space-2);
}

.hdk-research-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  margin-bottom: var(--hdk-space-3);
}

.hdk-research-board-tabs {
  border-bottom: 1px solid var(--hdk-border-subtle);
  flex-wrap: wrap;
  margin-top: var(--hdk-space-3);
  padding-bottom: var(--hdk-space-3);
}

.hdk-research-board-tabs button {
  background: var(--hdk-surface-raised);
  min-height: 34px;
  padding: 7px 10px;
}

.hdk-research-board-body {
  margin-top: var(--hdk-space-4);
  min-width: 0;
}

.hdk-research-stack {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-stack-item {
  align-items: flex-start;
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  min-width: 0;
  padding: var(--hdk-space-3);
}

.hdk-research-stack-item div {
  min-width: 0;
}

.hdk-research-stack-item p {
  color: var(--hdk-text-secondary);
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.hdk-research-stack-item b {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.hdk-research-mini-table {
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  max-width: 100%;
  overflow: auto;
}

.hdk-research-mini-table table {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

.hdk-research-mini-table th,
.hdk-research-mini-table td {
  border-bottom: 1px solid var(--hdk-border-subtle);
  color: var(--hdk-text-secondary);
  font-size: 0.82rem;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.hdk-research-mini-table th {
  color: var(--hdk-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hdk-research-inspector-stack {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-inspector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdk-research-action-drawer {
  align-items: stretch;
  background: color-mix(in srgb, var(--hdk-surface-page) 48%, transparent);
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  left: 0;
  padding: var(--hdk-space-4);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 80;
}

.hdk-research-action-drawer__panel {
  box-shadow: var(--hdk-shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: min(560px, 100%);
  overflow: auto;
  width: 100%;
}

.hdk-research-action-form {
  display: grid;
  gap: var(--hdk-space-3);
  padding-bottom: var(--hdk-space-2);
}

.hdk-research-action-form label {
  display: grid;
  gap: 7px;
}

.hdk-research-direction-flow {
  background: color-mix(in srgb, var(--hdk-accent) 5%, var(--hdk-surface-panel));
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  display: grid;
  gap: var(--hdk-space-3);
  padding: var(--hdk-space-3);
}

.hdk-research-direction-flow h3,
.hdk-research-direction-flow p {
  margin: 0;
}

.hdk-research-direction-flow h3 {
  color: var(--hdk-text-primary);
  font-size: 1rem;
}

.hdk-research-direction-flow p {
  color: var(--hdk-text-secondary);
  font-size: 0.86rem;
}

.hdk-research-direction-grid {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-direction-card {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: var(--hdk-space-3);
}

.hdk-research-direction-card:has(input:checked),
.hdk-research-direction-card.is-selected {
  border-color: var(--hdk-accent);
  box-shadow: inset 3px 0 0 var(--hdk-accent);
}

.hdk-research-direction-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hdk-research-direction-card span {
  color: var(--hdk-accent);
}

.hdk-research-direction-card strong {
  color: var(--hdk-text-primary);
  overflow-wrap: anywhere;
}

.hdk-research-direction-card small {
  color: var(--hdk-text-secondary);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.hdk-research-action-form span {
  color: var(--hdk-text-muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.hdk-research-action-form input,
.hdk-research-action-form select,
.hdk-research-action-form textarea {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  font: inherit;
  min-width: 0;
  padding: 10px 11px;
  width: 100%;
}

.hdk-research-action-form textarea {
  min-height: 92px;
  resize: vertical;
}

.hdk-research-action-footer {
  background: var(--hdk-surface-panel);
  border-top: 1px solid var(--hdk-border-subtle);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  justify-content: flex-end;
  margin: var(--hdk-space-2) calc(var(--hdk-space-4) * -1) calc(var(--hdk-space-4) * -1);
  padding: var(--hdk-space-3) max(var(--hdk-space-4), 112px) var(--hdk-space-3) var(--hdk-space-4);
  position: sticky;
}

@media (max-width: 760px) {
  .hdk-action-row,
  .hdk-alert-row,
  .hdk-content-package__grid,
  .hdk-premium-media-workspace__grid {
    grid-template-columns: 1fr;
  }

  .hdk-action-row__status,
  .hdk-alert-row__actions {
    justify-items: start;
  }
}

@media (max-width: 900px) {
  .hdk-shell,
  .hdk-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow: visible;
  }

  .hdk-market-explorer {
    grid-template-columns: 1fr;
  }

  .hdk-sidebar {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hdk-shell.sidebar-collapsed .hdk-brand {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: initial;
  }

  .hdk-shell.sidebar-collapsed .hdk-brand span:not(.hdk-brand__mark),
  .hdk-shell.sidebar-collapsed .hdk-nav-group-title,
  .hdk-shell.sidebar-collapsed .hdk-nav-item > span,
  .hdk-shell.sidebar-collapsed .hdk-sidebar-footer {
    display: initial;
  }

  .hdk-shell.sidebar-collapsed .hdk-nav-item {
    aspect-ratio: auto;
    color: var(--hdk-text-secondary);
    font-size: 13px;
    justify-content: space-between;
    min-height: var(--hdk-sidebar-item-height);
    padding: 9px 11px;
  }

  .hdk-shell.sidebar-collapsed .hdk-nav-item::before {
    content: none;
  }

  .hdk-browser-pane,
  .hdk-market-detail-panel {
    position: static;
  }

  .hdk-main {
    overflow: visible;
    padding: 16px;
  }

  .hdk-header,
  .hdk-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .hdk-donut-layout {
    grid-template-columns: 1fr;
  }

  .hdk-skeleton-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hdk-skeleton-chart {
    grid-column: auto;
  }

  .hdk-gallery-hero,
  .hdk-reference-family-grid,
  .hdk-component-intake__grid,
  .hdk-gallery-preview-grid {
    grid-template-columns: 1fr;
  }

  .hdk-quality-row,
  .hdk-premium-market-browser,
  .hdk-premium-planner,
  .hdk-premium-drilldown,
  .hdk-research-command,
  .hdk-research-layout,
  .hdk-research-project-form,
  .hdk-research-active__grid,
  .hdk-research-command__metrics {
    grid-template-columns: 1fr;
  }

  .hdk-premium-market-browser__detail,
  .hdk-premium-planner__drawer,
  .hdk-premium-drilldown__drawer,
  .hdk-research-navigator,
  .hdk-research-inspector {
    position: static;
  }

  .hdk-premium-market-browser__tape .hdk-market-tape-row {
    grid-template-columns: 1fr 1fr;
  }

  .hdk-research-active__head,
  .hdk-research-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hdk-research-active__actions {
    justify-content: flex-start;
  }

  .hdk-research-phase-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes hdk-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hdk-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}