/**
 * CPNBuilder dashboard — mobile layout foundation
 * Single-column, full-width, no crushed flex children (Stripe / Notion bar).
 */

html.cpn-dashboard-root {
  scroll-behavior: smooth;
}

html.cpn-dashboard-root body {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FOUNDATION (≤768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent width:100% + border/padding from exceeding viewport (content-box overflow) */
  html.cpn-dashboard-root,
  html.cpn-dashboard-root *,
  html.cpn-dashboard-root *::before,
  html.cpn-dashboard-root *::after {
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root,
  html.cpn-dashboard-root body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.cpn-dashboard-root .dashboard-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root .main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0 !important;
    padding-bottom: calc(var(--dash-bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  html.cpn-dashboard-root #output {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-grow: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    padding-bottom: calc(var(--dash-bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  html.cpn-dashboard-root #output > .section-wrapper,
  html.cpn-dashboard-root #output > #profile-status-panel,
  html.cpn-dashboard-root #output > .dash-segment,
  html.cpn-dashboard-root #output > [id^="profile"],
  html.cpn-dashboard-root #output > [data-module] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.cpn-dashboard-root #profile-status-panel .cpn-home-promo-title {
    font-size: clamp(1rem, 4.2vw, 1.25rem) !important;
    line-height: 1.35 !important;
  }

  html.cpn-dashboard-root #profile-status-panel .cpn-home-promo-sub {
    font-size: clamp(0.9rem, 3.6vw, 1.05rem) !important;
    line-height: 1.4 !important;
  }

  /* Tool open: single scroll surface (window), no inner trap */
  html.cpn-dashboard-root body.cpn-in-tool-view .main,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) .main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root body.cpn-in-tool-view #output,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) #output {
    display: block !important;
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(var(--dash-bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }

  html.cpn-dashboard-root body.cpn-in-tool-view #output .section-wrapper,
  html.cpn-dashboard-root body.cpn-in-tool-view #output .cpn-dark-tool-shell,
  html.cpn-dashboard-root body.cpn-in-tool-view #output .pra-dark-shell,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) #output .section-wrapper,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) #output .cpn-dark-tool-shell,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) #output .pra-dark-shell {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  html.cpn-dashboard-root #toolPanel[data-active-tool],
  html.cpn-dashboard-root #toolPanel.tool-panel--active {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
  }

  html.cpn-dashboard-root #toolPanel .section-wrapper,
  html.cpn-dashboard-root #toolPanel .cpn-dark-tool-shell,
  html.cpn-dashboard-root #toolPanel .pra-dark-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 14px 14px 20px !important;
  }

  html.cpn-dashboard-root #toolPanel .app-description {
    margin-bottom: 16px !important;
    padding: 16px !important;
  }

  html.cpn-dashboard-root #toolsHubShell[hidden],
  html.cpn-dashboard-root #toolsHubShell.is-hub-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  html.cpn-dashboard-root .cpn-collapsible-body {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root .cpn-details-toggle {
    display: none !important;
  }

  /* ── Readable text (avoid letter-stacking); preserve table layout ─ */
  html.cpn-dashboard-root #output,
  html.cpn-dashboard-root #toolPanel {
    box-sizing: border-box;
  }

  html.cpn-dashboard-root #output :where(
    p, li, h1, h2, h3, h4, span, a, label, dt, dd, small, strong, em
  ) {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal !important;
    line-height: 1.35;
  }

  /* Header compliance (outside #output) — must wrap, not clip mid-sentence */
  html.cpn-dashboard-root .cpn-dash-compliance,
  html.cpn-dashboard-root #btcNetworkGlobalBanner {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal !important;
    hyphens: auto;
  }

  html.cpn-dashboard-root .main {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root .cpn-dash-header-zone {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px);
  }

  html.cpn-dashboard-root .cpn-home-motivation-title,
  html.cpn-dashboard-root .cpn-home-motivation h3 {
    font-size: clamp(1.15rem, 5vw, 1.65rem) !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    padding: 0 2px;
    overflow-wrap: break-word;
  }

  html.cpn-dashboard-root #profile-status-panel {
    padding: 14px 12px !important;
    border-width: 2px !important;
  }

  html.cpn-dashboard-root .cpn-home-revenue-idea > div {
    padding: 14px 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word;
  }

  html.cpn-dashboard-root .cpn-home-ecosystem .cpn-stack-card__text,
  html.cpn-dashboard-root .cpn-stack-card__text {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Tables: never squash cells — horizontal scroll on wrappers */
  html.cpn-dashboard-root #output table,
  html.cpn-dashboard-root #toolPanel table {
    display: table !important;
    width: max-content;
    min-width: 100%;
    max-width: none !important;
    table-layout: auto;
    border-collapse: collapse;
  }

  html.cpn-dashboard-root #output thead,
  html.cpn-dashboard-root #toolPanel thead {
    display: table-header-group !important;
  }

  html.cpn-dashboard-root #output tbody,
  html.cpn-dashboard-root #toolPanel tbody {
    display: table-row-group !important;
  }

  html.cpn-dashboard-root #output tr,
  html.cpn-dashboard-root #toolPanel tr {
    display: table-row !important;
  }

  html.cpn-dashboard-root #output th,
  html.cpn-dashboard-root #output td,
  html.cpn-dashboard-root #toolPanel th,
  html.cpn-dashboard-root #toolPanel td {
    display: table-cell !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    max-width: none !important;
    min-width: 3.25rem;
    vertical-align: top;
  }

  html.cpn-dashboard-root #output [style*="overflow-x:auto"],
  html.cpn-dashboard-root #output [style*="overflow-x: auto"],
  html.cpn-dashboard-root #output .admin-panel-traffic-table-wrap,
  html.cpn-dashboard-root #output .admin-panel-discount-table-wrap,
  html.cpn-dashboard-root #output .admin-panel-conversion-coupons-table-wrap,
  html.cpn-dashboard-root #toolPanel [style*="overflow-x:auto"],
  html.cpn-dashboard-root #toolPanel [style*="overflow-x: auto"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack only explicit plan/profile two-column blocks (not hub/home/tool grids) */
  html.cpn-dashboard-root #profileRoot > div.cpn-mobile-stack-2,
  html.cpn-dashboard-root #output .cpn-mobile-stack-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html.cpn-dashboard-root #output .affiliate-row.link-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  html.cpn-dashboard-root #output .affiliate-row .ref-link {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  html.cpn-dashboard-root #output .cpn-break-long {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  html.cpn-dashboard-root #output #ghostLabel {
    font-size: clamp(0.95rem, 4.5vw, 1.35rem) !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    max-width: calc(100% - 24px);
    text-align: center;
  }

  /* Hub/home/tools grids: keep display:grid — each module CSS handles breakpoints */

  html.cpn-dashboard-root #output .dash-segment,
  html.cpn-dashboard-root #output .section-wrapper,
  html.cpn-dashboard-root #output .dash-segment__card,
  html.cpn-dashboard-root #output .cpn-stack-card,
  html.cpn-dashboard-root #output .cpn-guides-edu-card,
  html.cpn-dashboard-root #output #profile-status-panel,
  html.cpn-dashboard-root #output #toolsHubShell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.cpn-dashboard-root #output .dash-segment {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* Tools hub credit row: stack on narrow screens (tool views use their own bar CSS) */
  html.cpn-dashboard-root #toolsHubShell > .engine-card-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  html.cpn-dashboard-root #toolsHubShell > .engine-card-row > .engine-card {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Header zone: hamburger row + stacked meta ────────────────── */
  html.cpn-dashboard-root .cpn-dash-header-zone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    background: #111827;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  html.cpn-dashboard-root .cpn-dash-header-zone__menu-row {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html.cpn-dashboard-root .cpn-dash-header,
  html.cpn-dashboard-root .header-bar.cpn-dash-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 12px 10px !important;
    margin: 0 !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
  }

  html.cpn-dashboard-root .cpn-dash-header__meta,
  html.cpn-dashboard-root .header-bar .cpn-dash-header__meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  html.cpn-dashboard-root .status-slot {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html.cpn-dashboard-root .breadcrumb {
    width: 100% !important;
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
  }

  html.cpn-dashboard-root #accountStatusBar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  html.cpn-dashboard-root #accountStatusBar > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  html.cpn-dashboard-root #accountStatusBar span[style*="color:#4b5563"],
  html.cpn-dashboard-root #accountStatusBar span[style*="color: #4b5563"] {
    color: #94a3b8 !important;
  }

  html.cpn-dashboard-root #accountStatusBar #accountPlanLabel,
  html.cpn-dashboard-root #accountStatusBar span[style*="color:#111827"] {
    color: #f1f5f9 !important;
  }

  /* ── Guides education card (was crushed row flex) ───────────────── */
  .cpn-guides-edu-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 8px 0 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.75));
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  }

  .cpn-guides-edu-card__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .cpn-guides-edu-card__title {
    font-weight: 700;
    color: #f8fafc;
    font-size: 15px;
    line-height: 1.35;
  }

  .cpn-guides-edu-card__text {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.35;
  }

  .cpn-guides-edu-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: normal !important;
    text-align: center;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    flex: none;
    box-sizing: border-box;
  }

  .cpn-guides-edu-card__cta--disabled {
    background: #475569;
    color: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.85;
  }

  /* ── Stack cards (ecosystem, promos) ────────────────────────────── */
  .cpn-stack-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #38bdf8;
    border-radius: 14px;
    background: #0b1120;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15);
  }

  .cpn-stack-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.35;
  }

  .cpn-stack-card__text {
    margin: 0;
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.35;
  }

  .cpn-stack-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .cpn-stack-card__note {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.35;
  }

  .cpn-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: normal !important;
    text-align: center;
  }

  /* ── Cards & typography (hub cards only — not open tool credit rows) ── */
  html.cpn-dashboard-root #output .dash-segment__card,
  html.cpn-dashboard-root #output #profile-status-panel,
  html.cpn-dashboard-root #output .cpn-stack-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }

  html.cpn-dashboard-root #output h1 { font-size: clamp(22px, 6vw, 28px); }
  html.cpn-dashboard-root #output h2 { font-size: 18px; }
  html.cpn-dashboard-root #output h3 { font-size: 16px; }

  html.cpn-dashboard-root #output .tool-button,
  html.cpn-dashboard-root #output .dash-segment__btn,
  html.cpn-dashboard-root #output .btn.full,
  html.cpn-dashboard-root #output form button[type="submit"]:not(.copy-btn) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  html.cpn-dashboard-root #output .add-now-btn,
  html.cpn-dashboard-root #output #toolStatusSummaryBar .add-now-btn,
  html.cpn-dashboard-root #output .engine-card-row .add-now-btn,
  html.cpn-dashboard-root #output .cpn-tools-hub-gate-cta,
  html.cpn-dashboard-root #output #toolsBackHomeBtn,
  html.cpn-dashboard-root #output .starter-back-btn,
  html.cpn-dashboard-root #output .cpn-dash-header button,
  html.cpn-dashboard-root #output #adminPanelRoot .admin-panel-btn {
    width: auto !important;
    max-width: 100% !important;
    min-height: unset !important;
  }

  html.cpn-dashboard-root #output #adminPanelRoot .admin-panel-reengage-send-btn,
  html.cpn-dashboard-root #output #adminPanelSendReengagementCampaignBtn {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }

  html.cpn-dashboard-root #output #toolsBackHomeBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    float: none !important;
    margin: 0 0 12px auto !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html.cpn-dashboard-root #output #toolsHubShell {
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root #output #toolsHubShell .header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    clear: both;
  }

  html.cpn-dashboard-root #output #toolsHubShell .header-row h2 {
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  html.cpn-dashboard-root #output #tools-footer {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root #output #profile-status-panel > div:first-child {
    font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important;
    line-height: 1.35 !important;
  }

  html.cpn-dashboard-root #output #profile-status-panel > p {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
    line-height: 1.4 !important;
  }

  html.cpn-dashboard-root #output #profile-status-panel button {
    font-size: 0.875rem !important;
    padding: 12px 14px !important;
    margin-left: 0 !important;
  }

  html.cpn-dashboard-root #output .affiliate-panel button,
  html.cpn-dashboard-root #output #aff-copy-btn,
  html.cpn-dashboard-root #output .copy-btn {
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
  }

  html.cpn-dashboard-root #output #profileRoot [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html.cpn-dashboard-root #output #profileRoot .manage-plan-btn {
    width: 100% !important;
    text-align: center;
    white-space: normal !important;
  }

  html.cpn-dashboard-root #profile-status-panel > div[style*="text-align:center"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html.cpn-dashboard-root #profile-status-panel button {
    width: 100% !important;
    margin: 0 !important;
  }

  html.cpn-dashboard-root .section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root #toolPanel.section-wrapper,
  html.cpn-dashboard-root #toolPanel .section-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }

  html.cpn-dashboard-root .section-wrapper > * + * {
    margin-top: 12px !important;
  }

  html.cpn-dashboard-root .cpn-home-welcome {
    width: 100% !important;
    display: block !important;
    margin-top: 0 !important;
  }

  /* Mobile drawer: assets/mobile-nav.css (do not override transform here) */

  html.cpn-dashboard-root .footer {
    padding: 8px 12px 16px !important;
    height: auto !important;
  }

  /* Nav z-index: mobile-nav.css */
  html.cpn-dashboard-root #guidesComingSoonPopup { z-index: 10001 !important; }

  html.cpn-dashboard-root #output .cpn-dash-loading {
    margin: 0 !important;
    padding: 8px 0 !important;
    text-align: left !important;
  }
}

