@layer components {
/* ========================================================================
   * Component: Alert
   * ======================================================================== */
.dig-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  border-radius: var(--dig-radius-lg);
  border: 1px solid var(--dig-color-info-border);
  background-color: var(--dig-color-info-bg);
  color: var(--dig-color-info-text);
}
.dig-alert--success {
  background-color: var(--dig-color-success-bg);
  border-color: var(--dig-color-success-border);
  color: var(--dig-color-success-text);
}
.dig-alert--warning {
  background-color: var(--dig-color-warning-bg);
  border-color: var(--dig-color-warning-border);
  color: var(--dig-color-warning-text);
}
.dig-alert--danger {
  background-color: var(--dig-color-danger-bg);
  border-color: var(--dig-color-danger-border);
  color: var(--dig-color-danger-text);
}

.dig-alert__icon {
  flex-shrink: 0;
  margin-top: 2px; /* Small adjustment for better visual alignment */
}
.dig-alert__icon .dashicons {
  color: inherit;
}

.dig-alert__message {
  flex-grow: 1;
  line-height: 1.5;
}
.dig-alert__message > *:first-child {
  margin-top: 0;
}
.dig-alert__message > *:last-child {
  margin-bottom: 0;
}

.dig-alert__actions {
  margin-left: auto; /* Pushes the close button to the far right */
}
.dig-alert__close-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--dig-transition-fast);
}
.dig-alert__close-btn:hover {
  opacity: 1;
}

}
@layer components {
/*
 * UCA Component: d1:collection (v2.0 - UI Polished & Icon-driven)
 * Base styles for the smart repeater component.
 */
.dig-collection__rows-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--dig-spacing-md);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-lg);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg-alt);
}
.dig-collection__row {
  display: flex;
  align-items: center; /* Vertically align controls with content */
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-md);
  transition: box-shadow var(--dig-transition-fast),
    transform var(--dig-transition-fast);
}
.dig-collection__row.sortable-ghost {
  opacity: 0.4;
  background: var(--dig-color-primary-bg);
}
.dig-collection__row.sortable-chosen {
  box-shadow: var(--dig-shadow-lg);
  transform: scale(1.02);
}
.dig-collection__row-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dig-spacing-md);
}
.dig-collection__row-controls {
  display: flex;
  align-items: center;
  gap: var(--dig-spacing-xs);
}
.dig-collection__drag-handle,
.dig-collection__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* Make border transparent by default */
  background-color: transparent; /* Make background transparent */
  border-radius: var(--dig-radius-sm);
  padding: var(--dig-spacing-xs);
  cursor: pointer;
  transition: background-color var(--dig-transition-fast),
    color var(--dig-transition-fast);
  color: var(--dig-color-text-muted); /* Muted color for icons */
}

.dig-collection__drag-handle {
  cursor: move;
}
.dig-collection__drag-handle:hover {
  background-color: var(--dig-color-bg-alt);
  color: var(--dig-color-text);
}

/* Specific styling for the remove button */
.dig-collection__remove-btn:hover {
  background-color: var(--dig-color-danger-bg);
  color: var(--dig-color-danger);
}

.dig-collection__actions {
  margin-top: var(--dig-spacing-md);
}

/* Apply this class to the container via _modifiers in JSON */
.dig-collection--readonly .dig-collection__drag-handle,
.dig-collection--readonly .dig-collection__remove-btn {
  display: none !important; /* Force hide controls */
}

.dig-collection--readonly .dig-collection__rows-wrapper {
  background-color: transparent;
  border: none;
  padding: 0;
}

.dig-collection--readonly .dig-collection__row {
  background-color: #fff;
  border: 1px solid var(--dig-color-border);
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dig-collection--readonly .dig-collection__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--dig-color-secondary);
}

}
@layer components {
/* === Password Component - Enterprise Grade Styles === */

.dig-password-field-wrapper .dig-confirmation-group {
  margin-top: var(--dig-spacing-md);
}

/* Strength Meter Enhancements */
.dig-strength-meter {
  margin-top: var(--dig-spacing-xs);
  background-color: var(--dig-color-bg-alt);
  border-radius: var(--dig-radius-sm);
  overflow: hidden;
  transition: all 0.3s ease;
}

.dig-password-field-wrapper.has-weak-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-danger);
}

.dig-password-field-wrapper.has-strong-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-success);
}

.dig-strength-meter-bar {
  height: 6px;
  width: 0%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--dig-color-border);
  transform-origin: left;
}

.dig-strength-meter-bar.is-strength-1 {
  background-color: var(--dig-color-danger);
  width: 25%;
}

.dig-strength-meter-bar.is-strength-2 {
  background-color: var(--dig-color-warning);
  width: 50%;
}

.dig-strength-meter-bar.is-strength-3 {
  background-color: var(--dig-color-info);
  width: 75%;
}

.dig-strength-meter-bar.is-strength-4 {
  background-color: var(--dig-color-success);
  width: 100%;
}

.dig-strength-meter-text {
  font-size: var(--dig-font-size-small);
  color: var(--dig-color-text-muted);
  padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
  margin: 0;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Toggle Button Excellence */
.dig-icon-button.dig-password-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--dig-spacing-xs);
  color: var(--dig-color-text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dig-radius-sm);
  position: relative;
  overflow: hidden;
}

.dig-icon-button.dig-password-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}

.dig-icon-button.dig-password-toggle:hover::before {
  opacity: 0.1;
}

.dig-icon-button.dig-password-toggle:focus {
  outline: 2px solid var(--dig-color-primary);
  outline-offset: 1px;
}

.dig-icon-button.dig-password-toggle:hover {
  color: var(--dig-color-primary);
  transform: translateY(-1px);
}

.dig-icon-button.dig-password-toggle:active {
  transform: translateY(0);
}

/* Dashicon Perfection */
.dig-password-toggle-icon {
  font-family: "dashicons";
  font-size: 20px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.dig-icon-button.dig-password-toggle:hover .dig-password-toggle-icon {
  transform: scale(1.1);
}

.dig-password-toggle-icon.is-visible::before {
  content: "\f177";
}

.dig-password-toggle-icon.is-hidden::before {
  content: "\f530";
}

@supports not (font-family: "dashicons") {
  .dig-password-toggle-icon {
    font-family: system-ui, sans-serif;
    font-size: 18px;
  }
}

/* Focus indicators for accessibility */
.dig-password-field-wrapper:focus-within {
  position: relative;
}

/* Responsive considerations */
@media (max-width: 768px) {
  .dig-password-toggle-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .dig-icon-button.dig-password-toggle {
    padding: var(--dig-spacing-xxs);
  }
}

}
@layer components {
/* Component: App Sidebar */

.d1-app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--dig-color-bg-alt);
  border-right: 1px solid var(--dig-color-border);
  display: flex;
  flex-direction: column;
}

.d1-sidebar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--dig-color-border);
}

.d1-sidebar-nav {
  padding: 1.5rem 1rem;
  flex-grow: 1;
  overflow-y: auto;
}

.d1-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--dig-color-border);
}

.d1-sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d1-sidebar-nav-item {
  margin-bottom: 0.5rem;
}

.d1-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--dig-color-text-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border-left: 3px solid transparent;
}

.d1-sidebar-link:hover,
.d1-sidebar-link.active {
  background-color: rgba(37, 209, 219, 0.1);
  color: var(--dig-color-primary);
  border-left-color: var(--dig-color-primary);
}

.d1-sidebar-link__icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.d1-sidebar-link__label {
  font-weight: 500;
}

}
@layer components {
/* 
 * ==========================================
 * COMPONENT: Spinner
 * ==========================================
 */

.dig-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s;
}

