:root{
  --mobile-card:rgba(255,255,255,.88);
  --mobile-line:rgba(20,32,55,.08);
  --mobile-shadow:0 22px 50px rgba(15,23,42,.12);
}
.mobileExperienceBody{font-family:var(--ui-font);background:transparent;color:#152231;padding:0 0 calc(120px + env(safe-area-inset-bottom));}
.mobileAppFrame{max-width:760px;margin:0 auto;padding:14px 14px 0;display:grid;gap:14px}
.mobileTopbarShell{padding-top:max(6px,env(safe-area-inset-top))}
.mobileTopbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--mobile-line);border-radius:28px;background:rgba(255,255,255,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--mobile-shadow)}
.mobileBrandBlock{display:flex;align-items:center;gap:12px;min-width:0}
.mobileBrandLogo{max-height:52px;object-fit:contain;display:block}
.mobileBrandFallback{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;font-weight:900;font-size:22px;flex:0 0 auto}
.mobileEyebrow,.mobilePreviewEyebrow{font-size:11px;font-weight:800;color:var(--brand);margin-bottom:4px}
.mobileTitle{font-size:20px;line-height:1.35;margin:0;color:#17312d}
.mobileDesktopLink{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(31,111,100,.08);color:var(--brand);text-decoration:none;font-weight:800;border:1px solid rgba(31,111,100,.10);white-space:nowrap}
.mobileWelcome{margin:10px 2px 0;padding:14px 16px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid var(--mobile-line);box-shadow:0 12px 30px rgba(15,23,42,.06);font-size:14px;line-height:1.9;color:#17312d}
.mobilePreviewCard{padding:16px;border-radius:30px;background:var(--mobile-card);border:1px solid rgba(255,255,255,.7);box-shadow:var(--mobile-shadow)}
.mobilePreviewHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mobileSectionTitle{margin-bottom:4px}
.mobileMiniAction{border:0;background:rgba(31,111,100,.08);color:var(--brand);padding:11px 14px;border-radius:16px;font-weight:800;font-family:inherit}
.mobileStepRail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mobileStepRail .stepPill{padding:10px 6px;border-radius:18px}
.mobileQuickActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.mobileQuickAction{min-height:52px;border:1px solid rgba(20,32,55,.08);border-radius:18px;background:#fff;font-family:inherit;font-weight:800;color:#17312d;box-shadow:0 12px 26px rgba(15,23,42,.06)}
.mobileCanvasOuter{padding:12px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));border:1px solid rgba(20,32,55,.06)}
.mobilePreviewTools{display:grid;gap:10px;margin-top:12px}
.mobilePreviewFooter{padding-bottom:4px}
.mobileFooterBar{display:grid;gap:10px;padding:8px 8px 18px;text-align:center;color:#516173;font-size:13px}
.mobileSocialRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mobileSocialRow a{text-decoration:none;color:var(--brand);font-weight:800}
.mobileSheetBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.38);opacity:0;pointer-events:none;transition:opacity .24s ease;z-index:70}
.mobileSheet{position:fixed;right:0;left:0;bottom:0;z-index:71;transform:translateY(calc(100% + 40px));transition:transform .28s ease;border-radius:30px 30px 0 0;background:rgba(255,255,255,.97);box-shadow:0 -22px 50px rgba(15,23,42,.18);padding:12px 14px calc(18px + env(safe-area-inset-bottom));max-height:min(82vh,760px);overflow:auto;border-top:1px solid rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mobileSheet.is-open{transform:translateY(0)}
.mobileSheetBackdrop.is-open{opacity:1;pointer-events:auto}
.mobileSheetHandle{width:52px;height:5px;border-radius:999px;background:rgba(115,128,147,.35);margin:4px auto 12px}
.mobileSheetHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mobileSheetClose{border:0;background:rgba(20,32,55,.06);min-height:40px;padding:0 14px;border-radius:14px;font-family:inherit;font-weight:800;color:#17312d}
.mobileFormCard{padding:12px 2px}
.mobileFieldLabel{display:block;font-size:13px;font-weight:800;color:#445164;margin-bottom:8px}
.mobileFieldHint{font-size:12px;color:#738094;margin-top:10px;line-height:1.8}
.mobileUploadField{min-height:88px;border-radius:24px;font-size:16px}
.mobileTemplatesGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobileExperienceBody.sheet-open{overflow:hidden}
@media (min-width:981px){
  .mobileAppFrame{max-width:860px}
  .mobileSheet{max-width:620px;left:50%;right:auto;transform:translate(-50%,calc(100% + 40px))}
  .mobileSheet.is-open{transform:translate(-50%,0)}
}
@media (max-width:560px){
  .mobileAppFrame{padding-inline:10px}
  .mobileTopbar{padding:12px 12px 14px;border-radius:24px;align-items:flex-start;flex-direction:column}
  .mobileDesktopLink{width:100%}
  .mobileStepRail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobileQuickActions{grid-template-columns:1fr 1fr}
  .mobilePreviewCard{padding:14px}
  .mobileTemplatesGrid{gap:8px}
}

.audioFab{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:80;width:54px;height:54px;border-radius:999px;border:1px solid rgba(20,32,55,.08);background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 30px rgba(15,23,42,.14);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.audioHint{position:fixed;right:14px;left:86px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:79;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.94);border:1px solid rgba(20,32,55,.08);box-shadow:0 16px 30px rgba(15,23,42,.10);color:#17312d;font-size:13px;line-height:1.8;display:none}.audioHint.show{display:block}


.mobileJourneyCard{padding:16px 16px 14px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,250,252,.88));border:1px solid rgba(255,255,255,.82);box-shadow:var(--mobile-shadow);display:grid;gap:14px}
.mobileJourneyHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mobileJourneyTitle{margin:0;font-size:19px;color:#17312d}
.mobileJourneyText{margin:6px 0 0;color:#66758c;line-height:1.9;font-size:13px}
.mobileJourneyBadge{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(31,111,100,.08);border:1px solid rgba(31,111,100,.12);color:var(--brand);font-weight:800;white-space:nowrap}
.mobileProgressGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobileStatusCard{padding:12px 14px;border-radius:22px;background:#fff;border:1px solid rgba(20,32,55,.06);box-shadow:0 10px 24px rgba(15,23,42,.05);display:grid;gap:6px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.mobileStatusCard strong{font-size:14px;color:#17312d}
.mobileStatusCard span{font-size:12px;color:#738094;line-height:1.8}
.mobileStatusCard.is-active{border-color:rgba(31,111,100,.26);box-shadow:0 16px 34px rgba(31,111,100,.12);transform:translateY(-1px)}
.mobileStatusCard.is-done{background:linear-gradient(180deg,rgba(240,253,249,.96),rgba(255,255,255,.96));border-color:rgba(31,111,100,.22)}
.mobileResumeBar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:24px;background:rgba(31,111,100,.07);border:1px solid rgba(31,111,100,.12)}
.mobileResumeCopy{display:grid;gap:4px}
.mobileResumeCopy strong{font-size:14px;color:#17312d}
.mobileResumeCopy span{font-size:12px;color:#66758c;line-height:1.8}
.mobileInlineActions{display:flex;gap:8px;flex-wrap:wrap}
.mobileGhostTiny,.mobileTinyBtn{border:0;border-radius:14px;min-height:40px;padding:0 14px;font-family:inherit;font-weight:800;cursor:pointer}
.mobileTinyBtn{background:var(--brand);color:#fff;box-shadow:0 12px 22px rgba(31,111,100,.18)}
.mobileGhostTiny{background:rgba(20,32,55,.06);color:#17312d}
.mobileSmartActions{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}
.mobileSmartPrimary,.mobileSmartSecondary{min-height:52px;border-radius:18px;font-family:inherit;font-weight:800;border:1px solid rgba(20,32,55,.08);cursor:pointer}
.mobileSmartPrimary{background:linear-gradient(135deg,var(--brand),#215f57);color:#fff;box-shadow:0 18px 36px rgba(31,111,100,.20);border-color:transparent}
.mobileSmartSecondary{background:#fff;color:#17312d}
.mobilePreviewCard{position:relative;overflow:hidden}
.mobilePreviewCard::before{content:'';position:absolute;inset:auto 18px 100% 18px;height:1px;background:linear-gradient(90deg,transparent,rgba(31,111,100,.25),transparent)}
.mobileSheet{height:auto;max-height:min(82vh,calc(var(--app-vh,1vh) * 82));transform:translateY(calc(100% + 40px + var(--sheet-translate,0px)));will-change:transform}
.mobileSheet.is-dragging{transition:none}
.mobileActionDock{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;position:fixed;right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:72;padding:10px;border-radius:28px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 40px rgba(15,23,42,.16)}
.mobileDockSecondary,.mobileDockPrimary{min-height:54px;border-radius:18px;font-family:inherit;font-weight:800}
.mobileDockSecondary{background:rgba(20,32,55,.05);border:1px solid rgba(20,32,55,.08);color:#17312d}
.mobileDockPrimary{box-shadow:none}
.mobileFooterBar{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
@media (max-width:560px){
  .mobileProgressGrid{grid-template-columns:1fr}
  .mobileSmartActions{grid-template-columns:1fr}
  .mobileResumeBar{align-items:flex-start;flex-direction:column}
  .mobileInlineActions{width:100%}
  .mobileTinyBtn,.mobileGhostTiny{flex:1 1 0}
  .mobileActionDock{grid-template-columns:1fr}
}

/* Phase 4: calm inline composer instead of bottom sheets */
.mobileSheetBackdrop{display:none!important}
.mobileExperienceBody.sheet-open{overflow:auto}
.mobilePulseCard,.mobileComposerCard{padding:16px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,250,252,.90));border:1px solid rgba(255,255,255,.84);box-shadow:var(--mobile-shadow);display:grid;gap:14px}
.mobilePulseHead,.mobileComposerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mobilePulseTitle,.mobileComposerTitle{margin:0;font-size:19px;color:#17312d}
.mobileComposerText{margin:6px 0 0;color:#66758c;line-height:1.9;font-size:13px}
.mobilePulseBadge,.mobileComposerBadge,.mobileSheetLabel{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(31,111,100,.08);border:1px solid rgba(31,111,100,.12);color:var(--brand);font-weight:800;white-space:nowrap}
.mobilePulseGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mobilePulseStat{padding:14px;border-radius:24px;background:#fff;border:1px solid rgba(20,32,55,.06);box-shadow:0 12px 26px rgba(15,23,42,.05);display:grid;gap:6px}
.mobilePulseStat strong{font-size:21px;line-height:1.25;color:#17312d}
.mobilePulseStat span{font-size:13px;color:#738094;font-weight:800}
.mobilePulseStat small{font-size:12px;line-height:1.8;color:#66758c}
.mobilePulseStat.is-highlight{background:linear-gradient(180deg,rgba(240,253,249,.96),rgba(255,255,255,.98));border-color:rgba(31,111,100,.16)}
.mobileComposerTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mobileComposerTab{display:grid;justify-items:center;gap:6px;min-height:72px;padding:10px 8px;border-radius:22px;border:1px solid rgba(20,32,55,.08);background:#fff;color:#17312d;font-family:inherit;font-weight:800;box-shadow:0 12px 24px rgba(15,23,42,.04);cursor:pointer}
.mobileComposerTab span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:rgba(20,32,55,.06);font-size:12px}
.mobileComposerTab b{font-size:14px}
.mobileComposerTab.is-active{color:#fff;background:linear-gradient(135deg,var(--brand),#215f57);border-color:transparent;box-shadow:0 18px 34px rgba(31,111,100,.18)}
.mobileComposerTab.is-active span{background:rgba(255,255,255,.18)}
.mobileComposerTab.is-disabled{opacity:.55;pointer-events:none}
.mobileSheet{position:static;right:auto;left:auto;bottom:auto;z-index:auto;display:none;transform:none!important;transition:none;border-radius:26px;background:#fff;box-shadow:0 16px 32px rgba(15,23,42,.06);padding:14px;max-height:none;overflow:visible;border:1px solid rgba(20,32,55,.06);backdrop-filter:none;-webkit-backdrop-filter:none;height:auto;will-change:auto}
.mobileSheet.is-open{display:grid;gap:12px}
.mobileSheetHandle,.mobileSheetClose{display:none!important}
.mobilePanelActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mobilePanelPrimary,.mobilePanelGhost{min-height:48px;border-radius:16px;font-family:inherit;font-weight:800;cursor:pointer}
.mobilePanelPrimary{border:0;background:linear-gradient(135deg,var(--brand),#215f57);color:#fff;box-shadow:0 14px 28px rgba(31,111,100,.18)}
.mobilePanelGhost{border:1px solid rgba(20,32,55,.08);background:rgba(20,32,55,.04);color:#17312d}
.mobileQuickAction.is-disabled{opacity:.5;pointer-events:none}
@media (max-width:720px){
  .mobilePulseGrid{grid-template-columns:1fr}
  .mobileComposerTabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mobilePanelActions{grid-template-columns:1fr}
}

/* safe mobile-only hide */
.mobileJourneyCard,
.mobilePulseCard{
  display:none !important;
}


/* mobile-only cleanup */
.mobileDesktopLink,
.mobileWelcome,
.mobileJourneyCard,
.mobilePulseCard,
.mobileComposerHead,
.mobileComposerTabs,
.mobileStepRail,
.mobileQuickActions,
.mobileMiniAction,
.mobileActionDock,
.templateSearchWrap,
.mobileFieldHint,
.mobilePanelActions,
.mobileSheetLabel,
.cropToolsHeader,
.cropPadInline,
.visuallyHiddenShapeDock{
  display:none !important;
}

.mobileComposerCard{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  gap:12px;
}
.mobileSheet{
  position:static;
  display:grid !important;
  transform:none !important;
  transition:none;
  right:auto;left:auto;bottom:auto;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  max-height:none;
  overflow:visible;
}
.mobileSheet[hidden]{display:grid !important}
.mobileSheetHeader{
  margin-bottom:8px;
}
.mobileSheetHeader .sectionHint,
.mobileSheetHeader .titleIndex{
  display:none !important;
}
.flowTemplatesCard,.flowNameCard,.flowImageCard{
  gap:10px;
}
.mobileTemplatesGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.mobileTemplatesGrid .tplCard{
  border-radius:20px;
  overflow:hidden;
}

.mobileNameSimpleCard,
#imageSection{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.mobileFieldLabel{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  font-weight:800;
  color:#17312d;
}
.mobilePrettyNameInput{
  width:100%;
  min-height:56px;
  border:1px solid rgba(20,32,55,.08);
  border-radius:18px;
  background:#fff;
  padding:0 16px;
  font:inherit;
  font-size:16px;
  color:#17312d;
  box-shadow:0 14px 28px rgba(15,23,42,.05);
}
.mobilePrettyNameInput:focus{
  outline:none;
  border-color:rgba(31,111,100,.28);
  box-shadow:0 16px 34px rgba(31,111,100,.10);
}

.mobileUploadField{
  min-height:56px !important;
  border-radius:18px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px !important;
  background:#fff;
  border:1px solid rgba(20,32,55,.08);
  box-shadow:0 14px 28px rgba(15,23,42,.05);
}

.mobilePreviewHead{
  margin-bottom:8px;
}
.mobilePreviewHead .mobilePreviewEyebrow,
.mobilePreviewHead .sectionHint,
.mobilePreviewHead .titleIndex{
  display:none !important;
}
.mobileSectionTitle{
  margin:0;
}
.mobilePreviewToolsTop{
  display:grid;
  gap:10px;
  margin:0 0 12px;
}
.mobileImageToolsBar{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(20,32,55,.06);
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.mobileImageToolsSide{
  display:grid;
  gap:8px;
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:12px;
  padding:0;
  font-size:15px;
}
.mobileImageToolsSide .shapeIconBtn span{
  font-size:15px;
}
.mobileImageToolsCenter{
  display:grid;
  justify-items:center;
}
.cropPadCross{
  position:relative;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
}
.cropArrow{
  position:absolute;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  border-radius:12px;
  display:grid;
  place-items:center;
}
.cropArrowUp{top:0;left:50%;transform:translateX(-50%)}
.cropArrowDown{bottom:0;left:50%;transform:translateX(-50%)}
.cropArrowLeft{left:0;top:50%;transform:translateY(-50%)}
.cropArrowRight{right:0;top:50%;transform:translateY(-50%)}
.cropPadCenter{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(31,111,100,.08);
  color:var(--brand);
  font-weight:800;
}
.canvasPlaceholder{
  min-height:0;
  font-size:0;
  padding:0;
}
.mobileFooterBar{
  display:grid;
  gap:8px;
  padding:12px 6px 24px !important;
}
.mobileFooterBar .devCredit{
  display:block;
  color:#516173;
}
.mobileFooterBar .devCredit a{
  color:var(--brand);
  text-decoration:none;
  font-weight:800;
}
@media (max-width:560px){
  .mobileImageToolsBar{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .mobileImageToolsSide{
    grid-auto-flow:column;
  }
}



/* refinement pass */
.flowNameCard,.flowImageCard{
  display:inline-block !important;
  width:calc(50% - 6px);
  vertical-align:top;
}
.flowNameCard{margin-left:12px}
.flowTemplatesCard,.flowNameCard,.flowImageCard,.flowPreviewCard{margin-bottom:14px}
@media (max-width:560px){
  .flowNameCard,.flowImageCard{
    width:100%;
    display:block !important;
  }
  .flowNameCard{margin-left:0}
}

.mobileFormCard.mobileNameSimpleCard,
#imageSection{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
}
.mobileFieldLabel.mobileIdentityTag{
  margin:0;
  min-width:72px;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--brand),#215f57);
  color:#fff;
  font-size:15px;
  font-weight:800;
  box-shadow:0 14px 28px rgba(31,111,100,.16);
}
.mobilePrettyNameInput{
  min-height:56px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 28px rgba(15,23,42,.05);
}
.mobilePrettyNameInput::placeholder{color:transparent}
.mobileUploadField{
  min-height:56px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,var(--brand),#215f57) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px rgba(31,111,100,.16) !important;
}
.mobileUploadField input{display:none}
.imageUploadRow{display:contents}

.mobilePreviewHead{
  margin-bottom:10px;
}
.mobilePreviewHead > div{
  width:100%;
}
.mobilePreviewHead .mobileSectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mobileImageToolsBar{
  gap:10px;
  padding:12px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
  box-shadow:0 18px 34px rgba(15,23,42,.07);
}
.mobileImageToolsSide{
  gap:7px;
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(20,32,55,.08);
  box-shadow:0 10px 18px rgba(15,23,42,.05);
}
.mobileImageToolsSide .shapeIconBtn.active{
  background:rgba(31,111,100,.08);
  border-color:rgba(31,111,100,.18);
}
.cropPadCross{
  width:124px;
  height:124px;
}
.cropArrow{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(20,32,55,.08);
  box-shadow:0 10px 18px rgba(15,23,42,.05);
}
.cropPadCenter{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(31,111,100,.12),rgba(200,168,90,.12));
}
.mobilePreviewToolsTop{
  margin-bottom:14px;
}



/* v4 refinement */
#mobileComposer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}
#templatesSheet{
  grid-column:1 / -1;
}
#mobilePreview{
  grid-column:1 / -1;
}
#nameSheet,
#imageSheet{
  grid-column:auto;
}

#nameSheet > .mobileSheetHeader,
#imageSheet > .mobileSheetHeader{
  display:none !important;
}

.mobileIdentityInlineRow{
  display:grid;
  grid-template-columns:auto 56px;
  gap:10px;
  align-items:center;
}
.mobileNameSimpleCard{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
}
.mobileIdentityTag{
  min-height:56px;
  margin:0 !important;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:var(--brand);
  color:#fff;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}
.mobileImageTag{
  background:var(--gold);
  color:#17312d;
}
.mobilePrettyNameInput{
  min-height:56px;
}
.mobileUploadIconBtn{
  width:56px;
  height:56px;
  min-height:56px !important;
  min-width:56px;
  padding:0 !important;
  border-radius:18px !important;
  background:var(--gold) !important;
  color:#17312d !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px rgba(200,168,90,.24) !important;
}
.mobileUploadIcon{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:20px;
  font-weight:900;
}
.mobileUploadIconBtn:hover,
.mobileUploadIconBtn:focus{
  transform:translateY(-1px);
}

.mobileHeroMetaRow,
.mobileTemplateCount,
[data-ready-copy],
[data-template-count]{
  display:none !important;
}

.mobilePreviewToolsTop{
  grid-template-columns:1fr;
}
.mobileImageToolsBar{
  grid-template-columns:88px 1fr 84px;
  gap:10px;
  padding:12px;
}
.mobileImageToolsSide--right{
  grid-template-columns:repeat(2,34px);
  grid-auto-rows:34px;
  gap:8px;
  justify-content:end;
}
.mobileImageToolsSide--left{
  gap:8px;
  align-content:center;
  justify-content:start;
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn{
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  border-color:rgba(20,32,55,.08);
  background:#fff;
}
.mobileImageToolsCenter{
  min-width:0;
}
.cropPadCross{
  width:124px;
  height:124px;
}
.cropArrow{
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  background:#fff;
}
.cropPadCenter{
  box-shadow:inset 0 0 0 1px rgba(31,111,100,.08);
}

@media (max-width:560px){
  #mobileComposer{
    grid-template-columns:1fr;
  }
  #nameSheet,
  #imageSheet{
    grid-column:1 / -1;
  }
  .mobileImageToolsBar{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .mobileImageToolsSide--right,
  .mobileImageToolsSide--left{
    justify-content:center;
  }
}



/* v5 polish */
.mobileNameSimpleCard,
.mobileIdentityInlineRow{
  position:relative;
}
.mobileIdentityTag{
  box-shadow:0 14px 28px rgba(31,111,100,.16);
  letter-spacing:.1px;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.mobileImageTag{
  box-shadow:0 14px 28px rgba(200,168,90,.24);
}
.mobilePrettyNameInput{
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.mobilePrettyNameInput:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}
.mobileNameSimpleCard:hover .mobileIdentityTag,
.mobileIdentityInlineRow:hover .mobileIdentityTag{
  transform:translateY(-1px);
  filter:saturate(1.03);
}
.mobileNameSimpleCard:hover .mobilePrettyNameInput{
  border-color:rgba(31,111,100,.22);
}

.mobileUploadIconBtn{
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}
.mobileUploadIconBtn::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:17px;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.04));
  pointer-events:none;
}
.mobileUploadIconBtn::after{
  content:'';
  position:absolute;
  inset:auto -35% -55% auto;
  width:54px;
  height:54px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.34), transparent 65%);
  pointer-events:none;
}
.mobileUploadIcon{
  position:relative;
  z-index:1;
}
.mobileUploadIcon svg{
  width:20px;
  height:20px;
  display:block;
}
.mobileUploadIconBtn:hover,
.mobileUploadIconBtn:focus-visible{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 36px rgba(200,168,90,.34) !important;
  filter:saturate(1.05);
}
.mobileUploadIconBtn:active{
  transform:translateY(0) scale(.98);
}

.mobileImageToolsBar{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,252,.96));
  box-shadow:0 18px 36px rgba(15,23,42,.07);
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn,
.cropArrow{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.mobileImageToolsSide .shapeIconBtn:hover,
.mobileImageToolsSide .miniIconBtn:hover,
.cropArrow:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(15,23,42,.10);
  border-color:rgba(31,111,100,.18);
}
.mobileImageToolsSide .shapeIconBtn.active{
  background:linear-gradient(135deg, rgba(31,111,100,.12), rgba(31,111,100,.05));
  border-color:rgba(31,111,100,.24);
  color:var(--brand);
  box-shadow:0 12px 24px rgba(31,111,100,.10);
}
.cropArrow:hover{
  color:var(--brand);
}
.cropPadCenter{
  background:linear-gradient(180deg, rgba(31,111,100,.10), rgba(31,111,100,.06));
}
.mobileTemplatesGrid .tplCard,
.mobileCanvasOuter{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mobileTemplatesGrid .tplCard:hover,
.mobileCanvasOuter:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(15,23,42,.08);
}



/* v6 luxury finish */
:root{
  --lux-shadow-soft: 0 14px 30px rgba(15,23,42,.06);
  --lux-shadow-mid: 0 20px 42px rgba(15,23,42,.09);
  --lux-glow-brand: 0 18px 34px rgba(31,111,100,.14);
  --lux-glow-gold: 0 18px 34px rgba(200,168,90,.18);
}

.mobileAppFrame{
  gap:18px;
}
.mobileTopbar{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 38px rgba(15,23,42,.07);
}
.mobileBrandLogo,
.mobileBrandFallback{
  filter:drop-shadow(0 8px 18px rgba(15,23,42,.10));
}

#templatesSheet .tplCard,
.mobilePrettyNameInput,
.mobileUploadIconBtn,
.mobileImageToolsBar,
.mobileCanvasOuter,
.mobileFooterBar{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

#templatesSheet .tplCard{
  border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow:var(--lux-shadow-soft);
}
#templatesSheet .tplCard img{
  filter:saturate(1.02) contrast(1.01);
}
#templatesSheet .tplCard .name{
  color:#17312d;
  letter-spacing:.1px;
}
#templatesSheet .tplCard:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:var(--lux-shadow-mid);
  border-color:rgba(31,111,100,.12);
}

.mobileIdentityTag{
  background:linear-gradient(135deg, var(--brand), #245f57);
  box-shadow:var(--lux-glow-brand);
  border:1px solid rgba(255,255,255,.14);
}
.mobileImageTag,
.mobileUploadIconBtn{
  background:linear-gradient(135deg, var(--gold), #d7bb79) !important;
}
.mobileImageTag{
  box-shadow:var(--lux-glow-gold);
  border:1px solid rgba(255,255,255,.22);
}
.mobilePrettyNameInput{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.95));
  border:1px solid rgba(20,32,55,.06);
  box-shadow:var(--lux-shadow-soft);
}
.mobilePrettyNameInput:hover,
.mobilePrettyNameInput:focus{
  box-shadow:0 20px 40px rgba(15,23,42,.09), 0 0 0 4px rgba(31,111,100,.05);
}

.mobileUploadIconBtn{
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:var(--lux-glow-gold) !important;
}
.mobileUploadIconBtn::before{
  inset:1px;
  border-radius:17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.08)),
    radial-gradient(circle at top, rgba(255,255,255,.24), transparent 60%);
}
.mobileUploadIconBtn::after{
  width:64px;
  height:64px;
  inset:auto -25% -45% auto;
  background:radial-gradient(circle, rgba(255,255,255,.40), transparent 68%);
}
.mobileUploadIcon{
  color:#17312d;
}
.mobileUploadIconBtn:hover,
.mobileUploadIconBtn:focus-visible{
  box-shadow:0 22px 42px rgba(200,168,90,.34) !important;
}

.mobilePreviewCard{
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,250,252,.94));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 22px 48px rgba(15,23,42,.08);
}
.mobileSectionTitle{
  font-size:19px;
  font-weight:900;
  letter-spacing:.15px;
}

.mobileImageToolsBar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(250,251,252,.96)),
    radial-gradient(circle at top, rgba(31,111,100,.05), transparent 58%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn,
.cropArrow{
  border:1px solid rgba(20,32,55,.06);
  background:linear-gradient(180deg, #fff, #f8fafc);
  box-shadow:0 10px 22px rgba(15,23,42,.07);
}
.mobileImageToolsSide .shapeIconBtn:hover,
.mobileImageToolsSide .miniIconBtn:hover,
.cropArrow:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 30px rgba(15,23,42,.10);
}
.mobileImageToolsSide .shapeIconBtn.active{
  background:linear-gradient(135deg, rgba(31,111,100,.16), rgba(31,111,100,.07));
  box-shadow:0 14px 28px rgba(31,111,100,.12);
}
.cropPadCross{
  width:128px;
  height:128px;
}
.cropArrow{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:13px;
}
.cropPadCenter{
  width:42px;
  height:42px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(31,111,100,.12), rgba(31,111,100,.06));
  box-shadow:inset 0 0 0 1px rgba(31,111,100,.08), 0 8px 18px rgba(15,23,42,.05);
}

.mobileCanvasOuter{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at top, rgba(200,168,90,.06), transparent 62%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 20px 42px rgba(15,23,42,.08);
}
.mobileCanvasOuter:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 50px rgba(15,23,42,.10);
}

.mobileFooterBar{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:var(--lux-shadow-soft);
}
.mobileFooterBar .devCredit a,
.mobileSocialRow a{
  transition:color .18s ease, opacity .18s ease;
}
.mobileFooterBar .devCredit a:hover,
.mobileSocialRow a:hover{
  color:#0e5148;
  opacity:.95;
}



/* v7 compact premium refinement */
.mobileAppFrame{
  gap:14px !important;
}
.mobileTopbarShell{
  margin-bottom:2px;
}
.mobileTopbar{
  padding:12px 14px !important;
  border-radius:24px !important;
}
.mobileBrandBlock{
  gap:10px !important;
}
.mobileBrandLogo{
  max-height:52px;
}
.mobileComposerCard,
.mobilePreviewCard{
  gap:10px !important;
}
.flowTemplatesCard,.flowNameCard,.flowImageCard{
  margin-bottom:10px !important;
}
.mobileTemplatesGrid{
  gap:8px !important;
}
.mobileTemplatesGrid .tplCard{
  border-radius:18px !important;
}
.mobileTemplatesGrid .tplCard .name{
  padding-top:6px;
  padding-bottom:2px;
  font-size:13px !important;
}
.mobileNameSimpleCard,
.mobileIdentityInlineRow{
  gap:8px !important;
}
.mobileIdentityTag{
  min-height:52px !important;
  border-radius:16px !important;
  padding:0 14px !important;
}
.mobilePrettyNameInput{
  min-height:52px !important;
  border-radius:16px !important;
}
.mobileIdentityInlineRow{
  grid-template-columns:auto 1fr !important;
}
.mobileUploadIconBtn{
  width:auto !important;
  min-width:0 !important;
  height:52px !important;
  min-height:52px !important;
  border-radius:16px !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.mobileUploadText{
  display:block;
  width:100%;
  text-align:center;
  font-size:14px;
  font-weight:900;
  letter-spacing:.1px;
  color:#17312d;
  position:relative;
  z-index:1;
}
.mobileUploadIconBtn::before{
  border-radius:15px !important;
}
.mobileUploadIconBtn::after{
  width:72px !important;
  height:72px !important;
}
.mobilePreviewHead{
  margin-bottom:4px !important;
}
.mobileSectionTitle{
  font-size:18px !important;
}
.mobilePreviewToolsTop{
  margin:0 0 10px !important;
  gap:8px !important;
}
.mobileImageToolsBar{
  gap:8px !important;
  padding:10px !important;
  border-radius:20px !important;
  grid-template-columns:82px 1fr 74px !important;
}
.mobileImageToolsSide--right{
  grid-template-columns:repeat(2,32px) !important;
  grid-auto-rows:32px !important;
  gap:6px !important;
}
.mobileImageToolsSide .shapeIconBtn,
.mobileImageToolsSide .miniIconBtn{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:11px !important;
}
.mobileImageToolsSide .shapeIconBtn span{
  font-size:14px !important;
}
.cropPadCross{
  width:112px !important;
  height:112px !important;
}
.cropArrow{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:11px !important;
  font-size:15px !important;
}
.cropPadCenter{
  width:38px !important;
  height:38px !important;
  border-radius:11px !important;
}
.mobileCanvasOuter{
  padding:8px !important;
  border-radius:20px !important;
}
.mobilePreviewFooter{
  padding-top:8px !important;
}
.mobileFooterBar{
  margin-top:6px;
  padding:10px 6px 18px !important;
  border-radius:18px !important;
  gap:6px !important;
}

@media (max-width:560px){
  .mobileAppFrame{gap:12px !important}
  .mobileTemplatesGrid{gap:7px !important}
  .mobileImageToolsBar{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .mobileImageToolsSide--right,
  .mobileImageToolsSide--left{
    justify-content:center !important;
  }
}



/* v8 image label + centered upload row */
.mobileIdentityInlineRow{
  width:100%;
  max-width:280px;
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) 58px;
  justify-content:center;
}
.mobileImageTag{
  justify-content:center;
  text-align:center;
  min-width:0;
}
.mobileUploadIconBtn{
  display:grid;
  place-items:center;
}
.mobileUploadText{
  display:none !important;
}
.mobileUploadIcon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
}
.mobileUploadIcon svg{
  width:22px;
  height:22px;
  display:block;
}



/* footer final order fix */
.mobileAppFrame{display:grid}
.mobileFooterBar{
  display:grid !important;
  order:999 !important;
  position:relative !important;
  clear:both !important;
  margin:16px auto 0 !important;
  width:min(760px, calc(100% - 28px)) !important;
}
.mobilePreviewCard{margin-bottom:0 !important}