/* Desktop: guides card can sit in a row */
@media (min-width: 769px) {
  .cpn-guides-edu-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.75));
    color: #e2e8f0;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  }

  .cpn-guides-edu-card__cta {
    width: auto;
    flex: none;
    white-space: nowrap;
  }

  .cpn-stack-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .cpn-dash-header-zone__menu-row {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DOCK CTA — in document flow (never overlays cards)
   ═══════════════════════════════════════════════════════════════════ */
.cpn-mobile-sticky {
  display: none;
}

@media (max-width: 768px) {
  /* Default hidden; JS enables .cpn-mobile-dock--active */
  .cpn-mobile-sticky.cpn-mobile-dock {
    display: none;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    box-sizing: border-box;
  }

  .cpn-mobile-sticky.cpn-mobile-dock.cpn-mobile-dock--active {
    display: flex !important;
    flex-direction: column;
  }

  /* Optional: fixed mini-bar ONLY while scrolling (not over first screen) */
  .cpn-mobile-sticky.cpn-mobile-dock--fixed {
    position: fixed !important;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    z-index: 500 !important;
    pointer-events: auto !important;
  }

  .cpn-mobile-sticky.cpn-mobile-dock--fixed.is-scroll-hidden,
  .cpn-mobile-sticky.cpn-mobile-dock--fixed.is-suppressed {
    transform: translateY(calc(100% + 20px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .cpn-mobile-sticky__btn,
  .cpn-mobile-dock__btn {
    width: 100%;
    max-width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 56px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
    white-space: normal !important;
    line-height: 1.25;
    text-align: center;
  }
}

@media (max-width: 480px) {
  html.cpn-dashboard-root #output {
    padding: 10px !important;
  }

  .cpn-dash-header-zone__menu-row {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}