/*
  Wayfinder v3 stylesheet.
  Created: 2026-07-08 · Last modified: 2026-07-10 (v3 pass: bigger brand,
  sidebar locations + typography, destination panel, status-bar path,
  danger-weighted Empty Trash, refined open view, shared tooltips).
  Author: Fable 5, via Claude Code, VPS 144.202.1.126
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --sidebar-w:   252px;
  --bg:          #060a12;
  --bg2:         #080c14;
  --surface:     #0d1420;
  --surface2:    #111a28;
  --border:      #1a2535;
  --border-lit:  #25405f;
  --accent:      #4a9eff;
  --cyan:        #36e2e2;
  --gold:        #c9a84c;
  --gold-lit:    #f0d98a;
  --green:       #3ecf8e;
  --rose:        #ff5d7a;
  --text:        #d4dce8;
  --dim:         #6b7c93;
  --bright:      #f0f4f8;
  --glow-blue:   0 0 24px rgba(74,158,255,0.45);
  --glow-cyan:   0 0 22px rgba(54,226,226,0.40);
  --glow-gold:   0 0 22px rgba(201,168,76,0.40);
  --radius:      10px;
  --font-ui:     'Inter', system-ui, sans-serif;
  --font-title:  'Cinzel', serif;
  --font-mono:   'JetBrains Mono', monospace;
  --folder-default: #4a9eff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.hidden { display: none !important; }
button {
  font-family: var(--font-ui);
  cursor: pointer;
}
button:disabled { cursor: default; opacity: 0.45; }
input {
  font-family: var(--font-ui);
}

/* ---------- Login ---------- */
.login-screen {
  height: 100vh; width: 100vw;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--bg2), var(--bg));
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  width: 300px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.login-title {
  font-family: var(--font-title);
  font-size: 24px;
  color: var(--gold-lit);
  text-shadow: var(--glow-gold);
  text-align: center;
}
.login-sub {
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.login-card input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  outline: none;
}
.login-card input:focus {
  border-color: var(--border-lit);
  box-shadow: var(--glow-blue);
}
.login-card button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 500;
  margin-top: 8px;
}
.login-card button:hover { box-shadow: var(--glow-blue); }
.login-error {
  color: var(--rose);
  font-size: 12px;
  min-height: 14px;
  text-align: center;
}

/* ---------- App shell ---------- */
.app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 10px 12px;
  min-height: 0;
}
/* v3: the logo reads bigger and unmistakably as the app's masthead */
.brand {
  font-family: var(--font-title);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-lit);
  text-shadow: 0 0 30px rgba(201,168,76,0.65), 0 0 12px rgba(240,217,138,0.35);
  padding: 4px 10px 14px;
}
.sidebar-scroll {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.goto-sidebar-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
  margin: 0 2px 12px;
}
.goto-sidebar-input:focus { border-color: var(--accent); }

.sidebar-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* v4.4: the first tint pass (6% opacity, 2px inset) was barely
     distinguishable from the plain rows below it. This is now a solid,
     clearly-visible tinted bar spanning the sidebar's full width — the
     -10px margin cancels .sidebar's own 10px side padding so the tint
     reaches both edges instead of floating inset. */
  background: rgba(74,158,255,0.22);
  border-radius: 0;
  margin: 0 -10px;
}
/* v3 typography: section labels are bigger, brighter, bolder, underlined */
.sidebar-group-title {
  color: #a9bdd8;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(169,189,216,0.5);
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.group-action-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 11px;
  padding: 0 3px;
  border-radius: 4px;
  visibility: hidden;
}
.sidebar-group-header:hover .group-action-btn { visibility: visible; }
.group-action-btn:hover { color: var(--bright); background: var(--surface2); }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: #e2eaf5; /* v3: sidebar text sits brighter than body text */
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  position: relative;
}
.sidebar-item .icon { width: 16px; text-align: center; color: var(--dim); flex-shrink: 0; }
.sidebar-item .folder-svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sidebar-item:hover { background: var(--surface2); }
.sidebar-item.active { background: var(--surface2); color: var(--bright); box-shadow: inset 2px 0 0 var(--accent); }
.unpin-btn {
  background: transparent; border: none;
  color: var(--dim);
  font-size: 13px;
  padding: 0 2px;
  border-radius: 4px;
  visibility: hidden;
  flex-shrink: 0;
}
.sidebar-item:hover .unpin-btn { visibility: visible; }
.unpin-btn:hover { color: var(--rose); }
/* v4.4: pinned items now open the shared context menu (rename/customize/
   remove) via this "⋯" trigger instead of a bare one-click delete "−" —
   neutral hover, not red, since opening a menu isn't itself destructive. */
