/* ══════════════════════════════════════════════════════
  MOBILE — phones (≤600px wide, or phone landscape)
  Loaded via media attribute in index.html. Desktop = styles.css, tablet = tablet.css.
══════════════════════════════════════════════════════ */
:root{
  --sidebar-w:0px;
  --tab-h:60px; --bar-h:56px;
  --sb:env(safe-area-inset-bottom,0px); --st:env(safe-area-inset-top,0px);
  --sl:env(safe-area-inset-left,0px);   --sr:env(safe-area-inset-right,0px);
}
.m-only{ display:flex; }
.d-only{ display:none !important; }

/* ══ SHELL: sidebar becomes a bottom tab bar ══ */
.shell .sidebar, .shell .sidebar.sm{
  position:fixed; left:0; right:0; bottom:0; top:auto; z-index:400;
  width:100%; min-width:0; height:calc(var(--tab-h) + var(--sb));
  flex-direction:row; padding:0 var(--sr) var(--sb) var(--sl);
  border-right:none; border-top:1px solid rgba(0,0,0,0.12);
  box-shadow:0 -6px 24px rgba(0,0,0,0.14); transition:none;
}
.sidebar .collapse-btn, .sidebar .sidebar-top, .sidebar .sidebar-divider, .sidebar .sidebar-bottom{ display:none; }
.pitchify-state .sidebar{ display:none; }
.shell .sidebar .sidebar-nav{ flex-direction:row; align-items:stretch; justify-content:space-around; padding:0 4px; gap:0; overflow:visible; }
.shell .sidebar .nav-item{
  flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:4px;
  padding:6px 2px; margin:5px 2px; border-radius:10px; -webkit-tap-highlight-color:transparent;
}
.shell .sidebar .nav-item.hidden{ display:none !important; }
.shell .sidebar .nav-item.active::before{ left:50%; top:-5px; width:26px; height:3px; transform:translateX(-50%); border-radius:0 0 3px 3px; }
.shell .sidebar .nav-icon{ width:22px; height:22px; margin:0; }
.shell .sidebar .nav-icon svg{ width:21px; height:21px; }
.shell .sidebar .nav-label, .shell .sidebar.sm .nav-label{
  opacity:1; width:auto; max-width:100%; transform:none; pointer-events:none;
  font-size:10.5px; font-weight:600; letter-spacing:0.1px; text-overflow:ellipsis; white-space:nowrap;
}
.shell .sidebar .nav-label[data-m]{ font-size:0; }
.shell .sidebar .nav-label[data-m]::after{ content:attr(data-m); font-size:10.5px; }

