/* Grouped creator navigation. Kept separate from the historical studio CSS so
   the desktop sidebar and mobile control surface stay predictable. */
.creator-mobile-nav,.creator-mobile-subnav { display:none; }
.creator-mobile-subnav[hidden] { display:none !important; }
.studio-nav-group-label { color:#718096; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.08em; margin:14px 10px 3px; }
.studio-nav-group-label:first-of-type { margin-top:8px; }
.creator-account-menu { justify-self:center; position:relative; }
.creator-account-trigger { border:0; cursor:pointer; font:inherit; }
.creator-account-dropdown { background:#fff; border:1px solid var(--border-light); border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.16); min-width:190px; overflow:hidden; position:absolute; right:0; top:calc(100% + 9px); z-index:950; }
.creator-account-dropdown a,.creator-account-dropdown button { align-items:center; background:#fff; border:0; color:var(--text-main); cursor:pointer; display:flex; font:600 13px var(--font-body); gap:10px; padding:12px 14px; text-align:left; text-decoration:none; width:100%; }
.creator-account-dropdown a:hover,.creator-account-dropdown button:hover { background:#f4f6fa; }
.creator-account-dropdown button { border-top:1px solid var(--border-light); color:#a21942; }

@media (max-width:620px) {
  body.creator-mobile-nav-present { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  body.creator-mobile-nav-present.creator-subnav-open { padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
  .creator-desktop-nav { display:none !important; }
  .creator-mobile-nav { background:#0e1a2a; border-radius:0; bottom:0; box-shadow:0 -10px 28px rgba(15,23,42,.22); display:grid; gap:2px; grid-template-columns:repeat(5,minmax(0,1fr)); left:0; padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)); position:fixed; right:0; z-index:850; }
  .creator-mobile-nav-item { align-items:center; border-radius:11px; color:#aebbd0; display:flex; flex-direction:column; font-size:9px; font-weight:600; gap:4px; justify-content:center; line-height:1.15; min-height:58px; padding:5px 2px; text-align:center; text-decoration:none; }
  .creator-mobile-nav-item i { font-size:16px; }
  .creator-mobile-nav-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
  .creator-mobile-nav-item.active { background:#283b57; color:#fff; }
  .creator-mobile-nav-item.active.ribbon-open { background:transparent; color:#9f7cff; }
  .creator-mobile-subnav { animation:creator-ribbon-pull-up .26s cubic-bezier(.22,.8,.28,1) both; background:linear-gradient(135deg,#6d3df2,#7c3aed); border:2px solid rgba(255,255,255,.34); border-bottom:0; border-radius:18px 18px 0 0; bottom:calc(72px + env(safe-area-inset-bottom)); box-shadow:0 -10px 25px rgba(83,47,190,.29); display:block; left:0; padding:8px 12px; position:fixed; right:0; transform-origin:bottom center; z-index:840; }
  .creator-mobile-subnav-panel { display:none; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .creator-mobile-subnav-panel[data-creator-mobile-panel="affiliate"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creator-mobile-subnav-panel.active { display:grid; }
  .creator-mobile-subnav-panel a { align-items:center; border-radius:10px; color:rgba(255,255,255,.85); display:flex; font-size:10px; font-weight:700; gap:5px; justify-content:center; line-height:1.2; min-height:38px; padding:6px 4px; text-align:center; text-decoration:none; white-space:normal; }
  .creator-mobile-subnav-panel a.active { background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.33); color:#fff; }
  .creator-mobile-subnav-panel a i { font-size:12px; }
  .creator-account-menu { justify-self:end; }
  .creator-account-trigger.studio-account { align-items:center; background:#f1f1ef; display:inline-flex; min-height:38px; padding:5px 8px; }
  .creator-account-trigger .studio-account-avatar { height:25px; width:25px; }
  .creator-account-trigger > span:not(.studio-account-avatar),.creator-account-trigger > i { display:none; }
  .creator-account-dropdown { position:fixed; right:12px; top:58px; }
  .studio-shell,.design-studio-shell,.welcome-shell,.invoice-history-shell,.invoice-settings-shell,.customers-shell,.creator-support-shell { padding-bottom:0; }
}

@keyframes creator-ribbon-pull-up {
  from { opacity:0; transform:translateY(100%); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  .creator-mobile-subnav { animation:none; }
}

/* Business uses the same mobile control-surface pattern as the creator area:
   a fixed rectangular primary bar and a contextual ribbon that pulls upward. */
.business-mobile-nav,.business-mobile-subnav { display:none; }
.business-mobile-subnav[hidden] { display:none !important; }

@media (max-width:900px) {
  .business-sidebar { display:none !important; }
  .business-main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  body.business-mobile-ribbon-open .business-main { padding-bottom:calc(148px + env(safe-area-inset-bottom)); }
  .business-topbar { align-items:center; flex-direction:row; gap:10px; padding:12px 14px; position:sticky; top:0; z-index:30; }
  .business-topbar p { font-size:8px; margin-bottom:2px; }
  .business-topbar h1 { font-size:16px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .business-topbar-actions { gap:7px; width:auto; }
  .business-topbar-actions .btn { font-size:0; flex:0 0 auto; min-height:38px; padding:9px 11px; }
  .business-topbar-actions .btn i { font-size:15px; margin:0; }
  .business-main { padding-left:12px; padding-right:12px; padding-top:18px; }
  .business-page-intro,.business-section-heading { gap:12px; margin-bottom:16px; }
  .business-page-intro h2 { font-size:25px; }
  .business-section-heading h2 { font-size:21px; }
  .business-page-intro p:last-child,.business-section-heading p:last-child { font-size:12px; }
  .business-overview-grid { gap:10px; }
  .business-overview-grid .card,.business-form-card,.business-support-card,.business-analytics-card { padding:18px; }
  .business-filter-bar,.business-date-toolbar { align-items:stretch; display:grid; grid-template-columns:1fr 1fr; }
  .business-filter-bar > :last-child,.business-date-toolbar > :last-child { grid-column:1 / -1; }
  .business-filter-bar .form-input,.business-date-toolbar .form-input { width:100%; }
  .business-mobile-nav { background:#0e1a2a; bottom:0; box-shadow:0 -10px 28px rgba(15,23,42,.22); display:grid; gap:2px; grid-template-columns:repeat(5,minmax(0,1fr)); left:0; padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)); position:fixed; right:0; z-index:850; }
  .business-mobile-nav button { align-items:center; background:transparent; border:0; border-radius:11px; color:#aebbd0; cursor:pointer; display:flex; flex-direction:column; font:600 9px var(--font-body); gap:4px; justify-content:center; line-height:1.15; min-height:58px; min-width:0; padding:5px 2px; text-align:center; }
  .business-mobile-nav button i { font-size:16px; }
  .business-mobile-nav button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
  .business-mobile-nav button.active { background:#283b57; color:#fff; }
  .business-mobile-nav button.active.ribbon-open { background:transparent; color:#b69aff; }
  .business-mobile-subnav { animation:business-ribbon-pull-up .26s cubic-bezier(.22,.8,.28,1) both; background:linear-gradient(135deg,#6d3df2,#7c3aed); border:2px solid rgba(255,255,255,.34); border-bottom:0; border-radius:18px 18px 0 0; bottom:calc(72px + env(safe-area-inset-bottom)); box-shadow:0 -10px 25px rgba(83,47,190,.29); display:block; left:0; padding:8px 12px; position:fixed; right:0; transform-origin:bottom center; z-index:840; }
  .business-mobile-subnav-panel { display:none; gap:6px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .business-mobile-subnav-panel.active { display:grid; }
  .business-mobile-subnav button { align-items:center; background:transparent; border:0; border-radius:10px; color:rgba(255,255,255,.85); cursor:pointer; display:flex; font:700 10px var(--font-body); gap:5px; justify-content:center; line-height:1.2; min-height:38px; padding:6px 4px; text-align:center; }
  .business-mobile-subnav button.active { background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.33); color:#fff; }
  .business-mobile-subnav button i { font-size:12px; }
}

@keyframes business-ribbon-pull-up {
  from { opacity:0; transform:translateY(100%); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  .business-mobile-subnav { animation:none; }
}