.pin-kebab-btn { font-size: 13px; }
.pin-kebab-btn:hover { color: var(--bright); background: var(--surface2); }
.new-group-btn { color: var(--dim); font-size: 12px; font-weight: 400; margin-top: 2px; flex-shrink: 0; }
.new-group-btn:hover { color: var(--bright); }
.sidebar-spacer { flex: 1; min-height: 10px; }
/* v3: Settings / Trash / Logout grouped at the bottom-left of the sidebar */
.sidebar-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}
/* v4 fix: "microscopic" settings icon — repeat complaint. Bump it to a
   normal, clearly-clickable size instead of inheriting the sidebar's
   14px body text size. */
.settings-item { color: #cfd9e6; }
.settings-item .icon { font-size: 20px; width: 22px; }
.trash-item { color: #cfd9e6; }
.logout-item { color: var(--rose); }

/* ---------- Main / toolbar ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.toolbar-spacer { flex: 1; min-width: 8px; }
.tool-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.tool-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.tool-btn:hover:not(:disabled) { border-color: var(--border-lit); color: var(--bright); }
.tool-btn.active { border-color: var(--accent); color: var(--accent); }
.danger-btn { color: var(--rose); }
.danger-btn:hover:not(:disabled) { border-color: var(--rose); }
.primary-btn { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; }
.primary-btn:hover:not(:disabled) { box-shadow: var(--glow-blue); color: var(--bg); }
.nav-btn { font-size: 14px; padding: 4px 10px; }
.icon-btn { display: inline-flex; align-items: center; }
.newfolder-wrap { position: relative; display: inline-flex; color: var(--text); }
.plus-badge {
  position: absolute;
  right: -4px; bottom: -3px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  border-radius: 50%;
  width: 11px; height: 11px;
  display: flex; align-items: center; justify-content: center;
}
.tool-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.filter-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  width: 190px;
  outline: none;
  flex-shrink: 0;
}
.filter-input:focus { border-color: var(--border-lit); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--dim);
  overflow-x: auto;
  white-space: nowrap;
}
.breadcrumb .crumb {
  color: var(--text);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
}
.breadcrumb .crumb:hover { background: var(--surface2); color: var(--cyan); }
.breadcrumb .crumb:last-child { color: var(--bright); font-weight: 500; }
.breadcrumb .sep { color: var(--border-lit); }
.breadcrumb .crumb.drag-over { outline: 1px dashed var(--cyan); }

/* ---------- Workspace / listing ---------- */
.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}
.listing {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.list-header {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) var(--col-size, 100px) var(--col-kind, 160px) var(--col-mtime, 180px);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  user-select: none;
}
.list-header .col { position: relative; }
.list-header .sortable { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.list-header .sortable:hover { color: var(--bright); }
.list-header .sortable.active { color: var(--accent); }
.sort-ind { font-size: 9px; }
.col-resize-handle {
  position: absolute;
  top: 0; right: -5px; bottom: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 2;
}
.col-resize-handle:hover, .col-resize-handle.resizing { background: rgba(74,158,255,0.35); }
.listing.grid-mode .list-header { display: none; }
.listing-body {
  flex: 1;
  overflow-y: auto;
  position: relative;
  outline: none;
}

/* folder icon svg */
.folder-svg { display: inline-block; vertical-align: middle; }

/* list mode rows */
.listing.list-mode .row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) var(--col-size, 100px) var(--col-kind, 160px) var(--col-mtime, 180px);
  align-items: center;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(26,37,53,0.4);
  user-select: none;
}
.row .col-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .name-icon { width: 18px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.row .name-icon .folder-svg { width: 16px; height: 16px; }
/* v3: list view shows small real thumbnails for images */
.listing.list-mode .row .name-icon img.thumb {
  width: 18px; height: 18px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.row .name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.hidden-file { opacity: 0.55; }
.row .col-size, .row .col-kind, .row .col-mtime { color: var(--dim); font-size: 12px; }

.row:hover { background: rgba(17,26,40,0.6); }
.row.selected { background: rgba(74,158,255,0.12); box-shadow: inset 2px 0 0 var(--accent); }
.row.selected .col-size, .row.selected .col-kind, .row.selected .col-mtime { color: var(--text); }
.row.drag-over { outline: 1px dashed var(--cyan); background: rgba(54,226,226,0.08); }
.row.cut-marked { opacity: 0.5; }

/* grid mode */
.listing.grid-mode .listing-body {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 14px;
}
.listing.grid-mode .row {
  width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-radius: 8px;
  border-bottom: none;
  text-align: center;
}
.listing.grid-mode .row .col-size,
.listing.grid-mode .row .col-kind,
.listing.grid-mode .row .col-mtime { display: none; }
/* v4 fix: .col-name's base rule is a horizontal flex row (icon beside text
   — correct for list mode) and was never overridden here, so in grid mode
   the tall 64px icon and the name text stayed side-by-side in a 116px-wide
   cell instead of stacking, crowding/overlapping each other. */
.listing.grid-mode .row .col-name { flex-direction: column; gap: 6px; }
.listing.grid-mode .row .name-icon { font-size: 34px; width: 64px; height: 64px; }
.listing.grid-mode .row .name-icon .folder-svg { width: 52px; height: 52px; }
/* v4 fix: max-width/max-height alone let the rendered size follow the
   source image's own aspect ratio (a 16:9 image hit max-width first and
   rendered wider than a square image capped by max-height). A fixed
   width+height box with object-fit:cover crops every thumbnail to the
   same bounding box regardless of source aspect ratio. */
.listing.grid-mode .row .name-icon img.thumb {
  width: 64px; height: 64px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid var(--border);
}
/* v3: long names clip with an ellipsis instead of wrapping and distorting the grid */
.listing.grid-mode .row .name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  max-width: 104px;
}
.listing.grid-mode .row.selected { box-shadow: none; background: rgba(74,158,255,0.18); }

/* ---------- Columns (Miller) view ---------- */
.columns-view {
  flex: 1;
  display: flex;
  overflow-x: auto;
  min-width: 0;
}
.miller-col {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 6px 4px;
}
.miller-col .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  user-select: none;
  min-width: 0;
}
.miller-col .row .col-size, .miller-col .row .col-kind, .miller-col .row .col-mtime { display: none; }
.miller-col .row .chevron { margin-left: auto; color: var(--dim); font-size: 10px; flex-shrink: 0; }
.miller-col .row.path-selected { background: var(--surface2); }
.miller-preview {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.miller-preview-header {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
  flex-shrink: 0;
}
.miller-preview-close {
  padding: 3px 9px;
  font-size: 14px;
  line-height: 1;
}
.miller-preview-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.miller-preview img { max-width: 100%; border-radius: 6px; }
.miller-preview pre {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}
.miller-preview .info-row { display: flex; flex-direction: column; gap: 2px; }
.miller-empty { color: var(--dim); font-size: 12px; padding: 12px; }

.marquee {
  position: absolute;
  border: 1px solid var(--accent);
  background: rgba(74,158,255,0.12);
  pointer-events: none;
  z-index: 5;
}
.load-more-sentinel { height: 1px; }

/* rename input */
.rename-input {
  background: var(--surface2);
  border: 1px solid var(--accent);
  color: var(--bright);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  width: 100%;
  outline: none;
}

/* ---------- Context menu ---------- */
.context-menu {
  position: fixed;
  z-index: 400;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-lit);
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
}
.ctx-item {
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ctx-item:hover:not(:disabled) { background: var(--surface2); color: var(--bright); }
/* v3 visual weight: destructive entries read heavier than routine ones */
.ctx-item.danger { color: var(--rose); font-weight: 600; text-shadow: 0 0 10px rgba(255,93,122,0.35); }
.ctx-item.danger:hover:not(:disabled) { background: rgba(255,93,122,0.12); color: #ff8299; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* ---------- Info / preview panel ---------- */
.info-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.info-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  color: var(--bright);
}
.info-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.info-row { display: flex; flex-direction: column; gap: 2px; }
.info-label { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.info-value { font-size: 12px; word-break: break-all; font-family: var(--font-mono); }
.info-value.link { color: var(--cyan); cursor: pointer; }
/* v4: Kind/Size, Modified/Created, Permissions/Owner side by side — all
   are short strings, no need to stack them each on their own line. */
.info-row-pair { display: flex; gap: 16px; }
.info-row-pair .info-row { flex: 1; min-width: 0; }
.info-row-pair.faint .info-label { font-size: 9px; }
.info-row-pair.faint .info-value { font-size: 11px; color: var(--dim); }
.size-btn { align-self: flex-start; }

.preview-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.preview-body img { max-width: 100%; border-radius: 6px; }
.preview-body iframe { width: 100%; height: 100%; min-height: 300px; border: none; border-radius: 6px; background: #fff; }
.preview-body video, .preview-body audio { width: 100%; }
.preview-body pre {
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  overflow-y: auto;
  max-height: 400px;
}

/* ---------- Maximized open view (v3: sidebar stays visible beside it) ---------- */
.open-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--sidebar-w);
  z-index: 300;
  background: rgba(6,10,18,0.98);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.open-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.open-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.open-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bright);
  text-shadow: 0 0 14px rgba(240,244,248,0.25);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60vw;
}
.open-path {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60vw;
}
.open-actions { display: flex; gap: 8px; flex-shrink: 0; justify-self: end; }
.open-main {
  flex: 1;
  min-height: 0;
  display: flex;
}
.open-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}
/* slim secondary panel for the opened file's info/details */
.open-info {
  width: 230px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.open-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.open-body img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; }