.dig-spinner-icon {
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--dig-color-border);
  border-top-color: var(--dig-color-primary);
  border-radius: 50%;
  animation: dig-spin 1s linear infinite;
}

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

}
@layer components {
/*
 * Component: Intelligence Preview
 * Representative signal patterns, not a live feed.
 */

@layer components {
  .dig-intelligence-preview {
    position: relative;
    overflow: hidden;

    margin-top: clamp(1rem, 2vw, 2rem);
    padding-block: clamp(3rem, 5vw, 4.5rem);

    background: #020817;
    color: #e6edf3;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .dig-intelligence-preview > .dig-container {
    position: relative;
    z-index: 1;
  }

  .dig-preview-header {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(20rem, 32rem);
    align-items: end;
    gap: 1.25rem 3rem;

    margin-bottom: 2rem;
  }

  .dig-preview-meta {
    grid-column: 1 / -1;

    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;

    color: #8ea7ba;
    font-family: var(--dig-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .dig-preview-marker {
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;

    background: #25d1db;
    border-radius: 1px;
  }

  .dig-preview-title {
    margin: 0;

    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-align: left;
  }

  .dig-preview-description {
    max-width: 32rem;
    margin: 0;

    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: left;
  }

  .dig-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dig-signal-card {
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    padding: clamp(1.5rem, 3vw, 2rem);

    background: #07101f;
    border: 0;
    border-radius: 0;
  }

  .dig-signal-card:hover {
    background: #0a1526;
  }

  .dig-signal-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 2.5rem;
  }

  .dig-signal-index {
    color: #667b8e;
    font-family: var(--dig-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .dig-signal-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    color: #25d1db;
    background: rgba(37, 209, 219, 0.08);
    border: 1px solid rgba(37, 209, 219, 0.12);
    border-radius: 4px;
  }

  .dig-signal-icon {
    font-size: 1.1rem;
  }

  .dig-signal-title {
    margin: 0 0 0.75rem;

    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .dig-signal-text {
    max-width: 28rem;
    margin: 0;

    color: #94a3b8;
    font-size: 0.925rem;
    line-height: 1.65;
  }

  @media (max-width: 900px) {
    .dig-preview-header {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .dig-signal-grid {
      grid-template-columns: 1fr;
    }

    .dig-signal-card {
      min-height: auto;
    }

    .dig-signal-card__meta {
      margin-bottom: 1.75rem;
    }
  }

  @media (max-width: 680px) {
    .dig-intelligence-preview {
      margin-top: 0.75rem;
      padding-block: 2.75rem;
    }
  }
}

}
@layer components {
@layer components {
  .dig-cta-strip {
    background: var(--dig-color-primary);
    color: #ffffff;
  }

  .dig-cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;

    padding-block: clamp(2.5rem, 5vw, 4rem);
  }

  .dig-cta-strip__copy {
    max-width: 52rem;
  }

  .dig-cta-strip__title {
    margin: 0 0 0.65rem;

    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  .dig-cta-strip__subtitle {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .dig-cta-strip__action {
    flex: 0 0 auto;
  }

  @media (max-width: 760px) {
    .dig-cta-strip__inner {
      align-items: flex-start;
      flex-direction: column;
      gap: 1.5rem;
    }
  }
}

}
@layer components {
@layer components {
  .dig-proof-strip {
    border-bottom: 1px solid var(--dig-color-border);
    background-color: var(--dig-color-bg-alt);
  }

  .dig-status-block {
    min-width: 200px;
  }

  .dig-status-header__icon {
    margin-right: 0.375rem;
    color: var(--dig-color-secondary);
    font-size: 0.875rem;
    animation: dig-pulse-text 2s infinite;
  }

  .dig-proof-item {
    max-width: 300px;
  }

  .dig-proof-description {
    line-height: 1.5;
    margin: 0;
    padding-left: 2rem;
  }

  .dig-dot-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--dig-color-success, #10b981);
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: dig-pulse-green 2s infinite;
  }

  .dig-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: color-mix(
      in srgb,
      var(--dig-color-secondary) 14%,
      transparent
    );
    color: var(--dig-color-secondary);
    border-radius: 999px;
    flex-shrink: 0;
  }

  .dig-icon-circle__icon {
    font-size: 0.875rem;
  }

  @keyframes dig-pulse-green {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
      transform: scale(1);
      box-shadow: 0 0 0 0.375rem rgba(16, 185, 129, 0);
    }

    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }

  @keyframes dig-pulse-text {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 1;
    }
  }

  @media (max-width: 768px) {
    .dig-mb-md-mobile {
      margin-bottom: 1.5rem;
      width: 100%;
      border-bottom: 1px solid var(--dig-color-border);
      padding-bottom: 1rem;
    }

    .dig-justify-end {
      justify-content: flex-start;
    }

    .dig-proof-item {
      max-width: 100%;
      margin-bottom: 1rem;
    }
  }
}

}
@layer components {
@layer components {
  .dig-trust-grid {
    padding-block: clamp(3.5rem, 6vw, 5rem);

    background: var(--dig-color-bg-alt);
    border-top: 1px solid var(--dig-color-border);
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-trust-grid__header {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(20rem, 34rem);
    align-items: end;
    gap: 1rem 3rem;

    margin-bottom: 2rem;
  }

  .dig-trust-grid__eyebrow {
    grid-column: 1 / -1;

    margin: 0;

    color: var(--dig-color-text-muted);
    font-family: var(--dig-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .dig-trust-grid__title {
    margin: 0;

    color: var(--dig-color-text);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .dig-trust-grid__subtitle {
    margin: 0;

    color: var(--dig-color-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .dig-trust-grid__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1px;

    background: var(--dig-color-border);
    border: 1px solid var(--dig-color-border);
  }

  .dig-trust-item {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--dig-color-bg-alt);
  }

  .dig-trust-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 2rem;
  }

  .dig-trust-item__index {
    color: var(--dig-color-text-muted);
    font-family: var(--dig-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .dig-trust-item__icon {
    color: var(--dig-color-secondary);
    font-size: 1rem;
  }

  .dig-trust-item__title {
    margin: 0 0 1rem;

    color: var(--dig-color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .dig-trust-list {
    display: grid;
    gap: 0.65rem;

    margin: 0;
    padding: 0;

    list-style: none;
  }

  .dig-trust-list__item {
    display: grid;
    grid-template-columns: 0.45rem minmax(0, 1fr);
    gap: 0.55rem;

    color: var(--dig-color-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .dig-trust-list__bullet {
    width: 0.3rem;
    height: 0.3rem;
    margin-top: 0.45rem;

    background: var(--dig-color-success);
    border-radius: 50%;
  }

  .dig-trust-item__microcopy {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;

    color: var(--dig-color-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;

    border-top: 1px solid var(--dig-color-border);
  }

  .dig-trust-footer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    max-width: 54rem;
    margin: 2rem auto 0;
    padding-top: 1.25rem;

    border-top: 1px solid var(--dig-color-border);
  }

  .dig-trust-footer__icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;

    color: var(--dig-color-text-muted);
    font-size: 0.9rem;
  }

  .dig-trust-footer__note {
    margin: 0;

    color: var(--dig-color-text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
  }

  @media (max-width: 900px) {
    .dig-trust-grid__header {
      grid-template-columns: 1fr;
    }

    .dig-trust-grid__items {
      grid-template-columns: 1fr;
    }
  }
}

}
@layer components {
@layer components {
  .dig-process-steps {
    padding-block: clamp(3.5rem, 6vw, 5rem);

    background: #ffffff;
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-process-steps__header {
    margin-bottom: 2rem;
  }

  .dig-process-steps__eyebrow {
    margin: 0 0 0.75rem;

    color: var(--dig-color-text-muted);
    font-family: var(--dig-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .dig-process-steps__heading {
    margin: 0;

    color: var(--dig-color-text);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .dig-process-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1px;
    margin: 0;
    padding: 0;

    background: var(--dig-color-border);
    border: 1px solid var(--dig-color-border);
    list-style: none;
  }

  .dig-process-steps .dig-step {
    min-height: 14rem;
    padding: clamp(1.5rem, 3vw, 2rem);

    background: #ffffff;
  }

  .dig-process-steps .dig-step-number {
    display: block;
    margin-bottom: 2rem;

    color: var(--dig-color-secondary);
    font-family: var(--dig-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
  }

  .dig-process-steps .dig-step-title {
    margin: 0 0 0.75rem;

    color: var(--dig-color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .dig-process-steps .dig-step-text {
    max-width: 26rem;
    margin: 0;

    color: var(--dig-color-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
  }

  @media (max-width: 900px) {
    .dig-process-steps__grid {
      grid-template-columns: 1fr;
    }

    .dig-process-steps .dig-step {
      min-height: auto;
    }

    .dig-process-steps .dig-step-number {
      margin-bottom: 1.5rem;
    }
  }
}

}
@layer components {
@layer components {
  .dig-admin-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .dig-admin-title__icon {
    font-size: 1.3em;
    color: currentColor;
  }

  .dig-admin-main-card {
    margin-top: 20px;
    padding: 20px;
  }
}

}
@layer components {
@layer components {
  .dig-integrations-hub__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .dig-integrations-hub__title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .dig-integrations-hub__description {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .dig-integrations-hub__filters {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .dig-integrations-hub__search {
    position: relative;
  }

  .dig-integrations-hub__search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1rem;
    pointer-events: none;
  }

  .dig-integrations-hub__search-input {
    padding-left: 2rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 250px;
  }

  .dig-integrations-hub__select {
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .dig-integration-card {
    text-decoration: none;
    color: inherit;
  }

  .dig-integration-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 2rem;
  }

  .dig-integration-card__logo {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .dig-integration-card__logo-img {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .dig-integration-card__fallback-icon {
    font-size: 2.5rem;
    color: #ccc;
  }

  .dig-integration-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .dig-integration-card__description {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
    color: #666;
  }

  .dig-integration-card__footer {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dig-integration-card__status {
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .dig-integration-card__status-icon {
    font-size: 0.875rem;
  }

  .dig-integration-card__status--inactive {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
  }

  .dig-integrations-hub__no-results {
    display: none;
    text-align: center;
    padding: 4rem;
    color: #666;
  }

  .dig-integrations-hub__no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ccc;
  }

  .dig-integration-card--active .dig-badge-success {
    background-color: var(--dig-color-success-bg);
    color: var(--dig-color-success-text);
    border: 1px solid var(--dig-color-success-border);
  }
}

}
@layer components {
@layer components {
  .digentus-one-admin-page .dig-status-card {
    background: #ffffff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 1px 12px;
    margin-top: 20px;
  }

  .digentus-one-admin-page .dig-status-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2em;
  }

  .dig-admin-heading-icon {
    color: #2271b1;
    font-size: 1rem;
  }

  .dig-admin-button-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
  }

  .dig-admin-button-icon {
    font-size: 0.95rem;
  }

  .digentus-one-admin-page .dig-processor-list {
    list-style: disc;
    padding-left: 20px;
  }
}

}
@layer components {
@layer components {
  .dig-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .dig-icon-box-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
  }

  .dig-bg-surface {
    background: rgba(255, 255, 255, 0.05);
  }

  .dig-property-row-compact__icon {
    color: var(--dig-color-text-muted);
    font-size: 1rem;
  }
}

}
@layer components {
@layer components {
  .dig-feature-grid__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }

  .dig-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(37, 209, 219, 0.1);
    color: var(--dig-color-secondary);
    margin-bottom: 1.5rem;
  }

  .dig-icon-badge__icon {
    font-size: 1.5rem;
  }

  .dig-feature-grid__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dig-color-primary);
  }

  .dig-feature-grid__text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

}
@layer components {
@layer components {
  .dig-card-universal {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .dig-card-universal__title-icon {
    color: var(--dig-color-warning);
    font-size: 1.25rem;
  }

  .dig-card-universal__body {
    position: relative;
  }

  .dig-card-universal__tease {
    filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }

  .dig-card-universal__tease strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--dig-color-text-muted);
  }

  .dig-card-universal__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 85%;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .dig-card-universal__overlay-title {
    color: var(--dig-color-primary);
  }

  .dig-card-universal__overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-shadow: 0 4px 12px rgba(37, 209, 219, 0.3);
  }

  .dig-card-universal__overlay-btn-icon {
    font-size: 1rem;
  }
}

}
@layer layouts {
/*
 * Layout: Application Dashboard (App Shell)
 * Responsibility:
 * - Fixed app shell geometry
 * - WordPress admin bar offsets
 * - Sidebar behavior
 * - Dashboard header geometry
 * - Header-level global search placement
 *
 * Notes:
 * - Search component internals live in:
 *   packages/re-ios/assets/css/components/search-bar.css
 * - This file only controls where the search appears inside the dashboard header.
 */

/* ============================================================
 * 1. App Mode Reset
 * ============================================================ */

html.d1-app-mode,
html.d1-app-mode body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ============================================================
 * 2. Main Fixed Shell
 * ============================================================ */

.d1-dashboard-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  z-index: 999;
}

/* Hide native theme chrome in app mode. */
html.d1-app-mode body > a.skip-link,
html.d1-app-mode header#masthead {
  display: none;
}

/* ============================================================
 * 3. WordPress Admin Bar Compatibility
 * ============================================================ */

body.admin-bar .d1-dashboard-wrapper {
  top: 32px;
  height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .d1-dashboard-wrapper {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

/* ============================================================
 * 4. App Main Area
 * ============================================================ */

.d1-app-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dig-color-bg);
}

.d1-app-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
}

/* ============================================================
 * 5. Desktop Header
 * ============================================================ */

.d1-app-header {
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--dig-color-border);
  background-color: var(--dig-color-bg);
  overflow: visible;
}

.d1-app-header-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.d1-app-header h1 {
  margin: 0;
  color: var(--dig-color-text);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.d1-app-header-controls {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header global search: desktop placement */
.d1-app-header-search {
  flex: 1 1 520px;
  min-width: 360px;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 1rem;
}

.d1-app-header-search .d1-search-wrapper {
  width: 100%;
  max-width: 520px;
  margin: 0;
  z-index: 1200;
}

.d1-app-header-search .d1-search--small,
.d1-app-header-search .d1-search--large {
  max-width: 100%;
}

.d1-app-header-search .d1-search-input-group,
.d1-app-header-search .dig-input-group {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(37, 209, 219, 0.36);
  background: rgba(2, 18, 32, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 28px rgba(0, 0, 0, 0.16);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.d1-app-header-search .d1-search-input-group:hover,
.d1-app-header-search .dig-input-group:hover {
  border-color: rgba(37, 209, 219, 0.48);
}

.d1-app-header-search .d1-search-input-group:focus-within,
.d1-app-header-search .dig-input-group:focus-within {
  border-color: rgba(37, 209, 219, 0.7);
  background: rgba(2, 18, 32, 0.9);
  box-shadow:
    0 0 0 2px rgba(37, 209, 219, 0.08),
    0 16px 38px rgba(0, 0, 0, 0.26);
}

.d1-app-header-search .d1-search-submit {
  color: rgba(196, 220, 235, 0.82);
}

.d1-app-header-search .d1-search-submit:hover {
  color: var(--dig-color-primary);
}

.d1-app-header-search .d1-search-input,
.d1-app-header-search input[data-d1-search] {
  color: var(--dig-color-text);
  font-size: 0.92rem;
  font-weight: 500;
}

.d1-app-header-search .d1-search-input::placeholder,
.d1-app-header-search input[data-d1-search]::placeholder {
  color: rgba(196, 220, 235, 0.68);
}

/* Dropdown must float above dashboard cards. */
.d1-app-header-search .d1-search-dropdown {
  top: calc(100% + 0.55rem);
  z-index: 3000;
  background: rgba(3, 18, 31, 0.98);
  border: 1px solid rgba(37, 209, 219, 0.22);
  border-radius: 14px;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.d1-app-header-search .d1-search-item {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.d1-app-header-search .d1-search-item:hover,
.d1-app-header-search .d1-search-active {
  background: rgba(37, 209, 219, 0.12);
}

/* ============================================================
 * 6. Sidebar
 * ============================================================ */

.d1-app-sidebar {
  width: 260px;
  height: 100%;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background-color: var(--dig-color-bg-alt);
  border-right: 1px solid var(--dig-color-border);
  z-index: 1000;
  transition: transform 0.3s ease;
}

/* ============================================================
 * 7. Medium Desktop / Tablet Refinement
 * ============================================================ */

@media (max-width: 1200px) {
  .d1-app-header {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .d1-app-header-search {
    flex-basis: 360px;
    min-width: 260px;
    max-width: 440px;
    padding-inline: 0.5rem;
  }

  .d1-app-header-search .d1-search-wrapper {
    max-width: 380px;
  }
}

/* ============================================================
 * 8. Sidebar Mobile Overlay
 * ============================================================ */

@media (max-width: 992px) {
  .d1-app-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }

  .d1-app-sidebar.is-open {
    transform: translateX(0);
  }

  .d1-app-content {
    padding: 1rem;
  }

  .d1-app-header-controls .dig-d-none {
    display: none;
  }
}

/* ============================================================
 * 9. Mobile Header + Search Layout
 * ============================================================ */

@media (max-width: 1023px) {
  .d1-app-header {
    height: auto;
    min-height: 116px;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: 44px 42px;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.55rem;
    padding: 0.7rem 1rem 0.75rem;
    overflow: visible;
  }

  .d1-app-header-title {
    grid-column: 1;
    grid-row: 1;
    height: 44px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .d1-app-header h1 {
    display: none;
  }

  .d1-mobile-menu-btn {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .d1-app-header-controls {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px 1fr 40px 40px;
    grid-template-rows: 44px 42px;
    column-gap: 0.65rem;
    row-gap: 0.55rem;
    align-items: center;
  }

  .d1-app-header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .d1-app-header-search .d1-search-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    z-index: 1600;
  }

  .d1-app-header-search .d1-search-input-group,
  .d1-app-header-search .dig-input-group {
    height: 42px;
    min-height: 42px;
  }

  .d1-app-header-search .d1-search-input,
  .d1-app-header-search input[data-d1-search] {
    font-size: 0.88rem;
  }

  .d1-app-header-search .d1-search-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    transform: none;
  }

  .d1-app-header-controls > button {
    grid-column: 3;
    grid-row: 1;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
  }

  .d1-app-header-controls > .dig-flex {
    grid-column: 4;
    grid-row: 1;
    height: 40px;
    margin: 0;
    padding-left: 0;
    border-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
  }

  .d1-app-header-controls .dig-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
 * 10. Very Small Screens
 * ============================================================ */

@media (max-width: 420px) {
  .d1-app-header {
    grid-template-columns: 40px 1fr;
    grid-template-rows: 42px 40px;
    column-gap: 0.55rem;
    row-gap: 0.5rem;
    padding: 0.65rem 0.75rem 0.7rem;
  }

  .d1-app-header-title {
    height: 42px;
  }

  .d1-mobile-menu-btn {
    width: 38px;
    height: 38px;
  }

  .d1-app-header-controls {
    grid-template-columns: 40px 1fr 38px 38px;
    grid-template-rows: 42px 40px;
    column-gap: 0.55rem;
    row-gap: 0.5rem;
  }

  .d1-app-header-controls > button {
    width: 38px;
    height: 38px;
  }

  .d1-app-header-controls > .dig-flex {
    height: 38px;
  }

  .d1-app-header-controls .dig-avatar {
    width: 34px;
    height: 34px;
  }

  .d1-app-header-search .d1-search-input-group,
  .d1-app-header-search .dig-input-group {
    height: 40px;
    min-height: 40px;
  }

  .d1-app-header-search .d1-search-input,
  .d1-app-header-search input[data-d1-search] {
    font-size: 0.84rem;
  }

  /* ============================================================
 * App Shell: Brand, Header Icons, User Controls
 * ============================================================ */

  .d1-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px;
    border-bottom: 1px solid var(--dig-color-border);
  }

  .d1-sidebar-brand__logo {
    height: 32px;
    width: auto;
    display: block;
  }

  .d1-sidebar-brand__fallback {
    display: none;
  }

  .d1-mobile-close-btn,
  .d1-mobile-menu-btn {
    padding: 0.25rem;
  }

  .d1-mobile-close-btn {
    margin-right: -0.5rem;
  }

  .d1-mobile-menu-btn {
    margin-left: -0.5rem;
  }

  .d1-mobile-close-btn__icon,
  .d1-mobile-menu-btn__icon {
    color: var(--dig-color-text-muted);
    font-size: 1.5rem;
  }

  .d1-alert-button {
    position: relative;
  }

  .d1-alert-button__icon {
    font-size: 1rem;
  }

  .d1-alert-button__dot {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--dig-color-danger);
    border: 2px solid var(--dig-color-bg);
  }

  .d1-user-menu {
    border-left: 1px solid var(--dig-color-border);
    cursor: pointer;
  }

  .d1-user-menu__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
  }

  .d1-user-menu__avatar-icon {
    font-size: 1rem;
  }

  .d1-user-menu__avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
  }

  .d1-user-menu__avatar-initial {
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
  }

  .d1-user-menu__meta {
    gap: 0;
  }

  .d1-user-menu__name,
  .d1-user-menu__tier {
    line-height: 1;
  }
}

}
@layer themes {
/* Theme: Enterprise (Sci-Fi / Dark Mode) - Corrected & Hardened */

/* 1. Root Variables & Body Override */
body.d1-theme-enterprise {
  background-color: #0a1b2a !important;
  color: #e6edf3 !important;
  margin: 0;
}

/* Force dark background on the main wrapper and app area */
.d1-theme-enterprise .d1-dashboard-wrapper,
.d1-theme-enterprise .d1-app-main,
.d1-theme-enterprise .d1-app-content {
  background-color: #0a1b2a; /* Ensure deep navy background everywhere */
  color: #e6edf3 !important;
}

/* Define Variables for children components */
.d1-theme-enterprise {
  --dig-color-bg: #0a1b2a; /* Navy Deep */
  --dig-color-bg-alt: #06131f; /* Darker Sidebar */
  --dig-color-text: #e6edf3; /* Light Text */
  --dig-color-text-muted: #94a3b8;
  --dig-color-border: #1e293b; /* Slate Border */
  --dig-color-primary: #25d1db; /* Cyan Electric */
}

/* 2. Wrapper Glow Override (Optional, subtle background) */
.d1-theme-enterprise .d1-dashboard-wrapper {
  background: radial-gradient(
    circle at 10% 20%,
    #1a3b5c 0%,
    #0a1b2a 40%
  ) !important;
}

/* 3. Neon Glass Cards (Fixed Text Color) */
.dig-card--glass {
  background: rgba(13, 25, 41, 0.7) !important;
  border: 1px solid rgba(100, 200, 255, 0.1) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 20px 40px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  /* FORCE TEXT COLOR INSIDE GLASS CARDS */
  color: #ffffff !important;
}

/* Force headings inside glass cards to be white */
.dig-card--glass h1,
.dig-card--glass h2,
.dig-card--glass h3,
.dig-card--glass strong {
  color: #ffffff !important;
}

.dig-card--glass .dig-text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Neon Glow Text */
.dig-text-white {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* 5. Map Container Dark Mode */
.leaflet-container {
  background: #0a1b2a !important;
}

/* 6. Glow Background Effect */
.dig-glow-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(37, 209, 219, 0.05) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* 7. Utilities */
.dig-border-subtle {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dig-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.dig-bg-success {
  background-color: var(--dig-color-success);
  color: var(--dig-color-success);
}
.dig-bg-warning {
  background-color: var(--dig-color-warning);
  color: var(--dig-color-warning);
}
.dig-bg-info {
  background-color: var(--dig-color-info);
  color: var(--dig-color-info);
}

/* Bento Grid Layout */
.dig-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--dig-spacing-lg);
}

/* Force standard cards to appear as dark crystals on the Dashboard */
.d1-theme-enterprise .dig-card {
  background: rgba(6, 19, 31, 0.7) !important; /* Transparent dark blue */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.3) !important;
  color: #e6edf3 !important; /* Clear text */
}

/* Force the Hero section to appear dark */
.d1-theme-enterprise .d1-hero {
  background: rgba(6, 19, 31, 0.7) !important;
  backdrop-filter: none;
  backdrop-filter: blur(12px);
  color: #e6edf3 !important;
}

/* Fix mutated text so it is readable against a dark background. */
.d1-theme-enterprise .dig-text-muted,
.d1-theme-enterprise .dig-label {
  color: #94a3b8 !important; /* Slate 400 */
}

/* Fix the card titles */
.d1-theme-enterprise .dig-card h1,
.d1-theme-enterprise .dig-card h2,
.d1-theme-enterprise .dig-card h3,
.d1-theme-enterprise .d1-card h4 {
  color: #ffffff !important;
}

/* Dark Tables (for Comparables) */
.d1-theme-enterprise .dig-table th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.d1-theme-enterprise .dig-table td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #e6edf3 !important;
}

.d1-theme-enterprise .d1-comps-link {
  color: var(--dig-color-primary) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.d1-theme-enterprise .d1-comps-link:hover {
  color: #ffffff !important;
  border-bottom-color: var(--dig-color-primary);
  text-shadow: 0 0 8px rgba(37, 209, 219, 0.4); /* Glow effect */
}

@media (max-width: 1200px) {
  .dig-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

}
@layer components {
@layer components {
  /* ============================================================
   * Digentus One Search Bar
   * Enterprise  Grade
   * ============================================================ */

  .d1-search-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 100;
  }

  .d1-search--small {
    max-width: 320px;
  }

  .d1-search--large {
    max-width: 650px;
  }

  .d1-search-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--dig-color-border);
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--dig-color-bg-alt);
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      background-color 160ms ease;
  }

  .d1-search-input-group:hover {
    border-color: rgba(37, 209, 219, 0.38);
  }

  .d1-search-input-group:focus-within {
    border-color: rgba(37, 209, 219, 0.55);
    box-shadow:
      0 0 0 2px rgba(37, 209, 219, 0.08),
      0 14px 34px rgba(0, 0, 0, 0.24);
  }

  .d1-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0 0 1rem;
    color: var(--dig-color-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition:
      color 160ms ease,
      transform 160ms ease;
  }

  .d1-search-submit:hover {
    color: var(--dig-color-primary);
  }

  .d1-search-submit:active {
    transform: scale(0.96);
  }

  .d1-search-icon,
  .d1-search-submit .dashicons {
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .d1-search--small .d1-search-icon,
  .d1-search--small .d1-search-submit .dashicons {
    font-size: 1.15rem;
  }

  .d1-search--large .d1-search-icon,
  .d1-search--large .d1-search-submit .dashicons {
    font-size: 1.45rem;
  }

  .d1-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    outline: none;
    border: none;
    font-weight: 500;
    letter-spacing: -0.01em;
    background: transparent;
    color: var(--dig-color-text);
  }

  .d1-search-input::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 0.86;
  }

  .d1-search--small .d1-search-input {
    padding: 0.65rem 1rem 0.65rem 0.55rem;
    font-size: 0.9rem;
  }

  .d1-search--large .d1-search-input {
    padding: 1rem 1.5rem 1rem 0.75rem;
    font-size: 1.1rem;
  }

  .d1-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 1400;
    display: none;
    max-height: 450px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(
      180deg,
      rgba(10, 27, 41, 0.98),
      rgba(4, 14, 26, 0.98)
    );
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
  }

  .d1-search-dropdown::-webkit-scrollbar {
    width: 6px;
  }

  .d1-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }

  .d1-search-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
  }

  .d1-search-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(37, 209, 219, 0.52);
  }

  .d1-search-item,
  .d1-search-suggestion-item {
    color: var(--dig-color-text) !important;
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }

  .d1-search-item:hover,
  .d1-search-suggestion-item:hover,
  .d1-search-active {
    background: linear-gradient(
      90deg,
      rgba(37, 209, 219, 0.11),
      rgba(37, 209, 219, 0.035)
    ) !important;
  }

  @media (max-width: 1023px) {
    .d1-app-header-search .d1-search-input-group {
      height: 42px;
      border-color: rgba(148, 163, 184, 0.16);
      background: linear-gradient(
        180deg,
        rgba(5, 19, 34, 0.92),
        rgba(3, 14, 25, 0.92)
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 28px rgba(0, 0, 0, 0.2);
    }

    .d1-app-header-search .d1-search-input-group:focus-within {
      border-color: rgba(37, 209, 219, 0.55);
      box-shadow:
        0 0 0 2px rgba(37, 209, 219, 0.08),
        0 14px 34px rgba(0, 0, 0, 0.26);
    }

    .d1-app-header-search .d1-search-input {
      font-size: 0.88rem;
      color: rgba(226, 232, 240, 0.94);
    }

    .d1-app-header-search .d1-search-input::placeholder {
      color: rgba(148, 163, 184, 0.74);
    }

    .d1-app-header-search .d1-search-submit {
      color: rgba(148, 163, 184, 0.82);
    }
  }
}

}
@layer components {
/* ==========================================================================
   D1 Public Signals
   Operational public intelligence surface
   ========================================================================== */

.d1-signals-hero,
.d1-preview-counter,
.d1-signals-empty,
[data-d1-signal-preview-target] {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Operational header
   -------------------------------------------------------------------------- */

.d1-signals-hero {
  position: relative;
  width: min(calc(100% - 2rem), 1280px);
  margin: 2.5rem auto 0;
  padding: clamp(2.5rem, 4vw, 4rem);

  overflow: visible;

  background: #f3f6f8;
  border: 1px solid #d4dee5;
  border-top: 2px solid #19d3f3;
  border-radius: 0;
}

.d1-signals-hero__content {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(420px, 0.85fr);
  align-items: end;
  gap: clamp(2.5rem, 4vw, 4rem);
}

.d1-signals-hero__copy,
.d1-signals-hero__execution {
  min-width: 0;
}

.d1-signals-hero__eyebrow {
  width: fit-content;
  margin: 0 0 1rem;

  color: #087f98;
  font-family: var(--dig-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.d1-signals-hero__title {
  max-width: 760px;
  margin: 0;

  color: #02152a;
  font-size: clamp(2.5rem, 3.7vw, 4.1rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.d1-signals-hero__subtitle {
  max-width: 620px;
  margin: 1.5rem 0 0;

  color: #536879;
  font-size: 1rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Search execution surface
   -------------------------------------------------------------------------- */

.d1-signals-hero__search-wrapper {
  position: relative;
  z-index: 50;
  width: 100%;
}

.d1-signals-hero__search-wrapper .d1-search-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.d1-signals-hero__search-wrapper .dig-input-group,
.d1-signals-hero__search-wrapper .d1-search-input-group {
  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 58px;

  overflow: hidden;

  background: #ffffff;
  border: 1px solid #9fb2bf;
  border-radius: 4px;
  box-shadow: none;
}

.d1-signals-hero__search-wrapper .dig-input-group:focus-within,
.d1-signals-hero__search-wrapper .d1-search-input-group:focus-within {
  border-color: #087f98;
  box-shadow: 0 0 0 3px rgba(25, 211, 243, 0.12);
}

.d1-signals-hero__search-wrapper .d1-search-submit,
.d1-signals-hero__search-wrapper .dig-input-icon {
  display: flex;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;

  color: #087f98;
  background: #edf3f6;
  border: 0;
  border-right: 1px solid #c6d3db;
}

.d1-runtime-icon,
.d1-runtime-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.d1-intelligence-panel__icon {
  flex: 0 0 auto;
  color: #19d3f3;
  font-size: 1rem;
}

.d1-signals-hero__search-wrapper input[type="text"],
.d1-signals-hero__search-wrapper input[type="search"],
.d1-signals-hero__search-wrapper .d1-search-input,
.d1-signals-hero__search-wrapper .dig-input {
  flex: 1 1 auto;

  min-width: 0;
  height: 58px;
  margin: 0;
  padding: 0 1.25rem;

  color: #02152a;
  background: transparent;
  border: 0;
  outline: 0;

  font-size: 1rem;
  text-align: left;
}

.d1-signals-hero__search-wrapper input::placeholder {
  color: #728797;
  opacity: 1;
}

/* Search results */

.d1-signals-hero__search-wrapper .d1-search-dropdown,
.d1-signals-hero__search-wrapper [role="listbox"] {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 9999;

  margin: 0;
  overflow: hidden;

  color: #eaf3f7;
  background: #071923;
  border: 1px solid #28404f;
  border-radius: 4px;
  box-shadow: 0 20px 55px rgba(2, 21, 42, 0.22);

  text-align: left;
}

.d1-signals-hero__search-wrapper .d1-search-item,
.d1-signals-hero__search-wrapper [role="option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.35rem;

  padding: 1rem 1.15rem;

  color: #eaf3f7;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.d1-signals-hero__search-wrapper .d1-search-item:hover,
.d1-signals-hero__search-wrapper .d1-search-active,
.d1-signals-hero__search-wrapper [role="option"]:hover {
  background: rgba(25, 211, 243, 0.08);
}

/* --------------------------------------------------------------------------
   Market status
   -------------------------------------------------------------------------- */

.d1-signals-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 1rem 0 0;

  border-top: 1px solid #b9c8d2;
  border-bottom: 1px solid #b9c8d2;
}

.d1-signals-status__item {
  min-width: 0;
  padding: 0.85rem 1rem;

  border-left: 1px solid #ccd7de;
}

.d1-signals-status__item:first-child {
  border-left: 0;
}

.d1-signals-status__item dt,
.d1-signals-status__item dd {
  margin: 0;
}

.d1-signals-status__item dt {
  color: #667e8f;
  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.d1-signals-status__item dd {
  margin-top: 0.35rem;

  color: #132f45;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.d1-signals-status__item.is-active dd {
  color: #087f67;
}

.d1-signals-status__item.is-active dd::before {
  content: "";

  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.4rem;

  background: #10b981;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Preview usage
   -------------------------------------------------------------------------- */

.d1-preview-counter {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 1.5rem;

  width: min(calc(100% - 2rem), 1280px);
  max-width: none;
  margin: 0 auto;
  padding: 1rem 0;

  border-bottom: 1px solid #d4dee5;
}

.d1-preview-counter__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;

  margin: 0;
}

.d1-preview-counter__label {
  color: #667e8f;
  font-family: var(--dig-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.d1-preview-counter__value {
  color: #02152a;
  font-size: 0.82rem;
  font-weight: 800;
}

.d1-preview-counter__bar-wrapper {
  width: 100%;
  height: 3px;

  overflow: hidden;

  background: #dce5ea;
  border-radius: 0;
}

.d1-preview-counter__bar {
  height: 100%;
  background: #19d3f3;
  border-radius: 0;
}

.d1-preview-counter__message {
  grid-column: 1 / -1;

  margin: 0;

  color: #536879;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Public capability matrix
   -------------------------------------------------------------------------- */

.d1-signals-empty {
  width: min(calc(100% - 2rem), 1280px);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) 0;
}

.d1-signals-empty__header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  align-items: end;
  gap: 3rem;

  margin-bottom: 2rem;
}

.d1-signals-empty__eyebrow {
  grid-column: 1 / -1;

  width: fit-content;
  margin: 0 0 -1.75rem;

  color: #087f98;
  font-family: var(--dig-font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.d1-signals-empty__title {
  margin: 0;

  color: #02152a;
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.d1-signals-empty__subtitle {
  margin: 0;

  color: #536879;
  font-size: 0.95rem;
  line-height: 1.65;
}

.d1-public-capability-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  border: 1px solid #cbd7de;
}

.d1-public-capability {
  min-width: 0;
  min-height: 190px;
  padding: 1.5rem;

  background: #ffffff;
  border-left: 1px solid #cbd7de;
}

.d1-public-capability:first-child {
  border-left: 0;
}

.d1-public-capability__index {
  margin-bottom: 2.25rem;

  color: #087f98;
  font-family: var(--dig-font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.d1-public-capability h3 {
  margin: 0 0 0.7rem;

  color: #02152a;
  font-size: 1rem;
  font-weight: 750;
}

.d1-public-capability p {
  margin: 0;

  color: #536879;
  font-size: 0.88rem;
  line-height: 1.55;
}

.d1-signal-layers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-right: 1px solid #cbd7de;
  border-bottom: 1px solid #cbd7de;
  border-left: 1px solid #cbd7de;
}

.d1-signal-layer {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;

  padding: 1.1rem 1.5rem;

  border-left: 1px solid #cbd7de;
}

.d1-signal-layer:first-child {
  border-left: 0;
}

.d1-signal-layer strong {
  color: #087f98;
  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.d1-signal-layer span {
  color: #334f63;
  font-size: 0.82rem;
  line-height: 1.45;
}

.d1-signals-empty__footer-text {
  display: block;
  margin: 1.25rem 0 0;
  padding: 0;

  color: #6b7e8d;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  font-family: var(--dig-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

/* Empty state disappears after a preview starts */

.d1-signals-has-preview .d1-signals-empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Generated preview target
   -------------------------------------------------------------------------- */

[data-d1-signal-preview-target] {
  width: min(calc(100% - 2rem), 1280px);
  max-width: none;
  margin: 1.5rem auto 5rem;

  scroll-margin-top: 7rem;
}

.d1-signal-preview-card {
  position: relative;

  overflow: hidden;

  color: #25d1db;
  background: #061522;
  border: 1px solid #28404f;
  border-radius: 4px;
  box-shadow: none;
}

.d1-preview-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem;

  padding: 2rem;

  border-bottom: 1px solid #28404f;
}

.d1-preview-card__eyebrow {
  margin: 0 0 0.7rem;

  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.d1-preview-card__header h2 {
  margin: 0;

  color: #ffffff;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.045em;
}

.d1-preview-card__location {
  margin: 0.65rem 0 0;

  color: #9db2c1;
  font-size: 0.9rem;
}

.d1-preview-card__status {
  min-width: 190px;
  padding: 1rem 1.25rem;

  border: 1px solid #315065;
}

.d1-preview-card__status span,
.d1-preview-card__status strong {
  display: block;
}

.d1-preview-card__status span {
  color: #86a0b2;
  font-family: var(--dig-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.d1-preview-card__status strong {
  margin-top: 0.45rem;

  color: #19d3f3;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Signal matrix */

.d1-signal-matrix,
.d1-property-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.d1-signal-mini,
.d1-basic-fact {
  min-width: 0;
  min-height: 155px;
  padding: 1.5rem;

  background: transparent;
  border: 0;
  border-right: 1px solid #28404f;
  border-bottom: 1px solid #28404f;
  border-radius: 0;
}

.d1-signal-mini:last-child,
.d1-basic-fact:last-child {
  border-right: 0;
}

.d1-signal-mini__topline,
.d1-basic-fact__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 2rem;
}

.d1-signal-mini__index,
.d1-basic-fact__index {
  color: #6d8da2;
  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.d1-signal-mini__icon,
.d1-basic-fact__icon {
  color: #19d3f3;
  font-size: 1rem;
}

.d1-signal-mini__label,
.d1-basic-fact__label {
  display: block;

  color: #86a0b2;
  font-size: 0.72rem;
  font-weight: 650;
}

.d1-signal-mini__value,
.d1-basic-fact__value {
  display: block;
  margin-top: 0.45rem;

  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.d1-market-context__item:first-child {
  border-left: 0;
}

/* Provenance */

.d1-preview-provenance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-bottom: 1px solid #28404f;
}

.d1-preview-provenance > div {
  padding: 1.1rem 1.5rem;
  border-left: 1px solid #28404f;
}

.d1-preview-provenance > div:first-child {
  border-left: 0;
}

.d1-preview-provenance span,
.d1-preview-provenance strong {
  display: block;
}

.d1-preview-provenance span {
  color: #6d8da2;
  font-family: var(--dig-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.d1-preview-provenance strong {
  margin-top: 0.4rem;

  color: #d1dee5;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.d1-signal-preview-card .d1-preview-provenance {
  width: 100%;
  grid-column: 1 / -1;
}

.d1-signal-preview-card .d1-preview-provenance + .d1-preview-card__actions {
  width: 100%;
  grid-column: 1 / -1;
  clear: both;
}

/* Actions */

.d1-preview-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 1.5rem 2rem;
}

.d1-preview-card__primary-action {
  color: #02152a;
  background: #19d3f3;
  border-color: #19d3f3;
  border-radius: 3px;
}

.d1-preview-card__primary-action:hover,
.d1-preview-card__primary-action:focus-visible {
  color: #02152a;
  background: #4bdcf5;
  border-color: #4bdcf5;
}

.d1-preview-card__secondary-action {
  color: #dce8ee;
  background: #0b202c;
  border-color: #365264;
  border-radius: 3px;
}

.d1-preview-card__secondary-action:hover,
.d1-preview-card__secondary-action:focus-visible {
  color: #ffffff;
  background: #102a38;
  border-color: #5c7a8d;
}

.d1-preview-card__status-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-width: 150px;
  min-height: 42px;
  padding: 0.65rem 1rem;

  color: #8fd7c3;
  background: rgba(55, 178, 143, 0.08);
  border: 1px solid rgba(86, 199, 167, 0.38);
  border-radius: 3px;

  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;

  cursor: default;
  opacity: 1;
}

.d1-preview-card__status-action:disabled {
  color: #8fd7c3;
  background: rgba(55, 178, 143, 0.08);
  border-color: rgba(86, 199, 167, 0.38);

  cursor: default;
  opacity: 1;
}

/* Loading, errors and access gate */

.d1-signal-preview-loading,
.d1-signal-preview-error,
.d1-signal-preview-gate {
  padding: 2rem;

  color: #eaf3f7;
  background: #071923;
  border: 1px solid #28404f;
  border-radius: 4px;
}

.d1-signal-preview-loading span,
.d1-signal-preview-error span,
.d1-signal-preview-gate span {
  display: block;

  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.d1-signal-preview-loading strong,
.d1-signal-preview-error strong {
  display: block;
  margin-top: 0.65rem;

  color: #ffffff;
}

.d1-signal-preview-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.d1-signal-preview-gate h2 {
  margin: 0.75rem 0 0;

  color: #ffffff;
  font-size: 2rem;
}

.d1-signal-preview-gate p {
  margin: 0.6rem 0 0;
  color: #9db2c1;
}

/* Soft limit nudge */

.d1-soft-gate-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  margin-top: 1rem;
  padding: 1rem 1.25rem;

  color: #132f45;
  background: #edf6f8;
  border: 1px solid #b9dce3;
  border-radius: 4px;
}

/* Registration modal base */

.d1-registration-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: grid;
  place-items: center;

  padding: 1rem;

  background: rgba(2, 8, 23, 0.74);
  backdrop-filter: blur(10px);
}

.d1-registration-modal {
  position: relative;

  width: min(100%, 560px);
  padding: 1.5rem;

  color: #ffffff;
  background: #071923;
  border: 1px solid #28404f;
  border-radius: 6px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.42);
}

.d1-registration-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;

  width: 36px;
  height: 36px;

  color: #ffffff;
  background: transparent;
  border: 1px solid #456174;
  border-radius: 4px;

  cursor: pointer;
}

.d1-registration-modal form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.d1-registration-modal label {
  display: grid;
  gap: 0.35rem;

  color: #c0d0da;
  font-size: 0.85rem;
}

.d1-registration-modal input,
.d1-registration-modal select {
  width: 100%;
  padding: 0.8rem 0.9rem;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #456174;
  border-radius: 4px;
}

.d1-registration-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.d1-registration-consent input {
  width: auto;
}

.d1-registration-error {
  min-height: 1rem;
  color: #fca5a5;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .d1-signals-hero__content,
  .d1-signals-empty__header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .d1-signals-empty__eyebrow {
    margin-bottom: -1rem;
  }

  .d1-public-capability-matrix,
  .d1-signal-matrix,
  .d1-property-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d1-public-capability:nth-child(3),
  .d1-signal-mini:nth-child(3),
  .d1-basic-fact:nth-child(3) {
    border-left: 0;
  }

  .d1-public-capability:nth-child(n + 3) {
    border-top: 1px solid #cbd7de;
  }
}

@media (max-width: 680px) {
  .d1-signals-hero,
  .d1-preview-counter,
  .d1-signals-empty,
  [data-d1-signal-preview-target] {
    width: min(calc(100% - 1rem), 1280px);
  }

  .d1-signals-hero {
    margin-top: 0.5rem;
    padding: 2rem 1rem;
  }

  .d1-signals-hero__title {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
    text-wrap: initial;
  }

  .d1-signals-status,
  .d1-signal-layers,
  .d1-preview-provenance {
    grid-template-columns: 1fr;
  }

  .d1-signals-status__item,
  .d1-signal-layer,
  .d1-preview-provenance > div {
    border-left: 0;
    border-top: 1px solid #ccd7de;
  }

  .d1-signals-status__item:first-child,
  .d1-signal-layer:first-child,
  .d1-preview-provenance > div:first-child {
    border-top: 0;
  }

  .d1-preview-counter {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .d1-public-capability-matrix,
  .d1-signal-matrix,
  .d1-property-facts,
  .d1-intelligence-meta {
    grid-template-columns: 1fr;
  }

  .d1-public-capability,
  .d1-signal-mini,
  .d1-basic-fact,
  .d1-intelligence-meta__item {
    border-right: 0;
    border-left: 0;
    border-top: 1px solid #28404f;
  }

  .d1-public-capability:first-child,
  .d1-signal-mini:first-child,
  .d1-basic-fact:first-child,
  .d1-intelligence-meta__item:first-child {
    border-top: 0;
  }

  .d1-signal-layer {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .d1-preview-card__header {
    grid-template-columns: 1fr;
  }

  .d1-preview-card__status {
    width: 100%;
    min-width: 0;
  }

  .d1-market-context {
    grid-template-columns: 1fr;
  }

  .d1-market-context__header {
    border-right: 0;
    border-bottom: 1px solid #28404f;
  }

  .d1-market-context__items {
    grid-template-columns: 1fr;
  }

  .d1-market-context__item {
    border-top: 1px solid #28404f;
    border-left: 0;
  }

  .d1-market-context__item:first-child {
    border-top: 0;
  }

  .d1-signal-preview-gate,
  .d1-soft-gate-nudge {
    display: grid;
  }

  .d1-signal-preview-card .d1-preview-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;

    min-height: auto;
    padding: 1rem 1.25rem;
  }

  .d1-preview-action-bar__controls {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .d1-signal-preview-card .d1-preview-card__actions .dig-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .d1-public-signal-matrix {
    grid-template-columns: 1fr;
  }

  .d1-public-signal-cell {
    min-height: auto;
    padding: 1.25rem;
  }

  .d1-public-signal-cell__text {
    max-width: none;
  }

  .d1-signals-empty {
    width: min(calc(100% - 1.5rem), 1280px);
    padding-block: 2.5rem;
  }

  .d1-public-signal-matrix,
  .d1-signal-preview-card .d1-signal-matrix,
  .d1-signal-preview-card .d1-property-facts {
    grid-template-columns: 1fr;
  }

  .d1-public-signal-cell,
  .d1-signal-preview-card .d1-signal-mini,
  .d1-signal-preview-card .d1-basic-fact {
    min-height: auto;
    border-right: 0;
  }

  .d1-public-signal-cell__text {
    max-width: none;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-property-facts {
    grid-template-columns: 1fr;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact,
  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact--mailing-address {
    grid-column: span 1;
    border-right: 0;
  }
}

/* ==========================================================================
   D1 SIGNALS — OPERATIONAL ALIGNMENT
   Public capability matrix + search results + preview card
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Public capability matrix
   -------------------------------------------------------------------------- */

.d1-signals-empty {
  width: min(calc(100% - 2rem), 1280px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 0 4rem;
  text-align: left;
}

.d1-public-signal-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: 100%;
  margin-top: 2rem;

  border-top: 1px solid #bfd0da;
  border-left: 1px solid #bfd0da;
}

.d1-public-signal-cell {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 190px;
  padding: 1.5rem;

  background: #ffffff;

  border-right: 1px solid #bfd0da;
  border-bottom: 1px solid #bfd0da;
}

.d1-public-signal-cell__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  min-height: 2rem;
  margin-bottom: 1.25rem;
}

.d1-public-signal-cell__index {
  color: #087f98;

  font-family: var(--dig-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.1em;
}

.d1-public-signal-cell__icon-shell {
  display: grid;
  place-items: center;

  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;

  color: #087f98;
  background: #f2f7f9;

  border: 1px solid #c5d5de;
  border-radius: 2px;
}

.d1-public-signal-cell__icon {
  width: 1rem;
  height: 1rem;

  color: currentColor;
  font-size: 1rem;
}

.d1-public-signal-cell__title {
  margin: 0 0 0.65rem;

  color: #02152a;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
}

.d1-public-signal-cell__text {
  max-width: 260px;
  margin: 0;

  color: #536879;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   2. Search dropdown contrast
   -------------------------------------------------------------------------- */

.d1-signals-hero__search-wrapper a[role="option"],
.d1-signals-hero__search-wrapper .d1-search-item {
  color: #eaf3f7;
}

.d1-signals-hero__search-wrapper
  a[role="option"]
  > div:first-child
  > span:first-child {
  color: #f3f8fb;
  opacity: 1;

  font-weight: 700;
}

.d1-signals-hero__search-wrapper
  a[role="option"]
  > div:first-child
  > span:last-child {
  color: #19d3f3;
  opacity: 1;

  font-family: var(--dig-font-mono);
}

.d1-signals-hero__search-wrapper
  a[role="option"]
  > div:nth-child(2)
  > span:first-child {
  color: #9db2c1;
  opacity: 1;
}

.d1-signals-hero__search-wrapper
  a[role="option"]
  > div:nth-child(2)
  > span:last-child {
  color: #314657;
  background: #e8eef2;

  border: 1px solid #c8d4dc;
}

.d1-signals-hero__search-wrapper a[role="option"]:hover,
.d1-signals-hero__search-wrapper a[role="option"].d1-search-active {
  background: rgba(25, 211, 243, 0.1);
}

/* --------------------------------------------------------------------------
   3. Property preview result
   -------------------------------------------------------------------------- */

[data-d1-signal-preview-target] {
  width: min(calc(100% - 2rem), 1280px);
  max-width: 1280px;
  margin: 2rem auto 0;
}

.d1-signal-preview-card {
  width: 100%;

  padding: 0;
  overflow: hidden;

  border-radius: 3px;
  box-shadow: none;
}

.d1-signal-preview-card .d1-property-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.d1-signal-preview-card .d1-basic-fact {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 128px;
  padding: 1.25rem 1.5rem;

  border-right: 1px solid #28404f;
  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-basic-fact:nth-child(4n) {
  border-right: 0;
}

.d1-signal-preview-card .d1-basic-fact__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 1.25rem;
  margin: 0 0 1.15rem;
}

.d1-signal-preview-card .d1-basic-fact__label {
  color: #8eb0c3;
  font-size: 0.75rem;
  font-weight: 650;
}

.d1-signal-preview-card .d1-basic-fact__value {
  margin-top: 0.45rem;

  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   D1 SIGNAL PREVIEW — FINAL INTERNAL ALIGNMENT
   ========================================================================== */

/* Header */

.d1-signal-preview-card .d1-preview-card__header {
  align-items: center;
  padding: 1.75rem 2rem;
}

.d1-signal-preview-card .d1-preview-card__status {
  min-width: 180px;
  padding: 0.9rem 1rem;
}

/* Operational data cells */

.d1-signal-preview-card .d1-signal-mini,
.d1-signal-preview-card .d1-basic-fact {
  align-items: stretch;

  min-height: 128px;
  padding: 1.25rem 1.5rem;

  text-align: left;
}

.d1-signal-preview-card .d1-signal-mini__topline,
.d1-signal-preview-card .d1-basic-fact__topline {
  width: 100%;
  min-height: 1.25rem;
  margin: 0 0 1.15rem;

  justify-content: space-between;
}

.d1-signal-preview-card .d1-signal-mini__label,
.d1-signal-preview-card .d1-basic-fact__label {
  width: 100%;
  margin: 0 0 0.45rem;

  text-align: left;
}

.d1-signal-preview-card .d1-signal-mini__value,
.d1-signal-preview-card .d1-basic-fact__value {
  width: 100%;
  margin: 0;
  padding: 0;

  text-align: left;
  font-variant-numeric: tabular-nums;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* Reduce the visual distance between data rows */

.d1-signal-preview-card .d1-signal-matrix,
.d1-signal-preview-card .d1-property-facts {
  align-items: stretch;
}

/* Provenance */

.d1-signal-preview-card .d1-preview-provenance > div {
  min-height: 72px;
  padding: 1.15rem 1.5rem;
}

/* Action bar */

.d1-signal-preview-card .d1-preview-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  width: 100%;
  max-width: none;
  min-height: 82px;
  padding: 0.875rem 1.5rem;

  box-sizing: border-box;
  grid-column: 1 / -1;

  background: #081a25;
  border-top: 1px solid #28404f;
}

.d1-signal-preview-card .d1-preview-card__actions .dig-btn {
  width: auto;
  min-width: 190px;
  min-height: 42px;
  padding: 0.65rem 1.1rem;

  justify-content: center;

  border-radius: 3px;
}

.d1-preview-card__saved-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  width: 100%;
}

.d1-preview-card__saved-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.d1-preview-card__saved-label::before {
  width: 6px;
  height: 6px;

  background: #19d3f3;
  border-radius: 50%;

  content: "";
}

.d1-preview-card__saved-state .d1-preview-card__secondary-action {
  min-width: 190px;

  color: #02152a;
  background: #19d3f3;
  border-color: #19d3f3;
  border-radius: 4px;
}

.d1-preview-card__saved-state .d1-preview-card__secondary-action:hover {
  background: #67e8f9;
  border-color: #67e8f9;
}

.d1-preview-action-bar__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-width: 190px;
  min-height: 42px;
  padding: 0.65rem 1.1rem;

  color: #67e8f9;
  background: rgba(25, 211, 243, 0.08);
  border: 1px solid rgba(25, 211, 243, 0.32);
  border-radius: 3px;

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.d1-preview-action-bar__status-icon {
  width: 15px;
  height: 15px;

  color: #19d3f3;
  stroke-width: 2;
}

.d1-preview-action-bar__status > span {
  color: #67e8f9;
}

.d1-preview-card__guest-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  width: 100%;
}

.d1-preview-card__guest-action .d1-preview-cta__price {
  color: rgba(192, 208, 218, 0.72);
  font-family: var(--dig-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d1-preview-action-bar__context {
  display: grid;
  align-content: center;
  gap: 0.2rem;

  min-width: 0;
}

.d1-preview-action-bar__label {
  color: #6d8da2;
  font-family: var(--dig-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d1-preview-action-bar__value {
  color: #eaf3f7;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.d1-preview-action-bar__meta {
  color: #7894a6;
  font-family: var(--dig-font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d1-preview-action-bar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;

  flex: 0 0 auto;
}

/* Responsive */

@media (max-width: 680px) {
  .d1-signal-preview-card .d1-preview-card__header {
    align-items: stretch;
    padding: 1.5rem;
  }

  .d1-signal-preview-card .d1-preview-card__status {
    width: 100%;
    min-width: 0;
  }

  .d1-signal-preview-card .d1-signal-mini,
  .d1-signal-preview-card .d1-basic-fact {
    min-height: auto;
    padding: 1.25rem;
  }

  .d1-signal-preview-card .d1-preview-card__actions {
    min-height: auto;
    padding: 1rem;
  }

  .d1-preview-card__saved-state,
  .d1-preview-card__guest-action {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .d1-preview-card__saved-state {
    justify-items: stretch;
  }

  .d1-preview-action-bar__status {
    width: auto;
    min-width: 7.5rem;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .d1-preview-action-bar__context {
    min-width: 0;
  }

  .d1-preview-action-bar__value {
    overflow-wrap: normal;
    word-break: normal;
  }

  .d1-preview-action-bar__controls {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .d1-preview-card__guest-action {
    justify-items: stretch;
  }

  .d1-preview-card__saved-label {
    justify-content: flex-start;
  }

  .d1-signal-preview-card .d1-preview-card__actions .dig-btn,
  .d1-preview-card__saved-state .d1-preview-card__secondary-action {
    width: 100%;
    min-width: 0;
  }
}

/*
 * ==========================================
 * D1 PUBLIC REGISTRATION PAGE
 * ==========================================
 */

body.d1-register-page {
  margin: 0;
  overflow-x: clip;
  overflow-y: auto;

  color-scheme: light;
  background: #ffffff;
}

body.d1-register-page .dig-main,
body.d1-register-page main.d1-main,
body.d1-register-page .dig-main > .dig-container,
body.d1-register-page main.d1-main > .dig-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/*
 * Full-width acquisition shell
 */

body.d1-register-page .d1-registration-overlay.is-page {
  position: relative;
  inset: auto;
  z-index: 0;

  display: block;

  width: 100%;
  min-height: auto;
  margin: 0;
  padding: 0;

  overflow: visible;
  color: #02152a;

  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(37, 209, 218, 0.13) 0%,
      rgba(37, 209, 218, 0.045) 30%,
      transparent 52%
    ),
    linear-gradient(180deg, #f6f8fa 0%, #f8fafc 72%, #ffffff 100%);

  border: 0;
  border-top: 1px solid #dbe4ea;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;

  backdrop-filter: none;
}

body.d1-register-page .d1-registration-overlay.is-page::before,
body.d1-register-page .d1-registration-overlay.is-page::after {
  display: none;
  content: none;
}

body.d1-register-page .d1-registration-page__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 520px);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);

  width: min(calc(100% - 2rem), 1360px);
  margin-inline: auto;
  padding: clamp(4rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem)
    clamp(4.5rem, 7vw, 6.5rem);
}

body.d1-register-page .d1-registration-page__inner--success {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

/*
 * Editorial context
 */

body.d1-register-page .d1-registration-context {
  width: 100%;
  max-width: 680px;

  color: #02152a;
}

body.d1-register-page .d1-registration-context__eyebrow {
  width: fit-content;
  margin: 0 0 1rem;

  color: #087f98;
  font-family: var(--dig-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.d1-register-page .d1-registration-context h1 {
  max-width: 680px;
  margin: 0 0 1.35rem;

  color: #02152a;
  font-size: clamp(3rem, 4.6vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

body.d1-register-page .d1-registration-context > p {
  max-width: 590px;
  margin: 0 0 2rem;

  color: #536879;
  font-size: 1rem;
  line-height: 1.7;
}

/*
 * Technical status table
 */

body.d1-register-page .d1-registration-context__status {
  max-width: 560px;
  margin: 0;

  border-top: 1px solid #b9c8d2;
}

body.d1-register-page .d1-registration-context__status-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);

  border-bottom: 1px solid #ccd7de;
}

body.d1-register-page .d1-registration-context__status-row dt,
body.d1-register-page .d1-registration-context__status-row dd {
  margin: 0;
  padding-block: 0.8rem;
}

body.d1-register-page .d1-registration-context__status-row dt {
  color: #667e8f;
  font-family: var(--dig-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body.d1-register-page .d1-registration-context__status-row dd {
  color: #132f45;
  font-size: 0.85rem;
  font-weight: 700;
}

/*
 * Dark execution panel
 */

body.d1-register-page .d1-registration-overlay.is-page .d1-registration-modal {
  position: relative;
  inset: auto;
  transform: none;

  justify-self: end;

  width: 100%;
  max-width: 520px;
  max-height: none;
  min-height: 0;

  margin: 0;
  padding: 2rem;

  overflow: visible;
  overscroll-behavior: auto;

  color: #eaf3f7;
  background: #071923;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;

  box-shadow:
    0 24px 65px rgba(2, 21, 42, 0.17),
    inset 0 1px rgba(255, 255, 255, 0.04);
}

body.d1-register-page
  .d1-registration-page__inner--success
  .d1-registration-modal {
  justify-self: stretch;
  max-width: 680px;
}

body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-registration-modal
  > .dig-text-xs {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
}

body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-registration-modal
  h2 {
  margin: 0.75rem 0;

  color: #ffffff;
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-registration-modal
  form {
  gap: 0.95rem;
}

body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-registration-modal
  label {
  color: #dce8ef;
}

body.d1-register-page .d1-registration-overlay.is-page .dig-text-muted,
body.d1-register-page .d1-registration-overlay.is-page .d1-registration-hint,
body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-registration-consent {
  color: #9db2c1;
}

body.d1-register-page .d1-registration-overlay.is-page input[type="text"],
body.d1-register-page .d1-registration-overlay.is-page input[type="email"],
body.d1-register-page .d1-registration-overlay.is-page input[type="tel"] {
  min-height: 46px;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

body.d1-register-page .d1-registration-overlay.is-page input:focus {
  border-color: rgba(37, 209, 218, 0.7);
  outline: none;

  box-shadow: 0 0 0 3px rgba(37, 209, 218, 0.12);
}

body.d1-register-page .d1-registration-overlay.is-page .d1-role-chip {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.02);

  border-color: rgba(255, 255, 255, 0.14);
}

body.d1-register-page .d1-registration-overlay.is-page .d1-role-chip:hover,
body.d1-register-page
  .d1-registration-overlay.is-page
  .d1-role-chip.is-selected {
  color: #ffffff;
  background: rgba(37, 209, 218, 0.1);

  border-color: rgba(37, 209, 218, 0.55);
}

body.d1-register-page .d1-registration-overlay.is-page .dig-btn-primary {
  width: 100%;
  min-height: 48px;
  margin-top: 1rem;

  color: #02152a;
  background: #19d3f3;

  border-color: #19d3f3;
}

body.d1-register-page .d1-registration-overlay.is-page .dig-btn-primary:hover {
  background: #67e5fa;
  border-color: #67e5fa;
}

/*
 * Tablet
 */

@media (max-width: 980px) {
  body.d1-register-page .d1-registration-page__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;

    width: min(calc(100% - 2rem), 760px);
    padding: 3.5rem 1.5rem 4rem;
  }

  body.d1-register-page .d1-registration-context,
  body.d1-register-page
    .d1-registration-overlay.is-page
    .d1-registration-modal {
    max-width: 680px;
    margin-inline: auto;
  }

  body.d1-register-page
    .d1-registration-overlay.is-page
    .d1-registration-modal {
    justify-self: stretch;
  }

  body.d1-register-page .d1-registration-context h1 {
    max-width: 650px;
    font-size: clamp(2.75rem, 8vw, 4rem);
  }
}

/*
 * Mobile
 */

@media (max-width: 620px) {
  body.d1-register-page .d1-registration-page__inner {
    width: 100%;
    gap: 2rem;

    padding: 2.75rem 1rem 3rem;
  }

  body.d1-register-page .d1-registration-context h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
    line-height: 1;
    text-wrap: initial;
  }

  body.d1-register-page .d1-registration-context > p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
  }

  body.d1-register-page .d1-registration-context__status-row {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  body.d1-register-page
    .d1-registration-overlay.is-page
    .d1-registration-modal {
    padding: 1.25rem;
    border-radius: 6px;
  }

  body.d1-register-page
    .d1-registration-overlay.is-page
    .d1-registration-modal
    h2 {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Canonical Property Signal Assessment
   ========================================================================== */

.d1-signal-preview-card .d1-property-assessment {
  margin: 0;
  padding: 0;

  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card
  .d1-property-assessment
  > .d1-intelligence-panel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;

  min-height: 76px;
  padding: 1.1rem 1.5rem;

  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-intelligence-panel__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;

  min-width: 0;
}

.d1-signal-preview-card .d1-intelligence-panel__icon {
  display: grid;
  place-items: center;

  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;

  color: #19d3f3;
}

.d1-signal-preview-card .d1-intelligence-panel__title span {
  display: block;

  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.d1-signal-preview-card .d1-intelligence-panel__title strong {
  display: block;
  margin-top: 0.3rem;

  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.d1-signal-preview-card .d1-intelligence-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;
  padding: 0.42rem 0.8rem;

  color: #bcecf4;
  background: rgba(25, 211, 243, 0.06);
  border: 1px solid #31566b;
  border-radius: 999px;

  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Metrics */

.d1-signal-preview-card .d1-intelligence-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 0;

  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-intelligence-meta__item {
  min-width: 0;
  padding: 1.15rem 1.5rem;

  border-left: 1px solid #28404f;
}

.d1-signal-preview-card .d1-intelligence-meta__item:first-child {
  border-left: 0;
}

.d1-signal-preview-card .d1-intelligence-meta__item > span {
  display: block;

  color: #7fa0b3;
  font-family: var(--dig-font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.d1-assessment-metric {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;

  margin-top: 0.5rem;
}

.d1-assessment-freshness {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.d1-assessment-freshness > span {
  display: block;

  color: rgba(127, 160, 179, 0.7);
  font-family: var(--dig-font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d1-assessment-freshness > strong {
  display: block;
  margin-top: 0.28rem;

  color: rgba(203, 213, 225, 0.76);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
}

.d1-assessment-metric strong {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.d1-assessment-metric em {
  color: #b8d0dc;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

/* Thesis */

.d1-assessment-thesis {
  padding: 1.4rem 1.5rem;

  border-bottom: 1px solid #28404f;
}

.d1-assessment-thesis > span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.d1-assessment-thesis > strong {
  display: block;
  max-width: 900px;
  margin-top: 0.65rem;

  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.d1-assessment-thesis > p {
  max-width: 920px;
  margin: 0.55rem 0 0;

  color: #a9bfcc;
  font-size: 0.86rem;
  line-height: 1.6;
}

/* Sections */

.d1-assessment-section {
  border-bottom: 1px solid #28404f;
}

.d1-assessment-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;

  padding: 1rem 1.5rem;

  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid #28404f;
}

.d1-assessment-section__header span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.d1-assessment-section__header strong {
  color: #7895a7;
  font-size: 0.72rem;
  font-weight: 600;
}

.d1-assessment-driver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.d1-assessment-driver-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.d1-assessment-driver-grid--single .d1-assessment-driver {
  border-right: 0;
}

.d1-assessment-driver {
  min-width: 0;
  padding: 1.25rem 1.5rem;

  border-right: 1px solid #28404f;
  border-bottom: 1px solid #28404f;
}

.d1-assessment-driver:nth-child(2n) {
  border-right: 0;
}

.d1-assessment-driver__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.d1-assessment-driver__topline span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.d1-assessment-driver__topline em {
  color: #7895a7;
  font-family: var(--dig-font-mono);
  font-size: 0.58rem;
  font-style: normal;
}

.d1-assessment-driver > strong {
  display: block;
  margin-top: 0.55rem;

  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
}

.d1-assessment-driver > p {
  margin: 0.55rem 0 0;

  color: #9fb4c1;
  font-size: 0.8rem;
  line-height: 1.55;
}

.d1-assessment-benchmark {
  display: grid;
  gap: 0.75rem;

  margin-top: 1rem;
  padding: 0.9rem 1rem;

  background: rgba(25, 211, 243, 0.035);
  border: 1px solid rgba(25, 211, 243, 0.2);
}

.d1-assessment-benchmark__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.d1-assessment-benchmark__header span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.d1-assessment-benchmark__header em {
  color: #7895a7;
  font-family: var(--dig-font-mono);
  font-size: 0.56rem;
  font-style: normal;
  text-align: right;
}

.d1-assessment-benchmark__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-top: 1px solid rgba(135, 180, 202, 0.16);
  border-bottom: 1px solid rgba(135, 180, 202, 0.16);
}

.d1-assessment-benchmark__values > div {
  min-width: 0;
  padding: 0.7rem 0;
}

.d1-assessment-benchmark__values > div + div {
  padding-left: 1rem;
  border-left: 1px solid rgba(135, 180, 202, 0.16);
}

.d1-assessment-benchmark__values span {
  display: block;

  color: #7895a7;
  font-family: var(--dig-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.d1-assessment-benchmark__values strong {
  display: block;
  margin-top: 0.25rem;

  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
}

.d1-assessment-benchmark__position {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.d1-assessment-benchmark__position strong {
  color: #ffffff;
  font-family: var(--dig-font-mono);
  font-size: 0.82rem;
}

.d1-assessment-benchmark__position span {
  color: #7895a7;
  font-size: 0.68rem;
  text-align: right;
}

.d1-assessment-benchmark > small {
  color: #607f91;
  font-family: var(--dig-font-mono);
  font-size: clamp(0.52rem, 0.49rem + 0.1vw, 0.6rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.d1-assessment-section--counter .d1-assessment-driver {
  background: rgba(255, 255, 255, 0.012);
}

.d1-assessment-section--counter .d1-assessment-driver__topline span {
  color: var(--d1-lime, #dbfe01);
}

.d1-assessment-section--counter .d1-assessment-driver {
  background: rgba(183, 243, 74, 0.025);
}

.d1-assessment-section--counter .d1-assessment-driver__topline span {
  color: var(--d1-lime, #dbfe01);
}

.d1-assessment-driver > small {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.85rem;

  color: #7895a7;
  border-top: 1px solid rgba(135, 180, 202, 0.18);

  font-size: 0.72rem;
  line-height: 1.5;
}

.d1-assessment-driver__provenance {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(110px, 0.8fr) minmax(
      90px,
      0.6fr
    );
  gap: 0.75rem;

  margin-top: 0.8rem;
  padding-top: 0.7rem;

  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.d1-assessment-driver__provenance > div {
  min-width: 0;
}

.d1-assessment-driver__provenance span {
  display: block;

  color: rgba(127, 160, 179, 0.68);
  font-family: var(--dig-font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d1-assessment-driver__provenance strong {
  display: block;
  margin-top: 0.25rem;

  color: rgba(203, 213, 225, 0.76);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
}

.d1-assessment-driver__provenance strong[data-evidence-state="confirmed"] {
  color: #19d3f3;
}

.d1-assessment-driver__provenance strong[data-evidence-state="directional"] {
  color: #67e8f9;
}

.d1-assessment-driver__provenance strong[data-evidence-state="derived"] {
  color: rgba(203, 213, 225, 0.86);
}

.d1-assessment-driver__provenance strong[data-evidence-state="not-validated"] {
  color: rgba(203, 213, 225, 0.58);
}

/* Next step */

.d1-intelligence-next-step {
  display: grid;
  gap: 0.45rem;

  margin: 0;
  padding: 1.25rem 1.5rem;

  border: 0;
  border-bottom: 1px solid #28404f;
}

.d1-intelligence-next-step span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.d1-intelligence-next-step strong {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Limitations */

.d1-intelligence-footnote {
  margin: 1rem 1.5rem;
  padding: 1rem 1.1rem;

  color: #9fb4c1;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #28404f;

  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .d1-signal-preview-card
    .d1-property-assessment
    > .d1-intelligence-panel__header,
  .d1-signal-preview-card .d1-intelligence-meta,
  .d1-assessment-driver-grid {
    grid-template-columns: 1fr;
  }

  .d1-signal-preview-card .d1-intelligence-meta__item {
    border-top: 1px solid #28404f;
    border-left: 0;
  }

  .d1-signal-preview-card .d1-intelligence-meta__item:first-child {
    border-top: 0;
  }

  .d1-assessment-driver {
    border-right: 0;
  }

  .d1-assessment-section__header {
    display: grid;
  }

  .d1-assessment-driver__provenance {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .d1-assessment-benchmark__header,
  .d1-assessment-benchmark__position {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .d1-assessment-benchmark__header em,
  .d1-assessment-benchmark__position span {
    text-align: left;
  }
}

.d1-intelligence-next-step p {
  max-width: 900px;
  margin: 0.15rem 0 0;

  color: #9fb4c1;
  font-size: 0.8rem;
  line-height: 1.55;
}

.d1-signal-preview-card .d1-assessment-list {
  display: grid;
  gap: 0.5rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.d1-signal-preview-card .d1-assessment-list li {
  position: relative;

  margin: 0;
  padding-left: 1rem;

  color: #ffffff;
  font-size: 1rem;
  line-height: 1.45;
}

.d1-signal-preview-card .d1-assessment-list li::before {
  content: "";

  position: absolute;
  top: 0.65em;
  left: 0;

  width: 4px;
  height: 4px;

  background: #b8d0dc;
  border-radius: 50%;
}

.d1-signal-preview-card .d1-intelligence-teaser__locked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;

  margin: 0;
  padding: 1.25rem 1.5rem;

  border: 0;
  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-intelligence-teaser__locked > div {
  min-width: 0;
}

.d1-signal-preview-card .d1-intelligence-teaser__locked span {
  display: block;

  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.d1-signal-preview-card .d1-intelligence-teaser__locked strong {
  display: block;
  max-width: 760px;
  margin-top: 0.45rem;

  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.45;
}

.d1-signal-preview-card .d1-intelligence-teaser__locked .dig-btn {
  min-width: 230px;
  min-height: 42px;
  margin: 0;
  padding: 0.65rem 1.1rem;

  justify-content: center;
  white-space: nowrap;

  border-radius: 3px;
}

.d1-signal-preview-card
  :is(
    .d1-preview-card__primary-action,
    .d1-preview-card__secondary-action,
    .d1-preview-card__status-action,
    .d1-intelligence-teaser__locked .dig-btn
  ) {
  border-radius: 3px;
}

.d1-signal-preview-card .d1-basic-fact__icon,
.d1-signal-preview-card .d1-intelligence-panel__icon {
  display: grid;
  place-items: center;

  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;

  color: #19d3f3;
}

.d1-signal-preview-card .d1-basic-fact__icon svg,
.d1-signal-preview-card .d1-basic-fact__icon svg *,
.d1-signal-preview-card .d1-verified-fact__room-icon svg,
.d1-signal-preview-card .d1-verified-fact__room-icon svg * {
  color: #19d3f3;
  stroke: currentColor;
}

.d1-signal-preview-card .d1-basic-fact__icon::before,
.d1-signal-preview-card .d1-intelligence-panel__icon::before {
  color: inherit;
}

.d1-signal-preview-card .d1-basic-fact__icon svg,
.d1-signal-preview-card .d1-intelligence-panel__icon svg {
  display: block;

  width: 100%;
  height: 100%;

  color: inherit;
  stroke: currentColor;
  stroke-width: 1.8;
}

.d1-signal-preview-card .d1-basic-fact__icon svg *,
.d1-signal-preview-card .d1-intelligence-panel__icon svg * {
  stroke: currentColor;
}

@media (max-width: 680px) {
  .d1-signal-preview-card
    .d1-property-assessment
    > .d1-intelligence-panel__header {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 1.25rem;
  }

  .d1-signal-preview-card .d1-intelligence-panel__badge {
    justify-self: start;
  }

  .d1-signal-preview-card .d1-intelligence-thesis,
  .d1-signal-preview-card .d1-intelligence-teaser__locked {
    padding: 1.25rem;
  }

  .d1-signal-preview-card .d1-intelligence-teaser__locked {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .d1-signal-preview-card .d1-intelligence-teaser__locked .dig-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Verified facts
   ========================================================================== */

.d1-signal-preview-card .d1-verified-facts {
  width: 100%;
  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-verified-facts__header {
  display: grid;
  gap: 0.45rem;

  min-height: 82px;
  padding: 1.25rem 1.5rem;

  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-verified-facts__header span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.d1-signal-preview-card .d1-verified-facts__header strong {
  color: #a8beca;
  font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1.02rem);
  font-weight: 650;
  line-height: 1.4;
}

.d1-signal-preview-card .d1-verified-facts .d1-property-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.d1-signal-preview-card .d1-verified-facts .d1-basic-fact:nth-child(4n) {
  border-right: 0;
}

.d1-signal-preview-card .d1-basic-fact--rooms {
  min-width: 0;
}

.d1-signal-preview-card .d1-basic-fact--rooms .d1-basic-fact__topline {
  justify-content: flex-start;
}

.d1-signal-preview-card .d1-verified-fact__rooms {
  display: grid;
  gap: 0.55rem;
}

.d1-signal-preview-card .d1-verified-fact__room {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  min-width: 0;
}

.d1-signal-preview-card .d1-verified-fact__room-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;

  color: #19d3f3;
}

.d1-signal-preview-card .d1-verified-fact__room-icon svg {
  display: block;
  width: 100%;
  height: 100%;

  color: inherit;
  stroke: currentColor;
}

.d1-signal-preview-card .d1-verified-fact__room strong {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
}

.d1-signal-preview-card .d1-verified-fact__rooms-empty {
  color: #7895a7;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ==========================================================================
   Estimated value
   ========================================================================== */

.d1-signal-preview-card .d1-estimated-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  grid-template-areas:
    "label value"
    "description description";
  align-items: end;
  gap: 0.55rem 1.5rem;

  width: 100%;
  min-height: 92px;
  padding: 1.25rem 1.5rem;

  background: rgba(25, 211, 243, 0.035);
  border-bottom: 1px solid #28404f;
}

.d1-signal-preview-card .d1-estimated-value > strong {
  justify-self: end;
}

.d1-signal-preview-card .d1-estimated-value > span {
  color: #19d3f3;
  font-family: var(--dig-font-mono);
  font-size: clamp(0.6rem, 0.57rem + 0.1vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.d1-signal-preview-card .d1-estimated-value > span {
  grid-area: label;
}

.d1-signal-preview-card .d1-estimated-value > strong {
  color: #ffffff;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.d1-signal-preview-card .d1-estimated-value > strong {
  grid-area: value;
}

.d1-signal-preview-card .d1-estimated-value > small {
  max-width: 720px;

  color: #7895a7;
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.84rem);
  line-height: 1.5;
}

.d1-signal-preview-card .d1-estimated-value > small {
  grid-area: description;
}

.d1-signal-preview-card .d1-verified-facts .d1-basic-fact--mailing-address {
  grid-column: span 2;
  border-right: 0;
}

/* ==========================================================================
   Verified facts responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* ==========================================================================
   Verified facts canonical grid
   ========================================================================== */

  .d1-public-signal-matrix,
  .d1-signal-preview-card .d1-signal-matrix,
  .d1-signal-preview-card .d1-property-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d1-signal-preview-card .d1-signal-mini:nth-child(2n),
  .d1-signal-preview-card .d1-basic-fact:nth-child(2n) {
    border-right: 0;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-property-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact {
    grid-column: span 1;

    min-width: 0;
    border-right: 1px solid #28404f;
    border-bottom: 1px solid #28404f;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact:nth-child(4),
  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact:nth-child(8) {
    border-right: 0;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact--mailing-address {
    grid-column: span 2;
    border-right: 0;
  }

  .d1-signal-preview-card
    .d1-verified-facts
    .d1-basic-fact--mailing-address
    .d1-basic-fact__value {
    max-width: 36rem;
  }

  .d1-signal-preview-card
    .d1-verified-facts
    .d1-basic-fact--mailing-address
    .d1-basic-fact__value
    br {
    display: block;
    content: "";
    margin-top: 0.2rem;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-property-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact {
    border-right: 1px solid #28404f;
  }

  .d1-signal-preview-card .d1-verified-facts .d1-basic-fact:nth-child(2n) {
    border-right: 0;
  }
}

}
/* ==========================================================================
   digentus-one.css - Complete UI Base Stylesheet for Web API Native Architecture
   ==========================================================================
   Purpose: Declarative, accessible, semantic, and responsive stylesheet
   to be used alongside Digentus One UI rendered entirely with Web APIs.
   Includes full support for: CSS Variables, Dark Mode, Reduced Motion,
   Container Queries, Cascade Layers, Scroll Snap, Viewport Units, 
   Subgrid, Anchor Positioning, and all modern Web APIs.
   ==========================================================================
*/

/* ==========================================================================
   digentus-one.css - Master Stylesheet
   ========================================================================== */

/* 1. Strict definition of layer order (from lowest to highest priority) */
@layer base, layouts, components, themes, utilities, animations, admin;

/* 2. Importing modules into their corresponding layers */

/* Components (Microstructures and Widgets) */

/* Layouts (Macro Page Structures) */

/* Themes (Colors, backgrounds, global typography) */

/* ==========================================================================
   2. Layer 'base'
   ========================================================================== */
@layer base {
  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
   * =========================================================================
   * Root Variable Definitions (Refactored with HSL & Auto-Contrast Logic)
   * =========================================================================
   */
  :root {
    /* Typography - Updated to Inter / Enterprise Stack */
    /* Typography */
    --dig-font-sans:
      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --dig-font-mono:
      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", monospace;

    --dig-font-primary: var(--dig-font-sans);
    --dig-font-secondary: var(--dig-font-sans);
    /* --- A) HSL Color Primitives (Updated for Digentus One Official Brand) ---
       Base Colors: #0A1B2A (Primary), #25D1DB (Secondary), #E6EDF3 (Text)
    */
    /* Primary: #0A1B2A */
    --dig-hue-primary: 208;
    --dig-saturation-primary: 62%;
    --dig-lightness-primary: 0.1;

    /* Secondary: #25D1DB */
    --dig-hue-secondary: 183;
    --dig-saturation-secondary: 71%;
    --dig-lightness-secondary: 0.5;

    /* Accent: Same as Secondary */
    --dig-hue-accent: 183;
    --dig-saturation-accent: 71%;
    --dig-lightness-accent: 0.5;

    /* Text: #E6EDF3 */
    --dig-hue-text: 210;
    --dig-saturation-text: 29%;
    --dig-lightness-text: 0.2; /* Dark for light mode base */

    /* Semantic Colors */
    --dig-hue-success: 153;
    --dig-saturation-success: 84%;
    --dig-lightness-success: 0.35;
    --dig-hue-warning: 38;
    --dig-saturation-warning: 92%;
    --dig-lightness-warning: 0.5;
    --dig-hue-danger: 358;
    --dig-saturation-danger: 84%;
    --dig-lightness-danger: 0.6;
    --dig-hue-info: 217;
    --dig-saturation-info: 91%;
    --dig-lightness-info: 0.6;

    /* Backgrounds */
    --dig-hue-bg: 0;
    --dig-saturation-bg: 0%;
    --dig-lightness-bg: 1; /* White */
    --dig-hue-bg-alt: 210;
    --dig-saturation-bg-alt: 40%;
    --dig-lightness-bg-alt: 0.96;
    --dig-hue-border: 215;
    --dig-saturation-border: 16%;
    --dig-lightness-border: 0.89;

    /* --- Auto-Contrast Logic (Simplified for stability) --- */
    --contrast-threshold: 0.6;

    /* Note: If clamp() causes an error, use a fixed value temporarily */
    --is-light: 1;
    --auto-contrast-lightness: 0.2;

    /*
     * -----------------------------------------------------------------------
     * B) Composite Color Variables (Reconstructing Percentage)
     * -----------------------------------------------------------------------
     * We reconstruct the final percentage value ONLY when passing it to the hsl() function.
     * This keeps all intermediate calculations pure and unit-less.
     */

    /* Brand Colors */
    --dig-color-primary: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc(var(--dig-lightness-primary) * 100%)
    );
    --dig-color-primary-light: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) + 0.1) * 100%)
    );
    --dig-color-primary-dark: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) - 0.05) * 100%)
    );

    --dig-color-secondary: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc(var(--dig-lightness-secondary) * 100%)
    );
    --dig-color-secondary-light: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) + 0.1) * 100%)
    );
    --dig-color-secondary-dark: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) - 0.1) * 100%)
    );

    --dig-color-accent: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%)
    );
    --dig-color-accent-light: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) + 0.15) * 100%)
    );
    --dig-color-accent-dark: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) - 0.15) * 100%)
    );

    /* Semantic Colors */
    --dig-color-success: hsl(
      var(--dig-hue-success),
      var(--dig-saturation-success),
      calc(var(--dig-lightness-success) * 100%)
    );
    --dig-color-warning: hsl(
      var(--dig-hue-warning),
      var(--dig-saturation-warning),
      calc(var(--dig-lightness-warning) * 100%)
    );
    --dig-color-danger: hsl(
      var(--dig-hue-danger),
      var(--dig-saturation-danger),
      calc(var(--dig-lightness-danger) * 100%)
    );
    --dig-color-info: hsl(
      var(--dig-hue-info),
      var(--dig-saturation-info),
      calc(var(--dig-lightness-info) * 100%)
    );

    --dig-color-white {
      color: #fff;
    }

    /* --- Alert Background & Border Colors ---
       We create dedicated variables for the alert states.
       They use a very low lightness and saturation for a subtle background tint.
    */
    --dig-color-success-bg: hsl(var(--dig-hue-success), 90%, 95%);
    --dig-color-success-border: hsl(var(--dig-hue-success), 90%, 85%);
    --dig-color-success-text: hsl(var(--dig-hue-success), 80%, 25%);

    --dig-color-warning-bg: hsl(var(--dig-hue-warning), 100%, 95%);
    --dig-color-warning-border: hsl(var(--dig-hue-warning), 100%, 85%);
    --dig-color-warning-text: hsl(var(--dig-hue-warning), 90%, 30%);

    --dig-color-danger-bg: hsl(var(--dig-hue-danger), 100%, 95%);
    --dig-color-danger-border: hsl(var(--dig-hue-danger), 100%, 85%);
    --dig-color-danger-text: hsl(var(--dig-hue-danger), 80%, 35%);

    --dig-color-info-bg: hsl(var(--dig-hue-info), 100%, 95%);
    --dig-color-info-border: hsl(var(--dig-hue-info), 100%, 85%);
    --dig-color-info-text: hsl(var(--dig-hue-info), 80%, 30%);

    /* Neutral & UI Colors */
    --dig-color-text: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      calc(var(--dig-lightness-text) * 100%)
    );
    --dig-color-text-light: hsl(
      var(--dig-hue-light),
      var(--dig-saturation-light),
      calc(var(--dig-lightness-light) * 100%)
    );
    --dig-color-text-muted: hsl(
      var(--dig-hue-muted),
      var(--dig-saturation-muted),
      calc(var(--dig-lightness-muted) * 100%)
    );

    --dig-color-bg: hsl(
      var(--dig-hue-bg),
      var(--dig-saturation-bg),
      calc(var(--dig-lightness-bg) * 100%)
    );
    --dig-color-bg-alt: hsl(
      var(--dig-hue-bg-alt),
      var(--dig-saturation-bg-alt),
      calc(var(--dig-lightness-bg-alt) * 100%)
    );

    --dig-color-border: hsl(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%)
    );
    --dig-color-border-subtle: hsla(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%),
      0.5
    );

    /* Special Colors with Alpha Channel */
    --dig-color-focus-ring: hsla(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%),
      0.35
    );

    /* --- C) Automatic Contrast Logic ("The Brain") - Bulletproof Version --- */
    --contrast-threshold: 0.6; /* Unit-less threshold (60%) */

    /* --bg-lightness will be set by components (e.g., a button) as a unit-less value */
    --is-light: clamp(
      0,
      (var(--bg-lightness, 0) - var(--contrast-threshold)) * 9999,
      1
    );

    /* This formula now calculates the final LIGHTNESS value as a unit-less number (e.g., 0.20 or 1.0) */
    --auto-contrast-lightness: calc(
      (var(--is-light) * var(--dig-lightness-text)) +
        ((1 - var(--is-light)) * var(--dig-lightness-light))
    );

    /*
     * -----------------------------------------------------------------------
     * D) Non-Color System Variables (The Design System Foundation)
     * -----------------------------------------------------------------------
     * This section defines all other foundational design tokens for the UI,
     * including typography, fluid spacing, border radii, transitions,
     * layout dimensions, responsive breakpoints, shadows, and z-index stacking.
     * These variables are used by all components to ensure a consistent
     * and maintainable visual system.
     */

    /* Typography */
    --dig-font-primary:
      "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
    --dig-font-secondary:
      "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
    --dig-font-mono:
      "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;

    /* Fluid Typography Scale using clamp() for responsive font sizes */
    --dig-font-size-base: clamp(
      1rem,
      0.95rem + 0.25vw,
      1.125rem
    ); /* Scales from 16px to 18px */
    --dig-font-size-small: clamp(
      0.875rem,
      0.825rem + 0.25vw,
      1rem
    ); /* Scales from 14px to 16px */
    --dig-font-size-h6: var(--dig-font-size-base);
    --dig-font-size-h5: clamp(
      1.25rem,
      1.15rem + 0.5vw,
      1.5rem
    ); /* Scales from 20px to 24px */
    --dig-font-size-h4: clamp(
      1.563rem,
      1.4rem + 0.81vw,
      2rem
    ); /* Scales from 25px to 32px */
    --dig-font-size-h3: clamp(
      1.953rem,
      1.7rem + 1.27vw,
      2.66rem
    ); /* Scales from 31px to 42.5px */
    --dig-font-size-h2: clamp(
      2.441rem,
      2.1rem + 1.71vw,
      3.55rem
    ); /* Scales from 39px to 57px */
    --dig-font-size-h1: clamp(
      3.052rem,
      2.6rem + 2.26vw,
      4.73rem
    ); /* Scales from 49px to 75.5px */

    /* Spacing System (Fluid) using clamp() for responsive gutters and margins */
    --dig-spacing-xxs: clamp(
      0.25rem,
      0.2rem + 0.25vw,
      0.375rem
    ); /* ~4px to 6px */
    --dig-spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* ~8px to 12px */
    --dig-spacing-sm: clamp(
      0.75rem,
      0.6rem + 0.75vw,
      1.125rem
    ); /* ~12px to 18px */
    --dig-spacing-md: clamp(
      1.5rem,
      1.2rem + 1.5vw,
      2.25rem
    ); /* ~24px to 36px */
    --dig-spacing-lg: clamp(
      2.25rem,
      1.8rem + 2.25vw,
      3.375rem
    ); /* ~36px to 54px */
    --dig-spacing-xl: clamp(3rem, 2.4rem + 3vw, 4.5rem); /* ~48px to 72px */
    --dig-form-grid-gap: var(--dig-spacing-md);

    --dig-form-control-padding: var(--dig-spacing-xs);
    --dig-form-control-margin: 0;

    /* Border Radius */
    --dig-radius-xs: 2px;
    --dig-radius-sm: 4px;
    --dig-radius-md: 8px;
    --dig-radius-lg: 16px;
    --dig-radius-full: 9999px; /* A large value to ensure perfect circles/pills */

    /* Transitions & Animations */
    --dig-transition-fast: 0.15s ease-in-out;
    --dig-transition-base: 0.3s ease-in-out;
    --dig-transition-slow: 0.5s ease-in-out;
    --dig-animation-duration: 0.5s;

    /* Layout & Sizing */
    --dig-sidebar-width: 350px;
    --dig-container-max-width: 1440px;
    --dig-text-max-width: 65ch; /* Ideal line length for readability */
    --dig-header-height: 80px;
    --dig-footer-height: 120px;

    /* Responsive Breakpoints */
    --dig-breakpoint-sm: 576px;
    --dig-breakpoint-md: 768px;
    --dig-breakpoint-lg: 992px;
    --dig-breakpoint-xl: 1200px;

    /* Shadows (Subtle and layered) */
    --dig-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dig-shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --dig-shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --dig-shadow-xl:
      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Z-index Stack (Manages layering of UI elements) */
    --dig-z-index-dropdown: 1000;
    --dig-z-index-sticky: 1020;
    --dig-z-index-fixed: 1030;
    --dig-z-index-modal-backdrop: 1040;
    --dig-z-index-modal: 1050;
    --dig-z-index-popover: 1070;
    --dig-z-index-tooltip: 1080;
    --dig-z-index-toast: 1090;
  }

  /*
   * ========================================================================
   * Dark Mode Theme Overrides (Refactored with HSL Primitives)
   * ========================================================================
   * Instead of redefining every final color, we only change the primitive
   * HSL values. All composite variables (`--dig-color-*`) and the
   * auto-contrast logic will automatically recalculate based on these new
   * primitives. This is the core of the theming system.
   */
  @media (prefers-color-scheme: dark) {
    :root {
      /* --- BRAND COLORS (Dark Mode) --- */
      /* Primary becomes the Deep Night Blue background context */
      --dig-hue-bg: 208;
      --dig-saturation-bg: 62%;
      --dig-lightness-bg: 0.1; /* #0A1B2A Main BG */

      --dig-hue-bg-alt: 222;
      --dig-saturation-bg-alt: 47%;
      --dig-lightness-bg-alt: 0.11; /* #020617 Even darker for depth */

      /* Text becomes light #E6EDF3 */
      --dig-hue-text: 210;
      --dig-saturation-text: 29%;
      --dig-lightness-text: 0.93;

      /* Borders #1E293B */
      --dig-hue-border: 217;
      --dig-saturation-border: 33%;
      --dig-lightness-border: 0.17;

      /* Secondary remains the electric cyan action color */
      --dig-hue-primary: 183;
      --dig-saturation-primary: 71%;
      --dig-lightness-primary: 0.5; /* #25D1DB - Actions pop against dark bg */

      --dig-hue-secondary: 208;
      --dig-saturation-secondary: 62%;
      --dig-lightness-secondary: 0.2; /* Lighter blue for secondary elements */
    }

    /* ========================================================================
   * DARK MODE SPECIFIC ENHANCEMENTS
   * ========================================================================
   */

    /* Improved focus visibility in dark mode */
    :focus-visible {
      outline-color: var(--dig-color-accent-light);
      outline-width: 3px; /* Thicker outline for better contrast */
    }

    /* Enhanced contrast for form controls in dark mode */
    :is(.dig-content-flow, .dig-admin-context)
      :is(input, textarea, select).dig-form-control {
      background-color: hsl(
        var(--dig-hue-bg-alt),
        var(--dig-saturation-bg-alt),
        calc(var(--dig-lightness-bg-alt) * 100%)
      );
      border-color: var(--dig-color-border);
    }

    /* Better image rendering in dark mode */
    img {
      filter: brightness(0.9) contrast(1.1);
    }

    /* Improved disabled state visibility */
    .dig-btn:disabled,
    .dig-btn[aria-disabled="true"] {
      background-color: hsl(
        var(--dig-hue-border),
        var(--dig-saturation-border),
        calc((var(--dig-lightness-border) + 0.1) * 100%)
      );
      color: hsl(
        var(--dig-hue-text),
        var(--dig-saturation-text),
        calc((var(--dig-lightness-text) - 0.3) * 100%)
      );
    }

    /* Enhanced ghost button hover in dark mode */
    .dig-btn-ghost:hover {
      background-color: hsl(0, 0%, 20%);
    }
  }

  /*
 * ========================================================================
 * SAFE GLOBAL RESETS
 * ========================================================================
 * These rules are safe to apply globally because they target root elements
 * or use universal selectors that establish a baseline without destroying layouts.
 */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin ONLY from the body. This is a common and generally safe reset. */
  body {
    margin: 0;
  }

  /*
 * ========================================================================
 * SCOPED RESETS FOR FRAMEWORK COMPONENTS
 * ========================================================================
 * These rules are DANGEROUS if applied globally. We scope them so they ONLY
 * apply to elements inside our controlled containers (.dig-content-flow for frontend,
 * .dig-admin-context for our custom admin pages). This prevents any conflict
 * with the native WordPress Admin UI.
 */
  :is(.dig-content-flow, .dig-admin-context)
    :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  /* Set core root defaults */
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
    scroll-padding-top: var(--dig-header-height);
  }

  /* Set SAFE core body defaults */
  body {
    min-height: 100dvh;
    background-color: var(--dig-color-bg); /* Background color is safe */
    margin: 0; /* The margin reset is here */
  }

  /* Apply typographic styles ONLY within framework-controlled containers */
  :is(.dig-content-flow, .dig-admin-context) {
    font-family: var(--dig-font-secondary);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--dig-font-sans);
    font-optical-sizing: auto;
  }
  code,
  pre,
  kbd,
  samp {
    font-family: var(--dig-font-mono);
  }

  .metric,
  .table {
    font-feature-settings: "tnum" 1;
  }

  .dig-table td:not(:first-child),
  .dig-table th:not(:first-child) {
    white-space: nowrap;
    text-align: right;
  }

  /* Remove list styles on ul, ol elements */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Make images easier to work with */
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  :is(
    .dig-btn,
    .dig-form-control,
    .dig-form-check-input,
    .dig-form-switch input,
    [class*="dirpros-input"]
  ) {
    font: inherit;
  }

  /* Remove all animations, transitions and smooth scroll for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .dig-skeleton {
      animation: none;
    }
  }

  /* Focus styles */
  :focus-visible {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Remove focus styles for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-track {
    background: var(--dig-color-bg-alt);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--dig-color-primary);
    border-radius: var(--dig-radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--dig-color-primary-light);
  }

  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--dig-color-primary) var(--dig-color-bg-alt);
  }

  /* Scoped Typography: Headings will only use framework styles inside designated containers. */
  :is(.dig-content-flow, .dig-admin-context) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--dig-font-primary);
    font-weight: 700;
    color: var(--dig-color-primary);
    line-height: 1.2;
    margin-bottom: var(--dig-spacing-sm);
    text-wrap: balance;
  }
  :is(.dig-content-flow, .dig-admin-context) h1 {
    font-size: var(--dig-font-size-h1);
  }
  :is(.dig-content-flow, .dig-admin-context) h2 {
    font-size: var(--dig-font-size-h2);
  }
  :is(.dig-content-flow, .dig-admin-context) h3 {
    font-size: var(--dig-font-size-h3);
  }
  :is(.dig-content-flow, .dig-admin-context) h4 {
    font-size: var(--dig-font-size-h4);
  }
  :is(.dig-content-flow, .dig-admin-context) h5 {
    font-size: var(--dig-font-size-h5);
  }
  :is(.dig-content-flow, .dig-admin-context) h6 {
    font-size: var(--dig-font-size-h6);
    color: var(--dig-color-text-muted);
  }

  /* Scoped Paragraphs */
  :is(.dig-content-flow, .dig-admin-context) p {
    margin-bottom: var(--dig-spacing-xxs);
    max-width: var(--dig-text-max-width);
    text-wrap: pretty;
  }

  /* Links */
  /*
 * ========================================================================
 * The New, SAFE Global Link Reset
 * ========================================================================
 * We REMOVE `color: inherit;` from the global scope. The only safe global
 * resets are for text-decoration and transitions. Color will now be handled
 * explicitly only within our controlled contexts.
 */
  a {
    text-decoration: none; /* This is safe and desirable */
    transition:
      color var(--dig-transition-fast),
      text-decoration-color var(--dig-transition-fast); /* This is safe */
  }

  /*
 * ========================================================================
 * Scoped Link Styling for Framework Content
 * ========================================================================
 * Now, we apply our desired link colors ONLY inside our framework's containers.
 * We also explicitly exclude any element styled as a button (both our framework's
 * .dig-btn and WordPress's .button) to prevent any possible conflict.
 */
  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button) {
    color: var(--dig-color-primary); /* Our default framework link color */
  }

  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button):hover,
  :is(.dig-content-flow, .dig-admin-context)
    a:not(.dig-btn):not(.button):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Opt-in Framework Link Styles */
  /* Apply your custom link styles ONLY inside your designated containers. */
  .dig-content-flow a:not(.dig-btn),
  .dig-admin-context a:not(.dig-btn) {
    color: var(--dig-color-primary);
    text-decoration: none;
  }

  .dig-content-flow a:not(.dig-btn):hover,
  .dig-content-flow a:not(.dig-btn):focus,
  .dig-admin-context a:not(.dig-btn):hover,
  .dig-admin-context a:not(.dig-btn):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Lists */
  /**
 * Modern List Reset
 * Instead of applying padding globally, we remove default padding and margin.
 * Specific components should define their own list styles. This prevents
 * unintended side effects in third-party UIs like the WordPress admin.
 */
  ul,
  ol {
    /* Remove browser-default indentation and margin */
    padding: 0;
    margin: 0;
    /* The list-style is kept, to be overridden by components as needed */
  }

  /* We can keep a default bottom margin for lists that are direct children
   of a typical content flow, but NOT for all lists everywhere. */
  .dig-content-flow > ul,
  .dig-content-flow > ol {
    margin-bottom: var(--dig-spacing-sm);
    padding-left: var(--dig-spacing-md); /* Apply indentation only here */
  }

  .dig-content-area li {
    margin-bottom: var(--dig-spacing-xs);
  }

  /* Blockquotes */
  blockquote {
    border-left: 4px solid var(--dig-color-accent);
    padding-left: var(--dig-spacing-sm);
    color: var(--dig-color-primary);
    font-style: italic;
    margin: var(--dig-spacing-md) 0;
  }

  /* Code */
  code {
    font-family: var(--dig-font-mono);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
  }

  pre {
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
    overflow-x: auto;
    margin-bottom: var(--dig-spacing-md);
  }

  pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Horizontal Rule */
  hr {
    /* We only reset the border and height globally. */
    border: 0;
    height: 1px;
    background-color: var(--dig-color-border);
    margin: 0; /* The global reset now removes all margins. */
  }

  /* SCOPED MARGINS: Apply our custom spacing ONLY inside our containers. */
  :is(.dig-content-flow, .dig-admin-context) hr {
    margin: var(--dig-spacing-md) 0;
  }

  /* Text-level semantics */
  strong {
    font-weight: 700;
  }

  em {
    font-style: italic;
  }

  small {
    font-size: var(--dig-font-size-small);
  }

  mark {
    background-color: var(--dig-color-secondary);
    color: var(--dig-color-primary);
    padding: 0 0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-decoration-style: dotted;
    cursor: help;
  }

  @media print {
    @layer print {
      *,
      *::before,
      *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      body {
        font-size: 12pt;
        line-height: 1.5;
      }

      a,
      a:visited {
        text-decoration: underline;
      }

      a[href^="#"]::after,
      a[href^="javascript:"]::after {
        content: "";
      }

      pre,
      blockquote {
        page-break-inside: avoid;
      }

      tr,
      img {
        page-break-inside: avoid;
      }

      img {
        max-width: 100% !important;
      }

      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3;
      }

      h2,
      h3 {
        page-break-after: avoid;
      }

      .no-print {
        display: none !important;
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    :focus-visible {
      outline-color: var(--dig-color-accent-light);
    }
  }

  /* ==========================================================================
   Component: BlurHash Image Placeholder (Anti-Layout-Shift Version)
   ========================================================================== */
  .dig-image-blurhash-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* O var(--image-aspect-ratio, 16 / 9) */
    background-color: var(--dig-color-bg-alt);
  }

  .dig-blurhash-canvas,
  .dig-blurhash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-blurhash-canvas {
    z-index: 1;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image.is-loaded {
    opacity: 1;
  }

  .dig-content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
  }
}

/* ==========================================================================
   3. Layer 'components'
   ========================================================================== */
@layer components {
  .dig-skeleton {
    background-color: var(--dig-color-bg-alt);
    background-image: linear-gradient(
      90deg,
      var(--dig-color-bg-alt) 25%,
      var(--dig-color-bg) 50%,
      var(--dig-color-bg-alt) 75%
    );
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite linear;
    border-radius: var(--dig-radius-sm);
    color: transparent; /* Hides text inside a skeleton element */
  }

  /*
   * 1. The Row Container (`.dig-form-row`)
   * This is the flex container. The magic is in the negative margins.
   */
  .dig-form-row {
    display: flex;
    flex-wrap: wrap;

    /* Define the horizontal gap as a variable for easy tuning. */
    --dig-grid-gap-x: var(--dig-spacing-md, 1.5rem);

    /* The negative margin on each side is HALF of the total desired gap. */
    /* This pulls the child columns outwards, aligning them perfectly with the page grid. */
    margin-right: calc(var(--dig-grid-gap-x) / -2);
    margin-left: calc(var(--dig-grid-gap-x) / -2);
  }

  /* Add a consistent vertical gap between rows. */
  .dig-form-row + .dig-form-row {
    margin-top: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 2. The Column Items (`.dig-form-group`)
   * These are the flex items. The padding creates the gutter.
   */
  .dig-form-row > .dig-form-group {
    box-sizing: border-box; /* Crucial for correct padding calculation. */

    /* The horizontal "gutter" is created by adding padding on each side of the column. */
    /* The padding value is HALF of the total desired gap. */
    padding-right: calc(var(--dig-grid-gap-x) / 2);
    padding-left: calc(var(--dig-grid-gap-x) / 2);

    /* A consistent bottom margin for vertical rhythm within rows. */
    margin-bottom: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 3. Column Width Definitions (`.dig-col-*`)
   * We use `flex-basis` for the ideal width. The `max-width` prevents
   * shrinking/growing issues. `flex-grow: 0` is also important.
   */
  [class*="dig-col-"] {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .dig-col-100 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .dig-col-75 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .dig-col-66 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
  }
  .dig-col-50 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .dig-col-33 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
  .dig-col-25 {
    flex-basis: 25%;
    max-width: 25%;
  }

  /*
   * 4. Responsive Stacking for Mobile
   */
  @media (max-width: var(--dig-breakpoint-md)) {
    html {
      scroll-padding-top: calc(var(--dig-header-height) / 2);
    }
    /* On smaller screens, the row no longer needs negative margins. */
    .dig-form-row {
      margin-right: 0;
      margin-left: 0;
    }

    /* Each column now takes up the full width and has its padding reset. */
    /* We use a direct child selector for precision. */
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important; /* Force full width */
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: var(--dig-spacing-md);
    }

    .dig-form-row > .dig-form-group:last-child {
      margin-bottom: 0;
    }
  }

  @container (max-width: 400px) {
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important;
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Container */
  .dig-container {
    width: 100%;
    max-width: var(--dig-container-max-width);
    margin: 0 auto;
    padding: var(--dig-spacing-md);
  }

  /* Layout Patterns */
  .dig-layout-z {
    display: grid;
    grid-template-areas:
      "header header"
      "left right"
      "footer footer";
    grid-template-columns: 1fr 1fr;
    gap: var(--dig-spacing-md);
  }

  .dig-layout-z > header {
    grid-area: header;
  }
  .dig-layout-z > .left {
    grid-area: left;
  }
  .dig-layout-z > .right {
    grid-area: right;
  }
  .dig-layout-z > footer {
    grid-area: footer;
  }

  .dig-layout-f {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dig-spacing-md);
  }

  /* Grid System */
  .dig-grid {
    display: grid;
    gap: var(--dig-spacing-md);
  }

  .dig-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dig-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Custom Grid for Dossier (Left column wider) */
  .dig-grid-cols-3 > .dig-col:first-child {
    grid-column: span 2; /* Ocupa 2/3 del espacio */
  }
  .dig-grid-cols-3 > .dig-col:last-child {
    grid-column: span 1; /* Ocupa 1/3 del espacio */
  }

  /* Subgrid Support */
  @supports (grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
    }
  }

  /* Flex Utilities */
  .dig-flex {
    display: flex;
    gap: var(--dig-spacing-sm);
  }

  .dig-flex-col {
    flex-direction: column;
  }

  .dig-flex-wrap {
    flex-wrap: wrap;
  }

  .dig-items-center {
    align-items: center;
  }

  .dig-justify-between {
    justify-content: space-between;
  }

  /* Spacing Utilities */
  .dig-gap-xs {
    gap: var(--dig-spacing-xs);
  }
  .dig-gap-sm {
    gap: var(--dig-spacing-sm);
  }
  .dig-gap-md {
    gap: var(--dig-spacing-md);
  }
  .dig-gap-lg {
    gap: var(--dig-spacing-lg);
  }
  .dig-gap-xl {
    gap: var(--dig-spacing-xl);
  }

  .dig-p-xs {
    padding: var(--dig-spacing-xs);
  }
  .dig-p-sm {
    padding: var(--dig-spacing-sm);
  }
  .dig-p-md {
    padding: var(--dig-spacing-md);
  }
  .dig-p-lg {
    padding: var(--dig-spacing-lg);
  }
  .dig-p-xl {
    padding: var(--dig-spacing-xl);
  }

  .dig-m-xs {
    margin: var(--dig-spacing-xs);
  }
  .dig-m-sm {
    margin: var(--dig-spacing-sm);
  }
  .dig-m-md {
    margin: var(--dig-spacing-md);
  }
  .dig-m-lg {
    margin: var(--dig-spacing-lg);
  }
  .dig-m-xl {
    margin: var(--dig-spacing-xl);
  }

  /* Full viewport sections */
  .dig-full-viewport {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Scroll Snap */
  .dig-scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100dvh;
  }

  .dig-scroll-section {
    scroll-snap-align: start;
    min-height: 100dvh;
  }

  /* Container Queries */
  .dig-card-container {
    container-type: inline-size;
  }

  @container (min-width: 480px) {
    .dig-card {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Anchor Positioning */
  .dig-tooltip {
    position: absolute;
    anchor-name: --tooltip-anchor;
  }

  .dig-tooltip-content {
    position: absolute;
    bottom: anchor(--tooltip-anchor top);
    left: anchor(--tooltip-anchor left);
  }

  .dig-hero-title {
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--dig-color-primary);
  }

  @media (max-width: 480px) {
    .dig-hero-title {
      line-height: 1.1;
    }
    .dig-hero-title .dig-text-accent {
      font-size: 0.95em;
    }
  }

  .dig-grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dig-spacing-lg);
  }

  /* --- UNICORN MARKETING STYLES --- */

  /* 1. Hero Glow Effect */
  .dig-hero-glow {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-top: 1px solid var(--dig-color-border);
  }

  /* 2. Unicorn Cards */
  .dig-card-feature {
    background: #fff;
    border: 1px solid var(--dig-color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
  }
  .dig-card-feature:hover {
    transform: translateY(-5px);
    border-color: var(--dig-color-secondary);
    box-shadow: 0 20px 40px -10px rgba(37, 209, 219, 0.15); /* Secondary color shadow */
  }

  /* 3. Icon Badges */
  .dig-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(37, 209, 219, 0.1); /* Secondary with opacity */
    color: var(--dig-color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* 4. Process Steps (Connectors) */
  .dig-step-connector {
    position: relative;
  }
  @media (min-width: 992px) {
    .dig-step-connector:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 24px;
      left: 60%;
      width: 80%;
      height: 2px;
      background: linear-gradient(
        90deg,
        var(--dig-color-border) 50%,
        transparent 100%
      );
      z-index: 0;
    }
  }

  /* Update Process Steps */
  .dig-step-number {
    color: var(--dig-color-secondary);
    opacity: 0.4;
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
  }
  .dig-step h3 {
    color: var(--dig-color-primary);
    margin-top: -1rem; /* Slightly overlap */
    position: relative;
    z-index: 2;
  }

  /*
 * ========================================================================
 * Layout Component: Admin UI Sidebar Layout
 * ========================================================================
 * Provides a two-column layout for application-like interfaces in the admin.
 */
  .dig-layout-sidebar {
    display: grid;
    /* Sidebar width is fixed, main content is flexible */
    grid-template-columns: var(--dig-sidebar-width) 1fr;
    gap: var(--dig-spacing-md);
    /* Make the layout fill the available vertical space */
    height: calc(
      100vh - 180px
    ); /* Adjust 180px based on WP admin header/footer height */
    overflow: hidden; /* Prevent double scrollbars on the main wrapper */
  }

  .dig-layout-sidebar__sidebar {
    background-color: var(--dig-color-bg-alt);
    border-right: 1px solid var(--dig-color-border);
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling ONLY for the sidebar content */
  }

  .dig-layout-sidebar__main {
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling for the main content (iframe) */
  }

  .dig-layout-sidebar__main iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg); /* For loading state */
  }

  /* Responsive behavior for the admin layout */
  @media (max-width: var(--dig-breakpoint-lg)) {
    .dig-layout-sidebar {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
      height: auto;
      overflow: visible;
    }
    .dig-layout-sidebar__sidebar {
      border-right: none;
      border-bottom: 1px solid var(--dig-color-border);
    }
  }

  /*
 * ========================================================================
 * Component: Buttons (Design Token Architecture + Progressive Contrast)
 * ========================================================================
 * Goals:
 * - Variants only override tokens (no duplicated logic).
 * - Base consumes tokens.
 * - Auto-contrast via color-contrast() when supported.
 * - Safe fallbacks for legacy browsers.
 */

  /* ------------------------------------------------------------------------
 * 1) Base (structure + token defaults)
 * ------------------------------------------------------------------------ */
  .dig-btn {
    /* --- Token Defaults (can be overridden by variants) --- */
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-fg: var(--dig-color-text);
    --btn-bg-hover: color-mix(in srgb, var(--btn-bg), black 10%);
    --btn-border-hover: var(--btn-border);
    --btn-shadow-hover: var(--dig-shadow-md);

    /* --- Structure & Typography --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dig-spacing-xs);
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--btn-border);
    border-radius: var(--dig-radius-full);
    cursor: pointer;

    /* --- Visual --- */
    background-color: var(--btn-bg);
    color: var(--btn-fg);

    /* --- Transitions (optimized) --- */
    transition:
      background-color var(--dig-transition-fast),
      border-color var(--dig-transition-fast),
      color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  /* ------------------------------------------------------------------------
 * 2) Interaction & Accessibility states
 * ------------------------------------------------------------------------ */
  .dig-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-shadow-hover);
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    will-change: transform, box-shadow;
  }

  .dig-btn:focus-visible {
    outline: 2px solid var(--dig-color-accent);
    outline-offset: 2px;
  }

  .dig-btn:active {
    transform: translateY(0);
    box-shadow: var(--dig-shadow-sm);
  }

  .dig-btn:disabled,
  .dig-btn[aria-disabled="true"] {
    --btn-bg: var(--dig-color-border);
    --btn-border: var(--dig-color-border);
    --btn-fg: var(--dig-color-text-muted);
    background-color: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-fg);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .dig-btn {
      transition:
        background-color var(--dig-transition-fast),
        border-color var(--dig-transition-fast),
        color var(--dig-transition-fast),
        box-shadow var(--dig-transition-fast);
    }
    .dig-btn:hover {
      transform: none;
      will-change: auto;
    }
    .dig-btn:active {
      transform: none;
    }
  }

  /* ------------------------------------------------------------------------
 * 3) Variants (token overrides only)
 * ------------------------------------------------------------------------ */

  /* Primary */
  .dig-btn-primary,
  .dig-btn--primary {
    --btn-bg: var(--dig-color-primary);
    --btn-border: var(--dig-color-primary);
    --btn-fg: #ffffff; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-primary), white 8%);
    --btn-border-hover: var(--dig-color-primary);
  }

  /* Secondary */
  .dig-btn-secondary,
  .dig-btn--secondary {
    --btn-bg: var(--dig-color-secondary);
    --btn-border: var(--dig-color-secondary);
    --btn-fg: #000000; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-secondary), black 10%);
    --btn-border-hover: var(--dig-color-secondary);
  }

  /* Accent (optional) */
  .dig-btn-accent,
  .dig-btn--accent {
    --btn-bg: var(--dig-color-accent);
    --btn-border: var(--dig-color-accent);
    --btn-fg: #0a1b2a; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-accent), black 10%);
    --btn-border-hover: var(--dig-color-accent);
  }

  /* Outline */
  .dig-btn-outline,
  .dig-btn--outline {
    --btn-bg: transparent;
    --btn-border: var(--dig-color-primary);
    --btn-fg: var(--dig-color-primary);
    --btn-bg-hover: var(--dig-color-bg-alt);
    --btn-border-hover: var(--dig-color-primary);
  }

  /* Ghost */
  .dig-btn-ghost,
  .dig-btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-fg: var(--dig-color-primary);
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-bg), black 6%);
    --btn-border-hover: transparent;
  }

  /* Dark-scheme tweak for ghost hover */
  @media (prefers-color-scheme: dark) {
    .dig-btn-ghost,
    .dig-btn--ghost {
      --btn-bg-hover: color-mix(in srgb, var(--dig-color-bg), white 8%);
    }
    .dig-hero-glow {
      background: radial-gradient(circle at 50% -20%, #112a45 0%, #020617 60%);
    }
  }

  /* ------------------------------------------------------------------------
 * 4) Progressive enhancement: automatic foreground contrast
 * ------------------------------------------------------------------------ */
  /*
  If supported, the button auto-selects white/black text depending on bg.
  Outline/ghost stay brand-colored since bg may be transparent.
  */
  @supports (color: color-contrast(white vs black)) {
    .dig-btn {
      --btn-fg: color-contrast(var(--btn-bg) vs white, black);
    }

    .dig-btn-outline,
    .dig-btn--outline,
    .dig-btn-ghost,
    .dig-btn--ghost {
      --btn-fg: var(--dig-color-primary);
    }
  }

  /* ------------------------------------------------------------------------
 * 5) Sizes (keep your API)
 * ------------------------------------------------------------------------ */
  .dig-btn-xs,
  .dig-btn--xs {
    padding: var(--dig-spacing-xxs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-sm,
  .dig-btn--sm {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-md,
  .dig-btn--md {
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-size: 0.95rem;
  }

  .dig-btn-lg,
  .dig-btn--lg {
    padding: var(--dig-spacing-md) var(--dig-spacing-lg);
    font-size: var(--dig-font-size-h5);
  }

  .dig-btn-xl,
  .dig-btn--xl {
    padding: var(--dig-spacing-lg) var(--dig-spacing-xl);
    font-size: var(--dig-font-size-h4);
  }

  /* ------------------------------------------------------------------------
 * 6) Icons helpers
 * ------------------------------------------------------------------------ */
  .dig-btn--with-icon {
    gap: var(--dig-spacing-xs);
  }

  .dig-btn__icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
  }

  .dig-btn__icon--start {
    order: -1;
  }
  .dig-btn__icon--end {
    order: 1;
  }

  /* ------------------------------------------------------------------------
 * 7) High contrast mode support
 * ------------------------------------------------------------------------ */
  @media (prefers-contrast: high) {
    .dig-btn {
      border-width: 1.5px;
    }
    .dig-btn:focus-visible {
      outline-width: 3px;
      outline-offset: 1px;
    }
    .dig-btn-outline,
    .dig-btn--outline {
      border-width: 1.5px;
    }
  }

  /* --- 12. PRINT STYLES --- */
  @media print {
    .dig-btn {
      background-color: #000 !important;
      color: #fff !important;
      border: 1px solid #000 !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .dig-btn-outline {
      background-color: transparent !important;
      color: #0b2239 !important;
      border: 1.5px solid #0b2239 !important;
    }
  }

  /* Cards */
  .dig-card {
    background: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-sm);
    overflow: hidden;
    transition:
      transform var(--dig-transition-base),
      box-shadow var(--dig-transition-base);
  }

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

  .dig-card-header {
    padding: var(--dig-spacing-md);
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-card-body {
    padding: var(--dig-spacing-md);
  }

  .dig-card-footer {
    padding: var(--dig-spacing-md);
    border-top: 1px solid var(--dig-color-border);
  }

  /*
   * ========================================================================
   * Component: Integration Marketplace Cards
   * ========================================================================
   */
  .dig-integration-card {
    /* Smooth transition for hover effects */
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
    cursor: pointer;
    display: flex; /* Ensure it behaves as a flex container if needed */
    flex-direction: column;
    height: 100%; /* Make cards equal height in grid */
  }

  .dig-integration-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 10px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
    /* Use primary color or accent color for border on hover */
    border-color: var(--dig-color-primary);
  }

  /* Active State (Green Border & Subtle Background) */
  .dig-integration-card--active {
    border-color: var(--dig-color-success);
    background: linear-gradient(
      to bottom,
      var(--dig-color-bg),
      var(--dig-color-success-bg)
    );
  }

  /* Ensure the badge inside the active card looks correct */
  .dig-integration-card--active .dig-badge-success {
    background-color: var(--dig-color-success-bg);
    color: var(--dig-color-success-text);
    border: 1px solid var(--dig-color-success-border);
  }

  /* Forms */
  .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }

  /*
   * ========================================================================
   * Form Field UI Helpers (Required Indicators, Instructions, Errors)
   * ========================================================================
   */

  /*
   * Styles for the red asterisk (*) on required fields.
   */
  .dig-required-indicator {
    color: var(--dig-color-danger);
    font-weight: bold;
    margin-left: var(--dig-spacing-xxs);
  }

  /*
   * Styles for the wrapper of the actual input/select/textarea.
   */
  .dig-form-control-wrapper {
    position: relative; /* Useful for positioning icons inside inputs */
  }

  /*
   * Styles for instructional/help text below a field.
   */
  .dig-form-instructions {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
    margin-top: var(--dig-spacing-xs);
  }

  /*
   * Styles for the container of validation error messages.
   */
  .dig-field-errors {
    margin-top: var(--dig-spacing-xs);
  }

  .dig-error-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-error-item {
    color: var(--dig-color-danger);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
  }

  /*
 * ========================================================================
 * Component: Password Field with Visibility Toggle
 * ========================================================================
 * Styles for positioning the visibility toggle button inside the password
 * input field for a modern, clean user experience.
 */

  /*
 * 1. The Wrapper: `.dig-password-input-wrapper`
 * This is the container for both the input and the button. By setting
 * `position: relative`, it becomes the positioning context for the
 * absolutely positioned button inside it.
 */
  .dig-password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /*
 * 2. The Input Field
 * We add padding to the right side of the input field. This creates a
 * dedicated space for the toggle button, preventing the user's typed
 * text from overlapping with the button icon.
 */
  .dig-password-input-wrapper .dig-form-control {
    /* The padding needs to be wide enough for the button plus some breathing room.
       A value around 2.5em or 40px is usually a good starting point. */
    padding-right: 2.5em;
    width: 100%; /* Ensure the input still fills its container. */
  }

  /*
 * 3. The Toggle Button
 * This is the core of the technique. We use `position: absolute` to pull the
 * button out of the normal document flow and place it precisely where we want
 * it, visually "inside" the input field.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn {
    position: absolute;
    right: var(
      --dig-spacing-sm
    ); /* Position from the right edge. Uses your spacing variable. */
    top: 50%;
    transform: translateY(
      -50%
    ); /* This vertically centers the button perfectly. */

    /* Reset button styles for a clean, icon-only look */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--dig-color-text-muted); /* A subtle color for the icon. */
    height: 100%; /* Make the clickable area vertically fill the input. */
    display: inline-flex;
    align-items: center;

    /* Ensure it appears above the input field's content/border */
    z-index: 2;

    /* Smooth transition for color changes on hover/focus */
    transition: color var(--dig-transition-fast) ease-in-out;
  }

  /*
 * 4. Interaction States (Hover/Focus)
 * Provide clear visual feedback when the user interacts with the button.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn:hover,
  .dig-password-input-wrapper .dig-password-toggle-btn:focus-visible {
    color: var(--dig-color-primary); /* Use your primary color for emphasis. */
  }

  /* Remove default focus outline if you have a custom one via color change */
  .dig-password-input-wrapper .dig-password-toggle-btn:focus {
    outline: none;
  }

  /*
 * 5. The Dashicon inside the button
 * Adjust the icon size for optimal appearance.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    vertical-align: middle; /* Helps with pixel-perfect alignment. */
  }

  /* ==========================================================================
   Component: Image Selector
   ========================================================================== */
  .dig-image-selector-ui {
    display: flex;
    align-items: flex-start; /* Alinea los items arriba */
    gap: var(--dig-spacing-md);
  }

  .dig-image-preview-area {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--dig-color-bg-alt);
  }

  .dig-image-preview-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-image-placeholder {
    text-align: center;
    color: var(--dig-color-text-muted);
    font-size: var(--dig-font-size-small);
  }

  .dig-image-actions {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-btn-text-danger {
    background: none;
    border: none;
    padding: 0;
    color: var(--dig-color-danger);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--dig-font-size-small);
  }
  .dig-btn-text-danger:hover {
    text-decoration: none;
  }

  /*
   * 1. The Real Input: `.dig-file-input-real`
   * We use the "visually-hidden" technique. This hides the element from view
   * but keeps it in the DOM, focusable, and fully functional for assistive
   * technologies and form submissions. It's the most accessible way to
   * create a custom file input.
  */
  .dig-file-input-real {
    /* Visually-Hidden Technique */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /*
   * 2. The Custom Button (The Label)
   * When a user focuses the visually-hidden input via keyboard (e.g., Tabbing),
   * we want to show a focus state on the VISIBLE label to provide feedback.
   * The `+` selector targets the label that immediately follows the input.
  */
  .dig-file-input-real:focus-visible + .dig-btn {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 2px;
  }

  /*
   * 3. The Control UI Wrapper
   * This helps align the custom button and the filename display.
  */
  .dig-file-control-ui {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
  }

  /*
   * 4. The Filename Display Area
   * Styles for the area that shows the name of the selected file.
  */
  .dig-file-display-area {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  .dig-current-file {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
  }

  .dig-remove-file-btn {
    background: none;
    border: none;
    color: var(--dig-color-danger);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 0.25em;
  }

  /* --- UNICORN FOOTER GRID --- */
  .dig-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand takes 2 cols, links take 1 each */
    gap: var(--dig-spacing-xl);
    margin-bottom: var(--dig-spacing-xl);
    text-align: left;
  }

  .dig-footer-brand-name {
    display: block;
    font-size: 1.25rem;
    color: var(--dig-color-primary);
    margin-bottom: 0.5rem;
  }

  .dig-footer-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dig-color-secondary);
    margin-bottom: 1rem;
  }

  .dig-footer-description {
    font-size: 0.95rem;
    color: var(--dig-color-text-muted);
    line-height: 1.6;
    max-width: 300px;
  }

  .dig-footer-nav-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dig-color-text);
    margin-bottom: 1rem;
  }

  .dig-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-footer-nav li {
    margin-bottom: 0.75rem;
  }

  .dig-footer-nav a {
    color: var(--dig-color-text-muted);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .dig-footer-nav a:hover {
    color: var(--dig-color-primary);
  }

  .dig-footer-status {
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: var(--dig-color-success);
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 99px;
  }

  .dig-footer-social {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  .dig-footer-copyright {
    text-align: center;
    font-size: 0.85rem;
    color: var(--dig-color-text-muted);
    opacity: 0.8;
    border-top: 1px solid var(--dig-color-border);
    padding-top: 2rem;
  }

  /*
   * 1. The Main Footer Wrapper (`<footer class="dig-footer">`)
  */
  .dig-footer {
    padding-top: var(--dig-spacing-lg);
    padding-bottom: var(--dig-spacing-lg);
    background-color: var(--dig-color-bg-alt);
    border-top: 1px solid var(--dig-color-border);
    color: var(--dig-color-text-muted);
  }

  .dig-footer--marketing {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .dig-footer--app {
    padding-top: 0;
    padding-bottom: 0;
  }

  .dig-app-footer {
    opacity: 0.5;
    padding: 1rem 0;
    margin-top: auto;
  }

  .dig-footer-tagline {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--dig-color-text);
  }

  .dig-footer-email {
    display: block;
    margin-top: 1rem;
    color: var(--dig-color-primary);
    font-weight: 600;
    text-decoration: none;
  }

  .dig-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .dig-footer-status__icon {
    font-size: 0.875rem;
  }

  .dig-footer-early-access a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dig-color-secondary);
    text-decoration: none;
  }

  .dig-icon-button__icon {
    font-size: 1rem;
  }

  @media (max-width: 768px) {
    .dig-footer--marketing {
      padding-block: 2.5rem 1.5rem;
    }

    .dig-footer--marketing .dig-footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;

      margin-bottom: 1.5rem;
      text-align: left;
    }

    .dig-footer--marketing .dig-footer-brand {
      margin-bottom: 0.5rem;
    }

    .dig-footer--marketing .dig-footer-brand {
      grid-column: 1 / -1;
      text-align: left;
    }

    .dig-footer--marketing .dig-footer-logo,
    .dig-footer--marketing .dig-footer-tagline,
    .dig-footer--marketing .dig-footer-description,
    .dig-footer--marketing .dig-footer-email {
      margin-left: 0;
      margin-right: 0;
      text-align: left;
    }

    .dig-footer--marketing .dig-footer-description {
      max-width: 30rem;
    }

    .dig-footer--marketing .dig-footer-social {
      justify-content: flex-start;
      margin-top: 1rem;
      margin-bottom: 0;
    }

    .dig-footer--marketing .dig-footer-nav {
      min-width: 0;
      text-align: left;
    }

    .dig-footer--marketing .dig-footer-nav-title {
      margin-bottom: 0.75rem;
    }

    .dig-footer--marketing .dig-footer-nav li {
      margin-bottom: 0.5rem;
    }

    .dig-footer--marketing .dig-footer-nav:last-child {
      grid-column: 1 / -1;

      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 0.75rem 1rem;
    }

    .dig-footer--marketing .dig-footer-nav:last-child .dig-footer-nav-title,
    .dig-footer--marketing .dig-footer-nav:last-child ul {
      grid-column: 1 / -1;
    }

    .dig-footer--marketing .dig-footer-nav:last-child ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
    }

    .dig-footer--marketing .dig-footer-nav:last-child li {
      margin: 0;
    }

    .dig-footer--marketing .dig-footer-status {
      grid-column: 1;
      justify-self: start;

      max-width: 100%;
      margin: 0;
      padding: 0.4rem 0.75rem;

      border-radius: 6px;
    }

    .dig-footer--marketing .dig-footer-early-access {
      grid-column: 2;
      align-self: center;
      justify-self: end;

      margin-top: 0 !important;
    }

    .dig-footer--marketing .dig-footer-early-access a {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;

      white-space: nowrap;
    }

    .dig-footer--marketing .dig-footer-copyright {
      padding-top: 1.25rem;
      text-align: left;
    }
  }

  @media (max-width: 360px) {
    .dig-footer--marketing .dig-footer-grid {
      grid-template-columns: 1fr;
    }

    .dig-footer--marketing .dig-footer-brand,
    .dig-footer--marketing .dig-footer-nav:last-child {
      grid-column: 1;
    }

    .dig-footer--marketing .dig-footer-nav:last-child {
      grid-template-columns: 1fr;
    }

    .dig-footer--marketing .dig-footer-status,
    .dig-footer--marketing .dig-footer-early-access {
      grid-column: 1;
      justify-self: start;
    }
  }

  /*
   * 2. The Inner Container (`.dig-footer__inner`)
  */
  .dig-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dig-spacing-md);
  }

  /*
   * 5. The Social Links List (`.dig-social-links`)
  */
  .dig-social-links,
  .dig-social-links li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-social-links {
    display: flex;
    justify-content: center;
    gap: var(--dig-spacing-md);
  }

  /*
   * 6. Individual Social Link Items (`.dig-social-links__item`)
  */
  .dig-social-links__item a {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--dig-color-text-muted);
    text-decoration: none;
    transition:
      color var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  .dig-social-links__item a:hover,
  .dig-social-links__item a:focus-visible {
    color: var(--dig-color-primary);
    transform: translateY(-2px) scale(1.1);
  }

  /*
   * 7. The Dashicon Span
  */
  .dig-social-links__item .dashicons {
    width: 1em;
    height: 1em;
    font-size: inherit;
  }

  /*
   * 8. The Meta/Copyright Text (`.dig-footer__meta`)
  */
  .dig-footer__meta p {
    margin: 0;
    font-size: var(--dig-font-size-small);
  }

  .dig-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
  }

  .dig-brand-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
  }

  /**
	 * ========================================================================
	 * Form Controls (Inputs, Textareas, Selects) - v7 MODERN & CONSOLIDATED
	 * ========================================================================
	 */
  :is(
    input:not(
      [type="range"],
      [type="color"],
      [type="checkbox"],
      [type="radio"],
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="file"]
    ),
    textarea,
    select
  ).dig-form-control {
    width: 100%;
    margin: var(--dig-form-control-margin, 0);
    padding: var(--dig-form-control-padding, var(--dig-spacing-sm));
    font-size: var(--dig-font-size-base);
    color: var(--dig-form-control-color, var(--dig-color-text));
    background-color: var(--dig-form-control-bg, var(--dig-color-bg));
    border: var(--dig-form-control-border, 1px solid var(--dig-color-border));
    border-radius: var(--dig-form-control-radius, var(--dig-radius-md));
    box-shadow: var(--dig-form-control-shadow, none);
    line-height: var(--dig-form-control-line-height, 1.5);
    min-height: var(--dig-form-control-min-height, auto);
    transition:
      border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }

  :is(
      input:not(
        [type="range"],
        [type="color"],
        [type="checkbox"],
        [type="radio"],
        [type="submit"],
        [type="button"],
        [type="reset"],
        [type="file"]
      ),
      textarea,
      select
    ).dig-form-control:focus {
    border-color: var(
      --dig-form-control-focus-border-color,
      var(--dig-color-primary)
    );
    box-shadow: var(
      --dig-form-control-focus-shadow,
      0 0 0 1px var(--dig-color-primary)
    );
    outline: none;
  }

  /*
	   * Placeholder State
	   */
  input.dig-form-control::placeholder,
  textarea.dig-form-control::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 1;
  }

  /*
	   * Disabled State
	   */
  input.dig-form-control:disabled,
  textarea.dig-form-control:disabled,
  select.dig-form-control:disabled {
    background-color: var(--dig-color-bg-alt);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--dig-color-border-light);
  }

  /* ========================================================================
  Form Validation States & Helpers
======================================================================== */
  .digentus-one-field--has-errors .dig-form-control {
    border-color: var(--dig-color-danger);
  }

  .digentus-one-field--has-errors .dig-form-control:focus {
    /* Maintain the error state indication even when focused */
    border-color: var(--dig-color-danger);
    box-shadow: 0 0 0 1px var(--dig-color-danger);
  }

  /*
 * Styles for the error message container itself.
 * This is where the JS will inject the error text.
 */
  .digentus-one-field-error-message {
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-danger);
  }

  .digentus-one-field-error-message ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-xxs);
  }

  .dig-form-text {
    display: block;
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  /* Checkboxes & Radios */
  .dig-form-check {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0;
    vertical-align: middle;
  }

  .dig-form-check-label {
    margin-bottom: 0;
  }

  /* Toggle Switches */
  .dig-form-switch {
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 1.5em;
  }

  .dig-form-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .dig-form-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dig-color-border);
    transition: 0.4s;
    border-radius: var(--dig-radius-full);
  }

  .dig-form-switch-slider:before {
    position: absolute;
    content: "";
    height: 1em;
    width: 1em;
    left: 0.25em;
    bottom: 0.25em;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  input:checked + .dig-form-switch-slider {
    background-color: var(--dig-color-accent);
  }

  input:checked + .dig-form-switch-slider:before {
    transform: translateX(1em);
  }

  /*
   * Custom Select Styling
   */
  .dig-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--dig-spacing-sm) center;
    background-size: 1.2em;
    padding-right: calc(var(--dig-spacing-sm) * 2 + 1.2em);
  }

  /* Remove custom arrow for multiple-select listboxes */
  select[multiple].dig-select {
    background-image: none;
    padding-right: var(--dig-spacing-sm);
    height: auto;
  }

  /* Range */
  .dig-form-range {
    width: 100%;
    height: 0.5em;
    appearance: none;
    background: var(--dig-color-border);
    border-radius: var(--dig-radius-full);
    outline: none;
  }

  .dig-form-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  .dig-form-range::-moz-range-thumb {
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  /*
   * ========================================================================
   * Component: Badges (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-badge {
    /* Base styles remain the same */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  .dig-badge-primary {
    --bg-lightness: var(--dig-lightness-primary);
    background-color: var(--dig-color-primary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-secondary {
    --bg-lightness: var(--dig-lightness-secondary);
    background-color: var(--dig-color-secondary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-accent {
    --bg-lightness: var(--dig-lightness-accent);
    background-color: var(--dig-color-accent);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Navigation */
  .dig-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-md);
  }

  .dig-nav ul,
  [role="menubar"],
  [role="menu"] {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .dig-nav-link {
    color: var(--dig-color-text);
    text-decoration: none;
    transition: color var(--dig-transition-fast);
  }

  .dig-nav-link:hover {
    color: var(--dig-color-primary);
  }

  .dig-nav-link.active {
    color: var(--dig-color-accent);
    font-weight: 600;
  }

  /* Tabs */
  .dig-tab-container {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-tab-list {
    display: flex;
    gap: var(--dig-spacing-md);
  }

  .dig-tab {
    padding: var(--dig-spacing-sm) 0;
    position: relative;
    cursor: pointer;
  }

  .dig-tab.active {
    color: var(--dig-color-accent);
  }

  .dig-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--dig-color-accent);
  }

  .dig-tab-panel {
    display: none;
    padding: var(--dig-spacing-md) 0;
  }

  .dig-tab-panel.active {
    display: block;
  }

  /* Modal */
  .dig-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--dig-z-index-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dig-transition-base);
  }

  .dig-modal.active {
    opacity: 1;
    pointer-events: all;
  }

  .dig-modal .dig-modal-content {
    transform: translateY(0);
  }

  .dig-modal .dig-modal-content {
    background-color: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--dig-shadow-xl);
    transform: translateY(-20px);
    transition: transform var(--dig-transition-base);
  }

  .dig-modal-header {
    padding: var(--dig-spacing-md);
    border-bottom: 1px solid var(--dig-color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dig-modal-body {
    padding: var(--dig-spacing-md);
  }

  .dig-modal-footer {
    padding: var(--dig-spacing-md);
    border-top: 1px solid var(--dig-color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--dig-spacing-sm);
  }

  /* Carousel */
  /*
   * 1. The main component wrapper.
   *    Establishes the positioning context for navigation elements.
   */
  [data-dig-component="carousel"] {
    position: relative;
    /* You can add aspect-ratio for responsive height control if needed */
    /* aspect-ratio: 16 / 9; */
  }

  /*
   * 2. The track wrapper.
   *    Its only job is to hide the overflowing slides.
   */
  .dig-carousel-track-wrapper {
    overflow: hidden;
    border-radius: var(--dig-radius-md); /* Inherit branding */
  }

  /*
   * 3. The track.
   *    This is the flex container that moves. Transitions are handled by JS
   *    to manage the "snap back" for the infinite loop.
   */
  .dig-carousel-track {
    display: flex;
    will-change: transform;
  }

  .dig-carousel-track.is-grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
  }

  /*
   * 4. The individual slides.
   *    They are designed to take up 100% of the container's width.
   */
  .dig-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    /* Add padding here if you want space INSIDE each slide */
    /* padding: var(--dig-spacing-md); */
  }

  /*
   * 5. Navigation Buttons (Prev/Next Arrows).
   *    Styled to look clean and be positioned correctly.
   */
  .dig-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--dig-z-index-sticky); /* Use z-index variable */

    /* Reusing button styles is good, but for overlays, custom is better */
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--dig-color-text-light);
    border: none;
    border-radius: var(--dig-radius-full);
    width: 44px; /* Accessible touch target size */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dig-carousel-btn--prev {
    left: var(--dig-spacing-sm);
  }

  .dig-carousel-btn--next {
    right: var(--dig-spacing-sm);
  }

  /*
   * 6. Dot Navigation.
   *    Positioned at the bottom, centered.
   */
  .dig-carousel-dots {
    position: absolute;
    bottom: var(--dig-spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--dig-z-index-sticky);
    display: flex;
    gap: var(--dig-spacing-xs);
  }

  .dig-carousel-dots button {
    /* Reset button styles for a clean dot */
    padding: 0;
    border: 1px solid var(--dig-color-text-light);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-dots button.is-active {
    background-color: var(--dig-color-text-light);
  }

  .is-static .dig-carousel-btn,
  .is-static .dig-carousel-dots {
    display: none;
  }

  /*Icons*/
  .dig-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em; /* Better vertical alignment with text */
  }

  .dig-icon-button {
    /* Reset button styles for icon-only buttons */
    background: none;
    border: none;
    padding: var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    cursor: pointer;
    line-height: 0;
    color: inherit;
  }

  dig-header-tagline {
    opacity: 0.85;
  }

  .dig-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  @media (prefers-color-scheme: dark) {
    .dig-icon-button:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  /* Tooltips */
  .dig-tooltip {
    position: relative;
    display: inline-block;
  }

  .dig-tooltip-content {
    position: absolute;
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
    white-space: nowrap;
    z-index: var(--dig-z-index-tooltip);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dig-transition-fast);
  }

  .dig-tooltip:hover .dig-tooltip-content {
    opacity: 1;
    visibility: visible;
  }

  .dig-tooltip-top .dig-tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-tooltip-bottom .dig-tooltip-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--dig-spacing-xs);
  }

  .dig-tooltip-left .dig-tooltip-content {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: var(--dig-spacing-xs);
  }

  .dig-tooltip-right .dig-tooltip-content {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: var(--dig-spacing-xs);
  }

  /* Progress */
  .dig-progress {
    height: 0.5em;
    background-color: var(--dig-color-bg-alt);
    border-radius: var(--dig-radius-full);
    overflow: hidden;
  }

  .dig-progress-bar {
    height: 100%;
    background-color: var(--dig-color-primary);
    transition: width var(--dig-transition-slow);
  }

  /* Spinners */
  .dig-spinner {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border: 0.25em solid var(--dig-color-border);
    border-top-color: var(--dig-color-primary);
    border-radius: 50%;
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  /* Avatars */
  .dig-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: var(--dig-color-bg-alt);
    color: var(--dig-color-text);
    font-weight: 600;
    overflow: hidden;
  }

  .dig-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-avatar-sm {
    width: 2em;
    height: 2em;
    font-size: var(--dig-font-size-small);
  }

  .dig-avatar-lg {
    width: 3.5em;
    height: 3.5em;
    font-size: var(--dig-font-size-h5);
  }

  /*
   * ========================================================================
   * Component: Toast Notifications (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-toast-container {
    position: fixed;
    bottom: var(--dig-spacing-md);
    right: var(--dig-spacing-md);
    z-index: var(--dig-z-index-toast);
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
    /* Ensure clicks pass through the container itself */
    pointer-events: none;
  }

  .dig-toast {
    /* Base styles */
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-lg);
    min-width: 250px;
    max-width: 350px;
    /* Allow clicks on the toast messages */
    pointer-events: auto;

    /* Animation initial state */
    transform: translateX(calc(100% + var(--dig-spacing-md)));
    opacity: 0;
    transition:
      transform 0.4s ease-in-out,
      opacity 0.4s ease-in-out;

    /* Default to info style */
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast.show {
    /* Animation final state */
    transform: translateX(0);
    opacity: 1;
  }

  .dig-toast-success {
    --bg-lightness: var(--dig-lightness-success);
    background-color: var(--dig-color-success);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-error {
    --bg-lightness: var(--dig-lightness-danger);
    background-color: var(--dig-color-danger);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-info {
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Accordion */
  .dig-accordion-item {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-accordion-header {
    padding: var(--dig-spacing-sm) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dig-accordion-content {
    padding: var(--dig-spacing-sm) 0;
    display: none;
  }

  .dig-accordion-item.active .dig-accordion-content {
    display: block;
  }

  /* Dropdown */
  .dig-dropdown {
    position: relative;
    display: inline-block;
  }

  .dig-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-md);
    min-width: 200px;
    z-index: var(--dig-z-index-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
      opacity var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  .dig-dropdown.active .dig-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dig-dropdown-item {
    display: block;
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    color: var(--dig-color-text);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-dropdown-item:hover {
    background-color: var(--dig-color-bg-alt);
  }

  /* Breadcrumb */
  .dig-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
  }

  .dig-breadcrumb-item:not(:last-child)::after {
    content: "/";
    color: var(--dig-color-text-muted);
  }

  /* Pagination */
  .dig-pagination {
    display: flex;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-page-item {
    display: inline-flex;
  }

  .dig-page-link {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-sm);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-page-link:hover {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-page-item.active .page-link {
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border-color: var(--dig-color-primary);
  }

  /* Table */
  .dig-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-table th,
  .dig-table td {
    padding: var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    text-align: left;
  }

  .dig-table th {
    background-color: var(--dig-color-bg-alt);
    font-weight: 600;
  }

  .dig-table-striped tbody tr:nth-child(odd) {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-table-hover tbody tr:hover {
    background-color: rgba(0, 8, 45, 0.05);
  }

  /* ==========================================================================
   Web Components & Shadow DOM Support
   ==========================================================================
  */
  :host {
    display: block;
    contain: content;
  }

  ::slotted(*) {
    margin-bottom: var(--dig-spacing-sm);
  }

  ::slotted(h1),
  ::slotted(h2),
  ::slotted(h3) {
    margin-top: var(--dig-spacing-md);
  }

  /* 
 * ==========================================
 * COMPONENT: Site Footer
 * ==========================================
 */

  .dig-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Desktop: 4 columns */
    gap: var(--dig-spacing-xl);
    margin-bottom: var(--dig-spacing-xl);
    text-align: left;
  }

  .dig-footer-brand-name {
    display: block;
    font-size: 1.25rem;
    color: var(--dig-color-primary);
    margin-bottom: 0.5rem;
    font-weight: 700;
  }

  .dig-footer-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dig-color-secondary);
    margin-bottom: 1rem;
  }

  .dig-footer-description {
    font-size: 0.95rem;
    color: var(--dig-color-text-muted);
    line-height: 1.6;
    max-width: 300px;
  }

  .dig-footer-nav-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dig-color-text);
    margin-bottom: 1rem;
  }

  .dig-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-footer-nav li {
    margin-bottom: 0.75rem;
  }

  .dig-footer-nav a {
    color: var(--dig-color-text-muted);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .dig-footer-nav a:hover {
    color: var(--dig-color-primary);
  }

  .dig-footer-copyright {
    text-align: center;
    font-size: 0.85rem;
    color: var(--dig-color-text-muted);
    opacity: 0.8;
    border-top: 1px solid var(--dig-color-border);
    padding-top: 2rem;
    margin-top: 2rem;
  }

  /* --- RESPONSIVE FOOTER --- */
  @media (max-width: 992px) {
    .dig-grid-cols-3 > .dig-col {
      grid-column: span 1 !important;
    }
    .dig-footer-grid {
      grid-template-columns: 1fr 1fr; /* Tablet: 2 columns */
      gap: var(--dig-spacing-lg);
    }
    .dig-footer-brand {
      grid-column: span 2; /* Brand takes full width on tablet */
      text-align: center;
      margin-bottom: var(--dig-spacing-lg);
    }
    .dig-footer-description {
      margin: 0 auto; /* Center description */
    }
  }

  @media (max-width: 576px) {
    .dig-footer-grid {
      grid-template-columns: 1fr; /* Mobile: 1 column stack */
      text-align: center;
      gap: var(--dig-spacing-xl);
    }
    .dig-footer-brand {
      grid-column: span 1;
    }
    .dig-footer-nav-title {
      margin-top: var(--dig-spacing-md);
    }
  }
}

/* ==========================================================================
   4. Layer 'themes'
   ========================================================================== */
@layer themes {
  /* Reduced data mode */
  @media (prefers-reduced-data: reduce) {
    * {
      background-image: none !important;
    }

    img,
    video {
      display: none !important;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: more) {
    :root {
      --dig-color-border: #000000;
    }
    body {
      background-image: none !important;
    }
    img {
      filter: contrast(1.5) !important;
    }
    :focus-visible {
      outline-width: 3px;
    }
    .dig--has-errors > .dig-form-control {
      outline: 2px solid var(--dig-color-danger);
      box-shadow: none;
    }
    .dig-form-control::placeholder {
      color: var(--dig-color-text);
      opacity: 1;
    }
  }

  /* --- THEME: ENTERPRISE (Dark Mode Override) --- */
  .d1-theme-enterprise {
    --dig-color-bg: #0a1b2a; /* Navy Deep */
    --dig-color-bg-alt: #06131f; /* Darker Sidebar */
    --dig-color-text: #e6edf3; /* Light Text */
    --dig-color-text-muted: #94a3b8;
    --dig-color-border: #1e293b; /* Slate Border */
    --dig-color-primary: #25d1db; /* Cyan Electric */
  }
  /* Apply background to the wrapper when theme class is present */
  .d1-theme-enterprise .d1-dashboard-wrapper {
    background-color: var(--dig-color-bg);
    color: var(--dig-color-text);
  }

  body.d1-theme-enterprise {
    background-color: #0a1b2a !important;
    margin: 0;
  }
}

/* ==========================================================================
   5. Layer 'utilities'
   ========================================================================== */
@layer utilities {
  /* Text Utilities */
  .dig-text-center {
    text-align: center;
  }
  .dig-text-left {
    text-align: left;
  }
  .dig-text-right {
    text-align: right;
  }
  .dig-text-uppercase {
    text-transform: uppercase;
  }
  .dig-text-lowercase {
    text-transform: lowercase;
  }
  .dig-text-capitalize {
    text-transform: capitalize;
  }
  .dig-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dig-text-wrap-balance {
    text-wrap: balance;
  }
  .dig-text-wrap-pretty {
    text-wrap: pretty;
  }

  /* Color Utilities */
  .dig-text-primary {
    color: var(--dig-color-primary);
  }
  .dig-text-secondary {
    color: var(--dig-color-secondary);
  }
  .dig-text-accent {
    color: var(--dig-color-accent);
  }
  .dig-hero-title .dig-text-accent {
    position: relative;
    top: 0.02em;
  }
  .dig-text-success {
    color: var(--dig-color-success);
  }
  .dig-text-warning {
    color: var(--dig-color-warning);
  }
  .dig-text-danger {
    color: var(--dig-color-danger);
  }
  .dig-text-info {
    color: var(--dig-color-info);
  }
  .dig-text-muted {
    color: var(--dig-color-text-muted);
  }
  .dig-text-light {
    color: var(--dig-color-text-light);
  }

  .dig-bg-primary {
    background-color: var(--dig-color-primary);
  }
  .dig-bg-secondary {
    background-color: var(--dig-color-secondary);
  }
  .dig-bg-accent {
    background-color: var(--dig-color-accent);
  }
  .dig-bg-success {
    background-color: var(--dig-color-success);
  }
  .dig-bg-warning {
    background-color: var(--dig-color-warning);
  }
  .dig-bg-danger {
    background-color: var(--dig-color-danger);
  }
  .dig-bg-info {
    background-color: var(--dig-color-info);
  }
  .dig-bg-light {
    background-color: var(--dig-color-bg);
  }
  .dig-bg-dark {
    background-color: var(--dig-color-bg-alt);
  }

  /* Display Utilities */
  .dig-d-block {
    display: block;
  }
  .dig-d-inline {
    display: inline;
  }
  .dig-d-inline-block {
    display: inline-block;
  }
  .dig-d-flex {
    display: flex;
  }
  .dig-d-inline-flex {
    display: inline-flex;
  }
  .dig-d-grid {
    display: grid;
  }

  /* Flex Utilities */
  .dig-flex-row {
    flex-direction: row;
  }
  .dig-flex-column {
    flex-direction: column;
  }
  .dig-flex-wrap {
    flex-wrap: wrap;
  }
  .dig-flex-nowrap {
    flex-wrap: nowrap;
  }
  /* Default (mobile-first): permitir wrap */
  .dig-nowrap {
    white-space: normal;
  }

  /* Desktop/tablet: forzar que no se separe */
  @media (min-width: 768px) {
    .dig-nowrap {
      white-space: nowrap;
    }
  }
  .dig-justify-start {
    justify-content: flex-start;
  }
  .dig-justify-end {
    justify-content: flex-end;
  }
  .dig-justify-center {
    justify-content: center;
  }
  .dig-justify-between {
    justify-content: space-between;
  }
  .dig-justify-around {
    justify-content: space-around;
  }
  .dig-align-start {
    align-items: flex-start;
  }
  .dig-align-end {
    align-items: flex-end;
  }
  .dig-align-center {
    align-items: center;
  }
  .dig-align-baseline {
    align-items: baseline;
  }
  .dig-align-stretch {
    align-items: stretch;
  }

  /* Position Utilities */
  .dig-position-static {
    position: static;
  }
  .dig-position-relative {
    position: relative;
  }
  .dig-position-absolute {
    position: absolute;
  }
  .dig-position-fixed {
    position: fixed;
  }
  .dig-position-sticky {
    position: sticky;
  }

  /* Sizing Utilities */
  .dig-w-25 {
    flex-basis: 25%;
    width: 25%;
  }
  .dig-w-33 {
    flex-basis: 33.333%;
    width: 33.333%;
  }
  .dig-w-50 {
    flex-basis: 50%;
    width: 50%;
  }
  .dig-w-67 {
    flex-basis: 66.666%;
    width: 66.666%;
  }
  .dig-w-75 {
    flex-basis: 75%;
    width: 75%;
  }
  .dig-w-100 {
    flex-basis: 100%;
    width: 100%;
  }
  .dig-h-25 {
    height: 25%;
  }
  .dig-h-50 {
    height: 50%;
  }
  .dig-h-75 {
    height: 75%;
  }
  .dig-h-100 {
    height: 100%;
  }
  .dig-mw-100 {
    max-width: 100%;
  }
  .dig-mh-100 {
    max-height: 100%;
  }

  /* Spacing Utilities */
  .dig-m-0 {
    margin: 0;
  }
  .dig-mt-0 {
    margin-top: 0;
  }
  .dig-mr-0 {
    margin-right: 0;
  }
  .dig-mb-0 {
    margin-bottom: 0;
  }
  .dig-ml-0 {
    margin-left: 0;
  }
  .dig-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .dig-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .dig-p-0 {
    padding: 0;
  }
  .dig-pt-0 {
    padding-top: 0;
  }
  .dig-pr-0 {
    padding-right: 0;
  }
  .dig-pb-0 {
    padding-bottom: 0;
  }
  .dig-pl-0 {
    padding-left: 0;
  }
  .dig-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .dig-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Border Utilities */
  .dig-border {
    border: 1px solid var(--dig-color-border);
  }
  .dig-border-top {
    border-top: 1px solid var(--dig-color-border);
  }
  .dig-border-right {
    border-right: 1px solid var(--dig-color-border);
  }
  .dig-border-bottom {
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-border-left {
    border-left: 1px solid var(--dig-color-border);
  }
  .dig-border-0 {
    border: 0;
  }
  .dig-rounded {
    border-radius: var(--dig-radius-md);
  }
  .dig-rounded-sm {
    border-radius: var(--dig-radius-sm);
  }
  .dig-rounded-lg {
    border-radius: var(--dig-radius-lg);
  }
  .dig-rounded-full {
    border-radius: var(--dig-radius-full);
  }
  .dig-rounded-top {
    border-top-left-radius: var(--dig-radius-md);
    border-top-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-right {
    border-top-right-radius: var(--dig-radius-md);
    border-bottom-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-bottom {
    border-bottom-right-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }
  .dig-rounded-left {
    border-top-left-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }

  /* Shadow Utilities */
  .dig-shadow-sm {
    box-shadow: var(--dig-shadow-sm);
  }
  .dig-shadow-md {
    box-shadow: var(--dig-shadow-md);
  }
  .dig-shadow-lg {
    box-shadow: var(--dig-shadow-lg);
  }
  .dig-shadow-xl {
    box-shadow: var(--dig-shadow-xl);
  }
  .dig-shadow-none {
    box-shadow: none;
  }

  /* Opacity Utilities */
  .dig-opacity-0 {
    opacity: 0;
  }
  .dig-opacity-25 {
    opacity: 0.25;
  }
  .dig-opacity-50 {
    opacity: 0.5;
  }
  .dig-opacity-75 {
    opacity: 0.75;
  }
  .dig-opacity-100 {
    opacity: 1;
  }

  /* Overflow Utilities */
  .dig-overflow-auto {
    overflow: auto;
  }
  .dig-overflow-hidden {
    overflow: hidden;
  }
  .dig-overflow-visible {
    overflow: visible;
  }
  .dig-overflow-scroll {
    overflow: scroll;
  }
  .dig-overflow-x-auto {
    overflow-x: auto;
  }
  .dig-overflow-y-auto {
    overflow-y: auto;
  }
  .dig-overflow-x-hidden {
    overflow-x: hidden;
  }
  .dig-overflow-y-hidden {
    overflow-y: hidden;
  }

  /* Z-index Utilities */
  .dig-z-index-dropdown {
    z-index: var(--dig-z-index-dropdown);
  }
  .dig-z-index-sticky {
    z-index: var(--dig-z-index-sticky);
  }
  .dig-z-index-fixed {
    z-index: var(--dig-z-index-fixed);
  }
  .dig-z-index-modal {
    z-index: var(--dig-z-index-modal);
  }
  .dig-z-index-popover {
    z-index: var(--dig-z-index-popover);
  }
  .dig-z-index-tooltip {
    z-index: var(--dig-z-index-tooltip);
  }
  .dig-z-index-toast {
    z-index: var(--dig-z-index-toast);
  }

  /* Interaction Utilities */
  .dig-pointer-events-none {
    pointer-events: none;
  }
  .dig-pointer-events-auto {
    pointer-events: auto;
  }
  .dig-user-select-none {
    user-select: none;
  }
  .dig-user-select-auto {
    user-select: auto;
  }
  .dig-cursor-pointer {
    cursor: pointer;
  }
  .dig-cursor-default {
    cursor: default;
  }
  .dig-cursor-not-allowed {
    cursor: not-allowed;
  }

  /* Visibility Utilities */
  .dig-visible {
    visibility: visible;
  }
  .dig-invisible {
    visibility: hidden;
  }

  /* Content Optimization */
  .dig-content-optimized {
    content-visibility: auto;
    contain: layout paint style;
  }

  /* Web API State Helpers */
  [data-dig-visible="false"] {
    display: none !important;
  }
  [data-dig-interactive] {
    cursor: pointer;
  }
  [data-dig-state="active"] {
    background-color: var(--dig-color-accent);
  }
  [data-dig-color="accent"] {
    color: var(--dig-color-accent);
  }
  [data-dig-bg="primary"] {
    background: var(--dig-color-primary);
    color: #fff;
  }

  /*
  * Prevents FOUC for conditional fields.
  * It hides any element with conditions until the JS engine has initialized it.
  */
  [data-conditions]:not([data-conditions-initialized]) {
    display: none;
  }

  /* Screen reader only (visually hidden but accessible) */
  /* Screen reader only (visually hidden but accessible) */
  /* Utilizes CSS Layers priority instead of !important hack */
  .dig-sr-only,
  .dig-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  /* Show on focus for better keyboard navigation */
  .dig-show-on-focus:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Focus ring variant for better accessibility */
  .dig-focus-ring {
    outline: 2px solid var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Quick Grid Helpers */
  .dig-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dig-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dig-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Quick Flex Helpers */
  .dig-row {
    display: flex;
    flex-direction: row;
    gap: var(--dig-spacing-sm);
  }

  .dig-col {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-center {
    justify-content: center;
    align-items: center;
  }

  .dig-space-between {
    justify-content: space-between;
  }

  .dig-wrap {
    flex-wrap: wrap;
  }

  /* Digentus State Helpers */
  .dig-hidden {
    display: none !important;
  }

  .dig-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .dig-loading {
    cursor: progress;
    opacity: 0.6;
    pointer-events: none;
  }

  .dig-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .dig-active {
    background-color: var(--dig-color-accent);
    color: var(--dig-color-text-light);
  }

  .dig-success {
    background-color: var(--dig-color-success);
    color: var(--dig-color-text-light);
  }

  .dig-warning {
    background-color: var(--dig-color-warning);
    color: var(--dig-color-primary);
  }

  .dig-error {
    background-color: var(--dig-color-danger);
    color: var(--dig-color-text-light);
  }

  /*
   * ========================================================================
   * Responsive Display Utilities (Systematic Approach)
   * ========================================================================
   * Pattern: .dig-d-{value} for mobile-first base styles.
   * Pattern: .dig-d-{breakpoint}-{value} for responsive overrides.
   * Values: none, block, flex, grid, inline-block, inline-flex.
   */

  /* Base (Mobile First) - Always applied unless overridden */
  .dig-d-none {
    display: none !important;
  }
  .dig-d-block {
    display: block !important;
  }
  .dig-d-flex {
    display: flex !important;
  }
  .dig-d-grid {
    display: grid !important;
  }
  .dig-d-inline {
    display: inline !important;
  }
  .dig-d-inline-block {
    display: inline-block !important;
  }
  .dig-d-inline-flex {
    display: inline-flex !important;
  }

  /* Base (Mobile) */
  .dig-d-none {
    display: none !important;
  }
  .dig-d-block {
    display: block !important;
  }
  .dig-d-flex {
    display: flex !important;
  }
  .dig-d-grid {
    display: grid !important;
  }

  html.d1-app-mode body > a.skip-link {
    display: none !important;
  }

  html.d1-app-mode header#masthead {
    display: none !important;
  }

  .screen-reader-text,
  .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link:focus,
  .screen-reader-text:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 999999;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #ffffff;
    color: #001827;
    border: 1px solid rgba(0, 24, 39, 0.18);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    font-weight: 700;
  }

  /* Tablet Portrait & Up (>= 576px) */
  @media (min-width: 576px) {
    .dig-d-sm-none {
      display: none !important;
    }
    .dig-d-sm-block {
      display: block !important;
    }
    .dig-d-sm-flex {
      display: flex !important;
    }
    .dig-d-sm-grid {
      display: grid !important;
    }
    .dig-d-sm-inline-block {
      display: inline-block !important;
    }
  }

  /* Tablet Landscape & Up (>= 768px) */
  @media (min-width: 768px) {
    .dig-d-md-none {
      display: none !important;
    }
    .dig-d-md-block {
      display: block !important;
    }
    .dig-d-md-flex {
      display: flex !important;
    }
    .dig-d-md-grid {
      display: grid !important;
    }
    .dig-d-md-inline-block {
      display: inline-block !important;
    }

    /* Tablet (md: 768px) */
    @media (min-width: 768px) {
      .dig-d-md-none {
        display: none !important;
      }
      .dig-d-md-block {
        display: block !important;
      }
      .dig-d-md-flex {
        display: flex !important;
      }
      .dig-d-md-grid {
        display: grid !important;
      }
      .dig-d-md-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* Desktop (lg: 992px) */
    @media (min-width: 992px) {
      .dig-d-lg-none {
        display: none !important;
      }
      .dig-d-lg-block {
        display: block !important;
      }
      .dig-d-lg-flex {
        display: flex !important;
      }
      .dig-d-lg-grid {
        display: grid !important;
      }
    }
  }

  /* Desktop & Up (>= 992px) */
  @media (min-width: 992px) {
    .dig-d-lg-none {
      display: none !important;
    }
    .dig-d-lg-block {
      display: block !important;
    }
    .dig-d-lg-flex {
      display: flex !important;
    }
    .dig-d-lg-grid {
      display: grid !important;
    }
    .dig-d-lg-inline-block {
      display: inline-block !important;
    }
  }

  /* Large Desktop & Up (>= 1200px) */
  @media (min-width: 1200px) {
    .dig-d-xl-none {
      display: none !important;
    }
    .dig-d-xl-block {
      display: block !important;
    }
    .dig-d-xl-flex {
      display: flex !important;
    }
    .dig-d-xl-grid {
      display: grid !important;
    }
  }
}

/* ==========================================================================
   6. Layer 'animations' & Transitions
   ==========================================================================
*/
@layer animations {
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(20px);
      opacity: 0;
    }
  }

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

  .dig-animate-spin {
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  .dig-animate-fadeIn {
    animation: fadeIn var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-fadeOut {
    animation: fadeOut var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideInUp {
    animation: slideInUp var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideOutDown {
    animation: slideOutDown var(--dig-animation-duration) ease forwards;
  }

  .dig-transition-all {
    transition: all var(--dig-transition-base);
  }

  .dig-transition-colors {
    transition:
      color var(--dig-transition-base),
      background-color var(--dig-transition-base),
      border-color var(--dig-transition-base);
  }

  .dig-transition-opacity {
    transition: opacity var(--dig-transition-base);
  }

  .dig-transition-transform {
    transition: transform var(--dig-transition-base);
  }
}

/* ==========================================================================
   7. Layer 'admin' - WordPress Admin Coexistence
   ========================================================================== */
@layer admin {
  /*
  Override for Form Controls
  Selector: .dig-admin-context (class) + input (tag) + .dig-form-control (class)
  Specificity: (0, 2, 1) - Extremely high and targeted.
  */
  .dig-admin-context {
    --dig-form-control-padding: var(--dig-spacing-xs);
  }
  .dig-admin-context input.dig-form-control,
  .dig-admin-context textarea.dig-form-control,
  .dig-admin-context select.dig-form-control {
    /* Re-declare ALL properties to ensure a complete override */
    width: 100%;
    margin: 0;
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: none;
    line-height: 1.5;
    transition:
      border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }
  /* Also override the focus state with high specificity */
  .dig-admin-context input.dig-form-control:focus,
  .dig-admin-context textarea.dig-form-control:focus,
  .dig-admin-context select.dig-form-control:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
  }
  /**
  Layout Spacing Fix
  Adds a consistent vertical gap between form rows.
  */
  .dig-admin-context .dig-form-row {
    margin-bottom: var(--dig-spacing-md);
  }
  .dig-admin-context .dig-form-row:last-child {
    margin-bottom: 0;
  }
  /**
  Override for Buttons
  Selector: .dig-admin-context (class) + .dig-btn (class)
  Specificity: (0, 2, 0) - High enough to win.
  */
  .dig-admin-context .dig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border: none;
    border-radius: var(--dig-radius-full);
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-size: var(--dig-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
  }
  /* Override for button variants */
  .dig-admin-context .dig-btn.dig-btn-outline {
    background: transparent;
    color: var(--dig-color-primary);
    border: 1.5px solid var(--dig-color-primary);
  }
  /*
  ========================================================================
  Component Overrides: Branding Admin UI
  ========================================================================
  */
  .dig-admin-context .branding-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dig-spacing-md);
    padding-bottom: var(--dig-spacing-sm);
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-admin-context .branding-sidebar-header h2 {
    margin-bottom: 0;
    font-size: 1.3em;
  }
  .dig-admin-context .branding-controls h3 {
    margin-top: var(--dig-spacing-lg);
    margin-bottom: var(--dig-spacing-sm);
    font-size: 1em;
    text-transform: uppercase;
    color: var(--dig-color-text-muted);
    letter-spacing: 0.5px;
  }
  /* ========================================================================
  Component Overrides: Branding Admin UI - Color Picker Fix
  ======================================================================== */
  .dig-admin-context .dig-form-control[type="color"] {
    display: block;
    width: 100%;
    height: 36px;
    max-width: 40px;
    padding: var(--dig-spacing-xs);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .dig-admin-context .dig-form-control[type="color"]:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
    outline: none;
  }

  .dig-admin-context,
  .dig-admin-context *,
  .dig-admin-context *::before,
  .dig-admin-context *::after {
    box-sizing: border-box;
  }

  /* This ensures that component styles win the specificity war against core WP styles. */

  /* Badge Component Boost */
  .dig-admin-context .dig-badge {
    /* Re-assert the base styles with higher specificity */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  /* Form Group & Input Component Boost */
  .dig-admin-context .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-admin-context .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }
}

/* ==========================================================================
   EOF
   ========================================================================== */