.transfer-page { padding-block: 58px 84px; }
.transfer-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.transfer-heading h1 { max-width: none; margin-bottom: 13px; font-size: clamp(33px, 4vw, 50px); }
.transfer-intro { max-width: 760px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
kbd { display: inline-block; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--surface-raised); color: var(--text); font: 600 12px/1.5 ui-monospace, monospace; white-space: nowrap; }
.reset-button { flex: none; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--text); font: 650 12px system-ui, sans-serif; cursor: pointer; }
.reset-button:hover { border-color: var(--cyan); }
.transfer-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.tree-pane { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 38px rgb(0 0 0 / 10%); transition: border-color .16s ease, box-shadow .16s ease; }
.tree-pane.is-drop-target { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 24%, transparent), 0 18px 42px rgb(0 0 0 / 15%); }
.pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 58px; padding: 0 17px; border-bottom: 1px solid var(--border); }
.pane-heading > div { display: flex; align-items: center; gap: 11px; }
.pane-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.pane-index { color: var(--cyan); font: 700 11px ui-monospace, monospace; }
.pane-count { color: var(--muted); font: 600 11px ui-monospace, monospace; white-space: nowrap; }
.tree-host { height: 410px; min-width: 0; }
.drop-marker { position: absolute; z-index: 2; left: 12px; right: 12px; height: 2px; pointer-events: none; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent); }
.drop-marker[hidden] { display: none; }
.drop-marker.is-inside { border: 1px solid var(--cyan); border-radius: 4px; background: color-mix(in srgb, var(--cyan) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent); }
.drop-hint { position: absolute; right: 13px; bottom: 13px; z-index: 1; pointer-events: none; opacity: 0; transform: translateY(5px); border-radius: 7px; padding: 8px 11px; background: var(--cyan); color: #071b26; font: 700 11px system-ui, sans-serif; transition: opacity .16s ease, transform .16s ease; }
.is-drop-target .drop-hint { opacity: 1; transform: translateY(0); }
.transfer-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--cyan); font-size: 20px; }
.transfer-footer { display: flex; justify-content: space-between; gap: 30px; align-items: start; margin-top: 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.transfer-footer p { margin: 0; max-width: 470px; }
#status { color: var(--cyan); font-weight: 650; }
@media (max-width: 760px) {
  .transfer-page { padding-block: 42px 65px; }
  .transfer-heading { align-items: start; flex-direction: column; gap: 18px; }
  .transfer-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .transfer-arrow { justify-self: center; transform: rotate(90deg); }
  .tree-host { height: 330px; }
  .transfer-footer { flex-direction: column; gap: 9px; }
}