/* ══ CONTENT + APP BAR ══ */
.content{ padding-left:var(--sl); padding-right:var(--sr); overscroll-behavior-y:contain; }
.hub-state .hub-topbar{ display:none; }
.m-appbar{
  display:flex; position:sticky; top:0; z-index:300; flex-shrink:0;
  align-items:center; gap:4px; height:calc(var(--bar-h) + var(--st));
  padding:var(--st) 12px 0 8px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,248,229,0.08);
}
.draftify-state .m-appbar{ background:rgba(66,85,131,0.92); }
.postify-state  .m-appbar{ background:rgba(128,64,64,0.92); }
.pitchify-state .m-appbar{ background:rgba(76,108,78,0.92); }
.hub-state      .m-appbar{ background:rgba(214,190,90,0.94); border-bottom-color:rgba(30,28,20,0.1); }
.m-back{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream); flex-shrink:0; }
.m-back:active{ background:rgba(255,248,229,0.12); }
.m-tool{ display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:10px; min-width:0; color:var(--cream); }
.m-tool:active{ background:rgba(255,248,229,0.1); }
.m-tool-badge{ width:32px; height:32px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.m-tool-name{ font-family:'League Spartan',sans-serif; font-size:18px; font-weight:800; letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-tool-caret{ opacity:0.55; flex-shrink:0; }
.hub-state .m-tool, .hub-state .m-back{ color:rgba(30,28,20,0.85); }
.m-appbar-right{ margin-left:auto; display:flex; align-items:center; }

/* User pill lives in the app bar on mobile (moved by JS) */
.m-appbar .user-pill{ padding:0; gap:0; background:none; border:none; }
.m-appbar .user-pill-name, .m-appbar .user-pill-arrow{ display:none; }
.m-appbar .user-pill-avatar{ width:36px; height:36px; font-size:15px; border:1.5px solid rgba(255,248,229,0.35); }
.m-appbar .user-pill.guest{ padding:8px 14px; background:rgba(255,248,229,0.12); border:1.5px solid rgba(255,248,229,0.22); }
.m-appbar .user-pill.guest .user-pill-avatar{ display:none; }
.m-appbar .user-pill.guest .user-pill-name{ display:block; font-size:11.5px; }
.hub-state .m-appbar .user-pill.guest{ background:rgba(30,28,20,0.08); border-color:rgba(30,28,20,0.2); }
.hub-state .m-appbar .user-pill.guest .user-pill-name{ color:rgba(30,28,20,0.85); }
.m-appbar .user-menu{ min-width:230px; right:-2px; }
.user-menu-item{ min-height:46px; font-size:15px; padding:10px 12px; }
.user-menu-item svg{ width:17px; height:17px; }
.user-menu-name{ font-size:14px; }

/* ══ PAGE HEADER ══ */
.topbar{ padding:18px 16px 0; }
.page-title{ font-size:30px; line-height:1.06; max-width:none; }
.subbar{ padding:8px 16px 0; }
.subbar .action-btn-back{ display:none !important; }
.page-sub{ font-size:14px; line-height:1.55; opacity:0.62; max-width:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.content-inner{ padding:18px 16px 20px; gap:14px; }
.d-panel{ gap:14px; }
.disclaimer{ font-size:10.5px; opacity:0.42; padding:8px 20px calc(var(--tab-h) + var(--sb) + 20px); }
.hub-state .disclaimer, .pitchify-state .disclaimer{ padding-bottom:calc(var(--sb) + 22px); }

/* ══ TYPE FLOOR + TOUCH ══ */
.studio-inp, .studio-textarea, .url-inp, .slash-inp, .vl-niche-inp, .regen-notes-inp, .desc-block{ font-size:16px; }
.studio-card-label, .dash-tips-label, .plan-col-tier, .vl-score-lbl, .vault-compare-label,
.preview-section-label, .studio-divider-label, .suite-overlay-label, .preview-header-label{ font-size:10.5px; opacity:0.58; }
.studio-field-label{ font-size:11px; opacity:0.6; }
.studio-field-sub, .studio-save-note, .po-source-sub, .vault-card-meta, .vl-fb-label{ font-size:12px; opacity:0.55; }
.vl-why, .vault-empty-desc, .pitch-soon-desc, .po-controls-desc, .vault-card-desc, .studio-context-banner{ font-size:14px; }
.yt-disc, .preview-disc{ opacity:0.35; font-size:9.5px; }
.studio-btn-primary, .studio-btn-ghost, .btn-go{ min-height:46px; }
.studio-btn-ghost{ font-size:11.5px; }
.dash-nav-card:hover, .hub-card:hover{ transform:none; }
.dash-nav-card:hover .dash-nav-card-arrow, .hub-card:hover .hub-card-arrow{ transform:none; }
.vl-fb-btn{ width:44px; height:44px; }
.dash-tips-dot{ position:relative; width:8px; height:8px; }
.dash-tips-dot::after{ content:''; position:absolute; inset:-12px; }
.studio-tag-remove{ position:relative; width:18px; height:18px; }
.studio-tag-remove::after{ content:''; position:absolute; inset:-10px; }

/* ══ DASHBOARDS + HUB ══ */
.dash-cards, .hub-cards{ grid-template-columns:1fr; gap:10px; }
.dash-nav-card{ flex-direction:row; align-items:center; gap:14px; padding:14px 14px 14px 16px; }
.dash-nav-card-icon{ width:44px; height:44px; }
.dash-nav-card-title{ font-size:16.5px; margin-bottom:3px; }
.dash-nav-card-desc{ font-size:13px; opacity:0.62; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dash-nav-card-arrow{ align-self:center; }
.dash-tips{ padding:20px 18px 16px; min-height:128px; gap:12px; }
.dash-tips-text{ font-size:16.5px; }
.hub-card{ display:grid; grid-template-columns:48px 1fr auto; grid-template-areas:"badge name arrow" "badge desc arrow"; column-gap:14px; row-gap:3px; align-items:center; padding:16px; }
.hub-card-badge{ grid-area:badge; width:48px; height:48px; }
.hub-card-name{ grid-area:name; font-size:18px; }
.hub-card-desc{ grid-area:desc; font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hub-card-tag{ display:none; }
.hub-card-arrow{ grid-area:arrow; align-self:center; }

/* ══ DRAFTIFY STUDIO ══ */
.ai-studio-top-row, .ai-studio-outer{ grid-template-columns:1fr; gap:12px; }
.preview-header{ display:none; }
.studio-progress{ padding:14px 18px 30px; }
.studio-step{ position:relative; }
.studio-step-label{ display:none; }
.studio-step.active .studio-step-label{ display:block; position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); font-size:10px; }
.studio-step-line{ margin:0 6px; }
.studio-card{ padding:20px 16px; }
.studio-card-title{ font-size:21px; margin-bottom:16px; }
.studio-output{ font-size:15px; }
.regen-notes-row{ flex-direction:column; align-items:stretch; }
.regen-btn-inline{ width:100%; }
.studio-card .studio-btn-primary.slim{ width:100%; }
.studio-btn-row > *{ flex:1; }
.studio-tag-chip{ font-size:13px; padding:6px 10px 6px 13px; }
.studio-divider-label{ white-space:normal; text-align:center; }
.preview-pane{ padding:0 16px; }
.preview-m-toggle{ align-items:center; justify-content:space-between; width:calc(100% + 32px); margin:0 -16px; padding:15px 16px; font-family:'League Spartan',sans-serif; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream); }
.preview-m-toggle svg{ transition:transform 0.2s; opacity:0.6; }
.preview-pane:not(.m-open) > :not(.preview-m-toggle){ display:none; }
.preview-pane.m-open{ padding-bottom:14px; }
.preview-pane.m-open .preview-m-toggle svg{ transform:rotate(180deg); }

/* ══ VISUAL LAB ══ */
.vl-grid{ gap:10px; }
.vl-opt{ padding:12px; display:flex; flex-direction:column; }
.vl-opt .studio-card-label{ margin-bottom:6px; }
.vl-opt .vl-win-badge{ position:static; align-self:flex-start; margin:0 0 8px; padding:3px 8px; font-size:8.5px; }
.vl-drop{ margin-bottom:0; }
.vl-drop-empty{ font-size:11.5px; text-align:center; padding:0 6px; gap:6px; }
.vl-drop.has-img .vl-drop-swap{ display:block; bottom:6px; right:6px; padding:4px 8px; font-size:9px; }
.vl-still{ margin-bottom:0; }
.vl-title-card, .vl-notes-card{ padding:16px; }
.vl-still-title{ font-size:15px; }
.vl-title-row{ flex-direction:column; }
.vl-pick{ width:100%; padding:12px; }
.vl-optim{ flex-direction:column; align-items:stretch; padding:14px 16px; gap:10px; }
.vl-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px; scrollbar-width:none; }
.vl-chips::-webkit-scrollbar{ display:none; }
.vl-chip{ flex-shrink:0; white-space:nowrap; padding:9px 14px; font-size:13px; }
.vl-niche-add{ width:100%; }
.vl-niche-inp{ flex:1; width:auto; max-width:none; padding:10px 12px; }
.vl-niche-btn{ width:46px; padding:0; font-size:20px; justify-content:center; align-items:center; flex-shrink:0; }
.vl-results{ grid-template-columns:1fr; }
.vl-verdict{ padding:18px 16px; }
.vl-scores{ gap:8px; }
.vl-score{ padding:10px 12px; }
.vl-acts{ flex-direction:column; }
.vl-acts > *{ width:100%; }
.vl-feed{ padding:12px; }

/* ══ POSTIFY ══ */
.postify-drop{ padding:22px 16px 18px; }
.postify-drop-title{ font-size:22px; }
.postify-drop-sub{ font-size:14px; }
.url-row{ flex-direction:column; gap:8px; }
.url-inp{ padding:13px 14px; }
.btn-go{ width:100%; padding:14px; display:flex; align-items:center; justify-content:center; text-align:center; }
.po-source{ padding:14px 16px; gap:10px; }
.po-source-inline{ min-width:0; flex-basis:100%; flex-direction:column; }
.po-source-inline .url-inp{ font-size:16px; padding:12px; }
.po-source-inline .btn-go{ padding:13px; font-size:11px; display:flex; align-items:center; justify-content:center; }
.po-source > .studio-btn-ghost{ width:100%; }
.po-controls{ flex-direction:column; align-items:stretch; padding:14px 16px; gap:12px; }
.po-controls .studio-btn-primary.slim{ margin-left:0; width:100%; }
.po-controls-text{ min-width:0; }
.clip-list, .seo-grid{ grid-template-columns:1fr; }
.clip-card{ padding:14px 16px; }
.clip-cap{ font-size:13.5px; }
.clip-quote{ font-size:13px; }
.desc-out{ padding:16px; }
.desc-block{ line-height:1.6; }
.po-empty, .vl-empty{ padding:28px 18px; }

/* ══ STORAGE ══ */
.vault-zones{ gap:4px; padding:4px; background:rgba(0,0,0,0.14); border-radius:10px; margin-bottom:12px; }
.vault-zone{ flex:1 1 0; min-width:0; justify-content:center; padding:8px 6px; min-height:42px; font-size:11.5px; white-space:nowrap; }
.vault-grid{ grid-template-columns:1fr; gap:10px; }
.vault-card{ padding:14px 16px; }
.vault-compare-block{ padding:12px 14px; }
.vault-compare-text{ font-size:14.5px; }
.vault-detail-title{ font-size:21px; }
.vault-empty-card{ padding:28px 18px; }
.ps-detail-head{ flex-wrap:wrap; }
.ps-back{ display:none !important; }
.ps-del-bottom{ width:100%; justify-content:center; margin-top:4px; color:#e88 !important; border-color:rgba(232,136,136,0.35) !important; }

/* ══ PLANS ══ */
#panelPlans{ flex:none; }
.plans-grid{ grid-template-columns:1fr; gap:12px; flex:none; }
.plan-col{ height:auto; padding:20px 18px; }
.plans-current-banner{ order:-1; margin-top:0; padding:14px 16px; }
.plans-banner-right, .plans-banner-free-details{ justify-content:flex-start; }
.plan-features{ gap:9px; margin:10px 0 18px; }
.plan-features li{ font-size:14px; }
.plan-col-upgrade{ min-height:48px; font-size:12px; }
.plans-footnote{ font-size:12px; opacity:0.55; padding:0 4px; }

/* ══ SETTINGS + ACCOUNT STANDING ══ */
.set-grid{ grid-template-columns:1fr; gap:12px; }
.set-card{ padding:18px 16px; }
.set-row{ flex-wrap:wrap; }
.set-k{ font-size:11px; opacity:0.58; }
.set-v{ font-size:14px; min-width:0; word-break:break-word; }
.set-actions > *{ flex:1; }
.set-guest{ padding:28px 18px; }
.pitch-soon{ padding:22px 18px; }
.pitch-soon-title{ font-size:22px; }

/* ══ MODALS → bottom sheets ══ */
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.auth-modal, .suite-overlay, .vl-picker{ align-items:flex-end; }
.auth-box.sheet-box, .suite-overlay-box, .vl-picker-box{
  width:100% !important; max-width:none !important; max-height:85dvh;
  border-radius:18px 18px 0 0 !important; border-bottom:none !important;
  padding:24px 18px calc(18px + var(--sb)) !important; overflow-y:auto;
  animation:sheetUp 0.28s cubic-bezier(.2,.8,.2,1);
}
.auth-box.sheet-box .auth-close, .suite-overlay-close, .vl-picker-close{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.sheet-box .studio-btn-ghost, .sheet-box .studio-btn-primary{ width:100%; }
.auth-title{ font-size:25px; }
.auth-sub{ font-size:14px; }
.auth-link{ font-size:13.5px; padding:8px 0; }
.suite-tool-btn{ padding:14px 6px; }
.suite-tool-name{ font-size:14px; }
.vl-picker-item{ padding:13px 14px; }
.vl-picker-item-title{ font-size:14.5px; }

/* Sign in / sign up: full screen, closes only via X */
#authModal{ align-items:stretch; }
#authModal .auth-box{ width:100%; max-width:none; height:100%; max-height:none; border-radius:0; border:none; flex-direction:column; animation:sheetUp 0.28s cubic-bezier(.2,.8,.2,1); }
#authModal .auth-left{ display:none; }
.shell.draftify-state ~ #authModal .auth-box, .shell.hub-state ~ #authModal .auth-box{ background:#4B6093; }
.shell.postify-state  ~ #authModal .auth-box{ background:#934B4B; }
.shell.pitchify-state ~ #authModal .auth-box{ background:#567B58; }
#authModal .auth-right{ padding:calc(8px + var(--st)) 20px calc(28px + var(--sb)); overflow-y:auto; }
#authModal .auth-right-head{ margin:0 -10px 10px 0; min-height:44px; }
#authModal .auth-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:18px; border-radius:50%; background:rgba(255,248,229,0.1); color:var(--cream); }
#authModal .auth-tab{ padding:11px; font-size:12px; }
#authTermsWrap input{ width:20px; height:20px; }
#authTermsWrap label{ font-size:13.5px !important; color:rgba(255,248,229,0.6) !important; }

/* Whop checkout: full screen */
#whopModal{ align-items:stretch; }
.whop-box{ width:100% !important; height:100% !important; max-height:none !important; border-radius:0 !important; }
.whop-box > button:first-child{ width:40px !important; height:40px !important; top:calc(10px + var(--st)) !important; font-size:16px !important; }

/* ══ OVERLAYS + TOAST ══ */
.completion-overlay{ left:0 !important; padding:0 24px; text-align:center; }
.toast{ left:50%; right:auto; bottom:calc(var(--tab-h) + var(--sb) + 12px); transform:translate(-50%,80px); max-width:calc(100vw - 32px); text-align:center; font-size:13.5px; }
.toast.show{ transform:translate(-50%,0); }
.shell.hub-state ~ .toast, .shell.pitchify-state ~ .toast{ bottom:calc(var(--sb) + 16px); }
.slash-palette{ width:calc(100vw - 24px) !important; left:12px !important; top:calc(76px + var(--st)) !important; }

/* ══ PHONE LANDSCAPE ══ */
@media (max-height:500px){
  :root{ --tab-h:48px; --bar-h:48px; }
  .shell .sidebar .nav-item{ flex-direction:row; gap:7px; margin:4px 2px; }
  .page-title{ font-size:24px; }
  .topbar{ padding-top:12px; }
  .auth-box.sheet-box, .suite-overlay-box, .vl-picker-box{ max-height:92dvh; }
}