/* =========================================================
   FILE: 03-dnh-components.css
   ROLE: Reusable global UI components
   RULES:
   - chỉ chứa component generic
   - không chứa Elementor-specific fix
   - không chứa page-specific bridge
   ========================================================= */

/* =========================================================
   01. BUTTON SYSTEM
   ========================================================= */

.dnh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dnh-space-2);

  min-height: 48px;
  padding: 14px 18px;

  border-radius: 12px;
  border: 1px solid transparent;

  font-family: var(--dnh-font-family-base);
  font-size: 14px;
  line-height: 1.15;
  font-weight: var(--dnh-font-weight-semibold);
  text-decoration: none;
  text-align: center;

  cursor: pointer;

  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;

  transition:
    background-color var(--dnh-duration-base) var(--dnh-ease-standard),
    color var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    transform var(--dnh-duration-fast) var(--dnh-ease-standard);
}

.dnh-btn--sm {
  min-height: 40px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.dnh-btn--lg {
  min-height: 52px;
  padding: 16px 20px;
  border-radius: 14px;
}

.dnh-btn--primary {
  background: var(--dnh-color-primary);
  color: var(--dnh-color-dark);
  border-color: var(--dnh-color-primary);
  box-shadow: none;
}

.dnh-btn--primary:hover {
  background: var(--dnh-color-primary-hover);
  border-color: var(--dnh-color-primary-hover);
  color: var(--dnh-color-dark);
}

.dnh-btn--secondary {
  background: var(--dnh-color-surface);
  color: var(--dnh-color-text);
  border-color: var(--dnh-color-border-strong);
  box-shadow: none;
}

.dnh-btn--secondary:hover {
  background: var(--dnh-surface-hover-bg);
  border-color: var(--dnh-color-border-strong);
}

.dnh-btn--ghost {
  background: transparent;
  color: var(--dnh-color-primary);
  border-color: transparent;
  padding-inline: 0;
  min-height: auto;
  border-radius: 0;
  font-size: 13px;
}

.dnh-btn--soft {
  background: var(--dnh-color-primary-soft);
  color: var(--dnh-color-primary);
  border-color: transparent;
}

.dnh-btn--dark {
  background: var(--dnh-color-dark);
  color: var(--dnh-color-text-inverse);
  border-color: var(--dnh-color-dark);
}

/* Anchor button text hardening */
a.dnh-btn.dnh-btn--primary,
a.dnh-btn.dnh-btn--primary:visited,
a.dnh-btn.dnh-btn--primary:hover,
a.dnh-btn.dnh-btn--primary:focus {
  color: var(--dnh-color-dark) !important;
}

a.dnh-btn.dnh-btn--secondary,
a.dnh-btn.dnh-btn--secondary:visited {
  color: var(--dnh-color-text) !important;
}

a.dnh-btn.dnh-btn--ghost,
a.dnh-btn.dnh-btn--ghost:visited,
a.dnh-btn.dnh-btn--ghost:hover,
a.dnh-btn.dnh-btn--ghost:focus {
  color: var(--dnh-color-primary) !important;
}

.is-dark .dnh-btn:focus-visible,
.dnh-on-dark .dnh-btn:focus-visible {
  box-shadow: var(--dnh-focus-ring-dark);
}

/* =========================================================
   02. CARD FOUNDATION
   ========================================================= */

.dnh-card {
  display: grid;
  gap: var(--dnh-space-4);
  padding: var(--dnh-space-5);
  background: var(--dnh-surface-default-bg);
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-lg);
  box-shadow: var(--dnh-shadow-sm);
}

.dnh-card--soft {
  background: var(--dnh-surface-subtle-bg);
  border-color: var(--dnh-surface-subtle-border);
  box-shadow: none;
}

.dnh-card--raised {
  background: var(--dnh-surface-raised-bg);
  border-color: var(--dnh-surface-raised-border);
  box-shadow: var(--dnh-shadow-md);
}

