/* Shared responsive layer. Desktop (1025px+) retains the existing stylesheet. */
.mobile-bottom-nav, .profile-menu-mobile-only, .mobile-reference-hint { display: none; }

@media (max-width: 1024px) {
  .main-content, .page, .creation-form, .result-panel { min-width: 0; }
  .creation-layout.desktop-creation-layout,
  .creation-studio.desktop-creation-layout,
  .desktop-image-workspace, .home-columns, .avatar-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .desktop-image-workspace > *, .desktop-product-workspace > * { min-width: 0; }
  .desktop-image-result-panel { min-height: 240px; }
  .desktop-image-result-empty { min-height: 200px; }
  .creation-form .bailian-upload-composer { width: 100%; }
  .creation-studio .form-footer { flex-wrap: wrap; }
  .creation-studio .audio-drive-selected audio { max-width: 100%; }
  .desktop-product-input-grid, .desktop-product-summary, .desktop-product-plan-summary { grid-template-columns: minmax(0, 1fr); }
  .asset-grid, .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-wrap { max-width: 100%; overflow-x: auto; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-width: 76px; }
  .page, .desktop-image-page { padding: 24px 20px 40px; }
  .points-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; --mobile-nav-height: 64px; }
  body { -webkit-text-size-adjust: 100%; }
  body:before { inset: 60px 0 0; }
  body.mobile-overlay-open { overflow: hidden; }
  .layout, .image-view-shell .layout { display: block; min-height: calc(100dvh - 60px); }
  .sidebar.desktop-nav-sidebar { display: none; }
  .topbar, .image-view-shell .topbar {
    height: calc(60px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    gap: 8px;
  }
  .brand { gap: 6px; flex-shrink: 0; }
  .brand-logo-frame, .brand-logo { width: 32px; height: 32px; border-radius: 9px; }
  .brand strong { font-size: 15px; letter-spacing: 0; }
  .brand small, .top-link, .top-recharge, .profile-chevron { display: none; }
  .top-actions { min-width: 0; gap: 4px; font-size: 11px; }
  .points-shell { height: 32px; padding: 0 8px; min-width: 0; }
  .points-pill { gap: 3px; max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
  .points-pill .mini-icon { display: none; }
  .mobile-help-button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; color: #6151d8; font-size: 18px; }
  .profile-button { width: 44px; min-height: 44px; justify-content: center; }
  .profile-button span:not(.avatar) { display: none; }
  .avatar { width: 32px; height: 32px; }
  .profile-menu { max-width: calc(100vw - 24px); }
  .profile-menu button { min-height: 44px; }
  .profile-menu .profile-menu-mobile-only { display: block; }
  .login-button { min-height: 44px; padding: 0 8px; white-space: nowrap; }
  .mobile-bottom-nav {
    position: fixed; z-index: 20; inset: auto 0 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .98); border-top: 1px solid #e7e8f5;
    box-shadow: 0 -4px 20px #252e6410;
  }
  .mobile-bottom-nav button { min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; border: 0; border-radius: 10px; color: #8a91ac; background: transparent; font-size: 10px; }
  .mobile-bottom-nav button.active { color: #6451ed; background: #f5f2ff; font-weight: 700; }
  .mobile-bottom-nav svg { width: 24px; height: 24px; }
  .mobile-bottom-nav .desktop-nav-icon { display: block; width: 24px; height: 24px; }
  .mobile-bottom-nav .desktop-nav-home-icon { display: none; width: 24px; height: 24px; }
  .mobile-bottom-nav .desktop-nav-home-icon.visible { display: block; }
  .mobile-bottom-nav button:focus-visible { outline: 2px solid #8060ff; outline-offset: -2px; }
  .mobile-keyboard-open .mobile-bottom-nav, .mobile-overlay-open .mobile-bottom-nav { display: none; }
  .page, .desktop-image-page, .image-view-shell .page {
    padding: 18px 12px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
    min-height: calc(100dvh - 60px); width: 100%;
  }
  .page-heading, .desktop-image-header, .creation-studio-shell .page-heading { display: block; min-height: 0; margin-bottom: 16px; }
  .page-heading h1, .desktop-image-header h1, .creation-studio-shell .page-heading h1 { font-size: 27px; line-height: 1.3; }
  .page-heading p { line-height: 1.7; }
  .page-heading .charge-hint { display: inline-block; margin-top: 8px; white-space: normal; }
  .panel, .creation-studio .creation-form, .creation-studio .studio-result-panel { padding: 16px; border-radius: 14px; }
  .hero-banner { min-height: 168px; padding: 20px 16px; overflow: hidden; }
  .hero-copy h1 { font-size: 25px; }
  .hero-copy p:not(.eyebrow) { font-size: 12px; max-width: 230px; }
  .hero-decoration { width: 42%; opacity: .55; }
  .primary-feature-grid, .home-columns, .video-entry-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feature-card { min-height: 150px; }
  .feature-card h2 { font-size: 21px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-card { min-width: 0; padding: 12px 10px; }
  .quick-copy { min-width: 0; }
  .quick-copy strong { font-size: 13px; }
  .task-tabs { gap: 10px; flex-wrap: wrap; }
  .task-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; }
  .task-duration, .task-row .task-progress { display: none; }
  .task-copy, .task-row > div, .studio-task-copy { min-width: 0; }
  .task-copy strong, .studio-task-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .creation-studio .field-label-row { flex-wrap: wrap; gap: 6px; }
  .creation-studio .field-label-row label { font-size: 16px; }
  .asset-selector-links { flex-wrap: wrap; }
  .asset-selector-links button { min-height: 44px; }
  .creation-studio .asset-choice-row, .creation-studio .voice-asset-choice-grid { grid-template-columns: repeat(2, minmax(0, 112px)); gap: 10px; }
  .creation-studio .asset-choice-preview-button { width: 44px; height: 44px; background: #ffffffcc; }
  .creation-studio .asset-choice-card-voice .asset-choice-preview-button { width: 44px; height: 44px; left: 2px; bottom: 26px; }
  .creation-studio .audio-source-options, .motion-media-fields, .video-flow-steps, .avatar-requirements { grid-template-columns: minmax(0, 1fr); }
  .creation-studio .audio-source-card { min-height: 110px; }
  .audio-creation-studio .asset-picker-stack, .audio-creation-studio .audio-drive-upload { padding: 16px !important; }
  .creation-studio .audio-drive-upload .field-label-row > span { white-space: normal; }
  .creation-studio .audio-drive-selected { min-width: 0; flex-wrap: wrap; }
  .creation-studio .audio-drive-selected audio { width: 100%; }
  .audio-drive-selected > *, .media-upload-footer > div { min-width: 0; overflow-wrap: anywhere; }
  .creation-studio .form-footer, .form-footer { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
  .studio-current-points { width: 100%; margin-right: 0; }
  .studio-footer-metric { min-width: 66px; padding: 0 7px; }
  .studio-voice-control { margin-right: auto; }
  .voice-options-trigger { min-height: 44px; padding: 0 10px; }
  .voice-options-trigger span { display: none; }
  .studio-capability-notice-inline { order: 0; width: 100%; max-width: none; }
  .creation-studio .form-footer .primary-button, .form-footer > .primary-button { flex: 1 0 100%; min-height: 46px; width: 100%; }
  .studio-result-empty { min-height: 200px; }
  .studio-current-result { min-height: 0; padding: 20px 0; }
  .studio-result-placeholder { margin-bottom: 12px; }
  .creation-form .bailian-upload-composer { margin: 14px 0; padding: 12px; border-radius: 18px; }
  .creation-form .bailian-reference-editor { min-height: 72px; }
  .creation-form .bailian-composer-toolbar { gap: 6px; }
  .creation-form .bailian-parameters summary, .creation-form .bailian-audio-note { min-height: 44px; display: flex; align-items: center; padding: 7px; }
  .creation-form .bailian-upload-help { margin-left: 0; padding: 7px 9px; }
  .creation-form .bailian-submit { width: 44px; height: 44px; margin-left: auto; }
  .creation-form .bailian-media-list { flex-wrap: wrap; }
  .creation-form .bailian-remove-media { width: 30px; height: 30px; }
  .creation-form .bailian-media-help { display: none !important; }
  .mobile-reference-hint { display: block; margin: 10px 0 0; color: #8a96b2; font-size: 11px; line-height: 1.6; }
  .creation-form .bailian-mentions { max-width: calc(100vw - 56px); max-height: min(200px, calc(var(--mobile-viewport-height, 100dvh) - 180px)); }
  .creation-form .bailian-mentions button { min-height: 44px; }
  .video-entry-grid { max-width: none; }
  .video-entry-card { display: block; }
  .video-entry-art { max-height: 360px; aspect-ratio: auto; }
  .video-flow-steps > i { display: none; }
  .media-upload-grid { grid-template-columns: minmax(0, 1fr); }
  .media-upload-card, .media-upload-selected { min-width: 0; }
  .media-upload-footer strong, .media-upload-footer small { overflow-wrap: anywhere; }
  .desktop-image-header .image-charge-hint { display: none; }
  .desktop-image-mode-tabs { overflow-x: auto; }
  .desktop-image-mode-tabs button { flex-shrink: 0; min-width: 128px; }
  .desktop-image-reference-board, .desktop-image-prompt-card, .desktop-image-edit-options, .desktop-image-style-card, .desktop-image-ratio-options { padding: 14px; }
  .desktop-image-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desktop-image-style-grid, .desktop-image-edit-grid, .desktop-product-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-image-form-footer { flex-direction: column; align-items: stretch; }
  .desktop-image-form-footer .primary-button { width: 100%; min-height: 46px; }
  .desktop-image-task-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; }
  .desktop-image-task-thumb { width: 40px; height: 40px; }
  .desktop-image-task-row > small, .desktop-image-task-progress, .desktop-image-task-check { display: none; }
  .desktop-image-inspiration { grid-template-columns: minmax(0, 1fr); }
  .desktop-image-inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-image-inspiration-next { display: none; }
  .desktop-product-flow { overflow-x: auto; display: flex; gap: 16px; }
  .desktop-product-flow > * { flex: 0 0 auto; }
  .desktop-product-image-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desktop-product-choice-row, .desktop-product-settings, .desktop-product-revision { grid-template-columns: minmax(0, 1fr); }
  .desktop-product-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-product-pages article { grid-template-columns: minmax(0, 1fr); }
  .desktop-product-output-row small { width: 100%; margin-left: 0; }
  .points-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .points-guide-hero { padding: 24px 18px; }
  .points-guide-hero h1 { font-size: 27px; }
  .points-guide-card-header { min-height: 0; }
  .asset-grid, .work-grid { gap: 10px; }
  .asset-card, .work-card { min-width: 0; }
  .asset-card h3, .work-card h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asset-media-action, .asset-media-play { width: 44px; height: 44px; }
  .asset-use-button, .work-preview-button, .work-download-button { min-height: 44px; }
  .creation-asset-picker-item { min-width: 0; }
  .creation-asset-picker-item strong { display: block; overflow-wrap: anywhere; }
  video, audio { max-width: 100%; }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea,
  .creation-studio .field-label textarea, .creation-form .bailian-reference-editor,
  .desktop-product-selling-point textarea { font-size: 16px !important; }
  .primary-button, .ghost-button, .auth-tabs button, .image-creation-control button { min-height: 44px; }
  .table-wrap { margin: 0; }
  .modal-backdrop {
    top: var(--mobile-viewport-top, 0px); bottom: auto;
    height: var(--mobile-viewport-height, 100dvh); padding: 12px;
    align-items: end; overflow: hidden;
  }
  .modal-backdrop > section, .modal-backdrop > article {
    width: 100%; min-width: 0; max-width: 100%; margin: 0;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 16px 16px max(20px, env(safe-area-inset-bottom, 0px)); border-radius: 18px;
  }
  .modal-close { position: sticky; top: 0; right: auto; margin-left: auto; display: block; width: 44px; height: 44px; z-index: 3; background: #fff; border-radius: 50%; }
  .info-modal-heading, .tutorial-support, .settings-overview-grid, .settings-actions, .tutorial-group-title { display: block; }
  .tutorial-support-qr { max-width: 100%; }
  .tutorial-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .creation-asset-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-picker-tabs button { min-height: 44px; }
  .voice-options-popover, .creation-form .bailian-parameter-popover,
  .creation-form .bailian-parameters[data-placement=below] .bailian-parameter-popover {
    position: fixed; z-index: 63; left: 12px; right: 12px; top: auto;
    bottom: calc(100dvh - var(--mobile-viewport-height, 100dvh) - var(--mobile-viewport-top, 0px) + max(12px, env(safe-area-inset-bottom, 0px)));
    width: auto; max-width: none; max-height: calc(var(--mobile-viewport-height, 100dvh) - 84px);
    padding: 18px; border-radius: 18px; overflow-y: auto; overscroll-behavior: contain;
  }
  .creation-form .bailian-parameters[open] { z-index: 61; }
  .voice-options-dismiss { background: #1a275559; backdrop-filter: blur(3px); }
  .toast-error { max-width: calc(100vw - 24px); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px); overflow-wrap: anywhere; }
}