*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Default = Amber */
  --bg:#06080a; --bg2:#0a0e13; --panel:#0b1015; --panel2:#0e151c;
  --line:#1b2530; --line2:#28394a;
  --txt:#cfd8e0; --dim:#6b7c8c; --dim2:#8093a3;
  --neon:#fcee0a; --cyan:#00f0ff; --mag:#ff2a6d; --green:#00ff9f; --amber:#ff9f1c;
  --mono:'JetBrains Mono',monospace; --disp:'Rajdhani',sans-serif;
  /* ===== DETAILS TABLE — grid areas (stable 10-slot map) =====
     sel | ic | name | ket | code | auth | size | date | mode | action
     Area NAMES never change across breakpoints — only track SIZES do.
     Hidden columns → 0px track (area stays reserved, no reflow/overlap).
  */
  --c-sel:    36px;
  --c-ic:     40px;
  --c-name:   minmax(160px, 1.4fr);
  --c-ket:    minmax(100px, 1fr);
  --c-code:   64px;
  --c-auth:   176px;
  --c-size:   88px;
  --c-date:   132px;
  --c-mode:   minmax(76px, 76px);    /* fixed MODE */
  --c-action: minmax(152px, 152px);  /* fixed ACTION (5 btn) */
  --table-min: 1160px;
  --cols: var(--c-sel) var(--c-ic) var(--c-name) var(--c-ket) var(--c-code)
          var(--c-auth) var(--c-size) var(--c-date) var(--c-mode) var(--c-action);

  --areas: "sel ic name ket code auth size date mode action";
  /* Scrollbar tokens (follow theme) */
  --sb-size: 10px;
  --sb-size-sm: 6px;
  --sb-track: transparent;
  --sb-thumb: var(--line2);
  --sb-thumb-hover: var(--neon);
  --sb-thumb-active: var(--cyan);
  --sb-corner: var(--panel);
}

/* ===== THEMED SCROLLBARS (Firefox + WebKit) ===== */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
*::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid var(--panel);
  background-clip: padding-box;
  min-height: 32px;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
  border: 2px solid var(--panel);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active);
  border: 2px solid var(--panel);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner{
  background: var(--sb-corner);
}
/* Compact scrollbars (menus, logs) */
.theme-menu,
.view-menu,
#bootLog,
#mBody,
.audit-list,
.sl-thumbs{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.theme-menu::-webkit-scrollbar,
.view-menu::-webkit-scrollbar,
#bootLog::-webkit-scrollbar,
#mBody::-webkit-scrollbar,
.audit-list::-webkit-scrollbar,
.sl-thumbs::-webkit-scrollbar{
  width: var(--sb-size-sm);
  height: var(--sb-size-sm);
}
.theme-menu::-webkit-scrollbar-thumb,
.view-menu::-webkit-scrollbar-thumb,
#bootLog::-webkit-scrollbar-thumb,
#mBody::-webkit-scrollbar-thumb,
.audit-list::-webkit-scrollbar-thumb,
.sl-thumbs::-webkit-scrollbar-thumb{
  border-width: 1px;
  border-radius: 6px;
}
/* Main listing scrollbar slightly thicker */
#rows{
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
#rows::-webkit-scrollbar{width: var(--sb-size);}
#rows::-webkit-scrollbar-track{background: var(--sb-track);}
#rows::-webkit-scrollbar-thumb{
  background: var(--line2);
  border: 2px solid var(--panel);
  border-radius: 8px;
  background-clip: padding-box;
}
#rows::-webkit-scrollbar-thumb:hover{
  background: var(--neon);
  border: 2px solid var(--panel);
  background-clip: padding-box;
}
#rows::-webkit-scrollbar-thumb:active{
  background: var(--cyan);
  border: 2px solid var(--panel);
  background-clip: padding-box;
}

/* ============================================================
   DIR UI — modern framework layer (Open Props + local kit)
   Tokens map cyberpunk theme ↔ modern spacing/elevation/motion
   ============================================================ */
:root{
  color-scheme: dark;
  --ui-radius-1: var(--radius-1, 2px);
  --ui-radius-2: var(--radius-2, 4px);
  --ui-radius-3: var(--radius-3, 8px);
  --ui-space-1: var(--size-1, 0.25rem);
  --ui-space-2: var(--size-2, 0.5rem);
  --ui-space-3: var(--size-3, 1rem);
  --ui-space-4: var(--size-4, 1.25rem);
  --ui-space-5: var(--size-5, 1.5rem);
  --ui-shadow-1: var(--shadow-2, 0 2px 8px rgba(0,0,0,.35));
  --ui-shadow-2: var(--shadow-4, 0 8px 28px rgba(0,0,0,.5));
  --ui-shadow-3: var(--shadow-6, 0 16px 48px rgba(0,0,0,.65));
  --ui-ease: var(--ease-3, cubic-bezier(.25,.1,.25,1));
  --ui-ease-out: var(--ease-out-3, cubic-bezier(0,0,.2,1));
  --ui-duration: var(--base-duration, .18s);
  --ui-focus: 0 0 0 1px color-mix(in srgb, var(--neon) 55%, transparent);
  --ui-surface: var(--panel);
  --ui-surface-2: var(--panel2);
  --ui-border: var(--line2);
  --ui-text: var(--txt);
  --ui-muted: var(--dim);
  --ui-accent: var(--neon);
  --ui-font: var(--mono);
  --ui-font-display: var(--disp);
}

/* Modern focus ring (keyboard only) */
:where(a,button,.btn,.tbtn,.vbtn,.ai,.vm-it,.crumb,input,textarea,select,[tabindex]):focus{
  outline: none;
}
:where(a,button,.btn,.tbtn,.vbtn,.ai,.vm-it,.crumb,input,textarea,select,[tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--ui-focus);
  position: relative;
  z-index: 1;
}

/* Layout primitives (framework-style) */
.ui-stack{ display:flex; flex-direction:column; gap:var(--ui-space-3); }
.ui-stack-sm{ display:flex; flex-direction:column; gap:var(--ui-space-2); }
.ui-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-space-2); }
.ui-row{ display:flex; align-items:center; gap:var(--ui-space-3); }
.ui-spread{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-space-3); }
.ui-surface{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-1);
}
.ui-surface-raised{
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-2);
}
.ui-muted{ color: var(--ui-muted); }
.ui-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Modernized controls — keep cyberpunk clip, add elevation & motion */
.btn{
  transition:
    color var(--ui-duration) var(--ui-ease),
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    transform .12s var(--ui-ease-out);
}
.btn:hover{
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 35%, transparent),
              0 4px 16px rgba(0,0,0,.35);
}
.btn:active{ transform: translateY(1px); }
.btn.neon{
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 25%, transparent);
}
.btn:disabled,.btn[disabled]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}

.fld input,.fld textarea{
  border-radius: var(--ui-radius-1);
  transition: border-color var(--ui-duration) var(--ui-ease),
              box-shadow var(--ui-duration) var(--ui-ease),
              background-color var(--ui-duration) var(--ui-ease);
}
.fld input:focus-visible,.fld textarea:focus-visible{
  border-color: var(--neon);
  box-shadow: var(--ui-focus);
}

/* Modal / shell — modern elevation */
.shell-panel{
  border-radius: var(--ui-radius-2);
  box-shadow: var(--ui-shadow-3);
  overflow: hidden;
}
.shell-panel .shell-head{
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
}
.shell-foot{
  gap: var(--ui-space-2);
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}

/* Panel modern surface */
.panel{
  box-shadow: var(--ui-shadow-1);
  border-radius: var(--ui-radius-1);
  overflow: hidden;
}

/* Toast elevation */
.toast{
  border-radius: var(--ui-radius-2);
  box-shadow: var(--ui-shadow-2);
  backdrop-filter: blur(6px);
}

/* Toolbar density */
.tools,.view-group,.view-menu-wrap,.theme-menu-wrap{
  border-radius: var(--ui-radius-1);
}

/* Dropdown menus — modern popover feel */
.view-menu,.theme-menu{
  border-radius: var(--ui-radius-2);
  box-shadow: var(--ui-shadow-3);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

/* Search field — simple neon edge, no double ring */
.search-box{
  border-radius: 2px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.search-box:hover{
  border-color: color-mix(in srgb, var(--neon) 35%, var(--line2));
}
.search-box:focus-within{
  border-color: var(--neon);
  background: color-mix(in srgb, var(--bg2) 88%, var(--neon) 4%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent);
}
.search-box:focus-within i{
  color: var(--neon);
}
.search-box input:focus,
.search-box input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Table header subtle elevation */
.tbl-head{
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--panel2) 90%, transparent);
}

/* Status chip modern */
.status{
  border-radius: 999px;
  padding-inline: 10px;
}

/* Utility: modern gap scale on index line tools */
.index-line .tools{ gap: 0; }

@supports not (color-mix(in srgb, black 50%, white)) {
  .shell-panel .shell-head,
  .shell-foot,
  .view-menu,.theme-menu,
  .tbl-head{ background: var(--panel2); }
}

/* ===== CSS PERFORMANCE + GPU LAYERS =====
   Strategy: promote ONLY long-lived / frequently-composited surfaces.
   Avoid will-change on every row (memory bomb). Prefer transform/opacity.
   ================================================================== */

/* --- Fixed decorative layers (own compositor layer, never hit-test) --- */
.bg-grid,.scanlines{
  contain: strict;
  isolation: isolate;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  pointer-events: none !important;
}
.bg-grid{ opacity: 0.9; }
.scanlines{ opacity: 0.35; }
#rain{
  contain: strict;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4; /* above main panel, below header(5) & modals */
  pointer-events: none !important;
  display: none;
  opacity: 0.38;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  mix-blend-mode: soft-light;
}
#rain.is-on{ display: block !important; }
body.rain-on #btnRain{
  color: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 35%, transparent);
}

/* --- Chrome UI: one layer each, no per-child promotion --- */
header{
  contain: layout style paint;
  isolation: isolate;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  z-index: 5;
}
#toasts,#loading{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout style;
}
#bulkbar{
  /* centered with translateX — promote via 3d form of same transform in base rule */
  backface-visibility: hidden;
  contain: layout style;
}
#bulkbar.show{ will-change: transform; }
#bulkbar:not(.show){ will-change: auto; }

/* --- Main scroll surface (the hot path) --- */
main,.panel{
  contain: layout style;
}
#rows{
  contain: layout style paint;
  content-visibility: auto;
  isolation: isolate;
  /* Promote scroll container — NOT each row */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none; /* reduce scroll jank from reflow */
}
.tile-x,.row{
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
  contain: layout style;
  /* NO translateZ on every row — prevents hundreds of layers */
}
#rows.perf-lite .row,
#rows.perf-lite .tile-x{
  content-visibility: auto;
  contain-intrinsic-size: auto 40px;
}

/* --- Overlays: layer only while open --- */
#shell,#slides,#palette{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout style;
}
#shell.open,#slides.open,#palette.open{
  isolation: isolate;
}
.shell-box,.pal-box{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

/* --- Compositor-friendly transitions only --- */
.tbtn,.vbtn,.btn,.soc,.ai,.crumb,.row,.tile-x{
  transition-property: color, background-color, border-color, opacity, transform;
  transition-duration: .12s;
  transition-timing-function: ease;
}
.ai:hover,.soc:hover{ box-shadow: none; }

/* LED only — do NOT set static transform on .spin (kills rotate animation) */
.status .led{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: auto;
}

/* Modal scrims: solid first, light blur if supported */
#shell,#slides,#palette,#devwarn,#rcwarn{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  #shell{ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  #slides{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  #palette{ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* keep loading spinner visible feedback */
  .spin i,.spin b{ animation-duration: 0.85s !important; animation-iteration-count: infinite !important; }
  .bg-grid,.scanlines{ opacity: 0.15; }
  .glitch::before,.glitch::after{ display: none !important; }
  .bg-grid,.scanlines,header,#rows,#toasts,#bulkbar{
    transform: none !important;
  }
}
body:has(#rows.perf-lite) .glitch::before,
body:has(#rows.perf-lite) .glitch::after{
  animation: none;
}

/* Font */
body{
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px){
  body{ text-rendering: optimizeLegibility; }
}

/* Thumbs: decode async already in HTML; keep paint contained */
.tx-thumb,.sl-thumbs img{
  contain: strict;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  background:var(--bg2);
  content-visibility:auto;
}
img.tx-thumb[data-state="out"],img.tx-thumb:not([data-state]){
  /* placeholder 1×1 until observed */
  image-rendering:pixelated;
}

body:not(.admin){
  --c-sel: 0px;
  --c-action: minmax(92px, 92px);
}
body:not(.admin) .c-sel,
body:not(.admin) .th.c-sel{display:none}

html,body{height:100%}
@supports(height:100dvh){ body{height:100dvh} }
body{background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:13px;
  overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
::selection{background:var(--neon);color:#000}
a{text-decoration:none;color:inherit}
button{font-family:var(--mono);cursor:pointer;background:none;border:none;color:inherit}
i{pointer-events:none}
body:not(.admin) .adm{display:none!important}
body.role-editor .need-admin{display:none!important}

/* ===== FLEXBOX UTILITIES ===== */
.fx{display:flex}
.fx-col{display:flex;flex-direction:column}
.fx-row{display:flex;flex-direction:row}
.fx-wrap{flex-wrap:wrap}
.fx-nowrap{flex-wrap:nowrap}
.fx-center{display:flex;align-items:center;justify-content:center}
.fx-between{display:flex;align-items:center;justify-content:space-between}
.fx-start{display:flex;align-items:center;justify-content:flex-start}
.fx-end{display:flex;align-items:center;justify-content:flex-end}
.fx-mid{display:flex;align-items:center}
.fx-1{flex:1 1 auto;min-width:0}
.fx-0{flex:0 0 auto}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}

/* ===== ICON LIBRARY (Font Awesome 6) helpers ===== */
.ico{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;line-height:1;
  font-style:normal;font-variant:normal;text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
/* Fixed-width icons — align columns like FA .fa-fw */
.fa-fw, i.fa-fw, .ico-fw{
  width:1.25em;text-align:center;flex:0 0 1.25em;
}
i[class*="fa-"]{line-height:1;vertical-align:middle}
/* Column header icons — consistent size & alignment */
.th > i[class*="fa-"]{
  width:1.1em;text-align:center;flex:0 0 auto;
  font-size:10px;opacity:.95;
}
.th > i.sort-ic{
  margin-left:4px;opacity:.55;color:var(--line2);
  font-size:9px;
}
.th.sorted > i.sort-ic{opacity:1;color:var(--neon)}

/* Cell leading icons (ket, code, author) */
.c-ket > i, .c-code > i, .c-author > i{
  width:1.1em;text-align:center;flex:0 0 auto;
  font-size:10px;
}
/* File-type icon column — centered */
.c-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:100%;
  box-sizing:border-box;
}
.c-ic i[class*="fa-"]{
  width:1.15em;
  text-align:center;
  font-size:15px;
  flex:0 0 auto;
  line-height:1;
}
.th.c-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}


.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,240,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,240,255,.03) 1px,transparent 1px);
  background-size:48px 48px}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;display:none;opacity:.38;mix-blend-mode:soft-light}