.dnh-card--interactive {
  transition:
    transform var(--dnh-duration-fast) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard);
}

.dnh-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--dnh-shadow-md);
}

.dnh-card--dark {
  background: var(--dnh-surface-dark-bg);
  border-color: var(--dnh-surface-dark-border);
  color: var(--dnh-color-text-inverse);
}

.dnh-card__media {
  min-width: 0;
  overflow: hidden;
  border-radius: calc(var(--dnh-radius-lg) - 4px);
}

.dnh-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--dnh-space-3);
  min-height: 100%;
}

.dnh-card__meta {
  display: grid;
  gap: var(--dnh-space-2);
}

.dnh-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
  margin-top: auto;
}

/* =========================================================
   03. FORM SYSTEM
   ========================================================= */

.dnh-form {
  display: grid;
  gap: var(--dnh-space-5);
}

.dnh-form__row {
  display: grid;
  gap: var(--dnh-space-4);
}

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

.dnh-field {
  display: grid;
  gap: var(--dnh-space-3);
}

.dnh-label {
  font-size: var(--dnh-font-size-small);
  line-height: 1.4;
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-text);
}

.dnh-input,
.dnh-select,
.dnh-textarea {
  width: 100%;
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-md);
  background: var(--dnh-color-surface);
  color: var(--dnh-color-text);
  font-family: var(--dnh-font-family-base);
  font-size: var(--dnh-font-size-body);
  transition:
    border-color var(--dnh-duration-base) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    background-color var(--dnh-duration-base) var(--dnh-ease-standard);
}

.dnh-input,
.dnh-select {
  min-height: var(--dnh-field-height-md);
  padding-inline: calc(var(--dnh-field-pad-x-md) + 2px);
}

.dnh-textarea {
  min-height: 140px;
  padding: var(--dnh-field-pad-x-md);
  resize: vertical;
  border-radius: var(--dnh-radius-sm);
}

.dnh-input::placeholder,
.dnh-textarea::placeholder {
  color: var(--dnh-color-text-muted);
}

.dnh-input:hover,
.dnh-select:hover,
.dnh-textarea:hover {
  background: var(--dnh-surface-hover-bg);
}

.dnh-input:focus,
.dnh-select:focus,
.dnh-textarea:focus {
  outline: none;
  border-color: var(--dnh-color-primary);
  box-shadow: var(--dnh-focus-ring-light);
}

.dnh-help {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-soft);
}

.dnh-error {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-error);
}

.dnh-field.is-error .dnh-input,
.dnh-field.is-error .dnh-select,
.dnh-field.is-error .dnh-textarea {
  border-color: var(--dnh-color-error);
  box-shadow: 0 0 0 1px var(--dnh-color-error);
}

.dnh-field.is-disabled .dnh-input,
.dnh-field.is-disabled .dnh-select,
.dnh-field.is-disabled .dnh-textarea,
.dnh-input:disabled,
.dnh-select:disabled,
.dnh-textarea:disabled {
  background: var(--dnh-surface-subtle-bg);
  color: var(--dnh-color-text-muted);
  border-color: var(--dnh-color-border);
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .dnh-form__row--2 {
    grid-template-columns: 1fr;
  }
}

.dnh-form--card {
  padding: var(--dnh-space-5);
  background: var(--dnh-surface-default-bg);
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-lg);
  box-shadow: var(--dnh-shadow-sm);
}

.dnh-form--trust {
  background: var(--dnh-surface-trust-bg);
  border-color: var(--dnh-surface-trust-border);
}

.dnh-form--concierge {
  background: var(--dnh-surface-concierge-bg);
  border-color: var(--dnh-surface-concierge-border);
}

/* =========================================================
   04. MODAL SYSTEM
   ========================================================= */

.dnh-modal {
  position: fixed;
  inset: 0;
  z-index: var(--dnh-z-modal);
  display: none;
  padding: var(--dnh-space-4);
  background: var(--dnh-color-overlay);
}

