*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0c1520;
  --win-bg:    #111e2f;
  --titlebar:  #0055aa;
  --titlebar2: #003d80;
  --toolbar:   #162236;
  --list-bg:   #0c1824;
  --row-even:  #101e2e;
  --row-hover: #1b3058;
  --border:    #243550;
  --text:      #dce8f8;
  --dim:       #8aa4c0;
  --folder:    #ffd060;
  --fileblue:  #80bfff;
  --orange:    #ff8800;
  --green:     #44cc77;
  --red:       #ff4455;
  --scrollbar: #1e3254;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

/* ── Drop overlay ──────────────────────────────────────────────── */
#dropOverlay {
  position: fixed; inset: 0;
  background: rgba(0,85,170,.18);
  border: 4px dashed #3388ff;
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #66aaff;
  pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
#dropOverlay.active { opacity: 1; }

/* ── Drop zone (initial screen) ────────────────────────────────── */
#dropZone {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.4rem;
}
#dropZone.hidden { display: none; }

.dz-disk  { font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 24px #0055aa88); }
.dz-title { font-size: 2rem; font-weight: 700; letter-spacing: 1px; }
.dz-sub   { font-size: .95rem; color: var(--dim); }
.dz-disclaimer {
  margin-top: 1.4rem;
  font-size: .85rem; color: #aaa;
  max-width: 420px; text-align: center; line-height: 1.5;
}

.dz-tags { display: flex; gap: .5rem; }
.tag     {
  background: var(--toolbar); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 9px;
  font-size: .78rem; color: var(--dim);
}
.tag.hi { border-color: var(--orange); color: var(--orange); }

.btn-primary {
  background: var(--titlebar); border: none; color: #fff;
  padding: 10px 26px; border-radius: 6px;
  font-size: .95rem; cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: #0066cc; }

/* ── Error modal ────────────────────────────────────────────────── */
#errorModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#errorModal.hidden { display: none; }
.modal-box {
  background: var(--win-bg);
  border: 2px solid var(--red);
  border-radius: 10px;
  padding: 2rem 2.4rem;
  max-width: 420px; width: 90%;
  text-align: center;
}
.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--red); margin-bottom: .9rem; }
.modal-msg   { color: var(--text); line-height: 1.6; margin-bottom: 1.5rem; }
.btn-modal   {
  background: var(--titlebar); border: none; color: #fff;
  padding: 8px 26px; border-radius: 6px;
  font-size: .9rem; cursor: pointer;
}
.btn-modal:hover { background: #0066cc; }

/* ── Explorer shell ─────────────────────────────────────────────── */
#explorer { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#explorer.hidden { display: none; }

/* Title bar */
#titleBar {
  background: linear-gradient(135deg, var(--titlebar), var(--titlebar2));
  padding: 9px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #004499;
  flex-shrink: 0;
}
.tb-left { display: flex; align-items: center; gap: 10px; }
.tb-appname { font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; color: #fff; }
.tb-version  { font-size: .72rem; font-weight: 400; letter-spacing: 0; opacity: .55; margin-left: .3rem; vertical-align: middle; }
.tb-disk {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px; padding: 2px 8px;
  font-size: .75rem; color: #cce4ff;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-type {
  background: var(--orange); color: #000;
  border-radius: 4px; padding: 2px 8px;
  font-size: .75rem; font-weight: 700;
}
.tb-integrity {
  border-radius: 4px; padding: 2px 8px;
  font-size: .75rem; font-weight: 600;
  white-space: nowrap;
}
.tb-integrity.hidden  { display: none; }
.tb-integrity.int-pending {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.5);
}
.tb-integrity.int-ok {
  background: rgba(40,180,80,.22); border: 1px solid rgba(40,180,80,.55);
  color: #7fffaa;
}
.tb-integrity.int-bad {
  background: rgba(220,60,40,.28); border: 1px solid rgba(220,60,40,.6);
  color: #ff8877;
}
.btn-close {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 4px 13px; border-radius: 4px;
  cursor: pointer; font-size: .82rem; transition: background .15s;
}
.btn-close:hover { background: rgba(220,30,30,.55); }
.btn-about {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 4px 13px; border-radius: 4px;
  cursor: pointer; font-size: .82rem; transition: background .15s;
}
.btn-about:hover { background: rgba(255,255,255,.22); }