.open-body iframe { width: 100%; height: 100%; border: none; border-radius: 6px; background: #fff; }
.open-body video { max-width: 100%; max-height: 100%; }
.open-body audio { width: 60%; }
.open-body pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
}
.open-none { color: var(--dim); }

/* ---------- Status bar (v3: carries the path + Empty Trash) ---------- */
.statusbar {
  padding: 4px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  color: var(--dim);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 30px;
}
.statusbar-spacer { flex: 1; }
.statusbar .breadcrumb { font-size: 11.5px; max-width: 45%; flex-shrink: 0; }
/* Empty Trash: deliberately unmistakable — red ring, red glow, glowing
   white label in the display face so it never reads as a routine button. */
.empty-trash-btn {
  background: rgba(255,93,122,0.07);
  border: 1.5px solid var(--rose);
  border-radius: 999px;
  padding: 4px 16px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 0 9px rgba(255,255,255,0.85), 0 0 18px rgba(255,93,122,0.6);
  box-shadow: 0 0 14px rgba(255,93,122,0.30), inset 0 0 10px rgba(255,93,122,0.12);
  flex-shrink: 0;
}
.empty-trash-btn:hover {
  background: rgba(255,93,122,0.16);
  box-shadow: 0 0 22px rgba(255,93,122,0.55), inset 0 0 12px rgba(255,93,122,0.2);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border-lit);
  color: var(--bright);
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: var(--glow-blue);
  font-size: 12px;
  z-index: 500;
}
.toast.error { border-color: var(--rose); color: var(--rose); box-shadow: 0 0 22px rgba(255,93,122,0.35); }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(6,10,18,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 350;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  padding: 20px;
  width: 380px;
  max-height: 86vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-message { color: var(--bright); font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.modal-actions-spacer { flex: 1; }
.goto-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  outline: none;
  font-size: 12px;
}
.goto-input:focus { border-color: var(--accent); }
.dest-files {
  max-height: 120px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* settings + customize */
.settings-card, .customize-card { width: 440px; }
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--bright);
  font-weight: 500;
  font-size: 14px;
}
.settings-section {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.settings-section-title {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text);
}
.settings-row.check-row { justify-content: flex-start; gap: 8px; }
.settings-hint { color: var(--dim); font-size: 11px; }