.dnh-modal.is-open {
  display: grid;
  place-items: center;
}

.dnh-modal__dialog {
  width: min(100%, var(--dnh-modal-width-md));
  max-height: min(88vh, 960px);
  overflow: auto;
  background: var(--dnh-color-surface);
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-xl);
  box-shadow: var(--dnh-shadow-lg);
}

.dnh-modal__inner {
  display: grid;
  gap: var(--dnh-space-5);
  padding: var(--dnh-modal-pad-md);
}

.dnh-modal__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--dnh-space-3);
}

.dnh-modal__header > *:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.dnh-modal__body {
  display: grid;
  gap: var(--dnh-space-5);
}

.dnh-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
  justify-content: flex-end;
}

.dnh-modal__close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--dnh-color-border);
  border-radius: 10px;
  background: var(--dnh-surface-subtle-bg);
  color: var(--dnh-color-text-soft);
  font-size: 20px;
  line-height: 1;
  font-weight: var(--dnh-font-weight-semibold);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard),
    color var(--dnh-duration-base) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    transform var(--dnh-duration-fast) var(--dnh-ease-standard);
}

.dnh-modal__close:hover {
  background: var(--dnh-surface-hover-bg);
  border-color: var(--dnh-color-border-strong);
  color: var(--dnh-color-text);
}

.dnh-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--dnh-focus-ring-light);
}

.dnh-modal__close:disabled,
.dnh-modal__close.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.dnh-modal--sm .dnh-modal__dialog {
  width: min(100%, var(--dnh-modal-width-sm));
}

.dnh-modal--lg .dnh-modal__dialog {
  width: min(100%, var(--dnh-modal-width-lg));
}

.dnh-modal--auth .dnh-modal__dialog,
.dnh-modal--inquiry .dnh-modal__dialog,
.dnh-modal--response .dnh-modal__dialog,
.dnh-modal--confirm .dnh-modal__dialog {
  background: var(--dnh-surface-default-bg);
}

@media (max-width: 767px) {
  .dnh-modal {
    padding: var(--dnh-space-3);
    align-items: end;
  }

  .dnh-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--dnh-radius-lg) var(--dnh-radius-lg) 0 0;
  }

  .dnh-modal__inner {
    padding: var(--dnh-modal-pad-sm);
  }
}

/* =========================================================
   05. ALERT / RESPONSE SYSTEM
   ========================================================= */

.dnh-alert,
.dnh-response {
  display: grid;
  gap: var(--dnh-space-2);
  padding: var(--dnh-space-4);
  border-radius: var(--dnh-radius-md);
  border: var(--dnh-border-1);
}

.dnh-alert--success,
.dnh-response--success {
  background: var(--dnh-color-success-soft);
  border-color: rgba(47, 107, 79, 0.18);
}

.dnh-alert--warning,
.dnh-response--warning {
  background: var(--dnh-color-warning-soft);
  border-color: rgba(154, 106, 23, 0.18);
}

.dnh-alert--error,
.dnh-response--error {
  background: var(--dnh-color-error-soft);
  border-color: rgba(163, 58, 50, 0.18);
}

.dnh-alert__title,
.dnh-response__title {
  font-size: var(--dnh-font-size-small);
  line-height: 1.4;
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-text);
}

.dnh-alert__text,
.dnh-response__text {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-soft);
}

/* =========================================================
   06. EMPTY / SKELETON / LOADING
   ========================================================= */

.dnh-empty {
  display: grid;
  gap: var(--dnh-space-3);
  padding: var(--dnh-space-6);
  text-align: center;
  background: var(--dnh-surface-subtle-bg);
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-lg);
}

.dnh-empty__title {
  font-size: var(--dnh-font-size-h5);
  line-height: 1.3;
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-text);
}

.dnh-empty__text {
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  color: var(--dnh-color-text-soft);
}

