:root{
    --bg: #121212;
    --bg-panel: #161616;
    --bg-well: #191919;
    --line: rgba(255,255,255,0.09);
    --line-strong: rgba(255,255,255,0.16);
    --text: #DDDDDD;
    --text-muted: #8c8c8c;
    --text-faint: #5a5a5a;
    --accent: #4941d9;
    --accent-soft: #4941d929;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    --thumb: 190px;
    --gap: 10px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
  }

  /* the [hidden] attribute must always win over any component's own
     display rule, regardless of selector specificity ties */
  [hidden]{ display:none !important; }

  *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    overflow:hidden;
    overscroll-behavior:none;
  }
  ::selection{ background:var(--accent-soft); color:var(--text); }
  button, input, select{ font-family:inherit; color:inherit; }
  button{ cursor:pointer; }
  input:focus-visible, button:focus-visible, select:focus-visible{
    outline: 1.5px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---------- shell ---------- */
  .app{
    height:100%;
    display:flex;
    flex-direction:column;
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }

  /* ---------- toolbar ---------- */
  .toolbar{
    flex:none;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:var(--bg-panel);
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
    row-gap:8px;
    position:relative;
    padding-right:48px;
  }
  /* display:contents removes the wrapper boxes from layout so every control
     becomes a direct flex item of .toolbar. The wrappers still exist in the
     DOM (so .tb-tools .sortsel style hooks keep working) but no longer trap
     leftover space inside themselves — controls pack densely across rows
     instead of each group wrapping in isolation and leaving dead gaps. */
  .tb-group{
    display:contents;
  }
  .btn{
    display:inline-flex; align-items:center; gap:6px;
    background:transparent;
    border:1px solid var(--line-strong);
    color:var(--text);
    padding:7px 12px;
    border-radius:3px;
    font-size:13px;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .btn:hover{ border-color:var(--accent); color:var(--accent); }
  .btn:active{ background:var(--accent-soft); }
  .btn svg{ width:14px; height:14px; flex:none; }
  .btn.primary{ border-color:var(--accent); color:var(--accent); }

  .help-btn{
    flex:none;
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:50%;
    color:var(--text-muted);
    font-size:12px; font-weight:600;
    line-height:1;
  }
  .help-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .tb-actions #btnHelp{
    position:absolute;
    top:10px; right:14px;
    margin-left:0;
  }

  .tb-meta{
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    justify-content:flex-start;
  }

  /* segmented layout switcher */
  .seg{
    display:flex;
    width:auto;
    border:1px solid var(--line-strong);
    border-radius:3px;
    overflow:hidden;
  }
  .seg button{
    background:transparent;
    border:none;
    color:var(--text-muted);
    font-size:12px;
    padding:7px 10px;
    display:flex; align-items:center; justify-content:flex-start; gap:5px;
    border-right:1px solid var(--line-strong);
    flex:none;
  }
  .seg button:last-child{ border-right:none; }
  .seg button svg{ width:13px; height:13px; }
  .seg button.active{ background:var(--accent-soft); color:var(--accent); }
  .seg button:hover:not(.active){ color:var(--text); }
  #typeFilterSeg span{ display:none; }
  #typeFilterSeg button{ padding:7px 4px; }

  .count{
    font-family:var(--mono);
    font-size:12px;
    color:var(--text-muted);
    padding:0 2px;
    white-space:nowrap;
    flex:0 0 auto;
    min-width:150px;
    font-variant-numeric: tabular-nums;
  }
  .count b{ color:var(--text); font-weight:600; }

  .search-wrap{
    position:relative;
    flex:1 1 200px;
    min-width:110px;
  }
  .search-wrap input{
    width:100%;
    background:var(--bg-well);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--text);
    padding:7px 10px 7px 26px;
    font-size:13px;
  }
  .search-wrap svg{
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:13px; height:13px; color:var(--text-faint); pointer-events:none;
  }

  select.sortsel{
    background:var(--bg-well);
    border:1px solid var(--line);
    border-radius:3px;
    padding:7px 8px;
    font-size:13px;
  }
  .tb-tools .sortsel{ flex:none; }
  .tb-tools #btnGroupToggle{ flex:none; justify-content:flex-start; }

  .density-wrap{
    display:flex;
    flex-basis:auto;
    align-items:center; gap:8px;
    color:var(--text-muted);
  }
  .density-wrap svg{ width:15px; height:15px; flex:none; }
  input[type=range]{
    -webkit-appearance:none; appearance:none;
    flex:none;
    width:84px; height:2px;
    background:var(--line-strong);
    border-radius:2px;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:13px; height:13px; border-radius:50%;
    background:var(--accent);
    border:2px solid var(--bg-panel);
    margin-top:-1px;
  }

  .spacer{ display:block; flex:1 1 auto; }

  /* ---------- main ---------- */
  .main{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding: 14px 14px calc(24px + var(--safe-b));
  }

  /* --- layout: grid (uniform, cropped tiles) --- */
  .grid.layout-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr));
    gap:var(--gap);
  }
  .layout-grid .cell{ aspect-ratio: 1 / 1; }
  .layout-grid .cell img, .layout-grid .cell video{ width:100%; height:100%; object-fit:cover; }

  /* --- layout: waterfall (masonry columns, full aspect ratio, no crop) --- */
  .grid.layout-waterfall{
    display:block;
    columns: var(--thumb) auto;
    column-gap: var(--gap);
  }
  .layout-waterfall .cell{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    width:100%;
    margin: 0 0 var(--gap);
    aspect-ratio: auto;
  }
  .layout-waterfall .cell img, .layout-waterfall .cell video{ width:100%; height:auto; display:block; object-fit:initial; }
  .layout-waterfall .cell.audio-tile, .layout-waterfall .cell.text-tile{ aspect-ratio: 1 / 1; }

  /* --- layout: justified (row-packed, full aspect ratio, no crop) --- */
  .grid.layout-justified{ display:block; }
  .justified-row{ display:flex; gap:var(--gap); margin-bottom:var(--gap); }
  .justified-row .cell{ flex:none; height:100%; }
  .justified-row .cell img, .justified-row .cell video{ width:100%; height:100%; object-fit:fill; display:block; }
  .measuring{
    font-family:var(--mono); font-size:12px; color:var(--text-faint);
    padding:40px 0; text-align:center;
  }

  /* --- folder group headers (span full width regardless of layout) --- */
  .group-header{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    display:flex; justify-content:space-between; align-items:baseline;
    padding:5px 1px 8px;
    margin:2px 0 var(--gap);
    border-bottom:1px solid var(--line);
  }
  .grid:not(.layout-justified) .group-header:first-child,
  .layout-justified .group-header:first-child{ margin-top:0; }
  .layout-grid .group-header{ grid-column: 1 / -1; }
  .layout-waterfall .group-header{ column-span: all; break-inside: avoid; }
  .group-header .g-count{ color:var(--text-faint); }

  .cell{
    position:relative;
    background:var(--bg-well);
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden;
    cursor:pointer;
  }
  .cell:hover{ border-color:var(--line-strong); }
  @supports (content-visibility: auto){
    .cell{
      content-visibility:auto;
      contain-intrinsic-size:200px 200px;
    }
  }
  .cell img, .cell video{
    display:block;
    opacity:0;
    transition:opacity .25s ease;
  }
  .cell img.loaded, .cell video.loaded{ opacity:1; }

  .cell.audio-tile{
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-well);
  }
  .cell.audio-tile svg{ width:34%; height:34%; color:var(--text-faint); }

  .cell.pdf-tile{
    background:var(--bg-well);
  }
  .cell.pdf-tile .pdf-fallback{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
  }
  .cell.pdf-tile .pdf-fallback svg{ width:34%; height:34%; color:var(--text-faint); }
  .cell.pdf-tile img{ position:relative; z-index:1; }

  .cell.text-tile{
    background:var(--bg-well);
    padding:9px;
    display:flex;
  }
  .cell.text-tile .text-preview{
    font-family:var(--mono);
    font-size:9.5px;
    line-height:1.5;
    color:var(--text-muted);
    white-space:pre-wrap;
    overflow:hidden;
    width:100%;
  }

  .cell .play-badge{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; border-radius:50%;
    background:rgba(8,8,7,0.55);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .cell .play-badge svg{ width:15px; height:15px; color:#fff; margin-left:2px; }

  .cell .media-duration, .cell .doc-badge{
    position:absolute; right:5px; top:5px;
    font-family:var(--mono); font-size:9.5px;
    color:rgba(236,231,221,.8);
    background:rgba(8,8,7,.55);
    padding:1px 4px; border-radius:2px;
    pointer-events:none;
    z-index:1;
  }
  .cell.text-tile .doc-badge, .cell.pdf-tile .doc-badge{
    color:var(--text-muted);
    background:rgba(0,0,0,.35);
  }
  .cell .frame-no{
    position:absolute; left:5px; bottom:4px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.03em;
    color:rgba(236,231,221,.75);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    pointer-events:none;
  }
  .cell .fname{
    position:absolute; right:5px; bottom:4px; left:32px;
    font-family:var(--mono);
    font-size:9.5px;
    text-align:right;
    color:rgba(236,231,221,.55);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity .15s ease;
  }
  .cell:hover .fname{ opacity:1; }

  .cell .cell-actions{
    position:absolute; left:5px; top:5px;
    display:flex; gap:4px;
    opacity:0;
    transition:opacity .15s ease;
    z-index:2;
  }
  .cell:hover .cell-actions{ opacity:1; }
  .cell .cell-actions button{
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,8,7,.6);
    border:none; border-radius:3px;
    color:rgba(236,231,221,.85);
    pointer-events:auto;
  }
  .cell .cell-actions button:hover{ background:rgba(8,8,7,.9); color:var(--accent); }
  .cell .cell-actions svg{ width:12px; height:12px; }
  @media (hover: none){
    .cell .cell-actions{ opacity:1; }
  }

  /* ---------- empty state ---------- */
  .empty{
    height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    gap:18px;
    padding:20px;
  }
  .empty .glyph{ width:56px; height:56px; color:var(--text-faint); }
  .empty h1{
    font-size:15px; font-weight:600; margin:0;
    color:var(--text); letter-spacing:.01em;
  }
  .empty p{
    margin:0; max-width:360px;
    font-size:13px; line-height:1.6; color:var(--text-muted);
  }
  .empty .actions{ display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
  .empty .note{
    font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:10px;
  }
  .dropzone{
    position:fixed; inset:0; z-index:50;
    background:rgba(217,164,65,0.08);
    border:2px dashed var(--accent);
    display:none;
    align-items:center; justify-content:center;
    font-family:var(--mono); color:var(--accent); font-size:14px;
    pointer-events:none;
  }
  .dropzone.active{ display:flex; }

  /* ---------- help modal ---------- */
  .help-modal{
    position:fixed; inset:0; z-index:120;
    background:rgba(8,8,7,0.75);
    display:none;
    align-items:center; justify-content:center;
    padding:24px calc(24px + var(--safe-r)) calc(24px + var(--safe-b)) calc(24px + var(--safe-l));
  }
  .help-modal.open{ display:flex; }
  .help-card{
    width:min(560px, 100%);
    max-height:min(720px, 90vh);
    display:flex; flex-direction:column;
    background:var(--bg-panel);
    border:1px solid var(--line-strong);
    border-radius:6px;
    overflow:hidden;
  }
  .help-head{
    flex:none;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--line);
  }
  .help-head h2{
    margin:0; font-size:15px; font-weight:600; color:var(--text);
  }
  .help-body{
    overflow-y:auto;
    padding:6px 18px 18px;
  }
  .help-body section{ margin-top:16px; }
  .help-body h3{
    margin:0 0 8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-faint); font-weight:600;
  }
  .help-row{
    display:flex; gap:14px;
    padding:9px 0;
    border-top:1px solid var(--line);
  }
  .help-row:first-of-type{ border-top:none; }
  .help-label{
    flex:0 0 78px;
    font-size:12.5px; font-weight:600; color:var(--accent);
    padding-top:1px;
  }
  .help-desc{
    flex:1 1 auto;
    font-size:12.5px; line-height:1.55; color:var(--text-muted);
  }
  .help-desc strong{ color:var(--text); }
  .help-tip{
    margin:18px 0 4px;
    padding:10px 12px;
    background:var(--bg-well);
    border:1px solid var(--line);
    border-radius:4px;
    font-size:12px; line-height:1.5; color:var(--text-muted);
  }

  /* ---------- lightbox ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:100;
    background:rgba(8,8,7,0.97);
    display:none;
    flex-direction:column;
  }
  .lightbox.open{ display:flex; }
  .lb-bar{
    flex:none;
    display:flex; align-items:center; justify-content:space-between;
    padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l));
    font-family:var(--mono); font-size:12px; color:var(--text-muted);
  }
  .lb-bar .lb-index b{ color:var(--accent); }
  .lb-bar .lb-name{
    max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .lb-bar-actions{
    display:flex; align-items:center; gap:2px;
  }
  .lb-close{
    background:none; border:none; color:var(--text-muted); padding:4px;
    display:flex; align-items:center;
  }
  .lb-close:hover{ color:var(--accent); }
  .lb-close svg{ width:20px; height:20px; }

  .lb-stage{
    flex:1 1 auto;
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    touch-action:none;
  }
  .lb-stage img{
    max-width:100%; max-height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    transform-origin:center center;
    will-change:transform;
  }
  .lb-stage video{
    max-width:100%; max-height:100%;
    object-fit:contain;
  }
  .lb-audio{
    display:flex; flex-direction:column; align-items:center; gap:26px;
    padding:20px;
  }
  .lb-audio .lb-audio-glyph{ width:25vw; height:25vw; max-width:120px; max-height:120px; color:var(--text-faint); }
  .lb-audio .lb-audio-glyph svg{ width:100%; height:100%; }
  .lb-audio audio{ width:min(74vw, 420px); }

  .lb-stage iframe.lb-pdf{
    width:92%; height:92%;
    border:none;
    background:#fff;
    border-radius:2px;
  }
  .lb-text{
    width:min(760px, 88vw);
    height:82%;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .lb-text-bar{
    flex:none;
    display:flex; justify-content:flex-end;
  }
  .lb-text-bar .btn{ padding:5px 10px; font-size:11px; }
  .lb-text pre, .lb-markdown{
    flex:1 1 auto;
    margin:0;
    padding:20px 22px;
    box-sizing:border-box;
    overflow:auto;
    background:var(--bg-well);
    border:1px solid var(--line);
    border-radius:3px;
    font-size:13px;
    line-height:1.6;
    color:var(--text);
  }
  .lb-text pre{
    font-family:var(--mono);
    white-space:pre-wrap;
    word-break:break-word;
  }
  #lbTextContent.hljs{
    white-space:pre;
    overflow-x:auto;
  }
  .lb-markdown{
    font-family:var(--sans);
  }
  .lb-markdown h1, .lb-markdown h2, .lb-markdown h3,
  .lb-markdown h4, .lb-markdown h5, .lb-markdown h6{
    margin:1.1em 0 .5em; line-height:1.3; font-weight:600; color:var(--text);
  }
  .lb-markdown h1:first-child, .lb-markdown h2:first-child, .lb-markdown h3:first-child{ margin-top:0; }
  .lb-markdown h1{ font-size:1.5em; }
  .lb-markdown h2{ font-size:1.28em; }
  .lb-markdown h3{ font-size:1.12em; }
  .lb-markdown p{ margin:0 0 1em; }
  .lb-markdown ul, .lb-markdown ol{ margin:0 0 1em; padding-left:1.4em; }
  .lb-markdown li{ margin:.25em 0; }
  .lb-markdown li input[type="checkbox"]{ margin-right:6px; }
  .lb-markdown blockquote{
    margin:0 0 1em; padding:2px 14px;
    border-left:2px solid var(--line-strong);
    color:var(--text-muted);
  }
  .lb-markdown code{
    font-family:var(--mono); font-size:.9em;
    background:var(--bg-panel); padding:1px 5px; border-radius:3px;
  }
  .lb-markdown pre{
    background:var(--bg-panel); border:1px solid var(--line);
    border-radius:3px; padding:12px 14px; overflow:auto; margin:0 0 1em;
  }
  .lb-markdown pre code{ background:none; padding:0; font-size:1em; }
  .lb-markdown a{ color:var(--accent); }
  .lb-markdown hr{ border:none; border-top:1px solid var(--line); margin:1.4em 0; }
  .lb-markdown img{ max-width:100%; border-radius:3px; }
  .lb-markdown del{ opacity:.6; }
  .lb-markdown table{ border-collapse:collapse; width:100%; margin:0 0 1em; }
  .lb-markdown th, .lb-markdown td{ border:1px solid var(--line); padding:6px 10px; text-align:left; }
  .lb-markdown thead{ background:var(--bg-panel); }
  .lb-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,8,7,0.3);
    border:none; border-radius:50%;
    color:rgba(236,231,221,0.45);
    transition:background .15s ease, color .15s ease;
  }
  .lb-nav:hover{ color:rgba(236,231,221,0.9); background:rgba(255,255,255,0.1); }
  .lb-nav svg{ width:20px; height:20px; margin:0; }
  .lb-nav.prev{ left: calc(14px + var(--safe-l)); }
  .lb-nav.next{ right: calc(14px + var(--safe-r)); }

  .lb-foot{
    flex:none;
    padding: 8px 14px calc(12px + var(--safe-b));
    text-align:center;
    font-family:var(--mono); font-size:10.5px;
    color:var(--text-faint);
  }

  .lightbox:fullscreen .lb-bar,
  .lightbox:fullscreen .lb-foot{
    display:none;
  }

  /* ---------- scrollbar (webkit) ---------- */
  .main::-webkit-scrollbar{ width:10px; }
  .main::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; border:2px solid var(--bg); }
  .main::-webkit-scrollbar-track{ background:transparent; }

  @media (prefers-reduced-motion: reduce){
    .cell img, .fname{ transition:none !important; }
  }

  @media (max-width:560px){
    .help-row{ flex-direction:column; gap:3px; }
    .help-label{ flex:none; }
  }

  /* Type-filter labels only need enough room for that one row of six
     buttons, not the whole toolbar — so this gets its own, much smaller
     breakpoint instead of waiting on the big one below. */
  @media (min-width:560px){
    #typeFilterSeg span{ display:inline; }
    #typeFilterSeg button{ padding:7px 10px; }
  }

  /* Below this width there isn't room for groups to sit side by side at all,
     so the bigger controls each take a full-width row and stretch to fill
     it. Above this width the toolbar just wraps naturally (see the .toolbar
     and .tb-group rules above) — controls pack densely across as many rows
     as they need. */
  @media (max-width:640px){
    .toolbar{ gap:8px; padding-right:14px; }
    .tb-actions #btnHelp{ position:static; margin-left:auto; }
    .tb-meta{ flex:1 1 100%; justify-content:space-between; }
    .seg{ flex:1 1 100%; width:100%; }
    .seg button{ flex:1 1 0; justify-content:center; }
    .search-wrap{ flex:1 1 100%; min-width:0; }
    .tb-tools .sortsel{ flex:1 1 0; }
    .tb-tools #btnGroupToggle{ flex:1 1 0; justify-content:center; }
    .density-wrap{ flex:1 1 100%; }
    input[type=range]{ flex:1 1 auto; width:auto; }
    .spacer{ display:none; }
  }