.scanlines{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}

header{height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;border-bottom:1px solid var(--line);background:rgba(8,11,14,.88);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--neon);color:var(--neon);font-size:17px;background:rgba(252,238,10,.05);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.glitch{position:relative;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:2.5px;color:#fff;line-height:1}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none}
.glitch::before{color:var(--cyan);animation:gA 4.2s infinite steps(1)}
.glitch::after{color:var(--mag);animation:gB 4.2s infinite steps(1)}
@keyframes gA{0%,86%{opacity:0;transform:none;clip-path:none}87%{opacity:.95;transform:translate(-3px,1px);clip-path:inset(12% 0 60% 0)}
  89%{opacity:.9;transform:translate(2px,-2px);clip-path:inset(40% 0 20% 0)}91%,100%{opacity:0;transform:none;clip-path:none}}
@keyframes gB{0%,88%{opacity:0;transform:none;clip-path:none}89%{opacity:.9;transform:translate(3px,2px);clip-path:inset(55% 0 10% 0)}
  91%{opacity:.85;transform:translate(-2px,1px);clip-path:inset(5% 0 70% 0)}93%,100%{opacity:0;transform:none;clip-path:none}}

/* Full-screen glitch overlay (cheap CSS-only) */
#glitchFx{
  position:fixed;inset:0;z-index:55;pointer-events:none;display:none;
  opacity:0;mix-blend-mode:screen;
}
body.glitch-fx #glitchFx{ display:block; animation:gFxPulse 7s steps(1) infinite; }
#glitchFx::before,#glitchFx::after{
  content:'';position:absolute;inset:0;pointer-events:none;
}
#glitchFx::before{
  background:repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0,240,255,.03) 2px 3px
  );
  animation:gFxScan 6s linear infinite;
  opacity:.5;
}
#glitchFx::after{
  background:
    linear-gradient(90deg, rgba(255,42,109,.07), transparent 40%, rgba(0,240,255,.06));
  opacity:0;
  animation:gFxFlash 7s steps(1) infinite;
}
@keyframes gFxPulse{
  0%,92%,100%{opacity:0}
  93%,96%{opacity:1}
}
@keyframes gFxScan{
  0%{ transform:translateY(-8%); }
  100%{ transform:translateY(8%); }
}
@keyframes gFxFlash{
  0%,90%,100%{opacity:0; transform:none}
  91%{opacity:.55; transform:translateX(-4px) skewX(-2deg)}
  92%{opacity:.35; transform:translateX(3px)}
  93%{opacity:.2; transform:none}
  94%{opacity:.45; transform:translateX(2px) skewX(1deg)}
  95%{opacity:0}
}
/* Hard glitch burst (JS toggles .glitch-burst briefly) */
body.glitch-burst #glitchFx{ opacity:1 !important; animation:none; }
body.glitch-burst #glitchFx::after{
  opacity:.7; animation:none;
  transform:translateX(-6px) skewX(-3deg);
  background:linear-gradient(
    90deg,
    rgba(0,240,255,.12) 0 33%,
    rgba(255,42,109,.14) 33% 66%,
    rgba(252,238,10,.1) 66% 100%
  );
}
body.glitch-burst .panel{
  filter:none;
  transform:translateX(2px);
}
body.glitch-burst header{
  transform:translate3d(-2px,0,0);
}
@media (prefers-reduced-motion: reduce){
  body.glitch-fx #glitchFx, body.glitch-burst #glitchFx{ display:none !important; }
  body.glitch-burst .panel, body.glitch-burst header{ transform:none !important; }
}
.brand-sub{font-size:10px;letter-spacing:1.5px;color:var(--dim);margin-top:4px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.clock{text-align:right}
.clock #clkTime{font-family:var(--disp);font-weight:700;font-size:20px;color:#fff;letter-spacing:2px;display:block;line-height:1}
.clock #clkDate{font-size:10px;color:var(--dim);letter-spacing:1px}
.status{display:flex;align-items:center;gap:8px;color:var(--cyan);border:1px solid rgba(0,240,255,.5);
  padding:6px 12px;font-size:10px;letter-spacing:2px;font-weight:700;white-space:nowrap;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.status .led{width:7px;height:7px;flex:0 0 auto;background:currentColor;animation:blink 1.6s infinite}
.st-short{display:none}
@keyframes blink{0%,58%{opacity:1}59%,100%{opacity:.12}}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);color:var(--dim);
  padding:8px 14px;font-size:11px;letter-spacing:1.5px;transition:.15s;background:rgba(14,21,28,.6);white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.btn:hover{border-color:var(--neon);color:var(--neon)}
.btn.neon{background:var(--neon);color:#000;border-color:var(--neon);font-weight:700}
.btn.neon:hover{background:#fff}
.btn.danger{border-color:var(--mag);color:var(--mag)}
.btn.danger:hover{background:var(--mag);color:#000}

main{flex:1;min-height:0;display:flex;padding:16px 20px 18px;position:relative;z-index:1}
.panel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;
  background:var(--panel);border:1px solid var(--line2)}
body.rain-on .panel{
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
body.rain-on header{
  background: color-mix(in srgb, var(--bg) 75%, transparent);
}
#rain{ z-index: 4 !important; }

.corner{position:absolute;width:13px;height:13px;z-index:6}
.corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);min-width:0}
.crumbs{display:flex;align-items:center;gap:9px;flex:1;min-width:0;white-space:nowrap;
  font-size:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crumbs::-webkit-scrollbar{display:none}
.crumb{color:var(--dim);transition:.15s;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.crumb:hover{color:var(--cyan)}
.crumb.active{color:var(--neon);font-weight:700}
.csep{color:var(--line2);font-size:10px;flex:0 0 auto}
.ph-url{flex:0 0 auto;font-size:10.5px;color:var(--dim);letter-spacing:.5px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.ph-url i{color:var(--cyan);font-size:10px}

.index-line{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.tag{background:var(--neon);color:#000;font-weight:700;font-size:10px;letter-spacing:2px;padding:3px 9px;flex:0 0 auto}
#dirTitle{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:1.5px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-info{font-size:10.5px;color:var(--dim);letter-spacing:1px;white-space:nowrap;flex:0 0 auto}
.idx-info b{color:var(--cyan);font-weight:700}

.toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line2);
  padding:0 13px;height:34px;width:300px;min-width:170px;flex:1;max-width:46%;transition:border-color .15s ease,box-shadow .15s ease}
.search-box:focus-within{border-color:var(--neon);box-shadow:0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent)}
.search-box i{color:var(--dim);font-size:12px;flex:0 0 auto}
.search-box input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--txt);
  font-family:var(--mono);font-size:12px;caret-color:var(--neon)}
.search-box input::placeholder{color:var(--dim)}
.tcount{font-size:10.5px;letter-spacing:1.5px;color:var(--dim);white-space:nowrap;margin-left:auto}
.tcount b{color:var(--neon);font-weight:700}
.tools,.view-group{
  display:flex;align-items:stretch;flex:0 0 auto;
  border:1px solid var(--line2);overflow:hidden
}
.tbtn,.vbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.15s;font-size:13px}
.tbtn+.tbtn,.vbtn+.vbtn{border-left:1px solid var(--line2)}
.tbtn:hover,.vbtn:hover{color:var(--txt)}
.vbtn.on,.tbtn.on{background:var(--neon);color:#000}

/* ===== VIEW MENU (Windows Explorer style) ===== */
.view-menu-wrap,.theme-menu-wrap{
  position:relative;flex:0 0 auto;
  border:1px solid var(--line2);overflow:visible
}
.view-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  min-width:210px;background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 12px 40px rgba(0,0,0,.65);padding:6px 0;
  animation:mIn .15s ease
}
.view-menu.open{display:block}
.vm-h{font-size:9px;letter-spacing:2px;color:var(--dim);padding:6px 14px 4px}
.vm-sep{height:1px;background:var(--line);margin:5px 0}
.vm-it{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 14px;font-size:12px;color:var(--txt);text-align:left;
  transition:background .12s;border:none;background:transparent;cursor:pointer;
  font-family:var(--mono);letter-spacing:.3px
}
.vm-it i{width:16px;text-align:center;color:var(--dim);font-size:12px}
.vm-it:hover{background:rgba(252,238,10,.07);color:#fff}
.vm-it:hover i{color:var(--neon)}
.vm-it.on{background:rgba(0,240,255,.08);color:#fff;box-shadow:inset 2px 0 0 var(--cyan)}
.vm-it.on i{color:var(--cyan)}

/* ===== THEME MENU (dropdown) ===== */
.theme-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:45;
  min-width:240px;max-width:min(320px,92vw);max-height:min(420px,70vh);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track);
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 12px 40px rgba(0,0,0,.65);padding:6px 0;
  animation:mIn .15s ease
}
.theme-menu.open{display:block}
.tm-sw{
  width:14px;height:14px;border-radius:3px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(135deg,var(--sw1,#fcee0a) 0 50%,var(--sw2,#00f0ff) 50% 100%)
}
.vm-it .tm-sw{margin-right:2px}

/* ===== VIEW MODES ===== */
.tile-x{position:relative}
.tile-x .t-sel{
  position:absolute;top:8px;left:8px;width:20px;height:20px;
  display:none;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--bg2);color:var(--dim);
  font-size:10px;z-index:2;cursor:pointer
}
body.admin .tile-x .t-sel{display:flex}
.tile-x.selected .t-sel{border-color:var(--cyan);color:var(--cyan)}

/* Details = classic table (default) — uses .row */
#rows.view-details{display:block}
#rows.view-details .row{display:grid}

/* List = dense single-line */
#rows.view-list{
  display:flex;flex-direction:column;gap:0;padding:4px 0
}
#rows.view-list .tile-x{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px;min-height:26px;cursor:pointer;
  border-bottom:1px solid rgba(27,37,48,.4);
  transition:background .12s;animation:rowIn .25s both
}
#rows.view-list .tile-x:hover,
#rows.view-list .tile-x.selected{background:rgba(252,238,10,.05)}
#rows.view-list .tile-x .tx-ic{font-size:12px;width:18px;text-align:center;flex:0 0 auto}
#rows.view-list .tile-x .tx-nm{
  flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)
}
#rows.view-list .tile-x.is-dir .tx-nm{font-weight:700;color:#eef4fa}
#rows.view-list .tile-x .tx-meta{
  flex:0 0 auto;font-size:10px;color:var(--dim);white-space:nowrap;margin-left:8px
}
#rows.view-list .tile-x .t-sel{
  position:static;width:16px;height:16px;border:none;background:transparent;display:none
}
body.admin #rows.view-list .tile-x .t-sel{display:flex}