/* About modal */
#aboutModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 900;
}
#aboutModal.hidden { display: none; }
/* ADF export dialog reuses about-box styles */
#exportAdfModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 900;
}
#exportAdfModal.hidden { display: none; }
.export-option {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--win-bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 11px 13px;
}
.export-option input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: var(--titlebar); width:15px; height:15px; }
.export-option small { color: var(--dim); font-size: .78rem; }
.export-option.disabled { opacity: .38; pointer-events: none; }
.export-format-row { display: flex; align-items: center; gap: 10px; margin-bottom: .2rem; font-size: .875rem; }
.export-format-row select {
  flex: 1; background: var(--win-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 8px; font-size: .875rem; cursor: pointer;
}
.export-format-row select:focus { outline: none; border-color: var(--titlebar); }
.about-box {
  background: var(--toolbar); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.7);
  width: min(600px, 94vw); overflow: hidden;
}
.about-titlebar {
  background: linear-gradient(135deg, var(--titlebar), var(--titlebar2));
  padding: 9px 12px 9px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: #fff; font-size: .95rem;
}
.about-close-btn {
  background: transparent; border: none; color: rgba(255,255,255,.7);
  font-size: 1rem; cursor: pointer; padding: 2px 7px; border-radius: 4px;
  transition: background .15s;
}
.about-close-btn:hover { background: rgba(220,30,30,.55); color: #fff; }
.about-body { padding: 20px 22px 22px; }
.about-logo {
  font-size: 1.9rem; font-weight: 800; letter-spacing: 1px;
  color: #ffffff; margin-bottom: 2px;
}
.about-tagline { color: var(--dim); font-size: .85rem; margin: 0 0 16px; }
.about-credit  { font-size: .78rem; color: var(--dim); margin: 14px 0 0; line-height: 1.6; }
.about-email   { color: var(--dim); text-decoration: underline dotted; }
.about-email:hover { color: #fff; }
.about-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.about-features li { font-size: .875rem; line-height: 1.4; }

.about-changelog-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--dim); margin: 14px 0 5px;
}
.about-changelog {
  width: 100%; height: 120px;
  background: var(--list-bg); color: #c8d8e8;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: .85rem; line-height: 1.6;
  padding: 8px 12px; resize: none;
  overflow-y: auto;
}

/* Toolbar */
#toolbar {
  background: var(--toolbar);
  border-bottom: 1px solid var(--border);
  padding: 5px 12px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.tool-btn {
  background: none; border: 1px solid transparent;
  color: var(--text); padding: 4px 11px; border-radius: 4px;
  cursor: pointer; font-size: .83rem; transition: all .12s;
}
.tool-btn:hover:not(:disabled) { background: var(--row-hover); border-color: var(--border); }
.tool-btn:disabled { color: var(--dim); cursor: default; }
.tb-sep  { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.tb-info { font-size: .78rem; color: var(--dim); margin-left: 4px; }

/* Breadcrumb */
#breadcrumb {
  background: var(--win-bg); border-bottom: 1px solid var(--border);
  padding: 5px 16px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  font-size: .84rem; flex-shrink: 0;
}
.crumb {
  color: var(--dim); cursor: pointer; padding: 2px 6px; border-radius: 3px;
  transition: all .12s; white-space: nowrap;
}
.crumb:hover            { color: var(--text); background: var(--row-hover); }
.crumb.current          { color: var(--text); cursor: default; }
.crumb.current:hover    { background: transparent; }
.crumb-sep              { color: var(--dim); padding: 0 2px; }

/* Deleted directory banner */
#deletedBanner {
  background: #1c2800; border-bottom: 1px solid #3a4e00;
  padding: 5px 16px; font-size: .78rem; color: #a8c040;
  flex-shrink: 0;
}
#deletedBanner.hidden { display: none; }

/* Ghosted breadcrumb segment for deleted dirs */
.crumb.crumb-deleted { font-style: italic; opacity: 0.6; }

