/* Shared mobile rhythm for the five primary app tabs. Desktop layouts stay page-specific. */
@media (max-width:820px){
  :root{
    --mobile-gutter:16px;
    --mobile-section-gap:14px;
    --mobile-radius:12px;
    --mobile-shadow:3px 3px 0 rgba(35,38,47,.14);
    --mobile-nav-content-height:64px;
    --mobile-nav-safe-area:env(safe-area-inset-bottom,0px);
    --mobile-nav-total-height:calc(var(--mobile-nav-content-height) + var(--mobile-nav-safe-area));
    --mobile-nav-height:var(--mobile-nav-content-height);
  }

  body.has-appnav.maker-page,
  body.has-appnav.editor-page,
  body.has-appnav.styles-page,
  body.has-appnav.gallery-page,
  body.has-appnav.my-page{
    padding-bottom:var(--mobile-nav-total-height);
  }
  body.has-appnav.editor-page.is-editor{padding-bottom:0}
  body.has-appnav.editor-page.is-editor .editor-workspace{
    bottom:var(--mobile-nav-total-height);
  }
  /* nav.js is synchronous on app pages, so a second fixed skeleton is unnecessary.
     Removing it avoids two independently composited bottom layers during fast iOS restores. */
  body.has-appnav::before{display:none!important}
  body.has-appnav .appnav{
    position:fixed!important;
    inset:auto 0 0 0!important;
    box-sizing:border-box;
    width:100%;
    max-width:100vw;
    margin:0;
    height:var(--mobile-nav-total-height);
    border-top-width:1.5px;
    padding:3px 6px var(--mobile-nav-safe-area);
    box-shadow:0 -4px 14px rgba(35,38,47,.06);
    -webkit-transform:none!important;
    transform:none!important;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    view-transition-name:none;
    contain:layout paint;
  }
  body.has-appnav .appnav-i{gap:1px;min-height:58px}
  body.has-appnav .appnav-ic{font-size:20px;line-height:24px}
  body.has-appnav .appnav-lb{font-size:10.5px;line-height:14px;margin-top:0;letter-spacing:0}
  body.has-appnav .appnav-i.on::before{
    content:"";
    position:absolute;
    top:1px;
    left:50%;
    width:22px;
    height:3px;
    border-radius:0 0 3px 3px;
    background:#3D6BE0;
    transform:translateX(-50%);
  }

  /* Generate */
  .maker-page .container{padding:20px var(--mobile-gutter) 34px}
  .maker-page .app-header{gap:10px;margin-bottom:14px;padding-right:0}
  .maker-page .app-header .logo{width:40px;height:40px}
  .maker-page .brand{font-size:26px;line-height:1.15;letter-spacing:0;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
  .maker-page .head-sub{margin-top:3px;font-size:13px;line-height:1.55}
  .maker-page .en-badge,.maker-page .lang-switch{display:none!important}
  .maker-page .workspace,.maker-page .col-left,.maker-page .col-right{gap:var(--mobile-section-gap)}
  .maker-page .card{
    padding:14px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .maker-page .card-head{margin-bottom:12px}
  .maker-page .card-head .num{min-width:32px;height:30px;border-radius:8px}
  .maker-page .card-head .t{font-size:17px;line-height:1.3;letter-spacing:0}
  .maker-page .in-mode{margin-bottom:12px;border-radius:10px;padding:4px}
  .maker-page .im-btn{min-height:44px;padding:8px 5px;border-radius:8px;font-size:13px}
  .maker-page .dropzone{padding:22px 12px;border-radius:10px}
  .maker-page .dz-icon{width:48px;height:48px;border-radius:10px}
  .maker-page .dz-title{margin-top:12px;font-size:15px}
  .maker-page .samples-hint{margin:14px 0 8px;line-height:1.55}
  .maker-page .samples{gap:8px}
  .maker-page .sample{padding:7px 4px;border-radius:10px;box-shadow:2px 2px 0 rgba(35,38,47,.16)}
  .maker-page .sample img{border-radius:7px}
  .maker-page .sample .lbl{font-size:11px;line-height:1.35}
  .maker-page .showcase{margin:20px 0 16px;padding:16px 14px;border-radius:var(--mobile-radius);box-shadow:var(--mobile-shadow)}

  /* Editor create screen */
  .editor-page:not(.is-editor) .editor-create{padding:20px var(--mobile-gutter) 34px}
  .editor-page:not(.is-editor) .create-head{gap:12px}
  .editor-page:not(.is-editor) .create-head .create-kicker{font-size:11px;letter-spacing:0}
  .editor-page:not(.is-editor) .create-head h1{margin-top:5px;font-size:26px;line-height:1.15}
  .editor-page:not(.is-editor) .create-head-copy>p:last-child{margin-top:7px;font-size:13px;line-height:1.55}
  .editor-page:not(.is-editor) .draft-card{
    padding:10px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .editor-page:not(.is-editor) .draft-card canvas{width:58px;height:58px;flex-basis:58px;border-radius:8px}
  .editor-page:not(.is-editor) .draft-card .primary-btn{min-height:44px;border-radius:9px}
  .editor-page:not(.is-editor) .create-section{margin-top:20px}
  .editor-page:not(.is-editor) .section-title-row{display:block}
  .editor-page:not(.is-editor) .section-title-row h2{font-size:18px;line-height:1.3}
  .editor-page:not(.is-editor) .section-title-row span{display:block;margin-top:4px;font-size:12px;line-height:1.45}
  .editor-page:not(.is-editor) .size-grid{gap:10px;margin-top:10px}
  .editor-page:not(.is-editor) .size-card{
    min-height:188px;
    padding:10px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .editor-page:not(.is-editor) .size-visual{height:70px;border-radius:8px}
  .editor-page:not(.is-editor) .size-card strong{margin-top:9px;font-size:17px}
  .editor-page:not(.is-editor) .size-card b{font-size:11.5px;line-height:1.35}
  .editor-page:not(.is-editor) .size-divider{margin:7px 0 6px}
  .editor-page:not(.is-editor) .start-options{gap:10px;margin-top:10px}
  .editor-page:not(.is-editor) .start-option,
  .editor-page:not(.is-editor) .parts-overview{
    min-height:0;
    padding:14px;
    border-radius:var(--mobile-radius);
  }
  .editor-page:not(.is-editor) .start-option{box-shadow:var(--mobile-shadow)}

  /* Style catalog */
  .styles-page .styles-app{min-height:calc(100dvh - var(--mobile-nav-total-height));}
  .styles-page .page-head{padding:20px 104px 9px var(--mobile-gutter)}
  .styles-page .page-title h1{font-size:26px;line-height:1.15;letter-spacing:0;overflow-wrap:anywhere}
  .styles-page .page-title p{margin-top:5px;font-size:12.5px;line-height:1.5}
  .styles-page .toolbar{padding:0 var(--mobile-gutter) 12px}
  .styles-page .search{min-height:44px;padding:8px 12px;border-radius:12px;box-shadow:2px 2px 0 rgba(35,38,47,.12)}
  .styles-page .search input{font-size:13px}
  .styles-page .filters{gap:7px;margin-top:9px;padding-bottom:3px}
  .styles-page .filter{min-height:38px;padding:7px 13px;font-size:12px}
  .styles-page .result-count{margin-top:5px;font-size:11px}
  .styles-page .workspace{padding:0 var(--mobile-gutter) 18px}
  .styles-page .catalog-pane{padding:0 3px 4px 0}
  .styles-page .style-list,
  .styles-page .style-list.fill{gap:12px}
  .styles-page .style-row,
  .styles-page .style-row:last-child{border-radius:var(--mobile-radius);box-shadow:var(--mobile-shadow)}
  .styles-page .style-select,
  .styles-page .style-list.fill .style-select{padding:10px}
  .styles-page .previews,
  .styles-page .style-list.fill .previews{width:124px;gap:5px}
  .styles-page .preview{border-radius:8px}
  .styles-page .row-title{align-items:center;flex-wrap:wrap}
  .styles-page .row-title strong,
  .styles-page .style-list.fill .row-title strong{font-size:15px}
  .styles-page .row-desc,
  .styles-page .style-list.fill .row-desc{font-size:11.5px;line-height:1.45}
  .styles-page .mobile-actions{gap:8px;padding:0 10px 10px}
  .styles-page .mobile-actions button,
  .styles-page .mobile-actions a{min-width:0;min-height:44px;padding:8px 5px;border-radius:9px;font-size:12px;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:anywhere}
  .styles-page .detail-footer{bottom:var(--mobile-nav-total-height);padding-bottom:9px}

  /* Pattern gallery */
  .gallery-page .wrap{padding:20px var(--mobile-gutter) 34px}
  .gallery-page .top{gap:10px;margin-bottom:6px;flex-wrap:nowrap}
  .gallery-page .logo{width:40px;height:40px}
  .gallery-page .top h1{min-width:0;font-size:26px;line-height:1.15;letter-spacing:0}
  .gallery-page .top a{min-height:40px!important;padding:7px 10px!important;border-radius:10px!important}
  .gallery-page .sub{margin:7px 0 14px;font-size:13px;line-height:1.55}
  .gallery-page .library-tools{gap:8px;margin-bottom:12px}
  .gallery-page .search-wrap input{height:44px;border-radius:12px;box-shadow:2px 2px 0 rgba(35,38,47,.12)}
  .gallery-page .result-summary{width:100%;text-align:left;font-size:12px}
  .gallery-page .cats{gap:8px;margin-bottom:14px;padding-bottom:5px}
  .gallery-page .cat{min-height:40px;padding:7px 13px;font-size:12.5px}
  .gallery-page .grid{gap:12px}
  .gallery-page .item{
    gap:2px;
    padding:9px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .gallery-page .item img.chart-thumb{height:136px;border-radius:8px}
  .gallery-page .item img.library-thumb{border-radius:8px}
  .gallery-page .item .badge{top:8px;left:8px;border-radius:6px;font-size:10px}
  .gallery-page .item .nm{min-height:38px;margin-top:8px;font-size:14px;line-height:1.35}
  .gallery-page .item .go{min-height:44px;margin-top:8px;display:flex;align-items:center;justify-content:center;border-radius:9px;padding:8px 3px;font-size:12.5px}
  .gallery-page .theme-nav{margin-top:26px;padding:15px 14px 13px;border-radius:var(--mobile-radius);box-shadow:var(--mobile-shadow)}
  .gallery-page .theme-nav .tn-links{gap:7px}
  .gallery-page .theme-nav .tn-links a{padding:7px 11px;font-size:12px}
  .gallery-page .seo-guide{margin-top:28px;padding-top:24px}
  .gallery-page .seo-guide h2{font-size:20px;line-height:1.35}
  .gallery-page .seo-guide p{font-size:13px;line-height:1.75}

  /* My */
  .my-page .wrap{max-width:600px;padding:20px var(--mobile-gutter) 34px}
  .my-page .hd{gap:10px;margin-bottom:8px}
  .my-page .hd img{width:40px;height:40px}
  .my-page .hd h1{font-size:26px;line-height:1.15;letter-spacing:0}
  .my-page .hd .sub{margin-top:3px;font-size:12.5px;line-height:1.45}
  .my-page .menu-link{
    gap:11px;
    margin-top:12px;
    padding:13px 14px;
    border-width:2px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .my-page .menu-link:first-of-type{margin-top:14px}
  .my-page .menu-link .mic{width:42px;height:42px;border-radius:10px}
  .my-page .menu-link .mtitle{font-size:16px;line-height:1.3}
  .my-page .menu-link .mdesc{font-size:12px;line-height:1.45}
  .my-page .menu-link .arrow{font-size:20px}
  .my-page .card{
    margin-top:14px;
    padding:14px;
    border-width:2px;
    border-radius:var(--mobile-radius);
    box-shadow:var(--mobile-shadow);
  }
  .my-page .ct{gap:8px;margin-bottom:10px;font-size:16px;line-height:1.35}
  .my-page .ct .ic{width:34px;height:34px;border-radius:9px}
  .my-page .btn{min-height:44px;border-radius:10px;padding:9px 14px}
  .my-page .btn.copy{min-width:44px;padding:7px 10px}
  .my-page .vrow{gap:8px;padding:10px 0}
  .my-page .vcode{font-size:16px;letter-spacing:0}
  .my-page .paste{margin-top:12px;padding-top:11px}
  .my-page input.oin{min-height:44px;border-radius:10px;padding:9px 11px;font-size:14px;letter-spacing:0}
  .my-page .foot{margin-top:18px;font-size:12px}
}

@media (max-width:370px){
  :root{--mobile-gutter:14px}
  .maker-page .brand,
  .styles-page .page-title h1,
  .gallery-page .top h1,
  .my-page .hd h1,
  .editor-page:not(.is-editor) .create-head h1{font-size:24px}
  .styles-page .previews,
  .styles-page .style-list.fill .previews{width:112px}
  .gallery-page .grid{gap:9px}
  .gallery-page .item{padding:8px 7px}
  .gallery-page .item img.chart-thumb{height:126px}
  .my-page .menu-link{padding:12px 11px}
  .my-page .menu-link .mcount{padding:4px 7px}
  .my-page .prow{gap:6px}
  .my-page .prow .btn{padding-inline:12px}
}