/* Content = icon + name + details horizontal */
#rows.view-content{
  display:flex;flex-direction:column;gap:0;padding:4px 0
}
#rows.view-content .tile-x{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;min-height:56px;cursor:pointer;
  border-bottom:1px solid rgba(27,37,48,.5);
  transition:background .12s;animation:rowIn .25s both
}
#rows.view-content .tile-x:hover,
#rows.view-content .tile-x.selected{background:rgba(252,238,10,.05)}
#rows.view-content .tile-x .tx-ic{font-size:28px;width:40px;text-align:center;flex:0 0 auto}
#rows.view-content .tile-x .tx-thumb{
  width:48px;height:48px;object-fit:cover;border:1px solid var(--line2);flex:0 0 auto;background:var(--bg2)
}
#rows.view-content .tile-x .tx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#rows.view-content .tile-x .tx-nm{
  font-size:13px;font-weight:600;color:#eef4fa;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
#rows.view-content .tile-x .tx-sub{
  font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
#rows.view-content .tile-x .t-sel{
  position:static;width:18px;height:18px;border:none;background:transparent;display:none;flex:0 0 auto
}
body.admin #rows.view-content .tile-x .t-sel{display:flex}

/* Tiles */
/* ===== TILES — Windows Explorer style cards ===== */
#rows.view-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:8px;
  padding:10px 12px;
  background:transparent;
  align-content:start;
  contain:layout style
}
#rows.view-tiles .tile-x{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  cursor:pointer;
  position:relative;
  min-height:64px;
  height:64px;
  box-sizing:border-box;
  border:1px solid var(--line2);
  background:var(--panel2);
  transition:background .12s,border-color .12s,box-shadow .12s;
  animation:none;
  overflow:hidden;
  contain:layout style paint
}
#rows.view-tiles .tile-x:hover{
  background:rgba(252,238,10,.06);
  border-color:rgba(252,238,10,.35);
}
#rows.view-tiles .tile-x.selected{
  background:rgba(0,240,255,.07);
  border-color:var(--cyan);
  box-shadow:inset 2px 0 0 var(--cyan)
}
#rows.view-tiles .tile-x .tx-media{
  width:44px;height:44px;
  flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);
  border:1px solid var(--line);
  overflow:hidden
}
#rows.view-tiles .tile-x .tx-ic{
  font-size:22px;
  line-height:1;
  width:auto;height:auto;
  text-align:center
}
#rows.view-tiles .tile-x .tx-thumb{
  width:44px;height:44px;
  object-fit:cover;
  border:none;
  display:block
}
#rows.view-tiles .tile-x .tx-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding-right:4px
}
#rows.view-tiles .tile-x .tx-nm{
  font-size:12.5px;
  font-weight:600;
  color:#eef4fa;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  -webkit-line-clamp:unset
}
#rows.view-tiles .tile-x.is-dir .tx-nm{color:#fff;font-weight:700}
#rows.view-tiles .tile-x .tx-sub{
  font-size:10.5px;
  color:var(--dim);
  line-height:1.3;
  margin-top:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.2px
}
#rows.view-tiles .tile-x .t-sel{
  top:6px;right:6px;left:auto;
  width:18px;height:18px;font-size:9px
}

/* Icon grids — shared */
#rows.view-icons-sm,
#rows.view-icons-md,
#rows.view-icons-lg,
#rows.view-icons-xl{
  display:grid;
  gap:6px;
  padding:10px;
  background:transparent;
  align-content:start;
  /* GPU / layout isolation for large grids */
  contain:layout style;
  /* will-change omitted for memory */
}
#rows.view-icons-sm{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:3px;padding:6px}
#rows.view-icons-md{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
#rows.view-icons-lg{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
#rows.view-icons-xl{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}

#rows[class*="view-icons"] .tile-x{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;padding:8px 4px 6px;cursor:pointer;position:relative;
  border:1px solid transparent;background:transparent;text-align:center;
  /* Skip expensive entry animation on icon grids — much faster with 100+ items */
  animation:none;
  min-height:0;
  /* Browser can skip off-screen tiles */
  content-visibility:auto;
  contain-intrinsic-size:auto 96px;
  contain:layout style paint;
  transition:background .1s,border-color .1s
}
#rows[class*="view-icons"] .tile-x:hover,
#rows[class*="view-icons"] .tile-x.selected{
  background:rgba(252,238,10,.07);border-color:var(--line2)
}
#rows[class*="view-icons"] .tile-x .tx-ic{
  text-align:center;line-height:1;
  /* Reserve space so grid doesn't reflow when icon font loads */
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto
}
#rows[class*="view-icons"] .tile-x .tx-thumb{
  object-fit:cover;border:1px solid var(--line2);background:var(--bg2);
  flex:0 0 auto;
  /* Prevent layout shift; decode off main thread */
  display:block
}
#rows[class*="view-icons"] .tile-x .tx-nm{
  font-size:11px;color:var(--txt);line-height:1.25;width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;overflow-wrap:anywhere;
  /* Stable height for 2 lines */
  min-height:2.5em
}
#rows[class*="view-icons"] .tile-x.is-dir .tx-nm{font-weight:700;color:#eef4fa}
#rows[class*="view-icons"] .tile-x .tx-sub{display:none}
#rows[class*="view-icons"] .tile-x .t-sel{top:3px;left:3px}

/* Fixed media boxes prevent reflow */
#rows.view-icons-sm .tile-x{contain-intrinsic-size:auto 72px;padding:6px 2px 4px;gap:3px}
#rows.view-icons-sm .tile-x .tx-ic{font-size:20px;width:28px;height:28px}
#rows.view-icons-sm .tile-x .tx-thumb{width:28px;height:28px;border-radius:2px}
#rows.view-icons-sm .tile-x .tx-nm{font-size:9.5px;min-height:2.4em;-webkit-line-clamp:2}

#rows.view-icons-md .tile-x{contain-intrinsic-size:auto 100px}
#rows.view-icons-md .tile-x .tx-ic{font-size:34px;width:56px;height:56px}
#rows.view-icons-md .tile-x .tx-thumb{width:56px;height:56px;border-radius:2px}
#rows.view-icons-md .tile-x .tx-nm{font-size:11px}

#rows.view-icons-lg .tile-x{contain-intrinsic-size:auto 140px;padding:10px 6px 8px}
#rows.view-icons-lg .tile-x .tx-ic{font-size:48px;width:88px;height:88px}
#rows.view-icons-lg .tile-x .tx-thumb{width:88px;height:88px;border-radius:3px}
#rows.view-icons-lg .tile-x .tx-nm{font-size:12px}

#rows.view-icons-xl .tile-x{contain-intrinsic-size:auto 200px;padding:12px 8px 10px;gap:8px}
#rows.view-icons-xl .tile-x .tx-ic{font-size:64px;width:140px;height:140px}
#rows.view-icons-xl .tile-x .tx-thumb{width:140px;height:140px;border-radius:4px}
#rows.view-icons-xl .tile-x .tx-nm{font-size:12.5px}

/* ---- details table shell ---- */
.tbl-wrap{
  flex:1;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
/* Single source of truth: --cols + --areas */
.tbl-head,
#rows.view-details .row{
  display:grid;
  grid-template-columns:var(--cols);
  grid-template-areas:var(--areas);
  grid-auto-flow:row;
  align-items:center;
  justify-content:stretch;
  column-gap:0;
  row-gap:0;
  width:max(100%, var(--table-min));
  min-width:var(--table-min);
  box-sizing:border-box;
}
.tbl-head{
  flex:0 0 auto;
  position:sticky;top:0;z-index:3;
  background:var(--panel2);
  border-bottom:1px solid var(--line2);
}
.tbl-wrap #rows{flex:1 0 auto;overflow:visible;min-height:0}

/* Named areas — 1:1 with --areas tokens (order locked) */
.c-sel    { grid-area: sel; }
.c-ic     { grid-area: ic; }
.c-name   { grid-area: name; min-width: 0; }
.c-ket    { grid-area: ket; min-width: 0; }
.c-code   { grid-area: code; }
.c-author { grid-area: auth; min-width: 0; }
.c-size   { grid-area: size; }
.c-date   { grid-area: date; }
.c-perm   { grid-area: mode; }
.c-act    { grid-area: action; }

/* Headers */
.th{
  display:flex;align-items:center;gap:5px;
  padding:10px 8px;
  color:var(--dim);font-size:10px;font-weight:700;
  letter-spacing:1px;white-space:nowrap;
  box-sizing:border-box;
  overflow:hidden;text-overflow:ellipsis;
}
.th:hover{color:var(--neon)}
.th i{font-size:9px;color:var(--line2);flex:0 0 auto}
.th.sorted i{color:var(--neon)}
.th-author i{color:var(--cyan)}
.th-name{
  justify-content:flex-start!important;
  align-items:center;
  text-align:left;
  padding:10px 12px 10px 6px; /* match .c-name horizontal padding */
  gap:6px;
  width:100%;
  box-sizing:border-box;
}
button.th.th-name{
  display:flex;
  justify-content:flex-start;
  text-align:left;
  background:transparent;
  border:none;
  color:inherit;
  font:inherit;
  letter-spacing:1px;
  cursor:pointer;
}
.th-name > i.fa-file-lines{color:var(--neon);opacity:.95}
.th-name > i.sort-ic{margin-left:auto;opacity:.5} /* sort di kanan, label tetap kiri */
.th.c-code{justify-content:flex-start;gap:6px}
.th.c-code i{color:var(--cyan);font-size:10px}
.th.c-ket{justify-content:flex-start}
.th.c-size,
.th.c-date,
.th.c-perm,
.th.c-act{justify-content:center;letter-spacing:.8px}
.th.c-perm{border-right:1px solid var(--line2)}
.th.c-act{overflow:visible}
/* empty icon header — keep width, no center text */
.th.c-ic,.th.c-sel{padding:10px 0;justify-content:center;align-items:center}

/*#rows{flex:1 0 auto;min-height:0}*/
#rows{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}

.row{min-height:44px;border-bottom:1px solid rgba(27,37,48,.55);cursor:pointer;position:relative;
  transition:background .15s;animation:rowIn .3s both;
  content-visibility:auto;contain-intrinsic-size:auto 44px;
  contain:layout style}
/* Perf mode: no entry animations / cheaper paint when many rows */
#rows.perf-lite .row,
#rows.perf-lite .tile-x{
  animation:none!important;transition:background .08s}
#rows.perf-lite .row::before{transition:none}
#rows.perf-lite .tx-thumb{content-visibility:auto}
.row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .18s}
.row:hover,.row:active,.row.selected,.row.kfocus{background:rgba(252,238,10,.05)}
.row:hover::before{transform:scaleY(1)}
.row.selected::before,.row.kfocus::before{transform:scaleY(1);background:var(--cyan)}
.row.kfocus{outline:1px solid var(--cyan);outline-offset:-1px}
@keyframes rowIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
/*.c-sel{display:flex;align-items:center;justify-content:center}*/
/* Col 1 + 2: center-aligned, fixed structure */
.c-sel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:100%;
  box-sizing:border-box;
}
.c-sel i{
  font-size:14px;
  width:1em;
  text-align:center;
  line-height:1;
}
.th.c-sel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}


/*.c-name{padding:9px 12px 9px 6px;min-width:0}*/
/*.c-name{padding:8px 12px 8px 6px;min-width:0}*/
/*.c-name{padding:8px 12px 8px 6px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline}*/
.c-name{
  padding:8px 12px 8px 10px;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "idx nm"
    ". sub";
  column-gap:10px;
  row-gap:2px;
  align-items:baseline;
  text-align:left;
}
.c-name .idx{grid-area:idx;flex:0 0 auto}
.c-name .nm{grid-area:nm;min-width:0;max-width:100%}
.c-name .c-sub{grid-area:sub}