.dnh-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #f0ebe4 0%,
    #f7f3ee 50%,
    #f0ebe4 100%
  );
  background-size: 200% 100%;
  border-radius: var(--dnh-radius-md);
  animation: dnh-skeleton-loading 1.4s infinite linear;
}

@keyframes dnh-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   07. DRAWER / TOAST SYSTEM
   ========================================================= */

.dnh-drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: min(100%, 420px);
  z-index: var(--dnh-z-overlay);
  background: var(--dnh-color-surface);
  border-left: var(--dnh-border-1);
  box-shadow: var(--dnh-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dnh-duration-base) var(--dnh-ease-emphasis);
}

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

.dnh-drawer__inner {
  display: grid;
  gap: var(--dnh-space-5);
  padding: var(--dnh-space-5);
}

.dnh-toast {
  position: fixed;
  right: var(--dnh-space-4);
  bottom: var(--dnh-space-4);
  z-index: var(--dnh-z-toast);
  max-width: 360px;
  padding: var(--dnh-space-4);
  background: var(--dnh-color-surface);
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-md);
  box-shadow: var(--dnh-shadow-md);
}


/* =========================================================
   08. LISTING SHELLS
   ========================================================= */

.dnh-card--listing {
  gap: var(--dnh-space-4);
}

.dnh-listing-media {
  overflow: hidden;
  border-radius: calc(var(--dnh-radius-lg) - 4px);
}

.dnh-listing-body {
  display: flex;
  flex-direction: column;
  gap: var(--dnh-space-3);
  min-height: 100%;
}

.dnh-listing-head {
  display: grid;
  gap: var(--dnh-space-2);
}

.dnh-listing-price {
  display: grid;
  gap: var(--dnh-space-1);
}

.dnh-listing-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
}

.dnh-property-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-4);
  align-items: center;
}

.dnh-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
  margin-top: auto;
}

.dnh-listing-location,
.dnh-listing-note {
  color: var(--dnh-color-text-soft);
}

/* =========================================================
   09. TRUST / CONCIERGE / BUSINESS SHELLS
   ========================================================= */

.dnh-card--trust {
  background: var(--dnh-surface-trust-bg);
  border-color: var(--dnh-surface-trust-border);
  box-shadow: none;
}

.dnh-card--feature {
  background: var(--dnh-surface-default-bg);
}

.dnh-card--compact {
  padding: var(--dnh-space-4);
  gap: var(--dnh-space-3);
}

.dnh-trust-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
}

.dnh-agent-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--dnh-space-3);
  align-items: center;
}

.dnh-contact-mini {
  display: grid;
  gap: var(--dnh-space-2);
}

.dnh-concierge-card {
  display: grid;
  gap: var(--dnh-space-4);
  padding: var(--dnh-space-5);
  background: var(--dnh-surface-concierge-bg);
  border: 1px solid var(--dnh-surface-concierge-border);
  border-radius: var(--dnh-radius-lg);
  box-shadow: var(--dnh-shadow-sm);
}

/* =========================================================
   10. META / STAT / PROOF ROWS
   ========================================================= */

.dnh-mini-meta-grid {
  display: grid;
  gap: var(--dnh-space-3);
}

.dnh-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-2);
  align-items: center;
  color: var(--dnh-color-text-soft);
}

.dnh-stat-grid {
  display: grid;
  gap: var(--dnh-gap-grid-md);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.dnh-stat {
  display: grid;
  gap: var(--dnh-space-2);
}

/* =========================================================
   11. TABS / ACCORDION / FAQ
   ========================================================= */

.dnh-tabs {
  display: grid;
  gap: var(--dnh-space-4);
}

.dnh-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
}

