/* ============================================================
   mobile.css — the phone layer
   ------------------------------------------------------------
   Every stylesheet before this one was drawn at desktop scale and then
   narrowed: 44–46px buttons, 68px top bar, 26px page titles, a composer the
   height of half a phone. On a 375px screen that left one heading and one
   control per screenful.

   This file only applies at phone width and loads last on every page
   (after page-specific <style> blocks, and after editor.css in the Studio),
   so the phone sizing lives in one place instead of being fought out across
   five files. The rules it keeps while shrinking everything:

   - Nothing tappable is smaller than 30px on its short side; primary actions
     stay 36–40px. WCAG 2.2 asks for 24px; a thumb wants a little more.
   - Text you type into is 16px. Below that, iOS Safari zooms the whole page
     the moment the field is tapped, which is worse than a large field.
   - Body text does not go below 14px, and small print not below 12px.
   ============================================================ */

@media (max-width: 640px) {

  /* ── Base type ─────────────────────────────────────────── */
  body.sh-body,
  body.pg-body { font-size: 14px; }
  body.sh-body p,
  body.sh-body li { line-height: 1.5; }

  /* The skip link hid 60px above the page, but its 24px shadow reached back
     into view as a grey smudge in the top-left corner of every page. */
  .sh-skip,
  .ed-skip { top: -120px; box-shadow: none; }
  .sh-skip:focus,
  .ed-skip:focus { top: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

  /* ── Top bar and menu ─────────────────────────────────── */
  /* Brand on the left, what you act on at the right, the menu last. The bar
     used to be a menu button and a lone logo floating in the middle: the
     name was hidden, and the credit balance and Log in — both of which fit —
     were hidden with it. */
  body.sh-body .sh-topbar { height: 52px; min-height: 52px; padding: 0 12px; gap: 6px; justify-content: flex-start; }
  body.sh-body .sh-topbrand {
    order: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 40px;
    min-width: 0;
  }
  body.sh-body .sh-topbrand .sh-brand-mark,
  body.sh-body .sh-topbrand img { width: 26px; height: 26px; }
  body.sh-body .sh-topbrand .sh-brand-name { display: inline; font-size: 16px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
  body.sh-body .sh-top-actions { order: 1; margin-left: auto; display: flex; align-items: center; gap: 6px; }
  body.sh-body .sh-credit-chip { display: inline-flex; height: 32px; padding: 0 9px; gap: 0; font-size: 12px; }
  body.sh-body .sh-credit-plan { display: none; }
  body.sh-body .sh-notification-btn { width: 36px; height: 36px; }
  body.sh-body .sh-top-actions > .sh-tlink:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
  }
  /* The menu is the way to every page, so it keeps a 40px target. */
  /* margin-right:auto was left over from when the menu sat on the left and
     pushed everything else right; with the menu last it split the free space
     and stranded the button 20px short of the edge. */
  body.sh-body #navBurger { order: 2; width: 40px; height: 40px; border-radius: 10px; margin: 0; }
  body.sh-body #navBurger span { width: 15px; }
  /* Menu panel and notifications: see the blocks at the end of this file. */

  /* ── Page frame and titles ────────────────────────────── */
  body.sh-body .pg { padding: 18px 14px 32px; }
  body.sh-body .pg-head { padding: 0 0 12px; margin-bottom: 16px; }
  body.sh-body .pg-head h1,
  body.sh-body .sk-head h1,
  body.sh-body .st-head h1 { font-size: 22px; line-height: 1.2; }
  body.sh-body .pg-sec { margin-top: 22px; }
  body.sh-body .pg-sec > h2,
  body.sh-body .pg h2 { font-size: 17px; line-height: 1.3; }
  body.sh-body .pg h3 { font-size: 15px; }

  /* ── Buttons ──────────────────────────────────────────── */
  body.sh-body .pg-bw,
  body.sh-body .pg-bo,
  body.sh-body .ig-btn,
  body.sh-body .sh-ge-btn,
  body.sh-body .sk-share-btn,
  body.sh-body .st-btn {
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 9px;
  }

  /* ── Forms ────────────────────────────────────────────── */
  body.sh-body .pg-f { gap: 5px; }
  body.sh-body .pg-f label { font-size: 13px; }
  body.sh-body input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  body.sh-body select {
    min-height: 40px;
    font-size: 16px;
  }
  body.sh-body .pg-f input,
  body.sh-body .pg-f select,
  body.sh-body .pg-f textarea { padding: 8px 11px; border-radius: 9px; }
  body.sh-body textarea { font-size: 16px; }
  body.sh-body .pg-form { padding: 16px; gap: 12px; }
  body.sh-body .pg-fine { font-size: 12px; margin: 0; }
  /* An empty status line still reserved its height, leaving a blank band
     between the submit button and the links under every form. It keeps its
     place in the page (it is a live region) but takes no room until it
     has something to say. */
  body.sh-body .pg-formnote:empty { min-height: 0; }
  body.sh-body .pg-f textarea { min-height: 110px; height: 130px; }
  body.sh-body .pg-auth { gap: 10px; }
  body.sh-body .pg-wordmark { font-size: 16px; }
  body.sh-body .pg-wordmark img { width: 24px; height: 24px; }

  /* ── Cards ────────────────────────────────────────────── */
  body.sh-body .pg-card { padding: 14px; border-radius: 12px; }
  body.sh-body .pg-card h2,
  body.sh-body .pg-card h3 { font-size: 15px; margin-bottom: 4px; }
  body.sh-body .pg-card p { font-size: 13.5px; }
  body.sh-body .pg-cardlink { display: inline-flex; align-items: center; min-height: 32px; }
  body.sh-body .pg-grid { gap: 10px; }

  /* ── Home: prompt composer ─────────────────────────────── */
  body.sh-body .sh-hero { padding: 16px 14px 8px; }
  body.sh-body .sh-hero h1 { font-size: 23px; line-height: 1.2; }
  body.sh-body .sh-composer { padding: 10px; border-radius: 14px; }
  body.sh-body #composerPrompt { min-height: 52px; font-size: 16px; line-height: 1.4; }
  body.sh-body .sh-cbar { padding-top: 8px; gap: 8px; }
  body.sh-body .sh-cbar button,
  body.sh-body .sh-csel-btn { height: 34px; min-height: 34px; font-size: 12.5px; }
  body.sh-body .sh-cbar .sh-cimg,
  body.sh-body .sh-cbar label[for="composerImg"] { width: 34px; height: 34px; }
  body.sh-body #composerGo { height: 38px; min-height: 38px; font-size: 13.5px; }

  /* ── Home: template library ───────────────────────────── */
  body.sh-body .sh-composer { margin-bottom: 0; }
  body.sh-body .sh-gallery-sec { padding-top: 0; }
  body.sh-body .sh-gallery-title { padding-top: 0; margin: 18px 0 12px; }
  body.sh-body .sh-gallery-title > div { padding-top: 14px; }
  body.sh-body .sh-gallery-title h2 { font-size: 18px; }
  body.sh-body .sh-gallery-title .sh-home-kicker { font-size: 10.5px; margin-bottom: 4px; }
  body.sh-body .sh-search-box { height: 38px; }
  body.sh-body #tplSearch { height: 38px; min-height: 38px; }
  body.sh-body .sh-filters-scroll { gap: 6px; padding-top: 0; padding-bottom: 2px; }
  body.sh-body .sh-chip { height: 30px; min-height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
  body.sh-body .sh-ttitle { font-size: 13px; display: block; padding: 7px 0; }
  body.sh-body .sh-tcreator-row { min-height: 32px; }

  /* ── Template detail ──────────────────────────────────── */
  body.sh-body .sh-modal-left { padding: 10px; gap: 10px; }
  /* The stage sizes from its width (9:16). Capping its height with width:auto
     collapsed it to nothing, so the cap is expressed as a width instead:
     half the screen's height, in 9:16. */
  body.sh-body .sh-modal-stage { width: min(100%, calc(50vh * 9 / 16)); max-width: 100%; max-height: none; flex: none; }
  body.sh-body .sh-modal-cta { height: 40px; min-height: 40px; font-size: 13.5px; }
  body.sh-body .sh-modal-act-btn { height: 34px; min-height: 34px; font-size: 12.5px; }
  body.sh-body .sh-modal-close { width: 32px; height: 32px; }
  body.sh-body .sh-modal-right { padding: 14px; }
  body.sh-body .sh-m-title { font-size: 18px; }
  body.sh-body .sh-m-comm-btn { height: 34px; }

  /* ── Pricing ──────────────────────────────────────────── */
  /* On a phone the plans come first. The posts-per-day calculator filled the
     whole first screen before a single price was visible; it stays on larger
     screens, where it sits beside the plans instead of in front of them. */
  body.sh-body .pg-calc { display: none; }
  body.sh-body .pg-plan { padding: 16px; }
  body.sh-body .pg-billing-switch { height: 38px; }
  body.sh-body .pg-billing-switch button { height: 30px; font-size: 12.5px; }

  /* ── Profile ──────────────────────────────────────────── */
  body.sh-body .ig-avatar { width: 80px; height: 80px; font-size: 24px; }
  body.sh-body .ig-fullname { font-size: 19px; }
  body.sh-body .ig-actions-row .ig-btn { height: 36px; }
  body.sh-body .ig-tab-btn { padding: 10px 10px; font-size: 11.5px; }
  body.sh-body .ig-stat > button { min-height: 32px; padding: 4px 8px; font-size: 13px; }
  /* The edit-profile avatar took its width from one stylesheet and its height
     from another, and drew as a tall oval. One size, never squeezed. */
  body.sh-body .ig-edit-av { width: 56px; height: 56px; flex: 0 0 56px; aspect-ratio: 1 / 1; background-size: cover; }

  /* ── Settings ─────────────────────────────────────────── */
  body.sh-body .st-row { min-height: 46px; padding: 9px 12px; }
  body.sh-body .st-key,
  body.sh-body .st-val { font-size: 13.5px; }

  /* ── Creator Tutorials ───────────────────────────────────── */
  body.sh-body .sk-head { padding: 16px 14px 8px; gap: 10px; }
  body.sh-body .sk-empty { margin: 6px 14px 20px; padding: 24px 16px; }
  body.sh-body .sk-empty h3 { font-size: 16px; }

  /* ── Footer ───────────────────────────────────────────── */
  body.sh-body .sh-footer { padding: 24px 14px 20px; font-size: 13px; }
  body.sh-body .sh-footer h2 { font-size: 12.5px; margin-bottom: 6px; }
  body.sh-body .sh-footer a { min-height: 30px; display: inline-flex; align-items: center; }

  /* ── Upload dialog ────────────────────────────────────── */
  body.sh-body .sc-publish-head { padding: 14px 14px 12px; }
  body.sh-body .sc-publish-head h2 { font-size: 19px; }
  body.sh-body .sc-publish-head p { font-size: 12.5px; }
  body.sh-body .sc-publish-head > button { width: 36px; height: 36px; font-size: 18px; }
  body.sh-body .sc-publish-steps { padding: 6px 10px; overflow-x: auto; }
  body.sh-body .sc-publish-steps button { min-height: 34px; padding: 0 9px; font-size: 11.5px; }
  body.sh-body .sc-publish-body { padding: 14px; }
  body.sh-body .sc-drop { padding: 20px 14px; }
  body.sh-body .sc-publish-foot { padding: 10px 14px; }
}

/* ── Studio (editor.html has no sh-body; its own shell) ───── */
@media (max-width: 640px) {
  .ed-top { height: 50px; min-height: 50px; padding-top: 0; padding-bottom: 0; gap: 6px; }
  /* The tab row sticks under the top bar, so its offset follows the bar. */
  .ed-mobile-nav:not([hidden]) { top: 50px; min-height: 44px; }
  .ed-back { width: 36px; height: 36px; }
  .ed-name,
  #edProject { height: 36px; min-height: 36px; font-size: 16px; }
  .ed-credits { height: 36px; min-height: 36px; font-size: 12.5px; }
  .ed-export { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
  .ed-mobile-nav { padding: 5px 8px; gap: 6px; }
  .ed-f input[type="text"], .ed-f input[type="number"], .ed-f select { height: 38px; }
  .ed-aibtn { width: 36px; min-height: 36px; }
  .ed-aichip, .ed-aiq { min-height: 34px; }
  .ed-aigo { min-height: 40px; }
  .ed-frame { width: min(280px, 76vw); }
  .ed-mobile-tab,
  .ed-mobile-publish { height: 34px; min-height: 34px; font-size: 12px; }
  .ed-stagewrap { padding: 10px; }
  .ed-transport { padding: 6px 12px; gap: 8px; }
  .ed-pbtn { width: 36px; height: 36px; }
  .ed-add { min-height: 44px; font-size: 12.5px; }
  .ed-status { padding: 7px 12px; font-size: 12px; }
  /* A 16px-tall slider is hard to catch with a thumb; the track stays thin,
     the touch area around it does not. */
  .ed-f input[type="range"] { height: 30px; }
  /* The checkbox is small, but the whole label around it is the target. */
  .ed-tog-wrap { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; }
  .ed-f label { font-size: 12.5px; }
  .ed-f input:not([type=checkbox]):not([type=color]):not([type=range]),
  .ed-f select,
  .ed-f textarea,
  #edPrompt { font-size: 16px; }
}

/* The smallest phones (320px). Signed out, brand + credits + Log in + menu is
   5px too wide; Log in matters more there, so the balance steps aside. */
@media (max-width: 359px) {
  body.sh-body .sh-top-actions:has(> .sh-tlink:not([hidden])) .sh-credit-chip { display: none; }
}

/* ── Menu panel ─────────────────────────────────────────────
   Whenever the menu button is showing (up to 900px), the menu opens as a
   small panel under the button at the right edge. It used to be a sheet the
   full width of the screen and nearly its full height, so opening the menu
   replaced the page instead of sitting beside it. Tapping outside closes it
   (authui.js), as do Escape and choosing a link. */
@media (max-width: 900px) {
  body.sh-body #navMobile:not([hidden]) {
    position: fixed;
    top: 74px;
    right: 10px;
    left: auto;
    bottom: auto;
    z-index: 120;
    width: min(248px, calc(100vw - 20px));
    max-height: calc(100dvh - 90px);
    padding: 6px;
    gap: 0;
    border: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  }
  body.sh-body #navMobile a,
  body.sh-body #navMobile button,
  body.sh-body #navMobile #navMobileLogout {
    min-height: 34px;
    height: auto;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 550;
  }
  body.sh-body #navMobile .sh-mfill { margin: 0 0 4px; min-height: 36px; font-weight: 650; }
  /* A hairline between groups: workspace, help, account. */
  body.sh-body #navMobile .sh-m-group { margin-top: 5px; position: relative; }
  body.sh-body #navMobile .sh-m-group::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--sc-border);
  }
  body.sh-body #navMobile #navMobileLogout { color: var(--sc-danger) !important; }
}
@media (max-width: 640px) {
  body.sh-body #navMobile:not([hidden]) { top: 56px; right: 8px; width: min(224px, calc(100vw - 16px)); max-height: calc(100dvh - 68px); }

  /* The notification panel hung off the bell's right edge. With the menu
     button now to the bell's right, a 350px panel ran off the left side of the
     screen. On a phone it sits under the bar, inside the screen. */
  body.sh-body .sh-notification-panel {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    width: min(320px, calc(100vw - 16px));
    max-height: min(60vh, 420px);
    border-radius: 12px;
  }
  body.sh-body .sh-notification-panel > header { padding: 10px 12px; font-size: 14px; }
  body.sh-body .sh-notification-item { padding: 10px 12px; }
  body.sh-body .sh-notification-empty { padding: 20px 14px; }
}
@media (max-width: 359px) {
  body.sh-body #navMobile:not([hidden]) { width: 204px; }
}