/*.idx{color:#33445a;font-size:10px;margin-right:10px}*/
.idx{color:#33445a;font-size:10px;white-space:nowrap;justify-self:start}
/*.nm{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}*/
/*.nm{color:var(--txt);word-break:break-word;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}*/
.nm{
  color:var(--txt);
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  line-height:1.4;
}
.row.is-dir .nm{color:#eef4fa;font-weight:700}
.row:hover .nm{color:#fff}
/*.web-badge{font-size:10px;color:var(--green);margin-left:8px}*/
/*.web-badge{font-size:10px;color:var(--green);margin-right:6px;vertical-align:middle}*/
.web-badge{font-size:10px;color:var(--green);margin-right:6px;vertical-align:middle}
.nmpre{font-weight:700;text-shadow:0 0 10px currentColor;letter-spacing:.5px}
.row:hover .nmpre{filter:brightness(1.25)}
.t-name .nmpre{font-weight:700}
/*.c-sub{display:none;font-size:10px;color:var(--dim);margin-top:3px}*/
/*.c-sub{display:none;font-size:10px;color:var(--dim);margin-top:3px;line-height:1.5;word-break:break-word}*/
/*.c-sub{display:none;font-size:10px;color:var(--dim);margin-top:3px;line-height:1.5;word-break:break-word;flex:0 0 100%}*/
.c-sub{
  display:none;
  font-size:10px;color:var(--dim);margin-top:0;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;max-width:100%;
}
.c-author{
  display:flex;align-items:center;gap:7px;
  padding:9px 12px;font-size:11px;
  color:var(--dim2);letter-spacing:.4px;min-width:0
}
.c-author > i{color:var(--cyan)}
.c-author span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-ket{
  display:flex;align-items:center;gap:7px;
  padding:9px 12px;font-size:11px;color:var(--dim2);min-width:0
}
.c-ket > i{color:var(--green)}
/*.c-ket span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}*/
.c-ket span{white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
body.admin .c-ket.editable{cursor:pointer}
body.admin .c-ket.editable:hover{background:rgba(0,255,159,.05)}
.c-ket .ket-edit{opacity:0;color:var(--green);font-size:9px;transition:.15s}
.row:hover .c-ket .ket-edit{opacity:1}
.t-ket{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--dim);min-width:0}
.t-ket>i{color:var(--green);font-size:9px;flex:0 0 auto}
.t-ket span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-ketbtn{margin-left:auto;flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--dim);font-size:8.5px;transition:.15s}
.t-ketbtn:hover{border-color:var(--green);color:var(--green)}
/* ---- column cells ---- */
.c-size,.c-date,.c-code,.c-perm{
  padding:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-sizing:border-box;
  font-variant-numeric:tabular-nums;
}
.c-size{color:var(--cyan);font-size:11.5px;text-align:center}
.c-size.dir{color:var(--dim);font-size:10.5px;letter-spacing:.8px}
.c-date{color:var(--dim);font-size:11.5px;text-align:center}
.c-code{
  display:flex;align-items:center;gap:6px;
  color:var(--dim);font-size:10.5px;letter-spacing:.5px;min-width:0
}
.c-code .code-ico{opacity:.95}
.c-code .code-ph{color:#2a3848}
.c-code .code-val{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* MODE */
.c-perm{
  color:#8a9bab;font-size:11px;letter-spacing:.3px;
  text-align:center;
  border-right:1px solid var(--line2);
}

/* ACTION */
.c-act{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;gap:3px;
  padding:4px 6px;box-sizing:border-box;
  opacity:0;transition:opacity .15s;
  min-width:0;
}
.row:hover .c-act,.row.selected .c-act,.row.kfocus .c-act{opacity:1}
body:not(.admin) .c-act{opacity:1}
body.admin .c-act{opacity:.75}
body.admin .row:hover .c-act,body.admin .row.selected .c-act{opacity:1}

.ai{
  width:26px;height:26px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:11px;
  border:1px solid var(--line2);
  background:rgba(14,21,28,.9);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition:color .12s,border-color .12s,background .12s,box-shadow .15s;
}
.ai:hover{
  color:var(--neon);
  border-color:rgba(252,238,10,.55);
  background:rgba(252,238,10,.08);
  box-shadow:0 0 8px rgba(252,238,10,.1);
}
.ai:active{transform:scale(0.94)}
.ai.del:hover{
  color:var(--mag);
  border-color:rgba(255,42,109,.55);
  background:rgba(255,42,109,.08);
}
.ai[data-op="edit"]:hover{
  color:var(--cyan);
  border-color:rgba(0,240,255,.5);
  background:rgba(0,240,255,.08);
}
.ai[data-op="rename"]:hover{color:var(--amber);border-color:rgba(255,159,28,.5)}
.ai[data-op="copy"]:hover{color:var(--green);border-color:rgba(0,255,159,.45)}
.ai[data-op="slides"]:hover{color:var(--cyan);border-color:rgba(0,240,255,.45)}

mark{background:rgba(252,238,10,.3);color:#fff;padding:0 1px}

#rows.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;background:var(--line);padding:1px}
#rows.grid .tile{background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:9px;
  cursor:pointer;position:relative;animation:rowIn .3s both;transition:background .15s}
#rows.grid .tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .18s}
#rows.grid .tile:hover,#rows.grid .tile:active,#rows.grid .tile.selected{background:var(--panel2)}
#rows.grid .tile:hover::before{transform:scaleY(1)}
#rows.grid .tile.selected::before{transform:scaleY(1);background:var(--cyan)}
.t-media{height:96px;display:flex;align-items:center;justify-content:center}
.t-media .ti{font-size:26px}
.t-thumb{width:100%;height:96px;object-fit:cover;border:1px solid var(--line2);background:var(--bg2)}
.t-name{font-size:12px;color:#eef4fa;font-weight:500;word-break:break-all;line-height:1.4;min-height:34px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-author{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--dim);letter-spacing:.4px;min-width:0}
.t-author i{color:var(--cyan);font-size:9px;flex:0 0 auto}
.t-author span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-meta{font-size:10px;color:var(--dim);letter-spacing:.5px}
.t-meta b{color:var(--cyan);font-weight:400}
.t-sel{position:absolute;top:8px;left:8px;width:20px;height:20px;display:none;align-items:center;
  justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--dim);font-size:10px;z-index:2}
body.admin .t-sel{display:flex}
.tile.selected .t-sel{border-color:var(--cyan);color:var(--cyan)}
.t-browse{position:absolute;top:8px;right:8px;width:28px;height:28px;display:none;align-items:center;
  justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--dim);
  font-size:11px;z-index:2;transition:.15s}
.tile:hover .t-browse{display:flex}
.t-browse:hover{border-color:var(--neon);color:var(--neon)}

.state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px;text-align:center}
.state i.big{font-size:46px;color:#22303f}
.state.err-i i.big{color:var(--mag)}
.state h3{font-family:var(--disp);font-size:19px;letter-spacing:2px;color:var(--dim2);font-weight:600}
.state p{font-size:11px;color:var(--dim);max-width:420px;line-height:1.7}

#loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:rgba(6,8,10,.92);backdrop-filter:blur(1px)}
#loading.hidden{display:none}
.spin{width:48px;height:48px;position:relative;flex:0 0 auto}
.spin i,.spin b{
  position:absolute;border:2px solid transparent;border-radius:50%;
  box-sizing:border-box;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}
.spin i{
  inset:0;
  border-top-color:var(--neon);
  border-right-color:var(--neon);
  animation:spSpin 0.85s linear infinite;
}
.spin b{
  inset:9px;
  border-bottom-color:var(--cyan);
  border-left-color:var(--cyan);
  animation:spSpin 0.6s linear infinite reverse;
}
@keyframes spSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* legacy alias */
@keyframes sp{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.scan-text{color:var(--neon);font-size:12px;letter-spacing:2.5px;text-align:center;padding:0 12px;word-break:break-all}
.scan-text::after{content:'_';animation:blinkC 1s steps(1) infinite;margin-left:4px}
#loading .spin{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--neon) 40%, transparent))}
@keyframes blinkC{0%,49%{opacity:1}50%,100%{opacity:0}}

.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding:8px 16px;font-size:10px;letter-spacing:1.2px;color:var(--dim)}
.panel-foot b{color:var(--cyan);font-weight:700}
.hints span{color:#33445a}
.hints b{color:var(--dim2);font-weight:400}
.disk{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;white-space:nowrap}
.disk-bar{width:130px;height:7px;background:#101820;border:1px solid var(--line2)}
.disk-fill{height:100%;background:var(--green);width:0%;transition:width .6s}
.disk.warn .disk-fill{background:var(--amber)}
.disk.crit .disk-fill{background:var(--mag)}

#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{background:#0c1218;border:1px solid var(--line2);border-left:3px solid var(--cyan);
  padding:11px 15px;font-size:11.5px;line-height:1.5;min-width:280px;max-width:380px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);animation:tIn .25s;transition:.3s}
.toast i{margin-right:9px}
.toast.info{border-left-color:var(--cyan)} .toast.info i{color:var(--cyan)}
.toast.warn{border-left-color:var(--neon)} .toast.warn i{color:var(--neon)}
.toast.err{border-left-color:var(--mag)}  .toast.err i{color:var(--mag)}
.toast .pbar{height:4px;background:#101820;margin-top:8px;border:1px solid var(--line2)}
.toast .pfill{height:100%;background:var(--neon);width:0%;transition:width .2s}
.toast.out{opacity:0;transform:translateX(24px)}
@keyframes tIn{from{opacity:0;transform:translateX(24px)}}

#shell{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,7,.92);backdrop-filter:blur(2px)}
#shell.open{display:flex}
.shell-panel{width:min(860px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);position:relative;animation:mIn .2s}
@keyframes mIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.shell-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);min-width:0}
.shell-head>i{color:var(--cyan);flex:0 0 auto}
.shell-title{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:1px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shell-meta{margin-left:auto;font-size:10.5px;color:var(--dim);letter-spacing:1px;white-space:nowrap;flex:0 0 auto}
.shell-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:16px}
.shell-body img{max-width:100%;max-height:64vh;border:1px solid var(--line2)}
.shell-body pre{width:100%;margin:0;font:12px/1.7 var(--mono);text-align:left;white-space:pre-wrap;word-break:break-word}
.shell-body video{max-width:100%;max-height:62vh;border:1px solid var(--line2);background:#000}
.shell-body iframe{width:100%;height:60vh;border:1px solid var(--line2);background:#fff}
.shell-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.fld{display:block;width:100%}
.fld span{display:block;font-size:9px;letter-spacing:2px;color:var(--dim);margin-bottom:7px}
.fld input{width:100%;background:var(--bg2);border:1px solid var(--line2);color:#eef4fa;
  font:13px var(--mono);padding:11px 12px;outline:none;caret-color:var(--neon)}
.fld input:focus{border-color:var(--neon)}
.fld textarea{
  width:100%;min-height:48vh;max-height:62vh;resize:vertical;
  background:var(--bg2);border:1px solid var(--line2);color:#eef4fa;
  font:12.5px/1.55 var(--mono);padding:12px 14px;outline:none;
  caret-color:var(--neon);tab-size:2;white-space:pre;overflow:auto
}
.fld textarea:focus{border-color:var(--neon);box-shadow:0 0 0 1px rgba(252,238,10,.15)}
.ed-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;font-size:10.5px;color:var(--dim);letter-spacing:.5px;flex-wrap:wrap
}
.ed-bar b{color:var(--cyan);font-weight:700}
.ed-hint{font-size:9.5px;color:#33445a;margin-top:6px;letter-spacing:.5px}
.md{width:100%;text-align:left;font:13px/1.75 var(--mono)}
.md h1,.md h2,.md h3{font-family:var(--disp);color:#fff;margin:14px 0 8px;letter-spacing:1px}
.md h1{font-size:20px}.md h2{font-size:17px}.md h3{font-size:15px}
.md p,.md ul,.md ol{margin:8px 0}.md ul,.md ol{padding-left:22px}
.md a{color:var(--cyan)}.md code{background:var(--bg2);border:1px solid var(--line);padding:1px 5px;font-size:12px}
.md pre code{border:none;padding:0}
.md blockquote{border-left:3px solid var(--neon);padding-left:12px;color:var(--dim);margin:10px 0}
.md table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12px}
.md th,.md td{border:1px solid var(--line2);padding:6px 10px;text-align:left}
.md th{background:var(--bg2);color:#fff;font-family:var(--disp);letter-spacing:1px}
.md tr:nth-child(even) td{background:rgba(14,21,28,.5)}
.md hr{border:none;border-top:1px dashed var(--line2);margin:14px 0}
.md del{color:var(--dim)}
.md img{max-width:100%}

/* ===== CODE BLOCK (file preview + markdown) ===== */
#mBody > pre.code-block,
#mBody pre.code-block{
  width:100%;
  max-height:min(68vh, 720px);
  overflow:auto;
  margin:0;
  padding:0;
  background:var(--bg2);
  border:1px solid var(--line2);
  box-shadow:inset 0 0 0 1px rgba(0,240,255,.04);
  text-align:left;
}
#mBody pre.code-block code,
#mBody pre.code-block code.hljs{
  display:block;
  padding:14px 16px;
  margin:0;
  background:transparent;
  border:none;
  color:#cfd8e0;
  font:12.5px/1.55 var(--mono);
  white-space:pre;
  tab-size:2;
  overflow:visible;
  text-align:left;
}
/* highlight.js token colors — cyberpunk */
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:var(--mag)}
.hljs-string,.hljs-attr,.hljs-template-variable{color:var(--green)}
.hljs-number,.hljs-built_in,.hljs-builtin-name{color:var(--amber)}
.hljs-comment,.hljs-quote{color:#4a5c6e;font-style:italic}
.hljs-title,.hljs-section,.hljs-name{color:var(--cyan)}
.hljs-meta,.hljs-meta .hljs-keyword{color:var(--neon)}
.hljs-type,.hljs-class .hljs-title{color:#7dd3fc}
.hljs-params{color:var(--dim2)}
.hljs-symbol,.hljs-bullet{color:var(--amber)}
.hljs-addition{color:var(--green);background:rgba(0,255,159,.06)}
.hljs-deletion{color:var(--mag);background:rgba(255,42,109,.06)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
.md pre.code-block{margin:12px 0}
.md pre code.hljs{padding:12px 14px}
.stats-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%}
.legend{display:flex;flex-direction:column;gap:7px;min-width:230px}
.lg-row{display:flex;align-items:center;gap:9px;font-size:11px}
.lg-sw{width:10px;height:10px;flex:0 0 auto}
.lg-row .n{color:#fff;flex:1}.lg-row .c{color:var(--dim)}.lg-row .s{color:var(--cyan)}
.top5{width:100%;margin-top:16px}
.top5 h4{font-family:var(--disp);font-size:12px;letter-spacing:2px;color:var(--dim);margin-bottom:8px}
.tp-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:5px 0;border-bottom:1px dashed var(--line)}
.tp-row span:first-child{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-row span:last-child{color:var(--cyan)}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-wrap img{border:8px solid #fff;background:#fff}
.audit-list{width:100%;text-align:left}
.aud-row{display:flex;gap:10px;font-size:11px;padding:6px 4px;border-bottom:1px dashed var(--line);align-items:baseline}
.aud-row .t{color:#33445a;flex:0 0 auto}
.aud-row .a{color:var(--cyan);flex:0 0 90px}
.aud-row .d{color:var(--txt);flex:1;word-break:break-all}
.aud-row .ip{color:var(--dim);flex:0 0 auto}

#bulkbar{position:fixed;left:50%;bottom:22px;transform:translate3d(-50%,0,0);z-index:70;display:none;
  align-items:center;gap:10px;background:var(--panel);border:1px solid var(--neon);
  padding:9px 14px;box-shadow:0 10px 34px rgba(0,0,0,.6)}
#bulkbar.show{display:flex}
#bulkCount{font-size:11px;letter-spacing:1.5px;color:var(--neon);font-weight:700;white-space:nowrap}

#palette{position:fixed;inset:0;z-index:95;display:none;justify-content:center;align-items:flex-start;
  background:rgba(3,5,7,.88);backdrop-filter:blur(2px);padding:9vh 16px 16px}
#palette.open{display:flex}
.pal-panel{width:min(620px,100%);background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 60px rgba(0,0,0,.7);animation:mIn .18s;overflow:hidden}
.pal-in{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-in i{color:var(--neon)}
.pal-in input{flex:1;background:transparent;border:none;outline:none;color:#fff;font:14px var(--mono);caret-color:var(--neon)}
.pal-in .kbd{font-size:9px;color:var(--dim);border:1px solid var(--line2);padding:2px 6px}
#palList{max-height:56vh;overflow-y:auto}
.pal-h{font-size:9px;letter-spacing:2px;color:var(--dim);padding:9px 16px 4px}
.pal-it{display:flex;align-items:center;gap:11px;padding:9px 16px;cursor:pointer;font-size:12.5px}
.pal-it i{width:16px;text-align:center;flex:0 0 auto}
.pal-it .pl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-it .ph{font-size:9.5px;color:var(--dim);letter-spacing:.5px;flex:0 0 auto}
.pal-it.on{background:rgba(0,240,255,.08);box-shadow:inset 2px 0 0 var(--cyan)}
.pal-it:hover{background:rgba(252,238,10,.06)}
.pal-empty{padding:22px 16px;text-align:center;color:var(--dim);font-size:11px}

body[data-theme="amber"]{--bg:#06080a;--bg2:#0a0e13;--panel:#0b1015;--panel2:#0e151c;
  --line:#1b2530;--line2:#28394a;--neon:#fcee0a;--cyan:#00f0ff;--mag:#ff2a6d;--green:#00ff9f;--amber:#ff9f1c}
body[data-theme="synthwave"]{--bg:#0d0221;--bg2:#140533;--panel:#16082e;--panel2:#1c0b3a;
  --line:#2a1450;--line2:#3a1e6e;--neon:#ff71ce;--cyan:#01cdfe;--mag:#ff61d4;--green:#05ffa1;--amber:#ffb84d}
body[data-theme="matrix"]{--bg:#000;--bg2:#020a04;--panel:#010603;--panel2:#021108;
  --line:#04220f;--line2:#0a3d1c;--neon:#00ff41;--cyan:#00e676;--mag:#ff5252;--green:#00ff41;--amber:#69f0ae}
/* ===== EXTENDED THEMES (base set) ===== */
body[data-theme="cyber-blue"]{--bg:#020812;--bg2:#061321;--panel:#081a2b;--panel2:#0c2338;
  --line:#10324b;--line2:#164b70;--neon:#37e8ff;--cyan:#00b7ff;--mag:#7d7cff;--green:#30f2c3;--amber:#4cb5ff}
body[data-theme="dracula"]{--bg:#120f17;--bg2:#191523;--panel:#211b2e;--panel2:#2a2339;
  --line:#3a304f;--line2:#51436e;--neon:#bd93f9;--cyan:#8be9fd;--mag:#ff79c6;--green:#50fa7b;--amber:#ffb86c}
body[data-theme="ocean"]{--bg:#03141a;--bg2:#06232b;--panel:#08313a;--panel2:#0b3d48;
  --line:#0e4c58;--line2:#146878;--neon:#2de2e6;--cyan:#57c7ff;--mag:#ff6b9d;--green:#52f7b8;--amber:#ffc857}
body[data-theme="sunset"]{--bg:#180a0a;--bg2:#251010;--panel:#321414;--panel2:#40191a;
  --line:#5a2320;--line2:#7b312a;--neon:#ffb347;--cyan:#ff7b54;--mag:#ff4f81;--green:#ffcf56;--amber:#ffd166}
body[data-theme="violet"]{--bg:#0d0718;--bg2:#160d27;--panel:#1e1236;--panel2:#28174a;
  --line:#382060;--line2:#4e2b80;--neon:#d36bff;--cyan:#8ea7ff;--mag:#ff5ad9;--green:#62f6d5;--amber:#f2a2ff}
body[data-theme="forest"]{--bg:#07110a;--bg2:#0b1b10;--panel:#0d2515;--panel2:#12331d;
  --line:#1a4928;--line2:#25633a;--neon:#8dff4f;--cyan:#42e8a6;--mag:#ff6b6b;--green:#b8ff5a;--amber:#d4ff72}
body[data-theme="ice"]{--bg:#071018;--bg2:#0b1a27;--panel:#102534;--panel2:#153044;
  --line:#214457;--line2:#2f627d;--neon:#b8f3ff;--cyan:#7ee7ff;--mag:#b28cff;--green:#8fffe0;--amber:#d4ecff}

/* ===== EXTENDED THEMES: +30 NEW ===== */
body[data-theme="neon-pink"]{--bg:#12010f;--bg2:#1c0418;--panel:#26061f;--panel2:#320a2a;
  --line:#4a123e;--line2:#6b1a58;--neon:#ff2bd6;--cyan:#ff7ae9;--mag:#ff4d9a;--green:#7dffc8;--amber:#ffb3e6}
body[data-theme="blood-red"]{--bg:#0f0204;--bg2:#1a0508;--panel:#24070c;--panel2:#2e0a10;
  --line:#4a1218;--line2:#6b1c26;--neon:#ff2a2a;--cyan:#ff6b6b;--mag:#c41e3a;--green:#ff8a80;--amber:#ffab91}
body[data-theme="gold-luxury"]{--bg:#0f0c02;--bg2:#1a1604;--panel:#242008;--panel2:#2e290c;
  --line:#4a4018;--line2:#6b5c24;--neon:#ffd700;--cyan:#ffe566;--mag:#e6b800;--green:#c9a227;--amber:#ffec8b}
body[data-theme="mint-fresh"]{--bg:#02140f;--bg2:#04201a;--panel:#062c24;--panel2:#083830;
  --line:#0e4c40;--line2:#146858;--neon:#00ffa3;--cyan:#5dffc8;--mag:#00c896;--green:#7dffb3;--amber:#a8ffd0}
body[data-theme="purple-haze"]{--bg:#0c0218;--bg2:#140428;--panel:#1c0638;--panel2:#260848;
  --line:#381260;--line2:#4e1a80;--neon:#b388ff;--cyan:#d1b3ff;--mag:#9c27b0;--green:#e1bee7;--amber:#ce93d8}
body[data-theme="ember"]{--bg:#140802;--bg2:#201004;--panel:#2c1606;--panel2:#381c08;
  --line:#502810;--line2:#6e3818;--neon:#ff6b00;--cyan:#ff9a3c;--mag:#e63900;--green:#ffb366;--amber:#ffcc80}
body[data-theme="arctic"]{--bg:#041018;--bg2:#061a28;--panel:#082438;--panel2:#0a2e48;
  --line:#0e3c5c;--line2:#14527c;--neon:#e0f7fa;--cyan:#80deea;--mag:#4dd0e1;--green:#b2ebf2;--amber:#e0f2f1}
body[data-theme="lava"]{--bg:#1a0600;--bg2:#280a00;--panel:#360e00;--panel2:#441200;
  --line:#5c1a00;--line2:#7a2400;--neon:#ff4500;--cyan:#ff7043;--mag:#d32f2f;--green:#ff8a65;--amber:#ffab40}
body[data-theme="midnight"]{--bg:#02040c;--bg2:#040818;--panel:#060c24;--panel2:#081030;
  --line:#0c1848;--line2:#122060;--neon:#5c6bc0;--cyan:#7986cb;--mag:#3f51b5;--green:#9fa8da;--amber:#c5cae9}
body[data-theme="sakura"]{--bg:#140a10;--bg2:#201018;--panel:#2c1620;--panel2:#381c28;
  --line:#4a2838;--line2:#62384c;--neon:#ffb7c5;--cyan:#ffcdd2;--mag:#f48fb1;--green:#f8bbd9;--amber:#fce4ec}
body[data-theme="toxic"]{--bg:#060e02;--bg2:#0c1804;--panel:#122206;--panel2:#182c08;
  --line:#243c0e;--line2:#305414;--neon:#39ff14;--cyan:#7cff4a;--mag:#00e676;--green:#b2ff59;--amber:#ccff90}
body[data-theme="copper"]{--bg:#120a06;--bg2:#1e140c;--panel:#2a1c12;--panel2:#362418;
  --line:#4a3424;--line2:#624830;--neon:#b87333;--cyan:#d4a574;--mag:#a0522d;--green:#cd853f;--amber:#deb887}
body[data-theme="neon-green"]{--bg:#021204;--bg2:#041c08;--panel:#06260c;--panel2:#083010;
  --line:#0c4018;--line2:#105820;--neon:#00ff41;--cyan:#39ff14;--mag:#00c853;--green:#69f0ae;--amber:#b9f6ca}
body[data-theme="royal"]{--bg:#080410;--bg2:#100820;--panel:#180c30;--panel2:#201040;
  --line:#2c1858;--line2:#3c2078;--neon:#7c4dff;--cyan:#b388ff;--mag:#651fff;--green:#ea80fc;--amber:#d1c4e9}
body[data-theme="desert"]{--bg:#141008;--bg2:#201a0c;--panel:#2c2410;--panel2:#382e14;
  --line:#4a3e1c;--line2:#625428;--neon:#e6c35c;--cyan:#f0d78c;--mag:#c9a227;--green:#d4b85a;--amber:#f5e6b3}
body[data-theme="steel"]{--bg:#0a0c0e;--bg2:#12161a;--panel:#1a1e24;--panel2:#222830;
  --line:#323840;--line2:#444c58;--neon:#90a4ae;--cyan:#b0bec5;--mag:#78909c;--green:#cfd8dc;--amber:#eceff1}
body[data-theme="cherry"]{--bg:#120408;--bg2:#1c0610;--panel:#260818;--panel2:#300a20;
  --line:#44122c;--line2:#5c1a3c;--neon:#ff1744;--cyan:#ff5252;--mag:#d50000;--green:#ff8a80;--amber:#ffcdd2}
body[data-theme="azure"]{--bg:#021018;--bg2:#041a28;--panel:#062438;--panel2:#082e48;
  --line:#0c3c5c;--line2:#10527c;--neon:#00b0ff;--cyan:#40c4ff;--mag:#0091ea;--green:#80d8ff;--amber:#b3e5fc}
body[data-theme="lime"]{--bg:#0a1202;--bg2:#121c04;--panel:#1a2606;--panel2:#223008;
  --line:#2e4010;--line2:#3e5818;--neon:#c6ff00;--cyan:#eeff41;--mag:#aeea00;--green:#f4ff81;--amber:#f0f4c3}
body[data-theme="rose-gold"]{--bg:#140c0a;--bg2:#201410;--panel:#2c1c16;--panel2:#38241c;
  --line:#4a3228;--line2:#624438;--neon:#e8b4b8;--cyan:#f5c6cb;--mag:#d4a5a5;--green:#f0d6d6;--amber:#faf0e6}
body[data-theme="deep-space"]{--bg:#000208;--bg2:#020410;--panel:#040618;--panel2:#060820;
  --line:#0a0c30;--line2:#0e1040;--neon:#82b1ff;--cyan:#448aff;--mag:#2962ff;--green:#a7c0ff;--amber:#c5cae9}
body[data-theme="honey"]{--bg:#120e04;--bg2:#1c1608;--panel:#261e0c;--panel2:#302610;
  --line:#443618;--line2:#5c4a20;--neon:#ffc107;--cyan:#ffd54f;--mag:#ff8f00;--green:#ffe082;--amber:#fff8e1}
body[data-theme="indigo"]{--bg:#060414;--bg2:#0c0820;--panel:#120c2c;--panel2:#181038;
  --line:#241848;--line2:#302060;--neon:#536dfe;--cyan:#8c9eff;--mag:#3d5afe;--green:#a5b4fc;--amber:#c5cae9}
body[data-theme="coral"]{--bg:#140806;--bg2:#20100c;--panel:#2c1612;--panel2:#381c18;
  --line:#4a2824;--line2:#623630;--neon:#ff6f61;--cyan:#ff8a80;--mag:#e64a19;--green:#ffab91;--amber:#ffccbc}
body[data-theme="emerald"]{--bg:#02120a;--bg2:#041c12;--panel:#06261a;--panel2:#083022;
  --line:#0c4030;--line2:#105840;--neon:#00c853;--cyan:#69f0ae;--mag:#00a844;--green:#b9f6ca;--amber:#e8f5e9}
body[data-theme="graphite"]{--bg:#0c0c0c;--bg2:#161616;--panel:#1e1e1e;--panel2:#262626;
  --line:#363636;--line2:#484848;--neon:#e0e0e0;--cyan:#bdbdbd;--mag:#9e9e9e;--green:#eeeeee;--amber:#f5f5f5}
body[data-theme="tangerine"]{--bg:#140a02;--bg2:#201204;--panel:#2c1a06;--panel2:#382208;
  --line:#4a2e0e;--line2:#623e14;--neon:#ff9800;--cyan:#ffb74d;--mag:#f57c00;--green:#ffcc80;--amber:#fff3e0}
body[data-theme="lavender"]{--bg:#0e0a14;--bg2:#161020;--panel:#1e162c;--panel2:#261c38;
  --line:#36284c;--line2:#483664;--neon:#b39ddb;--cyan:#d1c4e9;--mag:#7e57c2;--green:#e1bee7;--amber:#f3e5f5}
body[data-theme="jade"]{--bg:#04120e;--bg2:#081c18;--panel:#0c2620;--panel2:#103028;
  --line:#164038;--line2:#1e584c;--neon:#26a69a;--cyan:#4db6ac;--mag:#00897b;--green:#80cbc4;--amber:#b2dfdb}
body[data-theme="crimson"]{--bg:#100204;--bg2:#1a0408;--panel:#24060c;--panel2:#2e0810;
  --line:#420e18;--line2:#5a1420;--neon:#dc143c;--cyan:#ff4d6d;--mag:#b71c1c;--green:#ef9a9a;--amber:#ffcdd2}
body[data-theme="cyberpunk"]{--bg:#0a0014;--bg2:#12001f;--panel:#1a002e;--panel2:#22003d;
  --line:#3d0066;--line2:#5c0099;--neon:#fcee0a;--cyan:#00f0ff;--mag:#ff2a6d;--green:#39ff14;--amber:#ff9f1c}
body[data-theme="monochrome"]{--bg:#0a0a0a;--bg2:#111111;--panel:#161616;--panel2:#1c1c1c;
  --line:#2a2a2a;--line2:#3a3a3a;--neon:#ffffff;--cyan:#d0d0d0;--mag:#b0b0b0;--green:#c8c8c8;--amber:#e0e0e0}
/* ===== MORE THEMES ===== */
body[data-theme="nord"]{--bg:#2e3440;--bg2:#3b4252;--panel:#434c5e;--panel2:#4c566a;
  --line:#5e6a7d;--line2:#7b88a1;--neon:#88c0d0;--cyan:#8fbcbb;--mag:#b48ead;--green:#a3be8c;--amber:#ebcb8b}
body[data-theme="tokyo-night"]{--bg:#1a1b26;--bg2:#24283b;--panel:#1f2335;--panel2:#292e42;
  --line:#3b4261;--line2:#565f89;--neon:#7aa2f7;--cyan:#7dcfff;--mag:#bb9af7;--green:#9ece6a;--amber:#e0af68}
body[data-theme="coffee"]{--bg:#1a120b;--bg2:#24180f;--panel:#2e1f14;--panel2:#382819;
  --line:#4a3422;--line2:#624830;--neon:#d4a574;--cyan:#e8c4a0;--mag:#c4956a;--green:#b8a090;--amber:#f0d0a0}
body[data-theme="slate"]{--bg:#0f1419;--bg2:#1a2332;--panel:#1e293b;--panel2:#273549;
  --line:#334155;--line2:#475569;--neon:#94a3b8;--cyan:#cbd5e1;--mag:#64748b;--green:#a8b5c4;--amber:#e2e8f0}
body[data-theme="aurora"]{--bg:#04101a;--bg2:#0a1c2a;--panel:#0e2436;--panel2:#122c42;
  --line:#1a3a55;--line2:#245070;--neon:#5eead4;--cyan:#67e8f9;--mag:#c084fc;--green:#86efac;--amber:#fde68a}
body[data-theme="candy"]{--bg:#1a0a14;--bg2:#2a1020;--panel:#351428;--panel2:#401830;
  --line:#5a2040;--line2:#7a2c58;--neon:#ff6bcb;--cyan:#7af0ff;--mag:#ff8fab;--green:#b8f2e6;--amber:#ffe66d}
body[data-theme="terminal"]{--bg:#0c0c0c;--bg2:#121212;--panel:#1a1a1a;--panel2:#222;
  --line:#333;--line2:#444;--neon:#33ff33;--cyan:#00ff99;--mag:#ff3333;--green:#66ff66;--amber:#ccff33}
body[data-theme="carbon"]{--bg:#0d0d0d;--bg2:#161616;--panel:#1f1f1f;--panel2:#282828;
  --line:#333;--line2:#4a4a4a;--neon:#ff6b00;--cyan:#ff9f43;--mag:#ff4757;--green:#2ed573;--amber:#ffa502}
body[data-theme="oceanic"]{--bg:#0b1419;--bg2:#12202a;--panel:#1a2c38;--panel2:#223844;
  --line:#2d4a5a;--line2:#3d6278;--neon:#5fb3b3;--cyan:#6699cc;--mag:#c594c5;--green:#99c794;--amber:#fac863}
body[data-theme="rose-pine"]{--bg:#191724;--bg2:#1f1d2e;--panel:#26233a;--panel2:#2a273f;
  --line:#403d52;--line2:#524f67;--neon:#ebbcba;--cyan:#9ccfd8;--mag:#c4a7e7;--green:#31748f;--amber:#f6c177}


#boot{position:fixed;inset:0;background:#050608;z-index:100;display:flex;align-items:center;
  justify-content:center;transition:opacity .45s,visibility .45s;cursor:pointer;
   animation:bootAuto .5s ease 17s forwards}
#boot.off{opacity:0;visibility:hidden}
@keyframes bootAuto{to{opacity:0;visibility:hidden}}
/*.boot-box{width:min(560px,92vw);border:1px solid var(--line2);background:var(--panel);padding:20px 26px 24px}*/
.boot-box{width:min(760px,94vw);border:1px solid var(--line2);background:var(--panel);padding:20px 26px 24px}
.boot-head{color:var(--neon);font-size:11px;letter-spacing:3px;font-weight:700;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
/*#bootLog{font-size:12px;line-height:2;min-height:110px;white-space:pre-wrap}*/
#bootLog{font-size:12px;line-height:2;height:200px;overflow-y:auto;
  white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track);
  background:var(--bg);border:1px solid var(--line);padding:10px 12px}
#bootLog .tg{color:var(--cyan)} #bootLog .ok{color:var(--green)} #bootLog .wt{color:var(--dim)}
#bootLog .last{color:var(--neon);animation:bootBlink 1s steps(1) infinite}
@keyframes bootBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
#bootLog .last{animation:bootBlink 1s steps(1) infinite;color:var(--neon)}
@keyframes bootBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.boot-skip{margin-top:12px;font-size:10px;color:#33445a;letter-spacing:2px}

body.drop .panel{outline:2px dashed var(--neon);outline-offset:-6px}

/* ===== PERINGATAN DEVTOOLS ===== */
#devwarn{position:fixed;inset:0;z-index:9999;display:none;align-items:center;
  justify-content:center;background:rgba(2,3,5,.9);backdrop-filter:blur(5px)}
#devwarn.open{display:flex}
.dw-panel{width:min(460px,92vw);background:var(--panel);border:1px solid var(--mag);
  padding:28px 28px 24px;text-align:center;position:relative;animation:dwIn .25s ease}
@keyframes dwIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.dw-panel::before{content:'';position:absolute;inset:-1px;pointer-events:none;
  border-top:2px solid var(--mag);border-bottom:2px solid var(--mag)}
.dw-ico{width:66px;height:66px;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--mag);color:var(--mag);font-size:27px;
  background:rgba(255,42,109,.06);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  animation:dwPulse 1.8s ease-in-out infinite}
@keyframes dwPulse{0%,100%{box-shadow:0 0 8px rgba(255,42,109,.2)}
  50%{box-shadow:0 0 30px rgba(255,42,109,.5)}}
.dw-title{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:2.5px;color:#fff}
.dw-tag{font-size:9px;letter-spacing:2.5px;color:var(--mag);margin:3px 0 16px}
.dw-msg{font-size:12px;line-height:1.9;color:var(--txt);text-align:left;
  border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);
  padding:14px 2px;margin-bottom:18px}
.dw-msg b{color:var(--neon);font-weight:500}
.dw-key{display:inline-block;border:1px solid var(--line2);background:#0a0e13;
  color:var(--cyan);font-size:10px;padding:1px 7px;margin:0 2px}
.dw-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;font:700 12px var(--mono);letter-spacing:2px;cursor:pointer;
  background:var(--mag);color:#fff;border:1px solid var(--mag);transition:.15s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.dw-btn:hover{background:#fff;color:var(--mag)}
.dw-foot{margin-top:12px;font-size:9px;letter-spacing:1.5px;color:#33445a}

/* ===== SOSIAL MEDIA BAR (carousel geser) ===== */
.social-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:8px 14px 10px;border-top:1px solid var(--line);
  background:rgba(8,11,14,.9);position:relative;z-index:1}
.social-label{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2.5px;
  color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.social-label i{color:var(--neon);font-size:11px}
.social-wrap{flex:1;min-width:0;position:relative}
.social-track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 3px;cursor:grab}
.social-track.dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.social-track::-webkit-scrollbar{display:none}
.social-wrap::before,.social-wrap::after{content:'';position:absolute;top:0;bottom:0;width:22px;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.social-wrap::before{left:0;background:linear-gradient(90deg,#080b0e,transparent)}
.social-wrap::after{right:0;background:linear-gradient(270deg,#080b0e,transparent)}
.social-wrap.canl::before{opacity:1}
.social-wrap.canr::after{opacity:1}
.social-grid{display:flex;flex-wrap:nowrap;gap:7px;width:max-content;min-width:100%}
.soc{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;
  border:1px solid var(--line2);background:rgba(14,21,28,.7);color:var(--dim);
  font-size:11px;letter-spacing:.4px;transition:.15s;scroll-snap-align:start;flex:0 0 auto;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.soc i{font-size:12px;color:var(--cyan);transition:.15s;flex:0 0 auto}
.soc span{white-space:nowrap}
.soc:hover,.soc:focus-visible{border-color:var(--neon);color:#fff;background:rgba(252,238,10,.07)}
.soc:hover i,.soc:focus-visible i{color:var(--neon);transform:scale(1.15)}
.sn-btn{flex:0 0 auto;width:26px;height:26px;display:none;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(14,21,28,.7);color:var(--dim);
  font-size:10px;transition:.15s;user-select:none;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.sn-btn:hover{border-color:var(--neon);color:var(--neon)}
.sn-btn.show{display:flex}


/* ===== SLIDESHOW ===== */
#slides{
  position:fixed;inset:0;z-index:92;display:none;
  align-items:center;justify-content:center;
  background:rgba(2,4,6,.92);backdrop-filter:blur(4px)
}
#slides.open{display:flex;flex-direction:column}

/* Slideshow bottom bar + thumbs */
.sl-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:rgba(8,11,14,.95);
  width:100%;
  box-sizing:border-box;
  min-height:56px;
}
.sl-info{
  font-size:12px;
  color:var(--txt);
  min-width:0;
  max-width:28%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 28%;
}
.sl-info b{color:var(--neon)}
.sl-thumbs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 4px;
  max-width:min(52vw, 560px);
  flex:1 1 auto;
  min-width:0;
  scrollbar-width:thin;
  align-items:center;
}
.sl-thumbs img,
.sl-thumbs .sl-thumb{
  width:48px;
  height:36px;
  object-fit:cover;
  border:1px solid var(--line2);
  cursor:pointer;
  opacity:.55;
  transition:opacity .15s, border-color .15s;
  flex:0 0 auto;
  background:var(--bg2);
  display:block;
}
.sl-thumbs img.on,
.sl-thumbs img:hover{
  opacity:1;
  border-color:var(--neon);
}
.sl-more{
  color:var(--dim);
  font-size:10px;
  align-self:center;
  flex:0 0 auto;
  padding:0 6px;
}
.sl-bar-end{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  margin-left:auto;
}
.sl-count{
  font-size:11px;
  color:var(--dim);
  letter-spacing:1px;
  flex:0 0 auto;
  padding:4px 12px 4px 0;
  border-right:1px solid var(--line2);
  white-space:nowrap;
}
#slClose{
  flex:0 0 auto;
  margin-left:0;
  white-space:nowrap;
}
@media (max-width:720px){
  .sl-bar{
    flex-wrap:wrap;
    gap:10px;
    padding:10px 12px;
  }
  .sl-info{
    max-width:100%;
    flex:1 1 100%;
    order:1;
  }
  .sl-thumbs{
    max-width:100%;
    flex:1 1 auto;
    order:3;
    width:100%;
  }
  .sl-bar-end{
    order:2;
    margin-left:auto;
  }
}

.sl-stage{
  flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
  position:relative;padding:20px 60px
}
.sl-stage img{
  max-width:min(96vw,1200px);max-height:78vh;object-fit:contain;
  border:1px solid var(--line2);background:#000;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
  animation:slIn .25s ease
}
@keyframes slIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.sl-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(14,21,28,.85);color:var(--txt);
  font-size:16px;cursor:pointer;transition:.15s;z-index:2;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)
}
.sl-nav:hover{border-color:var(--neon);color:var(--neon)}
.sl-prev{left:12px}.sl-next{right:12px}



/* Slideshow — high-perf swipe + pinch zoom */
.sl-stage{
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.sl-stage.sl-swipeable{
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sl-stage.sl-swiping,
.sl-stage.sl-pinching{
  cursor: grabbing;
}
.sl-stage.sl-zoomed{
  cursor: grab;
}
.sl-stage.sl-zoomed.sl-swiping{
  cursor: grabbing;
}
.sl-stage #slImg{
  transform-origin: center center;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: none;
}
@media (hover:none) and (pointer:coarse){
  .sl-stage.sl-swipeable{ cursor: default; }
  .sl-nav{ width:48px; height:48px; }
  .sl-prev{ left: max(8px, env(safe-area-inset-left)); }
  .sl-next{ right: max(8px, env(safe-area-inset-right)); }
  .sl-bar{
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   HOVER EFFECTS — cyberpunk polish
   ============================================================ */

/* --- Details rows --- */
.row{
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.row:hover{
  background:rgba(252,238,10,.07);
  box-shadow:inset 0 0 0 1px rgba(252,238,10,.12);
}
.row:hover .c-ic i{
  transform:scale(1.12);
  filter:drop-shadow(0 0 6px currentColor);
  transition:transform .18s ease, filter .18s ease;
}
.row .c-ic i{transition:transform .18s ease, filter .18s ease}
.row:hover .nm{color:#fff;text-shadow:0 0 12px rgba(252,238,10,.25)}
.row:hover .c-size{color:var(--neon)}
.row:hover .c-date{color:var(--dim2)}
.row:active{transform:scale(0.997)}

/* --- List view --- */
#rows.view-list .tile-x{
  transition:background .15s ease, padding-left .15s ease, border-color .15s ease;
  border-left:2px solid transparent;
}
#rows.view-list .tile-x:hover{
  background:rgba(252,238,10,.07);
  border-left-color:var(--neon);
  padding-left:14px;
}
#rows.view-list .tile-x:hover .tx-ic{
  transform:scale(1.15);
  filter:drop-shadow(0 0 5px currentColor);
}
#rows.view-list .tile-x .tx-ic{transition:transform .15s ease, filter .15s ease}
#rows.view-list .tile-x:hover .tx-nm{color:#fff}

/* --- Content view --- */
#rows.view-content .tile-x{
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
  border-left:2px solid transparent;
}
#rows.view-content .tile-x:hover{
  background:rgba(252,238,10,.06);
  border-left-color:var(--neon);
}
#rows.view-content .tile-x:hover .tx-ic,
#rows.view-content .tile-x:hover .tx-thumb{
  transform:scale(1.08);
  filter:drop-shadow(0 0 8px rgba(0,240,255,.35));
}
#rows.view-content .tile-x .tx-ic,
#rows.view-content .tile-x .tx-thumb{
  transition:transform .18s ease, filter .18s ease;
}

/* --- Tiles view --- */
#rows.view-tiles .tile-x{
  transition:background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
#rows.view-tiles .tile-x:hover{
  background:rgba(252,238,10,.07);
  border-color:rgba(252,238,10,.45);
  box-shadow:
    0 0 0 1px rgba(252,238,10,.15),
    0 4px 18px rgba(0,0,0,.35),
    0 0 20px rgba(252,238,10,.06);
  transform:translateY(-2px);
}
#rows.view-tiles .tile-x:hover .tx-media{
  border-color:rgba(252,238,10,.4);
  box-shadow:0 0 12px rgba(252,238,10,.15);
}
#rows.view-tiles .tile-x .tx-media{
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#rows.view-tiles .tile-x:hover .tx-media{
  transform:scale(1.05);
}
#rows.view-tiles .tile-x:hover .tx-nm{color:#fff}
#rows.view-tiles .tile-x:hover .tx-sub{color:var(--dim2)}
#rows.view-tiles .tile-x:active{
  transform:translateY(0);
  box-shadow:0 0 0 1px rgba(252,238,10,.2);
}
#rows.view-tiles .tile-x.selected:hover{
  border-color:var(--cyan);
  box-shadow:
    inset 2px 0 0 var(--cyan),
    0 0 0 1px rgba(0,240,255,.2),
    0 4px 18px rgba(0,0,0,.35);
}

/* --- Icon grids --- */
#rows[class*="view-icons"] .tile-x{
  transition:background .15s ease, border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
#rows[class*="view-icons"] .tile-x:hover{
  background:rgba(252,238,10,.08);
  border-color:rgba(252,238,10,.35);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 16px rgba(252,238,10,.08);
  z-index:2;
}
#rows[class*="view-icons"] .tile-x:hover .tx-ic{
  filter:drop-shadow(0 0 10px currentColor);
  transform:scale(1.08);
}
#rows[class*="view-icons"] .tile-x .tx-ic{
  transition:transform .18s ease, filter .18s ease;
}
#rows[class*="view-icons"] .tile-x:hover .tx-thumb{
  border-color:rgba(252,238,10,.5);
  box-shadow:0 0 14px rgba(252,238,10,.2);
  transform:scale(1.04);
}
#rows[class*="view-icons"] .tile-x .tx-thumb{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#rows[class*="view-icons"] .tile-x:hover .tx-nm{color:#fff}
#rows[class*="view-icons"] .tile-x:active{
  transform:translateY(-1px) scale(1.01);
}
#rows[class*="view-icons"] .tile-x.selected:hover{
  border-color:var(--cyan);
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 14px rgba(0,240,255,.15);
}

/* --- Toolbar / buttons --- */
.btn{
  transition:border-color .15s ease, color .15s ease, background .15s ease, box-shadow .18s ease, transform .12s ease;
}
.btn:hover{
  border-color:var(--neon);
  color:var(--neon);
  box-shadow:0 0 12px rgba(252,238,10,.15);
}
.btn:active{transform:scale(0.96)}
.btn.neon:hover{
  background:#fff;
  color:#000;
  box-shadow:0 0 16px rgba(252,238,10,.35);
}
.tbtn,.vbtn{
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.tbtn:hover,.vbtn:hover{
  color:var(--neon);
  box-shadow:inset 0 0 12px rgba(252,238,10,.08);
}
.tbtn:active,.vbtn:active{transform:scale(0.92)}

/* --- Social chips --- */
.soc{
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease, box-shadow .18s ease;
}
.soc:hover,.soc:focus-visible{
  border-color:var(--neon);
  color:#fff;
  background:rgba(252,238,10,.08);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 10px rgba(252,238,10,.1);
}
.soc:hover i,.soc:focus-visible i{
  color:var(--neon);
  transform:scale(1.2);
  filter:drop-shadow(0 0 6px rgba(252,238,10,.5));
}
.soc i{transition:color .15s ease, transform .15s ease, filter .15s ease}

/* --- View menu items --- */
.vm-it{
  transition:background .12s ease, color .12s ease, padding-left .12s ease;
}
.vm-it:hover{
  background:rgba(252,238,10,.08);
  color:#fff;
  padding-left:18px;
}
.vm-it:hover i{color:var(--neon);filter:drop-shadow(0 0 4px rgba(252,238,10,.4))}

/* --- Crumbs --- */
.crumb:hover{color:var(--cyan);text-shadow:0 0 8px rgba(0,240,255,.35)}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .row, .tile-x, .btn, .tbtn, .vbtn, .soc, .vm-it,
  .row .c-ic i, .tx-ic, .tx-thumb, .tx-media, .soc i{
    transition:none!important;
    transform:none!important;
    animation:none!important;
    filter:none!important;
  }
}

@media(max-width:560px){
  .social-bar{padding:7px 10px 9px;gap:8px}
  .soc{padding:6px 9px;font-size:10.5px;gap:6px}
}

/* ---- responsive: resize tracks only; --areas stays 10-slot ----
   Tablet (iPad 11 portrait ~834, landscape ~1194) was falling into a
   squeezed desktop table (--table-min 820/960) that wrapped filenames.
   table-min:0 fills the panel. Hide low-value columns. Names ellipsis. */

/* small desktop / iPad landscape */
@media(max-width:1280px){
  :root{
    --table-min: 0px;
    --c-ic: 44px;
    --c-name: minmax(160px, 2.2fr);
    --c-ket: minmax(80px, 0.8fr);
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 78px;
    --c-date: 108px;
    --c-mode: 0px;
    --c-action: minmax(92px, 92px);
  }
  body.admin{
    --c-action: minmax(132px, 132px);
  }
  body:not(.admin){
    --c-sel: 12px;
    --c-action: minmax(80px, 80px);
  }
  .c-code,.c-author,.c-perm,
  .th.c-code,.th.c-author,.th.c-perm{
    display:none !important;
  }
  header{padding:0 14px;gap:10px}
  .hright{gap:8px}
  .hright .btn{padding:8px 10px}
  .clock{display:none}
  main{padding:12px 14px 14px}
}

/* iPad portrait / large tablet (~768–1024) */
@media(max-width:1024px){
  :root{
    --table-min: 0px;
    --c-sel: 8px;
    --c-ic: 40px;
    --c-name: minmax(0, 1fr);
    --c-ket: 0px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 0px;
    --c-date: 0px;
    --c-mode: 0px;
    --c-action: minmax(72px, 72px);
  }
  body.admin{
    --c-sel: 28px;
    --c-action: minmax(110px, 110px);
  }
  body:not(.admin){
    --c-sel: 8px;
    --c-action: minmax(64px, 64px);
  }
  .c-ket,.c-code,.c-author,.c-size,.c-date,.c-perm,
  .th.c-ket,.th.c-size,.th.c-date,.th.c-perm,.th.c-code,.th.c-author{
    display:none !important;
  }
  .c-sub{display:block}
  .ph-url{display:none}
  .idx-info{display:none}
  main{padding:10px 12px 12px}

  /* header: icon buttons, no labels */
  header{height:56px;padding:0 12px;gap:8px}
  .glitch{font-size:16px;letter-spacing:1.5px}
  .brand-sub{display:none}
  .hright .btn{padding:0;width:36px;height:36px;justify-content:center}
  .hright .btn .btn-txt{display:none}
  .hright .btn i{margin:0;font-size:13px}
  #btnFS,#btnHelp{display:none!important}

  .toolbar{gap:8px;padding:8px 12px}
  .search-box{max-width:none;flex:1 1 180px;width:auto}
  .panel-head{padding:8px 12px}
  .index-line{padding:8px 12px}
  #dirTitle{font-size:16px}

  .row{
    min-height:52px;
    align-items:center;
    min-width:0;
    width:100%;
  }
  .tbl-head,
  #rows.view-details .row{
    min-width:0;
    width:100%;
  }
  .c-name{
    padding:8px 8px 8px 4px;
    row-gap:3px;
  }
  .c-name .nm{
    font-size:13px;
    font-weight:600;
    letter-spacing:.2px;
  }
  .row.is-dir .c-name .nm{font-weight:700}
  .c-sub{
    display:block!important;
    font-size:10.5px;
    letter-spacing:.2px;
  }
  .c-act{opacity:1!important;padding-right:4px}
  .c-act .ai{width:30px;height:30px;font-size:12px}
  .a-copy{display:none}
}
@media(max-width:760px){
  :root{
    --table-min: 0px;
    --c-ic: 40px;
    --c-name: minmax(0, 1fr);
    --c-ket: 0px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 72px;
    --c-date: 0px;
    --c-mode: 0px;
    --c-action: minmax(110px, 110px);
  }
  body:not(.admin){
    --c-sel: 12px;
    --c-action: minmax(72px, 72px);
  }
  .c-ket,.c-code,.c-author,.c-date,.c-perm{
    visibility:hidden;overflow:hidden;pointer-events:none;
  }
  .a-copy{display:none}
  .idx{display:none}
  /* ===== HEADER MOBILE — ringkas & lega ===== */
  header{
    height:54px;padding:0 10px 0 12px;
    gap:8px;
  }
  .brand{gap:10px;min-width:0;flex:1}
  .brand-mark{
    width:34px;height:34px;font-size:14px;
    border-width:1.5px;
  }
  .brand > div{min-width:0;overflow:hidden}
  .brand-sub,.clock,.idx-info,.hints{display:none}
  .glitch{
    font-size:14px;letter-spacing:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
  }
  /* Sembunyikan tombol sekunder di HP — tetap bisa lewat palette / toolbar */
  #btnFS,#btnHelp,#btnAbout{display:none!important}
  .hright{
    gap:6px;
    flex:0 0 auto;
  }
  .hright .btn{
    padding:0;
    width:34px;height:34px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line2);
    background:rgba(14,21,28,.7);
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  }
  .hright .btn i{font-size:13px;margin:0}
  .hright .btn .btn-txt{display:none}
  /* Status LIVE — compact pill di samping brand */
  .status{
    padding:4px 8px;
    letter-spacing:1.5px;
    font-size:9px;
    gap:6px;
    border-color:rgba(0,240,255,.45);
  }
  .status .led{width:6px;height:6px}
  .st-long{display:none}
  .st-short{display:inline}
  .panel-head{padding:8px 12px}
  .index-line{flex-wrap:wrap;gap:4px 10px;padding:8px 12px}
  #dirTitle{font-size:15px}
  .toolbar{gap:6px;padding:8px 10px}
  .search-box{width:100%;max-width:none;order:-1;height:36px}
  .tcount{margin-right:auto;margin-left:2px;font-size:10px}
  .th{padding:8px 6px;letter-spacing:1px;font-size:9px}
  .tbl-head{display:none!important} /* hide column headers on phone — cleaner */
  main{padding:8px}
  .panel{border-radius:0}
  .panel-foot{flex-wrap:wrap;gap:6px 12px;padding:8px 12px;font-size:9.5px}
  .disk-bar{width:72px}
  .scan-text{font-size:11px}

  /* ===== MOBILE ROW ===== */
  .row{
    min-height:56px;
    padding:4px 0;
    grid-template-columns:var(--cols)!important;
    align-items:center;
    border-bottom:1px solid rgba(27,37,48,.75);
    min-width:0;
    width:100%;
  }
  .tbl-head{min-width:0;width:100%}
  .c-ic{font-size:16px;justify-content:flex-start;padding-left:2px}
  .c-name{
    padding:10px 8px 10px 4px;
    min-width:0;
  }
  .c-name .nm{
    font-size:13.5px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.3px;
  }
  .row.is-dir .c-name .nm{font-weight:700;font-size:14px}
  .c-sub{
    display:block!important;
    font-size:10.5px;
    color:var(--dim);
    line-height:1.35;
    margin-top:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    letter-spacing:.2px;
  }
  .c-size,.c-date,.c-perm,.c-ket,.c-author{display:none!important}
  .c-act{opacity:1!important;gap:3px;padding-right:4px}
  .c-act .ai{width:30px;height:30px;font-size:12px}

  #shell{align-items:stretch}
  .shell-panel{width:100vw;height:100vh;max-height:100vh}
  @supports(height:100dvh){.shell-panel{height:100dvh}}
  .shell-body{padding:10px}.shell-body img{max-height:52vh}
  .shell-foot .btn{flex:1;justify-content:center}
  #toasts{left:10px;right:10px;bottom:10px}
  .toast{min-width:0;width:100%;max-width:none}
  .boot-box{padding:14px 16px 18px}
  #bootLog{
    font-size:10.5px;line-height:1.9;height:150px;
    white-space:pre-wrap;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track);
    background:#04060a;border:1px solid #1b2530;padding:10px 12px
  }
  #palette{padding-top:5vh}
  #bulkbar{left:10px;right:10px;transform:none;width:auto;justify-content:center;flex-wrap:wrap}

  /* View menu mobile */
  .view-menu{right:0;left:auto;min-width:200px;max-height:70vh;overflow-y:auto}
  #rows.view-tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;padding:8px}
  #rows.view-tiles .tile-x{height:58px;min-height:58px;padding:8px 10px;gap:10px}
  #rows.view-tiles .tile-x .tx-media{width:40px;height:40px;flex-basis:40px}
  #rows.view-tiles .tile-x .tx-thumb{width:40px;height:40px}
  #rows.view-tiles .tile-x .tx-ic{font-size:20px}
  #rows.view-tiles .tile-x .tx-nm{font-size:12px}
  #rows.view-tiles .tile-x .tx-sub{font-size:10px}
  #rows.view-icons-xl{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  #rows.view-icons-lg{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  #rows.view-content .tile-x{padding:8px 10px;min-height:48px;gap:10px}
  #rows.view-content .tile-x .tx-ic{font-size:22px;width:32px}
  #rows.view-content .tile-x .tx-thumb{width:40px;height:40px}
}
@media(max-width:560px){
  :root{
    --table-min: 0px;
    --c-sel: 24px;
    --c-ic: 36px;
    --c-name: minmax(0,1fr);
    --c-ket: 0px; --c-code: 0px; --c-auth: 0px;
    --c-size: 0px; --c-date: 0px; --c-mode: 0px;
    --c-action: 100px;
  }
  body:not(.admin){ --c-sel:8px; --c-action:56px; }
  .c-size{display:none!important}
  .c-size{display:none}
  .c-name{padding:9px 6px 9px 2px}
  .c-name .nm{font-size:13px}
  .row.is-dir .c-name .nm{font-size:13.5px}
  .c-sub{font-size:10px}
  header{height:50px;padding:0 8px 0 10px}
  .brand-mark{width:30px;height:30px;font-size:12px}
  .glitch{font-size:13px;letter-spacing:.8px}
  .hright{gap:5px}
  .hright .btn{width:32px;height:32px}
  .hright .btn i{font-size:12px}
  .status{padding:3px 7px;font-size:8.5px;letter-spacing:1.2px}
  .btn{padding:7px 10px}
  .btn-txt{display:none}
  .tag{font-size:9px;padding:2px 7px}
  #dirTitle{font-size:14px}
  .search-box{height:34px;padding:0 11px}
  .tools .tbtn,.view-group .vbtn{width:32px;height:32px;font-size:12px}
  #rows.view-tiles{grid-template-columns:1fr;gap:6px;padding:8px}
  #rows.view-tiles .tile-x{height:56px;min-height:56px}
  #rows.view-icons-sm{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  #rows.view-icons-md{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  #rows.view-icons-lg{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  #rows.view-icons-xl{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .social-bar{padding:6px 8px 8px}
  .social-label{font-size:9px}
}
@media(hover:none){
  .row .c-act{opacity:1}
  /* Disable lift/scale hover on touch — avoids sticky hover */
  #rows.view-tiles .tile-x:hover,
  #rows[class*="view-icons"] .tile-x:hover{
    transform:none;
    box-shadow:none;
  }
  #rows.view-list .tile-x:hover{padding-left:12px}
}


/* ===== Swiper slideshow theme ===== */
#slides{
  position:fixed;inset:0;z-index:92;display:none;
  flex-direction:column;
  background:rgba(2,4,6,.92);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#slides.open{display:flex}
body.slides-open{overflow:hidden}
.sl-main{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  position:relative;
  overflow:hidden;
}
.sl-main .swiper-wrapper{height:100%}
.sl-main .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  height:100%;
}
.sl-main .swiper-zoom-container{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sl-main .swiper-zoom-container img{
  max-width:min(96vw,1200px);
  max-height:calc(100vh - 120px);
  object-fit:contain;
  border:1px solid var(--line2);
  background:#000;
  box-shadow:0 12px 48px rgba(0,0,0,.55);
  user-select:none;
  -webkit-user-drag:none;
}
.sl-main.is-zoomed .swiper-zoom-container img{
  border-color:transparent;
  box-shadow:none;
}
.sl-main .sl-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);
  background:rgba(14,21,28,.85);
  color:var(--txt);
  font-size:16px;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.sl-main .sl-prev{left:12px}
.sl-main .sl-next{right:12px}
.sl-main .sl-nav:hover{border-color:var(--neon);color:var(--neon)}
.sl-thumbs-swiper{
  flex:1 1 auto;
  min-width:0;
  max-width:min(52vw,560px);
  height:48px;
  margin:0;
  overflow:hidden;
}
.sl-thumbs-swiper .swiper-slide{
  width:48px;
  height:36px;
  opacity:.55;
  cursor:pointer;
  border:1px solid var(--line2);
  background:var(--bg2);
  overflow:hidden;
}
.sl-thumbs-swiper .swiper-slide-thumb-active,
.sl-thumbs-swiper .swiper-slide:hover{
  opacity:1;
  border-color:var(--neon);
}
.sl-thumbs-swiper .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.img-fallback{
  object-fit:contain !important;
  filter:grayscale(.2);
  opacity:.9;
}
@media (max-width:720px){
  .sl-thumbs-swiper{max-width:100%; flex:1 1 100%; order:3}
  .sl-main .swiper-zoom-container img{max-height:calc(100vh - 140px)}
  .sl-main .sl-nav{width:48px;height:48px}
}
@media (hover:none) and (pointer:coarse){
  .sl-main .sl-prev{left:max(8px, env(safe-area-inset-left))}
  .sl-main .sl-next{right:max(8px, env(safe-area-inset-right))}
}


/* Rain dim — keep UI readable */
body.rain-on .panel{
  background: rgba(8,11,14,.92);
}
body.rain-on #rows{
  background: rgba(6,8,10,.55);
}
body.rain-on header{
  background: rgba(8,11,14,.94);
}


/* ===== v5.503 — search focus cleanup (wins cascade) ===== */
.search-box{
  outline: none;
  box-shadow: none;
}
.search-box:focus-within{
  border-color: var(--neon) !important;
  outline: none !important;
  /* single soft ring — not 2px+4px double outline */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 45%, transparent) !important;
}
.search-box input,
.search-box input:focus,
.search-box input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.search-box:focus-within i{ color: var(--neon); opacity: .9; }


/* ===== Explorer-style preview pane ===== */
.browse-split{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  align-items:stretch;
}
.browse-split .tbl-wrap{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.preview-pane{
  flex:0 0 300px;
  width:300px;
  max-width:42vw;
  border-left:1px solid var(--line);
  background:rgba(8,11,14,.96);
  display:flex;
  flex-direction:column;
  min-height:0;
  z-index:3;
}
.preview-pane[hidden]{ display:none !important; }
body.preview-on .preview-pane{ display:flex !important; }
.pv-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:var(--panel2);
}
.pv-title{
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--dim);
  font-weight:700;
}
.pv-title i{ color:var(--neon); margin-right:6px; }
.pv-body{
  flex:1 1 auto;
  overflow:auto;
  padding:14px 14px 20px;
  min-height:0;
}
.pv-empty{
  text-align:center;
  color:var(--dim);
  padding:40px 12px;
  font-size:12px;
  line-height:1.7;
}
.pv-empty i{ font-size:28px; color:var(--line2); display:block; margin-bottom:12px; }
.pv-media{
  text-align:center;
  margin-bottom:14px;
  background:#000;
  border:1px solid var(--line2);
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pv-media img{
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  display:block;
}
.pv-media video, .pv-media audio{
  width:100%;
  max-height:200px;
}
.pv-icon-hero{
  font-size:56px;
  padding:28px 0 12px;
  text-align:center;
}
.pv-name{
  font-family:var(--disp);
  font-weight:700;
  font-size:15px;
  color:#fff;
  word-break:break-word;
  margin:0 0 4px;
  line-height:1.35;
}
.pv-type{
  font-size:11px;
  color:var(--dim);
  margin-bottom:14px;
}
.pv-meta{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
.pv-meta th,
.pv-meta td{
  padding:7px 0;
  border-bottom:1px solid rgba(27,37,48,.75);
  vertical-align:top;
  text-align:left;
}
.pv-meta th{
  width:38%;
  color:var(--dim);
  font-weight:600;
  letter-spacing:.3px;
  padding-right:10px;
}
.pv-meta td{
  color:var(--txt);
  word-break:break-word;
}
.pv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
}
.pv-actions .btn{ font-size:10px; padding:6px 10px; }
#rows .row.pv-active{
  background:rgba(252,238,10,.08);
  box-shadow:inset 2px 0 0 var(--neon);
}
#btnPreviewPane.on{
  color:var(--neon);
  border-color:var(--neon);
}
@media (max-width:900px){
  .preview-pane{
    position:absolute;
    right:0; top:0; bottom:0;
    width:min(300px, 88vw);
    max-width:none;
    box-shadow:-8px 0 28px rgba(0,0,0,.45);
  }
  .browse-split{ position:relative; }
}

.pv-meta th[colspan]{ font-size:10px; border-bottom:1px solid var(--line2); }