.dnh-tabs__btn {
  appearance: none;
  border: var(--dnh-border-1);
  background: var(--dnh-color-surface);
  color: var(--dnh-color-text);
  border-radius: var(--dnh-radius-pill);
  min-height: var(--dnh-btn-height-sm);
  padding-inline: var(--dnh-btn-pad-x-sm);
  font-size: var(--dnh-font-size-small);
  font-weight: var(--dnh-font-weight-medium);
  cursor: pointer;
}

.dnh-tabs__btn.is-active {
  background: var(--dnh-color-primary-soft);
  color: var(--dnh-color-primary);
  border-color: transparent;
}

.dnh-tabs__panel {
  display: none;
}

.dnh-tabs__panel.is-active {
  display: block;
}

.dnh-accordion {
  display: grid;
  gap: var(--dnh-space-3);
}

.dnh-accordion__item {
  border: var(--dnh-border-1);
  border-radius: var(--dnh-radius-lg);
  background: var(--dnh-color-surface);
}

.dnh-accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--dnh-space-3);
  align-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--dnh-space-4);
  text-align: left;
  cursor: pointer;
}

.dnh-accordion__content {
  display: none;
  padding: 0 var(--dnh-space-4) var(--dnh-space-4);
}

.dnh-accordion__item.is-open .dnh-accordion__content {
  display: block;
}

.dnh-faq {
  display: grid;
  gap: var(--dnh-space-3);
}

/* =========================================================
   12. DARK / PREMIUM CONTROLLED VARIANTS
   ========================================================= */

.is-dark .dnh-card,
.dnh-on-dark .dnh-card {
  background: var(--dnh-surface-dark-bg);
  border-color: var(--dnh-surface-dark-border);
  color: var(--dnh-color-text-inverse);
}

.is-premium .dnh-card,
.dnh-card.is-premium {
  background: var(--dnh-surface-premium-bg);
  border-color: var(--dnh-surface-premium-border);
}


/* =========================================================
   PROMOTED: HOME WAVE 1 GENERIC COMPONENTS
   Target:
   - CTA chính / CTA phụ
   - role cards
   - data cards
   - dark CTA band
   - pulse feed shell
   - elevated generic cards
   Reason:
   - gom promoted block cuối file về 1 cụm rõ ràng
   - bổ sung component contracts còn thiếu cho HOME
   - vẫn giữ 03 là generic component layer, không ôm business owner
   ========================================================= */

.dnh-btn--block {
  display: inline-flex;
  width: 100%;
}

.dnh-btn--solid-primary {
  background-color: var(--dnh-color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--dnh-color-primary) !important;
  box-shadow: none !important;
}

.dnh-btn--solid-primary:hover {
  background-color: var(--dnh-color-primary-hover) !important;
  border-color: var(--dnh-color-primary-hover) !important;
  color: #FFFFFF !important;
}

.dnh-btn--outline-primary {
  background-color: transparent;
  color: var(--dnh-color-primary);
  border-color: var(--dnh-color-primary);
}

.dnh-btn--outline-primary:hover {
  background-color: var(--dnh-color-primary-soft);
  color: var(--dnh-color-primary);
}

a.dnh-btn.dnh-btn--outline-primary,
a.dnh-btn.dnh-btn--outline-primary:visited,
a.dnh-btn.dnh-btn--outline-primary:hover,
a.dnh-btn.dnh-btn--outline-primary:focus {
  color: var(--dnh-color-primary) !important;
}

a.dnh-btn.dnh-btn--solid-primary,
a.dnh-btn.dnh-btn--solid-primary:visited,
a.dnh-btn.dnh-btn--solid-primary:hover,
a.dnh-btn.dnh-btn--solid-primary:focus {
  color: #FFFFFF !important;
}

.dnh-card--elevated {
  background-color: var(--dnh-color-surface);
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: var(--dnh-radius-lg);
  padding: var(--dnh-space-8, 32px) var(--dnh-space-6, 24px);
  box-shadow: var(--dnh-shadow-luxury);
  transition:
    transform var(--dnh-duration-fast) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard);
}