.customize-preview-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
}
.customize-preview { font-size: 40px; display: inline-flex; }
.customize-preview .folder-svg { width: 46px; height: 46px; }
.customize-name { font-size: 14px; color: var(--bright); word-break: break-all; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.selected { border-color: var(--bright); box-shadow: 0 0 0 2px var(--accent); }
.swatch.swatch-default {
  background: var(--surface2);
  color: var(--dim);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.swatch.swatch-default.selected { border-color: var(--bright); }
.custom-color-row { justify-content: flex-start; gap: 10px; color: var(--dim); font-size: 12px; }
.custom-color-row input[type=color] {
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; width: 44px; height: 28px; padding: 2px; cursor: pointer;
}
.icon-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-cell {
  width: 34px; height: 34px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.icon-cell:hover { border-color: var(--border-lit); }
.icon-cell.selected { border-color: var(--accent); box-shadow: var(--glow-blue); }
.icon-cell .folder-svg { width: 20px; height: 20px; }
.future-section { opacity: 0.75; }
.future-row { display: flex; gap: 8px; }
.future-row .goto-input { flex: 1; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 6px; }

/* ==========================================================================
   v3 additions — sidebar locations, volume badges, destination sub-panel,
   shared two-tier tooltips.
   ========================================================================== */

/* ---------- Sidebar: Locations (disk/volume grouping) ---------- */
.sidebar-locations { display: flex; flex-direction: column; gap: 2px; }
.sidebar-locations .drive-svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--cyan); }
.loc-sublabel {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 10px 0;
}
.loc-free {
  margin-left: auto;
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 400;
  flex-shrink: 0;
}

/* volume badge on pinned/favourite paths */
/* v4 fix: this used to render as a bold bordered pill (background + border +
   uppercase cyan text) — much louder than the plain sidebar item text next
   to it, and repetitive besides (nearly every default Favourite lives on the
   same "ROOT" volume). Still useful at a glance for which volume a favourite
   is on, so kept — but restyled as quiet inline text, matching the sidebar's
   other subtle metadata (e.g. .loc-free's "9.1 GB free"), not a call-to-
   action-looking button. */
.vol-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: none;
  padding: 0;
}
.sidebar-item:hover .vol-badge { display: none; } /* yield space to the unpin control */

