.merge-stage { min-height: calc(100dvh - 64px); padding-bottom: 112px; display: flex; flex-direction: column; }
.merge-page .crumbs { margin: 12px 0; font-size: 12px; }
.merge-page .thead { justify-content: center; text-align: center; margin: 12px 0 20px; }
.merge-page .thead .ico, .merge-page .badges { display: none; }
.merge-page .thead p { max-width: 760px; margin: 8px auto 0; }
.merge-page .workspace { box-shadow: none; border: 0; background: transparent; padding: 0; }
.merge-page .tool-workspace-stage { flex: 1; }
.merge-page .pro-strip { display: none; }
.merge-page .prostrip { display: none; }
.merge-editor .drop { min-height: 210px; max-width: 740px; margin: 16px auto; background: var(--surface); }
.merge-editor .drop__title { display: inline-block; background: var(--brand); color: white; border-radius: 12px; padding: 18px 30px; }
.merge-controls { display: none; }
.merge-editor.has-files { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.merge-editor.has-files .merge-controls { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px; }
.merge-controls h2 { font-size: 22px; }
.merge-controls .bar { flex-direction: column; align-items: stretch; margin: auto 0 0; }
.merge-controls .bar .btn { width: 100%; }
.merge-controls .bar__grow { font-size: 14px; }
.merge-editor.has-files .drop { min-height: 62px; padding: 10px; margin: 0 0 16px; }
.merge-editor.has-files .drop__ico, .merge-editor.has-files .drop__hint { display: none; }
.merge-editor.has-files .drop__title { padding: 10px 20px; font-size: 14px; }
.merge-editor.has-files .flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; max-height: max(340px, calc(100dvh - 430px)); overflow-y: auto; padding: 4px; }
.merge-editor .fitem { flex-direction: column; align-items: stretch; padding: 16px; min-width: 0; }
.merge-editor .fitem__thumb { width: 100%; height: 190px; padding: 10px; border: 0; background: #f2f4f8; cursor: zoom-in; }
.merge-editor .fitem__thumb img { width: 100%; height: 100%; object-fit: contain; }
.merge-editor .fitem__name { font-size: 13px; overflow-wrap: anywhere; }
.merge-editor .fitem__meta { font-size: 12px; }
.merge-editor .fitem__act { justify-content: center; margin-top: 10px; }
.merge-ad { margin: 20px 0 0; }
.merge-ad.ad--ya .ad__box { height: 90px; min-height: 90px; }
.merge-page .tcontent { margin-top: 32px; }
@media (min-width: 880px) {
  .merge-active .thead { margin: 4px 0 12px; }
  .merge-active .thead h1 { font-size: 24px; }
  .merge-active .thead p { display: none; }
  .merge-active .merge-editor .fitem__thumb { height: 140px; }
  .merge-active .merge-editor.has-files .flist { max-height: max(280px, calc(100dvh - 400px)); }
  .merge-active .merge-controls { gap: 10px; padding: 16px; }
  .merge-active .merge-controls h2 { font-size: 20px; }
  .merge-active .merge-controls .alert { font-size: 13px; margin: 0; }
}
.merge-preview { width: min(1000px, 95vw); max-height: 90dvh; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.merge-preview::backdrop { background: rgba(15,23,42,.65); }
.merge-preview__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.merge-preview__bar span { flex: 1; text-align: center; }
.merge-preview__paper { max-height: 72dvh; overflow: auto; text-align: center; background: #edf0f5; padding: 12px; }
.merge-preview canvas { max-width: none; background: white; }
@media (max-width: 879px) {
  .merge-editor.has-files { grid-template-columns: 1fr; }
  .merge-editor.has-files .flist { max-height: 420px; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
  .merge-page .thead { text-align: left; }
  .merge-editor .fitem__thumb { height: 150px; }
}

/* Desktop work mode uses the viewport; informational content stays on the landing view. */
@media (min-width: 880px) {
  .wrap.merge-page { max-width: none; padding: 0 20px; }
  .merge-page .tcontent { max-width: 1200px; margin: 32px auto; }
  .merge-active .thead, .merge-active .tcontent, .merge-active .next-steps { display: none; }
  body.merge-working .foot, body.merge-working footer, body.merge-working #pageBottomAd { display: none; }
  .merge-active .merge-stage { height: calc(100dvh - 64px); min-height: 0; padding: 0 0 100px; overflow: hidden; }
  .merge-active .tool-workspace-stage { min-height: 0; display: flex; }
  .merge-active .workspace { width: 100%; min-height: 0; display: flex; }
  .merge-active .merge-editor.has-files { width: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 440px); gap: 20px; }
  .merge-active .merge-canvas { position: relative; min-height: 0; padding: 16px 64px 8px 0; }
  .merge-active .merge-editor.has-files .drop { position: absolute; top: 16px; right: 0; width: 52px; height: 52px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--brand); }
  .merge-active .drop__title { font-size: 0 !important; padding: 0 !important; }
  .merge-active .drop__title::after { content: '+'; font-size: 32px; line-height: 52px; }
  .merge-active .merge-editor.has-files .flist { height: 100%; max-height: none; margin: 0; align-content: start; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
  .merge-active .merge-editor .fitem { padding: 10px; gap: 6px; }
  .merge-active .merge-editor .fitem__thumb { height: clamp(110px, 21dvh, 180px); padding: 4px; }
  .merge-active .fitem__act { margin-top: 0; }
  .merge-active .fitem__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .merge-active .merge-controls { border-radius: 0; padding: 24px; }
  .merge-active .merge-controls h2 { font-size: 28px; margin: 0 0 12px; }
  .merge-active #hint { order: 0; }
  .merge-active #bar { order: 1; margin-top: auto; gap: 12px; }
  .merge-active #btnGo { min-height: 80px; font-size: 23px; border-radius: 12px; }
  .merge-active .merge-ad { flex: 0 0 auto; margin: 8px auto 0; width: min(100%, 1000px); }
}

@media (min-width: 880px) { body.merge-working { overflow: hidden; } body.merge-working #main { padding: 0; } }

.merge-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.merge-toolbar[hidden] { display: none; }
.merge-toolbar .btn { min-height: 44px; font-size: 13px; padding: 10px 14px; }
.merge-editor.has-files .drop { display: none; }
.merge-editor .fitem { position: relative; cursor: grab; transition: border-color .15s, box-shadow .15s; }
.merge-editor .fitem:hover { border-color: var(--brand); box-shadow: 0 4px 16px #0000000d; }
.merge-order { position: absolute; top: 12px; left: 12px; z-index: 1; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; background: var(--brand); color: white; font-size: 12px; font-weight: 700; pointer-events: none; }
.merge-editor .icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; }
.merge-editor .icon-btn:disabled { opacity: .35; }
.merge-editor.is-busy .fitem { cursor: wait; }
.merge-editor.is-busy #progress::before { content: ''; display: block; width: 24px; height: 24px; margin: 10px auto; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: merge-spin .8s linear infinite; }
@keyframes merge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .merge-editor.is-busy #progress::before { animation: none; } }
@media (min-width: 880px) {
 .merge-active .merge-canvas { display: flex; flex-direction: column; padding: 0 0 8px; }
 .merge-active .merge-editor.has-files .flist { flex: 1; min-height: 0; height: auto; }
 .merge-active .merge-toolbar { flex: 0 0 auto; }
 .merge-active .merge-controls { min-height: 0; overflow-y: auto; }
 .merge-active #btnGo { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
}

.merge-editor .fitem.is-drag { opacity: .45; }
.merge-editor .fitem.is-target { border: 2px dashed var(--brand); background: var(--brand-soft); }
.merge-toolbar .btn:focus-visible, .merge-editor .icon-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

@media (min-width: 880px) {
 .merge-active .merge-toolbar { justify-content: flex-end; }
 .merge-editor.is-busy #progress:not([hidden]) { position: fixed; inset: 64px 0 100px; z-index: 55; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgba(251,251,249,.96); backdrop-filter: blur(4px); }
 .merge-editor.is-busy #progress::before { width: 56px; height: 56px; margin: 0; border-width: 4px; }
 .merge-editor.is-busy .progress__track { width: min(360px, 80vw); height: 8px; border-radius: 20px; overflow: hidden; background: var(--line); }
 .merge-editor.is-busy .progress__fill { height: 100%; background: var(--brand); transition: width .25s ease; border-radius: inherit; }
 .merge-editor.is-busy .progress__lbl { max-width: 80vw; font-size: 20px; font-weight: 700; text-align: center; }
}

/* Mobile: fixed action area, three-column files, scrolling confined to the file list. */
@media (max-width: 879px) {
 .wrap.merge-page { padding: 0 12px; }
 .merge-page .thead { text-align: center; justify-content: center; margin: 10px 0 12px; }
 .merge-page .thead h1 { font-size: 22px; line-height: 1.25; }
 .merge-page .thead p { font-size: 12px; line-height: 1.45; margin: 6px auto 0; }
 .merge-editor .drop { min-height: 180px; margin: 12px 0; padding: 16px; }
 .merge-editor .drop__title { font-size: 15px; padding: 14px 20px; }
 .merge-editor .drop__hint { font-size: 12px; }
 body.merge-working { overflow: hidden; }
 body.merge-working #main { padding: 0; }
 body.merge-working .ftr, body.merge-working #pageBottomAd { display: none; }
 .merge-active .tcontent, .merge-active .next-steps { display: none; }
 .merge-active .merge-stage { height: calc(100dvh - 64px); min-height: 0; padding-bottom: calc(var(--editor-ad-space,130px) + 8px + env(safe-area-inset-bottom)); overflow: hidden; }
 .merge-active .thead { flex: 0 0 auto; margin: 8px 0; }
 .merge-active .thead h1 { font-size: 19px; }
 .merge-active .thead p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; }
 .merge-active .tool-workspace-stage, .merge-active .workspace { flex: 1; min-height: 0; display: flex; width: 100%; }
 .merge-active .merge-editor.has-files { display: flex; flex-direction: column; width: 100%; gap: 8px; min-height: 0; }
 .merge-active .merge-canvas { display: flex; flex-direction: column; min-height: 0; flex: 1; }
 .merge-active .merge-toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0 0 8px; flex: 0 0 auto; }
 .merge-active .merge-toolbar .btn { min-width: 0; padding: 7px 4px; font-size: 10px; line-height: 1.25; white-space: normal; min-height: 40px; text-align: center; }
 .merge-active .merge-editor.has-files .flist { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 6px; padding: 2px; margin: 0; }
 .merge-active .merge-editor .fitem { padding: 5px; gap: 4px; border-radius: 10px; }
 .merge-active .merge-editor .fitem__thumb { height: clamp(65px,15dvh,115px); padding: 3px; }
 .merge-active .fitem__name { font-size: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
 .merge-active .fitem__meta { font-size: 9px; line-height: 1.25; }
 .merge-active .fitem__act { margin: 0; gap: 2px; justify-content: space-between; }
 .merge-active .icon-btn { flex: 1; width: auto; min-width: 0; height: 32px; padding: 5px; }
 .merge-active .icon-btn svg { width: 14px; height: 14px; }
 .merge-active .merge-order { top: 7px; left: 7px; width: 20px; height: 20px; font-size: 10px; }
 .merge-active .merge-editor.has-files .merge-controls { flex: 0 0 auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 8px 0 0; gap: 0; background: var(--bg); }
 .merge-active .merge-controls h2, .merge-active #hint { display: none; }
 .merge-active .merge-controls .bar { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0; }
 .merge-active .bar__grow { font-size: 11px; align-self: center; }
 .merge-active #btnClear { width: auto; min-height: 32px; padding: 5px 12px; font-size: 11px; }
 .merge-active #btnGo { grid-column: 1 / -1; width: 100%; min-height: 52px; font-size: 16px; border-radius: 10px; }
 .merge-active .merge-ad { position: fixed; bottom: env(safe-area-inset-bottom); left: 12px; right: 12px; margin: 0; height: 116px; overflow: hidden; }
 .merge-editor.is-busy #progress:not([hidden]) { position: fixed; inset: 64px 0 calc(var(--editor-ad-space,130px) + env(safe-area-inset-bottom)); z-index: 55; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(251,251,249,.97); }
 .merge-editor.is-busy #progress::before { width: 40px; height: 40px; margin: 0; }
 .merge-editor.is-busy .progress__track { width: 75vw; height: 7px; border-radius: 12px; overflow: hidden; }
 .merge-editor.is-busy .progress__fill { transition: width .25s ease; }
 .merge-editor.is-busy .progress__lbl { font-size: 15px; text-align: center; padding: 0 16px; }
 .merge-preview { padding: 8px; width: 96vw; }
 .merge-preview__bar { gap: 3px; }
 .merge-preview__bar .btn { padding: 8px; min-width: 32px; }
 body.merge-working.tool-result-open { overflow-y: auto; }
 body.merge-working.tool-result-open .download-result { padding: 12px 12px 140px; }
 body.merge-working.tool-result-open .download-result__card { padding: 14px; }
 body.merge-working.tool-result-open .download-result h2 { font-size: 22px; }
 body.merge-working.tool-result-open .download-result__name { font-size: 12px; }
 body.merge-working.tool-result-open .download-ad--right { display: none; }
}