/* ── Phone: the owner's design, drawn to match ──────────────
   Bottom tab bar, blue-accented header, hero with its drawing, composer,
   four live figures, two feature cards, video-style template cards, and the
   account hub the Profile tab opens. Colours follow the design in the light
   theme; the dark theme keeps its own palette. */
@media (max-width: 640px) {
  :root:not([data-theme="dark"]) body.sh-body {
    --sc-canvas: #f6f8fc;
    --sc-surface: #ffffff;
    --sc-surface-2: #f1f4f9;
    --sc-border: #e4e8f0;
    --sc-brand: #1f6bf0;
  }
  body.sh-body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.sh-body .sh-home { padding-left: 6px; padding-right: 6px; }
  body.sh-body .sh-workflow-sec, body.sh-body .sh-banner-sec, body.sh-body .sh-finale, body.sh-body .sh-gallery-end { margin-left: 8px; margin-right: 8px; }

  /* Header */
  body.sh-body .sh-topbar { height: 60px; min-height: 60px; background: var(--sc-surface); border-bottom: 1px solid var(--sc-border); }
  body.sh-body .sh-topbrand .sh-brand-mark,
  body.sh-body .sh-topbrand img { width: 34px; height: 34px; }
  body.sh-body .sh-topbrand .sh-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #111 !important; }
  body.sh-body .sh-topbrand .sh-brand-name i { color: var(--sc-brand) !important; font-style: normal; }
  body.sh-body .sh-top-actions { gap: 8px; }
  body.sh-body .sh-credit-chip {
    height: 34px; padding: 0 10px; gap: 6px;
    border: 1px solid color-mix(in srgb, var(--sc-brand) 18%, transparent); border-radius: 10px;
    background: color-mix(in srgb, var(--sc-brand) 7%, #fff); box-shadow: none;
    color: var(--sc-brand) !important; font-size: 13px; font-weight: 600;
  }
  body.sh-body .sh-credit-ico { display: inline-grid; place-items: center; }
  body.sh-body .sh-credit-ico svg { width: 16px; height: 16px; }
  body.sh-body .sh-notification-btn,
  body.sh-body #navBurger { width: 40px; height: 40px; border: 0; border-radius: 11px; background: var(--sc-surface-2); }

  /* Tab bar */
  body.sh-body .sh-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    border-radius: 22px 22px 0 0;
    background: var(--sc-surface);
    box-shadow: 0 -6px 24px rgba(20, 35, 70, .08);
  }
  body.sh-body .sh-bn-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 66px; min-width: 0;
    color: #6b7280; font-size: 11.5px; font-weight: 500; text-decoration: none;
  }
  body.sh-body .sh-bn-icon { display: grid; place-items: center; width: 26px; height: 26px; }
  body.sh-body .sh-bn-icon svg { width: 24px; height: 24px; }
  body.sh-body .sh-bn-tab[aria-current="page"] { color: var(--sc-brand); font-weight: 600; }
  body.sh-body .sh-bn-home[aria-current="page"] svg { fill: currentColor; }
  body.sh-body .sh-bn-create .sh-bn-icon {
    width: 50px; height: 50px; margin-top: -30px;
    border: 5px solid var(--sc-surface); border-radius: 50%;
    background: linear-gradient(160deg, #3b82f6, #1f5fe0); color: #fff;
    box-shadow: 0 8px 18px rgba(31, 95, 224, .35);
  }
  body.sh-body .sh-bn-create .sh-bn-icon svg { width: 26px; height: 26px; }

  body.sh-body .sc-toast-wrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.sh-body .sh-live-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.sh-body #navMobile:not([hidden]) { top: 64px; max-height: calc(100dvh - 150px); }

  /* Hero */
  body.sh-body .sh-home .sh-hero-v2 {
    display: block; position: relative;
    width: 100%; margin: 6px auto 0;
    min-height: 0;
    padding: 16px 12px 18px 14px;
    border: 0; border-radius: 18px;
    background: linear-gradient(170deg, #e9f0ff 0%, #f3f7ff 60%, #f7f9ff 100%);
  }
  body.sh-body .sh-hero-v2 .sh-hero-copy { position: relative; z-index: 1; width: 64%; }
  body.sh-body .sh-hero-v2 .sh-hero-kicker { margin: 0 0 8px; font-size: 7.5px; letter-spacing: .22em; white-space: nowrap; color: #475069; }
  body.sh-body .sh-home .sh-hero-v2 h1 {
    margin: 0 0 7px; width: 150%;
    color: #0b0f19; font-family: Inter, system-ui, sans-serif; font-weight: 800;
    font-size: clamp(19px, 5.45vw, 26px); line-height: 1.08; letter-spacing: -.04em;
  }
  body.sh-body .sh-hero-v2 h1 em { display: block; color: var(--sc-brand); }
  body.sh-body .sh-home .sh-hero-v2 .sh-hero-sub { max-width: none; width: 118%; color: #3c4557; font-size: clamp(10.5px, 3vw, 13px); line-height: 1.38; }
  body.sh-body .sh-hero-art {
    position: absolute; right: 6px; top: 8px;
    width: 210px; height: 180px;
    transform: scale(.66); transform-origin: top right;
  }
  body.sh-body .sh-ha-img { background: linear-gradient(145deg, #4c8dff, #1f55e6); color: #fff; }

  /* Composer */
  body.sh-body .sh-home .sh-hero-v2 + .sh-composer {
    width: calc(100% - 8px); margin: -2px auto 10px;
    padding: 10px; border: 0; border-radius: 16px;
    background: var(--sc-surface); box-shadow: 0 6px 22px rgba(20, 35, 70, .07);
    position: relative; z-index: 2;
  }
  body.sh-body .sh-composer .sh-ctop {
    padding: 10px 12px 8px; border: 1px solid var(--sc-border); border-radius: 12px; background: var(--sc-surface);
  }
  body.sh-body #composerPrompt { min-height: 58px; padding: 0 0 16px; font-size: 16px; line-height: 1.4; }
  body.sh-body .sh-cph { left: 12px; right: 12px; top: 10px; gap: 5px; }
  body.sh-body .sh-cph b { color: #4b5263; font-size: 14.5px; font-weight: 500; }
  body.sh-body .sh-cph span { color: #8a91a1; font-size: 11.5px; line-height: 1.4; }
  body.sh-body .sh-ccount { right: 12px; bottom: 7px; font-size: 10.5px; color: #8a91a1; }
  body.sh-body .sh-cbar { flex-wrap: nowrap; gap: 7px; margin-top: 9px; padding: 0; border: 0; }
  body.sh-body .sh-cnote, body.sh-body .sh-cgrow { display: none; }
  body.sh-body .sh-cbar label[for="composerImg"].sh-imgbtn {
    width: auto; height: 40px; padding: 0 10px; gap: 7px; flex: none;
    border: 1px solid var(--sc-border); border-radius: 10px; background: var(--sc-surface);
    color: #111827; font-size: 12.5px; font-weight: 500;
  }
  body.sh-body .sh-composer .sh-imgbtn svg { width: 18px; height: 18px; }
  body.sh-body .sh-cbar .sh-csel-btn {
    height: 40px; min-height: 40px; padding: 0 9px;
    border: 1px solid var(--sc-border); border-radius: 10px; background: var(--sc-surface);
    color: #111827; font-size: 12.5px; font-weight: 600;
  }
  body.sh-body .sh-cbar #composerGo {
    flex: 1 1 auto; width: auto; min-width: 0; order: 0;
    justify-content: center; gap: 6px;
    height: 40px; min-height: 40px; padding: 0 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2f7bff, #1a62ec); color: #fff; opacity: 1;
    box-shadow: 0 4px 12px rgba(31, 107, 240, .3);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
  }
  body.sh-body .sh-cbar #composerGo > span { display: inline; }
  body.sh-body .sh-cgo-spark { width: 15px; height: 15px; }

  /* Feature cards */
  body.sh-body .sh-feature-row { width: 100%; gap: 8px; margin: 0 auto 6px; }
  body.sh-body .sh-feature { min-height: 104px; padding: 10px 10px 10px 11px; border-radius: 12px; }
  body.sh-body .sh-feature-anim { background: radial-gradient(120% 120% at 80% 40%, #16335e 0%, #0b1426 65%); }
  body.sh-body .sh-feature-thumb { background: radial-gradient(120% 120% at 80% 30%, #7b35d6 0%, #3d157a 70%); }
  body.sh-body .sh-feature-copy { max-width: 58%; gap: 4px; }
  body.sh-body .sh-feature .sh-feature-title { font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  body.sh-body .sh-feature-thumb .sh-feature-copy { max-width: 62%; }
  body.sh-body .sh-soon { display: inline-block; margin: 0 0 0 3px; padding: 1px 5px; font-size: 7.5px; vertical-align: 2px; }
  body.sh-body .sh-feature-text { font-size: 9px; line-height: 1.35; color: rgba(255,255,255,.86); }
  body.sh-body .sh-feature-art { right: 4px; top: 12px; bottom: auto; transform: none; }
  body.sh-body .sh-fa-screen {
    width: 60px; height: 52px; border-width: 1.5px; font-size: 8.5px;
    transform: perspective(200px) rotateY(-18deg) rotate(-5deg);
  }
  body.sh-body .sh-feature-anim .sh-feature-art { right: 10px; top: 14px; }
  body.sh-body .sh-fa-thumb { width: 54px; height: 58px; border-radius: 6px; transform: rotate(3deg); place-items: start; padding: 5px 0 0 4px; }
  body.sh-body .sh-fa-thumb b { font-size: 11px; }
  body.sh-body .sh-fa-thumb i { width: 18px; height: 13px; right: -6px; top: -5px; border-radius: 4px; }
  body.sh-body .sh-fa-thumb i svg { width: 8px; height: 8px; }
  body.sh-body .sh-fa-face { right: -8px; bottom: -34px; width: 40px; height: 48px; }
  body.sh-body .sh-feature-go { width: 22px; height: 22px; right: 12px; bottom: 9px; }
  body.sh-body .sh-feature-go svg { width: 12px; height: 12px; }
  body.sh-body .sh-feature-thumb .sh-feature-go { right: 44px; }

  /* Library heading, search and chips */
  body.sh-body .sh-gallery-sec { padding: 0 2px; }
  body.sh-body .sh-gallery-title { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin: 12px 0 8px; padding: 0; border: 0; }
  body.sh-body .sh-gallery-title > div { padding-top: 0; }
  body.sh-body .sh-gallery-title h2 { font-family: Inter, system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: #0b0f19; }
  body.sh-body .sh-gallery-title .sh-gallery-sub { margin-top: 2px; color: #4b5263; font-size: 11px; }
  body.sh-body .sh-gallery-title .sh-seeall { margin-top: 3px; font-size: 12px; }
  body.sh-body .sh-seeall svg { width: 13px; height: 13px; }
  body.sh-body .sh-search-box { height: 34px; border: 1px solid var(--sc-border); border-radius: 10px; background: var(--sc-surface); box-shadow: none; }
  body.sh-body .sh-search-box input { font-size: 16px; }
  body.sh-body .sh-chip {
    height: 30px; min-height: 30px; padding: 0 10px; gap: 6px;
    border: 1px solid var(--sc-border); border-radius: 9px;
    background: var(--sc-surface); color: #111827; font-size: 11.5px; font-weight: 500;
  }
  body.sh-body .sh-chip[aria-pressed="true"] { background: #0b0f19; border-color: #0b0f19; color: #fff; }
  body.sh-body .sh-chip-ico { width: 14px; height: 14px; color: var(--sc-brand); }
  body.sh-body .sh-chip[aria-pressed="true"] .sh-chip-ico { color: #fff; }

  /* Template cards: the preview is the card */
  body.sh-body .sh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.sh-body .sh-tile { padding: 0; border: 0; background: transparent; box-shadow: none; }
  body.sh-body .sh-tile .sh-tmeta { display: none; }
  body.sh-body .sh-tile .sh-stage {
    aspect-ratio: 16 / 9; height: auto; margin: 0;
    border: 0; border-radius: 10px; box-shadow: none;
  }
  body.sh-body .sh-tile:hover .sh-stage { transform: none; box-shadow: none; }
  body.sh-body .sh-tile .sh-stage iframe { top: 50%; height: auto; aspect-ratio: 9 / 16; transform: translateY(-50%); }
  body.sh-body .sh-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 2;
    background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none;
  }
  body.sh-body .sh-tover {
    display: block; position: absolute; left: 8px; right: 46px; bottom: 7px; z-index: 3;
    overflow: hidden; color: #fff; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
  }
  body.sh-body .sh-stage .sh-theart { min-width: 0; min-height: 0; width: 24px; height: 24px; top: 6px; right: 6px; border-color: rgba(255,255,255,.5); }
  body.sh-body .sh-stage .sh-theart svg { width: 12px; height: 12px; }
  body.sh-body .sh-tdur { right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 5px; font-size: 9.5px; }

  /* Account hub */
  body.sh-body .sh-profile-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
  body.sh-body .sh-profile-hub > a:not([hidden]),
  body.sh-body .sh-profile-hub > button:not([hidden]) {
    display: flex; align-items: center; gap: 9px;
    min-height: 46px; padding: 0 12px;
    border: 1px solid var(--sc-border); border-radius: 12px;
    background: var(--sc-surface); color: var(--sc-text);
    font: inherit; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none;
  }
  body.sh-body .sh-profile-hub svg { width: 18px; height: 18px; flex: none; color: var(--sc-brand); }
  body.sh-body .sh-profile-hub span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.sh-body .sh-profile-hub .sh-hub-logout { color: var(--sc-danger); }
  body.sh-body .sh-profile-hub .sh-hub-logout svg { color: currentColor; }
}

/* Narrow phones (420px and under): the same design, a little tighter, so the
   composer's three controls, the four figures and the header all fit. */
@media (max-width: 420px) {
  body.sh-body .sh-topbar { padding: 0 10px; }
  body.sh-body .sh-topbrand { gap: 6px; }
  body.sh-body .sh-topbrand .sh-brand-mark,
  body.sh-body .sh-topbrand img { width: 30px; height: 30px; }
  body.sh-body .sh-topbrand .sh-brand-name { font-size: 16.5px; }
  body.sh-body .sh-top-actions { gap: 6px; }
  body.sh-body .sh-credit-chip { height: 32px; padding: 0 8px; gap: 5px; font-size: 12px; }
  body.sh-body .sh-credit-ico svg { width: 14px; height: 14px; }
  body.sh-body .sh-top-actions > .sh-tlink:not([hidden]) { padding: 0 6px; font-size: 12.5px; }
  body.sh-body .sh-notification-btn,
  body.sh-body #navBurger { width: 40px; height: 40px; }

  body.sh-body .sh-cbar { gap: 6px; }
  body.sh-body .sh-cbar label[for="composerImg"].sh-imgbtn { padding: 0 8px; gap: 5px; font-size: 11.5px; }
  body.sh-body .sh-composer .sh-imgbtn svg { width: 16px; height: 16px; }
  body.sh-body .sh-cbar .sh-csel-btn { padding: 0 7px; font-size: 11.5px; }
  body.sh-body .sh-cbar #composerGo { gap: 4px; padding: 0 6px; font-size: 11.5px; }
  body.sh-body .sh-cbar #composerGo > span { display: none; }
  body.sh-body .sh-cgo-spark { width: 13px; height: 13px; }
}
@media (max-width: 350px) {
  body.sh-body .sh-cgo-spark { display: none; }
  body.sh-body .sh-cbar label[for="composerImg"].sh-imgbtn { padding: 0 7px; }
}
@media (max-width: 330px) {
  body.sh-body .sh-composer .sh-imgbtn-label { display: none; }
}
@media (max-width: 345px) {
  body.sh-body .sh-credit-ico { display: none; }
  body.sh-body .sh-topbrand .sh-brand-name { font-size: 15px; }
  body.sh-body .sh-topbrand .sh-brand-mark,
  body.sh-body .sh-topbrand img { width: 26px; height: 26px; }
}

/* Compact workspace refinement. Keep full template artwork and meaningful
   controls; save space in decoration, repeated copy and page chrome instead. */
@media (max-width: 640px) {
  body.sh-body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body.sh-body.pg-bare { padding-bottom: 0; }
  body.sh-body.pg-bare { align-items: flex-start; padding: 64px 16px 24px; }
  body.sh-body .pg-screen { gap: 20px; }
  body.sh-body .pg-screen .pg-wordmark { padding-bottom: 4px; }
  body.sh-body .pg-screen .pg-head { margin-bottom: 10px; }
  body.sh-body .pg-screenfoot { margin-top: 0; }
  body.sh-body .sh-topbar { height: 52px; min-height: 52px; }
  body.sh-body .sh-topbrand .sh-brand-name { color: var(--sc-text) !important; }
  body.sh-body #navMobile:not([hidden]),
  body.sh-body .sh-notification-panel { top: 56px; max-height: calc(100dvh - 128px); }
  body.sh-body .sh-bottomnav {
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    border-radius: 0; border-top: 1px solid var(--sc-border); box-shadow: none;
  }
  body.sh-body .sh-bn-tab { height: 56px; font-size: 11px; gap: 3px; color: var(--sc-muted, #657084); }
  body.sh-body .sh-bn-create .sh-bn-icon {
    width: 26px; height: 26px; margin: 0; border: 0; border-radius: 8px; box-shadow: none;
  }
  body.sh-body .sh-bn-create .sh-bn-icon svg { width: 20px; height: 20px; }
  body.sh-body .sh-home { padding-inline: 12px; }
  body.sh-body .sh-home .sh-hero-v2 {
    padding: 16px 0 10px; margin: 0; border-radius: 0; background: none;
  }
  body.sh-body .sh-hero-v2 .sh-hero-copy,
  body.sh-body .sh-home .sh-hero-v2 h1,
  body.sh-body .sh-home .sh-hero-v2 .sh-hero-sub { width: 100%; }
  body.sh-body .sh-home .sh-hero-v2 h1 { font-size: 24px; line-height: 1.15; color: var(--sc-text); }
  body.sh-body .sh-home .sh-hero-v2 .sh-hero-sub { font-size: 13px; line-height: 1.4; color: var(--sc-muted, #657084); margin-bottom: 0; }
  body.sh-body .sh-hero-art, body.sh-body .sh-hero-kicker { display: none; }
  body.sh-body .sh-home .sh-hero-v2 + .sh-composer { width: 100%; margin: 0 0 10px; box-shadow: none; border: 1px solid var(--sc-border); border-radius: 12px; }
  body.sh-body .sh-composer .sh-ctop { padding: 4px 2px; border: 0; }
  body.sh-body #composerPrompt { min-height: 72px; padding-bottom: 18px; }
  body.sh-body .sh-cph { top: 4px; left: 2px; right: 2px; }
  body.sh-body .sh-cph, body.sh-body .sh-csel-btn { font-family: Inter, system-ui, sans-serif; }
  body.sh-body .sh-cph b { font-size: 14px; color: var(--sc-text); }
  body.sh-body .sh-cph span { font-size: 12px; }
  body.sh-body .sh-cbar { flex-wrap: wrap; }
  body.sh-body .sh-cbar label[for="composerImg"].sh-imgbtn,
  body.sh-body .sh-cbar .sh-csel-btn { color: var(--sc-text); }
  body.sh-body .sh-feature-row { gap: 8px; margin: 0 0 12px; }
  body.sh-body .sh-feature { min-height: 48px; padding: 10px; display: flex; align-items: center; }
  body.sh-body .sh-feature .sh-feature-copy,
  body.sh-body .sh-feature-thumb .sh-feature-copy { max-width: 100%; }
  body.sh-body .sh-feature .sh-feature-title { font-size: 12px; line-height: 1.4; }
  body.sh-body .sh-feature-art, body.sh-body .sh-feature-text, body.sh-body .sh-feature-go { display: none; }
  body.sh-body .sh-soon { font-size: 10px; vertical-align: baseline; }
  body.sh-body .sh-gallery-title h2 { color: var(--sc-text); font-size: 18px; }
  body.sh-body .sh-gallery-title .sh-gallery-sub { font-size: 12px; color: var(--sc-muted, #657084); }
  body.sh-body .sh-search-box { height: 40px; }
  body.sh-body .sh-chip { min-height: 36px; font-size: 12px; color: var(--sc-text); }
  body.sh-body .sh-chip[aria-pressed="true"] { background: var(--sc-text) !important; border-color: var(--sc-text) !important; color: var(--sc-surface) !important; }
  :root[data-theme="dark"] body.sh-body .sh-credit-chip { background: var(--sc-surface-2); }
  body.sh-body .sh-gallery { gap: 14px 10px; }
  body.sh-body .sh-tile .sh-stage { aspect-ratio: 9 / 16; }
  body.sh-body .sh-tile .sh-stage iframe { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  body.sh-body .sh-tile .sh-tmeta { display: block; padding: 6px 0 0; }
  body.sh-body .sh-ttitle { font-size: 12px; line-height: 1.4; padding: 3px 0; min-height: 36px; }
  body.sh-body .sh-tcreator-row { min-height: 36px; padding: 2px 0; gap: 5px; }
  body.sh-body .sh-tcreator-avatar { width: 20px; height: 20px; flex: 0 0 20px; font-size: 9px; }
  body.sh-body .sh-tcreator-name { font-size: 11px; }
  body.sh-body .sh-tcreator-handle { display: none; }
  body.sh-body .sh-tover { display: none; }
  body.sh-body .sh-stage .sh-theart { width: 36px; height: 36px; }
  body.sh-body .sh-stage .sh-theart svg { width: 16px; height: 16px; }
  body.sh-body .pg { padding: 14px 12px 24px; }
  body.sh-body .pg-head { margin-bottom: 12px; padding-bottom: 10px; }
  body.sh-body .pg-head h1 { font-size: 21px; }
  body.sh-body .pg-sec { margin-top: 18px; }
  body.sh-body .pg-plan { padding: 14px; }
  body.sh-body .pg-plan ul { padding-left: 0; margin-block: 10px; gap: 4px; }
  body.sh-body .pg-plan li { padding-block: 3px; margin-block: 2px; font-size: 13px; }
  body.sh-body .pg-form { padding: 14px; }
  body.sh-body .pg-amt { font-size: 34px; margin-top: 10px; }
  body.sh-body .pg-steps { gap: 10px; }
  body.sh-body .pg-steps > li { padding: 14px 12px 14px 48px; }
  body.sh-body .pg-steps > li::before { top: 14px; left: 12px; width: 26px; height: 26px; }
  body.sh-body .pg-steps b { margin-bottom: 4px; font-size: 14px; }
  body.sh-body .pg-steps span { font-size: 13px; line-height: 1.5; }
  body.sh-body .pg-prose p, body.sh-body .pg-prose li { font-size: 14px; line-height: 1.6; }
  body.sh-body .pg :is(input, select, textarea),
  body.sh-body .ig-edit-card :is(input, select, textarea) { max-width: 100%; min-width: 0; }
  body.sh-body :is(.pg-card, .pg-plan, .pg-form, .st-row, .ig-edit-card) { min-width: 0; overflow-wrap: anywhere; }
  body.sh-body :is(.ig-tabs, .pg-tabs) { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  body.sh-body .ig-tab-btn { flex-shrink: 0; min-height: 40px; }
  body.sh-body .ig-header { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; text-align: left; }
  body.sh-body .ig-avatar { width: 50px; height: 50px; font-size: 20px; }
  body.sh-body .ig-story-ring { padding: 2px; }
  body.sh-body .ig-avatar-col { margin: 0; }
  body.sh-body .ig-info-col { gap: 8px; }
  body.sh-body .ig-user-row { gap: 8px; margin: 0; }
  body.sh-body .ig-fullname { font-size: 18px; }
  body.sh-body .ig-actions-row { gap: 4px; margin-top: 4px; }
  body.sh-body .ig-actions-row .ig-btn { height: 36px; padding: 0 5px; font-size: 11px; }
  body.sh-body .ig-bio { font-size: 13px; text-align: left; }
  body.sh-body .ig-stats-row { justify-content: flex-start; gap: 4px; margin: 0; }
  body.sh-body .ig-stat > button { padding: 4px; font-size: 11px; }
  body.sh-body .ig-links-row:empty { display: none; }
  body.sh-body .sh-profile-hub { margin-top: 10px; gap: 6px; }
  body.sh-body .sh-profile-hub > a:not([hidden]),
  body.sh-body .sh-profile-hub > button:not([hidden]) { min-height: 40px; padding: 4px 9px; gap: 6px; font-size: 12px; }
  body.sh-body .ig-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 4px; margin-top: 16px; scroll-padding-inline: 8px; }
  body.sh-body .ig-tab-btn { flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 6px 10px; gap: 5px; font-size: 12px; white-space: nowrap; }
  body.sh-body .ig-tab-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  body.sh-body .ig-edit-container { padding: 12px; }
  body.sh-body .ig-pane, body.sh-body .sh-gallery-sec { scroll-margin-top: 64px; }
  body.sh-body .ig-edit-header { gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
  body.sh-body .creator-studio-stats { gap: 8px; margin-bottom: 16px; }
  body.sh-body .creator-studio-stats > article { min-height: 0; padding: 12px; gap: 6px; }
  body.sh-body .creator-studio-stats strong { font-size: 26px; line-height: 1.1; margin: 0; }
  body.sh-body .creator-studio-stats span { font-size: 12px; }
  body.sh-body .pg-accsec-head { margin-top: 16px; gap: 8px; flex-wrap: wrap; }
  body.sh-body .sh-footer { padding: 20px 12px; }
  body.sh-body .sc-publish-modal { padding: 8px; }
  body.sh-body .sc-publish-card { min-height: 0; max-height: calc(100dvh - 16px); display: flex; flex-direction: column; border-radius: 12px; }
  body.sh-body .sc-publish-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.sh-body :is(.sc-publish-head, .sc-publish-foot, .sc-publish-steps) { flex-shrink: 0; }
  body.sh-body .sc-publish-foot { flex-wrap: wrap; gap: 8px; }
  body.sh-body .sc-publish-field :is(input, textarea, select) { font-size: 16px; min-width: 0; }
}

/* Studio: one screen-sized workspace. Preview remains live while editing;
   only the controls scroll. Bottom workspace tabs remain reachable. */
@media (max-width: 1024px) {
  html.ed-html, html.ed-html body { height: 100%; min-height: 0; overflow: hidden; }
  .ed-app { height: var(--ed-mobile-height, 100dvh); min-height: 0; overflow: hidden; }
  .ed-top { flex: none; height: 50px; min-height: 50px; position: relative; top: auto; padding: 0 8px; gap: 6px; }
  .ed-name { min-width: 0; flex: 1; max-width: none; font-size: 16px; }
  .ed-back, .ed-name, .ed-credits, .ed-export { height: 36px; min-height: 36px; }
  .ed-back { width: 36px; }
  .ed-topright { gap: 6px; flex: none; }
  .ed-pub-btn, .ed-flink, .ed-devices { display: none; }
  .ed-mobile-nav:not([hidden]) {
    order: 3; position: relative; top: auto; flex: none; display: flex;
    min-height: 50px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    background: var(--bg1); box-shadow: none; border-top: 1px solid var(--line); border-bottom: 0;
  }
  .ed-mobile-tabs { display: flex; flex: 1; min-width: 0; gap: 4px; }
  .ed-mobile-tab, .ed-mobile-publish { height: 40px; min-height: 40px; border-radius: 8px; font-size: 12px; }
  #edMobileCanvas { order: -2; }
  #edMobileEdit { order: -1; }
  .ed-main { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
  .ed-main[data-mobile-panel] > .ed-col { display: none; }
  .ed-main[data-mobile-panel="canvas"] > .ed-center,
  .ed-main[data-mobile-panel="edit"] > .ed-center,
  .ed-main[data-mobile-panel="edit"] > .ed-right,
  .ed-main[data-mobile-panel="ai"] > .ed-left { display: flex; }
  .ed-main > .ed-col { min-height: 0; width: 100%; overflow: hidden; flex: 1; }
  .ed-main .ed-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ed-main[data-mobile-panel="ai"] > .ed-left { height: auto; min-height: 0; border: 0; }
  .ed-stagewrap { flex: 1; min-height: 0; padding: 10px; container-type: size; }
  .ed-frame {
    width: min(100cqw, calc(100cqh * var(--arw) / var(--arh)));
    height: auto; max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 3px 16px rgba(0,0,0,.12);
  }
  .ed-frame iframe {
    width: calc(var(--arw) * 40px); height: calc(var(--arh) * 40px); max-width: none;
    transform: scale(var(--phone-preview-scale, 1)); transform-origin: top left;
  }
  .ed-main[data-mobile-panel="edit"] > .ed-center { flex: 0 0 clamp(140px, 30dvh, 250px); border-bottom: 1px solid var(--line); }
  .ed-keyboard-open .ed-main[data-mobile-panel="edit"] > .ed-center { flex-basis: 100px; }
  .ed-main[data-mobile-panel="edit"] .ed-tl,
  .ed-main[data-mobile-panel="edit"] .ed-status { display: none; }
  .ed-main[data-mobile-panel="edit"] .ed-stagewrap { padding: 6px; }
  .ed-transport { padding: 4px 10px; gap: 10px; }
  .ed-pbtn { width: 36px; height: 36px; }
  .ed-tl { padding: 0 10px 8px; }
  .ed-lane { min-height: 48px; padding-top: 6px; gap: 6px; }
  .ed-status { padding: 6px 10px; min-height: 28px; font-size: 12px; }
  .ed-status:empty { display: none; }
  .ed-colhead { padding: 10px 12px; min-height: 36px; font-size: 11px; }
  .ed-props { padding: 12px 12px 20px; gap: 16px; }
  .ed-props > .ed-grp:has(#edFields) { order: -1; }
  #edFields { display: flex; flex-direction: column; gap: 10px; }
  .ed-f input[type="text"], .ed-f input[type="number"], .ed-f select { height: 40px; font-size: 16px; }
  .ed-f textarea, .ed-aiq, #edPrompt { font-size: 16px; }
  .ed-inline { min-width: 0; }
  .ed-inline input { min-width: 0; }
  .ed-mobile-advanced { order: 10; border-top: 1px solid var(--line); padding-top: 8px; }
  .ed-mobile-advanced > .ed-schema-group-title { display: none; }
  .ed-advanced-toggle { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 8px 10px; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; text-align: left; }
  .ed-advanced-toggle::after { content: "+"; font-size: 18px; }
  .ed-advanced-toggle[aria-expanded="true"]::after { content: "−"; }
  .ed-mobile-advanced:not(.is-expanded) > .ed-schema-fields { display: none; }
  .ed-aigo { min-height: 40px; }
  .ed-ai { padding: 10px; }
  .ed-pop { position: fixed; top: 56px; right: 8px; left: auto; width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 116px); overflow-y: auto; }
}
@media (max-width: 1024px) and (max-height: 500px) {
  .ed-main[data-mobile-panel="edit"] { flex-direction: row; }
  .ed-main[data-mobile-panel="edit"] > .ed-center { flex: 0 0 38%; }
  .ed-main[data-mobile-panel="edit"] > .ed-right { flex: 1; border-left: 1px solid var(--line); }
  .ed-top { height: 44px; min-height: 44px; }
  .ed-mobile-nav:not([hidden]) { min-height: 44px; padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Phone: home sections (launch checklist, P0-2) ──────── */
@media (max-width: 640px) {
  body.sh-body .sh-hero-ctas { gap: 8px; margin-top: 12px; }
  body.sh-body .sh-hcta { height: 36px; padding: 0 13px; border-radius: 10px; font-size: 12.5px; }
  body.sh-body .sh-library .pg-head { padding: 16px 10px 4px; margin-bottom: 8px; border: 0; }
  body.sh-body .sh-popular #filters { margin-bottom: 10px; }
  body.sh-body .sh-sec-more { margin-top: 14px; }
  body.sh-body .sh-home-sec { padding: 4px 2px 24px; }
  body.sh-body .sh-tut-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.sh-body .sh-tut-card { padding: 8px; gap: 5px; border-radius: 12px; }
  body.sh-body .sh-tut-title { font-size: 13px; }
  body.sh-body .sh-tut-author { font-size: 11.5px; }
  body.sh-body .sh-tut-watch { font-size: 11.5px; }
  body.sh-body .sh-pp-grid { grid-template-columns: 1fr; gap: 10px; }
  body.sh-body .sh-pp-card { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; padding: 14px 16px; }
  body.sh-body .sh-pp-name { grid-column: 1; }
  body.sh-body .sh-pp-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; }
  body.sh-body .sh-pp-note { grid-column: 1; font-size: 12.5px; }
  body.sh-body .sh-pp-card ul { grid-column: 1 / -1; margin-top: 8px; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 12px; }
  body.sh-body .sh-pp-card li { font-size: 12px; padding-left: 16px; }
  body.sh-body .sh-ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.sh-body .sh-ben { padding: 13px; border-radius: 14px; }
  body.sh-body .sh-ben-ico { width: 32px; height: 32px; margin-bottom: 8px; }
  body.sh-body .sh-ben b { font-size: 13.5px; }
  body.sh-body .sh-ben p { font-size: 12px; }
}
@media (max-width: 400px) {
  body.sh-body .sh-pp-card ul { grid-template-columns: 1fr; }
}