/* ---------- Destination sub-panel (upload target + move picker) ---------- */
.dest-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dest-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.dest-panel-title {
  color: #a9bdd8;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(169,189,216,0.5);
}
.dest-goto { margin: 10px 10px 6px; }
.dest-path-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  padding: 0 12px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.dest-listing {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px;
}
.dest-listing.drag-over {
  outline: 2px dashed var(--cyan);
  outline-offset: -4px;
  background: rgba(54,226,226,0.06);
}
.dest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  min-width: 0;
}
.dest-row:hover { background: var(--surface2); }
.dest-row .name-icon { flex-shrink: 0; display: inline-flex; }
.dest-row .name-icon .folder-svg { width: 15px; height: 15px; }
.dest-row .name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-row.dest-file { color: var(--dim); cursor: default; }
.dest-row.dest-file:hover { background: transparent; }
.dest-row.dest-up { color: var(--dim); }
.dest-empty { color: var(--dim); font-size: 11.5px; padding: 10px; }
.dest-panel-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.dest-panel-footer .tool-btn { flex: 1; }
.dest-move-pending {
  color: var(--cyan);
  font-size: 11px;
  padding: 0 12px 8px;
}

/* ---------- Shared two-tier hover tooltip ---------- */
.wf-tooltip {
  position: fixed;
  z-index: 700;
  max-width: 280px;
  background: var(--surface2);
  border: 1px solid var(--border-lit);
  border-radius: 7px;
  padding: 7px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  pointer-events: none;
  font-size: 12px;
}
.wf-tooltip .tip-label { color: var(--bright); font-weight: 600; }
.wf-tooltip .tip-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  margin-top: 2px;
}
.wf-tooltip .tip-more {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ==========================================================================
   v4 additions — split-pane workspace, per-pane toolbar/statusbar, group
   recolor swatch, zoom zones.
   ========================================================================== */

/* ---------- Split-pane workspace ---------- */
.panes {
  flex: 1;
  display: flex;
  min-height: 0;
  /* Flex items default to min-width:auto, so without this, Columns view's
     wide fixed-width Miller columns refuse to shrink and force the whole
     workspace wider than the viewport — shoving the info-panel (fixed
     320px) off the right edge instead of scrolling inside .columns-view's
     own overflow-x:auto. This was the "broken leftover pane" bug when
     switching to Columns view with a preview open. */
  min-width: 0;
  overflow: hidden;
}
.pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border);
  position: relative;
}
.pane:last-child { border-right: none; }
.pane.pane-active { box-shadow: inset 0 0 0 1px rgba(74,158,255,0.30); }
.pane.hidden { display: none; }