/* File table */
#tableWrap {
  flex: 1; overflow-y: auto; background: var(--list-bg);
}
#tableWrap::-webkit-scrollbar       { width: 8px; }
#tableWrap::-webkit-scrollbar-track { background: var(--list-bg); }
#tableWrap::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
#tableWrap::-webkit-scrollbar-thumb:hover { background: #2e4870; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead { position: sticky; top: 0; z-index: 10; }
th {
  background: var(--toolbar); color: var(--dim);
  padding: 7px 12px; text-align: left;
  font-size: .75rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

tbody tr { transition: background .08s; cursor: default; }
tbody tr:nth-child(even) td { background: var(--row-even); }
tbody tr:nth-child(odd)  td { background: var(--list-bg); }
tbody tr:hover           td { background: var(--row-hover) !important; }
tbody tr.selected        td { background: #0055aa66 !important; }

td { padding: 6px 12px; border-bottom: 1px solid rgba(36,53,80,.6); white-space: nowrap; }

.cell-name { display: flex; align-items: center; gap: 8px; }
.ico       { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nm        { color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.nm.dir    { color: var(--folder); font-weight: 600; }
.cmt       { font-size: .78rem; color: var(--dim); margin-left: 6px; font-style: italic; }
.cell-size { color: var(--dim); font-family: 'Courier New', monospace; text-align: right; min-width: 75px; }
.cell-date { color: var(--dim); min-width: 135px; }
.cell-prot { color: var(--dim); font-family: 'Courier New', monospace; font-size: .8rem; }

.empty-dir { padding: 3.5rem; text-align: center; color: var(--dim); }

/* Deleted file rows */
tr.deleted-sep td {
  background: #1a2a1a !important;
  color: #5a9a5a; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 12px; border-bottom: 1px solid #2a402a;
  cursor: default;
}
tbody tr.deleted td          { opacity: 0.65; }
tbody tr.deleted:hover td    { opacity: 0.85; background: #1b3058 !important; }
tbody tr.deleted.selected td { opacity: 0.90; }

.recov-badge         { font-size: .75rem; font-weight: 700; margin-left: 7px; }
.recov-full          { color: var(--green); }
.recov-partial       { color: var(--orange); }
.recov-none          { color: var(--red); }

.corrupt-badge       { font-size: .8rem; color: var(--orange); margin-left: 5px; cursor: default; }

.props-corrupt-warning {
  background: #3d1f00;
  border: 1px solid #cc6600;
  border-radius: 5px;
  color: var(--red);
  font-size: .82rem;
  line-height: 1.55;
  padding: .55rem .8rem;
  margin: .6rem 0 .2rem;
}

/* Status bar */
#statusBar {
  background: #0a1520; border-top: 1px solid var(--border);
  padding: 4px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; color: #9ab4cc; flex-shrink: 0;
}
.sb-left { display: flex; gap: 14px; }

/* Context menu */
#ctxMenu {
  position: fixed;
  background: var(--toolbar);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  z-index: 800;
  min-width: 170px; padding: 4px;
  font-size: .875rem;
}
#ctxMenu.hidden { display: none; }
.mitem {
  padding: 8px 14px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; gap: 9px; transition: background .1s;
}
.mitem:hover { background: var(--titlebar); color: #fff; }
.mitem.disabled { opacity: .38; cursor: default; pointer-events: none; }
.mitem.mitem-delete { color: var(--red); }
.mitem.mitem-delete:hover { background: #5c1010 !important; }
.msep { height: 1px; background: var(--border); margin: 3px 0; }

/* Delete confirmation dialog */
#deleteModal, #renameModal, #moveModal, #addFolderModal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 850;
}
#deleteModal.hidden    { display: none; }
#renameModal.hidden    { display: none; }
#moveModal.hidden      { display: none; }
#addFolderModal.hidden { display: none; }

/* Move dialog folder browser */
.move-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  background: var(--list-bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 9px;
  font-size: .82rem; margin-bottom: 6px; min-height: 30px;
}
.move-bc-item {
  color: var(--fileblue); cursor: pointer; border-radius: 3px;
  padding: 1px 4px;
}
.move-bc-item:hover  { background: var(--row-hover); }
.move-bc-item.active { color: var(--text); cursor: default; font-weight: 600; }
.move-bc-sep { color: var(--dim); padding: 0 1px; }
.move-folder-list {
  height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--list-bg);
}
.move-folder-row {
  padding: 7px 12px; cursor: pointer;
  font-size: .88rem; border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.move-folder-row:last-child { border-bottom: none; }
.move-folder-row:hover { background: var(--row-hover); color: #fff; }
.move-folder-empty {
  padding: 14px 12px; color: var(--dim);
  font-size: .85rem; font-style: italic;
}
.delete-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 849;
}
.btn-delete-ok {
  background: #aa2222; border: none; color: #fff;
  padding: 8px 20px; border-radius: 6px;
  font-size: .9rem; cursor: pointer; transition: background .15s;
}
.btn-delete-ok:hover { background: #cc3333; }

/* Toast */
#toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: var(--toolbar); border: 2px solid var(--border);
  border-radius: 10px; padding: 13px 28px;
  font-size: 1rem; font-weight: 600; z-index: 1100;
  opacity: 0; transition: opacity .2s;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
#toast.show      { opacity: 1; }
#toast.t-success { border-color: var(--green);   color: #fff; background: #1a4a2e; }
#toast.t-error   { border-color: var(--red);     color: #fff; background: #4a1a1e; }
#toast.t-info    { border-color: var(--fileblue); color: #fff; background: #1a2e4a; }

/* ═══════════════════════════════════════════════════════════════
   FILE VIEWER MODAL
   ═══════════════════════════════════════════════════════════════ */
#viewerModal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 750;
}
#viewerModal.hidden { display: none; }

#viewerOverlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}

.viewer-win {
  position: relative;
  z-index: 1;
  width: 88vw; max-width: 1100px;
  height: 82vh;
  background: var(--win-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: max-width .15s ease;
}

/* Hex mode: shrink to fit the ~65-char dump line + padding */
.viewer-win--hex {
  max-width: 640px;
}

/* Title bar */
.viewer-titlebar {
  background: linear-gradient(135deg, var(--titlebar), var(--titlebar2));
  padding: 9px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #004499;
  flex-shrink: 0;
  gap: 10px;
}
.viewer-tb-left  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.viewer-tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.viewer-ico      { font-size: 1.1rem; }
.viewer-filename {
  font-weight: 700; color: #fff; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-meta {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px; padding: 1px 7px;
  font-size: .72rem; color: #cce4ff; white-space: nowrap;
}

.viewer-chk-badge {
  border-radius: 4px; padding: 1px 7px;
  font-size: .72rem; white-space: nowrap;
}
.viewer-chk-badge.chk-ok {
  background: rgba(40,180,80,.22);
  border: 1px solid rgba(40,180,80,.55);
  color: #7fffaa;
}
.viewer-chk-badge.chk-partial {
  background: rgba(255,136,0,.18);
  border: 1px solid rgba(255,136,0,.45);
  color: #ffcc77;
}
.viewer-chk-badge.hidden { display: none; }

.viewer-toggle {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; padding: 3px 11px; border-radius: 4px;
  cursor: pointer; font-size: .78rem; transition: background .15s;
  white-space: nowrap;
}
.viewer-toggle:hover { background: rgba(255,255,255,.24); }

.viewer-pp20-btn {
  background: rgba(255,136,0,.18);
  border: 1px solid rgba(255,136,0,.55);
  color: #ffbb55; padding: 3px 11px; border-radius: 4px;
  cursor: pointer; font-size: .78rem; transition: background .15s;
  white-space: nowrap;
}
.viewer-pp20-btn:hover:not(:disabled) { background: rgba(255,136,0,.35); }
.viewer-pp20-btn:disabled {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.25);
  cursor: default;
}

.viewer-close-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 3px 11px; border-radius: 4px;
  cursor: pointer; font-size: .85rem; transition: background .15s;
}
.viewer-close-btn:hover { background: rgba(220,30,30,.55); }

/* Content area */
.viewer-corrupt-banner {
  background: #3d1a00; border-bottom: 1px solid #804010;
  padding: 7px 16px;
  font-size: .80rem; color: #ffbb55;
  flex-shrink: 0;
  user-select: text;
}
.viewer-corrupt-banner.hidden { display: none; }

.viewer-content {
  flex: 1; overflow: auto;
  margin: 0; padding: 14px 18px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
  font-size: .82rem; line-height: 1.55;
  color: #1e1e1e;
  white-space: pre-wrap;
  background: #f7f6f3;
  tab-size: 8;
}
.viewer-content::-webkit-scrollbar       { width: 8px; height: 8px; }
.viewer-content::-webkit-scrollbar-track { background: #eeede9; }
.viewer-content::-webkit-scrollbar-thumb { background: #c0bdb6; border-radius: 4px; }

/* Hex dump colouring */
.hx-off  { color: #9e9891; }          /* address column      */
.hx-hex  { color: #1e1e1e; }          /* all hex byte values */
.hx-asc  { color: #1e1e1e; }          /* printable ASCII     */
.hx-dot  { color: #bbb8b0; }          /* non-printable dot   */

/* Status bar */
.viewer-statusbar {
  background: #edecea; border-top: 1px solid #d4d1cb;
  padding: 4px 16px;
  font-size: .74rem; color: #6b6760;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PROPERTIES MODAL
   ═══════════════════════════════════════════════════════════════ */
#propsModal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 760;
}
#propsModal.hidden { display: none; }
#propsCorruptWarning.hidden { display: none; }
#propsLegendBad.hidden { display: none; }

.props-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.props-win {
  position: relative; z-index: 1;
  width: 900px; max-width: 96vw;
  background: #f4f2ee;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.props-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--titlebar); border-bottom: 1px solid var(--titlebar2);
  padding: 9px 14px;
  flex-shrink: 0;
}
.props-title-text { color: var(--text); font-size: .85rem; font-weight: 600; }

.props-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.75); font-size: .9rem; padding: 2px 6px; border-radius: 4px;
}
.props-close-btn:hover { background: rgba(220,30,30,.4); color: #fff; }

.props-body {
  padding: 14px 18px 16px;
  overflow-y: auto; max-height: 82vh;
}

.props-header-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.props-big-ico   { font-size: 2rem; line-height: 1; }
.props-filename  { font-size: 1rem; font-weight: 700; color: #1a1a1a; word-break: break-all; }
.props-kind      { font-size: .78rem; color: #777; margin-top: 2px; }

.props-divider { height: 1px; background: #dbd8d2; margin: 8px 0; }

.props-dl {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 4px 10px; margin: 0; padding: 0;
  font-size: .82rem;
}
.props-dl dt { color: #888; font-weight: 500; white-space: nowrap; }
.props-dl dd { color: #1a1a1a; margin: 0; font-family: 'Cascadia Code','Fira Code','Consolas',monospace; }

.props-edit-section {
  display: flex; flex-direction: column; gap: 6px;
}

/* Protection group + Comment group side by side */
.props-edit-row {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.props-prot-group {
  display: flex; flex-direction: column; gap: 4px;
}
.props-comment-group {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;
}

.props-prot-row {
  display: flex; align-items: center; gap: 3px;
}
.props-bit-label {
  display: flex; align-items: center; gap: 3px;
  font-size: .8rem; font-family: 'Cascadia Code','Fira Code','Consolas',monospace;
  color: #1a1a1a;
  cursor: pointer; padding: 3px 6px;
  background: #eae8e4; border: 1px solid #ccc;
  border-radius: 4px; user-select: none;
}
.props-bit-label:hover { background: #ddd; }
.props-bit-label input[type="checkbox"] { margin: 0; cursor: pointer; }
.props-bit-sep { width: 8px; }

.props-comment-label {
  font-size: .78rem; color: #888; font-weight: 500;
}
.props-comment-input {
  width: 100%; font-size: .82rem;
  padding: 4px 7px; border: 1px solid #ccc;
  border-radius: 4px; background: #fff;
  font-family: 'Cascadia Code','Fira Code','Consolas',monospace;
}
.props-comment-input:focus { outline: 2px solid #4a8fd4; border-color: transparent; }

.props-edit-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.props-edit-error {
  font-size: .78rem; color: #c0392b; flex: 1;
}
.btn-props-save {
  padding: 4px 14px; font-size: .82rem; font-weight: 600;
  background: #4a8fd4; color: #fff; border: none;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.btn-props-save:hover { background: #3a7bc4; }

.props-section-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #999; margin-bottom: 8px;
}

.props-legend {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; font-size: .76rem; color: #666;
}
.props-legend-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; flex-shrink: 0;
}

.props-blockmap {
  display: flex; flex-direction: column; gap: 2px;
}
.bm-row {
  display: flex; align-items: center; gap: 5px;
}
.bm-row-label {
  font-size: .65rem; color: #aaa8a2;
  font-family: 'Cascadia Code','Fira Code','Consolas',monospace;
  text-align: right;
  width: 28px; flex-shrink: 0;
}
.bm-cells {
  display: grid;
  grid-template-columns: repeat(66, 1fr);
  gap: 2px; flex: 1;
}
.bm-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #aaa;
  box-sizing: border-box;
  cursor: default;
  min-width: 0;
}
.bm-cell.bm-data   { background: #4a8fd4; }
.bm-cell.bm-header { background: #e07e18; }
.bm-cell.bm-other  { background: #e4e0da; }
.bm-cell.bm-boot   { background: #c0392b; }
.bm-cell.bm-root   { background: #27ae60; }
.bm-cell.bm-other.bm-highlight { background: #c8a050; border-color: #997030; }
.bm-cell.bm-bad {
  border: 2px solid #ff0000 !important;
  border-radius: 1px !important;
  position: relative !important;
  animation: bm-bad-strobe 0.35s steps(1) infinite !important;
}
.bm-cell.bm-bad::before,
.bm-cell.bm-bad::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: rgba(0,0,0,0.85);
  border-radius: 1px;
  pointer-events: none;
}
.bm-cell.bm-bad::before {
  width: 2px; height: auto;
  left: 50%; transform: translateX(-50%) rotate(45deg);
}
.bm-cell.bm-bad::after {
  width: 2px; height: auto;
  left: 50%; transform: translateX(-50%) rotate(-45deg);
}
@keyframes bm-bad-strobe {
  0%  { background: #ff0000; box-shadow: 0 0 8px 3px rgba(255,0,0,1); }
  50% { background: #220000; box-shadow: none; }
}
.props-legend-bad {
  border: 1px solid #ff0000;
  animation: bm-bad-strobe 0.35s steps(1) infinite;
}

/* ── Image viewer ───────────────────────────────────────────────── */
#viewerImgWrap {
  flex: 1;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
  cursor: grab;
  /* subtle checkerboard so transparent images have a visible boundary */
  background-color: #181c22;
  background-image:
    linear-gradient(45deg, #1f2530 25%, transparent 25%),
    linear-gradient(-45deg, #1f2530 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1f2530 75%),
    linear-gradient(-45deg, transparent 75%, #1f2530 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  padding: 20px;
}
#viewerImgWrap.hidden { display: none; }

#viewerCanvas, #viewerImg {
  display: block;
  box-shadow: 0 4px 32px rgba(0,0,0,.7);
}
#viewerCanvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#viewerCanvas.hidden, #viewerImg.hidden { display: none; }

#viewerImgError {
  color: var(--red); font-size: .88rem;
  padding: 12px 18px; text-align: center;
}
#viewerImgError.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SEARCH MODAL
   ═══════════════════════════════════════════════════════════════ */
#searchModal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 700;
}
#searchModal.hidden { display: none; }

#searchOverlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}

.search-win {
  position: relative; z-index: 1;
  width: 88vw; max-width: 1100px;
  height: 82vh;
  background: var(--win-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.search-titlebar {
  background: linear-gradient(135deg, #1a6e3c, #124d2b);
  padding: 9px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #0d3b21;
  flex-shrink: 0;
}
.search-title-text { color: #fff; font-size: .95rem; font-weight: 700; }
.search-close-btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 3px 11px; border-radius: 4px;
  cursor: pointer; font-size: .85rem; transition: background .15s;
}
.search-close-btn:hover { background: rgba(220,30,30,.55); }

.search-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  background: var(--list-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 7px 12px;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s;
}
#searchInput:focus        { border-color: var(--titlebar); }
#searchInput::placeholder { color: var(--dim); }

.btn-search-run {
  background: var(--titlebar); border: none; color: #fff;
  padding: 7px 22px; border-radius: 5px;
  font-size: .875rem; cursor: pointer; transition: background .15s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-search-run:hover { background: #0066cc; }

#searchResultsWrap {
  flex: 1; overflow-y: auto;
  background: var(--list-bg);
}
#searchResultsWrap::-webkit-scrollbar       { width: 8px; }
#searchResultsWrap::-webkit-scrollbar-track { background: var(--list-bg); }
#searchResultsWrap::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

.cell-path {
  color: var(--dim); font-size: .8rem;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
  overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}

.search-statusbar {
  background: #0a1520; border-top: 1px solid var(--border);
  padding: 4px 16px;
  font-size: .74rem; color: #9ab4cc;
  flex-shrink: 0;
}