/* Mobile gallery v1.0.0: presentation only; desktop starts at 768px. */
.mobile-template-tools, .mobile-template-use-label { display: none; }

@media (max-width: 767px) {
  html[data-theme="dark"] .mobile-template-page {
    --mobile-template-button-ink: #172033;
  }
  .mobile-template-page { background: var(--page); color: var(--ink); }
  .mobile-template-page .dashboard-shell {
    width: 100%; min-width: 0; padding: 26px 16px 32px;
  }
  .mobile-template-page .dashboard-shell > .eyebrow {
    margin-bottom: 9px; font-size: .67rem; letter-spacing: .1em;
  }
  .mobile-template-page .dashboard-shell > h1 {
    font-size: 1.85rem; line-height: 1.16; letter-spacing: -.045em;
    margin: 0 0 12px; overflow-wrap: anywhere;
  }
  .mobile-template-page .dashboard-shell > h1 + p {
    font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0;
  }
  .mobile-template-page .template-format-section { display: none; }
  .mobile-template-page .template-gallery-section {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px; border-top: 0; padding-top: 0; margin-top: 26px;
    min-width: 0; scroll-margin-top: 18px;
  }
  .mobile-template-page .template-gallery-section > h2 {
    grid-column: 1 / -1; margin-bottom: 18px; font-size: 1.1rem;
  }
  .mobile-template-page .template-gallery-section > .field {
    min-width: 0; max-width: 100%; margin: 0 0 18px;
  }
  .mobile-template-page .template-gallery-section > .field label {
    font-size: .75rem; color: var(--muted); margin-bottom: 7px;
  }
  .mobile-template-page .template-gallery-section > .field select {
    width: 100%; max-width: 100%; min-width: 0; min-height: 48px;
    padding: 10px 8px; border-radius: 12px; font-size: 16px;
    color: var(--ink); background: var(--raised); border-color: var(--line);
  }
  .mobile-template-page .mobile-template-tools {
    display: block; grid-column: 1 / -1; min-width: 0; margin-bottom: 12px;
  }
  .mobile-template-page .mobile-template-filters {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px; padding: 5px; border-radius: 15px; background: var(--panel);
  }
  .mobile-template-page .mobile-template-filters button {
    min-width: 0; min-height: 44px; border: 1px solid transparent;
    border-radius: 11px; background: transparent; color: var(--muted);
    padding: 8px 5px; font: inherit; font-size: .8rem; font-weight: 650;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-template-page .mobile-template-filters button[aria-pressed="true"] {
    background: var(--primary, #4f46e5); color: var(--mobile-template-button-ink, #fff);
    box-shadow: 0 2px 6px #16133b18;
  }
  .mobile-template-page .mobile-template-filters button:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px;
  }
  .mobile-template-page .mobile-template-help {
    color: var(--muted); font-size: .72rem; line-height: 1.55; margin: 10px 2px 0;
  }
  .mobile-template-page .mobile-template-result {
    color: var(--ink); font-size: .8rem; line-height: 1.5; margin: 10px 2px 0;
  }
  .mobile-template-page #template-status {
    grid-column: 1 / -1; color: var(--muted); line-height: 1.5;
    font-size: .75rem; margin: 0 0 16px; overflow-wrap: anywhere;
  }
  .mobile-template-page #template-catalog {
    grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; min-width: 0; margin: 0;
  }
  .mobile-template-page #template-catalog .catalog-card {
    gap: 9px; min-width: 0; padding: 10px; border-radius: 16px;
    border-color: var(--line); background: var(--raised); color: var(--ink);
  }
  .mobile-template-page #template-catalog .mobile-template-excluded { display: none; }
  .mobile-template-page #template-catalog .catalog-preview {
    width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 5;
    padding: 5px; margin: 0; border-radius: 10px;
    border-color: var(--line); background: var(--panel);
  }
  .mobile-template-page #template-catalog .ready-preview { padding: 0; }
  .mobile-template-page #template-catalog .catalog-preview :is(canvas, img) {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px;
  }
  .mobile-template-page #template-catalog .ready-preview img {
    width: 100%; height: 100%; border-radius: 9px;
  }
  .mobile-template-page #template-catalog .catalog-card h2 {
    font-size: .95rem; line-height: 1.35; margin: 0;
    letter-spacing: -.025em; overflow-wrap: anywhere;
  }
  .mobile-template-page #template-catalog .catalog-card p {
    font-size: .72rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere;
  }
  .mobile-template-page #template-catalog .catalog-card .preset-description {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-template-page #template-catalog .ready-badge {
    margin: 0; font-size: .55rem; padding: 4px 6px; letter-spacing: .035em;
  }
  .mobile-template-page #template-catalog .preset-preview-switcher {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px; margin: 0;
  }
  .mobile-template-page #template-catalog .preset-preview-switcher button {
    min-width: 0; min-height: 44px; padding: 6px 2px; font-size: .66rem;
  }
  .mobile-template-page #template-catalog .catalog-card > .button {
    min-width: 0; min-height: 44px; width: 100%; padding: 10px 7px;
    font-size: .8rem; margin-top: auto; border-radius: 10px;
    color: var(--mobile-template-button-ink, #fff); background: var(--primary, #4f46e5);
  }
  .mobile-template-page .mobile-template-original-label { display: none; }
  .mobile-template-page .mobile-template-use-label { display: inline; }
}