/* v4 header redesign: 3-column grid so the folder name genuinely centers
   regardless of the nav-button/search+view-toggle groups' widths (same
   "1fr auto 1fr won't truly center" issue as the status bar below). */
.pane-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.pane-toolbar-nav { display: flex; align-items: center; gap: 6px; }
.pane-toolbar-center {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.pane-dirname {
  font-weight: 700;
  color: var(--bright);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.pane-freespace { color: var(--dim); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.pane-piechart {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.pane-toolbar-right { display: flex; align-items: center; justify-self: end; min-width: 0; }
.pane-toolbar-right .filter-input { width: 140px; flex-shrink: 1; }
.pane-toolbar-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 10px; flex-shrink: 0; }
.pane-toolbar-viewbtns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.pane-picker-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(74,158,255,0.10);
  border-bottom: 1px solid var(--border-lit);
  color: var(--bright);
  font-size: 12px;
}
.pane-picker-banner .picker-label { font-weight: 500; }
.pane-picker-banner .spacer { flex: 1; }

.pane-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}
.pane-body .listing { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.pane-body .columns-view { flex: 1; display: flex; overflow-x: auto; min-width: 0; }

/* Grid, not flex+spacer: a spacer trick can't truly center the middle
   item when the left/right groups are unequal widths (which they always
   are here — breadcrumb varies, Empty Trash only sometimes shows). 1fr
   auto 1fr gives status-count a real center regardless. */
.pane-statusbar {
  padding: 3px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  color: var(--dim);
  font-size: 10.5px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}
.pane-statusbar .breadcrumb {
  font-size: 10px;
  max-width: 100%;
  overflow: hidden;
  color: var(--dim);
  opacity: 0.75;
  gap: 2px; /* tighter spacing between path segments */
}
.pane-statusbar .breadcrumb .crumb { padding: 2px 3px; }
.status-center { justify-self: center; white-space: nowrap; }
.status-right { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* ---------- Sidebar group swatch + kebab (editable groups, v4) ---------- */
.group-swatch {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border-lit);
  padding: 0;
  background: var(--surface2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}
.group-kebab-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 13px;
  padding: 0 3px;
  border-radius: 4px;
  visibility: hidden;
}
.sidebar-group-header:hover .group-kebab-btn { visibility: visible; }
.group-kebab-btn:hover { color: var(--bright); background: var(--surface2); }

/* ---------- Zoom zones (Settings > Zoom) ---------- */
.zoom-row { gap: 10px; }
.zoom-row input[type=range] { flex: 1; accent-color: var(--accent); }
.zoom-val { width: 42px; text-align: right; color: var(--dim); font-size: 11px; flex-shrink: 0; }
.sidebar { zoom: var(--wf-zoom-sidebar, 1); }
#panes { zoom: var(--wf-zoom-main, 1); }
/* v4 fix: zooming the whole flex-centering container (.preview-body /
   .open-main) fought its own overflow clipping — the box's content grew
   per the zoom factor but the flex-centered layout clipped it against the
   fixed-size panel/overlay around it, so a bigger zoom value could show
   LESS of the image (backwards-feeling) and, past a point, nothing
   visibly changed at all (meaningless range). Zoom the actual media
   elements directly instead — plain leaf elements with no centering/
   clipping of their own, so bigger zoom reliably means bigger image/text. */
.preview-body img, .preview-body video, .preview-body pre, .preview-body iframe,
.open-body img, .open-body video, .open-body pre, .open-body iframe {
  zoom: var(--wf-zoom-preview, 1);
}