/* Arowet shared mobile containment layer. Loaded last so page-specific desktop
   styling remains intact while phone geometry has one authoritative source. */
:root {
  --arowet-mobile-gutter: clamp(12px, 3.5vw, 18px);
  --arowet-mobile-nav-height: 68px;
  --arowet-mobile-nav-gap: 8px;
}

html,
body {
  min-width: 0;
  max-width: 100%;
}

body,
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
main,
section,
article,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row,
[class*="col-"] {
  min-width: 0;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

pre,
code,
.text-break,
[class*="url"],
[class*="email"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.arowet-toast-stack {
  position: fixed;
  z-index: 2200;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  width: min(390px, calc(100% - 32px));
  gap: 10px;
  pointer-events: none;
}

.arowet-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #dfe5ee;
  border-left: 4px solid #3158df;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  box-shadow: 0 16px 40px rgba(23, 32, 51, .18);
  font-size: .9rem;
  line-height: 1.45;
  pointer-events: auto;
  animation: arowet-toast-in .2s ease-out;
}

.arowet-toast.is-success { border-left-color: #168653; }
.arowet-toast.is-error { border-left-color: #d92d20; }
.arowet-toast.is-warning { border-left-color: #d97706; }
.arowet-toast.is-info { border-left-color: #3158df; }
.arowet-toast > i { margin-top: 2px; font-size: 1.15rem; }
.arowet-toast.is-success > i { color: #168653; }
.arowet-toast.is-error > i { color: #d92d20; }
.arowet-toast.is-warning > i { color: #d97706; }
.arowet-toast.is-info > i { color: #3158df; }
.arowet-toast__message { min-width: 0; overflow-wrap: anywhere; }
.arowet-toast__close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #667085; font-size: 1.1rem; cursor: pointer; }
.arowet-toast.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .16s ease, transform .16s ease; }

.arowet-confirm-layer {
  position: fixed;
  z-index: 2300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(4px);
}

.arowet-confirm {
  width: min(100%, 430px);
  max-height: calc(var(--viewport-height, 100dvh) - 32px);
  padding: 22px;
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}

.arowet-confirm h2 { margin: 0 0 8px; color: #172033; font-size: 1.2rem; }
.arowet-confirm p { margin: 0; color: #667085; line-height: 1.55; overflow-wrap: anywhere; }
.arowet-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@keyframes arowet-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 767.98px), (max-width: 900px) and (orientation: landscape) {
  :root { --arowet-mobile-nav-height: 62px; }

  html,
  body {
    width: 100%;
    overflow-x: clip !important;
  }

  /* Never use 100vw for nested app shells: the viewport unit includes the
     scrollbar and ignores a parent's padding. */
  html.dashboard-shell,
  body.dashboard-shell,
  body.dashboard-shell .layout-wrapper,
  body.dashboard-shell .layout-container,
  body.dashboard-shell .layout-page,
  body.dashboard-shell .content-wrapper,
  .device-screen {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.dashboard-shell .layout-wrapper,
  body.dashboard-shell .layout-container,
  body.dashboard-shell .layout-page {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  body.dashboard-shell .content-wrapper {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Shared compact dashboard rhythm. These rules intentionally sit in the
     final stylesheet so every dashboard page uses the same phone geometry. */
  body.dashboard-shell #layout-navbar {
    box-sizing: border-box !important;
    width: calc(100% - (var(--arowet-mobile-gutter) * 2)) !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 6px var(--arowet-mobile-gutter) 0 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
  }

  body.dashboard-shell #layout-navbar .layout-menu-toggle {
    width: 34px !important;
    flex: 0 0 34px !important;
    margin-right: 4px !important;
  }

  body.dashboard-shell #layout-navbar [data-dashboard-menu-toggle] {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.dashboard-shell #layout-navbar #navbar-collapse { min-width: 0 !important; gap: 4px !important; }
  body.dashboard-shell #layout-navbar #navbar-collapse > .navbar-nav:first-child { min-width: 0 !important; flex: 1 1 auto !important; }
  body.dashboard-shell #layout-navbar .dashboard-header-search { min-width: 0 !important; height: 36px !important; gap: 6px !important; }
  body.dashboard-shell #layout-navbar .dashboard-header-search > i { flex: 0 0 auto; font-size: 1.05rem !important; }
  body.dashboard-shell #layout-navbar .dashboard-header-search-input {
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 1.65rem 0 0 !important;
    font-size: 14px !important;
    text-overflow: ellipsis;
  }
  body.dashboard-shell #layout-navbar .dropdown-user > .nav-link { padding: 2px !important; }
  body.dashboard-shell #layout-navbar .dropdown-user .avatar,
  body.dashboard-shell #layout-navbar .dropdown-user img { width: 32px !important; height: 32px !important; }

  body.dashboard-shell :where(.card,.modal-content) { border-radius: 12px !important; }
  body.dashboard-shell :where(.card-header,.card-body,.card-footer,.modal-header,.modal-body,.modal-footer) { padding: 12px !important; }
  body.dashboard-shell .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  body.dashboard-shell :where(h1,.h1) { font-size: 1.35rem !important; line-height: 1.25 !important; }
  body.dashboard-shell :where(h2,.h2) { font-size: 1.15rem !important; line-height: 1.3 !important; }
  body.dashboard-shell :where(h3,.h3,h4,.h4,h5,.h5) { font-size: 1rem !important; line-height: 1.3 !important; }
  body.dashboard-shell :where(.form-label,label:not(.btn):not(.form-check-label)) { margin-bottom: 4px; font-size: .76rem; }

  body.dashboard-shell :where(.btn,.arowet-btn) {
    max-width: 100%;
    min-height: 38px !important;
    padding: .48rem .7rem !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  body.dashboard-shell :where(.btn-sm,.btn-group-sm > .btn) { min-height: 34px !important; padding: .38rem .58rem !important; font-size: .74rem !important; }
  body.dashboard-shell :where(.btn-icon,.btn-close) { width: 36px; min-width: 36px; padding-inline: 0 !important; }
  body.dashboard-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,.form-control,.form-select) { min-height: 42px; }
  body.dashboard-shell textarea.form-control { min-height: 78px; }
  body.dashboard-shell :where(.form-text,.text-muted.small,small.text-muted) { font-size: .7rem !important; line-height: 1.35; }

  body.dashboard-shell :where(.dashboard-page-hero-card,.dashboard-workspace-hero,.page-header,.card-header) p.text-muted,
  body.dashboard-shell :where(.dashboard-page-hero-card,.dashboard-workspace-hero,.page-header,.card-header) small.text-muted {
    display: none !important;
  }

  body.dashboard-shell .modal-footer { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 8px !important; }
  body.dashboard-shell .modal-footer > :where(.btn,button) { width: 100%; margin: 0 !important; }

  /* Feature pages share the same outer gutter and full-width containment. */
  body.dashboard-shell .content-wrapper > :where(.fun-pages-dashboard,.settings-workspace) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-right: var(--arowet-mobile-gutter) !important;
    padding-left: var(--arowet-mobile-gutter) !important;
  }

  body.dashboard-shell :where(.fun-pages-dashboard,.settings-workspace) :where(.card,section,form,fieldset,.row,[class*="col-"],.input-group) {
    min-width: 0;
    max-width: 100%;
  }

  body.dashboard-shell .fun-pages-dashboard > :where(.fun-pages-hero,.card,.fun-stats-grid),
  body.dashboard-shell .settings-workspace :where(.settings-page-card,.settings-main-row) {
    box-sizing: border-box;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Fun Pages: balanced gutters, compact cards, and full-width form controls. */
  body.dashboard-shell .fun-pages-hero {
    gap: 10px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  body.dashboard-shell .fun-pages-hero h1 { margin: 3px 0 0 !important; font-size: 1.35rem !important; }
  body.dashboard-shell .fun-pages-hero p { display: none !important; }
  body.dashboard-shell .fun-pages-hero .btn { width: 100% !important; }
  body.dashboard-shell .fun-pages-kicker { font-size: .64rem !important; letter-spacing: .11em !important; }
  body.dashboard-shell .fun-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }
  body.dashboard-shell .fun-stats-grid > [class*="col-"] { width: 100% !important; padding: 0 !important; }
  body.dashboard-shell .fun-stat { min-height: 72px; padding: 11px 12px !important; border-radius: 12px !important; }
  body.dashboard-shell .fun-stat span { font-size: .72rem !important; }
  body.dashboard-shell .fun-stat strong { margin-top: 2px !important; font-size: 1.2rem !important; }
  body.dashboard-shell .fun-pages-dashboard > .card .fun-section-header { gap: 8px !important; padding: 12px !important; }
  body.dashboard-shell .fun-pages-dashboard > .card .fun-section-header h2 { margin-top: 3px !important; font-size: 1rem !important; }
  body.dashboard-shell #fun-page-builder > .card-body { padding: 12px !important; }
  body.dashboard-shell #fun-page-builder :where(form,.row,[class*="col-"],input,select,textarea,.form-control,.form-select,.input-group) { width: 100% !important; }
  body.dashboard-shell #fun-page-builder .row { margin-right: 0 !important; margin-left: 0 !important; }
  body.dashboard-shell #fun-page-builder .row > [class*="col-"] { padding-right: 0 !important; padding-left: 0 !important; }
  body.dashboard-shell #fun-page-builder .row { gap: 10px !important; }
  body.dashboard-shell #fun-page-builder.card .fun-upgrade-note { gap: 8px !important; padding: 10px !important; margin-bottom: 12px !important; }
  body.dashboard-shell #fun-page-builder.card .fun-upgrade-note span { display: none !important; }
  body.dashboard-shell .fun-premium-settings { margin-top: 12px !important; }
  body.dashboard-shell .fun-premium-settings summary { padding: 11px 12px !important; font-size: .78rem !important; }
  body.dashboard-shell .fun-premium-settings fieldset { padding: 0 12px 12px !important; }
  body.dashboard-shell #fun-page-builder.card > .card-body .fun-preview-wrap { padding: 12px !important; }
  body.dashboard-shell #fun-page-builder.card > .card-body .fun-preview { min-height: 280px !important; padding: 24px 14px !important; border-radius: 14px !important; }
  body.dashboard-shell #fun-page-builder.card > .card-body .fun-preview h3 { margin: 14px 0 8px !important; font-size: 1.2rem !important; }
  body.dashboard-shell .fun-page-row { width: 100% !important; gap: 12px !important; padding: 14px 12px !important; }
  body.dashboard-shell .fun-page-row__main { min-width: 0; }
  body.dashboard-shell .fun-page-row__main a { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.dashboard-shell .fun-page-row .fun-page-metrics { width: 100%; justify-content: space-between; gap: 8px !important; }
  body.dashboard-shell .fun-page-row .fun-page-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 6px !important; }
  body.dashboard-shell .fun-page-row .fun-page-actions > :where(a,form),
  body.dashboard-shell .fun-page-row .fun-page-actions > form > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  body.dashboard-shell .fun-share-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px !important; }
  body.dashboard-shell .fun-share-row > :where(button,a) { width: 100% !important; }
  body.dashboard-shell .fun-page-row .fun-email-form { display: grid !important; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; width: 100% !important; margin: 0 !important; gap: 7px !important; }
  body.dashboard-shell .fun-page-row .fun-email-form input { width: 100% !important; min-width: 0 !important; }
  body.dashboard-shell .fun-pages-dashboard .arowet-mobile-sticky-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.dashboard-shell .fun-pages-dashboard .arowet-mobile-sticky-actions > :where(.btn,a,button) { width: 100% !important; }

  /* Settings: dense single-column subscription information on phones. */
  body.dashboard-shell .settings-workspace { padding-bottom: calc(var(--arowet-mobile-nav-height) + 32px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dashboard-shell .settings-page-card .card-header,
  body.dashboard-shell .settings-page-card .card-body { padding: 12px !important; }
  body.dashboard-shell .subscription-access-card__header .form-switch { width: 40px; flex: 0 0 40px !important; padding-left: 0 !important; }
  body.dashboard-shell .subscription-access-card__header .form-switch .form-check-input {
    float: none !important;
    width: 38px !important;
    height: 20px !important;
    margin: 0 !important;
  }
  body.dashboard-shell .settings-subscription-stats { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin: 0 0 10px !important; }
  body.dashboard-shell .settings-subscription-stats > [class*="col-"] { width: 100% !important; padding: 0 !important; }
  body.dashboard-shell .settings-subscription-stat {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  body.dashboard-shell .settings-subscription-stat > :first-child { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; font-size: .7rem !important; }
  body.dashboard-shell .settings-subscription-stat > .fs-4 { grid-column: 2; grid-row: 1; font-size: 1.05rem !important; line-height: 1.2 !important; text-align: right; white-space: nowrap; }
  body.dashboard-shell .settings-subscription-stat > small { grid-column: 2; grid-row: 2; text-align: right; white-space: nowrap; }
  body.dashboard-shell .settings-subscription-totals {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
  }
  body.dashboard-shell .settings-subscription-totals > div { display: flex !important; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
  body.dashboard-shell .settings-subscription-totals > div + div { border-top: 1px solid #edf0f5; }
  body.dashboard-shell .settings-subscription-totals :where(strong,span) { margin: 0 !important; overflow: visible !important; font-size: .74rem !important; text-overflow: clip !important; white-space: nowrap !important; }
  body.dashboard-shell .settings-subscription-card__manage { gap: 8px !important; padding: 10px !important; }
  body.dashboard-shell .settings-subscription-card__manage-copy p { display: none !important; }
  body.dashboard-shell #customDomain { width: 1% !important; min-width: 0 !important; flex: 1 1 auto !important; }
  body.dashboard-shell #customDomain + .btn { width: auto !important; min-width: 62px !important; flex: 0 0 auto !important; padding-inline: 9px !important; }
  body.dashboard-shell #customDomain::placeholder { font-size: .76rem; }

  body.dashboard-shell:not(.superadmin-shell) .content-wrapper {
    padding-bottom: calc(var(--arowet-mobile-nav-height) + var(--arowet-mobile-nav-gap) + 22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.dashboard-shell .content-wrapper > :where(.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl,.dashboard-workspace-page) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: var(--arowet-mobile-gutter) !important;
  }

  body.dashboard-shell .content-wrapper > :where(.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl,.dashboard-workspace-page) > .row {
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
  }

  body.dashboard-shell .content-wrapper > :where(.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl,.dashboard-workspace-page) > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-inline: 0 !important;
  }

  body.dashboard-shell :where(.card,.card-header,.card-body,.card-footer,.modal-content,.modal-body,form,fieldset,.input-group,.btn-group,.dropdown,.dropdown-menu) {
    min-width: 0;
    max-width: 100%;
  }

  body.dashboard-shell :where(.input-group,.input-group[style],.form-control[style],.form-select[style]) {
    width: 100% !important;
  }

  body.dashboard-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,.form-control,.form-select) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  body.dashboard-shell :where(.d-flex,.btn-group,.card-header,.card-footer,.modal-footer) {
    min-width: 0;
  }

  body.dashboard-shell .dropdown-menu {
    width: max-content;
    max-width: calc(100vw - 24px) !important;
    overflow-wrap: anywhere;
  }

  body.dashboard-shell .modal-dialog,
  body.superadmin-shell .modal-dialog {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }

  body.dashboard-shell .modal-content,
  body.superadmin-shell .modal-content {
    max-height: calc(var(--viewport-height, 100dvh) - 16px) !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav {
    position: fixed !important;
    z-index: 1035 !important;
    top: auto !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--arowet-mobile-nav-gap) + env(safe-area-inset-bottom, 0px)) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    min-height: var(--arowet-mobile-nav-height) !important;
    height: var(--arowet-mobile-nav-height) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid #dbe3f0 !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 12px 36px rgba(31,41,55,.2) !important;
    transition: opacity .15s ease, transform .15s ease;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a,
  body.dashboard-shell .dashboard-mobile-bottom-nav > .dashboard-mobile-more {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 4px 2px !important;
  }

  body.dashboard-shell .dashboard-mobile-more {
    position: relative;
    display: block;
    border-radius: 10px;
    color: #64748b;
  }

  body.dashboard-shell .dashboard-mobile-more > summary {
    display: flex;
    width: 100%;
    min-height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .62rem;
    font-weight: 700;
    list-style: none;
    text-align: center;
    user-select: none;
  }

  body.dashboard-shell .dashboard-mobile-more > summary::-webkit-details-marker { display: none; }
  body.dashboard-shell .dashboard-mobile-more > summary i { font-size: 1.05rem; line-height: 1; }
  body.dashboard-shell .dashboard-mobile-more.is-active > summary,
  body.dashboard-shell .dashboard-mobile-more[open] > summary { background: #e9edff; color: #3158df; }

  body.dashboard-shell .dashboard-mobile-more__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    display: grid;
    width: min(280px, calc(100vw - 16px));
    padding: 8px;
    overflow: hidden;
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15,23,42,.22);
  }

  body.dashboard-shell .dashboard-mobile-more__menu a,
  body.dashboard-shell .dashboard-mobile-more__menu button {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #172033;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
  }

  body.dashboard-shell .dashboard-mobile-more__menu a:active,
  body.dashboard-shell .dashboard-mobile-more__menu a:focus-visible,
  body.dashboard-shell .dashboard-mobile-more__menu button:active,
  body.dashboard-shell .dashboard-mobile-more__menu button:focus-visible { background: #eef2ff; color: #3158df; outline: 0; }
  body.dashboard-shell .dashboard-mobile-more__menu form { margin: 0; }

  .arowet-mobile-sticky-actions {
    position: sticky;
    z-index: 1025;
    bottom: calc(var(--arowet-mobile-nav-height) + var(--arowet-mobile-nav-gap) + env(safe-area-inset-bottom, 0px) + 10px);
    padding: 8px;
    border: 1px solid #dbe3f0;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(15,23,42,.14);
    backdrop-filter: blur(12px);
  }

  body.dashboard-shell .profile-studio__photo-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  body.dashboard-shell .profile-studio__profile-media-row > .profile-editor-controls > .profile-studio__photo-actions > :where(.btn,label) {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 5px !important;
    overflow: visible !important;
    font-size: .7rem !important;
    white-space: nowrap !important;
  }

  html[data-keyboard="open"] .arowet-mobile-sticky-actions {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.dashboard-shell.modal-open .dashboard-mobile-bottom-nav,
  html[data-keyboard="open"] body.dashboard-shell .dashboard-mobile-bottom-nav {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(calc(100% + 24px)) !important;
    pointer-events: none !important;
  }

  html[data-keyboard="open"] body.dashboard-shell:not(.superadmin-shell) .content-wrapper {
    padding-bottom: 16px !important;
  }

  .dashboard-phone-frame {
    width: 100%;
    min-height: 0 !important;
    overflow: hidden;
  }

  .dashboard-phone-device {
    width: min(100%, 18rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: .475 / 1 !important;
  }

  .dashboard-phone-glass,
  .dashboard-phone-screen,
  .dashboard-phone-profile-screen,
  .dashboard-phone-profile-viewport,
  .dashboard-phone-profile-frame {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-phone-screen,
  .dashboard-phone-profile-frame {
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .arowet-toast-stack {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    width: auto;
  }
}

@media (max-width: 991.98px) {
  .table-responsive.has-arowet-responsive-table {
    overflow: visible !important;
  }

  table.arowet-responsive-table,
  table.arowet-responsive-table > tbody {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }

  table.arowet-responsive-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.arowet-responsive-table > tbody > tr {
    display: grid;
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
    padding: 7px 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15,23,42,.05);
  }

  table.arowet-responsive-table > tbody > tr > td {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0 !important;
    border-width: 0 0 1px !important;
    border-color: #edf1f6 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  table.arowet-responsive-table > tbody > tr > td:last-child { border-bottom: 0 !important; }
  table.arowet-responsive-table > tbody > tr > td::before {
    content: attr(data-mobile-label);
    color: #667085;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
  }

  table.arowet-responsive-table > tbody > tr > td[colspan] {
    display: block;
    text-align: center !important;
  }

  table.arowet-responsive-table > tbody > tr > td[colspan]::before { display: none; }
  table.arowet-responsive-table > tbody > tr > td > :where(.d-flex,.btn-group,form,.dropdown) { min-width: 0; max-width: 100%; justify-content: flex-end; }

  .arowet-confirm { padding: 18px; }
  .arowet-confirm__actions { flex-direction: column-reverse; }
  .arowet-confirm__actions .btn { width: 100%; }
}

@media (max-width: 767.98px), (max-width: 900px) and (orientation: landscape) {
  /* Package choices are real cards, not a hidden horizontal strip. */
  body.dashboard-shell .business-card-package-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.dashboard-shell .business-card-package-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .blog-category-nav {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}

@media (max-width: 339.98px) {
  body.dashboard-shell .business-card-package-row { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 399.98px) {
  body.dashboard-shell .profile-studio__profile-media-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.dashboard-shell .profile-studio__profile-media-row > .profile-editor-avatar-frame {
    grid-column: 1 !important;
    justify-self: center;
  }
  body.dashboard-shell .profile-studio__profile-media-row > .profile-editor-controls {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
}

@media (max-width: 359.98px) {
  :root { --arowet-mobile-gutter: 10px; --arowet-mobile-nav-height: 64px; }
  body.dashboard-shell .dashboard-mobile-bottom-nav { right: 6px !important; left: 6px !important; padding: 4px !important; border-radius: 14px !important; }
  body.dashboard-shell .dashboard-mobile-bottom-nav > a,
  body.dashboard-shell .dashboard-mobile-more > summary { font-size: .56rem !important; }
  body.dashboard-shell .dashboard-mobile-bottom-nav > a i,
  body.dashboard-shell .dashboard-mobile-more > summary i { font-size: 1rem !important; }
  table.arowet-responsive-table > tbody > tr > td { grid-template-columns: minmax(72px, 32%) minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root { --arowet-mobile-nav-height: 58px; --arowet-mobile-nav-gap: 5px; }
  body.dashboard-shell .dashboard-mobile-bottom-nav { padding: 4px !important; }
  body.dashboard-shell .dashboard-mobile-bottom-nav > a,
  body.dashboard-shell .dashboard-mobile-more > summary { min-height: 40px !important; }
  body.dashboard-shell .dashboard-mobile-bottom-nav > a i,
  body.dashboard-shell .dashboard-mobile-more > summary i { font-size: .95rem !important; }
  body.dashboard-shell .dashboard-mobile-bottom-nav > a span,
  body.dashboard-shell .dashboard-mobile-more > summary span { font-size: .55rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .arowet-toast,
  .dashboard-mobile-bottom-nav { animation: none !important; transition: none !important; }
}

/* One typography scale for every dashboard phone layout. Kept in the final
   stylesheet so feature-level styles cannot create a different type system. */
@media (max-width: 767.98px), (max-width: 900px) and (orientation: landscape) {
  :root {
    --arowet-mobile-type-page-title: 22px;
    --arowet-mobile-type-section-title: 18px;
    --arowet-mobile-type-card-title: 16px;
    --arowet-mobile-type-body: 14px;
    --arowet-mobile-type-helper: 12.5px;
    --arowet-mobile-type-meta: 12px;
    --arowet-mobile-type-badge: 11.5px;
    --arowet-mobile-type-nav: 10.5px;
    --arowet-mobile-leading: 1.45;
  }

  body.dashboard-shell {
    font-size: var(--arowet-mobile-type-body) !important;
    line-height: var(--arowet-mobile-leading) !important;
  }

  body.dashboard-shell :where(p,li,dd,dt,td,.card-body,.alert,.dropdown-item) {
    font-size: var(--arowet-mobile-type-body);
    line-height: var(--arowet-mobile-leading);
  }

  body.dashboard-shell :where(h1,.h1,.page-title,.dashboard-page-title) {
    font-size: var(--arowet-mobile-type-page-title) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.dashboard-shell .content-wrapper h1 { font-size: var(--arowet-mobile-type-page-title) !important; }

  body.dashboard-shell :where(h2,.h2,.section-title,.profile-studio__section-title,.fun-section-header h2,.settings-page-card > .card-header h5) {
    font-size: var(--arowet-mobile-type-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.dashboard-shell :where(h3,.h3,h4,.h4,h5,.h5,h6,.h6,.card-title,.fun-page-row__main h3) {
    font-size: var(--arowet-mobile-type-card-title) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.dashboard-shell .content-wrapper .settings-page-card > .card-header h5 {
    font-size: var(--arowet-mobile-type-section-title) !important;
    font-weight: 600 !important;
  }

  body.dashboard-shell :where(.form-label,label:not(.btn):not(.form-check-label),legend) {
    font-size: var(--arowet-mobile-type-body) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  body.dashboard-shell .content-wrapper :where(.form-label,label:not(.btn):not(.form-check-label),legend) {
    font-size: var(--arowet-mobile-type-body) !important;
    font-weight: 600 !important;
  }

  body.dashboard-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,.form-control,.form-select,.input-group-text) {
    font-size: var(--arowet-mobile-type-body) !important;
    line-height: 1.4 !important;
  }

  body.dashboard-shell :where(.btn,.arowet-btn,button:not(.btn-close):not(.dashboard-global-search__clear)) {
    font-size: var(--arowet-mobile-type-body) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body.dashboard-shell .content-wrapper :where(.btn,.arowet-btn,button:not(.btn-close):not(.dashboard-global-search__clear)) {
    font-size: var(--arowet-mobile-type-body) !important;
    font-weight: 600 !important;
  }

  html body.dashboard-shell .content-wrapper .profile-studio .profile-studio__photo-actions > :where(.btn,label) {
    font-size: var(--arowet-mobile-type-body) !important;
    font-weight: 600 !important;
  }

  body.dashboard-shell :where(.form-text,.help-text,.helper-text,.settings-section-note,.text-muted.small,small:not(.badge):not(.fun-pages-kicker)) {
    font-size: var(--arowet-mobile-type-helper) !important;
    line-height: 1.45 !important;
  }

  body.dashboard-shell .content-wrapper :where(
    .business-cards-mobile-profile__copy small,
    .settings-mobile-profile__copy small,
    .settings-mobile-subscriber__copy small,
    .settings-mobile-subscriber__meta small,
    [class*="__description"],
    [class*="-description"],
    [class*="__helper"],
    [class*="-helper"]
  ) {
    font-size: var(--arowet-mobile-type-helper) !important;
    line-height: 1.45 !important;
  }

  body.dashboard-shell :where(.metadata,.meta,.status-text,time,th,.table th) {
    font-size: var(--arowet-mobile-type-meta) !important;
    line-height: 1.4 !important;
  }

  body.dashboard-shell .content-wrapper :where(
    .business-cards-mobile-metric span,
    .settings-mobile-metric span,
    .links-mobile-metric span,
    .qr-mobile-metric > span:last-child,
    .fun-page-metrics span,
    .settings-mobile-subscriber__meta strong,
    [class*="__metadata"],
    [class*="-metadata"]
  ) {
    font-size: var(--arowet-mobile-type-meta) !important;
    line-height: 1.4 !important;
  }

  body.dashboard-shell .content-wrapper :where(
    .business-cards-mobile-profile__copy strong,
    .settings-mobile-profile__copy strong,
    .business-cards-mobile-metric strong,
    .settings-mobile-metric strong,
    .links-mobile-metric strong,
    .qr-mobile-metric strong,
    .fun-page-metrics strong
  ) {
    font-size: var(--arowet-mobile-type-card-title) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  body.dashboard-shell .content-wrapper .profile-studio__design-option-value,
  body.dashboard-shell .content-wrapper .business-card-mobile-profile-photo-link,
  body.dashboard-shell .content-wrapper .settings-subscription-totals :where(strong,span) {
    font-size: var(--arowet-mobile-type-meta) !important;
    line-height: 1.4 !important;
  }

  body.dashboard-shell .content-wrapper .fun-stat span,
  body.dashboard-shell .content-wrapper .settings-subscription-stat > :first-child {
    font-size: var(--arowet-mobile-type-meta) !important;
    line-height: 1.35 !important;
  }

  body.dashboard-shell .content-wrapper .fun-stat strong,
  body.dashboard-shell .content-wrapper .settings-subscription-stat > .fs-4 {
    font-size: clamp(26px, 8vw, 30px) !important;
    line-height: 1.15 !important;
  }

  body.dashboard-shell :where(.badge,.fun-status,.fun-pages-kicker) {
    font-size: var(--arowet-mobile-type-badge) !important;
    line-height: 1.25 !important;
  }

  body.dashboard-shell .content-wrapper :where([class*="__eyebrow"],[class*="-eyebrow"],[class*="__kicker"],[class*="-kicker"]) {
    font-size: var(--arowet-mobile-type-badge) !important;
    line-height: 1.25 !important;
  }

  body.dashboard-shell .content-wrapper :where(.badge,.fun-status,.fun-pages-kicker) { font-size: var(--arowet-mobile-type-badge) !important; }

  body.dashboard-shell :where(.dashboard-stat-value,.analytics-stat-value,.stat-value,.metric-value,.display-1,.display-2,.display-3) {
    max-width: 100%;
    font-size: clamp(26px, 8vw, 30px) !important;
    line-height: 1.15 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a,
  body.dashboard-shell .dashboard-mobile-more > summary {
    font-size: var(--arowet-mobile-type-nav) !important;
    line-height: 1.15 !important;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a > span,
  body.dashboard-shell .dashboard-mobile-more > summary > span { font-size: var(--arowet-mobile-type-nav) !important; }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a i,
  body.dashboard-shell .dashboard-mobile-more > summary i {
    font-size: 19px !important;
    line-height: 1 !important;
  }
}