/* Mobile application layer. Loaded last on purpose. */

.mobile-menu-toggle,
.mobile-sidebar-scrim {
  display: none;
}

/* Final Creative mobile card normalization: equal rail cards and anchored actions. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail {
    align-items: stretch !important;
    grid-auto-rows: 504px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.photo,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.video,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.text,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.ai-influencer-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.ai-influencer-card.video {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 176px minmax(0, 106px) 32px 22px 104px !important;
    align-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: 504px !important;
    min-height: 504px !important;
    max-height: 504px !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.ai-influencer-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.ai-influencer-card.video {
    grid-template-rows: 176px minmax(0, 106px) 32px 22px 104px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .media-preview {
    grid-row: 1 !important;
    width: 100% !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > div:not(.media-preview):not(.media-meta):not(.creative-card-actions) {
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card h3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    margin: 0 0 5px !important;
    min-height: 30px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .media-meta {
    grid-row: 3 !important;
    min-height: 0 !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > footer {
    grid-row: 4 !important;
    min-height: 0 !important;
    max-height: 22px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .creative-card-actions {
    grid-row: 5 !important;
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 30px !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .creative-card-actions button {
    min-width: 0 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .creative-card-actions .fit-review-action,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .creative-card-actions button.fit-review-action {
    grid-column: 1 / -1 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin-top: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card > .creative-approval-drawer[hidden] {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="pages"] .page-builder-module {
    gap: 9px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-module > .panel-header {
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-module > .panel-header h2 {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="pages"] #pages-module-status {
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-module .module-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-module .module-hero-strip p {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="pages"] #pages-create-default {
    width: 100% !important;
    min-height: 32px !important;
  }

  body.app-mode[data-active-view="pages"] #pages-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="pages"] #pages-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="pages"] #pages-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="pages"] #pages-kpi-grid small,
  body.app-mode[data-active-view="pages"] #pages-kpi-grid .eyebrow {
    font-size: 8.8px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console label:nth-of-type(1),
  body.app-mode[data-active-view="pages"] .page-builder-console label:nth-of-type(2),
  body.app-mode[data-active-view="pages"] .page-builder-console label:nth-of-type(6),
  body.app-mode[data-active-view="pages"] .page-builder-console label:nth-of-type(7),
  body.app-mode[data-active-view="pages"] .page-builder-console label:nth-of-type(8) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console .wide-field,
  body.app-mode[data-active-view="pages"] .page-builder-console button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console input,
  body.app-mode[data-active-view="pages"] .page-builder-console select {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 10.5px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body.app-mode[data-active-view="pages"] .page-builder-grid > article {
    padding: 9px !important;
  }

  body.app-mode[data-active-view="pages"] .page-draft-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="pages"] .page-draft-item .page-draft-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="pages"] .page-draft-actions button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="pages"] .page-preview-card {
    padding: 10px !important;
  }

  body.app-mode[data-active-view="pages"] .page-preview-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="pages"] .page-preview-sections,
  body.app-mode[data-active-view="pages"] .page-tracking-grid,
  body.app-mode[data-active-view="pages"] .module-rule-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="pages"] .pages-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="pages"] .pages-agent-send {
    min-height: 96px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="influencers"] .influencer-module {
    gap: 9px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-module > .panel-header {
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-module > .panel-header h2 {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-module-status {
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-module .module-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-module .module-hero-strip p {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-create-default {
    width: 100% !important;
    min-height: 32px !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="influencers"] #influencers-kpi-grid small,
  body.app-mode[data-active-view="influencers"] #influencers-kpi-grid .eyebrow {
    font-size: 8.8px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(1),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(2) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(3),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(4),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(5),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(6),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label:nth-of-type(7),
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console input,
  body.app-mode[data-active-view="influencers"] .influencer-discovery-console select {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.9px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-discovery-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body.app-mode[data-active-view="influencers"] .influencer-work-grid > article {
    padding: 9px !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-profile-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-profile-item .creator-profile-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-profile-actions button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-review-card {
    padding: 10px !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-review-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="influencers"] .creator-profile-meta,
  body.app-mode[data-active-view="influencers"] .creator-profile-panel .module-rule-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="influencers"] .influencers-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="influencers"] .influencers-agent-send {
    min-height: 96px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="outreach"] .outreach-module {
    gap: 9px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-module > .panel-header {
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-module > .panel-header h2 {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-module-status {
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-module .module-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-module .module-hero-strip p {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-create-default {
    width: 100% !important;
    min-height: 32px !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="outreach"] #outreach-kpi-grid small,
  body.app-mode[data-active-view="outreach"] #outreach-kpi-grid .eyebrow {
    font-size: 8.8px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(1),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(2),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(3),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(4) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(5),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(6),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(7),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console label:nth-of-type(8),
  body.app-mode[data-active-view="outreach"] .outreach-deal-console button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-source-map {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    gap: 5px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-source-map strong {
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console input,
  body.app-mode[data-active-view="outreach"] .outreach-deal-console select,
  body.app-mode[data-active-view="outreach"] .outreach-deal-console textarea {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console textarea {
    min-height: 58px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-deal-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-work-grid > article {
    padding: 9px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-thread-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-thread-item .outreach-thread-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-thread-actions button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-source-proof {
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-source-proof a {
    grid-row: auto !important;
    justify-self: start !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-export-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-export-actions button,
  body.app-mode[data-active-view="outreach"] .outreach-export-actions a {
    width: 100% !important;
    min-height: 34px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-review-card {
    padding: 10px !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-review-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-message-block,
  body.app-mode[data-active-view="outreach"] .outreach-terms-grid,
  body.app-mode[data-active-view="outreach"] .outreach-thread-panel .module-rule-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="outreach"] .outreach-agent-send {
    min-height: 96px !important;
  }
}

/* Affiliate mobile polish: compact program setup, readable partner cards, one sticky prompt. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="affiliate"] .affiliate-module {
    gap: 9px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-module > .panel-header {
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-module > .panel-header h2 {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-module-status {
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-module .module-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-module .module-hero-strip p {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-create-default {
    width: 100% !important;
    min-height: 32px !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="affiliate"] #affiliate-kpi-grid small,
  body.app-mode[data-active-view="affiliate"] #affiliate-kpi-grid .eyebrow {
    font-size: 8.8px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(1),
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(2),
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(3) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(4),
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(5),
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(6),
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label:nth-of-type(7),
  body.app-mode[data-active-view="affiliate"] .affiliate-admin-terms-note,
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console button {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console input,
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console select,
  body.app-mode[data-active-view="affiliate"] .affiliate-program-console textarea {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console textarea {
    min-height: 58px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-admin-terms-note {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-work-grid > article {
    padding: 9px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-work-grid .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-item > span {
    width: 28px !important;
    height: 28px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-item strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-item small {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-item b {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-program-actions button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-review-card {
    padding: 10px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-review-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-review-card p,
  body.app-mode[data-active-view="affiliate"] .affiliate-link-grid p,
  body.app-mode[data-active-view="affiliate"] .affiliate-media-kit p {
    font-size: 9.6px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-terms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-link-grid,
  body.app-mode[data-active-view="affiliate"] .affiliate-media-kit,
  body.app-mode[data-active-view="affiliate"] .affiliate-program-panel .module-rule-stack,
  body.app-mode[data-active-view="affiliate"] .affiliate-event-ledger {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-review-card,
  body.app-mode[data-active-view="affiliate"] .affiliate-link-grid article,
  body.app-mode[data-active-view="affiliate"] .affiliate-media-kit article,
  body.app-mode[data-active-view="affiliate"] .affiliate-event-ledger,
  body.app-mode[data-active-view="affiliate"] .module-rule-stack .module-rule-item {
    padding: 9px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-terms-grid strong,
  body.app-mode[data-active-view="affiliate"] .affiliate-link-grid strong,
  body.app-mode[data-active-view="affiliate"] .affiliate-media-kit strong,
  body.app-mode[data-active-view="affiliate"] .affiliate-event-ledger strong,
  body.app-mode[data-active-view="affiliate"] .module-rule-stack strong {
    font-size: 10.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-terms-grid span,
  body.app-mode[data-active-view="affiliate"] .affiliate-link-grid small,
  body.app-mode[data-active-view="affiliate"] .affiliate-event-ledger small,
  body.app-mode[data-active-view="affiliate"] .module-rule-stack small {
    font-size: 8.6px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="affiliate"] .affiliate-agent-send {
    min-height: 96px !important;
  }
}

/* Ads final mobile pass: one sticky prompt, compact paid-readiness cards. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="ads"] [data-view-section="ads"] > .full-panel {
    gap: 9px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header {
    gap: 7px !important;
    padding: 10px !important;
    margin: 0 0 8px !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header h2 {
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    min-height: 25px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip strong {
    font-size: 15px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip p {
    font-size: 9.2px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-create-test {
    width: 100% !important;
    min-height: 34px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid,
  body.app-mode[data-active-view="ads"] .ads-account-grid,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations,
  body.app-mode[data-active-view="ads"] .module-surface-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid article,
  body.app-mode[data-active-view="ads"] .ads-account-card,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid article,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article,
  body.app-mode[data-active-view="ads"] .module-surface-card {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 7px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid strong {
    font-size: 18px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid small,
  body.app-mode[data-active-view="ads"] .ads-account-card small,
  body.app-mode[data-active-view="ads"] .ads-account-card em,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid small,
  body.app-mode[data-active-view="ads"] .module-surface-card p {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console select,
  body.app-mode[data-active-view="ads"] .ad-launch-console input {
    min-height: 32px !important;
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console .wide-field,
  body.app-mode[data-active-view="ads"] #ads-launch-button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-launch-button {
    min-height: 34px !important;
    font-size: 10.5px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-console,
  body.app-mode[data-active-view="ads"] .ads-agent-form,
  body.app-mode[data-active-view="ads"] .ads-agent-response {
    display: none !important;
  }

  body.app-mode[data-active-view="ads"] .ads-readiness-panel {
    gap: 8px !important;
    padding: 9px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ads-section-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-section-heading strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-section-heading small {
    justify-self: start !important;
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="ads"] .ads-account-card strong,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations strong,
  body.app-mode[data-active-view="ads"] .module-surface-card strong,
  body.app-mode[data-active-view="ads"] #ads-test-list strong,
  body.app-mode[data-active-view="ads"] #ads-rule-list strong,
  body.app-mode[data-active-view="ads"] #ads-plan-list strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-status-grid strong {
    font-size: 13px !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid > article {
    min-height: 0 !important;
    padding: 9px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list .module-work-item,
  body.app-mode[data-active-view="ads"] #ads-plan-list .module-work-item {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list .module-work-item b,
  body.app-mode[data-active-view="ads"] #ads-plan-list .module-work-item b,
  body.app-mode[data-active-view="ads"] #ads-test-list .module-queue-button,
  body.app-mode[data-active-view="ads"] #ads-test-list .module-action-button {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    width: 100% !important;
    text-align: left !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="ads"] [data-view-section="ads"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(23px, 7vw, 33px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header .badge {
    width: 100% !important;
    justify-content: center !important;
    min-height: 26px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-module .module-hero-strip p {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-create-test {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid article {
    min-height: 90px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    margin: 0 !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console label {
    font-size: 9px !important;
    gap: 4px !important;
  }

  body.app-mode[data-active-view="ads"] .ad-launch-console select,
  body.app-mode[data-active-view="ads"] .ad-launch-console input {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-launch-button {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    font-size: 12px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-console,
  body.app-mode[data-active-view="ads"] .ads-agent-side {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-response,
  body.app-mode[data-active-view="ads"] .ads-agent-form,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid article,
  body.app-mode[data-active-view="ads"] .ads-account-card,
  body.app-mode[data-active-view="ads"] .module-surface-card,
  body.app-mode[data-active-view="ads"] .module-work-grid > article {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-response {
    min-height: 0 !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-response > strong {
    font-size: 16px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-response small {
    font-size: 9.3px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-recommendations,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid,
  body.app-mode[data-active-view="ads"] #ads-account-grid,
  body.app-mode[data-active-view="ads"] .ads-account-grid,
  body.app-mode[data-active-view="ads"] .module-surface-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article {
    min-height: 64px !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article:first-child,
  body.app-mode[data-active-view="ads"] .module-surface-card:first-child {
    grid-column: 1 / -1 !important;
    min-height: 54px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article span,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid span,
  body.app-mode[data-active-view="ads"] .ads-account-card span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article strong {
    font-size: 9.4px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-status-grid article {
    min-height: 62px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-status-grid strong {
    font-size: 15px !important;
    line-height: 1.02 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-status-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-form textarea {
    min-height: 82px !important;
    padding: 9px !important;
    font-size: 11px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-shortcuts button {
    min-height: 34px !important;
    padding: 6px 5px !important;
    overflow: hidden !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-form .agent-submit-button {
    width: 100% !important;
    min-height: 38px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-account-card {
    min-height: 94px !important;
    gap: 4px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-account-card strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-account-card small,
  body.app-mode[data-active-view="ads"] .ads-account-card em {
    font-size: 8.8px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="ads"] .module-surface-card strong {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="ads"] .module-surface-card p {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid .section-title {
    margin-bottom: 6px !important;
  }

  body.app-mode[data-active-view="ads"] .module-work-grid .section-title h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list,
  body.app-mode[data-active-view="ads"] #ads-rule-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list article {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] #ads-rule-list article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list article > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list .module-queue-button,
  body.app-mode[data-active-view="ads"] #ads-test-list .module-action-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list strong,
  body.app-mode[data-active-view="ads"] #ads-rule-list strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-test-list small,
  body.app-mode[data-active-view="ads"] #ads-rule-list small,
  body.app-mode[data-active-view="ads"] #ads-test-list p,
  body.app-mode[data-active-view="ads"] #ads-rule-list p {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="seo"] [data-view-section="seo"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="seo"] [data-view-section="seo"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] [data-view-section="seo"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(23px, 7vw, 33px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="seo"] [data-view-section="seo"] .panel-header .badge {
    width: 100% !important;
    justify-content: center !important;
    min-height: 26px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero > div,
  body.app-mode[data-active-view="seo"] .seo-serp-card,
  body.app-mode[data-active-view="seo"] .seo-rank-map,
  body.app-mode[data-active-view="seo"] .seo-task-card,
  body.app-mode[data-active-view="seo"] .seo-pipeline-grid > article {
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero p,
  body.app-mode[data-active-view="seo"] .seo-serp-card p {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-query-bar {
    padding: 8px !important;
    gap: 2px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-query-bar b {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-query-bar small,
  body.app-mode[data-active-view="seo"] .seo-serp-card small {
    font-size: 8.8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-serp-card {
    gap: 5px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-serp-card strong {
    font-size: 13px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-create-brief {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid,
  body.app-mode[data-active-view="seo"] .seo-action-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-workbench-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid article {
    min-height: 82px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button {
    min-height: 68px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button:last-child {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console strong {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-rank-map {
    grid-column: 1 / -1 !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-rank-map div {
    min-height: 34px !important;
    padding: 5px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="seo"] .seo-rank-map b {
    min-width: 46px !important;
    padding: 5px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-rank-map small {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-task-card {
    min-height: 0 !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-workbench-grid .seo-task-card {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-task-card strong {
    font-size: 17px !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  body.app-mode[data-active-view="seo"] .seo-task-card p {
    font-size: 11px !important;
    line-height: 1.22 !important;
    max-width: 100% !important;
  }

  body.app-mode[data-active-view="seo"] .seo-pipeline-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-pipeline-grid .section-title {
    margin-bottom: 6px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-pipeline-grid .section-title h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list article,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list article.module-agent-output {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] #seo-pipeline-list article.module-rule-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list article > span,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list article > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list strong,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list small,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list b {
    grid-column: auto !important;
    width: auto !important;
    min-width: 62px !important;
    min-height: 26px !important;
    padding: 6px 7px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.app-mode[data-active-view="seo"] #seo-pipeline-list b,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list .module-queue-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="seo"] .seo-intelligence-page {
    gap: 9px !important;
    padding: 10px !important;
    background:
      linear-gradient(135deg, rgba(110, 231, 183, 0.16), transparent 42%),
      #f8fff8 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-intelligence-page .panel-header {
    padding: 9px 10px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] .seo-intelligence-page .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-module-status {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    justify-content: flex-start !important;
    font-size: 8.5px !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero > div,
  body.app-mode[data-active-view="seo"] .seo-serp-card,
  body.app-mode[data-active-view="seo"] .seo-rank-map,
  body.app-mode[data-active-view="seo"] .seo-task-card,
  body.app-mode[data-active-view="seo"] .seo-pipeline-grid > article {
    border-radius: 7px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-command-hero strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-query-bar b,
  body.app-mode[data-active-view="seo"] .seo-serp-card strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid article {
    min-height: 60px !important;
    padding: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="seo"] #seo-kpi-grid small,
  body.app-mode[data-active-view="seo"] #seo-kpi-grid .eyebrow {
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button {
    min-height: 56px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console strong {
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-rank-map small,
  body.app-mode[data-active-view="seo"] .seo-task-card p,
  body.app-mode[data-active-view="seo"] #seo-cluster-list small,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list small {
    font-size: 9.2px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-task-card strong,
  body.app-mode[data-active-view="seo"] #seo-cluster-list strong,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list strong {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list article {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list b {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-agent-send {
    min-height: 96px !important;
  }

  body.app-mode[data-active-view="community"] [data-view-section="community"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="community"] [data-view-section="community"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] [data-view-section="community"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(23px, 7vw, 33px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="community"] [data-view-section="community"] .panel-header .badge {
    width: 100% !important;
    justify-content: center !important;
    min-height: 26px !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero > div:first-child,
  body.app-mode[data-active-view="community"] .community-alert-stack,
  body.app-mode[data-active-view="community"] .community-lane,
  body.app-mode[data-active-view="community"] .community-flow-grid > article {
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero strong {
    font-size: 17px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero p {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack span {
    min-height: 56px !important;
    padding: 7px 5px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    text-align: center !important;
    font-size: 7.8px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack b {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="community"] #community-create-flow {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid,
  body.app-mode[data-active-view="community"] .community-action-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid article {
    min-height: 82px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid small {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="community"] .community-action-console button {
    min-height: 70px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] .community-action-console span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="community"] .community-action-console strong {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="community"] .community-board,
  body.app-mode[data-active-view="community"] .community-flow-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] .community-lane {
    min-height: 0 !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="community"] .community-lane strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="community"] .community-lane p {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="community"] .community-lane small {
    display: block !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="community"] .community-flow-grid .section-title {
    margin-bottom: 6px !important;
  }

  body.app-mode[data-active-view="community"] .community-flow-grid .section-title h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list,
  body.app-mode[data-active-view="community"] #community-flow-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list article,
  body.app-mode[data-active-view="community"] #community-flow-list article.module-agent-output {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] #community-flow-list article.module-rule-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list article > span,
  body.app-mode[data-active-view="community"] #community-flow-list article > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list strong,
  body.app-mode[data-active-view="community"] #community-flow-list strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list small,
  body.app-mode[data-active-view="community"] #community-flow-list small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list b {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 62px !important;
    min-height: 26px !important;
    padding: 6px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #08090d !important;
    background: #d5ff00 !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body.app-mode[data-active-view="community"] #community-flow-list b,
  body.app-mode[data-active-view="community"] #community-flow-list .module-queue-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="community"] .community-ops-page {
    gap: 9px !important;
    padding: 10px !important;
    background:
      linear-gradient(135deg, rgba(125, 211, 252, 0.16), transparent 42%),
      #f7fbff !important;
  }

  body.app-mode[data-active-view="community"] .community-ops-page .panel-header {
    padding: 9px 10px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] .community-ops-page .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="community"] #community-module-status {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    justify-content: flex-start !important;
    font-size: 8.5px !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="community"] .community-command-hero p {
    font-size: 9.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack span {
    min-height: 46px !important;
    padding: 6px 4px !important;
    font-size: 7.2px !important;
  }

  body.app-mode[data-active-view="community"] .community-alert-stack b {
    min-height: 18px !important;
    font-size: 12px !important;
  }

  body.app-mode[data-active-view="community"] .community-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="community"] .community-hero-actions button {
    width: 100% !important;
    min-height: 32px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid article {
    min-height: 60px !important;
    padding: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="community"] #community-kpi-grid small,
  body.app-mode[data-active-view="community"] #community-kpi-grid .eyebrow {
    font-size: 8.5px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 7px !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console label:nth-of-type(1),
  body.app-mode[data-active-view="community"] .community-discovery-console label:nth-of-type(2),
  body.app-mode[data-active-view="community"] .community-discovery-console label:nth-of-type(3),
  body.app-mode[data-active-view="community"] .community-discovery-console label:nth-of-type(4) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console label:nth-of-type(5),
  body.app-mode[data-active-view="community"] .community-discovery-console button {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console input,
  body.app-mode[data-active-view="community"] .community-discovery-console select,
  body.app-mode[data-active-view="community"] .community-discovery-console textarea {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console textarea {
    min-height: 58px !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-grid > article {
    padding: 9px !important;
  }

  body.app-mode[data-active-view="community"] .community-discovery-grid .section-title h3,
  body.app-mode[data-active-view="community"] .community-flow-grid .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="community"] .community-target-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="community"] .community-target-item > span {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="community"] .community-target-item strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="community"] .community-target-item small {
    font-size: 8.7px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="community"] .community-target-item b {
    padding: 4px 6px !important;
    font-size: 7.8px !important;
  }

  body.app-mode[data-active-view="community"] .community-target-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="community"] .community-target-actions button {
    width: 100% !important;
    min-height: 28px !important;
  }

  body.app-mode[data-active-view="community"] .community-review-card,
  body.app-mode[data-active-view="community"] .community-theme-grid article,
  body.app-mode[data-active-view="community"] .community-prompt-grid article,
  body.app-mode[data-active-view="community"] .community-lane,
  body.app-mode[data-active-view="community"] .community-flow-grid > article {
    padding: 9px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="community"] .community-review-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="community"] .community-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="community"] .community-theme-grid,
  body.app-mode[data-active-view="community"] .community-prompt-grid,
  body.app-mode[data-active-view="community"] .community-board,
  body.app-mode[data-active-view="community"] .community-flow-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="community"] .community-review-card p,
  body.app-mode[data-active-view="community"] .community-theme-grid p,
  body.app-mode[data-active-view="community"] .community-prompt-grid p,
  body.app-mode[data-active-view="community"] .community-lane p {
    font-size: 9.4px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="community"] .community-score-grid strong,
  body.app-mode[data-active-view="community"] .community-theme-grid strong,
  body.app-mode[data-active-view="community"] .community-prompt-grid strong,
  body.app-mode[data-active-view="community"] .community-theme-grid a,
  body.app-mode[data-active-view="community"] .community-lane strong,
  body.app-mode[data-active-view="community"] #community-integration-list strong,
  body.app-mode[data-active-view="community"] #community-flow-list strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="community"] .community-score-grid span,
  body.app-mode[data-active-view="community"] .community-theme-grid .eyebrow,
  body.app-mode[data-active-view="community"] .community-prompt-grid .eyebrow,
  body.app-mode[data-active-view="community"] #community-integration-list small,
  body.app-mode[data-active-view="community"] #community-flow-list small {
    font-size: 8.6px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="community"] .community-action-console button {
    min-height: 56px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="community"] .community-action-console strong {
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list article {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body.app-mode[data-active-view="community"] #community-integration-list b {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="community"] .community-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="community"] .community-agent-send {
    min-height: 96px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module {
    gap: 9px !important;
    padding: 10px !important;
    background:
      linear-gradient(135deg, rgba(125, 211, 252, 0.16), transparent 42%),
      #fffaf1 !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module > .panel-header {
    gap: 8px !important;
    padding: 9px 10px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module > .panel-header h2 {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="reach"] #reach-module-status {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    justify-content: flex-start !important;
    font-size: 8.5px !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module .module-hero-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module .module-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-module .module-hero-strip p {
    font-size: 9.6px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="reach"] #reach-create-default {
    width: 100% !important;
    min-height: 32px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="reach"] #reach-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reach"] #reach-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reach"] #reach-kpi-grid strong {
    font-size: 16px !important;
  }

  body.app-mode[data-active-view="reach"] #reach-kpi-grid small,
  body.app-mode[data-active-view="reach"] #reach-kpi-grid .eyebrow {
    font-size: 8.5px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 7px !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console label:nth-of-type(1),
  body.app-mode[data-active-view="reach"] .reach-message-console label:nth-of-type(2),
  body.app-mode[data-active-view="reach"] .reach-message-console label:nth-of-type(3),
  body.app-mode[data-active-view="reach"] .reach-message-console label:nth-of-type(4) {
    grid-column: span 1 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console label:nth-of-type(5),
  body.app-mode[data-active-view="reach"] .reach-message-console .wide-field,
  body.app-mode[data-active-view="reach"] .reach-message-console button {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console label {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console input,
  body.app-mode[data-active-view="reach"] .reach-message-console select,
  body.app-mode[data-active-view="reach"] .reach-message-console textarea {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console textarea {
    min-height: 58px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-console button {
    min-height: 33px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-work-grid > article {
    padding: 9px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reach"] .reach-work-grid .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-item > span {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-item strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-item small {
    font-size: 8.7px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-item b {
    padding: 4px 6px !important;
    font-size: 7.8px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="reach"] .reach-message-actions button {
    width: 100% !important;
    min-height: 28px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-review-card,
  body.app-mode[data-active-view="reach"] .reach-source-card,
  body.app-mode[data-active-view="reach"] .reach-adaptation-grid article,
  body.app-mode[data-active-view="reach"] .reach-message-panel .module-rule-item {
    padding: 9px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reach"] .reach-review-card h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-adaptation-grid,
  body.app-mode[data-active-view="reach"] .reach-message-panel .module-rule-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-review-card p,
  body.app-mode[data-active-view="reach"] .reach-source-card p,
  body.app-mode[data-active-view="reach"] .reach-adaptation-grid p {
    font-size: 9.4px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-source-card strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-source-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="reach"] .reach-source-actions a,
  body.app-mode[data-active-view="reach"] .reach-source-actions small,
  body.app-mode[data-active-view="reach"] .reach-evidence-list small {
    width: 100% !important;
    font-size: 8.8px !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
  }

  body.app-mode[data-active-view="reach"] .reach-score-grid strong,
  body.app-mode[data-active-view="reach"] .reach-adaptation-grid strong,
  body.app-mode[data-active-view="reach"] .reach-message-panel .module-rule-item strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-score-grid span,
  body.app-mode[data-active-view="reach"] .reach-adaptation-grid small,
  body.app-mode[data-active-view="reach"] .reach-message-panel .module-rule-item small {
    font-size: 8.6px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-agent-dock textarea {
    min-height: 96px !important;
    padding: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="reach"] .reach-agent-send {
    min-height: 96px !important;
  }

  body.app-mode[data-active-view="telegram-module"] [data-view-section="telegram-module"] > .full-panel {
    display: grid !important;
    gap: 9px !important;
    padding: 10px !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.16), transparent 42%),
      #f7fbff !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="telegram-module"] [data-view-section="telegram-module"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] [data-view-section="telegram-module"] .panel-header h2 {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="telegram-module"] [data-view-section="telegram-module"] .panel-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    justify-content: flex-start !important;
    font-size: 8.5px !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-command-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-command-hero > div:first-child,
  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview,
  body.app-mode[data-active-view="telegram-module"] .telegram-console-card,
  body.app-mode[data-active-view="telegram-module"] .telegram-work-grid > article {
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-command-hero strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-command-hero p,
  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview p {
    font-size: 9.6px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview {
    min-height: 102px !important;
    align-content: center !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview::before {
    width: 42px !important;
    height: 4px !important;
    margin: 0 auto 2px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview strong {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-phone-preview small {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-create-plan {
    width: 100% !important;
    min-height: 32px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-kpi-grid,
  body.app-mode[data-active-view="telegram-module"] .telegram-action-console {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-kpi-grid article {
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-kpi-grid strong {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-kpi-grid small {
    font-size: 8.5px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-action-console button {
    min-height: 58px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-action-console span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-action-console strong {
    font-size: 9.8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-grid,
  body.app-mode[data-active-view="telegram-module"] .telegram-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-stack,
  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-proof {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-card {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-card header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-card header span {
    justify-self: start !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-card header strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-card p {
    font-size: 9.4px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-discovery-proof strong {
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-card {
    min-height: 0 !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-card strong {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-card p {
    font-size: 9.4px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-card div {
    gap: 5px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-console-card div span {
    min-height: 24px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-work-grid .section-title {
    margin-bottom: 6px !important;
  }

  body.app-mode[data-active-view="telegram-module"] .telegram-work-grid .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list,
  body.app-mode[data-active-view="telegram-module"] #telegram-revenue-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list article.module-work-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-revenue-list article.module-rule-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list article > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list strong,
  body.app-mode[data-active-view="telegram-module"] #telegram-revenue-list strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list small,
  body.app-mode[data-active-view="telegram-module"] #telegram-revenue-list small {
    font-size: 8.7px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list b {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    min-width: 62px !important;
    min-height: 26px !important;
    padding: 6px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #08090d !important;
    background: #d5ff00 !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body.app-mode[data-active-view="telegram-module"] #telegram-operation-list .module-queue-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="reports"] [data-view-section="reports"] > .full-panel {
    display: grid !important;
    gap: 9px !important;
    padding: 10px !important;
    background:
      linear-gradient(135deg, rgba(125, 211, 252, 0.14), transparent 42%),
      #f8fbf7 !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="reports"] [data-view-section="reports"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] [data-view-section="reports"] .panel-header h2 {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="reports"] [data-view-section="reports"] .panel-header .secondary-action {
    width: 100% !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="reports"] .report-hero-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .report-hero-strip strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="reports"] .report-hero-strip p {
    font-size: 9.6px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="reports"] .report-hero-strip .badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    justify-content: flex-start !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-grid,
  body.app-mode[data-active-view="reports"] .reports-panel .report-paid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-grid article,
  body.app-mode[data-active-view="reports"] .reports-panel .report-paid-grid article {
    min-height: 72px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-grid strong,
  body.app-mode[data-active-view="reports"] .reports-panel .report-paid-grid strong {
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-paid-grid strong {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-grid small,
  body.app-mode[data-active-view="reports"] .reports-panel .report-paid-grid small {
    font-size: 8.4px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel > .report-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-actions button {
    min-height: 54px !important;
    padding: 8px 6px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-actions span {
    padding: 3px 5px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-actions strong {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-panel {
    margin: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-header h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-top: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis article,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-empty {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis article {
    min-height: 54px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis strong {
    font-size: 14px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis span,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-kpis small,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item span,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item small,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-empty small {
    font-size: 8.2px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 5px 7px !important;
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item > div {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item strong,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-empty strong {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-links {
    gap: 5px !important;
    margin-top: 6px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-links a,
  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-links b {
    min-height: 21px !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-source-proof-item > b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    max-width: 82px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 4px 6px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-panel {
    margin: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-header h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-top: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis article,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-grid > article,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis article {
    min-height: 54px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis strong {
    font-size: 14px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis span,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-kpis small,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item span,
  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item small {
    font-size: 8.2px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 5px 7px !important;
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item > div {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item strong {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .agent-proof-item b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    max-width: 76px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 4px 6px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-panel {
    margin: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-header h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-controls,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-grid,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-top: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-controls label {
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-controls select,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-controls button {
    min-height: 31px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-controls small {
    font-size: 8.4px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis article,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-summary,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-presenter,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-empty {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis article {
    min-height: 54px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis strong {
    font-size: 14px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis span,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-kpis small,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-summary small,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-presenter small,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-empty small,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-summary p {
    font-size: 8.3px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-summary strong,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-presenter strong,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-empty strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-presenter-list div,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list article {
    padding: 7px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list article {
    grid-template-columns: 46px minmax(0, 1fr) minmax(66px, auto) !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list b {
    grid-column: auto !important;
    justify-self: end !important;
    max-width: 76px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 4px 6px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list span,
  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list small {
    font-size: 8px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .mission-proof-list strong {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-work-grid > article {
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .section-title {
    margin-bottom: 6px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .section-title h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-list-stack,
  body.app-mode[data-active-view="reports"] .reports-panel .module-rule-stack {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item,
  body.app-mode[data-active-view="reports"] .reports-panel .module-rule-item {
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-rule-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item strong,
  body.app-mode[data-active-view="reports"] .reports-panel .module-rule-item strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item small,
  body.app-mode[data-active-view="reports"] .reports-panel .module-rule-item small {
    font-size: 8.7px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .module-work-item b {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    min-width: 58px !important;
    min-height: 25px !important;
    padding: 6px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #08090d !important;
    background: #d5ff00 !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-output {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: center !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-work-grid .report-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel .report-work-grid .report-actions button {
    width: 100% !important;
    min-height: 54px !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item > div {
    grid-column: 2 / 4 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item b {
    grid-column: 2 / 4 !important;
    justify-self: start !important;
    width: auto !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item button {
    min-height: 28px !important;
    padding: 6px 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item button[data-report-regenerate] {
    grid-column: 1 / 3 !important;
  }

  body.app-mode[data-active-view="reports"] .reports-panel #reports-management .report-manage-item button[data-report-revoke] {
    grid-column: 3 / 4 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.4vw, 34px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="subscription"] #subscription-status,
  body.app-mode[data-active-view="subscription"] #billing-portal-button {
    width: 100% !important;
    min-height: 34px !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] #billing-output {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid,
  body.app-mode[data-active-view="subscription"] .billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary div,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid article,
  body.app-mode[data-active-view="subscription"] .billing-grid .metric-card {
    min-height: 86px !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary div:first-child,
  body.app-mode[data-active-view="subscription"] .billing-grid .metric-card:first-child {
    grid-column: 1 / -1 !important;
    min-height: 74px !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary strong,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid strong,
  body.app-mode[data-active-view="subscription"] .billing-grid strong {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary small,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid small,
  body.app-mode[data-active-view="subscription"] .billing-grid small {
    font-size: 9px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-usage-meter {
    height: 5px !important;
    margin: 6px 0 !important;
    border-width: 1px !important;
  }

  body.app-mode[data-active-view="subscription"] #plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card {
    min-height: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card h3 {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card header strong {
    font-size: 18px !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card header span,
  body.app-mode[data-active-view="subscription"] .plan-card p,
  body.app-mode[data-active-view="subscription"] .plan-usage-note {
    min-height: 0 !important;
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card button {
    width: 100% !important;
    min-height: 32px !important;
    margin-top: 2px !important;
    padding: 6px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8.2px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-system-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-system-panel h3 {
    margin: 3px 0 5px !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-system-panel p {
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="subscription"] #credit-topup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-topup-grid article {
    min-height: 38px !important;
    padding: 7px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-topup-grid strong,
  body.app-mode[data-active-view="subscription"] .credit-topup-grid span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] #credit-system-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 7px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card strong {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card b {
    align-self: center !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border: 1px solid #08090d !important;
    background: rgba(255, 250, 240, 0.76) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card small {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 8.8px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer {
    margin: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    min-height: 0 !important;
    padding: 0 0 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary span {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer .billing-grid,
  body.app-mode[data-active-view="subscription"] .billing-drawer .topup-form,
  body.app-mode[data-active-view="subscription"] .billing-drawer .invoice-list,
  body.app-mode[data-active-view="subscription"] .billing-drawer .event-list {
    margin: 0 0 8px !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form label {
    gap: 5px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form select,
  body.app-mode[data-active-view="subscription"] #topup-form button {
    width: 100% !important;
    min-height: 34px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-list {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row > strong {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large {
    max-height: 220px !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large li {
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] > .full-panel {
    gap: 8px !important;
    padding: 9px !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.12), transparent 46%),
      rgba(255, 250, 240, 0.96) !important;
  }

  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] .panel-header {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] [data-view-section="subscription"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-header-actions {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr) !important;
  }

  body.app-mode[data-active-view="subscription"] #subscription-status,
  body.app-mode[data-active-view="subscription"] #billing-portal-button {
    min-height: 30px !important;
    padding: 5px 6px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="subscription"] #billing-output {
    min-height: 0 !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid,
  body.app-mode[data-active-view="subscription"] .billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary div,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid article,
  body.app-mode[data-active-view="subscription"] .billing-grid .metric-card {
    min-height: 62px !important;
    padding: 7px !important;
    background:
      linear-gradient(90deg, var(--subscription-card-accent, #67d5e8) 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.68) !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary div:first-child,
  body.app-mode[data-active-view="subscription"] .billing-grid .metric-card:first-child {
    grid-column: span 1 !important;
    min-height: 62px !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary strong,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid strong,
  body.app-mode[data-active-view="subscription"] .billing-grid strong {
    font-size: 13px !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="subscription"] .subscription-summary small,
  body.app-mode[data-active-view="subscription"] .plan-usage-grid small,
  body.app-mode[data-active-view="subscription"] .billing-grid small {
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="subscription"] #plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card {
    display: grid !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 8px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.36) 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.70) !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card.selected {
    background:
      linear-gradient(90deg, #dfff3f 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.76) !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card h3 {
    font-size: 12px !important;
    line-height: 1.03 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card header strong {
    font-size: 13px !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card header span,
  body.app-mode[data-active-view="subscription"] .plan-card p,
  body.app-mode[data-active-view="subscription"] .plan-usage-note {
    font-size: 7.8px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="subscription"] .plan-card button {
    min-height: 28px !important;
    padding: 5px !important;
    font-size: 7.8px !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-panel,
  body.app-mode[data-active-view="subscription"] .credit-system-panel,
  body.app-mode[data-active-view="subscription"] .billing-drawer {
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-panel,
  body.app-mode[data-active-view="subscription"] .project-credit-grid,
  body.app-mode[data-active-view="subscription"] .credit-system-panel,
  body.app-mode[data-active-view="subscription"] #credit-system-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-panel h3,
  body.app-mode[data-active-view="subscription"] .credit-system-panel h3 {
    font-size: 14px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-panel p,
  body.app-mode[data-active-view="subscription"] .credit-system-panel p {
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-grid article {
    min-height: 58px !important;
    padding: 7px 7px 7px 10px !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-grid strong {
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="subscription"] .project-credit-grid small {
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="subscription"] #credit-topup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-topup-grid article {
    min-height: 31px !important;
    padding: 5px 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-topup-grid strong,
  body.app-mode[data-active-view="subscription"] .credit-topup-grid span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 7px 7px 7px 10px !important;
    background:
      linear-gradient(90deg, var(--subscription-card-accent, #67d5e8) 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.70) !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card strong {
    font-size: 10.5px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card b {
    padding: 4px 5px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="subscription"] .credit-service-card small {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary {
    padding: 0 0 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary span {
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="subscription"] .billing-drawer summary small {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form {
    gap: 6px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form label {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="subscription"] #topup-form select,
  body.app-mode[data-active-view="subscription"] #topup-form button {
    min-height: 30px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row {
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row > strong {
    grid-column: auto !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row div strong {
    font-size: 10px !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="subscription"] .invoice-row small,
  body.app-mode[data-active-view="subscription"] .invoice-row .badge {
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 198px !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large li {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 30px !important;
    padding: 6px 7px !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large strong {
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large small {
    overflow: hidden !important;
    font-size: 8px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large li.ledger-more {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="subscription"] .ledger-large li.ledger-more small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="brand"] [data-view-section="brand"] .brand-panel {
    display: grid !important;
    gap: 8px !important;
    padding: 9px !important;
    overflow: visible !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.12), transparent 46%),
      rgba(255, 250, 240, 0.96) !important;
  }

  body.app-mode[data-active-view="brand"] [data-view-section="brand"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="brand"] [data-view-section="brand"] .panel-header h2 {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="brand"] [data-view-section="brand"] .panel-header .badge {
    width: 100% !important;
    min-height: 30px !important;
    justify-content: center !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-context-grid article {
    min-height: 84px !important;
    padding: 7px 7px 7px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    background:
      linear-gradient(90deg, var(--brand-card-accent, #67d5e8) 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.70) !important;
  }

  body.app-mode[data-active-view="brand"] .brand-context-grid strong {
    font-size: 10.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-context-grid small {
    font-size: 7.8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="brand"] .brand-form label {
    gap: 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-form textarea,
  body.app-mode[data-active-view="brand"] .brand-form input {
    min-height: 38px !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 12.5px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-form textarea {
    min-height: 78px !important;
  }

  body.app-mode[data-active-view="brand"] .brand-form button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="brand"] #brand-output {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-style-guide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    background:
      linear-gradient(135deg, rgba(223, 255, 63, 0.14), transparent 48%),
      rgba(255, 250, 240, 0.88) !important;
  }

  body.app-mode[data-active-view="brand"] .brand-style-guide h3 {
    margin: 3px 0 5px !important;
    font-size: 14px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-style-guide p {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-rule-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="brand"] .brand-rule-grid article {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 7px 7px 7px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    background:
      linear-gradient(90deg, var(--brand-card-accent, #67d5e8) 0 5px, transparent 5px),
      rgba(255, 255, 255, 0.70) !important;
  }

  body.app-mode[data-active-view="brand"] .brand-rule-grid span {
    width: 20px !important;
    min-height: 20px !important;
    border-width: 1px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-rule-grid strong {
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="brand"] .brand-rule-grid small,
  body.app-mode[data-active-view="brand"] .brand-rule-grid em {
    margin-top: 3px !important;
    font-size: 7.8px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="settings"] [data-view-section="settings"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(25px, 7.3vw, 35px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="settings"] #export-state-button {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid article {
    min-height: 82px !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board article {
    min-height: 118px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board strong {
    font-size: 11.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board small {
    font-size: 8.6px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form {
    gap: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-section,
  body.app-mode[data-active-view="settings"] .account-security-form {
    gap: 8px !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] .settings-section .section-title,
  body.app-mode[data-active-view="settings"] .account-security-form .section-title {
    margin: 0 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-section .section-title h3,
  body.app-mode[data-active-view="settings"] .account-security-form .section-title h3 {
    font-size: 16px !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .form-grid,
  body.app-mode[data-active-view="settings"] .security-password-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .form-grid label,
  body.app-mode[data-active-view="settings"] .security-password-grid label,
  body.app-mode[data-active-view="settings"] .team-invite-card label {
    gap: 4px !important;
    min-width: 0 !important;
    font-size: 8.8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form input,
  body.app-mode[data-active-view="settings"] .settings-form select,
  body.app-mode[data-active-view="settings"] .account-security-form input {
    min-height: 34px !important;
    padding: 7px 8px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="settings"] .team-access-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .team-invite-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] #team-member-role,
  body.app-mode[data-active-view="settings"] #team-member-invite,
  body.app-mode[data-active-view="settings"] #team-member-output {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="settings"] #team-member-invite {
    min-height: 34px !important;
    padding: 7px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="settings"] #team-member-output {
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-list {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row > div,
  body.app-mode[data-active-view="settings"] .team-member-row small {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row small,
  body.app-mode[data-active-view="settings"] .team-member-row span {
    font-size: 8.8px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row select {
    grid-column: 1 / 2 !important;
    min-height: 32px !important;
  }

  body.app-mode[data-active-view="settings"] .team-member-row .member-remove-action {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 76px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .settings-toggle-grid label.toggle-line {
    min-height: 48px !important;
    gap: 6px !important;
    padding: 7px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8.7px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .settings-toggle-grid label.toggle-line input[type="checkbox"] {
    flex-basis: 17px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-actions button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px !important;
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="settings"] #settings-output,
  body.app-mode[data-active-view="settings"] #security-output {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="settings"] .security-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .security-status-grid article {
    min-height: 86px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="settings"] .security-status-grid strong {
    font-size: 11.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="settings"] .security-status-grid small {
    font-size: 8px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="settings"] .security-password-grid button {
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    padding: 7px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="settings"] .export-box {
    min-height: 42px !important;
    max-height: 150px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="onboarding"] [data-view-section="onboarding"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="onboarding"] [data-view-section="onboarding"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="onboarding"] [data-view-section="onboarding"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
  }

  body.app-mode[data-active-view="onboarding"] #onboarding-status {
    align-self: end !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-summary article {
    min-height: 74px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-summary .eyebrow {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-summary strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-summary small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 7.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-form {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px !important;
    border-width: 3px !important;
    box-shadow: 4px 4px 0 #08090d !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-form .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-form label {
    gap: 4px !important;
    min-width: 0 !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-form input,
  body.app-mode[data-active-view="onboarding"] .onboarding-form select {
    min-height: 36px !important;
    padding: 0 9px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="onboarding"] .channel-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="onboarding"] .channel-choice-grid legend {
    grid-column: 1 / -1 !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="onboarding"] .channel-choice-grid label {
    min-height: 33px !important;
    padding: 7px !important;
    gap: 6px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="onboarding"] .channel-choice-grid input {
    display: inline-grid !important;
    place-items: center !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    border: 2px solid #08090d !important;
    border-radius: 2px !important;
    background: #fffaf0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="onboarding"] .channel-choice-grid input:checked::after {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    background: #08090d !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-form .primary-action {
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="onboarding"] #onboarding-output {
    min-height: 30px !important;
    padding: 7px 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    background: #fffaf0 !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="onboarding"] .onboarding-checklist {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: 7px !important;
    gap: 7px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item > span {
    width: 25px !important;
    height: 24px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item div {
    gap: 2px !important;
    padding-right: 0 !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item b {
    padding: 2px 4px !important;
    border-width: 1px !important;
    box-shadow: none !important;
    font-size: 6.5px !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item strong {
    -webkit-line-clamp: 1 !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item small {
    -webkit-line-clamp: 2 !important;
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="onboarding"] .checklist-item button {
    position: static !important;
    min-width: 64px !important;
    min-height: 30px !important;
    padding: 5px 6px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero,
  body.app-mode .agentic-campaign-dialog .campaign-brief-grid,
  body.app-mode .agentic-campaign-dialog .campaign-brief-banner,
  body.app-mode .agentic-campaign-dialog .campaign-agent-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(26px, 7.6vw, 36px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero p {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-agent-card {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid .wide-field,
  body.app-mode .agentic-campaign-dialog .campaign-half-field,
  body.app-mode .agentic-campaign-dialog .campaign-brief-grid label,
  body.app-mode .agentic-campaign-dialog .choice-panel {
    grid-column: 1 / -1 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid {
    gap: 8px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card h3 {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card p {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="seo"] #seo-create-brief {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 2px solid #08090d !important;
    background: #d5ff00 !important;
    color: #08090d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button {
    --seo-action-accent: #6ee7b7;
    align-content: start !important;
    min-height: 52px !important;
    padding: 8px !important;
    border: 2px solid #08090d !important;
    background: #fffdf7 !important;
    color: #08090d !important;
    box-shadow:
      inset 0 4px 0 var(--seo-action-accent),
      2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button:nth-child(5n + 2) {
    --seo-action-accent: #67d5e8;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button:nth-child(5n + 3) {
    --seo-action-accent: #ffd166;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button:nth-child(5n + 4) {
    --seo-action-accent: #ff8fa3;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console button:nth-child(5n) {
    --seo-action-accent: #a78bfa;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console span {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 3px 5px !important;
    border: 1px solid #08090d !important;
    background: #08090d !important;
    color: #fffaf0 !important;
    font-size: 7.8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body.app-mode[data-active-view="seo"] .seo-action-console strong {
    color: #08090d !important;
    font-size: 9.5px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list article {
    grid-template-columns: 28px minmax(0, 1fr) minmax(72px, max-content) !important;
    align-items: start !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 2px solid #08090d !important;
    background: #fffdf7 !important;
    color: #08090d !important;
    box-shadow:
      inset 0 4px 0 rgba(110, 231, 183, 0.82),
      2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list article > span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border: 2px solid #08090d !important;
    background: #08090d !important;
    color: #fffaf0 !important;
    font-size: 7.4px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list strong,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list strong {
    color: #08090d !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list small,
  body.app-mode[data-active-view="seo"] #seo-pipeline-list small {
    color: #22242a !important;
    font-size: 9.2px !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="seo"] #seo-cluster-list b {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: start !important;
    width: fit-content !important;
    min-width: 64px !important;
    max-width: 100% !important;
    padding: 5px 6px !important;
    border: 2px solid #08090d !important;
    background: #d5ff00 !important;
    color: #08090d !important;
    font-size: 7.7px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    box-shadow: 1px 1px 0 #08090d !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board small {
    font-size: 8.2px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intel-header h3 {
    font-size: 13px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-card h4,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card h3 {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card p,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-card p,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-compare-grid small {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card button {
    min-height: 28px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="settings"] [data-view-section="settings"] > .full-panel {
    gap: 8px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .panel-header {
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid article {
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-summary-grid strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-panel {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-panel h3 {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-panel p {
    font-size: 9.2px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-grid article {
    min-height: 68px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-grid strong {
    font-size: 10.2px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-project-grid small {
    font-size: 7.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board,
  body.app-mode[data-active-view="settings"] .security-status-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board article,
  body.app-mode[data-active-view="settings"] .security-status-grid article {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board strong,
  body.app-mode[data-active-view="settings"] .security-status-grid strong {
    font-size: 11px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="settings"] .agent-permission-board small,
  body.app-mode[data-active-view="settings"] .security-status-grid small {
    font-size: 8.4px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-section .section-title h3,
  body.app-mode[data-active-view="settings"] .account-security-form .section-title h3 {
    font-size: 12.5px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .settings-toggle-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="settings"] .settings-form .settings-toggle-grid label.toggle-line {
    min-height: 34px !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="settings"] .settings-status {
    padding: 7px 8px !important;
    font-size: 9.2px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="settings"] .security-password-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body.app-mode[data-active-view="settings"] .settings-form .form-grid,
  body.app-mode[data-active-view="settings"] .team-invite-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-panel > div:first-child,
  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-grid {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-grid article {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-grid strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="settings"] [data-view-section="settings"] .settings-project-grid small {
    font-size: 8.4px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] > .full-panel {
    gap: 8px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header .badge,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] #competitor-status {
    justify-self: start !important;
    min-height: 24px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board article {
    min-height: 58px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board small {
    font-size: 8.2px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-status {
    padding: 7px 8px !important;
    font-size: 9.2px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intel-panel {
    gap: 8px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intel-header h3 {
    font-size: 13px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake .wide-field,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-actions {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake label {
    font-size: 8.2px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake input,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake select,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake textarea {
    min-height: 32px !important;
    padding: 6px 7px !important;
    font-size: 9.2px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-kpis article {
    min-height: 54px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-kpis strong {
    font-size: 14px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-matrix,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-roadmap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-card,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-empty,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-signal-stack {
    gap: 4px !important;
    margin-top: 6px !important;
    padding: 6px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-signal-stack small,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-source-actions span {
    font-size: 8.6px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-card header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-card h4 {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-meta,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-compare-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card h3 {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card p {
    min-height: 0 !important;
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-card-meta {
    min-height: 0 !important;
    padding: 6px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card button {
    min-height: 28px !important;
    font-size: 8.8px !important;
  }
}

@media (max-width: 430px) {
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .competitor-intake {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Ads mobile sizing override loaded after the older Ads mobile rules. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header h2 {
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="ads"] [data-view-section="ads"] .panel-header .badge {
    width: fit-content !important;
    justify-content: flex-start !important;
    min-height: 25px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-create-test {
    min-height: 34px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid article,
  body.app-mode[data-active-view="ads"] .ads-account-card,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid article,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations article,
  body.app-mode[data-active-view="ads"] .module-surface-card,
  body.app-mode[data-active-view="ads"] .module-work-grid > article {
    min-height: 0 !important;
    padding: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .module-surface-card:first-child {
    grid-column: auto !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid strong {
    font-size: 18px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-account-card strong,
  body.app-mode[data-active-view="ads"] .ads-agent-recommendations strong,
  body.app-mode[data-active-view="ads"] .module-surface-card strong,
  body.app-mode[data-active-view="ads"] #ads-test-list strong,
  body.app-mode[data-active-view="ads"] #ads-rule-list strong,
  body.app-mode[data-active-view="ads"] #ads-plan-list strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-agent-status-grid strong {
    font-size: 13px !important;
  }

  body.app-mode[data-active-view="ads"] #ads-kpi-grid small,
  body.app-mode[data-active-view="ads"] .ads-account-card small,
  body.app-mode[data-active-view="ads"] .ads-account-card em,
  body.app-mode[data-active-view="ads"] .ads-agent-status-grid small,
  body.app-mode[data-active-view="ads"] .module-surface-card p {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="ads"] .ads-readiness-panel {
    gap: 8px !important;
    padding: 9px !important;
    margin: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ads"] .ads-section-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="ads"] .ads-section-heading small {
    justify-self: start !important;
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }
}

@media (max-width: 760px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-areas:
      "project"
      "tabs"
      "gallery"
      "composer"
      "presenter"
      "manual" !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-studio-lab {
    grid-area: presenter !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-job-form,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-job-preview {
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-provider-readiness,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-job-card {
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-provider-readiness {
    flex-direction: column !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-provider-readiness button,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-job-card-actions {
    width: 100% !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-job-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-payload-card {
    grid-row: auto !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-payload-preview {
    max-height: 160px !important;
  }
}

/* Definitive final mobile Creative Studio card/prompt rules. */
@media (max-width: 820px) {
  .sidebar-collapse-toggle,
  .sidebar-reopen-toggle,
  body.app-mode.sidebar-collapsed > .app-shell > .sidebar-reopen-toggle {
    display: none !important;
  }

  body.app-mode.sidebar-collapsed > .app-shell > .sidebar {
    display: flex !important;
  }

  .media-detail-prompt-card {
    padding: 8px !important;
  }

  .media-detail-prompt-copy,
  .media-detail-prompt-card .media-detail-prompt-copy {
    font-size: 11px !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 3 !important;
  }

  .media-detail-copy-button,
  .media-detail-prompt-card .media-detail-copy-button {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 80 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console #media-library.creative-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 520px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 220px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.photo,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.video,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.text {
    grid-template-rows: 190px 72px 34px 28px 176px !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 172px !important;
    padding-bottom: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions .fit-review-action {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
    white-space: nowrap !important;
  }
}

/* Final mobile Creative Studio overrides: keep composer visible and cards stable. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 80 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console #media-library.creative-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 520px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 220px !important;
    overflow: visible !important;
  }
}

@media (max-width: 820px) {
  body.app-mode .app-footer,
  body.app-mode .app-footer.universal-footer {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "gallery"
      "composer"
      "presenter"
      "manual" !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .connected-channel-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-tool-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-dna-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .social-production-lab {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library.creative-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 520px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 220px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.photo,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.video,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.text {
    grid-template-rows: 190px 72px 34px 28px 176px !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 172px !important;
    padding-bottom: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions button {
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 5px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 80 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form textarea {
    min-height: 52px !important;
    max-height: 84px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="ai"] [data-view-section="ai"] > .full-panel,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] > .full-panel,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] > .full-panel,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .panel-header,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .panel-header,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .panel-header h2,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .panel-header h2,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header h2,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7vw, 33px) !important;
    line-height: 0.98 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .panel-header .badge,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header .badge,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .panel-header .badge,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] #process-jobs-button {
    min-height: 32px !important;
    padding: 0 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board article,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board article,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board article,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary article {
    min-height: 76px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board .eyebrow,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board .eyebrow,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board .eyebrow,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary .eyebrow {
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board strong,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board strong,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board strong,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: clamp(13px, 4vw, 18px) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board small,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board small,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board small,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 8.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form label {
    gap: 4px !important;
    min-width: 0 !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form input,
  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form select {
    min-height: 35px !important;
    padding: 0 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-wide,
  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-form button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .provider-output,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .provider-output {
    margin: 0 !important;
    min-height: 30px !important;
    padding: 7px 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    background: #fffaf0 !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary .metric-card,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary .metric-card {
    min-height: 84px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary .metric-label,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary .metric-label {
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary strong,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary small,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary small {
    font-size: 8.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-row {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 58px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-row > span:first-child,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-row .badge {
    min-height: 22px !important;
    padding: 4px 5px !important;
    border-width: 1px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-row strong {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-row small {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-roadmap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card {
    gap: 7px !important;
    min-height: 0 !important;
    padding: 9px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card header {
    gap: 7px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card h3 {
    font-size: 15px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card p {
    min-height: 0 !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-card-meta span {
    min-height: 22px !important;
    padding: 4px 6px !important;
    font-size: 7.8px !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .progress-row {
    gap: 6px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar label:first-child,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar span {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar label {
    gap: 4px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar input,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar select {
    min-height: 34px !important;
    padding: 0 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-filter-bar span {
    justify-self: start !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-export-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-export-bar span {
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-export-bar button {
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-list {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row {
    grid-template-columns: auto auto auto !important;
    gap: 6px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row div {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    gap: 3px !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row time,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row > span,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row > b {
    grid-row: 2 !important;
    justify-self: start !important;
    min-height: 20px !important;
    padding: 3px 5px !important;
    border-width: 1px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row strong {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .audit-row small {
    font-size: 8.5px !important;
    line-height: 1.14 !important;
  }
}

@media (max-width: 380px) {
  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .panel-header,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .panel-header,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .ai-routing-board,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .jobs-operation-board,
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board,
  body.app-mode[data-active-view="audit"] [data-view-section="audit"] .admin-audit-summary,
  body.app-mode[data-active-view="ai"] [data-view-section="ai"] .routing-summary,
  body.app-mode[data-active-view="jobs"] [data-view-section="jobs"] .job-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .panel-header h2 {
    font-size: clamp(24px, 7.4vw, 32px) !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] #exit-admin-button {
    min-width: 92px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-summary,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-operator-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-billing-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-audit-summary,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-readiness-summary,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .metric-card,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-operator-grid article,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .audit-summary-card,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-summary-card {
    min-height: 68px !important;
    padding: 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .metric-label,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .metric-card .eyebrow,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .audit-summary-card .eyebrow,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-operator-grid .eyebrow {
    font-size: 7.6px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .metric-card strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-operator-grid strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .audit-summary-card strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-summary-card strong {
    font-size: clamp(16px, 5.2vw, 20px) !important;
    line-height: 1.03 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .metric-card small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-operator-grid small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .audit-summary-card small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-summary-card small {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tabs {
    position: sticky !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 2px 0 4px !important;
    padding: 5px !important;
    overflow: visible !important;
    border-width: 2px !important;
    border-radius: 14px !important;
    background: rgba(255, 247, 237, 0.94) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    box-shadow: 0 12px 28px rgba(8, 9, 13, 0.12), 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tabs button {
    min-width: 0 !important;
    min-height: 31px !important;
    padding: 0 3px !important;
    border-width: 1.5px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: clamp(7px, 2vw, 8.4px) !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tabs button.active {
    box-shadow: 2px 2px 0 #08090d !important;
    transform: none !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tab-panel,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-command-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-layout,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-deep-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-billing-ledger {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-layout > .admin-section,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-layout > .admin-worker-section,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-deep-grid > .admin-command-panel {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-plane,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-command-panel,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-section,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-shell {
    gap: 8px !important;
    padding: 9px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .section-title {
    gap: 3px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .section-title h3 {
    font-size: clamp(15px, 4.6vw, 19px) !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-feature-flags,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-health-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tool-grid,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-grid label,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form label {
    gap: 4px !important;
    min-width: 0 !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-grid input,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-grid select,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar input,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar select,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form input,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form select {
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-feature-flags label {
    min-height: 31px !important;
    padding: 6px !important;
    gap: 5px !important;
    font-size: 8.8px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-feature-flags input,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-row-select input {
    width: 13px !important;
    height: 13px !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-actions,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-bulk-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-actions span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar label:first-child,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-bulk-bar .admin-select-all,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-bulk-bar > span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form .wide-field,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-credit-adjust-form button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-filter-bar span {
    justify-self: start !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-bulk-bar button,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-control-actions button,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tool-grid button {
    width: 100% !important;
    min-height: 31px !important;
    padding: 0 7px !important;
    font-size: 8.6px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-row,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-row {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-actions,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-row strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-row strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-module-row strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-alert-row strong,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-cost-row strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-row small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-row small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-module-row small,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-alert-row small {
    font-size: 9px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-meta,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-meta {
    gap: 4px !important;
    margin-top: 5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-meta span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-meta b,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-meta span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-meta b {
    min-height: 18px !important;
    padding: 2px 5px !important;
    font-size: 7.8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-user-row button,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-worker-row button {
    min-height: 29px !important;
    padding: 0 5px !important;
    font-size: 8.2px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row {
    grid-template-columns: repeat(3, minmax(0, auto)) !important;
    align-items: start !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row div {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row > span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row b,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row time {
    grid-row: 2 !important;
    justify-self: start !important;
    width: auto !important;
    min-height: 20px !important;
    padding: 2px 5px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row strong {
    font-size: 11.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-platform-audit-row small {
    font-size: 9px !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-stat-row,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-module-row,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-alert-row,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-cost-row,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-readiness-row {
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-health-grid article {
    min-height: 74px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-card {
    gap: 7px !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-card header {
    gap: 7px !important;
    align-items: start !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-card h4 {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-card header > strong {
    min-width: 34px !important;
    padding: 4px 5px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-progress span,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-blockers span {
    padding: 3px 4px !important;
    font-size: 6.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-progress,
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-blockers {
    gap: 4px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-progress span:nth-child(n + 4) {
    display: none !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-meta {
    display: none !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-next-step {
    padding: 6px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-next-step strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-actions button {
    min-height: 28px !important;
    padding: 0 5px !important;
    font-size: 7.5px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-meta code {
    padding: 5px 6px !important;
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="admin"] .admin-detail-drawer {
    width: min(100vw, 430px) !important;
  }

  body.app-mode[data-active-view="admin"] .admin-detail-content {
    height: 100dvh !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  body.app-mode[data-active-view="admin"] .admin-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-tabs button {
    font-size: 6.7px !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] #exit-admin-button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="admin"] [data-view-section="admin"] .admin-provider-config-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header .secondary-action {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel article {
    min-height: 92px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel article {
    min-height: 116px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card strong {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card small,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel small {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions button {
    min-height: 58px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions button:nth-child(3) {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions strong {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-console {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-response,
  body.app-mode[data-active-view="analytics"] .analytics-agent-form,
  body.app-mode[data-active-view="analytics"] .analytics-agent-recommendations article,
  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid article,
  body.app-mode[data-active-view="analytics"] .analytics-source-card,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card {
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-response {
    min-height: 0 !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-response > strong {
    font-size: 16px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-response small {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-recommendations,
  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-recommendations article {
    min-height: 68px !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-recommendations article span,
  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-recommendations article strong {
    font-size: 9.4px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid article {
    min-height: 62px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid strong {
    font-size: 15px !important;
    line-height: 1.02 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-source-grid,
  body.app-mode[data-active-view="analytics"] .analytics-paid-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-source-card,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card {
    min-height: 0 !important;
    gap: 4px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-source-card strong,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-source-card small,
  body.app-mode[data-active-view="analytics"] .analytics-source-card em,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card small,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card em {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-form textarea {
    min-height: 82px !important;
    padding: 9px !important;
    font-size: 11px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-shortcuts button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 5px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-shortcuts .agent-submit-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 38px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-shortcuts button:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="analytics"] .insight-stack {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .insight-card {
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"],
  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] * {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] > .full-panel {
    gap: 9px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="analytics"] [data-view-section="analytics"] .panel-header .secondary-action {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel,
  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid,
  body.app-mode[data-active-view="analytics"] .analytics-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel article,
  body.app-mode[data-active-view="analytics"] .analytics-agent-status-grid article,
  body.app-mode[data-active-view="analytics"] .analytics-source-card,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card,
  body.app-mode[data-active-view="analytics"] .analytics-recommendation-grid article {
    min-height: 0 !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card {
    min-height: 72px !important;
  }

  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel article {
    min-height: 100px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel strong,
  body.app-mode[data-active-view="analytics"] .analytics-source-card strong,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card strong,
  body.app-mode[data-active-view="analytics"] .analytics-recommendation-grid strong {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-grid .metric-card small,
  body.app-mode[data-active-view="analytics"] .agent-diagnosis-panel small,
  body.app-mode[data-active-view="analytics"] .analytics-source-card small,
  body.app-mode[data-active-view="analytics"] .analytics-source-card em,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card small,
  body.app-mode[data-active-view="analytics"] .analytics-paid-card em {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions button,
  body.app-mode[data-active-view="analytics"] .analytics-actions button:nth-child(3) {
    min-height: 44px !important;
    padding: 7px 8px !important;
    grid-column: auto !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-actions strong {
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-agent-console,
  body.app-mode[data-active-view="analytics"] .analytics-agent-form,
  body.app-mode[data-active-view="analytics"] .analytics-agent-response {
    display: none !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-readiness-panel {
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-section-heading,
  body.app-mode[data-active-view="analytics"] .analytics-evidence-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-section-heading strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-section-heading small {
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-evidence-column {
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="analytics"] .analytics-source-grid,
  body.app-mode[data-active-view="analytics"] .analytics-paid-grid {
    gap: 6px !important;
  }

  body.app-mode[data-active-view="analytics"] .insight-stack {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="analytics"] .insight-card {
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="queue"] [data-view-section="queue"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .mode-control {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .mode-control .mode {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="queue"] .filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .filter-row label {
    min-width: 0 !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="queue"] .filter-row select {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 24px 6px 8px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions-panel button {
    min-height: 58px !important;
    padding: 8px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions-panel button:nth-child(5) {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions-panel span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions-panel strong {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-console,
  body.app-mode[data-active-view="queue"] .queue-left-stack,
  body.app-mode[data-active-view="queue"] .queue-agent-side {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-response {
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-response > strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-response small {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-recommendations {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-recommendations article {
    min-height: 66px !important;
    padding: 7px !important;
    gap: 5px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-recommendations article:first-child {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-recommendations article span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-recommendations article strong {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-list-large {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-list-large li {
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-list-large li.empty-state {
    padding: 12px !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-meta {
    gap: 3px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-meta span {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-meta small,
  body.app-mode[data-active-view="queue"] .queue-receipt {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-execution-lane {
    gap: 4px !important;
    margin-top: 5px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-execution-chip {
    max-width: 100% !important;
    min-height: 20px !important;
    padding: 4px 6px !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions strong {
    width: auto !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions button {
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-drawer {
    gap: 8px !important;
    margin-top: 9px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-close {
    justify-self: start !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-receipt,
  body.app-mode[data-active-view="queue"] .queue-detail-grid,
  body.app-mode[data-active-view="queue"] .queue-proof-strip,
  body.app-mode[data-active-view="queue"] .queue-history article {
    grid-template-columns: 1fr !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-grid,
  body.app-mode[data-active-view="queue"] .queue-proof-strip {
    gap: 6px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-grid article,
  body.app-mode[data-active-view="queue"] .queue-proof-strip article {
    min-height: 0 !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-actions {
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-detail-actions button {
    min-height: 27px !important;
    padding: 6px 8px !important;
    font-size: 8.3px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid article {
    min-height: 62px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid strong {
    font-size: 15px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    align-content: start !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-form textarea {
    min-height: 84px !important;
    padding: 9px !important;
    font-size: 11px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-shortcuts button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 5px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .agent-submit-button {
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .panel-header h2 {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="queue"] [data-view-section="queue"] .mode-control .mode {
    min-height: 31px !important;
    font-size: 9.5px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-console {
    display: none !important;
  }

  body.app-mode[data-active-view="queue"] .queue-workspace-grid,
  body.app-mode[data-active-view="queue"] .queue-section-heading,
  body.app-mode[data-active-view="queue"] .queue-list-large li,
  body.app-mode[data-active-view="queue"] .queue-detail-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="queue"] .queue-workspace-grid {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="queue"] .queue-work-panel,
  body.app-mode[data-active-view="queue"] .queue-status-panel {
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="queue"] .queue-section-heading strong {
    font-size: 13.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-section-heading small {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid article {
    min-height: 54px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid strong {
    font-size: 13.5px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-agent-status-grid small {
    font-size: 8.5px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-list-large li {
    gap: 7px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="queue"] .queue-meta span {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions {
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.app-mode[data-active-view="queue"] .queue-actions strong,
  body.app-mode[data-active-view="queue"] .queue-actions button {
    min-height: 25px !important;
    font-size: 8.3px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="connections"] [data-view-section="connections"] > .full-panel {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="connections"] [data-view-section="connections"] .panel-header {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="connections"] [data-view-section="connections"] .panel-header h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
    line-height: 0.96 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board button {
    min-height: 72px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board strong {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board small {
    font-size: 8.8px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-console,
  body.app-mode[data-active-view="connections"] .connection-agent-side {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-response,
  body.app-mode[data-active-view="connections"] .connection-agent-form {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-response > strong {
    font-size: 16px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-response small {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-recommendations {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-recommendations article {
    min-height: 58px !important;
    padding: 7px !important;
    gap: 5px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-recommendations article:first-child {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-recommendations article span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-recommendations article strong {
    font-size: 9.4px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid article {
    min-height: 62px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid span {
    font-size: 8px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid strong {
    font-size: 15px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-form {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-form textarea {
    min-height: 78px !important;
    padding: 9px !important;
    font-size: 11px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-shortcuts button,
  body.app-mode[data-active-view="connections"] .connection-agent-form .agent-submit-button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 5px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-form .agent-submit-button {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  body.app-mode[data-active-view="connections"] .connection-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-filter-bar button {
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-filter-bar span {
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-filter-bar strong {
    font-size: 13px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    column-count: auto !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card,
  body.app-mode[data-active-view="connections"] .connection-empty-state {
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card header {
    gap: 8px !important;
    align-items: start !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card p {
    min-height: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card small {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card .badge {
    padding: 5px 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.62fr) minmax(0, 0.95fr) minmax(0, 1.36fr) !important;
    gap: 4px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-controls-short {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.45fr) !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-actions {
    display: contents !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-actions button,
  body.app-mode[data-active-view="connections"] .connection-setup-details summary,
  body.app-mode[data-active-view="connections"] .linkedin-target-picker button,
  body.app-mode[data-active-view="connections"] .telegram-connect-form button,
  body.app-mode[data-active-view="connections"] .connection-setup-form button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 4px !important;
    font-size: 7.4px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-details summary {
    width: 100% !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-details[open] {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-form,
  body.app-mode[data-active-view="connections"] .telegram-connect-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-form div,
  body.app-mode[data-active-view="connections"] .telegram-connect-form div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-form input,
  body.app-mode[data-active-view="connections"] .connection-setup-form select,
  body.app-mode[data-active-view="connections"] .telegram-connect-form input {
    min-height: 34px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="connections"] .linkedin-target-picker {
    padding: 8px !important;
    gap: 6px !important;
    box-shadow: 2px 2px 0 #08090d !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="connections"] [data-view-section="connections"] {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-mode[data-active-view="connections"] [data-view-section="connections"] > .full-panel {
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="connections"] [data-view-section="connections"] .panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="connections"] [data-view-section="connections"] .panel-header h2 {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-console {
    display: none !important;
  }

  body.app-mode[data-active-view="connections"] .connection-readiness-panel {
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  body.app-mode[data-active-view="connections"] .connection-section-heading,
  body.app-mode[data-active-view="connections"] .connection-card header,
  body.app-mode[data-active-view="connections"] .connection-setup-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="connections"] .connection-section-heading strong {
    font-size: 13.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-section-heading small {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board,
  body.app-mode[data-active-view="connections"] .connection-filter-bar,
  body.app-mode[data-active-view="connections"] .connection-agent-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-action-board button {
    min-height: 62px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid article {
    min-height: 54px !important;
    padding: 7px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-agent-status-grid strong {
    font-size: 13.5px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-filter-bar button {
    min-height: 34px !important;
    padding: 6px 7px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    column-count: auto !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card,
  body.app-mode[data-active-view="connections"] .connection-empty-state {
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card p {
    min-height: 0 !important;
    font-size: 10px !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card small {
    font-size: 9px !important;
    line-height: 1.18 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.62fr) minmax(0, 0.95fr) minmax(0, 1.36fr) !important;
    gap: 4px !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-controls-short {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.45fr) !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-actions {
    display: contents !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-actions button,
  body.app-mode[data-active-view="connections"] .connection-setup-details summary,
  body.app-mode[data-active-view="connections"] .linkedin-target-picker button,
  body.app-mode[data-active-view="connections"] .telegram-connect-form button,
  body.app-mode[data-active-view="connections"] .connection-setup-form button {
    min-height: 26px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 4px !important;
    font-size: 7.4px !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-details[open] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] > .full-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .panel-header h2 {
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.02 !important;
  }

  body.app-mode[data-active-view="campaigns"] #campaigns-new-button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="campaigns"] .table-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions button {
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 9px !important;
    align-content: start !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions span {
    width: max-content !important;
    max-width: 100% !important;
    padding: 3px 5px !important;
    font-size: 7.6px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions strong {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-console {
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-response,
  body.app-mode[data-active-view="campaigns"] .campaign-agent-side,
  body.app-mode[data-active-view="campaigns"] .campaign-agent-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-response,
  body.app-mode[data-active-view="campaigns"] .campaign-agent-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="campaigns"] #campaign-agent-title {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="campaigns"] #campaign-agent-copy {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-recommendations {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-recommendations article {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-recommendations article strong {
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-side {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 9px !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-status-grid article {
    min-height: 76px !important;
    padding: 9px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-status-grid span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-status-grid strong {
    font-size: 16px !important;
    line-height: 1.02 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-status-grid small {
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-form textarea {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 86px !important;
    height: auto !important;
    font-size: 12px !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-agent-shortcuts button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 7px !important;
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] table,
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] thead,
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] tbody,
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] tr,
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] table {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] thead {
    display: none !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 9px !important;
    border: 2px solid #08090d !important;
    border-radius: 8px !important;
    background: rgba(255, 247, 237, 0.94) !important;
    box-shadow: 4px 4px 0 #08090d !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td {
    display: grid !important;
    grid-template-columns: minmax(88px, 0.38fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td::before {
    color: rgba(8, 9, 13, 0.62);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(1)::before {
    content: "Name";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(2)::before {
    content: "Goal";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(3)::before {
    content: "Channels";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(4)::before {
    content: "Cadence";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(5)::before {
    content: "Credits";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(6)::before {
    content: "Status";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td:nth-child(7)::before {
    content: "Action";
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td[colspan] {
    display: block !important;
    padding: 2px 0 !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td[colspan]::before {
    content: none !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .table-action {
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

  /* Campaigns mobile cleanup: keep the page as action cards + ledger table. */
  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .panel-header h2 {
    font-size: 14px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .panel-header {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] .panel-header > div:first-child {
    padding: 7px 8px !important;
  }

  body.app-mode[data-active-view="campaigns"] #campaigns-new-button {
    width: auto !important;
    min-width: 88px !important;
    padding: 7px 8px !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="campaigns"] .campaign-actions button {
    min-height: 58px !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] tbody tr {
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.22) 0 6px, rgba(255, 250, 240, 0.98) 6px 100%) !important;
  }

  body.app-mode[data-active-view="campaigns"] [data-view-section="campaigns"] td {
    overflow-wrap: anywhere !important;
  }

  body.app-mode .agentic-campaign-dialog {
    width: calc(100vw - 24px) !important;
    max-width: 440px !important;
    height: auto !important;
    max-height: calc(100svh - 32px) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode .agentic-campaign-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100svh - 40px) !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.app-mode .campaign-dialog-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .campaign-dialog-hero > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: start !important;
  }

  body.app-mode .campaign-dialog-hero .eyebrow,
  body.app-mode .campaign-dialog-hero p {
    grid-column: 1 / -1 !important;
  }

  body.app-mode .campaign-dialog-hero h2 {
    grid-column: 1 / 2 !important;
    margin: 0 !important;
    font-size: clamp(27px, 8vw, 38px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  body.app-mode .campaign-dialog-hero p {
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body.app-mode .campaign-dialog-hero .icon-button {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    align-self: start !important;
  }

  body.app-mode .campaign-agent-card {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .campaign-agent-card strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  body.app-mode .campaign-agent-card small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-banner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-banner strong,
  body.app-mode .agentic-campaign-dialog .campaign-brief-banner small {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid label,
  body.app-mode .agentic-campaign-dialog .choice-panel,
  body.app-mode .campaign-agent-output-grid article {
    min-width: 0 !important;
    padding: 9px !important;
  }

  body.app-mode .agentic-campaign-dialog input,
  body.app-mode .agentic-campaign-dialog select,
  body.app-mode .agentic-campaign-dialog textarea {
    width: 100% !important;
    min-height: 34px !important;
    font-size: 11px !important;
  }

  body.app-mode .agentic-campaign-dialog textarea {
    min-height: 74px !important;
    height: auto !important;
  }

  body.app-mode .agentic-campaign-dialog .dialog-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.app-mode .agentic-campaign-dialog .dialog-choice-grid label {
    min-height: 32px !important;
    padding: 6px !important;
    font-size: 9px !important;
  }

  body.app-mode .campaign-agent-output-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-mode .campaign-agent-output-grid article {
    min-height: 76px !important;
  }

  body.app-mode .campaign-agent-output-grid strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.app-mode .agentic-campaign-dialog .compact-estimate {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 9px !important;
  }

  body.app-mode .agentic-campaign-dialog menu {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    background: #f4dfc4 !important;
  }

  body.app-mode .agentic-campaign-dialog menu button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="automation"] [data-view-section="automation"] > .full-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header > div:first-child {
    max-width: none !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header h2 {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .header-actions button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary,
  body.app-mode[data-active-view="automation"] #automation-agent-plan,
  body.app-mode[data-active-view="automation"] .automation-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary > div,
  body.app-mode[data-active-view="automation"] #automation-agent-plan article,
  body.app-mode[data-active-view="automation"] .automation-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px !important;
    overflow: hidden !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary > div {
    min-height: 96px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary strong {
    font-size: 18px !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary small,
  body.app-mode[data-active-view="automation"] .automation-summary .eyebrow {
    font-size: 8.8px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-plan {
    max-height: none !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-plan article {
    display: grid !important;
    gap: 5px !important;
    min-height: 92px !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-plan article strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-plan article small,
  body.app-mode[data-active-view="automation"] #automation-agent-plan article .eyebrow {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-console {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-response,
  body.app-mode[data-active-view="automation"] .automation-agent-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-title {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="automation"] #automation-agent-copy {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-recommendations {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-recommendations article {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-recommendations strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-form textarea {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 96px !important;
    height: auto !important;
    font-size: 12px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-shortcuts {
    grid-column: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 3px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-shortcuts button {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="automation"] .automation-agent-form > button[type="submit"] {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 36px !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-actions button {
    min-height: 62px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-actions strong {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-settings .toggle-line,
  body.app-mode[data-active-view="automation"] .automation-settings button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-settings label {
    min-width: 0 !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-settings input,
  body.app-mode[data-active-view="automation"] .automation-settings select {
    min-height: 34px !important;
    width: 100% !important;
    font-size: 11px !important;
  }

  body.app-mode[data-active-view="automation"] .provider-output,
  body.app-mode[data-active-view="automation"] .automation-list,
  body.app-mode[data-active-view="automation"] .automation-row,
  body.app-mode[data-active-view="automation"] .automation-list .empty-state {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="automation"] .automation-row,
  body.app-mode[data-active-view="automation"] .automation-list .empty-state {
    padding: 9px !important;
  }

  /* Automation mobile cleanup: match the sticky-prompt-only page layout. */
  body.app-mode[data-active-view="automation"] .automation-agent-console {
    display: none !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header h2 {
    font-size: 18px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-summary,
  body.app-mode[data-active-view="automation"] #automation-agent-plan {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="automation"] .automation-actions,
  body.app-mode[data-active-view="automation"] .automation-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="automation"] .automation-settings .toggle-line,
  body.app-mode[data-active-view="automation"] .automation-settings button {
    grid-column: 1 / -1 !important;
  }

  body.app-mode[data-active-view="automation"] .automation-row,
  body.app-mode[data-active-view="automation"] .automation-list .empty-state {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="automation"] .automation-row .badge {
    justify-self: start !important;
  }
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
  }

  body {
    background: #f4dfc4 !important;
  }

  .landing-mode .app-shell,
  body:not(.app-mode) .app-shell {
    display: none !important;
  }

  .landing-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    overflow: visible !important;
    background:
      linear-gradient(90deg, rgba(8, 9, 13, 0.05) 1px, transparent 1px),
      linear-gradient(rgba(8, 9, 13, 0.05) 1px, transparent 1px),
      #f4dfc4 !important;
    background-size: 28px 28px;
  }

  body.app-mode .landing-page {
    display: none !important;
  }

  body.landing-mode .mobile-menu-toggle,
  body:not(.app-mode) .mobile-menu-toggle,
  body.landing-mode .mobile-sidebar-scrim,
  body:not(.app-mode) .mobile-sidebar-scrim {
    display: none !important;
  }

  .image-landing-frame,
  .hero-frame,
  .modules-frame,
  .agent-day-frame,
  .hive-map-frame,
  .proxy-agent-frame {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 720px !important;
    max-height: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #08090d !important;
    isolation: isolate !important;
  }

  .image-landing-frame + .image-landing-frame {
    margin-top: 10px !important;
  }

  .image-landing-frame img,
  .hero-frame > img,
  .modules-frame img,
  .agent-day-frame img,
  .hive-map-frame img,
  .proxy-agent-frame img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .ploxy-intelligence-frame {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: auto !important;
    margin-top: 10px !important;
    padding: 28px 14px 34px !important;
    overflow: hidden !important;
    border-top: 0 !important;
    background:
      linear-gradient(90deg, rgba(8, 9, 13, 0.09) 0 1px, transparent 1px 100%),
      linear-gradient(180deg, rgba(8, 9, 13, 0.09) 0 1px, transparent 1px 100%),
      linear-gradient(148deg, #f8f4ef 0 36%, #67d5e8 36% 50%, #234eff 50% 70%, #d5ff00 70% 82%, #08090d 82% 100%) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
  }

  .ploxy-intelligence-frame::before {
    top: 20px !important;
    left: -20px !important;
    right: -20px !important;
    height: 84px !important;
  }

  .ploxy-intelligence-frame::after {
    right: -22px !important;
    bottom: 22px !important;
    width: 190px !important;
    height: 58px !important;
    border-width: 3px !important;
    box-shadow: 4px 4px 0 #08090d !important;
  }

  .ploxy-intelligence-art {
    width: min(78vw, 330px) !important;
    margin: 0 auto !important;
    transform: rotate(-1deg) !important;
  }

  .ploxy-intelligence-art::before {
    inset: -10px 10px 10px -10px !important;
    border-width: 3px !important;
    box-shadow: -5px 5px 0 #234eff !important;
  }

  .ploxy-intelligence-art::after {
    right: -14px !important;
    width: 46px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  .ploxy-intelligence-art img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 512 / 913 !important;
    border-width: 3px !important;
    object-fit: cover !important;
    box-shadow: 6px 6px 0 #08090d !important;
  }

  .ploxy-intelligence-art span {
    left: -8px !important;
    bottom: 8% !important;
    max-width: 230px !important;
    padding: 8px 10px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 9px !important;
  }

  .ploxy-intelligence-copy {
    gap: 12px !important;
    max-width: 100% !important;
  }

  .ploxy-intelligence-copy .landing-kicker {
    padding: 8px 10px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  .ploxy-intelligence-copy h2 {
    max-width: 100% !important;
    font-size: clamp(42px, 13vw, 66px) !important;
    line-height: 0.92 !important;
    text-shadow: 3px 3px 0 #08090d !important;
  }

  .ploxy-intelligence-copy p {
    max-width: 100% !important;
    padding: 13px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .ploxy-intelligence-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .ploxy-intelligence-grid article {
    min-height: 112px !important;
    padding: 12px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  .ploxy-intelligence-grid strong {
    margin-top: 9px !important;
    font-size: 20px !important;
  }

  .ploxy-intelligence-grid small {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  .ploxy-intelligence-frame {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 720px !important;
    max-height: 960px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #08090d !important;
  }

  .ploxy-intelligence-frame::before,
  .ploxy-intelligence-frame::after {
    content: none !important;
  }

  .ploxy-intelligence-frame > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .hero-frame > img {
    object-position: 52% center !important;
  }

  .modules-frame img {
    object-position: 43% center !important;
  }

  .agent-day-frame img {
    object-position: 18% center !important;
  }

  .hive-map-frame img {
    object-position: 48% center !important;
  }

  .hive-map-frame-alt img {
    object-position: 45% center !important;
  }

  .proxy-agent-frame img {
    object-position: center !important;
  }

  .hero-frame {
    padding-bottom: 0 !important;
  }

  .hero-frame::after,
  .modules-frame::after,
  .agent-day-frame::after,
  .hive-map-frame::after,
  .proxy-agent-frame::after {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 24px !important;
    z-index: 5 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 16px 18px !important;
    border: 3px solid #08090d !important;
    border-radius: 0 !important;
    background: #dfff3f !important;
    box-shadow: 6px 6px 0 #08090d !important;
    color: #08090d !important;
    font: 900 19px/1.08 Geist, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
  }

  .hero-frame::before,
  .modules-frame::before,
  .agent-day-frame::before,
  .hive-map-frame::before,
  .proxy-agent-frame::before {
    position: absolute !important;
    left: 16px !important;
    top: calc(18px + env(safe-area-inset-top)) !important;
    z-index: 5 !important;
    display: block !important;
    max-width: calc(100% - 32px) !important;
    padding: 9px 11px !important;
    border: 3px solid #08090d !important;
    background: #08090d !important;
    box-shadow: 4px 4px 0 rgba(8, 9, 13, 0.55) !important;
    color: #fff7ed !important;
    font: 900 12px/1 "Geist Mono", Menlo, monospace !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .hero-frame::before {
    content: "POLXY / AI GROWTH AGENT" !important;
  }

  .hero-frame::after {
    content: "The AI marketing operating system that plans, creates, publishes, optimizes, and reports while you scale." !important;
  }

  .modules-frame::before {
    content: "POLXY OS / MODULE WALL" !important;
  }

  .modules-frame::after {
    background: #67d5e8 !important;
    content: "One workspace for creative, SEO, ads, Telegram, community, analytics, and client-ready reports." !important;
  }

  .agent-day-frame::before {
    content: "POLXY AGENT / DAILY LOOP" !important;
  }

  .agent-day-frame::after {
    background: #fff7ed !important;
    content: "Queue, approve, and launch the daily growth loop with every channel tied back to measurable work." !important;
  }

  .hive-map-frame::before {
    content: "CREATIVE STUDIO / BRAND MEMORY" !important;
  }

  .hive-map-frame::after {
    background: #f5b7dd !important;
    content: "Generate images, captions, ads, reports, and automation from one project memory and brand kit." !important;
  }

  .hive-map-frame-alt::before {
    content: "QUEUE CULTURE / APPROVAL READY" !important;
  }

  .hive-map-frame-alt::after {
    background: #f8d46a !important;
    content: "Move from brief to creative to review without losing context, cost, permissions, or next actions." !important;
  }

  .proxy-agent-frame::before {
    content: "PROXY AGENT / ALWAYS ON" !important;
  }

  .proxy-agent-frame::after {
    background: #67d5e8 !important;
    content: "Polxy keeps the brief, brand memory, approvals, and performance signals connected so every next action is ready for review." !important;
  }

  .proxy-agent-copy {
    display: none !important;
  }

  .image-login-panel {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 6px !important;
    width: calc(100% - 20px) !important;
    max-width: 520px !important;
    max-height: none !important;
    margin: -2px auto 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    border: 3px solid #08090d !important;
    border-radius: 0 !important;
    background:
      linear-gradient(100deg, #ef514b 0 31%, #dfff3f 31% 58%, #3954f4 58% 100%) !important;
    box-shadow: 5px 5px 0 #08090d !important;
    transform: none !important;
  }

  .image-login-panel::before,
  .image-login-panel::after {
    display: none !important;
  }

  .image-login-panel > img {
    width: 100% !important;
    height: 34px !important;
    object-fit: contain !important;
    padding: 5px !important;
    border: 3px solid #08090d !important;
    background: #050508 !important;
    box-shadow: none !important;
  }

  .image-login-panel > span {
    display: grid !important;
    min-width: 0 !important;
    min-height: 34px !important;
    place-items: center start !important;
    padding: 0 7px !important;
    border: 3px solid #08090d !important;
    background: #08090d !important;
    color: #dfff3f !important;
    box-shadow: none !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .landing-login-form {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .landing-login-form label:nth-of-type(1),
  .landing-login-form label:nth-of-type(2),
  .landing-login-form .landing-remember,
  .landing-login-form small,
  .landing-login-reset {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .landing-login-form label:nth-of-type(3),
  .landing-login-form label:nth-of-type(4),
  .landing-login,
  .landing-login.primary,
  .landing-login:not(.primary),
  .landing-reset-link {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .landing-login-form label {
    display: grid !important;
    gap: 3px !important;
    color: #08090d !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .landing-login-form input {
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 0 !important;
    background: rgba(255, 247, 237, 0.94) !important;
    box-shadow: 3px 3px 0 #08090d !important;
    color: #08090d !important;
    font-size: 10px !important;
  }

  .landing-login-form .landing-remember {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 21px !important;
  }

  .landing-login-form .landing-remember input {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .landing-login-form .landing-remember span {
    width: max-content !important;
    max-width: 100% !important;
    padding: 4px 6px !important;
    border: 0 !important;
    background: #08090d !important;
    color: #dfff3f !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  .landing-login,
  .landing-login.primary,
  .landing-reset-link {
    min-height: 32px !important;
    padding: 0 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #08090d !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .landing-login.primary {
    background: #dfff3f !important;
  }

  .hosted-auth-login {
    grid-column: 1 / -1 !important;
    background: #67d5e8 !important;
  }

  .landing-reset-link {
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    background: #fff7ed !important;
  }

  .landing-login-form small {
    color: rgba(8, 9, 13, 0.78) !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  .landing-login.floating-login {
    display: none !important;
  }

  .landing-auth-cta {
    position: absolute !important;
    left: 16px !important;
    bottom: 168px !important;
    z-index: 26 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 3px solid #08090d !important;
    border-radius: 0 !important;
    background: #dfff3f !important;
    color: #08090d !important;
    box-shadow: 4px 4px 0 #08090d !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .landing-auth-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: rgba(8, 9, 13, 0.72) !important;
  }

  body.landing-auth-open .landing-auth-scrim {
    display: block !important;
  }

  .image-login-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    inset: calc(10px + env(safe-area-inset-top)) 10px auto 10px !important;
    z-index: 130 !important;
    display: none !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-content: start !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 40px 8px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background:
      linear-gradient(100deg, #ef514b 0 31%, #dfff3f 31% 58%, #3954f4 58% 100%) !important;
    transform: none !important;
  }

  body.landing-auth-open .image-login-panel {
    display: grid !important;
  }

  .landing-auth-close {
    position: absolute !important;
    right: 7px !important;
    top: 7px !important;
    z-index: 2 !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 0 !important;
    background: #fff7ed !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .landing-footer,
  .landing-detail-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 28px 14px !important;
    overflow-x: hidden !important;
  }

  .landing-footer-intro,
  .landing-footer-signals,
  .landing-footer-links,
  .landing-footer-bottom,
  .landing-detail-rich,
  .landing-detail-main,
  .landing-contact-page,
  .landing-contact-routing,
  .landing-contact-flow,
  .landing-contact-assurance,
  .landing-contact-form .form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .landing-page > .landing-detail-page {
    display: none !important;
  }

  .landing-page > .landing-detail-page:target {
    display: grid !important;
  }

  .landing-page:has(.landing-detail-page:target) > :not(.landing-detail-page:target) {
    display: none !important;
  }

  .landing-footer-intro h2,
  .landing-detail-page h2,
  .landing-contact-page h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 13vw, 58px) !important;
    line-height: 0.95 !important;
  }

  .landing-pricing-page .landing-pricing-header h2,
  .landing-pricing-page:target .landing-pricing-header h2 {
    font-size: 32px !important;
    line-height: 1 !important;
  }

  .landing-footer-intro p,
  .landing-detail-page p,
  .landing-contact-copy > p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.36 !important;
  }

  .landing-pricing-page .landing-pricing-header p,
  .landing-pricing-page:target .landing-pricing-header p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body.app-mode {
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #eef7dd !important;
  }

  body.app-mode > .app-shell,
  body.app-mode:not(.admin-mode) > .app-shell,
  body.app-mode .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
  }

  .mobile-menu-toggle {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    z-index: 150 !important;
    display: grid !important;
    grid-template-columns: 20px auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(8, 9, 13, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 247, 237, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    color: #08090d !important;
    box-shadow: 0 10px 28px rgba(8, 9, 13, 0.16) !important;
  }

  .mobile-menu-toggle span {
    grid-column: 1 !important;
    display: block !important;
    width: 18px !important;
    height: 3px !important;
    background: #08090d !important;
  }

  .mobile-menu-toggle span:nth-child(1) {
    align-self: end !important;
  }

  .mobile-menu-toggle span:nth-child(2) {
    align-self: center !important;
  }

  .mobile-menu-toggle span:nth-child(3) {
    align-self: start !important;
  }

  .mobile-menu-toggle strong {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  body.mobile-nav-open .mobile-menu-toggle {
    background: rgba(103, 213, 232, 0.94) !important;
  }

  .mobile-sidebar-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: rgba(8, 9, 13, 0.34) !important;
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 160ms ease !important;
  }

  body.mobile-nav-open .mobile-sidebar-scrim {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.app-mode > .app-shell > .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 140 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(84vw, 326px) !important;
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 0 !important;
    padding: calc(62px + env(safe-area-inset-top)) 14px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(8, 9, 13, 0.12) !important;
    border-left: 0 !important;
    border-radius: 0 24px 24px 0 !important;
    background:
      linear-gradient(145deg, rgba(255, 247, 237, 0.96), rgba(244, 223, 196, 0.92)),
      repeating-linear-gradient(135deg, rgba(103, 213, 232, 0.08) 0 10px, transparent 10px 22px) !important;
    box-shadow: 18px 0 44px rgba(8, 9, 13, 0.22) !important;
    transform: translateX(calc(-100% - 32px)) !important;
    transition: transform 180ms ease !important;
  }

  body.mobile-nav-open > .app-shell > .sidebar {
    transform: translateX(0) !important;
  }

  body.app-mode > .app-shell > .sidebar .brand {
    display: grid !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 0 12px !important;
    place-items: center !important;
    border: 1px solid rgba(8, 9, 13, 0.16) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #050508, #151522) !important;
    box-shadow: 0 14px 28px rgba(8, 9, 13, 0.16) !important;
  }

  body.app-mode > .app-shell > .sidebar .brand img {
    width: min(170px, 70%) !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  body.app-mode > .app-shell > .sidebar nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 0 4px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.app-mode > .app-shell > .sidebar nav .nav-item {
    width: 100% !important;
    min-height: 39px !important;
    justify-content: flex-start !important;
    padding: 0 13px !important;
    border: 1px solid rgba(8, 9, 13, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(255, 250, 240, 0.76) !important;
    box-shadow: none !important;
    color: #08090d !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  body.app-mode > .app-shell > .sidebar nav .nav-item.active {
    border-color: rgba(8, 9, 13, 0.22) !important;
    background: linear-gradient(135deg, rgba(223, 255, 63, 0.94), rgba(103, 213, 232, 0.58)) !important;
    box-shadow: 0 8px 18px rgba(8, 9, 13, 0.12) !important;
  }

  body.app-mode > .app-shell > .sidebar .workspace-card {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(8, 9, 13, 0.14) !important;
    border-radius: 18px !important;
    background: rgba(255, 250, 240, 0.74) !important;
    box-shadow: 0 12px 24px rgba(8, 9, 13, 0.10) !important;
  }

  body.app-mode > .app-shell > .sidebar .workspace-card .eyebrow,
  body.app-mode > .app-shell > .sidebar .workspace-card > span:not(.eyebrow) {
    display: none !important;
  }

  body.app-mode > .app-shell > .sidebar .workspace-card strong {
    grid-column: 1 / -1 !important;
    overflow: hidden !important;
    color: #08090d !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode > .app-shell > .sidebar .workspace-card button {
    min-height: 34px !important;
    padding: 0 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.app-mode > .app-shell > .sidebar .workspace-card button:last-child {
    grid-column: 1 / -1 !important;
  }

  body.app-mode > .app-shell > main {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: calc(62px + env(safe-area-inset-top)) 12px 20px !important;
    overflow: visible !important;
  }

  .content-grid.view-section.active,
  .dashboard-kpi-row,
  .dashboard-secondary,
  .status-grid,
  .platform-grid,
  .campaign-grid,
  .connection-grid,
  .analytics-grid,
  .billing-grid,
  .subscription-summary,
  .plan-usage-grid,
  .plan-grid,
  .credit-system-panel,
  .credit-system-grid,
  .credit-topup-grid,
  .settings-summary-grid,
  .settings-form .form-grid,
  .settings-toggle-grid,
  .team-access-layout,
  .creative-agent-console,
  .creative-studio-grid,
  .creative-board,
  .creative-library-layout,
  .automation-grid,
  .queue-command-center,
  .reports-grid,
  .brand-form,
  .module-overview-board,
  .module-roadmap,
  .jobs-operation-board,
  .job-summary,
  .ai-routing-board,
  .routing-summary,
  .admin-summary,
  .admin-control-grid,
  .admin-feature-flags,
  .admin-command-grid,
  .admin-layout,
  .admin-health-grid,
  .admin-tool-grid,
  .admin-deep-grid,
  .admin-billing-ledger,
  .admin-detail-grid,
  .admin-provider-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .topbar,
  .panel,
  .full-panel,
  .metric-card,
  .plan-card,
  .settings-section,
  .admin-section,
  .admin-command-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .topbar,
  .panel-header,
  .project-command-bar,
  .admin-filter-bar,
  .admin-bulk-bar,
  .report-actions,
  .brand-actions,
  .settings-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .topbar h1,
  .panel-header h2 {
    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .admin-tabs {
    position: static !important;
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tabs button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 9.5px !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .image-login-panel {
    width: auto !important;
    margin-inline: 0 !important;
    padding: 8px !important;
    padding-top: 42px !important;
  }

  body.app-mode > .app-shell > main {
    padding-inline: 10px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="dashboard"] > .app-shell > main {
    padding-bottom: 206px !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] {
    padding-bottom: 188px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 90 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .performance-hero,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .campaign-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .platform-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .cost-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .dashboard-agent-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .operations-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article:nth-of-type(n) {
    grid-column: 1 / 2 !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .campaign-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article:nth-of-type(4),
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .cost-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article:nth-of-type(6),
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .dashboard-agent-panel {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
  }

  body.app-mode[data-active-view="dashboard"] .performance-hero,
  body.app-mode[data-active-view="dashboard"] .campaign-panel,
  body.app-mode[data-active-view="dashboard"] .platform-panel,
  body.app-mode[data-active-view="dashboard"] .cost-panel,
  body.app-mode[data-active-view="dashboard"] .dashboard-agent-panel,
  body.app-mode[data-active-view="dashboard"] .operations-panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .dashboard-secondary {
    padding: 12px !important;
    gap: 10px !important;
  }

  body.app-mode[data-active-view="dashboard"] .panel-header {
    gap: 6px !important;
  }

  body.app-mode[data-active-view="dashboard"] .panel-header h2 {
    font-size: clamp(20px, 6.4vw, 28px) !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-switcher {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-switcher label,
  body.app-mode[data-active-view="dashboard"] .project-switcher > div,
  body.app-mode[data-active-view="dashboard"] .project-switcher .secondary-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-switcher > div {
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-switcher > div small {
    max-width: 100% !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-memory-drawer summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    padding-block: 8px !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-memory-drawer summary small {
    max-width: 100% !important;
    text-align: left !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-memory-drawer .project-memory {
    margin-inline: 8px !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-memory-drawer .form-grid,
  body.app-mode[data-active-view="dashboard"] .project-memory-drawer .project-color-picker-grid,
  body.app-mode[data-active-view="dashboard"] .project-memory-drawer .project-color-code-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="dashboard"] .project-memory-drawer input,
  body.app-mode[data-active-view="dashboard"] .project-memory-drawer textarea,
  body.app-mode[data-active-view="dashboard"] .project-memory-drawer select,
  body.app-mode[data-active-view="dashboard"] .project-memory-drawer button {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] .hero-performance,
  body.app-mode[data-active-view="dashboard"] .agent-command-board,
  body.app-mode[data-active-view="dashboard"] .dashboard-agent-dock,
  body.app-mode[data-active-view="dashboard"] .performance-metrics,
  body.app-mode[data-active-view="dashboard"] .campaign-summary,
  body.app-mode[data-active-view="dashboard"] .recommendation-list,
  body.app-mode[data-active-view="dashboard"] .platform-score-list,
  body.app-mode[data-active-view="dashboard"] .cost-breakdown-list,
  body.app-mode[data-active-view="dashboard"] .operations-panel .operation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="dashboard"] .performance-metrics,
  body.app-mode[data-active-view="dashboard"] .campaign-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-dock {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "modes modes"
      "options options"
      "input send" !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-mode,
  body.app-mode[data-active-view="dashboard"] .dashboard-agent-options {
    gap: 6px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-mode button,
  body.app-mode[data-active-view="dashboard"] .dashboard-agent-options button {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-dock textarea {
    min-height: 68px !important;
    font-size: 13px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-send {
    min-width: 58px !important;
    min-height: 68px !important;
  }

  .dashboard-answer-dialog {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-width: 3px !important;
    border-radius: 8px !important;
    box-shadow: 5px 5px 0 #08090d !important;
  }

  .dashboard-answer-dialog.is-report {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 6px !important;
  }

  .dashboard-answer-modal {
    max-height: calc(100dvh - 26px) !important;
    grid-template-rows: auto auto auto minmax(120px, 1fr) auto !important;
  }

  .dashboard-answer-dialog.is-report .dashboard-answer-modal {
    height: 100% !important;
    max-height: none !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  .dashboard-answer-modal > header,
  .dashboard-answer-question,
  .dashboard-answer-body,
  .dashboard-answer-recommendations {
    padding-inline: 12px !important;
  }

  .dashboard-answer-context {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 9px 12px !important;
  }

  .dashboard-answer-dialog.is-report .dashboard-answer-context {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 7px 10px !important;
  }

  .dashboard-answer-dialog.is-report .dashboard-answer-question {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-answer-dialog.is-report .dashboard-answer-question span {
    display: none !important;
  }

  .dashboard-answer-dialog.is-report .dashboard-answer-body {
    padding: 10px !important;
  }

  .dashboard-answer-body {
    min-height: 150px !important;
  }

  .dashboard-report-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 11px !important;
  }

  .dashboard-report-score {
    min-width: 0 !important;
    min-height: 82px !important;
  }

  .dashboard-report-summary,
  .dashboard-report-rows,
  .dashboard-report-narrative {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-report-metric {
    min-height: 88px !important;
    padding: 8px !important;
  }

  .dashboard-report-insight {
    min-height: 118px !important;
    padding: 10px !important;
  }

  .dashboard-report-action-plan {
    padding: 10px !important;
  }

  body.app-mode[data-active-view="dashboard"] .recommendation-list,
  body.app-mode[data-active-view="dashboard"] .platform-score-list,
  body.app-mode[data-active-view="dashboard"] .cost-breakdown-list,
  body.app-mode[data-active-view="dashboard"] .queue-list,
  body.app-mode[data-active-view="dashboard"] .event-list,
  body.app-mode[data-active-view="dashboard"] .agent-action-list {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    grid-auto-rows: auto !important;
  }

  body.app-mode[data-active-view="dashboard"] .recommendation-card,
  body.app-mode[data-active-view="dashboard"] .platform-score-row,
  body.app-mode[data-active-view="dashboard"] .cost-row,
  body.app-mode[data-active-view="dashboard"] .queue-list li,
  body.app-mode[data-active-view="dashboard"] .event-list li,
  body.app-mode[data-active-view="dashboard"] .dashboard-agent-panel .agent-action,
  body.app-mode[data-active-view="dashboard"] .operations-panel .operation-button {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="dashboard"] .mode-control {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="dashboard"] .mode-control .mode {
    min-width: 0 !important;
    padding-inline: 6px !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > .panel,
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article {
    height: auto !important;
    align-self: start !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] > article:nth-of-type(4) .queue-list,
  body.app-mode[data-active-view="dashboard"] .event-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] .cost-panel .cost-breakdown-list {
    grid-auto-rows: auto !important;
  }

  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"],
  body.app-mode[data-active-view="dashboard"] [data-view-section="dashboard"] * {
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="dashboard"] .panel-header {
    align-items: start !important;
  }

  body.app-mode[data-active-view="dashboard"] .panel-header h2 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.04 !important;
  }

  body.app-mode[data-active-view="dashboard"] .hero-performance {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="dashboard"] .hero-performance strong,
  body.app-mode[data-active-view="dashboard"] .performance-metrics strong,
  body.app-mode[data-active-view="dashboard"] .campaign-summary strong {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  body.app-mode[data-active-view="dashboard"] .queue-list li {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="dashboard"] .queue-actions {
    justify-content: flex-start !important;
  }

  body.app-mode[data-active-view="dashboard"] .platform-panel .platform-score-row {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="dashboard"] .platform-panel .platform-score-row > div:first-child {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  body.app-mode[data-active-view="dashboard"] .platform-panel .platform-score-row .score-track {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="dashboard"] .platform-panel .platform-score-row b {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  body.app-mode[data-active-view="dashboard"] .queue-actions button,
  body.app-mode[data-active-view="dashboard"] .queue-status-pill {
    min-height: 28px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="dashboard"] .operations-panel .operation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="dashboard"] .operations-panel .operation-button {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-dock textarea {
    min-height: 56px !important;
  }

  body.app-mode[data-active-view="dashboard"] .dashboard-agent-send {
    min-height: 56px !important;
  }

  @media (max-width: 420px) {
    body.app-mode[data-active-view="dashboard"] .performance-metrics,
    body.app-mode[data-active-view="dashboard"] .campaign-summary,
    body.app-mode[data-active-view="dashboard"] .dashboard-answer-context,
    body.app-mode[data-active-view="dashboard"] .dashboard-report-summary,
    body.app-mode[data-active-view="dashboard"] .dashboard-report-rows,
    body.app-mode[data-active-view="dashboard"] .dashboard-report-narrative {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  body.app-mode:not(.admin-mode) .operator-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.app-mode:not(.admin-mode) .operator-strip span {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    border-width: 2px !important;
    border-radius: 6px !important;
    box-shadow: 2px 2px 0 #08090d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  body.app-mode:not(.admin-mode) .operator-strip #automation-strip {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) [data-view-section="creative"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) [data-view-section="creative"] > .creative-engine {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-engine > .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-engine > .panel-header h2 {
    font-size: clamp(22px, 6.6vw, 28px) !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-engine > .panel-header .header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "galleryHead"
      "gallery"
      "modes"
      "channels"
      "actions"
      "tools"
      "composer"
      "preview" !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-project-switcher,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .connected-channel-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-tool-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .manual-studio-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-project-switcher {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head > div {
    max-width: none !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head .secondary-action {
    width: 100% !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery {
    grid-auto-columns: minmax(236px, 82vw) !important;
    min-height: 330px !important;
    max-height: none !important;
    padding: 5px 3px 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-empty-card {
    width: min(100%, 270px) !important;
    max-width: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch button {
    min-width: 0 !important;
    padding-inline: 5px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions button {
    min-height: 62px !important;
    padding: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-tool-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-tool-strip button {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .manual-studio-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage {
    height: auto !important;
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel {
    min-height: 520px !important;
    padding: 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "asset asset"
      "input input"
      "cost send" !important;
    min-height: 0 !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail {
    grid-area: asset;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form textarea {
    grid-area: input;
    min-height: 76px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .chat-composer-actions {
    display: contents !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .cost-menu {
    grid-area: cost;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .send-icon-button {
    grid-area: send;
    width: 42px !important;
    min-height: 38px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .auto-cost-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .auto-cost-panel button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage {
    min-height: 430px !important;
    padding: 10px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage .preview-device {
    width: min(100%, 330px) !important;
    height: min(78vw, 330px) !important;
    max-width: 100% !important;
    max-height: 360px !important;
  }

  body.app-mode.creative-focus-mode {
    overflow: hidden !important;
  }

  body.app-mode.creative-focus-mode .app-shell {
    display: block !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.app-mode.creative-focus-mode .sidebar,
  body.app-mode.creative-focus-mode .app-footer,
  body.app-mode.creative-focus-mode .mobile-menu-toggle,
  body.app-mode.creative-focus-mode .mobile-sidebar-scrim,
  body.app-mode.creative-focus-mode .connected-channel-strip {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "gallery"
      "composer"
      "manual" !important;
    gap: 10px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-gallery-head,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .connected-channel-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-actions,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-tool-strip,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-preview-stage,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-dna-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .social-production-lab {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-studio-tabs {
    grid-area: tabs !important;
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-studio-tabs button {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .presenter-studio-lab {
    grid-area: presenter !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-areas:
      "project"
      "tabs"
      "gallery"
      "presenter" !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library.creative-gallery {
    grid-area: gallery !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel {
    grid-area: composer !important;
    min-height: 0 !important;
    position: relative !important;
    bottom: auto !important;
    padding: 5px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "rail rail"
      "options options"
      "input input"
      "actions actions" !important;
    min-height: 0 !important;
    gap: 5px !important;
    padding: 5px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail {
    grid-area: rail !important;
    gap: 5px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options {
    grid-area: options !important;
    gap: 5px !important;
    min-height: 24px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail button,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options button {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .ploxy-chat-form textarea,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-form textarea {
    grid-area: input !important;
    min-height: 52px !important;
    max-height: 64px !important;
    padding: 6px 9px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .chat-composer-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .cost-mode-trigger,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .send-icon-button {
    min-height: 34px !important;
  }

  body.app-mode.creative-focus-mode main {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.app-mode.creative-focus-mode [data-view-section="creative"] {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 16px) !important;
  }

  body.app-mode.creative-focus-mode .creative-engine {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: calc(100dvh - 16px) !important;
    height: auto !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  body.app-mode.creative-focus-mode .creative-engine > .panel-header {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  body.app-mode.creative-focus-mode .creative-engine > .panel-header > div:first-child {
    display: none !important;
  }

  body.app-mode.creative-focus-mode .creative-engine > .panel-header .header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console.chat-studio {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "modes"
      "preview"
      "composer" !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch {
    position: static !important;
    grid-area: modes !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch button {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px !important;
    font-size: 9px !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch button span {
    display: block;
    margin: 0 0 2px !important;
    font-size: 8px !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .creative-preview-stage {
    grid-area: preview !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    padding: 10px !important;
  }

  body.app-mode.creative-focus-mode .creative-preview-stage .preview-shell,
  body.app-mode.creative-focus-mode .creative-preview-stage .preview-canvas {
    min-height: 330px !important;
    height: auto !important;
  }

  body.app-mode.creative-focus-mode .creative-preview-stage .preview-device {
    width: min(100%, 330px) !important;
    height: min(78vw, 330px) !important;
    max-width: 100% !important;
    max-height: 330px !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .ploxy-chat-panel,
  body.app-mode.creative-focus-mode .creative-agent-console .manual-studio-panel {
    grid-area: composer !important;
    width: 100% !important;
    height: auto !important;
    min-height: 455px !important;
    max-height: none !important;
    padding: 9px !important;
    overflow: visible !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .ploxy-chat-body {
    min-height: 130px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .ploxy-chat-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "asset asset"
      "input input"
      "cost send" !important;
    min-height: 0 !important;
    gap: 7px !important;
  }

  body.app-mode.creative-focus-mode .composer-asset-rail {
    grid-area: asset;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .ploxy-chat-form textarea {
    grid-area: input;
    min-height: 74px !important;
    max-height: 96px !important;
  }

  body.app-mode.creative-focus-mode .chat-composer-actions {
    display: contents !important;
  }

  body.app-mode.creative-focus-mode .cost-menu {
    grid-area: cost;
  }

  body.app-mode.creative-focus-mode .creative-agent-console .send-icon-button {
    grid-area: send;
    width: 42px !important;
    min-height: 38px !important;
  }

  body.app-mode.creative-focus-mode .auto-cost-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.app-mode.creative-focus-mode .auto-cost-panel button {
    width: 100% !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch,
  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr) minmax(0, 0.9fr) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch button,
  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 4px 3px !important;
    overflow: hidden !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-mode-switch button span,
  body.app-mode.creative-focus-mode .creative-agent-console .creative-mode-switch button span {
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 820px) {
  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero,
  body.app-mode .agentic-campaign-dialog .campaign-brief-grid,
  body.app-mode .agentic-campaign-dialog .campaign-brief-banner,
  body.app-mode .agentic-campaign-dialog .campaign-agent-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(26px, 7.6vw, 36px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-dialog-hero p {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-agent-card {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid .wide-field,
  body.app-mode .agentic-campaign-dialog .campaign-half-field,
  body.app-mode .agentic-campaign-dialog .campaign-brief-grid label,
  body.app-mode .agentic-campaign-dialog .choice-panel {
    grid-column: 1 / -1 !important;
  }

  body.app-mode .agentic-campaign-dialog .campaign-brief-grid {
    gap: 8px !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .panel-header h2 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .module-overview-board strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card h3 {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="modules"] [data-view-section="modules"] .roadmap-card p {
    font-size: 8.8px !important;
    line-height: 1.18 !important;
  }
}

/* Final mobile prompt override: page-specific mobile rules above must not resize prompt boxes. */
@media (max-width: 820px) {
  body.app-mode[data-active-view][data-active-view] [class*="-agent-dock"] {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 90 !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "modes modes"
      "options options"
      "input send" !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      #fff7ed !important;
    color: #08090d !important;
    box-shadow: 3px 3px 0 #08090d, 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-mode"],
  body.app-mode[data-active-view][data-active-view] [class*="-agent-options"] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-mode"] {
    grid-area: modes !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-options"] {
    grid-area: options !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-mode"] button,
  body.app-mode[data-active-view][data-active-view] [class*="-agent-options"] button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-options"] span {
    color: #3859ef !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-dock"] textarea {
    grid-area: input !important;
    min-height: 68px !important;
    max-height: 88px !important;
    padding: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view][data-active-view] [class*="-agent-send"] {
    grid-area: send !important;
    min-width: 58px !important;
    min-height: 68px !important;
    padding: 7px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
}

/* Creative Studio mobile composer follows the same prompt scale as module prompts. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "rail rail"
      "options options"
      "input input"
      "actions actions" !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      #fff7ed !important;
    color: #08090d !important;
    box-shadow: 3px 3px 0 #08090d, 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail {
    grid-area: rail !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options {
    grid-area: options !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options span {
    color: #3859ef !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-asset-rail button,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .composer-brief-options button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-form textarea {
    grid-area: input !important;
    min-height: 68px !important;
    max-height: 88px !important;
    padding: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .chat-composer-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 7px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .cost-mode-trigger,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console .send-icon-button {
    min-height: 38px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
}

/* Final mobile compact typography pass. */
@media (max-width: 820px) {
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section],
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(h1, h2, h3, h4, h5, p, span, small, strong, label, button, input, textarea, select, th, td, summary, li) {
    font-family: Geist, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header {
    display: flex !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header > * {
    min-width: 0 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header > :first-child {
    flex: 1 1 auto !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header > :not(:first-child) {
    flex: 0 0 auto !important;
    max-width: 38% !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header :where(h1, h2),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] > .panel > .panel-header :where(h1, h2),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] > .full-panel > .panel-header :where(h1, h2) {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 15.5px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header :where(p, small) {
    margin: 2px 0 0 !important;
    font-size: 9.75px !important;
    line-height: 1.22 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header :where(.eyebrow, .badge, .pill, .status-pill, .secondary-action, .primary-action) {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 8.75px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .section-title :where(h2, h3),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(.module-surface-card, .roadmap-card, .settings-section, .module-work-grid article, .geo-fix-draft-panel) :where(h2, h3) {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(h4, h5, .module-rule-item strong, .module-list-stack strong, .provider-output strong) {
    font-size: 11.25px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(p, li, label, th, td, summary, .panel-note, .provider-output, .module-rule-item, .module-list-stack, .empty-state p) {
    font-size: 10.75px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(small, .eyebrow, .metric-label, .card-label, .meta, .hint, .badge, .pill, .status-pill) {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(.metric-card, .status-grid, .security-status-grid, .module-kpi-grid, .module-overview-board, .performance-metrics, .campaign-summary, .billing-grid, .project-switcher, [class*="-status-grid"], [class*="-kpi-grid"], [class*="score"], [class*="stat"], [class*="cost"]) strong {
    font-size: 15.5px !important;
    line-height: 1.06 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(.hero-score, .creative-score, .readiness-score, .health-score) strong {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] :where(input, textarea, select) {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section][data-view-section] .panel-header :where(h1, h2) {
    font-size: 15.5px !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section][data-view-section] .section-title :where(h2, h3),
  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section][data-view-section] :where([class*="card"], [class*="panel"], [class*="item"]) :where(h2, h3) {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section][data-view-section] :where(p, li, label, th, td, summary, .panel-note, .provider-output, .module-rule-item, .module-list-stack, .empty-state p, [class*="card"] p, [class*="panel"] p, [class*="item"] p, [class*="row"] p) {
    font-size: 10.75px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section][data-view-section] :where(small, .eyebrow, .metric-label, .card-label, .meta, .hint, .badge, .pill, .status-pill, [class*="label"]) {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="creative"][data-active-view="creative"][data-active-view="creative"] [data-view-section="creative"] #media-library .smart-creative-card h3 {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="creative"][data-active-view="creative"][data-active-view="creative"] [data-view-section="creative"] #media-library .smart-creative-card p {
    font-size: 10.75px !important;
    line-height: 1.28 !important;
  }

  body.app-mode[data-active-view="creative"][data-active-view="creative"][data-active-view="creative"] [data-view-section="creative"] #media-library .smart-creative-card :where(.media-meta span, footer small, footer .badge, .creative-execution-chip) {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }
}

@media (max-width: 820px) {
  html,
  body.app-mode {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.app-mode > .app-shell,
  body.app-mode > .app-shell > main,
  body.app-mode [data-view-section] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-engine-page {
    gap: 8px !important;
    padding: 9px !important;
    border: 1px solid rgba(19, 37, 47, 0.14) !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.10), transparent 38%),
      #fffaf0 !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module > .panel-header,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-engine-page > .panel-header {
    min-height: 42px !important;
    gap: 7px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(19, 37, 47, 0.14) !important;
    border-left: 4px solid #67d5e8 !important;
    border-radius: 8px !important;
    background: #fffdf8 !important;
    box-shadow: 0 6px 14px rgba(19, 37, 47, 0.07) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module > .panel-header h2,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-engine-page > .panel-header h2 {
    font-size: 14.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] #reach-module-status,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] #geo-module-status {
    min-height: 22px !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(19, 37, 47, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(223, 255, 63, 0.60) !important;
    box-shadow: none !important;
    font-size: 8.25px !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module .module-hero-strip,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-command-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
    border: 1px solid rgba(19, 37, 47, 0.14) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.16), transparent 46%),
      #fffdf8 !important;
    box-shadow: 0 6px 14px rgba(19, 37, 47, 0.07) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-command-hero::before {
    height: 3px !important;
    background: linear-gradient(90deg, #67d5e8, #dfff3f, #8b5cf6) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module .module-hero-strip strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-command-hero strong {
    margin: 2px 0 3px !important;
    font-size: 12.75px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-module .module-hero-strip p,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-command-hero p {
    font-size: 10.25px !important;
    line-height: 1.26 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] #reach-create-default,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-audit-controls .primary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-proof-strip button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-actions button {
    min-height: 30px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(19, 37, 47, 0.18) !important;
    border-radius: 7px !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.30), rgba(223, 255, 63, 0.34)),
      #f7fbfd !important;
    box-shadow: none !important;
    font-size: 8.75px !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-audit-controls,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console {
    gap: 6px !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-url-bar,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console {
    border: 1px solid rgba(19, 37, 47, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-url-bar input,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-audit-controls select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console input,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-console textarea {
    min-height: 30px !important;
    padding: 5px 7px !important;
    border: 1px solid rgba(19, 37, 47, 0.16) !important;
    border-radius: 7px !important;
    background: #fffdf8 !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-proof-strip article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-workbench-grid .geo-summary-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-panel,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-empty,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-pipeline-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-work-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-review-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-source-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-adaptation-grid article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-panel .module-rule-item {
    border: 1px solid rgba(19, 37, 47, 0.14) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(103, 213, 232, 0.14) 0 3px, transparent 3px),
      #fffdf8 !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-proof-strip strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-summary-card {
    min-height: 0 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"] #geo-output,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-engine-page .module-list-stack .module-work-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"] .geo-engine-page .module-rule-stack .module-rule-item,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-message-item {
    border: 1px solid rgba(19, 37, 47, 0.12) !important;
    border-radius: 8px !important;
    background: #f7fbfd !important;
    color: #13252f !important;
    box-shadow: none !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-review-card h3,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-work-grid .section-title h3 {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-agent-dock {
    height: auto !important;
    padding: 8px !important;
    border: 2px solid rgba(19, 37, 47, 0.20) !important;
    background:
      linear-gradient(90deg, #67d5e8 0 28%, #dfff3f 28% 56%, #8b5cf6 56% 72%, transparent 72%) top / 100% 4px no-repeat,
      #fffdf8 !important;
    box-shadow: 0 14px 32px rgba(19, 37, 47, 0.14) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-agent-mode button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-agent-options button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-agent-send {
    min-height: 28px !important;
    border: 1px solid rgba(19, 37, 47, 0.18) !important;
    background: #fffdf8 !important;
    box-shadow: none !important;
    font-size: 8.75px !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"] .reach-agent-dock textarea {
    min-height: 62px !important;
    padding: 8px !important;
    border: 1px solid rgba(19, 37, 47, 0.18) !important;
    background: #fffaf0 !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"][data-view-section="reach"] .reach-module > .panel-header h2,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"][data-view-section="geo"] .geo-engine-page > .panel-header h2 {
    font-size: 14.5px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-create-default,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .primary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console button {
    align-self: center !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-module,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-engine-page {
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.16), transparent 38%),
      #d8e4e6 !important;
    color: #0b2028 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-module > .panel-header,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-engine-page > .panel-header,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-module .module-hero-strip,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-command-hero {
    border-color: rgba(11, 32, 40, 0.23) !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.18), transparent 44%),
      #e7eeed !important;
    color: #0b2028 !important;
    box-shadow: 0 7px 16px rgba(11, 32, 40, 0.10) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-module .module-hero-strip p,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-command-hero p,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-url-bar label,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console label {
    color: #334d56 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-module-status,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] #geo-module-status {
    border-color: rgba(11, 32, 40, 0.22) !important;
    background: #d7e8bd !important;
    color: #0b2028 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-url-bar,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console {
    border-color: rgba(11, 32, 40, 0.23) !important;
    background: rgba(231, 238, 237, 0.84) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-url-bar input,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-audit-controls select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console input,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console textarea,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-dock textarea {
    border-color: rgba(11, 32, 40, 0.24) !important;
    background: #f0f3ee !important;
    color: #0b2028 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-proof-strip article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-workbench-grid .geo-summary-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-panel,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-empty,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-pipeline-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-work-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-review-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-source-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-adaptation-grid article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-panel .module-rule-item {
    border-color: rgba(11, 32, 40, 0.23) !important;
    background:
      linear-gradient(180deg, rgba(103, 213, 232, 0.22) 0 3px, transparent 3px),
      #e7eeed !important;
    color: #0b2028 !important;
    box-shadow: 0 5px 12px rgba(11, 32, 40, 0.07) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid article:nth-child(2),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid article:nth-child(2),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-proof-strip article:nth-child(2) {
    background:
      linear-gradient(180deg, rgba(223, 255, 63, 0.24) 0 3px, transparent 3px),
      #e5edd6 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid article:nth-child(3),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid article:nth-child(3),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-proof-strip article:nth-child(3) {
    background:
      linear-gradient(180deg, rgba(139, 92, 246, 0.20) 0 3px, transparent 3px),
      #e6e2ee !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-kpi-grid article:nth-child(4),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-kpi-grid article:nth-child(4),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-proof-strip article:nth-child(4) {
    background:
      linear-gradient(180deg, rgba(255, 180, 84, 0.22) 0 3px, transparent 3px),
      #ebe2d6 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] #geo-output,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-engine-page .module-list-stack .module-work-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-engine-page .module-rule-stack .module-rule-item,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-item {
    border-color: rgba(11, 32, 40, 0.18) !important;
    background: #dfe9eb !important;
    color: #0b2028 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] #reach-create-default,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-message-console button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-audit-controls .primary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-proof-strip button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-fix-draft-actions button {
    border-color: rgba(11, 32, 40, 0.26) !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.22), rgba(223, 255, 63, 0.20)),
      #d9e6e8 !important;
    color: #0b2028 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-dock {
    border-color: rgba(11, 32, 40, 0.26) !important;
    background:
      linear-gradient(90deg, #67d5e8 0 28%, #dfff3f 28% 56%, #8b5cf6 56% 72%, transparent 72%) top / 100% 4px no-repeat,
      #e1e9e8 !important;
    box-shadow: 0 14px 32px rgba(11, 32, 40, 0.18) !important;
  }
}

/* Mobile Reach + GEO consistency: keep both pages in the same module UI kit. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page {
    --module-ink: #08090d;
    --module-muted: rgba(8, 9, 13, 0.68);
    --module-soft-muted: rgba(8, 9, 13, 0.56);
    --module-panel: #f3ebdf;
    --module-card: #fff7ed;
    --module-field: #fffaf0;
    --module-cyan: #67d5e8;
    --module-lime: #dfff3f;
    --module-purple: #b9a7ff;
    --module-orange: #ffb84d;
    gap: 8px !important;
    padding: 9px !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.16), transparent 38%),
      linear-gradient(315deg, rgba(255, 184, 77, 0.12), transparent 48%),
      var(--module-panel) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module > .panel-header,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page > .panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 40px !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(223, 255, 63, 0.36) 0 6px, transparent 6px),
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(239, 251, 255, 0.76)),
      var(--module-card) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module > .panel-header > div,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page > .panel-header > div {
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module > .panel-header h2,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page > .panel-header h2 {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--module-ink) !important;
    font-size: 13.5px !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-module-status,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] #geo-module-status,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .badge,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .badge {
    flex: 0 0 auto !important;
    min-height: 21px !important;
    padding: 4px 6px !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 7px !important;
    background: var(--module-lime) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .module-hero-strip,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-command-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.36) 0 6px, transparent 6px),
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 247, 237, 0.88)),
      var(--module-card) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-command-hero::before {
    height: 0 !important;
    background: transparent !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .module-hero-strip strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-command-hero strong {
    margin: 1px 0 3px !important;
    color: var(--module-ink) !important;
    font-size: 12.25px !important;
    line-height: 1.14 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .module-hero-strip p,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-command-hero p,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-url-bar label,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console label {
    color: var(--module-muted) !important;
    font-size: 9.75px !important;
    line-height: 1.24 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-url-bar,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console {
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 250, 240, 0.88)),
      var(--module-field) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-url-bar input,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console input,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console textarea {
    min-height: 30px !important;
    padding: 5px 7px !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 7px !important;
    background: var(--module-field) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-create-default,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .primary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-actions button {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 5px 8px !important;
    border: 2px solid var(--module-ink) !important;
    border-radius: 7px !important;
    background: var(--module-lime) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
    font-size: 8.75px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console button {
    background: var(--module-cyan) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-workbench-grid .geo-summary-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-panel,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-empty,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-pipeline-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-work-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-review-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-source-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-adaptation-grid article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-panel .module-rule-item {
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.34) 0 5px, transparent 5px),
      rgba(255, 250, 240, 0.94) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid article:nth-child(2),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid article:nth-child(2),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip article:nth-child(2) {
    background:
      linear-gradient(90deg, rgba(223, 255, 63, 0.48) 0 5px, transparent 5px),
      rgba(255, 250, 240, 0.94) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid article:nth-child(3),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid article:nth-child(3),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip article:nth-child(3) {
    background:
      linear-gradient(90deg, rgba(185, 167, 255, 0.42) 0 5px, transparent 5px),
      rgba(255, 250, 240, 0.94) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid article:nth-child(4),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid article:nth-child(4),
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip article:nth-child(4) {
    background:
      linear-gradient(90deg, rgba(255, 184, 77, 0.44) 0 5px, transparent 5px),
      rgba(255, 250, 240, 0.94) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid strong,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip strong {
    color: var(--module-ink) !important;
    font-size: 13.25px !important;
    line-height: 1.08 !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid small,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid .eyebrow,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid small,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid .eyebrow,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip span,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip small {
    color: var(--module-soft-muted) !important;
    font-size: 8.75px !important;
    line-height: 1.16 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] #geo-output,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .module-list-stack .module-work-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .module-rule-stack .module-rule-item,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-card pre {
    border: 2px solid var(--module-ink) !important;
    border-radius: 8px !important;
    background: var(--module-field) !important;
    color: var(--module-ink) !important;
    box-shadow: 2px 2px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-dock {
    border: 3px solid var(--module-ink) !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      var(--module-card) !important;
    box-shadow: 3px 3px 0 var(--module-ink), 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page {
    --module-ink: #08090d;
    --module-muted: rgba(8, 9, 13, 0.68);
    --module-soft-muted: rgba(8, 9, 13, 0.56);
    --module-panel: #fff7ed;
    --module-card: #fff7ed;
    --module-field: #fffaf0;
    border-color: var(--module-ink) !important;
    background: linear-gradient(135deg, #fff7ed, #f7dfc5) !important;
    color: var(--module-ink) !important;
    box-shadow: 4px 4px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module > .panel-header,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page > .panel-header,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .module-hero-strip,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-command-hero,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-url-bar,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls label,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-kpi-grid article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip article,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-workbench-grid .geo-summary-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-panel,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-card,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-empty,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-pipeline-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-work-grid > article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-review-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-source-card,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-adaptation-grid article,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-panel .module-rule-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] #geo-output,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .module-list-stack .module-work-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .module-rule-stack .module-rule-item,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-item,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-card pre {
    border-color: var(--module-ink) !important;
    background: linear-gradient(135deg, #fff7ed, #f7dfc5) !important;
    color: var(--module-ink) !important;
    box-shadow: 3px 3px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-module-status,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] #geo-module-status,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-module .badge,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-engine-page .badge,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] #reach-create-default,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .primary-action {
    border-color: var(--module-ink) !important;
    background: #d5ff00 !important;
    color: var(--module-ink) !important;
    box-shadow: 3px 3px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls .secondary-action,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-proof-strip button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-fix-draft-actions button {
    border-color: var(--module-ink) !important;
    background: #f7dfc5 !important;
    color: var(--module-ink) !important;
    box-shadow: 3px 3px 0 var(--module-ink) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-url-bar input,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-audit-controls select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console input,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console select,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-message-console textarea {
    border-color: var(--module-ink) !important;
    background: #fffaf0 !important;
    color: var(--module-ink) !important;
    box-shadow: 3px 3px 0 var(--module-ink) !important;
  }
}

@media (max-width: 820px) {
  .geo-agent-dock {
    display: none;
  }

  body.app-mode[data-active-view="geo"] > .app-shell > main,
  body.app-mode[data-active-view="reach"] > .app-shell > main {
    padding-bottom: 206px !important;
  }

  body.app-mode[data-active-view="geo"] [data-view-section="geo"],
  body.app-mode[data-active-view="reach"] [data-view-section="reach"] {
    padding-bottom: 188px !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-dock,
  body.app-mode[data-active-view="reach"] .reach-agent-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 96 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "modes modes"
      "options options"
      "input send" !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      #fff7ed !important;
    color: #08090d !important;
    box-shadow: 3px 3px 0 #08090d, 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"] .reach-agent-mode,
  body.app-mode[data-active-view="reach"] .reach-agent-options {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="reach"] .reach-agent-mode {
    grid-area: modes !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"] .reach-agent-options {
    grid-area: options !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-mode button,
  body.app-mode[data-active-view="geo"] .geo-agent-options button,
  body.app-mode[data-active-view="reach"] .reach-agent-mode button,
  body.app-mode[data-active-view="reach"] .reach-agent-options button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    background: rgba(255, 247, 237, 0.92) !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-options span,
  body.app-mode[data-active-view="reach"] .reach-agent-options span {
    flex: 0 0 auto !important;
    color: #3859ef !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-mode button.active,
  body.app-mode[data-active-view="geo"] .geo-agent-send,
  body.app-mode[data-active-view="geo"] .geo-agent-options button:hover,
  body.app-mode[data-active-view="reach"] .reach-agent-mode button.active,
  body.app-mode[data-active-view="reach"] .reach-agent-send,
  body.app-mode[data-active-view="reach"] .reach-agent-options button:hover {
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.42), rgba(223, 255, 63, 0.58)),
      #dfff3f !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-dock textarea,
  body.app-mode[data-active-view="reach"] .reach-agent-dock textarea {
    grid-area: input !important;
    width: 100% !important;
    min-height: 68px !important;
    max-height: 88px !important;
    resize: vertical !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    padding: 10px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.16), transparent 42%),
      #f8eedb !important;
    color: #08090d !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="geo"] .geo-agent-send,
  body.app-mode[data-active-view="reach"] .reach-agent-send {
    grid-area: send !important;
    display: inline-grid !important;
    place-items: center !important;
    min-width: 58px !important;
    min-height: 68px !important;
    padding: 7px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-dock,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 96 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "modes modes"
      "options options"
      "input send" !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      #fff7ed !important;
    color: #08090d !important;
    box-shadow: 3px 3px 0 #08090d, 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-mode,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-options {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-mode {
    grid-area: modes !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-options {
    grid-area: options !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-mode button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-options button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-mode button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-options button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    background: rgba(255, 247, 237, 0.92) !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-options span,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-options span {
    flex: 0 0 auto !important;
    color: #3859ef !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-mode button.active,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-send,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-options button:hover,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-mode button.active,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-send,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-options button:hover {
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.42), rgba(223, 255, 63, 0.58)),
      #dfff3f !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-dock textarea,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-dock textarea {
    grid-area: input !important;
    width: 100% !important;
    min-height: 68px !important;
    max-height: 88px !important;
    resize: vertical !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    padding: 10px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.16), transparent 42%),
      #f8eedb !important;
    color: #08090d !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] [data-view-section="geo"] .geo-agent-send,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] [data-view-section="reach"] .reach-agent-send {
    grid-area: send !important;
    display: inline-grid !important;
    place-items: center !important;
    min-width: 58px !important;
    min-height: 68px !important;
    padding: 7px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-dock,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 96 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "modes modes"
      "options options"
      "input send" !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 3px solid #08090d !important;
    border-radius: 9px !important;
    background:
      linear-gradient(90deg, #8b5cf6 0 24%, #67d5e8 24% 50%, #dfff3f 50% 76%, #3859ef 76% 100%) top / 100% 7px no-repeat,
      linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(103, 213, 232, 0.13) 46%, rgba(223, 255, 63, 0.13)),
      #fff7ed !important;
    color: #08090d !important;
    box-shadow: 3px 3px 0 #08090d, 0 18px 48px rgba(139, 92, 246, 0.16) !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-mode,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-options {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-mode,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-mode {
    grid-area: modes !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-options,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-options {
    grid-area: options !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-mode button,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-options button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-mode button,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-options button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    background: rgba(255, 247, 237, 0.92) !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-options span,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-options span {
    flex: 0 0 auto !important;
    color: #3859ef !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-mode button.active,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-send,
  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-options button:hover,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-mode button.active,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-send,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-options button:hover {
    background:
      linear-gradient(135deg, rgba(103, 213, 232, 0.42), rgba(223, 255, 63, 0.58)),
      #dfff3f !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-dock textarea,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-dock textarea {
    grid-area: input !important;
    width: 100% !important;
    min-height: 68px !important;
    max-height: 88px !important;
    resize: vertical !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    padding: 10px !important;
    background:
      linear-gradient(90deg, rgba(103, 213, 232, 0.16), transparent 42%),
      #f8eedb !important;
    color: #08090d !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.app-mode[data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"][data-active-view="geo"] .geo-agent-send,
  body.app-mode[data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"][data-active-view="reach"] .reach-agent-send {
    grid-area: send !important;
    display: inline-grid !important;
    place-items: center !important;
    min-width: 58px !important;
    min-height: 68px !important;
    padding: 7px !important;
    border: 2px solid #08090d !important;
    border-radius: 7px !important;
    color: #08090d !important;
    box-shadow: 2px 2px 0 #08090d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }
}

/* Final Creative Studio mobile Presenter tab override. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "presenter" !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) #media-library.creative-gallery {
    display: grid !important;
    grid-area: gallery !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "presenter" !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console.chat-studio.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "gallery"
      "presenter" !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console #media-library.creative-gallery,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) #media-library.creative-gallery {
    display: grid !important;
    grid-area: gallery !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .creative-agent-console.chat-studio.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "presenter" !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .creative-agent-console #media-library.creative-gallery,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .creative-agent-console .ploxy-chat-panel,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter-setup"][data-creative-board-filter="presenter-setup"]:not(.creative-focus-mode) .creative-agent-console .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "presenter" !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not([data-creative-board-filter="presenter-setup"]):not([data-creative-board-filter="cinematic"]):not(.creative-focus-mode) .creative-agent-console .presenter-studio-lab {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "gallery" !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"][data-creative-board-filter="presenter"][data-creative-board-filter="presenter"]:not(.creative-focus-mode) .creative-agent-console.chat-studio.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "gallery" !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not([data-creative-board-filter="presenter-setup"]):not([data-creative-board-filter="presenter-setup"]):not(.creative-focus-mode) .creative-agent-console .presenter-studio-lab {
    display: none !important;
  }
}

/* Final mobile Creative card action visibility. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.photo,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.video,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.text {
    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(30px, auto) !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions button {
    min-height: 30px !important;
    height: auto !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions .fit-review-action,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card .creative-card-actions button.fit-review-action {
    grid-column: 1 / -1 !important;
    min-height: 32px !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card.photo,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card.video,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card.text {
    grid-template-rows: 190px minmax(72px, auto) minmax(34px, auto) minmax(30px, auto) minmax(116px, auto) !important;
    height: auto !important;
    min-height: 560px !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card.ai-influencer-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card.ai-influencer-card.video {
    grid-template-rows: 176px 68px 34px minmax(116px, auto) !important;
    min-height: 480px !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card .creative-card-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(30px, auto) !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    padding: 0 2px 2px !important;
    overflow: visible !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card .creative-card-actions button {
    min-height: 30px !important;
    height: auto !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card .creative-card-actions .fit-review-action,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .smart-creative-card.smart-creative-card .creative-card-actions button.fit-review-action {
    grid-column: 1 / -1 !important;
    min-height: 32px !important;
    height: auto !important;
    margin-top: 0 !important;
  }
}
/* Final mobile Creative Studio rails: each asset family gets its own swipe row. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) .creative-agent-console.chat-studio.chat-studio #media-library.creative-gallery {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    padding: 0 4px 190px !important;
    overflow: visible !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-section {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 0 2px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-head span {
    color: #08090d !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-head small {
    color: rgba(8, 9, 13, 0.68) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(292px, calc(100vw - 90px)) !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.photo,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.video,
  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.text {
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-section.is-presenter .smart-creative-card.ai-influencer-card {
    grid-template-rows: 176px 68px 34px minmax(108px, auto) !important;
    height: 456px !important;
    min-height: 456px !important;
    max-height: 456px !important;
  }
}

/* Mobile Automation: keep top actions readable instead of squeezing labels. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header,
  body.app-mode[data-active-view="automation"][data-active-view="automation"][data-active-view="automation"] [data-view-section="automation"] .panel.full-panel > .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="automation"] [data-view-section="automation"] .panel-header .header-actions,
  body.app-mode[data-active-view="automation"][data-active-view="automation"][data-active-view="automation"] [data-view-section="automation"] .panel.full-panel > .panel-header > .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="automation"] #automation-run-button,
  body.app-mode[data-active-view="automation"] #automation-new-button {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Mobile page clamp: keep shared module pages and header actions inside the phone viewport. */
@media (max-width: 820px) {
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-wrap: wrap !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header > :not(:first-child) {
    flex-shrink: 1 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header button,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header .primary-action,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .panel-header .secondary-action {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .community-command-hero,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .telegram-command-hero,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .module-hero-strip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .community-command-hero,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .telegram-command-hero,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .module-hero-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header > div,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .community-command-hero > div,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .telegram-command-hero > div,
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .module-hero-strip > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header :where(h1, h2, h3, strong, p),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .community-command-hero :where(strong, p),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .telegram-command-hero :where(strong, p),
  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel .module-hero-strip :where(strong, p) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header h1,
  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header h2,
  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header h3 {
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view][data-active-view] [data-view-section] .growth-module-panel > .panel-header .badge {
    width: fit-content !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .module-work-item.module-agent-output {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .module-work-item.module-agent-output .module-action-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view][data-active-view][data-active-view] [data-view-section] .module-work-item.module-agent-output .module-queue-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card small,
  body.app-mode[data-active-view="connections"] .connection-card input {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="connections"] .connection-card-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-details,
  body.app-mode[data-active-view="connections"] .connection-setup-form,
  body.app-mode[data-active-view="connections"] .linkedin-target-picker {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="connections"] .connection-setup-form,
  body.app-mode[data-active-view="connections"] .linkedin-target-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="reports"] .agent-proof-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="reports"] .agent-proof-item b {
    justify-self: start !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.app-mode[data-active-view="settings"] #settings-fallback-mode {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-mode[data-active-view="white-label"] .white-label-client-workspace-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-mode[data-active-view="white-label"] .white-label-client-workspace-form > label,
  body.app-mode[data-active-view="white-label"] .white-label-client-workspace-form select,
  body.app-mode[data-active-view="white-label"] .white-label-client-workspace-form input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="white-label"] .white-label-form-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.app-mode[data-active-view="white-label"] .white-label-form-actions button {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-engine > .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) .creative-engine > .panel-header > .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"][data-active-view="creative"][data-active-view="creative"] [data-view-section="creative"] .creative-engine > .panel-header > .header-actions {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-mode[data-active-view="creative"]:not(.creative-focus-mode) #creative-provider-status {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Mobile prompt results: keep page answers readable inside the shared popup. */
@media (max-width: 820px) {
  .dashboard-answer-dialog .dashboard-answer-modal,
  .dashboard-answer-dialog .dashboard-answer-modal > header,
  .dashboard-answer-dialog .dashboard-answer-question,
  .dashboard-answer-dialog .dashboard-answer-context,
  .dashboard-answer-dialog .dashboard-answer-body,
  .dashboard-answer-dialog .dashboard-answer-recommendations {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .dashboard-answer-dialog .dashboard-answer-question strong,
  .dashboard-answer-dialog .dashboard-answer-context :where(strong, b, span, small),
  .dashboard-answer-dialog .dashboard-answer-body :where(h3, h4, strong, b, span, small, p, li),
  .dashboard-answer-dialog .dashboard-answer-recommendations :where(strong, b, span, small, p, li) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .dashboard-answer-dialog .dashboard-answer-question {
    gap: 4px !important;
  }

  .dashboard-answer-dialog .dashboard-answer-question strong {
    display: block !important;
    line-height: 1.18 !important;
  }

  .dashboard-answer-dialog .dashboard-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 112px) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .dashboard-answer-dialog .dashboard-report-score {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 108px !important;
    min-width: 104px !important;
    max-width: 112px !important;
    min-height: 82px !important;
    padding: 8px 6px !important;
    justify-items: center !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  .dashboard-answer-dialog .dashboard-report-score strong,
  .dashboard-answer-dialog .dashboard-answer-body .dashboard-report-score strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    text-overflow: clip !important;
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
  }

  .dashboard-answer-dialog .dashboard-report-score small,
  .dashboard-answer-dialog .dashboard-answer-body .dashboard-report-score small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    text-overflow: ellipsis !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }
}

/* Mobile Queue: keep the top publishing mode buttons readable. */
@media (max-width: 820px) {
  body.app-mode[data-active-view="queue"][data-active-view="queue"][data-active-view="queue"] [data-view-section="queue"] .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  body.app-mode[data-active-view="queue"][data-active-view="queue"][data-active-view="queue"] [data-view-section="queue"] .panel-header > :not(:first-child),
  body.app-mode[data-active-view="queue"][data-active-view="queue"][data-active-view="queue"] [data-view-section="queue"] .mode-control.inline {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  body.app-mode[data-active-view="queue"][data-active-view="queue"][data-active-view="queue"] [data-view-section="queue"] .mode-control.inline {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.app-mode[data-active-view="queue"][data-active-view="queue"][data-active-view="queue"] [data-view-section="queue"] .mode-control .mode {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}

/* Mobile public landing, footer, and footer detail pages: one readable column. */
@media (max-width: 820px) {
  body.landing-mode,
  body:not(.app-mode) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f4dfc4 !important;
  }

  body.landing-mode *,
  body:not(.app-mode) * {
    box-sizing: border-box !important;
  }

  .landing-page,
  .landing-page > .landing-detail-page:target,
  .landing-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .image-landing-frame,
  .hero-frame,
  .modules-frame,
  .agent-day-frame,
  .hive-map-frame,
  .proxy-agent-frame,
  .ploxy-ai-agency-frame,
  .ploxy-intelligence-frame {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    contain: paint !important;
  }

  .image-landing-frame::before,
  .image-landing-frame::after,
  .hero-frame::before,
  .hero-frame::after,
  .modules-frame::before,
  .modules-frame::after,
  .agent-day-frame::before,
  .agent-day-frame::after,
  .hive-map-frame::before,
  .hive-map-frame::after,
  .proxy-agent-frame::before,
  .proxy-agent-frame::after {
    max-width: calc(100% - 36px) !important;
    overflow-wrap: anywhere !important;
  }

  .landing-auth-cta {
    max-width: calc(100% - 32px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .landing-footer {
    display: grid !important;
    gap: 12px !important;
    padding: 24px 12px 32px !important;
    border-top-width: 4px !important;
  }

  .landing-footer::before {
    inset: 8px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 #08090d !important;
    transform: none !important;
  }

  .landing-footer-intro,
  .landing-footer-signals,
  .landing-footer-links,
  .landing-footer-bottom,
  .landing-detail-rich,
  .landing-detail-main,
  .landing-detail-side,
  .landing-contact-page,
  .landing-contact-routing,
  .landing-contact-flow,
  .landing-contact-assurance,
  .landing-contact-form .form-grid,
  .landing-affiliate-rich,
  .landing-affiliate-main,
  .landing-pricing-grid,
  .landing-pricing-notes {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .landing-footer-intro,
  .landing-footer-signals article,
  .landing-footer-links > div,
  .landing-footer-bottom,
  .landing-detail-main article,
  .landing-detail-side,
  .landing-contact-panel,
  .landing-contact-assurance article,
  .landing-contact-routing article,
  .landing-affiliate-apply,
  .landing-affiliate-main article,
  .landing-plan-card,
  .landing-pricing-notes article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #08090d !important;
  }

  .landing-footer-intro {
    padding: 16px !important;
  }

  .landing-footer-intro::before,
  .landing-footer-intro::after,
  .landing-footer-signals article::after,
  .landing-footer-links > div::after {
    display: none !important;
  }

  .landing-footer-intro h2,
  .landing-detail-page h2,
  .landing-contact-page h2,
  .landing-pricing-page .landing-pricing-header h2,
  .landing-pricing-page:target .landing-pricing-header h2 {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    color: inherit;
    font-size: clamp(30px, 10.5vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .landing-pricing-page .landing-pricing-header h2,
  .landing-pricing-page:target .landing-pricing-header h2 {
    color: #fff8ea !important;
  }

  .landing-footer-intro h2 {
    font-size: clamp(24px, 7.6vw, 32px) !important;
    line-height: 1.06 !important;
  }

  .landing-footer-intro p,
  .landing-detail-page p,
  .landing-detail-page > p,
  .landing-contact-copy > p,
  .landing-pricing-page .landing-pricing-header p,
  .landing-pricing-page:target .landing-pricing-header p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.38 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .landing-footer-signals strong,
  .landing-footer-links strong,
  .landing-detail-main strong,
  .landing-detail-side strong,
  .landing-affiliate-main strong,
  .landing-plan-card h3,
  .landing-pricing-notes strong {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    line-height: 1.12 !important;
  }

  .landing-footer-signals small,
  .landing-footer-links a,
  .landing-detail-main span,
  .landing-detail-side li,
  .landing-affiliate-main span,
  .landing-pricing-notes span,
  .landing-plan-card p,
  .landing-plan-card li,
  .landing-contact-routing span,
  .landing-contact-assurance span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  .landing-footer-links a,
  .landing-footer-links button,
  .landing-detail-side a,
  .landing-footer-pricing-cta,
  .landing-detail-back,
  .landing-contact-submit,
  .landing-plan-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .landing-footer-links a {
    justify-content: flex-start !important;
    border: 1px solid rgba(8, 9, 13, 0.22) !important;
    border-radius: 7px !important;
    background: rgba(255, 250, 240, 0.42) !important;
  }

  .landing-footer-links a.landing-footer-pricing-link {
    width: 100% !important;
    border-width: 2px !important;
  }

  .landing-footer-bottom {
    align-items: start !important;
    justify-content: start !important;
    padding: 12px !important;
    font-size: 9px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
  }

  .landing-footer-bottom span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .landing-page > .landing-detail-page:target {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-height: 100svh !important;
    padding: 18px 12px 30px !important;
  }

  .landing-detail-page:target::after {
    display: grid !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .landing-detail-back {
    justify-self: start !important;
    width: auto !important;
    min-height: 34px !important;
  }

  .landing-kicker,
  .landing-plan-badge {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .landing-detail-side ul,
  .landing-plan-card ul {
    min-width: 0 !important;
    padding-left: 16px !important;
  }

  .landing-contact-page:target,
  .landing-detail-page.landing-contact-page:target {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  .landing-contact-points {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .landing-contact-flow {
    gap: 8px !important;
  }

  .landing-contact-flow span,
  .landing-contact-points span {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .landing-contact-form,
  .landing-affiliate-form {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .landing-contact-form label {
    min-width: 0 !important;
  }

  .landing-contact-form input,
  .landing-contact-form select,
  .landing-contact-form textarea,
  .landing-login-form input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .landing-contact-consent {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .landing-contact-consent input {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
  }

  .landing-plan-card {
    grid-template-rows: none !important;
    gap: 9px !important;
    padding: 16px !important;
  }

  .landing-plan-card.recommended {
    transform: none !important;
  }

  .landing-plan-card.recommended::after {
    position: static !important;
    justify-self: start !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    white-space: normal !important;
  }

  .landing-plan-card > strong {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: clamp(32px, 12vw, 48px) !important;
    line-height: 0.95 !important;
  }

  .landing-pricing-page:target,
  .landing-detail-page.landing-pricing-page:target {
    padding: 18px 12px 30px !important;
  }

  .landing-pricing-page:target .landing-pricing-header {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
}

/* Winning mobile Creative card normalization. Keep all rail cards equal and actions bottom-aligned. */
@media (max-width: 820px) {
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail {
    align-items: stretch !important;
    grid-auto-rows: 504px !important;
    overflow-y: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.photo,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.video,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.text,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.ai-influencer-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-section.is-presenter .smart-creative-card.smart-creative-card.ai-influencer-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 176px minmax(0, 106px) 32px 22px 104px !important;
    align-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: 504px !important;
    min-height: 504px !important;
    max-height: 504px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .media-preview {
    grid-row: 1 !important;
    width: 100% !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > div:not(.media-preview):not(.media-meta):not(.creative-card-actions) {
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card h3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    min-height: 30px !important;
    margin: 0 0 5px !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .media-meta {
    grid-row: 3 !important;
    min-height: 0 !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > footer {
    grid-row: 4 !important;
    min-height: 0 !important;
    max-height: 22px !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .creative-card-actions {
    grid-row: 5 !important;
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 30px !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .creative-card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .creative-card-actions .fit-review-action,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .creative-card-actions button.fit-review-action {
    grid-column: 1 / -1 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin-top: 0 !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card > .creative-approval-drawer[hidden] {
    display: none !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail {
    grid-auto-rows: auto !important;
  }

  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.photo,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.video,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.text,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail .smart-creative-card.smart-creative-card.ai-influencer-card,
  body.app-mode.app-mode[data-active-view="creative"][data-active-view="creative"]:not(.creative-focus-mode) #media-library .creative-mobile-rail-section.is-presenter .smart-creative-card.smart-creative-card.ai-influencer-card {
    grid-template-rows: 176px minmax(0, 98px) 30px 20px 104px !important;
    height: 492px !important;
    min-height: 492px !important;
    max-height: 492px !important;
  }
}

/* Mobile answer popups: keep the result as one readable sheet, not nested scroll frames. */
@media (max-width: 820px) {
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    max-height: calc(100svh - 14px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog .dashboard-answer-modal,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog.is-report .dashboard-answer-modal,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog.is-research-answer .dashboard-answer-modal,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog.is-brain-answer .dashboard-answer-modal {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }

  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog :where(
    .dashboard-answer-modal > header,
    .dashboard-answer-question,
    .dashboard-answer-context,
    .dashboard-answer-body,
    .dashboard-answer-recommendations,
    .dashboard-performance-report,
    .dashboard-report-hero,
    .dashboard-report-summary,
    .dashboard-report-rows,
    .dashboard-report-narrative,
    .dashboard-report-section,
    .dashboard-report-insight,
    .dashboard-report-action-plan,
    .dashboard-report-action-plan ol,
    .agent-reply,
    .ploxy-research-brief,
    .ploxy-research-summary,
    .dashboard-brain-panel
  ) {
    max-height: none !important;
    overflow: visible !important;
  }

  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog .dashboard-answer-context article,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog .dashboard-report-metric,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog .dashboard-report-insight,
  body.app-mode .dashboard-answer-dialog.dashboard-answer-dialog .dashboard-agentic-action-card {
    overflow: visible !important;
  }
}

/* Creative detail modal: show full media in the popup instead of clipping tall previews. */
body.app-mode .media-detail-hero img,
body.app-mode .media-detail-hero video,
body.app-mode .media-detail-hero object {
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(700px, calc(100dvh - 250px)) !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1040px) {
  body.app-mode .media-detail-hero img,
  body.app-mode .media-detail-hero video,
  body.app-mode .media-detail-hero object {
    max-height: 64dvh !important;
  }
}

@media (max-width: 820px) {
  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .creative-agent-console.chat-studio {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "project"
      "tabs"
      "presenter" !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) #media-library.creative-gallery,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .ploxy-chat-panel,
  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .manual-studio-panel {
    display: none !important;
  }

  body.app-mode[data-active-view="creative"][data-creative-board-filter="cinematic"]:not(.creative-focus-mode) .presenter-studio-lab {
    display: grid !important;
    grid-area: presenter !important;
  }
}