.mobile-navigation, .mobile-plan-actions, .mobile-command-icon { display: none; }

@media (max-width: 980px), (max-width: 1024px) and (max-height: 500px) {
  html, body { height: 100%; overflow: hidden; }
  button, a, input, select { -webkit-tap-highlight-color: transparent; }
  input, select, textarea { font-size: 16px; }
  .auth-gate { height: var(--mobile-height, 100dvh); }
  .auth-stage { --art-width: min(100vw, calc(var(--mobile-height, 100dvh) * 941 / 1672)); --art-top: calc((var(--mobile-height, 100dvh) - var(--art-height)) / 2); }
  .auth-card { max-height: calc(100% - var(--card-top) - max(16px, env(safe-area-inset-bottom))); overscroll-behavior: contain; scroll-padding-block: 18px; }
  .auth-card .auth-mode-tabs button,
  .auth-card .auth-submit,
  .auth-card .auth-code-send,
  .auth-card .auth-form input,
  .auth-card .auth-form:not(#loginForm) input,
  .auth-card .auth-form:not(#loginForm) button { min-height: 44px; }
  .auth-card .auth-form input { font-size: 16px; }
  .auth-motion-switch { min-height: 36px; }
  body[data-mobile-keyboard] .auth-card { top: 12px; max-height: calc(100% - 24px); }
  body[data-mobile-keyboard] .auth-card .auth-signature { display: none; }
  .app-shell, .app-shell.app-mode-cutting { display: flex; flex-direction: column; height: var(--mobile-height, 100dvh); min-height: 0; overflow: hidden; padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .app-shell .side-panel { flex: 1; min-height: 0; max-height: none; width: 100%; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px; border: 0; scroll-padding-block: 20px 80px; }
  .app-shell .main-stage { flex: 1; min-height: 0; width: 100%; height: 100%; padding: 8px; overflow: hidden; }
  .app-shell .workspace, .app-shell.app-mode-cutting .workspace { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0; overflow: hidden; }
  .app-shell[data-mobile-view="input"] .main-stage { display: none; }
  .app-shell:not([data-mobile-view="input"]) .side-panel { display: none; }
  .app-shell[data-mobile-view="results"] .scene-host { display: none; }
  .app-shell[data-mobile-view="scene"] .result-panel { display: none; }
  .app-shell .scene-host { width: 100%; height: 100%; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
  .app-shell .result-panel { flex: 1; min-height: 0; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px; scroll-padding-block: 16px; }
  .mobile-navigation { position: fixed; z-index: 60; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; height: calc(58px + env(safe-area-inset-bottom)); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #d6dfd9; background: #fafffc; }
  .mobile-navigation button { min-width: 0; border: 0; border-radius: 6px; background: transparent; color: #64756b; font-size: 14px; font-weight: 650; cursor: pointer; }
  .mobile-navigation button[aria-selected="true"] { background: #e3f2e9; color: #227047; box-shadow: inset 0 2px #388b5b; }
  .mobile-navigation button:focus-visible { outline: 2px solid #338555; outline-offset: -2px; }
  .side-panel .mini-button, .side-panel .secondary-button, .side-panel .primary-button, .side-panel .floating-action, .side-panel select, .side-panel input, .side-panel #logoutButton { min-height: 44px; }
  .side-panel input, .side-panel select { font-size: 16px; }
  .side-panel .grid-2 { gap: 10px; }
  .side-panel .floating-actions { flex: 0 0 auto; bottom: -12px; padding: 10px 0 12px; background: #f8faf8; }
  .side-panel .product-row { padding: 12px; }
  .side-panel .product-row-head { gap: 8px; }
  .side-panel .mode-segment-button { min-height: 40px; }
  .side-panel .board-candidate-actions { flex-wrap: wrap; }
  .result-panel button, .result-panel select { min-height: 44px; }
  .result-panel .card { min-width: 0; }
  .result-panel .board-plan-switcher { position: sticky; top: -12px; z-index: 2; background: #f7faf8; padding-block: 10px; }
  .scene-view-controls { top: 8px; left: 8px; width: 140px; padding: 0; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; }
  .scene-projection-controls { min-width: 0; gap: 4px; }
  .scene-projection-button { height: 36px; padding: 0; }
  .scene-view-reset { position: static; width: 36px; height: 36px; border-radius: 6px; }
  .scene-view-picker { grid-column: 1; min-height: 80px; }
  .view-cube-canvas { width: 80px; height: 80px; }
  .mobile-plan-actions { position: absolute; z-index: 10; inset: auto 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-plan-actions button { min-width: 0; height: 44px; border: 1px solid #d6dfd9; border-radius: 6px; background: #fff; color: #397a55; font-size: 14px; font-weight: 650; }
  .mobile-plan-actions .mobile-confirm-plan { color: #fff; background: #2f8b57; border-color: #2f8b57; }
  .mobile-plan-actions button:disabled { opacity: .45; }
  .app-mode-cutting .mobile-plan-actions { display: none; }
  .app-shell .scene-step-controls { top: auto; bottom: 8px; left: 8px; right: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px; border-radius: 8px; }
  .scene-step-controls .scene-settings-button { width: 100%; height: 40px; }
  .scene-step-controls .scene-long-image-button { width: 100%; height: 40px; padding: 0 2px; font-size: 12px; white-space: nowrap; }
  .scene-step-controls .scene-step-skip-toggle { grid-column: span 2; min-width: 0; min-height: 40px; justify-content: center; }
  .scene-step-controls .scene-step-button { width: 100%; min-width: 0; height: 44px; padding: 0 2px; font-size: 13px; }
  .scene-step-controls .mobile-command-icon { display: inline; font-size: 22px; line-height: 1; }
  .scene-step-controls .scene-command-label { display: none; }
  .app-shell .scene-step-controls { box-shadow: none; background: rgba(250, 255, 252, .96); }
  .app-mode-plan .scene-step-controls { grid-template-columns: 40px 84px; width: max-content; top: 8px; bottom: auto; right: 8px; left: auto; padding: 0; border: 0; }
  .app-mode-cutting .scene-dimension-panel { bottom: 118px !important; left: 8px !important; width: 140px; max-height: 175px; overflow-y: auto; pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain; }
  .scene-dimension-panel strong, .scene-dimension-segment em { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .scene-dimension-ruler { min-height: 88px; height: 88px; }
  .scene-dimension-segment em { font-size: 14px; }
  .animation-settings-dialog { width: calc(100% - 24px); max-width: 480px; max-height: calc(var(--mobile-height, 100dvh) - 24px); overflow-y: auto; }
  .animation-settings-dialog .scene-speed-panel { width: 100%; }
  .animation-settings-dialog input[type="number"] { font-size: 16px; min-height: 40px; }
  .long-image-dialog { width: calc(100% - 16px); max-height: calc(var(--mobile-height, 100dvh) - 16px); }
}

@media (max-width: 599px) and (max-height: 650px) {
  .app-mode-cutting .scene-dimension-panel { top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; width: 132px; max-height: 160px; }
}

@media (max-width: 1024px) and (max-height: 500px) {
  .auth-stage { --card-top: 12px; }
  .auth-card .auth-signature { display: none; }
  .scene-view-picker { min-height: 66px; }
  .view-cube-canvas { width: 66px; height: 66px; }
  .app-mode-cutting .scene-dimension-panel { max-height: 96px; }
}

@media (min-width: 600px) and (max-width: 1024px) and (max-height: 500px) {
  .app-shell .scene-step-controls { grid-template-columns: 40px 84px 134px repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .scene-step-controls .scene-step-skip-toggle { grid-column: auto; }
  .scene-step-controls .scene-step-button { height: 40px; }
  .app-mode-plan .scene-step-controls { grid-template-columns: 40px 84px; }
  .app-mode-cutting .scene-dimension-panel { width: 164px; max-height: 96px; bottom: 64px !important; }
}