:root { --green: #5dc344; --blue: #2388ff; --ink: #07142d; --muted: #7d899d; --line: #e5ebf2; --surface: #ffffff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: #f7f9fb; color: var(--ink); font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
.wrap { width: min(1040px, calc(100% - 24px)); height: calc(100vh - 40px); margin: 20px auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; overflow: hidden; }
.toolbar, .file-panel, .login-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(25, 45, 75, .05); }
.toolbar { padding: 16px; display: grid; gap: 14px; }
.title-row, .actions, .crumbs, .file-row, .list-head { display: flex; align-items: center; }
.title-row { justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: 0; }
.title-row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 6px; cursor: pointer; }
.crumbs { justify-content: flex-start; gap: 12px; color: var(--muted); font-size: 13px; }
.crumb-path { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.sibling-navigation { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.sibling-button { padding: 6px 9px; font-size: 12px; }
.crumbs a { color: var(--blue); text-decoration: none; }
.back-button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #dbe3ee; border-radius: 6px; background: #fff; color: #516076 !important; text-decoration: none; cursor: pointer; }
.back-button:hover { border-color: #b8d8ff; color: var(--blue) !important; }
.back-button.disabled { color: #b4bdca !important; background: #fbfcfe; }
.logout-button { border-color: #ffd4d9; background: #fff6f7; color: #f05a69 !important; }
.logout-button:hover { border-color: #ffabb5; background: #fff0f2; color: #e33e52 !important; }
.actions { gap: 10px; flex-wrap: wrap; }
.new-folder { display: flex; gap: 7px; align-items: center; }
input, textarea { min-width: 0; border: 1px solid #dbe3ee; border-radius: 6px; padding: 8px 10px; outline: none; background: #fff; }
input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(35, 136, 255, .12); }
button, .file-picker { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 11px; border: 1px solid #b8d8ff; border-radius: 6px; background: #f1f7ff; color: #116fe3; cursor: pointer; white-space: nowrap; }
.primary { border-color: #b8d8ff; background: #f1f7ff; color: #116fe3; }
.file-panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.bulk-actions { position: sticky; top: 0; z-index: 2; }
.file-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.file-rows { flex: 1; min-height: 0; overflow: auto; }
.bulk-actions, .bulk-operation-controls, .file-search-form { display: flex; align-items: center; gap: 8px; }
.bulk-actions { flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.bulk-operation-controls { flex: 1 1 590px; min-width: 0; flex-wrap: wrap; }
.bulk-operation-controls span { color: var(--muted); min-width: 68px; font-size: 13px; white-space: nowrap; }
.file-search-form { flex: 1 1 180px; max-width: 245px; }
.file-search { flex: 1; min-width: 140px; padding: 7px 9px; }
.file-search-button { width: 34px; min-width: 34px; padding: 0; }
.mobile-action-menu { display: none; position: relative; flex: 0 0 auto; }
.mobile-action-menu summary { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dbe3ee; border-radius: 6px; background: #fff; color: #516076; cursor: pointer; font-size: 21px; line-height: 1; list-style: none; }
.mobile-action-menu summary::-webkit-details-marker { display: none; }
.mobile-action-menu-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; display: grid; min-width: 142px; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(25, 45, 75, .16); }
.mobile-action-menu-list button { justify-content: flex-start; width: 100%; }
.bulk-operation-controls .danger { margin-left: auto; }
.action-folder { border-color: #bfe3b4; background: #f1faed; color: #348b25; }
.action-move { border-color: #f1cd91; background: #fff8ea; color: #c8750d; }
.action-copy { border-color: #b8d8ff; background: #f1f7ff; color: #116fe3; }
.action-rename { border-color: #a9ddd8; background: #effaf8; color: #147b72; }
.action-batch { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 11px; border: 1px solid #e6b8d0; border-radius: 6px; background: #fff3f8; color: #b33e73; text-decoration: none; cursor: pointer; white-space: nowrap; }
.list-head, .file-row { display: grid; grid-template-columns: 26px minmax(190px, 1fr) 110px 150px; gap: 12px; padding: 10px 14px; }
.list-head { color: var(--muted); font-size: 12px; background: #fbfcfe; border-bottom: 1px solid var(--line); }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--blue); }
.file-row { min-height: 54px; border-bottom: 1px solid #edf0f5; user-select: none; }
.file-row:last-child { border: 0; }
.file-row[data-selectable-row] { cursor: pointer; }
.file-row[data-selectable-row]:hover { background: #fbfdff; }
.file-row.is-selected { background: #eef6ff; box-shadow: inset 3px 0 0 var(--blue); }
.file-row.is-selected:hover { background: #e7f2ff; }
.file-row[data-selectable-row]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.selection { display: grid; place-items: center; }
.selection input, .list-head input { width: 16px; height: 16px; accent-color: var(--blue); }
.file-name { min-width: 0; display: flex; align-items: center; gap: 9px; }
.file-name a, .file-name > span:not(.file-icon) { min-width: 0; color: var(--ink); overflow-wrap: anywhere; text-decoration: none; }
.file-name a:hover { color: var(--blue); }
.file-icon { width: 21px; text-align: center; flex: 0 0 auto; }
.inline-rename { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; min-width: 0; flex: 1; gap: 5px; align-items: center; }
.inline-rename textarea { width: 100%; min-height: 62px; max-height: 152px; padding: 5px 7px; resize: none; overflow-y: auto; overflow-wrap: anywhere; line-height: 1.45; user-select: text; }
.inline-rename button { min-width: 30px; min-height: 30px; padding: 0 7px; }
.rename-extension { color: var(--muted); align-self: start; padding-top: 6px; white-space: nowrap; }
.meta { color: #657188; font-size: 13px; align-self: center; }
.danger { color: #f05a69; border-color: #ffd4d9; background: #fff6f7; }
.message { border-radius: 8px; padding: 10px 12px; border: 1px solid; }
.message-success { color: #0b7a2a; background: #eefaf0; border-color: #cdeed2; }
.message-error { color: #bc1f1f; background: #fff1f1; border-color: #ffd2d2; }
.empty { color: var(--muted); text-align: center; padding: 42px 16px; }
.picker-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(7, 20, 45, .35); }
.picker-backdrop[hidden] { display: none; }
.picker-panel { width: min(500px, 100%); max-height: min(620px, 90vh); overflow: hidden; display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(7, 20, 45, .2); }
.picker-head, .picker-toolbar, .picker-foot { display: flex; align-items: center; gap: 8px; }
.picker-head { justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.picker-head h2 { margin: 0; font-size: 17px; }
.picker-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.picker-toolbar { padding-bottom: 4px; }
.picker-toolbar button { min-height: 30px; padding: 0 9px; }
.picker-search-form { display: flex; align-items: center; gap: 8px; }
.picker-search-form #picker-search { flex: 1; width: 100%; }
.picker-list { min-height: 150px; max-height: 370px; overflow: auto; display: grid; align-content: start; gap: 5px; padding: 2px; }
.picker-item { justify-content: flex-start; width: 100%; border-color: var(--line); background: #fbfcfe; color: var(--ink); text-align: left; }
.picker-item:hover { border-color: #b8d8ff; background: #f1f7ff; color: var(--blue); }
.picker-foot { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 11px; }
.folder-dialog-panel { width: min(430px, 100%); padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(7, 20, 45, .2); }
.folder-dialog-panel h2 { margin: 0 0 14px; font-size: 17px; }
.folder-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.batch-rename-panel { width: min(900px, 100%); max-height: min(700px, 88vh); overflow: hidden; display: grid; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(7, 20, 45, .2); }
.batch-rename-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.batch-rename-head h2 { margin: 0; font-size: 17px; }
.batch-rename-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.batch-rename-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.scheme-field { display: flex; align-items: center; gap: 10px; color: #516076; }
.sidecar-toggle { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; }
.sidecar-toggle input { width: 16px; height: 16px; padding: 0; accent-color: var(--blue); }
.batch-conflict-summary { color: #c52e44; font-weight: 700; white-space: nowrap; }
.batch-conflict-filter { border-color: #e7bdc3; background: #fff6f6; color: #b72e40; white-space: nowrap; }
.batch-all-filter { border-color: #c8d5e5; background: #f7f9fc; color: #516076; white-space: nowrap; }
.batch-conflict-filter.is-active, .batch-all-filter.is-active { border-color: #2388ff; background: #eaf3ff; color: #116fe3; box-shadow: inset 0 0 0 1px #2388ff; }
.batch-conflict-filter:disabled { cursor: not-allowed; opacity: .5; }
.batch-progress { margin-left: auto; color: #e04b5f; font-weight: 700; white-space: nowrap; }
select { min-width: 320px; border: 1px solid #dbe3ee; border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--ink); }
.batch-preview-shell { min-height: 120px; max-height: 480px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; }
.batch-rename-preview { flex: 1; min-height: 0; overflow: auto; }
.batch-empty-notice { margin: -4px 0; color: #c52e44; font-size: 13px; font-weight: 700; }
.batch-preview-empty { padding: 32px 16px; color: var(--muted); text-align: center; }
.sha1-modal-panel { width: min(1000px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(7, 20, 45, .2); }
.phash-modal-panel { width: min(1240px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(7, 20, 45, .2); }
.phash-groups { min-height: 0; flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.phash-group { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.phash-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: #f5f8fc; }
.phash-group-head span { margin-right: auto; color: var(--muted); font-size: 12px; }
.phash-item-body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.phash-item-body strong { font-size: 14px; line-height: 1.35; }
.phash-item-title { display: flex; align-items: flex-start; gap: 8px; }
.phash-item-title strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.phash-rename { flex: 0 0 auto; min-height: 27px; padding: 0 8px; font-size: 12px; }
.phash-item-body small { font-family: inherit; font-size: 12px; line-height: 1.45; }
.phash-item-path { color: #b83a4b !important; font-size: 12px; line-height: 1.45; }
.phash-item-metadata { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.phash-item-metadata span + span { color: #64748b; }
.phash-delete-item { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: 2px; color: #c52e44; font-size: 12px; font-weight: 600; cursor: pointer; }
.phash-delete-item input { width: 17px; height: 17px; margin: 0; accent-color: #d94a60; }
.phash-directory-counts { white-space: pre-line; padding: 8px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: #fbfcfe; }
.phash-grid { display: grid; grid-template-columns: repeat(var(--phash-columns), minmax(180px, 1fr)); overflow-x: auto; }
.phash-grid[hidden] { display: none; }
.phash-item { min-width: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px; border-right: 1px solid var(--line); }
.phash-item:last-child { border-right: 0; }
.phash-item img { width: 110px; height: 165px; object-fit: contain; cursor: zoom-in; border: 1px solid var(--line); border-radius: 4px; background: #f5f8fc; }
.phash-item-body { min-width: 0; display: grid; align-content: start; gap: 5px; }
.phash-item-body strong, .phash-item-body small { overflow-wrap: anywhere; }
.phash-item-body small { color: var(--muted); }
.sha1-modal-panel [hidden] { display: none !important; }
.sha1-modal-progress, .sha1-modal-status { flex: 0 0 auto; padding: 10px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.sha1-modal-summary { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; overflow: auto; overflow-x: hidden; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.sha1-modal-title { min-width: 0; }
.phash-selected-count { color: #b42318; font-weight: 700; }
.phash-ignore { margin-left: auto; min-height: 29px; padding: 0 9px; border-color: #e7bdc3; background: #fff6f6; color: #b42318; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sha1-modal-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sha1-modal-heading h2 { min-width: 0; }
.sha1-modal-heading button { min-height: 29px; padding: 0 9px; font-size: 12px; }
.sha1-modal-summary-title { display: block; padding-bottom: 3px; color: var(--ink); font-size: 13px; }
.sha1-modal-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.sha1-modal-summary-row strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.sha1-modal-summary-row > span { margin-left: auto; color: var(--muted); font-size: 12px; }
.sha1-modal-summary-row button { min-height: 29px; padding: 0 9px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.sha1-directory-summary-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sha1-directory-summary-meta > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sha1-directory-files-toggle { min-height: 29px; padding: 0 9px; }
.sha1-directory-column-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.sha1-directory-files { grid-column: 1 / -1; overflow-x: auto; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.sha1-directory-grid { display: grid; grid-template-columns: repeat(var(--directory-columns), minmax(0, 1fr)); min-width: 0; }
.sha1-directory-grid-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; padding: 8px; border-bottom: 1px solid var(--line); background: #f5f8fc; font-size: 12px; font-weight: 600; }
.sha1-directory-grid-heading strong { min-width: 0; overflow-wrap: anywhere; }
.sha1-directory-grid-count { flex: 0 0 auto; color: #f05a69; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sha1-directory-grid-cell { min-width: 0; min-height: 64px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.sha1-directory-grid-file { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 7px; align-items: start; color: var(--ink); }
.sha1-directory-grid-file input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.sha1-directory-grid-file span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.sha1-directory-grid-file small { grid-column: 2; color: var(--muted); }
.sha1-modal-groups { min-height: 0; flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sha1-modal-group { flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.sha1-modal-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: #f5f8fc; }
.sha1-modal-group-head span { margin-right: auto; color: var(--muted); font-size: 12px; }
.sha1-modal-group-head button { min-height: 29px; padding: 0 9px; font-size: 12px; }
.sha1-modal-file { flex: 0 0 auto; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #edf0f5; }
.sha1-modal-file span { overflow-wrap: anywhere; }
.sha1-modal-file small { color: var(--muted); }
.rename-preview-head { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fbfcfe; color: var(--muted); font-size: 12px; }
.rename-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid #edf0f5; align-items: center; }
.rename-preview-row[hidden] { display: none; }
.rename-preview-row:last-child { border-bottom: 0; }
.rename-original, .rename-new { overflow-wrap: anywhere; }
.rename-original { color: var(--ink); }
.rename-new { color: #e04b5f; font-weight: 700; }
.rename-reason { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.preview-skip .rename-new, .preview-unchanged .rename-new { color: var(--muted); font-weight: 400; }
.preview-conflict { background: #fff2f2; }
.preview-conflict .rename-new { color: #c52e44; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-wrap { width: min(390px, 100%); }
.login-panel { padding: 24px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 13px; border-radius: 9px; background: #eff9eb; color: #43aa2c; font-weight: 800; }
.login-panel p { color: var(--muted); margin: 6px 0 18px; }
.login-form { display: grid; gap: 12px; }
.login-form label { display: grid; gap: 6px; color: #4f5b6e; font-size: 13px; }
.login-form .primary { width: 100%; margin-top: 5px; }
@media (max-width: 620px) {
  .wrap { width: min(100% - 16px, 1040px); height: calc(100dvh - 16px); margin: 8px auto; }
  .toolbar { padding: 13px; }
  .crumbs { align-items: flex-start; gap: 8px; }
  .sibling-navigation { margin-left: auto; flex: 0 0 auto; }
  .sibling-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 32px; padding: 0; font-size: 0; line-height: 1; }
  .sibling-button .sibling-label { display: none; }
  .sibling-button::after { display: block; font-size: 17px; line-height: 1; text-align: center; }
  .sibling-previous::after { content: "<"; }
  .sibling-next::after { content: ">"; }
  .crumb-path a { overflow-wrap: anywhere; }
  .actions { width: 100%; }
  .bulk-actions { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .bulk-actions > #selected-count, .file-search-form, .bulk-operation-controls { grid-column: 1; width: 100%; max-width: none; }
  .bulk-operation-controls { display: none; }
  .mobile-action-menu { display: block; }
  .list-head, .file-row { grid-template-columns: 24px minmax(0, 1fr) 52px 68px; gap: 6px; padding: 9px 10px; }
  .list-head { display: grid; }
  .file-row { min-height: 50px; }
  .selection { grid-column: auto; grid-row: auto; align-self: center; }
  .file-name { grid-column: auto; align-self: start; }
  .meta { grid-column: auto; min-width: 0; padding-left: 0; overflow-wrap: anywhere; font-size: 12px; }
  .picker-backdrop { padding: 8px; }
  .picker-panel { max-height: calc(100dvh - 16px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; padding: 12px; }
  .folder-dialog-panel { padding: 12px; }
  .folder-form { grid-template-columns: 1fr auto; }
  .folder-form #folder-cancel { grid-column: 2; }
  .batch-rename-panel { max-height: calc(100dvh - 16px); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .sha1-modal-panel { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 12px; }
  .sha1-modal-group-head { align-items: flex-start; }
  .phash-modal-panel { width: min(100vw - 16px, 1240px); height: calc(100dvh - 16px); padding: 12px; }
  .phash-item { grid-template-columns: 88px minmax(0, 1fr); padding: 8px; }
  .phash-item img { width: 88px; height: 132px; }
  .sha1-modal-group-head strong { min-width: 0; overflow-wrap: anywhere; }
  .sha1-modal-group-head span { width: 100%; margin-right: 0; }
  .sha1-modal-group-head button { width: 100%; }
  .sha1-modal-file { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .sha1-modal-file input { width: 18px; height: 18px; accent-color: var(--blue); }
  .sha1-modal-file small { grid-column: 2; }
  .sha1-modal-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; }
  .sha1-modal-summary-row > span { margin-left: 0; }
  .sha1-modal-summary-row button { width: 100%; }
  .sha1-directory-column-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sha1-directory-grid { grid-template-columns: repeat(var(--directory-columns), minmax(0, 1fr)); }
  .batch-rename-head { flex-direction: column; gap: 10px; }
  .batch-rename-actions { width: 100%; justify-content: flex-end; }
  .scheme-field { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; gap: 8px; }
  .scheme-field select { width: 100%; min-width: 0; }
  .sidecar-toggle { grid-column: 1 / -1; }
  .batch-conflict-summary, .batch-progress { grid-column: 1 / -1; margin-left: 0; }
  .batch-conflict-filter, .batch-all-filter { width: 100%; min-width: 0; }
  .batch-preview-shell { min-height: 0; max-height: none; }
  .rename-preview-head, .rename-preview-row { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 6px; padding: 8px; }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 520px) {
  .wrap { width: min(100% - 16px, 1040px); height: calc(100dvh - 16px); margin: 8px auto; gap: 8px; }
  .toolbar { padding: 10px 13px; gap: 8px; }
  .bulk-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); padding: 8px 12px; }
  .file-search-form { width: 100%; max-width: none; }
  .bulk-operation-controls { grid-column: 1 / -1; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .bulk-operation-controls .danger { margin-left: 0; }
  .picker-backdrop { padding: 8px; }
  .picker-panel { max-height: calc(100dvh - 16px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .batch-rename-panel { max-height: calc(100dvh - 16px); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; }
  .batch-preview-shell { min-height: 0; max-height: none; }
}

.sha1-page { overflow: auto; }
.title-with-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-with-tools h1 { margin: 0; }
.title-sha1-button { min-height: 32px; }
.title-tool-link { text-decoration: none; white-space: nowrap; }
.sha1-page .toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.sha1-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 12px; }
.sha1-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sha1-toolbar > span { color: var(--muted); font-size: 13px; flex: 1; }
.sha1-directory-tree { margin-top: 14px; min-height: 60px; }
.sha1-root-select { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.sha1-directory-row { border-top: 1px solid var(--line); padding: 9px 0 0 8px; }
.sha1-directory-row label { display: inline-flex; align-items: center; gap: 5px; min-width: 220px; }
.sha1-expand { margin-left: 8px; }
.sha1-directory-children { margin-left: 22px; }
.sha1-browser { min-height: 0; display: flex; flex-direction: column; }
.sha1-crumbs { margin: 2px 0 8px; }
.sha1-directory-list { min-height: 260px; max-height: 52vh; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.sha1-directory-list .file-rows { overflow: auto; }
.sha1-directory-link { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: none; justify-content: flex-start; }
.sha1-directory-link:hover { color: var(--blue); }
.sha1-status { color: var(--muted); margin: 14px 0 0; }
.sha1-groups { display: grid; gap: 12px; margin-top: 14px; }
.sha1-directory-summary { display: grid; gap: 6px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.sha1-directory-summary-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sha1-directory-summary-row strong { min-width: 0; overflow-wrap: anywhere; }
.sha1-directory-summary-row button { min-height: 29px; padding: 0 9px; font-size: 12px; }
.sha1-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sha1-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f8fc; font-size: 13px; flex-wrap: wrap; }
.sha1-group-head span, .sha1-directory-group-head span { color: var(--muted); }
.sha1-group-head > span { margin-right: auto; }
.sha1-select-others, .sha1-select-directory { min-height: 29px; padding: 0 9px; font-size: 12px; }
.sha1-directory-group { border-top: 1px solid var(--line); }
.sha1-directory-group-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 20px; background: #fbfcfe; font-size: 13px; flex-wrap: wrap; }
.sha1-directory-group-head > span { margin-right: auto; }
.sha1-directory-pair { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sha1-directory-pair-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f8fc; flex-wrap: wrap; }
.sha1-directory-pair-head > span { color: var(--muted); margin-right: auto; }
.sha1-directory-pair-head button { min-height: 29px; padding: 0 9px; font-size: 12px; }
.sha1-pair-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); }
.sha1-pair-row label { display: flex; min-width: 0; gap: 7px; overflow-wrap: anywhere; }
.sha1-pair-row small { color: var(--muted); font-family: ui-monospace, monospace; }
.sha1-file-list { display: grid; }
.sha1-file-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.sha1-file-row span { overflow-wrap: anywhere; }
.sha1-file-row small { color: var(--muted); }
.sha1-result-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }