/* Mobile presentation; the desktop workspace keeps its existing styles. */
.mobile-app-header, .mobile-app-nav, .mobile-home-intro, .mobile-motion-entry, .mobile-section-title { display: none; }
.mobile-app-nav[hidden] { display: none; }

@media (max-width: 800px) {
  :root {
    --mobile-canvas: #f6f7fb;
    --mobile-surface: #fff;
    --mobile-ink: #172337;
    --mobile-muted: #657187;
    --mobile-line: #e7ebf3;
    --mobile-primary: #234cea;
    --mobile-soft: #edf1ff;
    --mobile-nav-height: calc(74px + env(safe-area-inset-bottom));
  }
  html { scroll-padding-top: 88px; }
  body.mobile-app-ready {
    --canvas: var(--mobile-canvas);
    --surface: var(--mobile-surface);
    --ink: var(--mobile-ink);
    --muted: var(--mobile-muted);
    --line: var(--mobile-line);
    --soft: var(--mobile-soft);
    --primary: var(--mobile-primary);
    min-width: 320px;
    min-height: 100dvh;
    background: var(--mobile-canvas);
    color: var(--mobile-ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
  }
  .mobile-app-ready *, .mobile-app-ready *::before, .mobile-app-ready *::after { box-sizing: border-box; }
  .mobile-app-ready img, .mobile-app-ready video { max-width: 100%; }
  .mobile-app-ready button, .mobile-app-ready a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .mobile-app-ready input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .mobile-app-ready select, .mobile-app-ready textarea { font-size: 16px; max-width: 100%; }
  .mobile-app-ready button:not([hidden]), .mobile-app-ready summary { min-height: 44px; }
  .mobile-app-ready a:focus-visible, .mobile-app-ready button:focus-visible,
  .mobile-app-ready summary:focus-visible { outline: 3px solid var(--mobile-primary); outline-offset: 3px; }
  .mobile-app-ready h1 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.7px; }
  .mobile-app-ready h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.3px; }
  .mobile-app-ready h3 { font-size: 16px; line-height: 1.5; }
  body.mobile-app-ready .page-shell, body.mobile-app-ready .dashboard-shell {
    width: 100%; max-width: 600px; margin: 0 auto;
    padding: 20px 20px calc(var(--mobile-nav-height) + 28px);
  }
  body.mobile-app-ready .topbar,
  body.mobile-app-ready.site-sidebar-ready:not(.home-page) .topbar {
    top: 0; z-index: 40; display: block; min-height: 76px; width: 100%;
    padding: max(12px, env(safe-area-inset-top)) 20px 12px;
    border: 0; background: var(--mobile-canvas); box-shadow: none; flex-wrap: nowrap;
  }
  body.mobile-app-ready .topbar > :not(.mobile-app-header),
  body.mobile-app-ready.site-sidebar-ready .topbar > :not(.mobile-app-header) { display: none; }
  .mobile-app-ready .mobile-app-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; width: 100%; }
  .mobile-app-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 24px; font-weight: 700; letter-spacing: -1px; color: var(--mobile-ink); text-decoration: none; }
  .mobile-app-brand img { width: 32px; height: 32px; border-radius: 9px; }
  .mobile-app-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px; border: 0; border-radius: 14px; background: white; color: var(--mobile-ink); text-decoration: none; }
  .mobile-app-icon svg, .mobile-app-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-app-page-title { min-width: 0; font-size: 16px; font-weight: 700; text-align: center; line-height: 1.4; }
  .mobile-app-header-actions { display: flex; align-items: center; gap: 8px; }
  body.mobile-app-ready .mobile-app-avatar { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--mobile-primary); color: white; font-weight: 700; font-size: 14px; text-decoration: none; }
  .mobile-app-signin { font-size: 12px; }
  .mobile-app-menu { position: relative; }
  .mobile-app-menu summary { cursor: pointer; list-style: none; }
  .mobile-app-menu summary::-webkit-details-marker { display: none; }
  .mobile-app-menu-panel { position: absolute; right: 0; top: 52px; width: min(260px, calc(100vw - 40px)); padding: 8px; border: 1px solid var(--mobile-line); border-radius: 20px; background: white; box-shadow: 0 12px 40px #253c7726; }
  .mobile-app-menu-panel a, .mobile-app-menu-panel > button { display: flex; align-items: center; width: 100%; min-height: 48px; gap: 12px; padding: 8px 12px; border: 0; background: none; color: var(--mobile-ink); text-decoration: none; border-radius: 12px; text-align: left; font: inherit; }
  .mobile-app-menu-panel [hidden] { display: none; }
  .mobile-app-menu-panel a:hover { background: var(--mobile-soft); }
  .mobile-app-menu-panel img { width: 22px; height: 22px; }
  .mobile-app-languages { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--mobile-line); margin: 8px 4px 0; padding: 8px; }
  .mobile-app-languages > span { color: var(--mobile-muted); font-size: 12px; }
  .mobile-app-languages button { min-width: 44px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--mobile-soft); color: var(--mobile-muted); }
  .mobile-app-languages button[aria-pressed="true"] { background: var(--mobile-primary); color: white; }
  .mobile-app-ready .mobile-app-nav { position: fixed; z-index: 70; inset: auto 0 0; display: flex; align-items: center; justify-content: space-around; min-height: var(--mobile-nav-height); padding: 8px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--mobile-line); background: #fffffff5; backdrop-filter: blur(16px); }
  .mobile-app-ready .mobile-app-nav[hidden] { display: none; }
  .mobile-app-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 84px; min-height: 48px; color: var(--mobile-muted); text-decoration: none; font-size: 12px; }
  .mobile-app-nav-icon { display: flex; padding: 3px 16px; border-radius: 16px; }
  .mobile-app-nav a[aria-current="page"] { color: var(--mobile-primary); font-weight: 700; }
  .mobile-app-nav a[aria-current="page"] .mobile-app-nav-icon { background: var(--mobile-soft); }
  .mobile-app-ready .history-toggle { display: none; }
  .mobile-app-ready .history-drawer { width: 100%; height: calc(100dvh - var(--mobile-nav-height)); inset: 0 0 auto; border: 0; box-shadow: none; background: var(--mobile-canvas); }
  .mobile-app-ready.history-open { overflow: hidden; }
  .mobile-app-ready .history-drawer-head { padding: max(16px, env(safe-area-inset-top)) 20px 16px; border: 0; background: var(--mobile-canvas); }
  .mobile-app-ready .history-drawer-head h2 { font-size: 24px; }
  .mobile-app-ready .history-drawer-head button { border: 0; border-radius: 14px; background: white; }
  .mobile-app-ready .history-drawer-body { padding: 4px 20px 24px; scrollbar-gutter: auto; }
  .mobile-app-ready .history-drawer-note { padding: 0 4px; font-size: 12px; line-height: 1.7; }
  .mobile-app-ready .history-drawer .history-record { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--mobile-line); border-radius: 20px; overflow: hidden; }
  .mobile-app-ready .history-summary { display: contents; }
  .mobile-app-ready .history-summary > .history-heading { order: 0; }
  .mobile-app-ready .history-summary > :not(.history-heading) { order: 2; }
  .mobile-app-ready .history-results { order: 1; display: flex; gap: 12px; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .mobile-app-ready .history-result { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
  .mobile-app-ready .history-preview { order: -1; margin: 0; }
  .mobile-app-ready .history-preview img, .mobile-app-ready .history-preview video { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 14px; background: var(--mobile-soft); }
  .mobile-app-ready .history-online-download { font-size: 12px; overflow-wrap: anywhere; }
  .mobile-app-ready .history-record .record-meta { font-size: 12px; line-height: 1.7; }
  .mobile-app-ready .record-actions { flex-wrap: wrap; gap: 8px; }
  .mobile-app-ready .dashboard-button, .mobile-app-ready .action-chip, .mobile-app-ready .download-button { border-radius: 14px; min-height: 44px; padding: 10px 16px; white-space: normal; text-align: center; }
  .mobile-app-ready .dashboard-button:not(.secondary), .mobile-app-ready .generate-button { box-shadow: 0 5px 16px #234cea1c; }
  .mobile-app-ready .status-chip, .mobile-app-ready .status-pill { border-radius: 10px; font-size: 12px; white-space: normal; line-height: 1.5; padding: 6px 10px; }
  .mobile-app-ready .dashboard-message, .mobile-app-ready .record { border-radius: 16px; }
  .mobile-app-ready .record-meta, .mobile-app-ready .job-receipt p { overflow-wrap: anywhere; }
  .mobile-app-ready .home-mobile-nav, .mobile-app-ready .home-bottom-strip { display: none; }
  .mobile-app-ready.home-page:not(.pricing-page) .home-hero { display: none; }
  .mobile-app-ready .mobile-home-intro { display: block; margin: 0 0 20px; }
  .mobile-home-intro h1 { margin: 0 0 6px; font-size: 28px; }
  .mobile-home-intro p { margin: 0; color: var(--mobile-muted); }
  .mobile-app-ready .mobile-motion-entry { position: relative; display: block; min-height: 176px; margin: 0 0 24px; border-radius: 24px; overflow: hidden; background: #191527; color: white; text-decoration: none; }
  .mobile-motion-entry > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
  .mobile-motion-entry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #161123b8, transparent 95%); }
  .mobile-motion-copy { position: relative; z-index: 1; display: block; padding: 20px; }
  .mobile-motion-copy small { font-size: 12px; letter-spacing: .5px; }
  .mobile-motion-copy strong { display: block; margin: 8px 0 12px; font-size: 24px; line-height: 1.4; }
  .mobile-motion-copy > span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #ffffff40; border-radius: 20px; background: #ffffff20; font-size: 12px; }
  .mobile-motion-entry .mobile-play { position: absolute; z-index: 1; right: 20px; bottom: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffe85c; color: #172337; }
  .mobile-play svg { width: 16px; height: 16px; fill: currentColor; }
  .mobile-app-ready.home-page:not(.pricing-page) .home-section-head { display: none; }
  .mobile-app-ready .mobile-section-title { display: block; margin: 0 0 12px; font-size: 16px; }
  body.mobile-app-ready.home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.mobile-app-ready.home-page .tool-entry { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--mobile-line); border-radius: 18px; box-shadow: 0 4px 16px #273b7405; }
  body.mobile-app-ready.home-page .tool-entry .tool-cover { width: 100%; height: 94px; min-height: 94px; aspect-ratio: auto; }
  body.mobile-app-ready.home-page .tool-cover img { object-position: center 35%; }
  body.mobile-app-ready.home-page .tool-copy { padding: 10px 12px 12px; }
  body.mobile-app-ready.home-page .tool-entry h3 { margin: 0; font-size: 16px; }
  body.mobile-app-ready.home-page .tool-entry p { min-height: 0; margin: 4px 0 0; font-size: 12px; line-height: 1.6; }
  .mobile-app-ready .home-tool-id, .mobile-app-ready .tool-entry .tool-type, .mobile-app-ready .tool-entry .open-tool { display: none; }
  body.mobile-app-ready.home-page .tool-entry.mobile-motion-tool { display: none; }
  body.mobile-app-ready.home-page .tool-entry.mobile-download-tool { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 76px; padding: 12px; }
  body.mobile-app-ready.home-page .mobile-download-tool .tool-cover { width: 48px; height: 48px; min-height: 48px; flex: 0 0 48px; border-radius: 12px; }
  body.mobile-app-ready.home-page .mobile-download-tool .tool-copy { min-width: 0; padding: 0; }
  .mobile-app-ready .home-foot { border: 0; padding: 16px 0; margin: 0; background: none; border-radius: 0; font-size: 12px; line-height: 1.7; }
  body.mobile-app-ready.pricing-page .home-pricing { margin: 0; padding: 0; }
  body.mobile-app-ready.pricing-page .home-section-head { margin: 0 0 24px; }
  body.mobile-app-ready.pricing-page .home-section-head h1 { margin: 0; font-size: 28px; }
  body.mobile-app-ready.pricing-page .pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.mobile-app-ready.pricing-page .pricing-card { padding: 24px 20px; border-color: var(--mobile-line); border-radius: 24px; box-shadow: 0 6px 24px #243c6f04; }
  body.mobile-app-ready.pricing-page .pricing-card h3 { font-family: inherit; font-size: 20px; }
  .mobile-app-ready.pricing-page .pricing-card dl > div { padding: 16px 0; border-color: var(--mobile-line); }
  .mobile-app-ready.pricing-page .pricing-card dt, .mobile-app-ready.pricing-page .pricing-card dd { font-size: 16px; }
  .mobile-app-ready .tool-page-head { display: block; margin: 0 0 20px; }
  .mobile-app-ready .tool-page-head .eyebrow { display: none; }
  .mobile-app-ready .tool-page-head h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.3; }
  .mobile-app-ready .tool-page-head > p { font-size: 14px; line-height: 1.7; }
  .mobile-app-ready .tool-switcher { display: none; }
  .mobile-app-ready .workbench { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow: visible; border: 0; background: none; border-radius: 0; }
  .mobile-app-ready .input-panel { border: 1px solid var(--mobile-line); border-radius: 24px; background: white; overflow: visible; }
  .mobile-app-ready .panel-head { padding: 20px 20px 0; border: 0; }
  .mobile-app-ready[data-tool]:not([data-tool="video-download"]) .panel-head { display: none; }
  .mobile-app-ready .panel-head .panel-kicker, .mobile-app-ready .panel-head h2 { display: none; }
  .mobile-app-ready .panel-head p { font-size: 12px; color: var(--mobile-muted); }
  .mobile-app-ready .form-scroll { padding: 20px; }
  .mobile-app-ready .field + .field { margin-top: 24px; }
  .mobile-app-ready .field-heading { gap: 8px; margin-bottom: 12px; }
  .mobile-app-ready .field-label { font-family: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; }
  .mobile-app-ready .field-hint { font-size: 12px; }
  .mobile-app-ready .upload-zone { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 180px; padding: 20px; border-color: #aabcf5; border-radius: 16px; background: #f5f7ff; text-align: center; }
  .mobile-app-ready .upload-visual { width: 52px; height: 52px; border-radius: 16px; background: #e5ebff; color: var(--mobile-primary); }
  .mobile-app-ready .upload-visual svg { width: 28px; height: 28px; }
  .mobile-app-ready .upload-copy { width: 100%; min-width: 0; }
  .mobile-app-ready .upload-title { font-size: 16px; }
  .mobile-app-ready .upload-help { font-size: 12px; margin-top: 4px; line-height: 1.5; }
  .mobile-app-ready .upload-paste-hint { display: none; }
  .mobile-app-ready .upload-action { display: none; }
  .mobile-app-ready .upload-zone.has-file .upload-visual { position: relative; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
  .mobile-app-ready .upload-zone.has-file .upload-visual img, .mobile-app-ready .upload-zone.has-file .upload-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .mobile-app-ready .select, .mobile-app-ready .textarea, .mobile-app-ready .text-input { border-radius: 14px; border-color: var(--mobile-line); background: #fafbfe; }
  .mobile-app-ready .textarea { min-height: 104px; padding: 12px 14px; }
  .mobile-app-ready .toggle-row, .mobile-app-ready .fixed-note { border-radius: 14px; gap: 12px; overflow-wrap: anywhere; }
  .mobile-app-ready .toggle { min-height: 44px; }
  .mobile-app-ready .toggle-track { top: 7px; bottom: 7px; }
  .mobile-app-ready .form-action { position: fixed; z-index: 42; inset: auto 0 0; padding: 14px 20px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--mobile-line); background: white; }
  .mobile-app-ready[data-tool]:not([data-tool="video-download"]) .page-shell { padding-bottom: 220px; }
  .mobile-app-ready .cost-note { gap: 12px; font-size: 12px; line-height: 1.5; margin-bottom: 10px; flex-wrap: wrap; }
  .mobile-app-ready .generate-button { min-height: 52px; padding: 12px 16px; border-radius: 16px; font-size: 16px; }
  .mobile-app-ready .generate-button:disabled { background: #849bef; color: white; }
  .mobile-app-ready .estimate-note { font-size: 12px; line-height: 1.6; text-align: left; margin-top: 8px; max-height: 96px; overflow-y: auto; }
  .mobile-app-ready .result-panel { border: 1px solid var(--mobile-line); border-radius: 24px; overflow: hidden; }
  .mobile-app-ready .result-head { gap: 8px; padding: 20px; border-bottom: 1px solid var(--mobile-line); }
  .mobile-app-ready .result-title-wrap { gap: 12px; flex-wrap: wrap; }
  .mobile-app-ready .result-stage { min-height: 0; padding: 20px; }
  .mobile-app-ready .job-receipt { width: 100%; border: 0; border-radius: 16px; background: var(--mobile-soft); padding: 20px; }
  .mobile-app-ready .job-receipt h3 { font-size: 20px; }
  .mobile-app-ready .job-receipt p { font-size: 12px; line-height: 1.8; }
  .mobile-app-ready .job-receipt-actions { gap: 8px; }
  .mobile-app-ready .result-actions { padding: 16px 20px; }
  .mobile-app-ready .next-actions { flex-wrap: wrap; }
  .mobile-app-ready[data-tool]:not([data-tool="video-download"]):not(.mobile-tool-receipt) .result-panel { display: none; }
  .mobile-app-ready .prototype-note { flex-direction: column; align-items: flex-start; gap: 8px; border: 0; padding: 16px 0; background: none; font-size: 12px; }
  .mobile-app-ready .toast { right: 20px; left: 20px; bottom: 160px; width: auto; max-width: none; border-radius: 16px; }
  .mobile-app-ready.mobile-keyboard-open .form-action { position: static; border-radius: 0 0 24px 24px; }
  .mobile-app-ready.mobile-keyboard-open .mobile-app-nav { display: none; }
}

@media (max-width: 350px) {
  body.mobile-app-ready .page-shell, body.mobile-app-ready .dashboard-shell { padding-right: 16px; padding-left: 16px; }
  body.mobile-app-ready .topbar { padding-right: 16px; padding-left: 16px; }
  .mobile-app-ready .form-scroll, .mobile-app-ready .panel-head { padding-right: 16px; padding-left: 16px; }
  body.mobile-app-ready.home-page .tool-copy { padding: 10px; }
  .mobile-app-ready .mobile-app-brand { font-size: 22px; }
}
@media (max-width: 800px) and (pointer: coarse) {
  .mobile-app-ready .upload-paste-hint { display: none; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .mobile-app-ready *, .mobile-app-ready *::before, .mobile-app-ready *::after { scroll-behavior: auto; transition: none; }
}