.dnh-card--elevated:hover {
  transform: translateY(-4px);
  box-shadow: var(--dnh-shadow-luxury-hover);
  border-color: var(--dnh-color-primary);
}

.dnh-card--role {
  background: var(--dnh-color-surface);
  border: 1px solid var(--dnh-color-border);
  border-radius: var(--dnh-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--dnh-space-4);
  transition:
    transform var(--dnh-duration-fast) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard);
}

.dnh-card--role:hover {
  transform: translateY(-4px);
  box-shadow: var(--dnh-shadow-md);
  border-color: var(--dnh-color-primary);
}

.dnh-card--data {
  background: var(--dnh-color-surface);
  border: 1px solid var(--dnh-color-border);
  border-radius: var(--dnh-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dnh-duration-fast) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard);
}

.dnh-card--data:hover {
  transform: translateY(-4px);
  box-shadow: var(--dnh-shadow-md);
  border-color: var(--dnh-color-primary);
}

.dnh-card__content {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dnh-card__content > a:last-child,
.dnh-card__content > .dnh-btn:last-child {
  margin-top: auto;
}

.dnh-card__media-placeholder {
  background-color: var(--dnh-color-surface-alt);
  width: 100%;
  height: 220px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dnh-color-text-muted);
  font-size: 12px;
}

.dnh-card--reason {
  border-top: 2px solid var(--dnh-color-primary);
  padding-top: 24px;
}

.dnh-card--dark-panel {
  display: grid;
  gap: 24px;
  background: var(--dnh-color-dark);
  color: var(--dnh-color-text-inverse);
  padding: 40px;
  border-radius: var(--dnh-radius-md);
  border: 1px solid var(--dnh-surface-dark-border);
}

.dnh-card--analysis {
  background: var(--dnh-color-surface);
  border: 1px solid var(--dnh-color-border);
  border-radius: var(--dnh-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}

.dnh-card__analysis-media {
  width: 40%;
  min-height: 260px;
  background: var(--dnh-color-surface-alt);
  border-radius: var(--dnh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dnh-color-text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.dnh-skeleton-card {
  background: linear-gradient(110deg, rgba(236, 236, 236, 0.4) 8%, rgba(245, 245, 245, 0.6) 18%, rgba(236, 236, 236, 0.4) 33%);
  background-size: 200% 100%;
  border-radius: var(--dnh-radius-lg);
  border: 1px solid rgba(181, 144, 36, 0.15);
  min-height: 280px;
  animation: 1.5s dnh-shine linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes dnh-shine {
  to { background-position-x: -200%; }
}

.dnh-cta-band {
  display: grid;
  gap: var(--dnh-space-5);
  padding: 80px 40px;
  border-radius: var(--dnh-radius-lg);
  background: var(--dnh-color-text);
  border: 1px solid var(--dnh-surface-dark-border);
  box-shadow: var(--dnh-shadow-md);
  color: var(--dnh-color-text-inverse);
}

.dnh-cta-band__head {
  display: grid;
  gap: var(--dnh-space-3);
}

.dnh-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
  justify-content: center;
}

.dnh-cta-band__actions > * {
  min-width: 0;
  max-width: 100%;
}

.dnh-pulse-feed {
  display: grid;
  gap: 36px;
}

.dnh-pulse-item {
  display: grid;
  gap: 0;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.dnh-pulse-item:hover {
  transform: translateX(8px);
}

.dnh-pulse-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-2);
  align-items: center;
  margin-bottom: 12px;
}

.dnh-pulse-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
}

@media (max-width: 767px) {
  .dnh-cta-band {
    padding: 60px 24px;
    gap: var(--dnh-space-4);
  }

  .dnh-cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dnh-cta-band__actions .dnh-btn {
    width: 100%;
  }

  .dnh-card--analysis {
    flex-direction: column;
  }

  .dnh-card__analysis-media {
    width: 100%;
  }
}