.parameter-details > summary,
.mobile-dock,
.mobile-gesture-hint { display: none; }
.palette-empty { grid-column: 1 / -1; font-size: 14px; line-height: 1.8; color: #65745d; text-align: center; padding: 20px 8px; }

@media (max-width: 700px), (max-width: 980px) and (max-height: 500px) {
  :root { font-size: 16px; }
  body { -webkit-text-size-adjust: 100%; }
  main { padding: 22px 14px calc(108px + env(safe-area-inset-bottom)); }
  .app-header { height: 68px; padding: 0 14px; gap: 12px; }
  .header-nav { margin-left: auto; height: auto; gap: 0; }
  .nav-current { display: none; }
  .nav-button { min-height: 44px; padding: 8px 12px; font-size: 14px; color: var(--green); }
  .header-right { display: flex; margin-left: 0; gap: 4px; }
  #accountName { display: none; }
  .header-nav { flex-shrink: 0; }
  .nav-button { white-space: nowrap; padding: 8px; font-size: 12px; }
  .local-badge { display: none; }
  .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .brand { font-size: 22px; gap: 8px; flex-shrink: 0; white-space: nowrap; }
  .brand img { width: 34px; height: 34px; }
  .brand-en { font-size: 7px; }
  .page-heading { padding-bottom: 22px; }
  .page-heading h1 { font-size: 22px; letter-spacing: 0; line-height: 1.55; }
  .page-heading p { font-size: 13px; line-height: 1.8; }
  .page-heading p, .privacy-note, .field-hint, .dialog-description, .dialog-footnote, .range-labels, .source-preview span, .export-area p { color: #65745d; }
  .dropzone > span:not(.upload-icon), .dropzone small { color: #677b59; }
  .material-row .color-count, .export-options > button > div > span { color: #5e7153; }
  .eyebrow { font-size: 9px; }
  .step-track { display: none; }
  .studio-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .source-panel, .editor-panel, .materials-panel { grid-column: 1; scroll-margin-top: 18px; }
  .panel-title { padding: 16px; }
  .panel-title h2 { font-size: 16px; }
  .section-number { font-size: 11px; }
  .source-panel .panel-body { display: block; padding: 16px; }
  .dropzone { min-height: 152px; padding: 18px 12px; justify-content: center; }
  .upload-icon { margin-bottom: 10px; width: 36px; height: 36px; }
  .dropzone strong { font-size: 16px; }
  .dropzone > span:not(.upload-icon) { font-size: 13px; }
  .dropzone small { font-size: 11px; margin-top: 10px; }
  .source-preview { gap: 10px; padding-top: 14px; }
  .source-preview img { width: 46px; height: 46px; }
  .source-preview strong { font-size: 13px; max-width: 160px; }
  .source-preview span { font-size: 11px; line-height: 1.6; }
  .text-button { font-size: 13px; min-height: 44px; min-width: 44px; padding: 6px; }
  .source-preview .text-button { font-size: 13px; }
  .example-row { gap: 8px; margin-top: 12px; font-size: 12px; flex-wrap: wrap; }
  .example-button { min-height: 44px; min-width: 68px; font-size: 13px; padding: 8px 10px; }
  .parameter-details { border-top: 1px solid var(--line); margin: 16px 0; }
  .parameter-details > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 0; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .parameter-details > summary::-webkit-details-marker { display: none; }
  .parameter-details > summary span { margin-left: auto; font-size: 12px; font-weight: 400; color: #728368; }
  .parameter-details > summary svg { width: 16px; height: 16px; transition: transform .15s; }
  .parameter-details[open] > summary svg { transform: rotate(90deg); }
  .parameter-details[open] > summary { margin-bottom: 12px; }
  .parameter-details .divider { display: none; }
  .source-panel .field-heading { margin: 4px 0 8px; font-size: 14px; }
  .field-heading > span { font-size: 13px; }
  input[type=range] { height: 44px; }
  .range-labels { font-size: 11px; }
  .field-hint { display: block; font-size: 12px; }
  .settings-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form-field { font-size: 14px; gap: 9px; margin-bottom: 18px; }
  select, input:not([type=checkbox],[type=range],[type=file]) { min-height: 46px; padding: 11px 12px; font-size: 16px; }
  .check-line { font-size: 13px; min-height: 44px; margin: 4px 0 12px; gap: 10px; }
  .source-panel .check-line { margin-bottom: 10px; font-size: 13px; }
  input[type=checkbox] { width: 18px; height: 18px; }
  .help-dot { width: 24px; height: 24px; line-height: 22px; font-size: 13px; flex-shrink: 0; }
  .button { min-height: 46px; padding: 11px 14px; font-size: 14px; }
  .generate-button { margin-top: 0; height: 50px; font-size: 16px; }
  .generate-button kbd { display: none; }
  .generate-button > svg { margin-right: 0; }
  .ai-teaser { display: none; }
  .privacy-note { font-size: 12px; line-height: 1.8; margin-top: 14px; }
  .privacy-note svg { width: 16px; height: 16px; }
  .editor-heading { min-height: 70px; height: auto; padding: 12px; flex-wrap: wrap; gap: 2px 8px; }
  .document-name { flex: 1 1 170px; }
  .document-name input { font-size: 16px !important; min-height: 44px; width: 100%; max-width: 210px; }
  .save-status { font-size: 11px; margin-left: auto; }
  .editor-toolbar { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding: 10px; height: auto; }
  .tool-group { display: contents; }
  .editor-toolbar .tool-button { width: 100%; height: 44px; }
  .tool-button svg { width: 20px; height: 20px; }
  .toolbar-divider, .toolbar-spacer { display: none; }
  .editor-toolbar .button-small { grid-column: span 2; min-height: 44px; font-size: 13px; padding: 8px; }
  .canvas-viewport { height: clamp(300px, 53dvh, 470px); padding: 22px; }
  .canvas-controls { padding: 9px 10px; height: auto; gap: 8px; flex-wrap: wrap; }
  .view-toggles { gap: 8px; }
  .view-toggles label { min-width: 58px; min-height: 44px; padding: 4px; font-size: 13px; gap: 5px; }
  .view-toggles input { width: 18px; height: 18px; }
  .zoom-controls { margin-left: auto; gap: 0; }
  .zoom-controls button { width: 44px; height: 44px; padding: 6px; font-size: 20px; }
  .zoom-controls .fit-button { font-size: 13px; width: auto; padding: 8px; min-width: 76px; }
  .zoom-controls span#zoomValue { font-size: 12px; width: 36px; }
  .zoom-divider { display: none; }
  .editor-status { padding: 10px 14px; font-size: 12px; line-height: 1.7; }
  .mobile-gesture-hint { display: block; font-size: 12px; line-height: 1.8; margin: 0; padding: 0 14px 14px; color: #7c8c70; }
  .materials-panel { display: block; }
  .summary-grid { padding: 20px; }
  .summary-grid span { font-size: 13px; }
  .summary-grid strong { font-size: 26px; }
  .summary-grid small { font-size: 12px; }
  .physical-size { margin: 0 16px 20px; padding: 12px; font-size: 13px; }
  .physical-size select { min-height: 44px; font-size: 14px; max-width: 160px; }
  .material-section-heading { padding: 0 16px; margin: 0; gap: 10px; flex-wrap: wrap; }
  .material-section-heading h3 { font-size: 15px; }
  .material-section-heading span { font-size: 11px; }
  .count-badge { font-size: 12px; }
  .search-field { margin: 14px 16px 12px; }
  .search-field input { min-height: 46px; font-size: 16px !important; padding: 10px !important; }
  .material-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0 12px; padding: 0 3px; height: 236px; }
  .material-row { min-height: 48px; gap: 7px; padding: 8px 7px; }
  .material-row .color-swatch { width: 26px; height: 26px; }
  .material-row .color-code, .material-row .color-count { font-size: 13px; }
  .material-row .color-count small { display: none; }
  .selected-color { margin: 16px; }
  .selected-color .text-button { font-size: 13px; }
  .selected-color span:not(.color-swatch) { font-size: 11px; }
  .selected-color strong { font-size: 12px; }
  .replace-button { font-size: 14px; }
  .export-area { padding: 18px 16px; }
  .button-dark { height: 50px; font-size: 16px; }
  .import-button { font-size: 13px; }
  .export-area p { font-size: 11px; }
  .page-footer { font-size: 11px; flex-direction: column; gap: 0; padding-bottom: 8px; }
  .page-footer > span:last-child { text-align: left; }
  .page-footer button { min-height: 44px; padding: 4px 8px; }
  .mobile-dock { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 8px 12px max(8px,env(safe-area-inset-bottom)); gap: 8px; background: #ffffffef; backdrop-filter: blur(12px); border-top: 1px solid #e2e8db; box-shadow: 0 -4px 18px #30472b0a; }
  .mobile-dock button { min-height: 54px; padding: 7px; border: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: #f0f5eb; color: #58724a; font-size: 12px; }
  .mobile-dock .dock-primary { background: var(--green); color: white; }
  .mobile-dock svg { width: 20px; height: 20px; }
  .dialog { width: min(600px,calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 28px); margin: auto; padding: 18px; }
  .dialog-heading { position: sticky; top: -18px; z-index: 1; background: white; padding: 8px 0; align-items: center; }
  .dialog h2 { font-size: 19px; line-height: 1.6; }
  .dialog .eyebrow { font-size: 8px; line-height: 1.8; }
  .dialog-description { font-size: 14px; line-height: 1.8; }
  .dialog-footnote { font-size: 12px; }
  .export-options > button { min-height: 82px; padding: 12px; gap: 10px; }
  .export-options strong { font-size: 14px; line-height: 1.6; }
  .export-options > button > div > span { font-size: 12px; line-height: 1.7; }
  .file-icon { width: 40px; flex-shrink: 0; }
  .full-palette { grid-template-columns: repeat(5,minmax(0,1fr)); max-height: 48dvh; gap: 8px; }
  .palette-color { min-height: 58px; font-size: 11px; padding: 6px 3px; }
  .standalone-input { min-height: 46px; font-size: 16px; }
  .ai-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .provider-sidebar { border: 0; padding: 0; }
  .provider-list { display: grid; grid-template-columns: minmax(0,1fr); }
  .provider-form input, .provider-form select { font-size: 16px !important; }
  .provider-form .form-field, .provider-form .check-line { font-size: 14px; }
  .form-field small { font-size: 12px; }
  .provider-card strong { font-size: 14px; }
  .provider-card > span { font-size: 12px; }
  .provider-card .text-button { font-size: 13px; }
  .advanced-settings summary { min-height: 44px; padding: 12px 0; font-size: 13px; }
  .provider-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .provider-actions > .button { width: 100%; min-height: 46px; font-size: 14px; }
  .provider-feedback { font-size: 13px; }
  .info-content { font-size: 14px; }
  .toast { max-width: calc(100vw - 28px); width: max-content; bottom: calc(88px + env(safe-area-inset-bottom)); font-size: 14px; padding: 11px 16px; }
}

@media (max-width: 350px) {
  .page-heading h1 { font-size: 20px; }
  .material-list { grid-template-columns: minmax(0,1fr); }
  .selected-color { flex-wrap: wrap; }
  .full-palette { grid-template-columns: repeat(4,minmax(0,1fr)); }
}