/* DIR//LISTER v26.0913 */
*{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:#7a8b9c; --dim2:#8fa0b0; --heading:#ffffff; /* dim bumped for WCAG AA on panel (Patch 08k) */
  --neon:#fcee0a; --cyan:#00f0ff; --mag:#ff2a6d; --green:#00ff9f; --amber:#ff9f1c;
  --font-rajdhani:"Rajdhani","Rajdhani Fallback","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--font-rajdhani);
  --disp:var(--font-rajdhani);
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --ls-body:.02em; --ls-ui:.045em; --ls-display:.07em;
  /* Rajdhani loads via index.php (Google Fonts + jsDelivr Fontsource, font-display:swap) */
  /* ===== DETAILS TABLE — grid areas (11-slot map) =====
     sel | ic | name | ket | views | code | auth | size | date | mode | action
  */
  --c-sel:    36px;
  --c-ic:     40px;
  /* Name absorbs leftover (ellipsis OK); fixed cols sized for full content */
  --c-name:   minmax(120px, 1fr);
  --c-ket:    0px; /* slot kept in areas; often empty in UI */
  --c-views:  118px;
  --c-code:   64px;
  --c-auth:   220px;
  --c-size:   84px;
  --c-date:   152px;
  --c-mode:   76px;
  --c-action: 148px;
  --table-min: 1140px;
  --cols: var(--c-sel) var(--c-ic) var(--c-name) var(--c-ket) var(--c-views) var(--c-code)
          var(--c-auth) var(--c-size) var(--c-date) var(--c-mode) var(--c-action);

  --areas: "sel ic name ket views 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{ overflow: visible; }
.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.35; }
.scanlines{ opacity: 0.2; }
#rain{
  /* no contain:size — was collapsing/half-clipping the canvas box */
  contain: layout style;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: none;
  opacity: 0.92;
  transform: none !important;
  backface-visibility: hidden;
  mix-blend-mode: screen;
}
#rain.is-on{
  display: block !important;
  visibility: visible !important;
}
/* Only highlight Digital button when DIGITAL rain is on (not love) */
body.rain-on.rain-digital #btnRain,
body.rain-digital #btnRain.on,
#btnRain.on{
  background: var(--neon);
  color: #000;
  border-color: var(--neon);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 35%, transparent);
}
body.rain-on.rain-digital #btnRain i,
body.rain-digital #btnRain.on i,
#btnRain.on i{
  color: #000;
}
/* Love active: never light up digital rain button */
body.rain-love #btnRain,
body.rain-love #btnRain.on{
  background: transparent !important;
  color: var(--dim) !important;
  border-color: var(--line2) !important;
  box-shadow: none !important;
}
body.rain-love #btnRain i{
  color: var(--dim) !important;
}

/* --- 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{
  /* avoid contain:paint/size — allows parent .tbl-wrap to scroll correctly */
  contain: layout style;
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}
.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;font-weight:var(--fw-medium);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  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:3;pointer-events:none;display:none;opacity:.55;mix-blend-mode:normal}
.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 rgba(252,238,10,.55);color:var(--neon,#fcee0a);
  background:
    radial-gradient(circle at 30% 25%,rgba(252,238,10,.14),transparent 55%),
    rgba(10,14,19,.9);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 0 16px rgba(252,238,10,.12), inset 0 0 12px rgba(0,240,255,.05);
  position:relative;overflow:hidden;
}
.brand-mark .brand-logo{width:100%;height:100%;display:block}
.brand-mark .brand-scan{
  animation:brandScan 2.4s ease-in-out infinite;
}
@keyframes brandScan{
  0%,100%{transform:translateY(0);opacity:.35}
  50%{transform:translateY(-6px);opacity:.95}
}
.brand-mark:hover{
  border-color:var(--neon,#fcee0a);
  box-shadow:0 0 22px rgba(252,238,10,.22),0 0 12px rgba(0,240,255,.12);
}
.glitch{position:relative;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:2.5px;color:var(--heading,#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:var(--heading,#fff);letter-spacing:2px;display:block;line-height:1}
.clock #clkDate{font-size:10px;color:var(--dim);letter-spacing:1px}
/* Status chip — LIVE NODE / ADMIN / EDITOR */
.status{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px 5px 9px;border-radius:2px;
  font:700 10px/1.2 var(--mono,system-ui);letter-spacing:1.4px;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
  border:1px solid rgba(0,240,255,.45);color:var(--cyan,#00f0ff);
  background:rgba(0,240,255,.06);
  box-shadow:0 0 0 1px rgba(0,0,0,.25), inset 0 0 12px rgba(0,240,255,.04);
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.status .led{
  width:7px;height:7px;flex:0 0 auto;border-radius:1px;
  background:currentColor;box-shadow:0 0 8px currentColor;
  animation:blink 1.6s infinite;
}
.status .st-body{display:inline-flex;align-items:center;min-width:0}
.status .st-role{color:inherit}
.status .st-sep{margin:0 5px;opacity:.55;font-weight:600;letter-spacing:0}
.status .st-user{color:var(--txt,#cfd8e0);font-weight:600;letter-spacing:.08em;max-width:14ch;overflow:hidden;text-overflow:ellipsis}
.status.is-live{
  color:var(--cyan,#00f0ff);
  border-color:rgba(0,240,255,.5);
  background:linear-gradient(135deg,rgba(0,240,255,.1),rgba(0,240,255,.03));
  box-shadow:0 0 16px rgba(0,240,255,.08), inset 0 0 0 1px rgba(0,240,255,.08);
}
.status.is-live .st-user{color:var(--cyan,#00f0ff)}
.status.is-admin{
  color:var(--neon,#fcee0a);
  border-color:rgba(252,238,10,.55);
  background:linear-gradient(135deg,rgba(252,238,10,.12),rgba(252,238,10,.03));
  box-shadow:0 0 18px rgba(252,238,10,.12), inset 0 0 0 1px rgba(252,238,10,.1);
}
.status.is-admin .st-user{color:#fff}
.status.is-admin .led{box-shadow:0 0 10px rgba(252,238,10,.65)}
.status.is-editor{
  color:var(--amber,#ff9f1c);
  border-color:rgba(255,159,28,.5);
  background:linear-gradient(135deg,rgba(255,159,28,.1),rgba(255,159,28,.03));
  box-shadow:0 0 14px rgba(255,159,28,.1), inset 0 0 0 1px rgba(255,159,28,.08);
}
.status.is-editor .st-user{color:var(--txt,#cfd8e0)}
.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) 82%, 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:var(--heading,#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:nowrap}
.search-box{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line2);
  padding:0 12px;height:34px;min-width:120px;flex:1 1 auto;width:auto;max-width:100%;
  box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.toolbar .tools,
.toolbar .theme-menu-wrap,
.toolbar .view-menu-wrap{margin-left:0}
.toolbar-spacer{flex:1 1 auto;min-width:8px}
.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{display:none!important}
.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:visible
}
.toolbar-mid{
  display:flex;align-items:stretch;flex:0 0 auto;
  border:1px solid var(--line2);overflow:hidden;
}
.toolbar-mid .tbtn + .tbtn{border-left:1px solid var(--line2)}
.toolbar > .tools{margin-left:auto}
.toolbar > .theme-menu-wrap,
.toolbar > .view-menu-wrap{margin-left:0}

.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)}
/* FX wrap sits between tbtns — keep same vertical dividers */
.tools > .tbtn + .fx-menu-wrap,
.tools > .fx-menu-wrap + .tbtn,
.tools > .fx-menu-wrap + a.tbtn{
  border-left:1px solid var(--line2);
}
.tools > .fx-menu-wrap{
  display:flex;align-items:stretch;position:relative;flex:0 0 auto;
}
.tools > .fx-menu-wrap > .tbtn{
  border-left:0;
}
.tbtn:hover,.vbtn:hover{color:var(--txt)}
.vbtn.on,.tbtn.on{background:var(--neon);color:#000}
.vbtn.on i,.tbtn.on i{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 — responsive CSS Grid ===== */
#rows.view-tiles{
  --tile-min: 240px;
  --tile-gap: 10px;
  --tile-pad: 12px;
  --tile-media: 44px;
  --tile-h: 68px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
  grid-auto-rows: minmax(var(--tile-h), auto);
  gap: var(--tile-gap);
  padding: var(--tile-pad);
  background: transparent;
  align-content: start;
  justify-content: stretch;
  contain: layout style;
  width: 100%;
  box-sizing: border-box;
}

/* Density modifiers (set by JS or media) */
#rows.view-tiles.tiles-dense{
  --tile-min: 180px;
  --tile-gap: 8px;
  --tile-h: 58px;
  --tile-media: 40px;
}
#rows.view-tiles.tiles-comfy{
  --tile-min: 280px;
  --tile-gap: 12px;
  --tile-h: 76px;
  --tile-media: 52px;
}

#rows.view-tiles .tile-x{
  display: grid;
  grid-template-columns: var(--tile-media) minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  min-height: var(--tile-h);
  height: auto;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line2);
  background: var(--panel2);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .18s ease;
  animation: none;
  overflow: hidden;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto var(--tile-h);
}
#rows.view-tiles .tile-x:hover{
  background: rgba(252,238,10,.06);
  border-color: rgba(252,238,10,.35);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(252,238,10,.12),
    0 4px 16px rgba(0,0,0,.3);
}
#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:active{
  transform: translateY(0);
}

#rows.view-tiles .tile-x .tx-media{
  grid-column: 1;
  width: var(--tile-media);
  height: var(--tile-media);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#rows.view-tiles .tile-x:hover .tx-media{
  border-color: rgba(252,238,10,.4);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(252,238,10,.12);
}
#rows.view-tiles .tile-x .tx-ic{
  font-size: calc(var(--tile-media) * 0.5);
  line-height: 1;
  width: auto;
  height: auto;
  text-align: center;
}
#rows.view-tiles .tile-x .tx-thumb{
  width: var(--tile-media);
  height: var(--tile-media);
  object-fit: cover;
  border: none;
  display: block;
}
#rows.view-tiles .tile-x .tx-body{
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-right: 2px;
}
#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;
}
#rows.view-tiles .tile-x.is-dir .tx-nm{ color: #fff; font-weight: 700; }
#rows.view-tiles .tile-x:hover .tx-nm{ color: #fff; }
#rows.view-tiles .tile-x .tx-sub{
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#rows.view-tiles .tile-x:hover .tx-sub{ color: var(--dim2); }
#rows.view-tiles .tile-x .t-sel{
  grid-column: 3;
  position: static;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
body.admin #rows.view-tiles .tile-x .t-sel{ display: flex; }

/* Responsive breakpoints — densitas kolom */
@media (min-width: 1600px){
  #rows.view-tiles{
    --tile-min: 260px;
    --tile-gap: 12px;
    --tile-media: 48px;
    --tile-h: 72px;
  }
}
@media (max-width: 1280px){
  #rows.view-tiles{
    --tile-min: 220px;
    --tile-gap: 9px;
  }
}
@media (max-width: 1024px){
  #rows.view-tiles{
    --tile-min: 200px;
    --tile-gap: 8px;
    --tile-h: 62px;
    --tile-media: 42px;
    --tile-pad: 10px;
  }
}
@media (max-width: 820px){
  #rows.view-tiles{
    --tile-min: 160px;
    --tile-gap: 8px;
    --tile-h: 58px;
    --tile-media: 40px;
    --tile-pad: 8px;
  }
  #rows.view-tiles .tile-x{ column-gap: 10px; padding: 8px 10px; }
  #rows.view-tiles .tile-x .tx-nm{ font-size: 12px; }
  #rows.view-tiles .tile-x .tx-sub{ font-size: 10px; }
}
@media (max-width: 560px){
  #rows.view-tiles{
    --tile-min: 100%;
    --tile-gap: 6px;
    grid-template-columns: 1fr;
  }
}

/* Desktop portrait / vertical monitor: 2–3 kolom nyaman */
@media (orientation: portrait) and (min-width: 700px),
       (max-aspect-ratio: 11/13) and (min-width: 700px) and (min-height: 900px){
  #rows.view-tiles{
    --tile-min: 200px;
    --tile-gap: 10px;
    --tile-pad: 12px 14px;
  }
}

/* Phone landscape: 3–4 kolom compact */
@media (orientation: landscape) and (max-height: 500px),
       (orientation: landscape) and (max-width: 900px) and (max-height: 560px){
  #rows.view-tiles{
    --tile-min: 150px;
    --tile-gap: 6px;
    --tile-h: 52px;
    --tile-media: 36px;
    --tile-pad: 6px 8px;
  }
  #rows.view-tiles .tile-x{ padding: 6px 8px; column-gap: 8px; }
  #rows.view-tiles .tile-x .tx-nm{ font-size: 11.5px; }
  #rows.view-tiles .tile-x .tx-sub{ font-size: 9.5px; }
}

/* Container query — ikut lebar panel, bukan hanya viewport */
@supports (grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr))){
  #rows.view-tiles{
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
  }
}
@container (max-width: 480px){
  #rows.view-tiles{
    --tile-min: 100%;
  }
}
.tbl-wrap, .browse-split, #browseSplit{
  container-type: inline-size;
  container-name: listing;
}


#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;
  /* Fill panel width so no empty strip on the right; scroll only when below --table-min */
  width:100%;
  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-views  { grid-area: views; }
.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:none}
.th.c-act{overflow:visible;border-left:1px solid var(--line2)}
/* 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;
  display:inline-flex;
  align-items:center;
  gap:0;
  flex-direction:row;
  overflow-wrap:normal;
  hyphens:none;
  line-height:1.4;
}
.row.is-dir .nm{color:#eef4fa;font-weight:700}
.row:hover .nm{color:var(--heading,#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:none;
}

/* ACTION — border-left = continuous divider MODE | ACTION (header + rows) */
.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;
  align-self:stretch;
  border-left:1px solid var(--line2);
}
.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:flex-end;
  justify-content:space-between;
  gap:12px 18px;
  flex-wrap:wrap;
  padding:5px 14px 6px;
  border-top:1px solid var(--line2,#1e2a36);
  background:linear-gradient(180deg, rgba(8,12,16,.2), rgba(8,12,16,.55));
  font-size:11px;
  color:var(--dim,#6b7c8c);
  min-height:34px;
  box-sizing:border-box;
}
.panel-foot b{color:var(--cyan);font-weight:700}
.hints{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  letter-spacing:.2px;
}
.hints span.sep,
.hints > span{
  color:#33445a;
  margin:0;
  opacity:.8;
}
.hints b{
  color:var(--dim2);
  font-weight:500;
  letter-spacing:.4px;
  padding:0 3px;
  border:0;
  background:transparent;
  white-space:nowrap;
}
.hints .hint-txt{color:var(--dim,#6b7c8c);white-space:nowrap}
.hints i{margin:0 1px}
.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)}

/* ===== NEON ALERT / TOAST ===== */
#toasts{
  position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;
  z-index:95;pointer-events:none;max-width:min(400px,calc(100vw - 24px));
}
.toast, .neon-alert{
  pointer-events:auto;
  position:relative;
  background:var(--panel,#0b1015);
  border:1px solid var(--line2,#28394a);
  border-left:3px solid var(--cyan,#00f0ff);
  padding:12px 14px 12px 12px;
  font-size:12px;line-height:1.45;
  min-width:min(280px,100%);max-width:100%;
  color:var(--txt,#cfd8e0);
  box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--neon-rgb,252,238,10),.04);
  animation:neonAlertIn .28s cubic-bezier(0.22,1,0.36,1);
  transition:opacity .28s, transform .28s;
  overflow:hidden;
  font-family:var(--mono);
}
.toast::before, .neon-alert::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--neon-rgb,252,238,10),.35),transparent);
  opacity:.7;
}
.toast-inner, .neon-alert-inner{
  display:flex;gap:10px;align-items:flex-start;
}
.toast-ico, .neon-alert-ico{
  flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--panel2,#0e151c);font-size:13px;
}
.toast-body, .neon-alert-body{flex:1 1 auto;min-width:0}
.toast-title, .neon-alert-title{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 3px;color:var(--heading,var(--txt));
}
.toast-msg, .neon-alert-msg{
  margin:0;font-size:12px;color:var(--txt);word-break:break-word;
}
.toast-close, .neon-alert-close{
  flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line2);
  background:transparent;color:var(--dim);cursor:pointer;font-size:11px;padding:0;
}
.toast-close:hover, .neon-alert-close:hover{border-color:var(--mag);color:var(--mag)}
.toast .pbar, .neon-alert .pbar{height:3px;background:var(--bg2,#0a0e13);margin-top:10px;border:1px solid var(--line)}
.toast .pfill, .neon-alert .pfill{height:100%;background:var(--neon);width:0%;transition:width .2s}
.toast.out, .neon-alert.out{opacity:0;transform:translate3d(20px,0,0)}
@keyframes neonAlertIn{from{opacity:0;transform:translate3d(18px,8px,0)}to{opacity:1;transform:none}}

/* Types */
.toast.info, .neon-alert.info{border-left-color:var(--cyan)}
.toast.info .toast-ico, .neon-alert.info .neon-alert-ico{color:var(--cyan);border-color:rgba(0,240,255,.35)}
.toast.info .toast-title, .neon-alert.info .neon-alert-title{color:var(--cyan)}

.toast.warn, .neon-alert.warn{border-left-color:var(--neon)}
.toast.warn .toast-ico, .neon-alert.warn .neon-alert-ico{color:var(--neon);border-color:rgba(252,238,10,.4)}
.toast.warn .toast-title, .neon-alert.warn .neon-alert-title{color:var(--neon)}

.toast.err, .neon-alert.err{border-left-color:var(--mag)}
.toast.err .toast-ico, .neon-alert.err .neon-alert-ico{color:var(--mag);border-color:rgba(255,42,109,.4)}
.toast.err .toast-title, .neon-alert.err .neon-alert-title{color:var(--mag)}

.toast.ok, .neon-alert.ok{border-left-color:var(--green,#00ff9f)}
.toast.ok .toast-ico, .neon-alert.ok .neon-alert-ico{color:var(--green);border-color:rgba(0,255,159,.35)}
.toast.ok .toast-title, .neon-alert.ok .neon-alert-title{color:var(--green)}

.toast i{margin-right:0}

/* Progress bar timer (optional) */
.neon-alert-timer{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:rgba(var(--neon-rgb,252,238,10),.15);transform-origin:left center;
}
.neon-alert-timer > i{
  display:block;height:100%;width:100%;background:currentColor;
  transform-origin:left center;animation:neonAlertTick linear forwards;
}
@keyframes neonAlertTick{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (max-width:480px){
  #toasts{left:10px;right:10px;bottom:10px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .toast,.neon-alert{animation:none!important}
  .neon-alert-timer > i{animation:none!important}
}

#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(1080px,96vw);max-height:min(94vh,94dvh);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)}

/* ===== MKFILE modal (nama + WYSIWYG) ===== */
#shell .shell-panel.shell-wide{width:min(1200px,98vw);max-height:min(96vh,96dvh)}
.mke-root{width:100%;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:0}
.mke-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:6px 8px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:2px;
}
.mke-tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.mke-btn{
  width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(11,16,21,.9);color:var(--dim2);
  cursor:pointer;border-radius:2px;font-size:12px;padding:0;
}
.mke-btn:hover{color:var(--neon);border-color:rgba(252,238,10,.45)}
.mke-sep{width:1px;height:18px;background:var(--line2);margin:0 4px}
.mke-modes{display:flex;gap:4px}
.mke-mode{
  font:10px var(--mono);letter-spacing:.6px;padding:6px 10px;border:1px solid var(--line2);
  background:transparent;color:var(--dim);cursor:pointer;border-radius:2px;
}
.mke-mode.on{border-color:var(--cyan);color:var(--cyan);background:rgba(0,240,255,.06)}
.mke-editor-wrap{
  border:1px solid var(--line2);background:var(--bg2);min-height:42vh;max-height:56vh;
  display:flex;flex-direction:column;overflow:hidden;border-radius:2px;
}
.mke-wys{
  flex:1;min-height:42vh;max-height:56vh;overflow:auto;padding:14px 16px;
  font:13.5px/1.65 var(--mono);color:#eef4fa;outline:none;caret-color:var(--neon);
}
.mke-wys:empty:before{
  content:attr(data-placeholder);color:var(--dim);pointer-events:none;
}
.mke-wys:focus{box-shadow:inset 0 0 0 1px rgba(252,238,10,.2)}
.mke-wys h1,.mke-wys h2,.mke-wys h3{font-family:var(--disp);color:#fff;margin:10px 0 6px}
.mke-wys h2{font-size:18px}.mke-wys a{color:var(--cyan)}
.mke-wys code{background:rgba(0,0,0,.35);border:1px solid var(--line);padding:1px 5px;font-size:12px}
.mke-wys blockquote{border-left:3px solid var(--neon);margin:8px 0;padding-left:12px;color:var(--dim)}
.mke-src{
  flex:1;min-height:42vh;max-height:56vh;width:100%;resize:none;border:0;outline:none;
  background:transparent;color:#eef4fa;font:12.5px/1.55 var(--mono);padding:14px 16px;
  caret-color:var(--neon);tab-size:2;
}
.mke-meta{
  display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--dim);
  letter-spacing:.4px;
}
.mke-meta #mkChars{color:var(--cyan);font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .mke-editor-wrap,.mke-wys,.mke-src{min-height:36vh;max-height:48vh}
  .mke-btn{width:30px;height:28px}
}

.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%}


/* ===== Markdown editor (toolbar + split preview, marked.js) ===== */
.mde-root{width:100%;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:0}
.mde-toolbar,.mke-switch{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:6px 8px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:2px;
}
.mke-switch{justify-content:flex-start}
.mke-switch-lab{font-size:9px;letter-spacing:1.5px;color:var(--dim);margin-right:6px}
.mde-tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.mde-btn,.mke-btn{
  width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(11,16,21,.9);color:var(--dim2);
  cursor:pointer;border-radius:2px;font-size:12px;padding:0;
}
.mde-btn:hover,.mke-btn:hover{color:var(--neon);border-color:rgba(252,238,10,.45)}
.mde-sep,.mke-sep{width:1px;height:18px;background:var(--line2);margin:0 4px}
.mde-modes{display:flex;gap:4px}
.mde-mode,.mke-mode{
  font:10px var(--mono);letter-spacing:.6px;padding:6px 10px;border:1px solid var(--line2);
  background:transparent;color:var(--dim);cursor:pointer;border-radius:2px;
}
.mde-mode.on,.mke-mode.on{border-color:var(--cyan);color:var(--cyan);background:rgba(0,240,255,.06)}
.mde-split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:42vh;max-height:56vh;
  border:1px solid var(--line2);border-radius:2px;overflow:hidden;background:var(--bg2);
}
.mde-split.mde-only-edit{grid-template-columns:1fr}
.mde-split.mde-only-edit .mde-preview{display:none}
.mde-split.mde-only-preview{grid-template-columns:1fr}
.mde-split.mde-only-preview .mde-src{display:none}
.mde-src{
  width:100%;height:100%;min-height:42vh;max-height:56vh;resize:none;border:0;outline:none;
  background:transparent;color:#eef4fa;font:12.5px/1.55 var(--mono);padding:14px 16px;
  caret-color:var(--neon);tab-size:2;border-right:1px solid var(--line);
}
.mde-split.mde-only-edit .mde-src{border-right:0}
.mde-preview{
  overflow:auto;padding:14px 16px;min-height:42vh;max-height:56vh;
  font:13.5px/1.65 var(--mono);color:#eef4fa;text-align:left;
}
.mde-preview.mde-loading,.mde-preview .mde-loading,.mde-empty{color:var(--dim);font-size:12px}
.mde-err{color:var(--mag);font-size:12px}
.mde-meta{
  display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--dim);letter-spacing:.4px;
}
.mde-meta #mdeChars,.mde-meta #mkChars{color:var(--cyan);font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .mde-split{grid-template-columns:1fr;max-height:62vh}
  .mde-src{border-right:0;border-bottom:1px solid var(--line);min-height:28vh;max-height:32vh}
  .mde-preview{min-height:28vh;max-height:32vh}
  .mde-split.mde-only-preview .mde-preview,
  .mde-split.mde-only-edit .mde-src{min-height:42vh;max-height:56vh}
}
/* ===== 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}

/* Neon Retro — 80s arcade CRT · hot pink + electric cyan */
body[data-theme="neon-retro"]{
  --bg:#0a0014;
  --bg2:#120028;
  --panel:#1a0038;
  --panel2:#240048;
  --line:#3d1868;
  --line2:#5a2490;
  --txt:#f5e9ff;
  --dim:#a88cc8;
  --dim2:#c4a8e0;
  --neon:#ff2bd6;
  --cyan:#00f0ff;
  --mag:#ff4dff;
  --green:#39ff14;
  --amber:#ffec3d;
  --neon-rgb: 255, 43, 214;
  --cyan-rgb: 0, 240, 255;
  --mag-rgb: 255, 77, 255;
  color-scheme: dark;
}

/* Paper White — flat high-contrast light theme */
body[data-theme="paper"]{
  --bg:#f0f2f5;
  --bg2:#e4e8ee;
  --panel:#ffffff;
  --panel2:#f5f7fa;
  --line:#c8d0dc;
  --line2:#a8b4c4;
  --txt:#0f1724;
  --dim:#3d4f63;
  --dim2:#1e2d3d;
  --heading:#0f1724;
  --neon:#0052e0;
  --cyan:#00708a;
  --mag:#c01058;
  --green:#087a4e;
  --amber:#a65c00;
  --neon-rgb: 0, 82, 224;
  --cyan-rgb: 0, 112, 138;
  --mag-rgb: 192, 16, 88;
  --sb-track: #e4e8ee;
  --sb-thumb: #9aa8ba;
  --sb-thumb-hover: var(--neon);
  --sb-thumb-active: var(--cyan);
  --btn-glow: none;
  --btn-glow-soft: none;
  --btn-glow-donate: none;
  color-scheme: light;
}

/* Flat surfaces — no gradients / no soft glass */
body[data-theme="paper"] header,
body[data-theme="paper"] .panel,
body[data-theme="paper"] .toolbar,
body[data-theme="paper"] footer,
body[data-theme="paper"] .social-bar,
body[data-theme="paper"] #shell .shell-panel,
body[data-theme="paper"] .pal-panel,
body[data-theme="paper"] .toast,
body[data-theme="paper"] #bulkbar,
body[data-theme="paper"] .search-box,
body[data-theme="paper"] .lk-hero,
body[data-theme="paper"] .lk-meta,
body[data-theme="paper"] .lk-input-wrap,
body[data-theme="paper"] .lk-notes,
body[data-theme="paper"] .more-menu,
body[data-theme="paper"] .theme-menu,
body[data-theme="paper"] .view-menu,
body[data-theme="paper"] .fx-menu{
  background: var(--panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-theme="paper"] header{
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line2);
}
body[data-theme="paper"] .panel{
  border: 1px solid var(--line2);
}
body[data-theme="paper"] body,
body[data-theme="paper"]{
  background: var(--bg) !important;
  background-image: none !important;
}
body[data-theme="paper"] .bg-grid,
body[data-theme="paper"] .scanlines,
body[data-theme="paper"]::before,
body[data-theme="paper"]::after{
  display: none !important;
}

/* Text — solid, high contrast */
body[data-theme="paper"],
body[data-theme="paper"] .nm,
body[data-theme="paper"] .tx-nm,
body[data-theme="paper"] .shell-title,
body[data-theme="paper"] .brand-sub,
body[data-theme="paper"] .status,
body[data-theme="paper"] .c-size,
body[data-theme="paper"] .c-date,
body[data-theme="paper"] .c-ket,
body[data-theme="paper"] .ph-url,
body[data-theme="paper"] .idx-info,
body[data-theme="paper"] .crumb,
body[data-theme="paper"] .vm-it,
body[data-theme="paper"] .pal-it{
  color: var(--txt) !important;
}
body[data-theme="paper"] .glitch,
body[data-theme="paper"] #dirTitle,
body[data-theme="paper"] .clock #clkTime,
body[data-theme="paper"] .row:hover .nm{
  color: var(--heading) !important;
  text-shadow: none !important;
}
body[data-theme="paper"] .glitch::before,
body[data-theme="paper"] .glitch::after{
  display: none !important;
}
body[data-theme="paper"] .dim,
body[data-theme="paper"] .c-sub,
body[data-theme="paper"] .clock #clkDate,
body[data-theme="paper"] .vm-h,
body[data-theme="paper"] .lk-sub,
body[data-theme="paper"] .lk-meta-k,
body[data-theme="paper"] .lk-label,
body[data-theme="paper"] .lk-hint,
body[data-theme="paper"] .shell-meta{
  color: var(--dim) !important;
}
body[data-theme="paper"] a,
body[data-theme="paper"] .lk-meta-v.mono{
  color: var(--cyan) !important;
}

/* Buttons — flat solid, no glow/gradient */
body[data-theme="paper"] .btn,
body[data-theme="paper"] header .hright .btn,
body[data-theme="paper"] header .hright a.btn{
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
body[data-theme="paper"] .btn:hover,
body[data-theme="paper"] header .hright .btn:hover,
body[data-theme="paper"] header .hright a.btn:hover{
  background: var(--bg2) !important;
  color: var(--neon) !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="paper"] .btn.neon,
body[data-theme="paper"] .btn.neon:hover{
  background: var(--neon) !important;
  color: #ffffff !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="paper"] .btn.danger{
  color: var(--mag) !important;
  border-color: var(--mag) !important;
  background: var(--panel) !important;
}
body[data-theme="paper"] .btn.danger:hover{
  background: var(--mag) !important;
  color: #ffffff !important;
}
body[data-theme="paper"] .btn-donate{
  color: var(--mag) !important;
  border-color: var(--mag) !important;
  background: var(--panel2) !important;
}
body[data-theme="paper"] .btn-donate:hover{
  background: var(--mag) !important;
  color: #ffffff !important;
}
body[data-theme="paper"] .tbtn,
body[data-theme="paper"] .vbtn,
body[data-theme="paper"] .ai{
  color: var(--dim2) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-theme="paper"] .tbtn:hover,
body[data-theme="paper"] .vbtn:hover,
body[data-theme="paper"] .ai:hover{
  color: var(--neon) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="paper"] .tbtn.on,
body[data-theme="paper"] .vbtn.on{
  background: var(--neon) !important;
  color: #ffffff !important;
}

/* Tag / accents flat */
body[data-theme="paper"] .tag{
  background: var(--neon) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body[data-theme="paper"] .status .led{
  background: var(--green) !important;
  box-shadow: none !important;
}

/* Rows / tiles */
body[data-theme="paper"] .row:hover,
body[data-theme="paper"] .tile-x:hover,
body[data-theme="paper"] .row.selected,
body[data-theme="paper"] .tile-x.selected{
  background: var(--bg2) !important;
}
body[data-theme="paper"] .search-box:focus-within{
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="paper"] .search-box input,
body[data-theme="paper"] .lk-input-wrap input{
  color: var(--txt) !important;
  background: transparent !important;
}
body[data-theme="paper"] .search-box input::placeholder{
  color: var(--dim) !important;
  opacity: 1 !important;
}

/* Shell / lock flat */
body[data-theme="paper"] .shell-backdrop{
  background: rgba(15, 23, 36, 0.4) !important;
  backdrop-filter: none !important;
}
body[data-theme="paper"] #shell .shell-panel.shell-lock{
  border: 1px solid var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="paper"] .shell-corner,
body[data-theme="paper"] .shell-scanline,
body[data-theme="paper"] .lk-hero-ring{
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body[data-theme="paper"] .lk-hero{
  border: 1px solid var(--line2) !important;
  border-left: 3px solid var(--neon) !important;
}
body[data-theme="paper"] .lk-hero-core{
  background: var(--bg2) !important;
  color: var(--neon) !important;
}
body[data-theme="paper"] .lk-kicker{
  color: var(--neon) !important;
  text-shadow: none !important;
}
body[data-theme="paper"] .lk-err{
  background: #fde8ef !important;
  border: 1px solid var(--mag) !important;
  color: var(--mag) !important;
}
body[data-theme="paper"] .lk-notes{
  border: 1px solid var(--line2) !important;
  background: var(--panel2) !important;
}
body[data-theme="paper"] .lk-notes li{ color: var(--dim) !important; }
body[data-theme="paper"] .lk-notes b{ color: var(--txt) !important; }
body[data-theme="paper"] .lk-notes li i{ color: var(--green) !important; filter: none !important; }

/* Code */
body[data-theme="paper"] code,
body[data-theme="paper"] .md pre,
body[data-theme="paper"] .hljs{
  background: var(--bg2) !important;
  color: var(--txt) !important;
}

/* Selection */
body[data-theme="paper"] ::selection{
  background: var(--neon);
  color: #ffffff;
}

/* Corners flat */
body[data-theme="paper"] .corner.tl,
body[data-theme="paper"] .corner.tr,
body[data-theme="paper"] .corner.bl,
body[data-theme="paper"] .corner.br{
  border-color: var(--neon);
  filter: none;
  opacity: 1;
}


/* ===== 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}


/* ===== DIR//LISTER BOOT (themed, responsive, mobile full-screen) ===== */
#boot{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px))
          max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%,rgba(252,238,10,.08),transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%,rgba(255,42,109,.05),transparent 50%),
    #050608;
  transition:opacity .45s,visibility .45s;cursor:pointer;
  animation:bootAuto .5s ease 17s forwards;
  box-sizing:border-box;
  width:100%;height:100%;height:100dvh;
}
#boot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:
    linear-gradient(rgba(0,240,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,240,255,.035) 1px,transparent 1px);
  background-size:40px 40px;
}
#boot.off{opacity:0;visibility:hidden;pointer-events:none}
@keyframes bootAuto{to{opacity:0;visibility:hidden}}
.boot-box{
  position:relative;z-index:1;
  width:min(820px,96vw);max-height:min(92vh,92dvh);
  border:1px solid var(--line2,#28394a);border-radius:2px;
  background:rgba(11,16,21,.96);
  padding:0;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(252,238,10,.06);
  display:flex;flex-direction:column;min-height:0;
}
.boot-box::before,
.boot-box::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;z-index:2;
}
.boot-box::before{
  top:0;left:0;border-top:2px solid var(--neon,#fcee0a);border-left:2px solid var(--neon,#fcee0a);
}
.boot-box::after{
  bottom:0;right:0;border-bottom:2px solid var(--cyan,#00f0ff);border-right:2px solid var(--cyan,#00f0ff);
}
.boot-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--neon,#fcee0a);font:700 11px/1.2 var(--disp,var(--mono),system-ui);
  letter-spacing:2px;text-transform:uppercase;
  border-bottom:1px solid var(--line,#1b2530);
  padding:12px 16px;background:rgba(14,21,28,.85);flex:0 0 auto;
}
.boot-head i{color:var(--cyan,#00f0ff);font-size:13px}
.boot-head .boot-ver{
  margin-left:auto;font-size:10px;letter-spacing:1px;color:var(--cyan,#00f0ff);
  border:1px solid var(--line2,#28394a);padding:3px 8px;border-radius:2px;
  background:rgba(0,240,255,.06);
}
.boot-body{padding:12px 14px 8px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#bootLog{
  font:12.5px/1.85 var(--mono,ui-monospace,system-ui);
  color:var(--txt,#cfd8e0);background:rgba(5,8,12,.75);
  border:1px solid var(--line,#1b2530);padding:12px 14px;
  height:min(42vh,320px);min-height:140px;overflow:auto;
  margin:0;white-space:pre-wrap;word-break:break-word;
  flex:1 1 auto;-webkit-overflow-scrolling:touch;
}
#bootLog::-webkit-scrollbar{width:8px}
#bootLog::-webkit-scrollbar-thumb{background:var(--line2,#28394a);border-radius:2px}
#bootLog .tg{color:var(--cyan,#00f0ff);font-weight:600}
#bootLog .ok{color:var(--green,#00ff9f)}
#bootLog .wt{color:var(--dim,#6b7c8c)}
#bootLog .last{color:var(--neon,#fcee0a);animation:bootBlink 1s steps(1) infinite}
@keyframes bootBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.boot-bar{
  height:3px;background:rgba(0,240,255,.08);margin:10px 0 4px;overflow:hidden;flex:0 0 auto;
}
.boot-bar > i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--neon,#fcee0a),var(--cyan,#00f0ff));
  animation:bootBar 7.5s linear forwards;
}
@keyframes bootBar{from{width:0%}to{width:100%}}
.boot-skip{
  padding:12px 16px 14px;text-align:center;
  font:600 10px/1.4 var(--mono,system-ui);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dim,#6b7c8c);border-top:1px solid var(--line,#1b2530);
  background:rgba(10,14,19,.5);flex:0 0 auto;
}
.boot-skip span{color:var(--neon,#fcee0a)}

/* —— Mobile portrait: full layar —— */
@media (max-width:720px) and (orientation:portrait){
  #boot{
    padding:0;
    align-items:stretch;justify-content:stretch;
  }
  .boot-box{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    height:100dvh !important;
    max-height:100% !important;
    max-height:100dvh !important;
    min-height:0 !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:none !important;
  }
  .boot-head{
    padding:max(10px,env(safe-area-inset-top,0px)) 14px 10px;
    letter-spacing:1.4px;font-size:10px;
  }
  .boot-head .boot-ver{
    width:auto;margin-left:auto;margin-top:0;text-align:center;
  }
  .boot-body{
    padding:10px 12px 6px;
    flex:1 1 auto;min-height:0;
  }
  #bootLog{
    font-size:11px;line-height:1.7;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:1 1 auto;
    padding:12px;
  }
  .boot-skip{
    padding:12px 12px max(14px,env(safe-area-inset-bottom,0px));
    letter-spacing:1.2px;font-size:9.5px;
  }
}

/* Sangat sempit */
@media (max-width:420px) and (orientation:portrait){
  .boot-head{flex-wrap:wrap}
  .boot-head .boot-ver{width:100%;margin:6px 0 0;text-align:center}
  #bootLog{font-size:10.5px}
}

/* —— Landscape mobile / pendek —— */
@media (orientation:landscape) and (max-height:500px){
  #boot{
    padding:0;
    align-items:stretch;justify-content:stretch;
  }
  .boot-box{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .boot-head{
    min-height:34px;padding:4px 12px;
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
    font-size:10px;
  }
  .boot-body{padding:6px 10px 4px;flex-direction:row;gap:10px;align-items:stretch}
  #bootLog{
    flex:1 1 auto;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    font-size:10.5px;line-height:1.55;
    padding:8px 10px;
  }
  .boot-bar{width:4px;height:auto;margin:0;align-self:stretch;flex:0 0 4px}
  .boot-bar > i{width:100% !important;height:0%;animation:bootBarV 7.5s linear forwards}
  @keyframes bootBarV{from{height:0%}to{height:100%}}
  .boot-skip{
    padding:6px 12px;
    padding-bottom:max(8px,env(safe-area-inset-bottom,0px));
    font-size:9px;
  }
}

@media (prefers-reduced-motion:reduce){
  #boot{animation:none}
  .boot-bar > i{animation:none;width:100%;height:100%}
  #bootLog .last{animation:none}
}

/* ===== Responsive breakpoints (DIR//LISTER) ===== */
@media (max-width: 1280px) {
  :root {
    --pad-x: clamp(10px, 1.6vw, 20px);
  }
}
@media (max-width: 1024px) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  header .hright {
    gap: 4px !important;
  }
}
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  main, .panel, .shell-panel {
    max-width: 100vw;
  }
  #boot .boot-box {
    width: min(100%, 100vw - 16px);
  }
}
@media (max-width: 480px) {
  #boot .boot-head {
    gap: 8px;
  }
  #bootLog {
    font-size: 10.5px !important;
    line-height: 1.7 !important;
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .boot-box {
    width: min(720px, 94vw);
  }
}
@media (orientation: landscape) and (max-height: 420px) {
  #boot {
    align-items: stretch;
    padding: 6px;
  }
  .boot-box {
    max-height: 100%;
    width: min(960px, 98vw);
  }
  #bootLog {
    height: min(36vh, 120px) !important;
    min-height: 64px !important;
  }
  .boot-skip {
    padding: 6px 10px 8px !important;
  }
}

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

/* ===== PERINGATAN DEVTOOLS / KLIK KANAN v2 ===== */
#devwarn,#rcwarn{position:fixed;inset:0;z-index:9999;display:none;align-items:center;
  justify-content:center;padding:20px;
  background:radial-gradient(ellipse at center,rgba(8,12,20,.55) 0%,rgba(2,3,5,.92) 70%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#rcwarn{z-index:9998}
#devwarn.open,#rcwarn.open{display:flex}
.dw-panel,.rw-panel{width:min(440px,94vw);background:linear-gradient(165deg,#0c1219 0%,#080c11 100%);
  border:1px solid rgba(0,240,255,.22);border-radius:14px;padding:0;text-align:left;position:relative;
  animation:dwIn .28s cubic-bezier(.2,.8,.2,1);font-size:13px;color:#c8d4de;
  box-shadow:0 0 0 1px rgba(255,42,109,.12),0 24px 64px rgba(0,0,0,.55);overflow:hidden}
.rw-panel{width:min(420px,94vw);border-color:rgba(252,238,10,.28);
  box-shadow:0 0 0 1px rgba(252,238,10,.08),0 24px 64px rgba(0,0,0,.55)}
@keyframes dwIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.dw-panel::after,.rw-panel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.015) 2px,rgba(0,240,255,.015) 4px)}
.dw-head,.rw-head{display:flex;align-items:center;gap:14px;padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(0,240,255,.06),transparent)}
.rw-head{background:linear-gradient(180deg,rgba(252,238,10,.07),transparent)}
.dw-ico,.rw-ico{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid rgba(255,42,109,.45);color:#ff2a6d;font-size:20px;
  background:rgba(255,42,109,.1);box-shadow:0 0 20px rgba(255,42,109,.2)}
.rw-ico{border-color:rgba(252,238,10,.45);color:#fcee0a;background:rgba(252,238,10,.08)}
.rw-ico.rw-img{border-color:rgba(255,42,109,.5);color:#ff2a6d;background:rgba(255,42,109,.1)}
.dw-head-txt,.rw-head-txt{min-width:0;flex:1}
.dw-title,.rw-title{font-family:var(--disp),Rajdhani,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:1.5px;color:#fff;line-height:1.2}
.rw-title{font-size:17px}
.dw-tag,.rw-tag{font-size:10px;letter-spacing:1.2px;color:#00f0ff;margin-top:4px;
  font-family:ui-monospace,monospace;opacity:.9}
.rw-tag{color:#fcee0a}
.dw-badge,.rw-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:1px;padding:5px 9px;
  border-radius:999px;background:rgba(255,42,109,.15);color:#ff6b9d;border:1px solid rgba(255,42,109,.35)}
.rw-badge{background:rgba(252,238,10,.12);color:#fcee0a;border-color:rgba(252,238,10,.35)}
.dw-body,.rw-body{padding:16px 20px 8px;position:relative;z-index:1}
.dw-msg,.rw-msg{font-size:12.5px;line-height:1.75;color:#a8b8c8;margin:0}
.dw-msg b,.rw-msg b{color:#fcee0a;font-weight:600}
.dw-key{display:inline-block;border:1px solid rgba(0,240,255,.35);background:rgba(0,240,255,.08);
  color:#00f0ff;font-size:10px;padding:2px 7px;margin:0 2px;border-radius:4px;font-family:ui-monospace,monospace}
.dw-actions,.rw-actions{padding:12px 20px 18px;position:relative;z-index:1}
.dw-btn,.rw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 14px;font-weight:700;font-size:12px;letter-spacing:1.5px;cursor:pointer;border:none;
  border-radius:10px;transition:.18s;font-family:var(--disp),Rajdhani,sans-serif}
.dw-btn{background:linear-gradient(135deg,#00e0ff,#00a8c8);color:#041018}
.rw-btn{background:linear-gradient(135deg,#fcee0a,#d4c008);color:#111}
.dw-btn:hover{filter:brightness(1.08);box-shadow:0 0 24px rgba(0,240,255,.35);transform:translateY(-1px)}
.rw-btn:hover{filter:brightness(1.06);box-shadow:0 0 22px rgba(252,238,10,.35);transform:translateY(-1px)}
.dw-foot,.rw-foot{text-align:center;padding:0 20px 14px;font-size:9px;letter-spacing:1.2px;color:#3a4a5c;
  font-family:ui-monospace,monospace;position:relative;z-index:1}

/* ===== 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)}

/* FULLSCREEN + RESCAN — hover / active feedback */
#btnFS:hover,
#btnRefresh:hover{
  color: var(--neon);
  background: rgba(252,238,10,.07);
  box-shadow: inset 0 0 14px rgba(252,238,10,.1), 0 0 0 1px rgba(252,238,10,.22);
}
#btnFS:hover i,
#btnRefresh:hover i{ color: var(--neon); }
#btnFS:active,
#btnRefresh:active{
  transform: scale(0.9);
  background: rgba(252,238,10,.12);
}
#btnFS:focus-visible,
#btnRefresh:focus-visible{
  color: var(--neon);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 55%, transparent);
}
/* Fullscreen ON = neon fill like other toggle tools */
#btnFS.on{
  background: var(--neon);
  color: #000;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 35%, transparent);
}
#btnFS.on i{ color: #000; }
#btnFS.on:hover{
  background: #fff38a;
  color: #000;
  box-shadow: 0 0 16px rgba(252,238,10,.4);
}
#btnFS.on:hover i{ color: #000; }
/* RESCAN while scanning */
#btnRefresh.is-spinning,
#btnRefresh.on{
  color: var(--cyan);
  background: rgba(0,240,255,.08);
  box-shadow: inset 0 0 12px rgba(0,240,255,.12), 0 0 0 1px rgba(0,240,255,.28);
}
#btnRefresh.is-spinning i,
#btnRefresh.on i{ color: var(--cyan); }
#btnRefresh.is-spinning:hover{
  color: var(--cyan);
  background: rgba(0,240,255,.12);
}


/* --- 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(100px, 0.75fr);
    --c-ket: 0px;
    --c-views: 0px;
    --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-ket,.c-views,.c-code,.c-author,.c-perm,
  .th.c-ket,.th.c-views,.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-views,.c-code,.c-author,.c-size,.c-date,.c-perm,
  .th.c-ket,.th.c-views,.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-only — full labels cut off badly on tablet */
  header{height:56px;padding:0 12px;gap:8px}
  .glitch{font-size:16px;letter-spacing:1.5px}
  .brand-sub{display:none}
  .hright{
    gap:6px !important;
    flex:0 0 auto !important;
    max-width:none !important;
    flex-wrap:nowrap !important;
  }
  .hright .btn{
    padding:0 !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    justify-content:center !important;
    gap:0 !important;
    flex:0 0 38px !important;
    overflow:hidden !important;
  }
  .hright .btn .btn-txt{display:none !important}
  .hright .btn i{margin:0 !important;font-size:14px !important}
  /* secondary labels clutter tablet — keep Donate + Login/Logout */
  #btnFS{display:none !important}
  /* Keep Help/About/QA/Guestbook as icons — user wants full menu */

  .toolbar{gap:8px;padding:8px 12px}
  .search-box{max-width:100%;width:auto;flex:1 1 auto;min-width:100px}
  .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%;
  }
  /* Keep Help/About as icons on phone (title tooltip) */
  .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:auto;max-width:100%;height:36px;flex:1 1 auto;min-width:100px}
  .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 mobile handled in boot section */

  #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{
  background: var(--neon);
  color: #000;
  border-color: var(--neon);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 35%, transparent);
}
#btnPreviewPane.on i{
  color: #000;
}
@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); }


/* ===== Public folder lock badge ===== */
.lock-badge{
  font-size:11px;
  color:var(--mag);
  margin-left:8px;
  margin-right:0;
  vertical-align:middle;
  flex-shrink:0;
}
.lock-tag{
  display:inline-block;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.2px;
  color:#000;
  background:var(--mag);
  padding:1px 6px;
  margin-left:6px;
  margin-right:0;
  vertical-align:middle;
  border-radius:2px;
  line-height:1.4;
  flex-shrink:0;
}
.nm .lock-badge, .nm .lock-tag,
.tx-nm .lock-badge, .tx-nm .lock-tag{
  margin-left:0;
}
.lock-after-name{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:8px;
  flex-shrink:0;
  order:2;
}
.nm-text, .tx-nm .nm-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  order:1;
}
.nm .web-badge{ order:3; margin-left:6px; margin-right:0; }
.tx-nm{
  display:inline-flex;
  align-items:center;
  flex-direction:row;
  min-width:0;
}
.row.is-locked .nm,
.tile-x.is-locked .tx-nm{
  /* subtle cue */
}
.row.is-locked .c-ic i.fa-folder,
.tile-x.is-locked .tx-ic.fa-folder{
  color:var(--mag) !important;
}
.ai[data-op="lockfolder"] i{ color:var(--mag); }
.ai[data-op="unlockfolder"] i{ color:var(--green); }

.audit-row{padding:6px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:18px 110px 1fr auto;gap:8px;align-items:start}
.audit-row .audit-act{color:var(--neon);font-weight:700;letter-spacing:.5px}
.audit-row.audit-lock .audit-act{color:var(--mag)}
.audit-meta{color:var(--dim);font-size:10px;white-space:nowrap}

/* Rain active: keep compositor layer without permanent will-change cost when off */
body.rain-on #rain.is-on{
  will-change: auto;
  /* contain:strict removed — caused half-viewport clipping */
}
@media (prefers-reduced-motion: reduce){
  body.rain-on #rain.is-on{ display:none !important; }
}

/* VIEW column — left aligned */
.c-views, .th.c-views{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  font-variant-numeric: tabular-nums;
  color:var(--dim2);
  white-space:nowrap;
  overflow:hidden;
  text-align:left;
  padding-left:2px;
  box-sizing:border-box;
}
.th.c-views{
  justify-content:flex-start;
}
.th.c-views i{ color:var(--cyan); flex-shrink:0; }
.c-views i{ font-size:10px; color:var(--cyan); opacity:.85; flex-shrink:0; }
.c-views .view-n{
  font-weight:700; font-size:11px; color:var(--txt);
  letter-spacing:.3px;
  text-align:left;
  min-width:0;
}
.c-views .view-n.is-hot{ color:var(--neon); }
.c-views .view-n.is-warm{ color:var(--amber); }
.c-views .view-zero{ color:#2a3848; font-weight:500; }

/* Real-time analytics panel */
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.an-card{background:var(--bg2);border:1px solid var(--line2);padding:12px 10px;text-align:center}
.an-card.an-live{border-color:var(--green)}
.an-label{font-size:9px;letter-spacing:1.5px;color:var(--dim);margin-bottom:6px}
.an-big{font-family:var(--disp);font-weight:700;font-size:28px;color:var(--neon);line-height:1}
.an-live .an-big{color:var(--green)}
.an-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.an-h{font-size:10px;letter-spacing:1.5px;color:var(--cyan);margin-bottom:8px;font-weight:700}
.an-list{max-height:220px;overflow:auto;font-size:11px}
.an-row,.an-ev,.an-vis{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.an-rank{width:18px;color:var(--neon);font-weight:700}
.an-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-n{color:var(--amber);font-weight:700}
.an-ago{color:var(--dim);font-size:10px;margin-left:auto}
.an-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
@media(max-width:700px){
  .an-grid{grid-template-columns:1fr 1fr}
  .an-cols{grid-template-columns:1fr}
}
#liveBadge{user-select:none}

.an-dev{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;text-align:center}
.an-dev > div{background:var(--bg2);border:1px solid var(--line2);padding:10px 8px}
.an-dev b{display:block;font-size:9px;letter-spacing:1px;color:var(--dim);margin-bottom:4px}
.an-dev span{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--cyan)}


/* Cursor pagination — load more */
.load-more-bar{
  display:flex;justify-content:center;align-items:center;
  padding:12px 10px;border-top:1px solid var(--line2);
  background:linear-gradient(180deg, transparent, rgba(6,8,10,.92));
}
.load-more-bar.hidden{display:none!important}
.load-more-bar .btn{font-size:11px;letter-spacing:1px}
.load-more-txt{color:var(--dim);font-size:11px;letter-spacing:2px}

/* ===== Admin Dashboard ===== */
.dash-wrap{text-align:left;max-height:min(78vh,720px);overflow:auto;padding:2px 4px 12px}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.dash-kpi{background:var(--bg2);border:1px solid var(--line2);padding:12px 10px;text-align:center;position:relative}
.dash-kpi.live{border-color:var(--green)}
.dash-kpi.warn{border-color:var(--amber)}
.dash-kpi.bad{border-color:var(--mag)}
.dash-kpi .k-lab{font-size:9px;letter-spacing:1.4px;color:var(--dim);margin-bottom:6px}
.dash-kpi .k-val{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--neon);line-height:1}
.dash-kpi.live .k-val{color:var(--green)}
.dash-kpi .k-sub{font-size:10px;color:var(--dim2);margin-top:4px}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.dash-card{background:var(--bg2);border:1px solid var(--line2);padding:12px;min-height:0}
.dash-card h4{font-size:10px;letter-spacing:1.6px;color:var(--cyan);margin:0 0 10px;font-weight:700}
.dash-row{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:11px}
.dash-row:last-child{border-bottom:0}
.dash-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-n{color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums}
.dash-meta{color:var(--dim);font-size:10px;margin-left:auto;white-space:nowrap}
.dash-bar{height:8px;background:var(--line);border-radius:2px;overflow:hidden;margin:8px 0 4px}
.dash-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));width:0%}
.dash-tbl{width:100%;border-collapse:collapse;font-size:11px}
.dash-tbl th,.dash-tbl td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dash-tbl th{color:var(--dim);font-weight:600;font-size:9px;letter-spacing:1px}
.dash-pill{display:inline-block;padding:1px 7px;font-size:9px;letter-spacing:.8px;font-weight:700;border:1px solid var(--line2)}
.dash-pill.ok{color:var(--green);border-color:var(--green)}
.dash-pill.bad{color:var(--mag);border-color:var(--mag)}
.dash-pill.warn{color:var(--amber);border-color:var(--amber)}
.dash-pill.dim{color:var(--dim2)}
.dash-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dash-actions .btn{font-size:10px;padding:7px 10px}
.dash-sec{margin-bottom:14px}
.dash-sec h3{font-size:11px;letter-spacing:2px;color:var(--neon);margin:0 0 8px;font-weight:700}
.dash-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.dash-mini{background:var(--bg2);border:1px solid var(--line2);padding:10px;text-align:center}
.dash-mini b{display:block;font-size:9px;color:var(--dim);letter-spacing:1px;margin-bottom:4px}
.dash-mini span{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--cyan)}
@media(max-width:700px){
  .dash-kpis{grid-template-columns:1fr 1fr}
  .dash-cols,.dash-grid3{grid-template-columns:1fr}
}

/* action share details — slightly wider action column */
:root{
  --c-action: minmax(168px, 200px);
}
body:not(.admin){
  --c-action: minmax(120px, 148px);
}
.c-act .ai[data-op="sharepub"]{ color: var(--cyan); }
.c-act .ai[data-op="details"]{ color: var(--neon); }


/* ===== ACTION overflow menu (base; widths set per breakpoint below) ===== */
.c-act {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}
.act-more {
  position: relative;
  display: inline-flex;
}
.act-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 148px;
  padding: 6px;
  background: var(--bg2, #0c1218);
  border: 1px solid var(--line2, #1e2a36);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.act-more-menu[hidden] { display: none !important; }
.act-more-menu .ai.more-it,
.act-more-menu .more-it {
  width: 100% !important;
  height: auto !important;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 8px 10px !important;
  font-size: 11px !important;
  border-radius: 0;
}
.act-more-menu .ai.more-it i { width: 14px; text-align: center; }

@media (max-width: 900px) {
  :root, body.admin { --c-action: minmax(128px, 148px); }
  .c-act .ai { width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 640px) {
  /* Mobile: 2 primer + more (details & open tetap, share/copy di more jika sempit) — keep 4+more compact */
  :root, body.admin { --c-action: minmax(112px, 132px); }
}


/* ==========================================================================
 * TABLE RESPONSIVE OPTIMIZATION (v26.0913)
 * Strategy: progressive column collapse + sticky name + stable ACTION width
 * Breakpoints: ≥1281 full | ≤1280 mid | ≤1024 tablet | ≤760 phone | ≤480 narrow
 * ========================================================================== */

/* Desktop full — ensure table can use fluid width when panel is wide */
@media (min-width: 1281px) {
  :root {
    --table-min: 0px;
    --c-sel: 36px;
    --c-ic: 40px;
    --c-name: minmax(100px, 0.7fr);
    --c-ket: minmax(100px, 1fr);
    --c-views: 132px;
    --c-code: 64px;
    --c-auth: minmax(120px, 160px);
    --c-size: 88px;
    --c-date: 128px;
    --c-mode: 76px;
    --c-action: 148px;
  }
  body:not(.admin) {
    --c-sel: 0px;
    --c-action: 136px; /* 4 buttons */
  }
  body.admin {
    --c-action: 168px; /* 4 + more */
  }
}

/* Mid desktop / small laptop: drop ket, views, code, author, mode */
@media (max-width: 1280px) {
  :root {
    --table-min: 0px;
    --c-ic: 40px;
    --c-name: minmax(90px, 0.65fr);
    --c-ket: 0px;
    --c-views: 0px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 80px;
    --c-date: 110px;
    --c-mode: 0px;
    --c-action: 136px;
  }
  body.admin { --c-action: 156px; }
  body:not(.admin) { --c-sel: 0px; --c-action: 128px; }
  .c-ket, .c-views, .c-code, .c-author, .c-perm,
  .th.c-ket, .th.c-views, .th.c-code, .th.c-author, .th.c-perm {
    display: none !important;
  }
  .c-name .nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Tablet: name + icon + size/date optional + action */
@media (max-width: 1024px) {
  :root {
    --table-min: 0px;
    --c-sel: 0px;
    --c-ic: 36px;
    --c-name: minmax(0, 1fr);
    --c-ket: 0px;
    --c-views: 0px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 0px;
    --c-date: 0px;
    --c-mode: 0px;
    --c-action: 120px;
  }
  body.admin {
    --c-sel: 28px;
    --c-action: 140px;
  }
  body:not(.admin) {
    --c-action: 120px;
  }
  .c-ket, .c-views, .c-code, .c-author, .c-size, .c-date, .c-perm,
  .th.c-ket, .th.c-views, .th.c-code, .th.c-author, .th.c-size, .th.c-date, .th.c-perm {
    display: none !important;
  }
  /* Subtitle carries size/type info */
  .c-sub {
    display: block !important;
    font-size: 10px;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .c-act { opacity: 1 !important; }
  .c-act .ai {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 11px;
  }
}

/* Phone landscape / large phone */
@media (max-width: 760px) {
  :root {
    --table-min: 0px;
    --c-ic: 32px;
    --c-name: minmax(0, 1fr);
    --c-action: 112px;
  }
  body.admin {
    --c-sel: 24px;
    --c-action: 128px;
  }
  body:not(.admin) {
    --c-sel: 0px;
    --c-action: 112px;
  }
  #rows.view-details .row,
  .tbl-head {
    min-height: 48px;
  }
  .c-name {
    padding: 8px 6px 8px 2px;
  }
  .c-name .nm {
    font-size: 12.5px;
  }
  .c-name .idx {
    display: none; /* save horizontal space */
  }
  .c-act {
    gap: 1px;
    padding: 4px 4px;
    opacity: 1 !important;
  }
  .c-act .ai {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 10.5px;
  }
  /* Sticky name while actions stay reachable */
  #rows.view-details .c-name,
  .tbl-head .th.c-name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel, var(--bg2, #0c1218));
  }
  #rows.view-details .row:hover .c-name,
  #rows.view-details .row.selected .c-name {
    background: rgba(12, 18, 24, 0.98);
  }
}

/* Narrow phones */
@media (max-width: 480px) {
  :root {
    --c-ic: 28px;
    --c-action: 100px;
  }
  body.admin { --c-action: 112px; }
  body:not(.admin) { --c-action: 100px; }
  /* On very narrow: keep Details + Open visible; Share/Copy still in row if fit */
  .c-act .ai {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 10px;
  }
  .c-name .nm { font-size: 12px; }
  .c-sub { font-size: 9.5px; }
  .tbl-head .th {
    font-size: 9px;
    letter-spacing: 0.6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Touch: always show actions, no hover dependency */
@media (hover: none) and (pointer: coarse) {
  #rows.view-details .c-act {
    opacity: 1 !important;
  }
  body.admin #rows.view-details .c-act {
    opacity: 1 !important;
  }
}

/* Horizontal safety: if min-width forces overflow, wrap scrolls smoothly */
.tbl-wrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.tbl-wrap .tbl-head,
.tbl-wrap #rows.view-details {
  min-width: 0;
}
#rows.view-details .row {
  width: 100%;
  max-width: 100%;
}

/* Reduce paint cost on large lists */
#rows.view-details.perf-lite .row {
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}
#rows.view-details.perf-lite .c-act .ai {
  transition: none;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #rows.view-details .row {
    animation: none !important;
  }
  .c-act, .ai {
    transition: none !important;
  }
}


/* ==========================================================================
 * MODERN CSS GRID FRAMEWORK — details table (v26.0913)
 * Tokens → template areas → container queries → containment
 * ========================================================================== */

.tbl-wrap {
  container-type: inline-size;
  container-name: dltable;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Explicit grid on head + rows — shared track list */
.tbl-head,
#rows.view-details .row {
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: var(--areas);
  column-gap: 0;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* GPU-friendly isolation without promoting every row always */
  contain: layout style;
}

#rows.view-details {
  display: block;
  /* contain:strict disabled — broke scroll height */
}

#rows.view-details .row {
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
  border-bottom: 1px solid var(--line, #15202a);
}

/* subgrid disabled — caused misaligned details rows */

/* ---- Container queries (prefer over viewport when supported) ---- */
@container dltable (max-width: 1100px) {
  .tbl-head,
  #rows.view-details .row {
    --c-ket: 0px;
    --c-views: 0px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-mode: 0px;
    --c-name: minmax(120px, 1fr);
    --c-action: 140px;
  }
  .c-ket, .c-views, .c-code, .c-author, .c-perm,
  .th.c-ket, .th.c-views, .th.c-code, .th.c-author, .th.c-perm {
    display: none !important;
  }
}

@container dltable (max-width: 720px) {
  .tbl-head,
  #rows.view-details .row {
    --c-size: 0px;
    --c-date: 0px;
    --c-name: minmax(0, 1fr);
    --c-action: 120px;
  }
  .c-size, .c-date, .th.c-size, .th.c-date {
    display: none !important;
  }
  .c-sub { display: block !important; }
}

@container dltable (max-width: 480px) {
  .tbl-head,
  #rows.view-details .row {
    --c-ic: 28px;
    --c-action: 108px;
  }
  .c-name .idx { display: none; }
}

/* Icon / tiles grids — modern auto-fill */
#rows.view-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 8px;
  align-content: start;
}
#rows.view-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#rows[class*="view-icons"] {
  display: grid;
  gap: 6px;
  align-content: start;
}
#rows.view-icons-sm { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
#rows.view-icons-md { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
#rows.view-icons-lg { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
#rows.view-icons-xl { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Content view — single column grid */
#rows.view-content {
  display: flex;
  flex-direction: column;
}

/* Reduce layout thrashing on hover */
@media (hover: hover) and (pointer: fine) {
  #rows.view-details .row {
    will-change: auto;
  }
  #rows.view-details .row:hover {
    /* no transform on whole row — keeps grid stable */
  }
}


/* ADMIN ACTION: all buttons on ONE row (no wrap) */
body.admin {
  --c-action: minmax(248px, 280px);
}
body.admin .c-act {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  max-width: none;
  width: 100%;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: visible;
}
body.admin .c-act .ai {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  font-size: 11px;
}
body:not(.admin) {
  --c-action: minmax(128px, 148px);
}
@media (max-width: 1024px) {
  body.admin { --c-action: minmax(220px, 248px); }
  body.admin .c-act .ai { width: 24px; height: 24px; flex: 0 0 24px; font-size: 10.5px; }
}
@media (max-width: 760px) {
  body.admin { --c-action: minmax(200px, 228px); }
  body.admin .c-act .ai { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; }
}


/* Live visitors under ENTRIES stats (panel-foot) */
.panel-foot .foot-stats{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
#statsLine{display:block;line-height:1.35}
.live-badge,#liveBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:10.5px;
  letter-spacing:1px;
  color:var(--dim2,#5a6b7a);
  user-select:none;
  margin:0;
}
#liveBadge .lb-dot{
  font-size:7px;
  color:var(--green,#3dff9a);
  margin-right:2px;
  animation: lbPulse 1.6s ease-in-out infinite;
}
@keyframes lbPulse{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
#liveBadge .lb-item b{
  color:var(--neon,#00ff9c);
  font-weight:700;
  margin-left:2px;
}
#liveBadge .lb-sep{opacity:.45;margin:0 1px}
#liveBadge .lb-ch{
  font-size:9px;
  opacity:.7;
  margin-left:4px;
  text-transform:uppercase;
}
@media (max-width:640px){
  #liveBadge{font-size:10px;gap:4px}
  .panel-foot{flex-wrap:wrap}
  .panel-foot .foot-stats{width:100%}
}


/* footer social + panel-foot final layout */
.panel-foot .foot-stats{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
  flex:1 1 220px;
}
.panel-foot #statsLine{
  font-size:11px;
  letter-spacing:.4px;
  line-height:1.4;
  color:var(--dim,#6b7c8c);
}
.panel-foot #statsLine b{color:var(--cyan,#00f0ff);font-weight:700}
.panel-foot .disk{
  flex:0 0 auto;
  margin-left:auto;
}
.panel-foot .hints{
  flex:0 1 auto;
  font-size:10px;
  opacity:.75;
  max-width:100%;
}
.live-badge,#liveBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:3px 0 0;
  font-size:10.5px;
  letter-spacing:1px;
  color:var(--dim2,#5a6b7a);
}
#liveBadge .lb-item b{color:var(--neon,#00ff9c);font-weight:700}
#liveBadge .lb-ch{
  font-size:9px;
  padding:1px 6px;
  border:1px solid var(--line2,#1e2a36);
  color:var(--dim);
  letter-spacing:1.2px;
  margin-left:6px;
}
#liveBadge .lb-ch:empty,
#liveBadge .lb-ch:blank{
  display:none;
}
#liveBadge .lb-ch:is([data-ch="ws"],.ch-ws){border-color:var(--green,#3dff9a);color:var(--green)}
.social-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 10px;
  border-top:1px solid var(--line2,#1e2a36);
  background:rgba(6,8,10,.92);
  min-height:44px;
  box-sizing:border-box;
}
.social-bar .social-label{
  font-size:10px;
  letter-spacing:1.2px;
}
@media (max-width:760px){
  .panel-foot{
    align-items:flex-start;
    padding:10px 12px 12px;
  }
  .panel-foot .disk{margin-left:0;width:100%;order:3}
  .panel-foot .hints{display:none}
  .social-bar{padding:8px 10px}
}


/* ==========================================================================
 * DETAILS TABLE LAYOUT FIX (stable grid — do not omit cells in DOM)
 * ========================================================================== */
#rows.view-details {
  display: block !important;
  width: 100%;
}
.tbl-head,
#rows.view-details .row {
  display: grid !important;
  grid-template-columns: var(--cols) !important;
  grid-template-areas: var(--areas) !important;
  grid-auto-flow: dense;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  column-gap: 0;
}
/* ensure every area maps */
.c-sel    { grid-area: sel !important; }
.c-ic     { grid-area: ic !important; }
.c-name   { grid-area: name !important; min-width: 0; }
.c-ket    { grid-area: ket !important; min-width: 0; }
.c-views  { grid-area: views !important; }
.c-code   { grid-area: code !important; }
.c-author { grid-area: auth !important; min-width: 0; }
.c-size   { grid-area: size !important; }
.c-date   { grid-area: date !important; }
.c-perm   { grid-area: mode !important; }
.c-act    { grid-area: action !important; }

/* Admin: one row only — width fits up to 8 action buttons */
body.admin {
  --c-action: minmax(248px, 280px);
}
body:not(.admin) {
  --c-action: minmax(120px, 140px);
}
body.admin .c-act {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  max-width: none;
  width: 100%;
  opacity: 1 !important;
  white-space: nowrap;
}
/* Prevent table min-width blowout */
:root {
  --table-min: 0px;
}
.tbl-wrap {
  overflow-x: auto;
  overflow-y: auto;
}
.tbl-head,
#rows.view-details .row {
  width: 100% !important;
  min-width: 0 !important;
}


/* ==========================================================================
 * SCROLL CONTAINER FIX
 * Body locks page scroll; only .tbl-wrap scrolls the file list.
 * ========================================================================== */
html, body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
@supports (height: 100dvh) {
  html, body { height: 100dvh; max-height: 100dvh; }
}
main {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden;
}
.panel {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.browse-split {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: stretch;
}
.tbl-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
/* Rows grow with content; parent .tbl-wrap does the scrolling */
.tbl-wrap #rows,
#rows {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative;
}
#rows.view-details {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
.tbl-head {
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Keep footers out of the scroll area */
.panel-foot,
.social-bar {
  flex: 0 0 auto;
}


/* ==========================================================================
 * SUPERPOWER: ACTION column = single row only (admin + public)
 * Overrides earlier flex-wrap:wrap / narrow track rules.
 * ========================================================================== */
body.admin {
  --c-action: minmax(248px, 280px) !important;
}
body:not(.admin) {
  --c-action: minmax(128px, 152px) !important;
}
#rows.view-details .c-act,
.tbl-head .th.c-act,
body.admin .c-act,
body:not(.admin) .c-act {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.admin #rows.view-details .c-act .ai {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  font-size: 11px !important;
}
@media (max-width: 1024px) {
  body.admin { --c-action: minmax(220px, 248px) !important; }
  body.admin #rows.view-details .c-act .ai {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }
}
@media (max-width: 760px) {
  body.admin { --c-action: minmax(196px, 224px) !important; }
  body.admin #rows.view-details .c-act .ai {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 10px !important;
  }
}


/* ==========================================================================
 * SUPERPOWER layout fix: details = no wrap, no overlap
 * - KETERANGAN shifted left (tighter name + fixed ket track)
 * - AUTHOR full readable width (no aggressive shrink)
 * - All detail cells single-line (nowrap)
 * ========================================================================== */
:root {
  --c-sel: 36px;
  --c-ic: 40px;
  /* Name grows; keep moderate min so ket sits closer left */
  --c-name: minmax(100px, 0.7fr);
  /* Keterangan: fixed-ish track, left of views */
  --c-ket: minmax(110px, 160px);
  --c-views: 120px;
  --c-code: 72px;
  /* Author: wide enough for "ABDUR ROZAK, S.Kom." */
  --c-auth: 200px;
  --c-size: 88px;
  --c-date: 136px;
  --c-mode: 64px;
  --c-action: minmax(132px, 152px);
  --table-min: 0px;
}

body.admin {
  --c-action: minmax(248px, 280px) !important;
}
body:not(.admin) {
  --c-action: minmax(128px, 152px) !important;
  --c-sel: 0px;
}

/* Grid cells: one line only */
#rows.view-details .row,
.tbl-head {
  align-items: center !important;
  min-height: 44px;
}

#rows.view-details .c-name,
#rows.view-details .c-ket,
#rows.view-details .c-views,
#rows.view-details .c-code,
#rows.view-details .c-author,
#rows.view-details .c-size,
#rows.view-details .c-date,
#rows.view-details .c-perm {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
  max-width: 100%;
  align-self: center;
}

/* Name: single line; subtitle stays hidden on details desktop */
#rows.view-details .c-name {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
  padding: 8px 10px 8px 4px;
}
#rows.view-details .c-name .nm {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#rows.view-details .c-name .c-sub {
  display: none !important;
}
#rows.view-details .c-name .idx {
  flex: 0 0 auto;
}

/* Keterangan: left-aligned, single line, closer to name */
#rows.view-details .c-ket,
.tbl-head .th.c-ket {
  justify-content: flex-start !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#rows.view-details .c-ket span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
  -webkit-line-clamp: unset !important;
  word-break: normal !important;
  line-height: 1.3 !important;
  min-width: 0;
}

/* Author: do not crush — show full name when track allows */
#rows.view-details .c-author {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-width: 0;
}
#rows.view-details .c-author span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  /* Prefer full text; ellipsis only if viewport truly too narrow */
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Action stays one row (already set; reinforce) */
#rows.view-details .c-act {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Wide desktop: give name + ket more room, author fixed */
@media (min-width: 1281px) {
  :root {
    --c-name: minmax(100px, 0.7fr);
    --c-ket: minmax(120px, 180px);
    --c-auth: 210px;
    --c-views: 124px;
    --c-code: 76px;
    --c-size: 90px;
    --c-date: 140px;
    --c-mode: 68px;
  }
  body.admin { --c-action: minmax(248px, 280px) !important; }
}

/* Prevent mid-breakpoint from zeroing author when still wide enough */
@media (max-width: 1280px) and (min-width: 1101px) {
  :root {
    --c-name: minmax(90px, 0.65fr);
    --c-ket: minmax(100px, 140px);
    --c-views: 110px;
    --c-code: 68px;
    --c-auth: 190px;
    --c-size: 84px;
    --c-date: 128px;
    --c-mode: 60px;
  }
  /* Keep ket + author visible in this band */
  .c-ket, .c-views, .c-code, .c-author, .c-perm,
  .th.c-ket, .th.c-views, .th.c-code, .th.c-author, .th.c-perm {
    display: flex !important;
  }
  .th.c-ket, .th.c-views, .th.c-code, .th.c-author, .th.c-perm {
    display: flex !important;
  }
}


/* ==========================================================================
 * SUPERPOWER: hide KETERANGAN column · ket badge on name · MODE not under ACTION
 * ========================================================================== */

/* Drop ket track completely — free space for MODE + ACTION */
:root {
  --c-ket: 0px !important;
  --c-name: minmax(100px, 0.7fr);
  --c-views: 120px;
  --c-code: 72px;
  --c-auth: 200px;
  --c-size: 88px;
  --c-date: 136px;
  --c-mode: 72px;
  --c-action: minmax(140px, 160px);
}
body.admin {
  --c-action: minmax(260px, 292px) !important;
  --c-mode: 72px !important;
}
body:not(.admin) {
  --c-action: minmax(132px, 152px) !important;
  --c-sel: 0px;
}

.c-ket,
.th.c-ket {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* MODE stays visible; ACTION owns its track only */
#rows.view-details .c-perm,
.tbl-head .th.c-perm {
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 1;
  position: relative;
}
#rows.view-details .c-act {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: hidden !important; /* don't paint over MODE */
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2;
  position: relative;
}
body.admin #rows.view-details .c-act .ai {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  font-size: 10.5px !important;
}

/* Ket badge next to file/folder name — kuning (neon) */
.ket-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--neon) 55%, var(--line2));
  background: color-mix(in srgb, var(--neon) 14%, transparent);
  color: var(--neon);
  font-size: 9px;
  cursor: pointer;
  vertical-align: middle;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.ket-badge:hover {
  background: color-mix(in srgb, var(--neon) 30%, transparent);
  border-color: var(--neon);
  color: #000;
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 40%, transparent);
}
.ket-badge-add {
  border-color: var(--line2);
  background: transparent;
  color: var(--dim);
  opacity: 0;
}
.row:hover .ket-badge-add,
.row.selected .ket-badge-add {
  opacity: 1;
}
.ket-badge-add:hover {
  border-color: var(--neon);
  color: var(--neon);
  background: color-mix(in srgb, var(--neon) 12%, transparent);
}

#rows.view-details .c-name .nm {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
#rows.view-details .c-name .nm-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1281px) {
  :root {
    --c-name: minmax(100px, 0.7fr);
    --c-auth: 210px;
    --c-mode: 76px;
  }
  body.admin { --c-action: minmax(268px, 300px) !important; }
}


/* ==========================================================================
 * SUPERPOWER: ACTION column width = fit content (responsive to button count)
 * ========================================================================== */
:root {
  /* max-content: track grows to widest .c-act in the column */
  --c-action: max-content;
  --c-mode: 72px;
}
body.admin {
  --c-action: max-content !important;
}
body:not(.admin) {
  --c-action: max-content !important;
}

.tbl-head .th.c-act,
#rows.view-details .c-act {
  grid-area: action !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
}

/* Fixed button size — predictable math if JS sets pixel width */
#rows.view-details .c-act .ai {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  min-width: 24px !important;
  font-size: 10.5px !important;
}

/* MODE stays in its own track; never covered */
#rows.view-details .c-perm,
.tbl-head .th.c-perm {
  overflow: hidden !important;
  white-space: nowrap !important;
  z-index: 0;
}

/* Horizontal scroll if ACTION needs more room than viewport */
.tbl-wrap {
  overflow-x: auto !important;
}


/* Name badges AFTER file/folder title: name → lock → globe → ket */
#rows.view-details .c-name .nm,
#rows .c-name .nm {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
#rows .c-name .nm-text {
  order: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rows .c-name .lock-badge,
#rows .c-name .nm .fa-lock,
#rows .c-name [class*="lock"] {
  order: 2;
}
#rows .c-name .web-badge {
  order: 3 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
  color: var(--green);
  font-size: 11px;
}
#rows .c-name .ket-badge {
  order: 4 !important;
  margin-left: 0 !important;
  flex: 0 0 auto;
}
#rows .c-name .lock-after-name { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }


/* ==========================================================================
 * STATISTIK FOLDER — professional layout (no chart crop)
 * ========================================================================== */
.ds-root{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:4px 2px 8px;
  box-sizing:border-box;
}
.ds-hero{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:24px 28px;
  padding:12px 8px 4px;
}
.ds-chart-box{
  flex:0 0 auto;
  width:240px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px; /* critical: prevents top/bottom arc clipping */
  box-sizing:border-box;
  border:1px solid var(--line2, #1e2a36);
  background:radial-gradient(ellipse at center, rgba(20,28,36,.9) 0%, rgba(8,12,16,.5) 70%);
  border-radius:4px;
}
.ds-chart-box canvas{
  display:block;
  max-width:100%;
  height:auto;
}
.ds-legend{
  flex:1 1 240px;
  min-width:200px;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ds-leg-title{
  font-size:10px;
  letter-spacing:2px;
  color:var(--dim);
  margin-bottom:2px;
}
.ds-leg-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.ds-sw{
  width:10px;
  height:10px;
  margin-top:4px;
  flex:0 0 auto;
  border-radius:1px;
  box-shadow:0 0 8px rgba(0,0,0,.35);
}
.ds-leg-main{flex:1;min-width:0}
.ds-leg-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}
.ds-leg-name{color:var(--txt);font-weight:600}
.ds-leg-pct{color:var(--neon);font-variant-numeric:tabular-nums}
.ds-leg-sub{
  font-size:10px;
  color:var(--dim);
  margin-top:2px;
}
.ds-bar{
  height:4px;
  background:rgba(30,42,54,.9);
  margin-top:5px;
  overflow:hidden;
  border-radius:2px;
}
.ds-bar > i{
  display:block;
  height:100%;
  min-width:2px;
  border-radius:2px;
}

.ds-kpis{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:8px;
}
.ds-kpi{
  background:var(--bg2, #0c1218);
  border:1px solid var(--line2, #1e2a36);
  padding:10px 8px;
  text-align:center;
  min-width:0;
}
.ds-kpi b{
  display:block;
  font-family:var(--disp);
  font-size:16px;
  font-weight:700;
  color:var(--neon);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ds-kpi span{
  display:block;
  margin-top:4px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--dim);
  text-transform:uppercase;
}

.ds-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.ds-card{
  background:var(--bg2, #0c1218);
  border:1px solid var(--line2, #1e2a36);
  padding:12px 14px 10px;
  min-width:0;
}
.ds-card-wide{grid-column:1 / -1}
.ds-card h4{
  margin:0 0 10px;
  font-family:var(--disp);
  font-size:11px;
  letter-spacing:1.6px;
  color:var(--cyan);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.ds-kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom:1px dashed var(--line, #15202a);
  font-size:11.5px;
}
.ds-kv:last-child{border-bottom:0}
.ds-kv span{color:var(--dim);flex:0 1 auto}
.ds-kv b{
  color:var(--txt);
  font-weight:600;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:65%;
}

.ds-file-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px dashed var(--line, #15202a);
  font-size:12px;
  min-width:0;
}
.ds-file-row:last-child{border-bottom:0}
.ds-rank{
  flex:0 0 18px;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:var(--neon);
  border:1px solid var(--line2);
}
.ds-file-row > i{flex:0 0 auto;width:16px;text-align:center;font-size:12px}
.ds-file-main{flex:1;min-width:0}
.ds-fname{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--txt);
}
.ds-sub{display:block;font-size:10px;color:var(--dim);margin-top:2px}
.ds-fsize{
  flex:0 0 auto;
  color:var(--cyan);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ds-empty{
  font-size:11px;
  color:var(--dim);
  padding:8px 0;
}

/* Ensure shell body can scroll full stats without clipping chart */
#shell.open .shell-body,
#shell .shell-body{
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#shell .shell-body .ds-root{
  overflow:visible;
}

@media (max-width:700px){
  .ds-kpis{grid-template-columns:repeat(3, minmax(0,1fr));}
  .ds-grid{grid-template-columns:1fr;}
  .ds-card-wide{grid-column:auto}
  .ds-chart-box{width:200px;height:200px}
  .ds-chart-box canvas{width:180px!important;height:180px!important}
}
@media (max-width:420px){
  .ds-kpis{grid-template-columns:repeat(2, minmax(0,1fr));}
}


/* ==========================================================================
 * Shell body: long content must start at TOP (center clips chart)
 * ========================================================================== */
#shell .shell-body,
#shell.open .shell-body,
#mBody.shell-body {
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 16px !important;
}
/* Media-only previews stay centered */
#shell .shell-body:has(> img:only-child),
#shell .shell-body:has(> video:only-child),
#shell .shell-body:has(> iframe:only-child),
#shell .shell-body:has(> .qr-wrap:only-child) {
  justify-content: center !important;
  align-items: center !important;
}
#shell .shell-body .ds-root {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 4px;
  overflow: visible;
  flex-shrink: 0;
}
#shell .shell-body .ds-hero {
  flex-shrink: 0;
}
#shell .shell-body .ds-chart-box {
  flex-shrink: 0;
  overflow: visible;
}


/* Lock badge states: LOCK (blocked) vs UNLOCK (session opened) */
.lock-after-name.is-unlocked .lock-badge{
  color: var(--green, #00e5a8) !important;
}
.lock-after-name.is-unlocked .lock-tag{
  color: var(--green, #00e5a8) !important;
  border-color: color-mix(in srgb, var(--green, #00e5a8) 45%, transparent);
  background: color-mix(in srgb, var(--green, #00e5a8) 12%, transparent);
}
.lock-after-name.is-locked .lock-badge{
  color: var(--mag, #ff4d6d) !important;
}
.row.is-session-unlocked .c-ic i.fa-folder,
.tile-x.is-session-unlocked .tx-ic.fa-folder{
  color: var(--green, #00e5a8) !important;
}
.row.is-session-unlocked .nm .lock-tag{
  color: var(--green, #00e5a8);
}


/* ==========================================================================
 * FILE HASH panel + README rendering
 * ========================================================================== */
.hash-panel{text-align:left;padding:4px 2px 8px}
.hash-head{
  font-family:var(--disp);
  font-weight:700;font-size:13px;letter-spacing:1px;color:#fff;
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.hash-meta{font-size:10.5px;color:var(--dim);margin-bottom:14px;letter-spacing:.5px}
.hash-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 10px;margin-bottom:8px;
  background:var(--bg2);border:1px solid var(--line2);
  min-width:0;
}
.hash-lab{
  flex:0 0 72px;font-size:10px;font-weight:700;letter-spacing:1px;
}
.hash-val{
  flex:1;min-width:0;font-size:11px;color:var(--txt);
  word-break:break-all;font-family:var(--mono),ui-monospace,monospace;
  background:transparent;border:0;padding:0;
}
.hash-copy{flex:0 0 auto;padding:6px 10px !important;font-size:11px}
.hash-hint{
  margin-top:10px;font-size:10.5px;color:var(--dim);line-height:1.7;
  border-top:1px dashed var(--line);padding-top:10px;
}

.readme-panel{
  margin:0 0 10px;border:1px solid var(--line2);
  background:color-mix(in srgb, var(--panel2) 92%, transparent);
  border-radius:2px;overflow:hidden;
}
.readme-panel.hidden{display:none !important}
.readme-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 80%, transparent);
}
.readme-title{
  font-size:11px;letter-spacing:1.2px;color:var(--cyan);font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
}
.readme-trunc{
  font-size:9px;color:var(--amber);border:1px solid var(--amber);
  padding:1px 6px;letter-spacing:1px;font-weight:600;
}
.readme-actions{display:flex;gap:4px}
.readme-loading{
  padding:14px;font-size:11px;color:var(--dim);
  display:flex;align-items:center;gap:8px;
}
.readme-body{
  padding:14px 16px 16px;max-height:min(42vh, 420px);overflow:auto;
  font-size:12.5px;line-height:1.65;color:var(--txt);
}
.readme-body.is-collapsed{display:none}
.readme-pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font-family:var(--mono),ui-monospace,monospace;font-size:11.5px;
  color:var(--txt);
}
.readme-md h1,.readme-md h2,.readme-md h3{
  font-family:var(--disp);
  color:#fff;margin:0.8em 0 0.35em;letter-spacing:.5px;
}
.readme-md h1{font-size:1.35em}
.readme-md h2{font-size:1.18em;color:var(--cyan)}
.readme-md h3{font-size:1.05em;color:var(--neon)}
.readme-md p{margin:0.55em 0}
.readme-md a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.readme-md code{
  font-family:var(--mono),monospace;font-size:0.92em;
  background:rgba(0,0,0,.35);padding:1px 5px;border:1px solid var(--line2);
}
.readme-md pre{
  background:var(--bg);border:1px solid var(--line2);padding:10px 12px;
  overflow:auto;margin:0.7em 0;font-size:11px;line-height:1.55;
}
.readme-md pre code{background:none;border:0;padding:0}
.readme-md ul,.readme-md ol{margin:0.5em 0 0.5em 1.3em;padding:0}
.readme-md blockquote{
  margin:0.6em 0;padding:6px 12px;border-left:3px solid var(--cyan);
  color:var(--dim2);background:rgba(0,240,255,.04);
}
.readme-md table{border-collapse:collapse;width:100%;margin:0.6em 0;font-size:11.5px}
.readme-md th,.readme-md td{border:1px solid var(--line2);padding:6px 8px;text-align:left}
.readme-md th{background:var(--bg2);color:var(--cyan)}
.readme-md img{max-width:100%;height:auto;border:1px solid var(--line2)}
.readme-md hr{border:0;border-top:1px dashed var(--line);margin:1em 0}


/* ==========================================================================
 * PANEL-FOOT — desktop single-line strip
 * ENTRIES · LIVE · DISK · HINTS  → one row on ≥900px
 * ========================================================================== */
@media (min-width: 900px) {
  .panel-foot {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 16px !important;
    padding: 4px 14px !important;
    min-height: 32px !important;
    font-size: 11px;
  }
  .panel-foot .foot-stats {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: none;
    width: auto !important;
  }
  .panel-foot #statsLine {
    display: inline !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .panel-foot .live-badge,
  .panel-foot #liveBadge {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }
  /* visual separator between ENTRIES block and LIVE block */
  .panel-foot #liveBadge::before {
    content: "//";
    color: #33445a;
    margin-right: 2px;
    letter-spacing: 0;
    font-weight: 400;
  }
  .panel-foot .disk {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    order: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  .panel-foot .disk-bar {
    width: 100px;
  }
  .panel-foot .hints {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.85;
    max-width: none !important;
    gap: 6px !important;
    padding-left: 8px;
  }
}

/* Mid desktop: still one line, slightly tighter */
@media (min-width: 900px) and (max-width: 1100px) {
  .panel-foot {
    gap: 10px 12px !important;
    font-size: 10.5px;
  }
  .panel-foot .disk-bar { width: 72px; }
  .panel-foot .hints { font-size: 9.5px; opacity: 0.7; }
}


/* ==========================================================================
 * DETAILS rows — slightly tighter vertical padding
 * ========================================================================== */
#rows.view-details .row {
  min-height: 36px !important;
}
.tbl-head {
  min-height: 34px !important;
}
#rows.view-details .row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#rows.view-details .c-name,
#rows.view-details .c-views,
#rows.view-details .c-code,
#rows.view-details .c-author,
#rows.view-details .c-size,
#rows.view-details .c-date,
#rows.view-details .c-perm,
#rows.view-details .c-act,
#rows.view-details .c-ic,
#rows.view-details .c-sel {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.tbl-head .th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.9px !important;
}
.tbl-head .th-name {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.th.c-ic, .th.c-sel {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
#rows.view-details .c-act .ai {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px !important;
}
#rows.perf-lite.view-details .row,
#rows.view-details.perf-lite .row {
  min-height: 32px !important;
  contain-intrinsic-size: auto 32px !important;
}


/* ==========================================================================
 * Header actions — tighter padding (LIVE NODE / FS / RESCAN / HELP / ABOUT / LOGIN)
 * NOTE: no fixed width here — tablet/icon mode is handled in media queries below
 * ========================================================================== */
header .hright {
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
header .hright .status {
  padding: 5px 10px 5px 8px;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  flex: 0 0 auto;
}
header .hright .status .led {
  width: 6px;
  height: 6px;
}
header .hright .btn {
  padding: 6px 10px;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1.1px;
  flex: 0 0 auto; /* never shrink — prevents "LOG" truncation */
  white-space: nowrap;
  overflow: visible;
}
header .hright .btn .btn-txt {
  white-space: nowrap;
}
header .hright .btn i {
  font-size: 11px;
  flex: 0 0 auto;
}
@media (min-width: 1281px) {
  header .hright .btn {
    padding: 6px 12px;
  }
}


/* ==========================================================================
 * Table column header — ONLY in Details view
 * (overrides earlier display:grid !important on .tbl-head)
 * ========================================================================== */
.tbl-head,
#tblHead {
  display: none !important;
}
/* Show header only when listing is in details mode */
.tbl-wrap:has(#rows.view-details) .tbl-head,
.tbl-wrap:has(#rows.view-details) #tblHead,
body:has(#rows.view-details) .tbl-head,
body:has(#rows.view-details) #tblHead {
  display: grid !important;
  grid-template-columns: var(--cols) !important;
  grid-template-areas: var(--areas) !important;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* Safety for browsers without :has — JS still toggles; class hook */
.tbl-wrap.details-on .tbl-head,
.tbl-wrap.details-on #tblHead {
  display: grid !important;
}


/* ==========================================================================
 * INDEX OF line — tighter vertical padding
 * ========================================================================== */
.index-line {
  padding: 8px 14px !important;
  gap: 10px !important;
  min-height: 0 !important;
}
.index-line .tag {
  padding: 2px 7px !important;
  font-size: 9.5px !important;
  letter-spacing: 1.5px !important;
}
.index-line #dirTitle {
  font-size: 16px !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
}
.index-line .idx-info {
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
}


/* ==========================================================================
 * Name prefix glow (jack_ youtube_ faq_ bab01_ …)
 * ========================================================================== */
.nmpre{
  font-weight:700 !important;
  letter-spacing:.4px;
  text-shadow:0 0 10px currentColor, 0 0 18px currentColor;
  filter:brightness(1.08);
}
.row:hover .nmpre,
.tile-x:hover .nmpre{
  filter:brightness(1.25);
  text-shadow:0 0 12px currentColor, 0 0 22px currentColor;
}
/* nmpre glow enhanced */


/* ==========================================================================
 * Hujan Love FX
 * ========================================================================== */
body.rain-on.rain-love #btnRainLove,
body.rain-love #btnRainLove.on {
  color: #ff2a6d !important;
  border-color: color-mix(in srgb, #00f0ff 40%, #ff2a6d) !important;
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.45), 0 0 18px rgba(0, 240, 255, 0.2);
}
body.rain-love #btnRainLove i {
  color: #ff2a6d;
  animation: lovePulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #00f0ff);
}
@keyframes lovePulse {
  0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 4px #ff2a6d); }
  50% { transform: scale(1.12); opacity: 0.9; filter: drop-shadow(0 0 8px #00f0ff); }
}
#rain.rain-love {
  opacity: 0.62;
  mix-blend-mode: normal;
  filter: none;
}
body.rain-love .panel {
  box-shadow: inset 0 0 90px rgba(255, 42, 109, 0.05), inset 0 0 120px rgba(0, 240, 255, 0.03);
}


/* Rain full-viewport safety (overrides older half-box rules) */
#rain, #rain.is-on {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}


/* ==========================================================================
 * GUESTBOOK (Buku Tamu)
 * ========================================================================== */
.gb-root{width:100%;max-width:100%;margin:0 auto;text-align:left}
.gb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.gb-tab{
  padding:7px 12px;font-size:10px;letter-spacing:1.2px;font-weight:700;
  border:1px solid var(--line2);background:var(--bg2);color:var(--dim);cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.gb-tab.on{border-color:var(--neon);color:var(--neon)}
.gb-tab:hover{border-color:var(--cyan);color:var(--cyan)}
.gb-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.gb-search{
  flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line2);background:var(--bg2);padding:6px 10px;
}
.gb-search input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);font-family:var(--mono);font-size:12px;outline:none}
.gb-search i{color:var(--dim);font-size:11px}
.gb-filter select{background:var(--bg2);border:1px solid var(--line2);color:var(--txt);font-family:var(--mono);font-size:11px;padding:6px 8px}
.gb-list{display:flex;flex-direction:column;gap:10px}
.gb-item{
  display:grid;grid-template-columns:44px 1fr;gap:12px;
  padding:12px 12px 10px;border:1px solid var(--line2);background:var(--bg2);
}
.gb-item:hover{border-color:color-mix(in srgb, var(--neon) 35%, var(--line2))}
.gb-av{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:15px;
  letter-spacing:1px;color:#000;background:var(--neon);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.gb-av.s-pending{background:var(--amber);color:#000}
.gb-av.s-hidden{background:var(--dim);color:#000}
.gb-av.s-spam{background:var(--mag);color:#fff}
.gb-av.s-approved{background:var(--neon);color:#000}
.gb-main{min-width:0}
.gb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:4px}
.gb-name{font-weight:700;color:#fff;font-size:13px;letter-spacing:.3px}
.gb-meta{font-size:10px;color:var(--dim);letter-spacing:.4px}
.gb-meta i{margin-right:3px}
.gb-msg{font-size:12.5px;line-height:1.7;color:var(--txt);white-space:pre-wrap;word-break:break-word;margin:4px 0 6px}
.gb-status{
  display:inline-flex;align-items:center;gap:4px;font-size:9px;letter-spacing:1px;
  padding:2px 7px;border:1px solid var(--line2);color:var(--dim);text-transform:uppercase;
}
.gb-status.approved{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent)}
.gb-status.pending{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.gb-status.hidden{color:var(--dim)}
.gb-status.spam{color:var(--mag);border-color:color-mix(in srgb,var(--mag) 50%,transparent)}
.gb-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gb-actions .btn{padding:5px 8px !important;font-size:10px !important;letter-spacing:1px}
.gb-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.gb-pager .btn{padding:6px 10px !important;font-size:10px}
.gb-pager .pg-info{font-size:11px;color:var(--dim)}
.gb-empty{text-align:center;padding:28px 12px;color:var(--dim);font-size:12px;line-height:1.8;border:1px dashed var(--line2)}
.gb-empty i{font-size:28px;color:var(--cyan);display:block;margin-bottom:8px}
.gb-form{display:flex;flex-direction:column;gap:10px}
.gb-form .fld{display:flex;flex-direction:column;gap:5px}
.gb-form .fld span{font-size:10px;letter-spacing:1.2px;color:var(--cyan);font-weight:700}
.gb-form input,.gb-form textarea{
  background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:12.5px;padding:9px 11px;width:100%;border-radius:2px;
}
.gb-form textarea{min-height:110px;resize:vertical;line-height:1.55}
.gb-form input:focus,.gb-form textarea:focus{
  outline:none;border-color:var(--neon);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent);
}
.gb-captcha-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.gb-captcha-row .fld{flex:1 1 140px}
.gb-captcha-q{
  font-size:13px;color:var(--neon);font-weight:700;letter-spacing:1px;
  padding:8px 12px;border:1px solid var(--line2);background:var(--bg2);white-space:nowrap;
}
.gb-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.gb-note{font-size:10.5px;color:var(--dim);line-height:1.6;margin-top:4px}
.gb-contact-link{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;font-size:11px}
.gb-loc{font-size:10px;color:var(--dim2)}
@media (max-width:520px){
  .gb-item{grid-template-columns:36px 1fr;gap:10px;padding:10px}
  .gb-av{width:36px;height:36px;font-size:12px}
}


/* ==========================================================================
 * Guestbook shell — list vs form modes + responsive
 * ========================================================================== */

/* LIST / MODERASI: tinggi stabil, scrollbar hanya jika konten overflow */
#shell.is-gb:not(.is-gb-form) .shell-panel{
  width: min(1100px, 96vw);
  max-height: min(94vh, 96dvh);
  height: min(88vh, 90dvh);
  min-height: 0;
}
#shell.is-gb:not(.is-gb-form) .shell-body,
#shell.is-gb:not(.is-gb-form) #mBody{
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  padding: 12px 14px !important;
}

/* FORM TULIS: tinggi mengikuti isi — tanpa scrollbar jika pendek */
#shell.is-gb.is-gb-form .shell-panel{
  width: min(720px, 96vw);
  height: auto !important;
  min-height: 0 !important;
  max-height: min(94vh, 96dvh);
}
#shell.is-gb.is-gb-form .shell-body,
#shell.is-gb.is-gb-form #mBody{
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: auto;
  padding: 12px 14px 8px !important;
  flex: 0 1 auto;
}

.gb-root{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#shell.is-gb:not(.is-gb-form) .gb-root{
  min-height: 240px;
  height: 100%;
  max-width: 100%;
}
#shell.is-gb.is-gb-form .gb-root{
  min-height: 0;
  max-width: min(720px, 100%);
  margin: 0 auto;
}

.gb-body-slot{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
#shell.is-gb.is-gb-form .gb-body-slot{
  flex: 0 1 auto;
}

/* Form rapi */
#shell.is-gb.is-gb-form .gb-form{
  gap: 12px;
}
#shell.is-gb.is-gb-form .gb-form textarea{
  min-height: 88px;
  max-height: min(28vh, 200px);
  resize: vertical;
}
#shell.is-gb.is-gb-form .gb-form input,
#shell.is-gb.is-gb-form .gb-form textarea{
  padding: 10px 12px;
}
#shell.is-gb.is-gb-form .gb-captcha-row{
  align-items: stretch;
}
#shell.is-gb.is-gb-form .gb-captcha-q{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
#shell.is-gb.is-gb-form .gb-note{
  margin: 0;
}
#shell.is-gb.is-gb-form .shell-foot{
  padding: 10px 14px;
}

.gb-skel{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.gb-skel-row{
  height: 72px;
  border: 1px solid var(--line2);
  background: linear-gradient(90deg, var(--bg2) 0%, color-mix(in srgb, var(--line2) 35%, var(--bg2)) 50%, var(--bg2) 100%);
  background-size: 200% 100%;
  animation: gbShimmer 1.1s linear infinite;
}
@keyframes gbShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .gb-skel-row{ animation: none; }
}

/* ---- Responsive: tablet ---- */
@media (max-width: 720px){
  #shell.is-gb .shell-panel{
    width: min(100vw - 16px, 96vw) !important;
  }
  #shell.is-gb:not(.is-gb-form) .shell-panel{
    height: min(84vh, 100dvh - 24px);
    max-height: min(84vh, 100dvh - 24px);
  }
  .gb-tabs{ gap: 4px; }
  .gb-tab{ padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.8px; }
  .gb-toolbar{ gap: 6px; }
  .gb-search{ flex: 1 1 100%; }
}

/* ---- Responsive: phone ---- */
@media (max-width: 520px){
  #shell.is-gb{
    align-items: flex-end !important;
  }
  #shell.is-gb .shell-panel{
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  #shell.is-gb:not(.is-gb-form) .shell-panel{
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  #shell.is-gb.is-gb-form .shell-panel{
    height: auto !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    /* sheet from bottom feel */
    margin-top: auto;
  }
  #shell.is-gb .shell-head{
    padding: 10px 12px;
  }
  #shell.is-gb .shell-title{ font-size: 14px; }
  #shell.is-gb .shell-meta{ display: none; }
  #shell.is-gb .shell-body,
  #shell.is-gb #mBody{
    padding: 10px 12px !important;
  }
  #shell.is-gb .shell-foot{
    padding: 10px 12px;
    gap: 8px;
  }
  #shell.is-gb .shell-foot .btn{
    flex: 1 1 auto;
    justify-content: center;
  }

  .gb-item{ grid-template-columns: 36px 1fr; gap: 10px; padding: 10px; }
  .gb-av{ width: 36px; height: 36px; font-size: 12px; }
  .gb-msg{ font-size: 12px; }
  .gb-actions .btn{ flex: 1 1 calc(50% - 4px); justify-content: center; }

  .gb-captcha-row{
    flex-direction: column;
    align-items: stretch !important;
  }
  .gb-captcha-row .fld{ flex: 1 1 auto; }
  .gb-captcha-q{ width: 100%; justify-content: center; }
  #gbCapReload{ align-self: stretch; }

  #shell.is-gb.is-gb-form .gb-form textarea{
    min-height: 72px;
    max-height: min(22vh, 160px);
  }
  .gb-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gb-tabs .gb-tab[data-gbtab="admin"]{
    grid-column: 1 / -1;
  }
  .gb-tab{
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 360px){
  .gb-tab{ font-size: 9px; padding: 6px 6px; }
  .gb-name{ font-size: 12px; }
}


/* ==========================================================================
 * Q&A (Tanya Jawab) — reuses gb shell modes via is-qa / is-qa-form
 * ========================================================================== */
#shell.is-qa:not(.is-qa-form) .shell-panel{
  width: min(1100px, 96vw);
  max-height: min(94vh, 96dvh);
  height: min(88vh, 90dvh);
  min-height: 0;
}
#shell.is-qa:not(.is-qa-form) .shell-body,
#shell.is-qa:not(.is-qa-form) #mBody{
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  padding: 12px 14px !important;
}
#shell.is-qa.is-qa-form .shell-panel{
  width: min(720px, 96vw);
  height: auto !important;
  min-height: 0 !important;
  max-height: min(94vh, 96dvh);
}
#shell.is-qa.is-qa-form .shell-body,
#shell.is-qa.is-qa-form #mBody{
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 14px 8px !important;
  flex: 0 1 auto;
}

.qa-root{width:100%;max-width:100%;margin:0 auto;text-align:left;display:flex;flex-direction:column;min-height:0}
#shell.is-qa.is-qa-form .qa-root{max-width:min(720px,100%);margin:0 auto}
.qa-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.qa-tab{
  padding:7px 12px;font-size:10px;letter-spacing:1.2px;font-weight:700;
  border:1px solid var(--line2);background:var(--bg2);color:var(--dim);cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.qa-tab.on{border-color:var(--cyan);color:var(--cyan)}
.qa-tab:hover{border-color:var(--neon);color:var(--neon)}
.qa-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.qa-search{
  flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line2);background:var(--bg2);padding:6px 10px;
}
.qa-search input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);font-family:var(--mono);font-size:12px;outline:none}
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa-item{
  border:1px solid var(--line2);background:var(--bg2);padding:12px 14px 10px;
}
.qa-item.is-faq{border-color:color-mix(in srgb, var(--cyan) 45%, var(--line2))}
.qa-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.qa-badge{
  font-size:9px;letter-spacing:1.2px;font-weight:700;padding:2px 7px;
  border:1px solid var(--line2);color:var(--dim);text-transform:uppercase;
}
.qa-badge.faq{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
.qa-badge.pending{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.qa-badge.approved{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent)}
.qa-badge.hidden{color:var(--dim)}
.qa-badge.spam{color:var(--mag);border-color:color-mix(in srgb,var(--mag) 50%,transparent)}
.qa-meta{font-size:10px;color:var(--dim);margin-left:auto}
.qa-q{
  font-size:13px;line-height:1.65;color:#fff;font-weight:600;margin-bottom:8px;
  display:flex;gap:8px;align-items:flex-start;
}
.qa-q i{color:var(--neon);margin-top:3px;flex:0 0 auto}
.qa-a{
  font-size:12.5px;line-height:1.7;color:var(--txt);margin:0 0 6px;
  padding:10px 12px;border-left:3px solid var(--cyan);
  background:color-mix(in srgb, var(--cyan) 6%, var(--bg));
  white-space:pre-wrap;word-break:break-word;
}
.qa-a-empty{font-size:11.5px;color:var(--dim);font-style:italic;margin-bottom:6px}
.qa-ask{font-size:11px;color:var(--dim2);margin-bottom:4px}
.qa-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.qa-actions .btn{padding:5px 8px !important;font-size:10px !important}
.qa-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.qa-pager .pg-info{font-size:11px;color:var(--dim)}
.qa-empty{text-align:center;padding:28px 12px;color:var(--dim);font-size:12px;line-height:1.8;border:1px dashed var(--line2)}
.qa-empty i{font-size:28px;color:var(--cyan);display:block;margin-bottom:8px}
.qa-form{display:flex;flex-direction:column;gap:12px}
.qa-form .fld{display:flex;flex-direction:column;gap:5px}
.qa-form .fld span{font-size:10px;letter-spacing:1.2px;color:var(--cyan);font-weight:700}
.qa-form input,.qa-form textarea{
  background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:12.5px;padding:10px 12px;width:100%;border-radius:2px;
}
.qa-form textarea{min-height:88px;max-height:min(28vh,200px);resize:vertical;line-height:1.55}
.qa-form input:focus,.qa-form textarea:focus{
  outline:none;border-color:var(--neon);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent);
}
.qa-captcha-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.qa-captcha-q{
  font-size:13px;color:var(--neon);font-weight:700;letter-spacing:1px;
  padding:8px 12px;border:1px solid var(--line2);background:var(--bg2);
  display:flex;align-items:center;gap:8px;
}
.qa-note{font-size:10.5px;color:var(--dim);line-height:1.6}
.qa-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.qa-skel{display:flex;flex-direction:column;gap:10px}
.qa-skel-row{
  height:88px;border:1px solid var(--line2);
  background:linear-gradient(90deg,var(--bg2) 0%,color-mix(in srgb,var(--line2) 35%,var(--bg2)) 50%,var(--bg2) 100%);
  background-size:200% 100%;animation:gbShimmer 1.1s linear infinite;
}

@media (max-width:720px){
  #shell.is-qa .shell-panel{width:min(1200px, 98vw) !important;max-height:min(96vh,96dvh)!important}
  .qa-tab{padding:6px 10px;font-size:9.5px}
}
@media (max-width:520px){
  #shell.is-qa{align-items:flex-end !important}
  #shell.is-qa .shell-panel{
    width:100vw !important;max-width:100vw !important;
    max-height:100dvh !important;
  }
  #shell.is-qa:not(.is-qa-form) .shell-panel{
    height:100dvh !important;min-height:100dvh !important;
  }
  #shell.is-qa.is-qa-form .shell-panel{height:auto !important;margin-top:auto}
  #shell.is-qa .shell-meta{display:none}
  .qa-tabs{display:grid;grid-template-columns:1fr 1fr}
  .qa-tabs .qa-tab[data-qatab="admin"]{grid-column:1 / -1}
  .qa-tab{width:100%;text-align:center;justify-content:center}
  .qa-captcha-row{flex-direction:column}
  .qa-actions .btn{flex:1 1 calc(50% - 4px);justify-content:center}
}


/* Reactions like / fav */
.rx-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.rx-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;font-size:11px;letter-spacing:.3px;
  border:1px solid var(--line2);background:var(--bg);color:var(--dim);
  cursor:pointer;font-family:var(--mono);border-radius:2px;
  transition:color .12s,border-color .12s,background .12s;
}
.rx-btn:hover{border-color:var(--neon);color:var(--neon)}
.rx-btn.on-like{border-color:color-mix(in srgb,var(--mag) 55%,transparent);color:var(--mag);background:color-mix(in srgb,var(--mag) 10%,transparent)}
.rx-btn.on-fav{border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.rx-btn:disabled{opacity:.55;cursor:wait}
.rx-btn b{font-variant-numeric:tabular-nums;font-weight:700}
.rx-btn i{font-size:11px}


/* Replies + voting */
.rp-box{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.rp-toggle{
  background:none;border:0;color:var(--cyan);font-family:var(--mono);
  font-size:11px;cursor:pointer;padding:2px 0;letter-spacing:.5px;
}
.rp-toggle:hover{color:var(--neon)}
.rp-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.rp-item{
  padding:8px 10px;background:var(--bg);border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:8px 10px;
}
.rp-votes{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:28px}
.rp-vote{
  background:none;border:0;color:var(--dim);cursor:pointer;padding:2px;
  font-size:12px;line-height:1;
}
.rp-vote:hover{color:var(--neon)}
.rp-vote.on-up{color:var(--green)}
.rp-vote.on-down{color:var(--mag)}
.rp-score{font-size:11px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.rp-body{font-size:12px;line-height:1.55;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.rp-meta{font-size:10px;color:var(--dim);margin-top:3px}
.rp-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rp-form input,.rp-form textarea{
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:12px;padding:7px 9px;width:100%;
}
.rp-form textarea{min-height:56px;max-height:120px;resize:vertical}
.rp-form .rp-actions{display:flex;gap:6px;flex-wrap:wrap}
.rp-live{
  display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1px;
  color:var(--green);margin-left:8px;
}
.rp-live i{font-size:7px;animation:rpPulse 1.4s ease-in-out infinite}
@keyframes rpPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rp-live i{animation:none}}


/* Advanced profile */
.pf-root{width:100%;max-width:560px;margin:0 auto;text-align:left}
.pf-student .pf-section{margin:12px 0 14px;padding:12px;border:1px solid var(--line2,#28394a);background:rgba(0,0,0,.18)}
.pf-student .pf-sec-h{font:700 10px/1.3 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan,#00f0ff);margin:0 0 10px}
.pf-student .pf-sec-h i{margin-right:6px;opacity:.9}
.pf-grid-ro{display:grid;gap:8px}
.pf-ro{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:8px 10px;border:1px solid var(--line,#1b2530);background:rgba(0,240,255,.03)}
.pf-ro .pf-k{font:700 9px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--dim,#8fa0b0);min-width:110px}
.pf-ro .pf-v{font:600 13px/1.3 var(--disp,system-ui,sans-serif);color:var(--txt,#e8eef5)}
.pf-ro .pf-v.mono{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--cyan,#00f0ff)}
.pf-hero{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pf-av{
  width:64px;height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:22px;color:#000;background:var(--neon);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  overflow:hidden;
}
.pf-av img{width:100%;height:100%;object-fit:cover}
.pf-name{font-family:var(--disp);font-weight:700;font-size:18px;color:#fff;letter-spacing:1px}
.pf-sub{font-size:11px;color:var(--dim);margin-top:2px}
.pf-bio{font-size:12px;color:var(--txt);margin-top:6px;line-height:1.55}
.pf-form .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-form .fld{margin-bottom:8px}
.pf-form textarea{min-height:72px;max-height:140px;resize:vertical;width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--txt);font-family:var(--mono);font-size:12.5px;padding:9px 11px}
.pf-hint{font-size:10.5px;color:var(--dim);line-height:1.5;margin:4px 0 0}
.pf-k{display:inline-block;min-width:64px;color:var(--cyan);font-size:10px;letter-spacing:1px;text-transform:uppercase}
@media (max-width:520px){
  .pf-form .pf-grid{grid-template-columns:1fr}
  .pf-av{width:52px;height:52px;flex-basis:52px;font-size:18px}
}


/* FX menu rules moved to unified block at end */
body.rain-fx #btnFx.on, #btnFx.on{color:var(--cyan)}

/* View / Share / Download — one horizontal row */
.c-views, .th.c-views{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  line-height: 1.2;
  min-width: 0;
}
.c-views .stat-line{
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.c-views .stat-line i{
  width: 11px;
  text-align: center;
  flex-shrink: 0;
  font-size: 10px;
  opacity: .9;
}
.c-views .stat-line i.fa-eye{ color: var(--cyan); }
.c-views .stat-line i.fa-share-nodes{ color: var(--mag); }
.c-views .stat-line i.fa-download{ color: var(--green, #00ff9f); }
.c-views .view-n, .c-views .share-n, .c-views .dl-n{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--txt);
  min-width: 0.9em;
}
.c-views .share-n.is-hot, .c-views .dl-n.is-hot, .c-views .view-n.is-hot{ color: var(--neon); }
.c-views .share-n.is-warm, .c-views .dl-n.is-warm, .c-views .view-n.is-warm{ color: var(--amber); }
.c-views .view-zero{ color:#2a3848; font-weight:500; }
.th.c-views{
  flex-direction: row !important;
  gap: 4px !important;
  justify-content: flex-start !important;
}
/* Override older vertical rules that conflict */
#rows.view-details .c-views{
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Usage analysis in folder stats */
.ds-usage-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.ds-usage-row{
  display:grid;grid-template-columns:28px 1fr auto auto;gap:8px;align-items:center;
  padding:5px 6px;border:1px solid var(--line);font-size:11px;
}
.ds-usage-row .an-rank{color:var(--neon);font-weight:700}
.ds-usage-row .an-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.ds-usage-row .an-metrics{color:var(--dim);font-size:10px;white-space:nowrap}
.ds-usage-row .an-metrics i{margin-left:4px;opacity:.85}
.ds-usage-row .an-score{color:var(--cyan);font-weight:700;min-width:2.2em;text-align:right}
.ds-insight{margin:10px 0 0;font-size:11px;color:var(--dim);line-height:1.5}
.ds-insight b{color:var(--neon)}


/* Time-series charts */
.ts-root{width:100%;max-width:640px;margin:0 auto;text-align:left}
.ts-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.ts-kpi{border:1px solid var(--line);padding:8px 10px;background:var(--bg)}
.ts-kpi span{display:block;font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.ts-kpi b{font-size:18px;color:var(--neon);font-family:var(--disp)}
.ts-kpi small{display:block;font-size:10px;color:var(--dim)}
.ts-bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding:8px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.ts-bar-wrap{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.ts-bar{width:100%;max-width:14px;background:linear-gradient(180deg,var(--cyan),var(--neon));min-height:2px;border-radius:2px 2px 0 0;opacity:.9}
.ts-bar.ts-stack{display:flex;flex-direction:column-reverse;padding:0;background:transparent;gap:1px}
.ts-bar.ts-stack i{display:block;width:100%;min-height:1px}
.ts-d{font-size:8px;color:var(--dim);transform:rotate(-45deg);transform-origin:center;height:12px;overflow:hidden}
.ts-top{margin-top:8px}
.ts-legend{display:flex;gap:12px;font-size:10px;color:var(--dim);margin-top:6px}
.ts-legend i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:middle}

.ts-chart-box{
  width:100%;height:160px;margin-bottom:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.25);
}
.ts-chart-box canvas{display:block;width:100%;height:160px}


/* RAIN FULL SCREEN FORCE */
#rain, #rain.is-on, canvas#rain {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
  width: 100dvw !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important;
  contain: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
}


/* ========== UNIFIED: FX + Theme dropdowns (2-col, tidy) ========== */
.fx-menu-wrap{
  position:relative;
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
  z-index:auto; /* was 60 — sat above #loading and looked undimmed during SCANNING */
}
.fx-menu-wrap:has(.fx-menu.open){
  z-index: 30; /* only elevate while menu open (still below modal if any) */
}
.fx-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  bottom:auto;
  z-index:9999;
  box-sizing:border-box;
  width:min(400px, 94vw);
  max-height:min(55vh, 360px);
  overflow-x:hidden;
  overflow-y:auto;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line2);
  box-shadow:0 -10px 36px rgba(0,0,0,.6);
  scrollbar-width:thin;
}
.fx-menu.open{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 4px;
  align-content:start;
}
.fx-menu .fx-item{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:6px 8px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:var(--txt);
  font:11px/1.25 var(--mono);
  text-align:left;
  cursor:pointer;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fx-menu .fx-item .fx-em{ flex:0 0 1.2em; text-align:center; }
.fx-menu .fx-item:hover{ background:rgba(252,238,10,.08); color:var(--neon); }
.fx-menu .fx-item.on{ background:rgba(0,240,255,.1); color:var(--cyan); }
.fx-menu .fx-off,
.fx-menu .fx-sep,
.fx-menu .fx-h{
  grid-column:1 / -1;
}
.fx-menu .fx-off{
  border-top:1px solid var(--line);
  margin-top:4px;
  padding-top:4px;
}

/* ================================================================
   FIX: dropdown FX "hilang keluar layar" di HP.
   Sebab: .fx-menu-wrap ada DI DALAM .tools, dan pada ≤760px .tools
   diberi overflow-x:auto + overflow-y:hidden (supaya strip ikon bisa
   digeser) — ini membuat browser MEMOTONG (clip) apa pun yang
   posisinya absolute dan melebihi kotak .tools, termasuk dropdown FX.
   Solusi: pada layar sempit, .fx-menu dijadikan position:fixed (lepas
   dari kotak overflow induknya) TAPI posisi persisnya (left/top) tetap
   dihitung & di-set oleh JS (placeFxMenuPosition, lihat index.js) agar
   dropdown selalu nempel tepat di bawah tombol FX — bukan disatukan ke
   satu titik tetap di layar. left/top di sini hanyalah fallback jika
   JS gagal jalan.
   PENTING: selector di sini SENGAJA cuma ".fx-menu" (bukan
   ".fx-menu-wrap .fx-menu"). index.js sekarang memindahkan #fxMenu
   jadi anak langsung <body> ("portal") selama mode ini aktif, supaya
   containing block-nya dijamin viewport apa pun CSS di ancestor lain
   (lihat openFxMenu). Kalau selector ini tetap disyaratkan turunan
   .fx-menu-wrap, begitu dipindah ke <body> rule ini akan berhenti
   berlaku dan .fx-menu diam-diam jatuh balik ke position:absolute
   (salah, sebab koordinat yang dihitung JS berbasis viewport untuk
   position:fixed). */
@media (max-width: 1024px) {
  .fx-menu{
    position: fixed !important;
    right: auto;
    bottom: auto;
    /* fallback sebelum JS sempat menghitung posisi persis */
    left: 12px;
    top: 60px;
    width: min(420px, 92vw);
    max-width: 92vw;
    max-height: min(60vh, 420px);
    box-shadow: 0 12px 40px rgba(0,0,0,.65);
  }
  /* .open-up (dropdown dibuka ke atas karena ruang di bawah sempit)
     posisinya (top/bottom) sepenuhnya diatur inline oleh JS
     (placeFxMenuPosition) — CSS tidak perlu override apa pun di sini */
}

/* Theme menu: 2 columns, open DOWN by default */
.theme-menu-wrap{
  position:relative;
  flex:0 0 auto;
  overflow:visible;
}
.theme-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  bottom:auto;
  z-index:9999;
  box-sizing:border-box;
  width:min(400px, 94vw);
  max-height:min(55vh, 360px);
  overflow-x:hidden;
  overflow-y:auto;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line2);
  box-shadow:0 12px 40px rgba(0,0,0,.65);
  scrollbar-width:thin;
  animation:none;
}
.theme-menu.open{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:2px 4px;
  align-content:start;
}
.theme-menu .vm-h,
.theme-menu .vm-sep{
  grid-column:1 / -1;
}
.theme-menu .vm-it{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:7px 10px;
  border:0;
  background:transparent;
  color:var(--txt);
  font:12px var(--mono);
  text-align:left;
  cursor:pointer;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.theme-menu .vm-it:hover{ background:rgba(252,238,10,.07); color:#fff; }
.theme-menu .vm-it.on{ background:rgba(0,240,255,.08); color:#fff; box-shadow:inset 2px 0 0 var(--cyan); }

@media (max-width:480px){
  .fx-menu.open, .theme-menu.open{
    grid-template-columns:1fr;
    width:min(260px, 94vw);
  }
}

/* DL-FIX: continuous MODE|ACTION divider (full cell height, head + body) */
.tbl-head .th.c-act,
#rows.view-details .c-act{
  border-left:1px solid var(--line2) !important;
  align-self:stretch !important;
  box-shadow:none;
}
.tbl-head .th.c-perm,
#rows.view-details .c-perm{
  border-right:none !important;
}
/* Divider meets outer panel edge only at the far right — ACTION is last column */


/* ==========================================================================
   DL-FIX: 1366×768 (+ preview) — keep Details neat without breaking 1920
   Available width ~1366; with preview (~220–240) table ≈ 1000–1100px
   ========================================================================== */

/* --- Laptop 1281–1500: slightly tighter tracks, still all columns --- */
@media (max-width: 1500px) and (min-width: 1281px) {
  :root {
    --c-name: minmax(90px, 0.65fr);
    --c-ket: minmax(70px, 0.8fr);
    --c-views: 112px;
    --c-code: 58px;
    --c-auth: 120px;
    --c-size: 72px;
    --c-date: 108px;
    --c-mode: 70px;
    --c-action: 148px;
    --table-min: 1080px;
  }
  body.admin {
    --c-action: 248px;
    --table-min: 1200px;
  }
  body:not(.admin) {
    --c-action: 140px;
    --table-min: 1040px;
  }
}

/* --- Classic 1366 and below: prioritize readable name + action --- */
@media (max-width: 1366px) {
  :root {
    --c-name: minmax(90px, 0.6fr);
    --c-ket: 0px;
    --c-views: 100px;
    --c-code: 56px;
    --c-auth: 110px;
    --c-size: 68px;
    --c-date: 100px;
    --c-mode: 68px;
    --c-action: 140px;
    --table-min: 980px;
  }
  body.admin {
    --c-sel: 32px;
    --c-action: 232px;
    --table-min: 1100px;
  }
  body:not(.admin) {
    --c-sel: 0px;
    --c-action: 132px;
    --table-min: 920px;
  }
  /* KET track collapsed on 1366 */
  .c-ket, .th.c-ket {
    display: none !important;
  }
  .c-sub { display: block; }
  .c-act .ai {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 10px;
  }
}

/* --- Preview ON at desktop: narrower pane, keep columns aligned --- */
body.preview-on {
  --c-ket: 0px !important;
}
body.preview-on .c-ket,
body.preview-on .th.c-ket {
  display: none !important;
}
body.preview-on .preview-pane {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 26vw !important;
  min-width: 200px !important;
}
body.preview-on .browse-split.has-preview .tbl-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: auto !important;
}
body.preview-on .tbl-head,
body.preview-on #rows.view-details .row {
  width: max(100%, var(--table-min)) !important;
  min-width: var(--table-min) !important;
}

/* --- 1366 + Preview: aggressive but ordered collapse --- */
@media (max-width: 1366px) {
  body.preview-on {
    --c-views: 0px !important;
    --c-code: 52px !important;
    --c-auth: 96px !important;
    --c-size: 64px !important;
    --c-date: 92px !important;
    --c-mode: 64px !important;
    --c-name: minmax(80px, 0.55fr) !important;
    --c-action: 128px !important;
    --table-min: 860px !important;
  }
  body.preview-on.admin {
    --c-action: 210px !important;
    --table-min: 980px !important;
  }
  body.preview-on:not(.admin) {
    --c-action: 120px !important;
    --table-min: 820px !important;
  }
  body.preview-on .c-views,
  body.preview-on .th.c-views {
    display: none !important;
  }
  body.preview-on .preview-pane {
    flex: 0 0 210px !important;
    width: 210px !important;
    max-width: 24vw !important;
    min-width: 180px !important;
  }
  body.preview-on .c-sub { display: block !important; }
  body.preview-on .c-act .ai {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 10px !important;
  }
}

/* --- ≤1280 + Preview: stack or hide more secondary cols --- */
@media (max-width: 1280px) {
  body.preview-on {
    --c-auth: 0px !important;
    --c-mode: 0px !important;
    --c-code: 0px !important;
    --c-size: 0px !important;
    --c-date: 0px !important;
    --c-name: minmax(0, 1fr) !important;
    --table-min: 0px !important;
  }
  body.preview-on .c-author,
  body.preview-on .c-perm,
  body.preview-on .c-code,
  body.preview-on .c-size,
  body.preview-on .c-date,
  body.preview-on .th.c-author,
  body.preview-on .th.c-perm,
  body.preview-on .th.c-code,
  body.preview-on .th.c-size,
  body.preview-on .th.c-date {
    display: none !important;
  }
  body.preview-on.admin { --c-action: 200px !important; }
  body.preview-on:not(.admin) { --c-action: 112px !important; }
}

@media (max-width: 900px) {
  body.preview-on .browse-split.has-preview {
    flex-direction: column !important;
  }
  body.preview-on .preview-pane {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    max-height: 36vh !important;
  }
}

/* DL-FIX: balanced columns — wider AUTHOR + MODIFIKASI, no right dead space */
:root{
  --c-name: minmax(120px, 1fr) !important;
  --c-ket: 0px !important;
  --c-views: 118px !important;
  --c-code: 64px !important;
  --c-auth: 220px !important;
  --c-size: 84px !important;
  --c-date: 152px !important;
  --c-mode: 76px !important;
  --c-action: 148px !important;
  --table-min: 1210px !important;
}
body.admin{
  --c-sel: 36px !important;
  --c-action: 268px !important;
  --table-min: 1330px !important;
}
body:not(.admin){
  --c-sel: 0px !important;
  --c-action: 148px !important;
  --table-min: 1170px !important;
}
/* Head + rows always fill the wrap; leftover width goes to NAMA (1fr) */
.tbl-head,
#rows.view-details .row{
  width: 100% !important;
  min-width: var(--table-min) !important;
  max-width: none !important;
  grid-template-columns: var(--cols) !important;
  justify-content: stretch !important;
}
.tbl-wrap.details-on{
  overflow: auto !important;
}
/* Hide empty KET track (still in --areas for stability) */
.c-ket, .th.c-ket{ display: none !important; }
/* Name ellipsis only */
.c-name, .th.c-name, .th-name{ min-width: 0 !important; overflow: hidden !important; }
.c-name .nm, .c-name .nm-text{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* AUTHOR + MODIFIKASI readable */
.c-author, .th.c-author{ min-width: 0; overflow: hidden; }
.c-author span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-date, .th.c-date{
  white-space: nowrap;
  overflow: visible;
}

/* 1366: still balanced */
@media (max-width: 1366px){
  :root{
    --c-auth: 196px !important;
    --c-date: 140px !important;
    --c-views: 108px !important;
    --c-size: 76px !important;
    --c-mode: 70px !important;
    --c-action: 140px !important;
    --table-min: 1000px !important;
  }
  body.admin{
    --c-action: 232px !important;
    --table-min: 1120px !important;
  }
  body:not(.admin){
    --c-action: 132px !important;
    --table-min: 960px !important;
  }
}
@media (max-width: 1366px){
  body.preview-on{
    --c-auth: 172px !important;
    --c-date: 128px !important;
    --c-action: 128px !important;
    --table-min: 880px !important;
  }
  body.preview-on.admin{
    --c-action: 210px !important;
    --table-min: 1000px !important;
  }
}

/* DL-FIX: FX + Theme menus open DOWN by default; .open-up flips when space is tight */
.fx-menu,
.theme-menu{
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.65) !important;
}
.fx-menu.open-up,
.theme-menu.open-up{
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,.65) !important;
}

/* DL-FIX: scanning lock — FX stays under #loading and looks equally dimmed */
body.is-scanning .fx-menu-wrap{
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1; /* overlay provides the dim; don't double-fade only FX */
}
body.is-scanning .theme-menu-wrap,
body.is-scanning #viewMenuWrap{
  z-index: 0 !important;
  pointer-events: none !important;
}
body.is-scanning .fx-menu,
body.is-scanning .theme-menu,
body.is-scanning .view-menu{
  display: none !important;
}
/* If any chrome control sits above overlay, match loading dim */
body.is-scanning #btnFx,
body.is-scanning #btnTheme,
body.is-scanning #btnView,
body.is-scanning #btnRain,
body.is-scanning #btnRainLove,
#btnFx[disabled],
#btnTheme[disabled],
#btnView[disabled],
.tbtn[disabled],
.tbtn.is-disabled{
  opacity: 0.4 !important;
  filter: grayscale(0.35) brightness(0.7) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
/* Ensure loading covers tools row stacking */
#loading{
  z-index: 8 !important;
}

/* DL-FIX: admin ACTION width final — must beat earlier 148px tokens */
body.admin,
body.role-admin,
body.mode-admin{
  --c-action: 292px !important;
  --table-min: 1360px !important;
  --c-sel: 36px !important;
}
body.mode-live:not(.admin):not(.role-admin),
body:not(.admin):not(.role-admin):not(.mode-admin){
  --c-action: 148px !important;
  --table-min: 1140px !important;
  --c-sel: 0px !important;
}
body.admin #rows.view-details .c-act,
body.role-admin #rows.view-details .c-act,
body.mode-admin #rows.view-details .c-act,
body.admin .tbl-head .th.c-act,
body.role-admin .tbl-head .th.c-act,
body.mode-admin .tbl-head .th.c-act{
  min-width: 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
body.admin #rows.view-details .c-act .ai,
body.mode-admin #rows.view-details .c-act .ai{
  flex: 0 0 26px !important;
}
@media (max-width: 1366px){
  body.admin, body.role-admin, body.mode-admin{
    --c-action: 260px !important;
    --table-min: 1220px !important;
  }
  body.mode-live:not(.admin),
  body:not(.admin):not(.role-admin){
    --c-action: 136px !important;
  }
}


/* ===== DONATE modal — professional 2-col layout + leaderboard ===== */
.btn-donate{color:#ff8fab!important;border-color:rgba(255,100,130,.35)!important}
.btn-donate:hover{background:rgba(255,80,120,.12)!important;border-color:rgba(255,120,150,.55)!important;color:#ffb3c6!important}
.btn-donate i{color:#ff6b8a}

#shell.is-donate .shell-panel.shell-donate,
#shell .shell-panel.shell-donate{
  width:min(1200px,98vw)!important;
  max-height:min(96vh,96dvh);
}
#shell.is-donate .shell-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.donate-root{
  width:100%;
  max-width:100%;
  text-align:center;
  margin:0 auto;
  padding:0 2px 8px;
}
.donate-hero{
  width:64px;height:64px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,100,130,.45);color:#ff8fab;font-size:26px;
  background:linear-gradient(145deg,rgba(255,80,120,.12),rgba(252,238,10,.04));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.donate-msg{font-size:13px;line-height:1.7;color:var(--txt);margin:0 0 14px;text-align:center}
.donate-thanks{font-size:11px;color:var(--dim);margin:16px 0 0;letter-spacing:.3px;line-height:1.6}

/* Two-column: payment | leaderboard */
.donate-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(240px,0.85fr);
  gap:14px;
  align-items:start;
  text-align:left;
}
.donate-col-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.donate-board{
  position:sticky;top:0;
  border:1px solid rgba(252,238,10,.3);
  background:linear-gradient(165deg,rgba(252,238,10,.07),rgba(0,0,0,.28));
  padding:12px 14px 14px;
  border-radius:2px;
  min-width:0;
  max-height:min(70vh,560px);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.donate-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:10px;
}
.donate-board .donate-card-lab{margin-bottom:0;color:var(--neon)}
.donate-board .donate-card-lab i{color:var(--neon)}
.donate-board-refresh{
  width:28px;height:28px;padding:0;border:1px solid var(--line2);
  color:var(--dim);background:transparent;cursor:pointer;border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.donate-board-refresh:hover{border-color:var(--neon);color:var(--neon)}
.donate-board-n{
  font-size:9px;letter-spacing:1px;padding:2px 7px;margin-left:6px;
  border:1px solid rgba(252,238,10,.35);color:var(--neon);border-radius:2px;
  vertical-align:middle;
}
.donate-board-sum{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-bottom:12px;
}

.donate-board-sum-4{grid-template-columns:repeat(2,1fr)!important}
@media (min-width:900px){
  .donate-board-sum-4{grid-template-columns:repeat(2,1fr)!important}
}
.donate-live-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green);margin-left:6px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(0,255,159,.5);
  animation:donatePulse 1.6s ease-out infinite;
}
@keyframes donatePulse{
  0%{box-shadow:0 0 0 0 rgba(0,255,159,.45)}
  70%{box-shadow:0 0 0 8px rgba(0,255,159,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,159,0)}
}
.donate-board-kpi .v{word-break:break-all;font-size:11px}

.donate-board-kpi{
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  padding:8px 6px;text-align:center;border-radius:2px;
}
.donate-board-kpi .k{display:block;font-size:9px;letter-spacing:1px;color:var(--dim);margin-bottom:4px;text-transform:uppercase}
.donate-board-kpi .v{font:600 12px/1.2 var(--mono);color:var(--cyan)}
.donate-board-list{
  list-style:none;margin:0;padding:0;text-align:left;
  overflow-y:auto;flex:1;min-height:0;
  scrollbar-width:thin;
}
.donate-board-list li,
.donate-board-row{
  display:flex;align-items:center;gap:8px;padding:8px 2px;
  border-bottom:1px solid var(--line);font-size:12px;
}
.donate-board-list li:last-child{border-bottom:0}
.donate-board-list .rk{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);color:var(--neon);font-size:11px;font-weight:700;
  border-radius:2px;flex:0 0 auto;font-family:var(--mono);line-height:1;
}
.donate-board-list .nm{
  flex:1;color:#eef4fa;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.donate-board-list .am{font-family:var(--mono);color:var(--cyan);font-weight:600;flex:0 0 auto;font-size:11px}
.donate-board-cnt{
  margin-left:5px;font-size:9px;color:var(--dim);border:1px solid var(--line2);
  padding:1px 4px;border-radius:2px;vertical-align:middle;
}
.donate-board-row.rank-1 .rk,
.donate-board-list li:nth-child(1) .rk{
  border-color:var(--neon);background:var(--neon);color:#000;
}
.donate-board-row.rank-2 .rk,
.donate-board-list li:nth-child(2) .rk{
  border-color:rgba(200,200,220,.55);color:#e8e8f0;background:rgba(200,200,220,.12);
}
.donate-board-row.rank-3 .rk,
.donate-board-list li:nth-child(3) .rk{
  border-color:rgba(205,127,50,.65);color:#cd7f32;background:rgba(205,127,50,.12);
}
.donate-board-empty{
  text-align:center;padding:28px 10px 16px;color:var(--dim);font-size:12px;line-height:1.7;
}
.donate-board-empty i{display:block;font-size:22px;margin-bottom:8px;color:var(--neon);opacity:.85}
.donate-board-empty p{margin:0}

.donate-card{
  border:1px solid var(--line2);background:rgba(0,0,0,.28);padding:14px 16px;border-radius:2px;
  text-align:left;margin:0;
}
.donate-card-lab{
  font-size:10px;letter-spacing:1.5px;color:var(--dim);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.donate-card-lab i{color:#ff8fab}
.donate-gw-pill{
  font-size:9px;letter-spacing:1px;padding:3px 8px;border:1px solid rgba(0,240,255,.35);
  color:var(--cyan);border-radius:2px;margin-left:4px;
}
.donate-amts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.donate-amt{
  font:11px var(--mono);padding:8px 12px;border:1px solid var(--line2);background:rgba(11,16,21,.8);
  color:var(--dim2);cursor:pointer;border-radius:2px;letter-spacing:.3px;
}
.donate-amt:hover{border-color:rgba(255,120,150,.45);color:#ffb3c6}
.donate-amt.on{border-color:#ff8fab;color:#ffb3c6;background:rgba(255,80,120,.12)}
.donate-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.donate-fields .fld:nth-child(1),
.donate-fields .fld:nth-child(4){grid-column:1/-1}
.donate-fields .fld span{font-size:9px;letter-spacing:1.5px;color:var(--dim);display:block;margin-bottom:4px}
.donate-fields .fld input{
  width:100%;background:var(--bg2);border:1px solid var(--line2);color:#eef4fa;
  font:13px var(--mono);padding:10px 12px;outline:none;caret-color:var(--neon);
}
.donate-fields .fld input:focus{border-color:rgba(255,120,150,.5)}
.donate-pay-btn{width:100%;justify-content:center;padding:12px 16px!important;font-size:12px!important}
.donate-pay-btn:disabled{opacity:.6;cursor:wait}
.donate-card-hint{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.5}

.donate-manual-title{
  display:flex;align-items:center;gap:10px;margin:4px 0 8px;font-size:9px;letter-spacing:2px;color:var(--dim);
}
.donate-manual-title::before,.donate-manual-title::after{content:'';flex:1;height:1px;background:var(--line)}
.donate-manual-title span{white-space:nowrap}
.donate-manual-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;text-align:left;
}
.donate-manual-grid .donate-card{margin:0;height:100%}
.donate-qris{text-align:center}
.donate-qris img{
  max-width:min(180px,55vw);width:100%;height:auto;border:1px solid var(--line);
  background:#fff;padding:8px;border-radius:4px;
}
.donate-bank-text{
  margin:0 0 10px;font:12px/1.6 var(--mono);color:#eef4fa;white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.25);border:1px solid var(--line);padding:10px 12px;
}
.donate-links{display:flex;flex-direction:column;gap:6px}
.donate-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--line2);background:rgba(11,16,21,.7);color:var(--txt);
  text-decoration:none;font-size:12px;letter-spacing:.3px;transition:.15s;
}
.donate-link:hover{border-color:rgba(255,120,150,.5);color:#ffb3c6;background:rgba(255,80,120,.08)}
.donate-link i:first-child{width:18px;text-align:center;color:#ff8fab}
.donate-ext{margin-left:auto;font-size:10px;opacity:.5}

.donate-ew-num{font:15px/1.4 var(--mono);color:#fff;letter-spacing:.5px;margin:4px 0}
.donate-ew-name{font-size:12px;color:var(--dim);margin-bottom:8px}
.donate-ew-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.donate-ew-dana .donate-card-lab i{color:#0a8cff}
.donate-ew-ovo .donate-card-lab i{color:#a855f7}

.donate-setup-list{margin:10px 0 0;padding-left:18px;text-align:left;font-size:11px;line-height:1.7;color:var(--dim)}
.donate-setup-list code{color:var(--cyan);font-size:10px}
.donate-empty{border-color:rgba(252,238,10,.25)}

/* Responsive: stack leaderboard below on tablet/phone */
@media (max-width:820px){
  .donate-layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .donate-board{
    position:static;
    max-height:none;
    order:2;
  }
  .donate-col-main{order:1}
  #shell.is-donate .shell-panel.shell-donate,
  #shell .shell-panel.shell-donate{
    width:min(100vw,100%)!important;
    max-height:min(100vh,100dvh)!important;
  }
}
@media (max-width:560px){
  .donate-fields{grid-template-columns:1fr}
  .donate-fields .fld:nth-child(1),
  .donate-fields .fld:nth-child(4){grid-column:auto}
  .donate-board-sum{grid-template-columns:repeat(3,1fr)}
  .donate-hero{width:56px;height:56px;font-size:22px}
  .donate-msg{font-size:12px}
}


.fld-hint{margin-top:4px;font:10px/1.3 var(--mono);color:var(--dim);text-align:right}
.fld-hint span.warn{color:var(--amber,#fc0)}
.fld-hint span.err{color:var(--red,#f66)}
textarea#askKet,textarea#mkKet{min-height:64px;resize:vertical;width:100%}


/* ===== Mobile tools (≤820) =====
   Sistem overflow lama ("tools-more-wrap" / #btnToolsMore) sudah
   digantikan oleh sistem "Lainnya" (.more-menu-wrap / #btnMore) di
   bawah, jadi blok lama sudah dihapus supaya tidak ada 2 tombol
   "..." yang bentrok pada layar mobile. */

/* ===== TOUCH / POINTER COARSE — layar sentuh ===== */
html.is-touch,
html.is-touch body{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html.is-touch,
html.is-touch body{
  /* Block native browser pull-to-refresh; list handles its own rescan */
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}
html.is-touch body{
  /* Keep document from competing with .tbl-wrap scroll */
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}

/* Target minimum ~44px (Apple HIG / Material) */
@media (hover: none), (pointer: coarse){
  .tbtn,.vbtn{
    width:40px;height:40px;min-width:40px;min-height:40px;
    font-size:14px;
  }
  /* On narrow phones keep compact tools so Sound is not clipped */
  @media (max-width: 820px){
    .toolbar > .tools > .tbtn,
    .toolbar > .tools > a.tbtn,
    .toolbar > .tools > .fx-menu-wrap > .tbtn,
    .toolbar .tbtn, .toolbar .vbtn{
      width:36px !important;height:36px !important;
      min-width:36px !important;min-height:36px !important;
      flex:0 0 36px !important;
    }
  }
  .btn{
    min-height:44px;
    padding:10px 14px;
  }
  .hright .btn{
    width:44px;height:44px;min-width:44px;min-height:44px;
    padding:0;
  }
  .row{
    min-height:52px;
  }
  .c-act .ai,
  .ai{
    width:40px;height:40px;min-width:40px;min-height:40px;
    font-size:14px;
  }
  .toolbar{gap:8px;padding:10px 12px}
  .search-box{height:44px;padding:0 14px}
  .search-box input{font-size:16px} /* cegah zoom iOS saat fokus */
  .tools,.view-group,.theme-menu-wrap,.view-menu-wrap,.toolbar-mid{
    min-height:44px;
  }
  .hm-it,.vm-it,.fx-item,.pal-it{
    min-height:44px;padding:12px 14px;
  }
  .crumb{padding:8px 4px;min-height:40px}
  .shell-x,.shell-btn{
    min-width:44px;min-height:44px;
  }

  /* Feedback sentuh (hover tidak andal di touch) */
  .tbtn:active,.vbtn:active,.btn:active,.ai:active,.row:active,.tile-x:active{
    background:rgba(252,238,10,.12);
    color:var(--neon);
  }
  .row:active::before,.tile-x:active::before{
    transform:scaleY(1);
  }

  /* Scroll area — mulus di mobile, tanpa native PTR */
  #rows,.shell-body,.tbl-wrap,.view-menu,.theme-menu,.fx-menu{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y: none;
    overscroll-behavior-x: contain;
  }
  .tbl-wrap{
    /* Primary scroll surface (ListEngine + TouchSwipe) */
    overscroll-behavior-y: none;
    touch-action: pan-y;
    /* Promote compositor layer for smoother scroll */
    transform: translateZ(0);
    will-change: scroll-position;
  }

  /* Dropdown full-width-ish di HP */
  .view-menu,.theme-menu,.fx-menu{
    max-height:min(70vh, 420px);
    overflow-y:auto;
  }
}

/* Pointer events + manipulation pada kontrol interaktif */
.tbtn,.vbtn,.btn,.ai,.crumb,.row,.tile-x,.vm-it,.hm-it,.fx-item,.pal-it,
button,a.btn,a.tbtn,[role="button"],[role="menuitem"]{
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.search-box input,
input,textarea,select,[contenteditable="true"]{
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

/* Safe area (notch / home indicator) */
@supports (padding: max(0px)){
  body{
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  header{
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .panel-foot, footer.panel-foot, .footer{
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  #shell .shell-panel, .shell-panel{
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }
}

/* Cegah double-tap zoom pada kontrol, izinkan pinch di konten jika perlu */
html.is-touch .tools,
html.is-touch .toolbar,
html.is-touch header{
  touch-action: manipulation;
}



/* ===== Tile thumbs: lazy + GPU-friendly (Patch 08d) ===== */
#rows.view-tiles .tx-media{
  /* fixed media box so layout does not shift when thumb arrives */
  contain: strict;
  isolation: isolate;
  background: var(--bg2);
}
#rows.view-tiles .tx-thumb{
  width: var(--tile-media);
  height: var(--tile-media);
  object-fit: cover;
  object-position: center;
  display: block;
  border: none;
  /* avoid full-res sampling cost before ready */
  image-rendering: auto;
  background: var(--bg2);
  opacity: 0;
  transition: opacity .18s ease;
  /* do not promote every thumb — only when ready */
  transform: translateZ(0);
  backface-visibility: hidden;
  content-visibility: auto;
  contain-intrinsic-size: var(--tile-media) var(--tile-media);
}
#rows.view-tiles .tx-thumb[data-state="in"],
#rows.view-tiles .tx-thumb.tx-thumb-ready{
  opacity: 1;
}
#rows.view-tiles .tx-thumb[data-state="loading"]{
  opacity: .35;
}
#rows.view-tiles .tx-thumb[data-state="out"],
#rows.view-tiles .tx-thumb:not([data-state]){
  opacity: 0;
  image-rendering: pixelated;
}
/* During fling: freeze thumb paint work */
.tbl-wrap.is-scrolling #rows.view-tiles .tx-thumb{
  transition: none;
}
.tbl-wrap.is-scrolling #rows.view-tiles .tile-x:hover .tx-media{
  transform: none;
  box-shadow: none;
}
@media (hover: none), (pointer: coarse){
  #rows.view-tiles .tx-thumb{
    transition: opacity .12s ease;
  }
  /* slightly smaller decode target via CSS var already; reduce hover scale cost */
  #rows.view-tiles .tile-x:hover .tx-media{
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce){
  #rows.view-tiles .tx-thumb{ transition: none; opacity: 1; }
}

/* ===== Tiles virtualization (ListEngine grid window) ===== */
#rows.view-tiles.is-virt-tiles{
  /* host keeps padding/gap tokens; actual grid moves to .virt-window-tiles */
  display: block;
  position: relative;
  contain: layout style;
}
#rows.view-tiles.is-virt-tiles .virt-space-tiles{
  position: relative;
  width: 100%;
  pointer-events: none;
  contain: size layout style;
}
#rows.view-tiles.is-virt-tiles .virt-window-tiles{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  /* columns set inline by JS to match computed col count */
  display: grid;
  align-content: start;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout style;
  padding: 0;
}
#rows.view-tiles.is-virt-tiles .virt-window-tiles .tile-x{
  content-visibility: visible;
  contain: layout style;
  /* disable hover lift during fling (parent .is-scrolling) to cut paint */
  will-change: auto;
}
.tbl-wrap.is-scrolling #rows.view-tiles.is-virt-tiles .tile-x:hover{
  transform: none;
  box-shadow: none;
}
.tbl-wrap.is-scrolling #rows.view-tiles.is-virt-tiles .virt-window-tiles{
  will-change: transform;
}
.tbl-wrap:not(.is-scrolling) #rows.view-tiles.is-virt-tiles .virt-window-tiles{
  will-change: auto;
}
@media (hover: none), (pointer: coarse){
  #rows.view-tiles.is-virt-tiles .virt-window-tiles .tile-x{
    transition: none;
  }
}

/* ===== ListEngine virtualization + GPU compositing (Patch 08b) ===== */
#rows.is-virt{
  /* content is spacer-driven; avoid nested scroll */
  overflow: visible !important;
  position: relative;
  contain: layout style;
}
#rows.is-virt .virt-space{
  position: relative;
  width: 100%;
  /* spacer only — no paint layer of its own beyond size */
  contain: size layout style;
  pointer-events: none;
}
#rows.is-virt .virt-window{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  pointer-events: auto;
  /* GPU: move window with transform only (set in JS) */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout style;
}
/* Rows inside virtual window: do NOT promote each row (memory bomb) */
#rows.is-virt .virt-window .row{
  content-visibility: visible; /* already windowed — CV overhead not needed */
  contain: layout style;
  transform: none;
  will-change: auto;
}
/* While finger/wheel scrolling: arm compositor on surface only */
.tbl-wrap.is-scrolling{
  /* hint browser without permanent will-change leak */
  will-change: scroll-position;
}
.tbl-wrap.is-scrolling #rows.is-virt .virt-window{
  will-change: transform;
}
.tbl-wrap:not(.is-scrolling) #rows.is-virt .virt-window{
  will-change: auto;
}
/* Sticky header stays on its own layer when stuck */
.tbl-head.is-stuck{
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (hover: none), (pointer: coarse){
  #rows.is-virt .virt-window .row{
    min-height: 48px;
  }
  body[data-density="compact"] #rows.is-virt .virt-window .row{ min-height: 44px; }
  body[data-density="comfy"] #rows.is-virt .virt-window .row{ min-height: 56px; }
  /* Prefer fewer paint regions while flinging */
  .tbl-wrap.is-scrolling #rows.is-virt .row:active{
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce){
  #rows.is-virt .virt-window{
    /* still use transform for positioning, but no extra motion */
    transition: none !important;
  }
}

/* ===== Mobile scroll performance (Patch 08) ===== */
html.is-touch main,
html.is-touch .panel{
  /* isolate layout so row updates don't dirty whole page */
  contain: layout style;
}
/* FIX: dropdown FX "hilang" di HP.
   Sebab: contain:layout (di atas) membuat main/.panel jadi containing
   block BARU untuk keturunan position:fixed — sama seperti transform.
   #fxMenu sengaja dibuat position:fixed !important di ≤1024px (lihat
   blok "FIX: dropdown FX hilang keluar layar" di atas) supaya lolos
   dari overflow-clip .tools, dan posisinya dihitung JS lewat
   getBoundingClientRect() yang berbasis koordinat VIEWPORT
   (placeFxMenuPosition, index.js). Begitu main/.panel jadi containing
   block, fixed tsb tidak lagi mengacu ke viewport, sehingga
   left/top hasil hitungan JS jadi salah total (menu kepental keluar
   area yang terlihat).
   Solusi: saat menu FX dibuka, index.js menambah class "fx-open" ke
   <html> — di sini containment tsb dilepas sementara agar #fxMenu
   kembali fixed relatif ke viewport seperti seharusnya. Begitu ditutup,
   class dilepas dan Patch 08 (contain:layout style) aktif kembali. */
html.is-touch.fx-open main,
html.is-touch.fx-open .panel{
  contain: none !important;
}
html.is-touch .tbl-wrap{
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto; /* avoid smooth jank during finger scroll */
}
@media (hover: none) and (pointer: coarse){
  html.is-touch #rows.view-details .row,
  html.is-touch #rows .tile-x{
    /* slightly tighter intrinsic size estimate for content-visibility */
    contain-intrinsic-size: auto 52px;
  }
}

/* ===== Swipe gesture UI ===== */
.swipe-pull-hint{
  position:fixed;left:50%;top:max(12px, env(safe-area-inset-top, 0px));
  transform:translate(-50%, -20px);z-index:90;
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:rgba(14,21,28,.92);border:1px solid var(--line2);
  color:var(--dim);font-size:12px;letter-spacing:.5px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, border-color .15s, color .15s;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.swipe-pull-hint.show{opacity:1}
.swipe-pull-hint.ready{color:var(--neon);border-color:var(--neon)}
.swipe-pull-hint i{font-size:13px}

/* Scroll parent is .tbl-wrap — #rows is content, not the scroller */
html.is-touch .tbl-wrap{
  touch-action: pan-y;
  overscroll-behavior-y: none;
  isolation: isolate;
  /* scroll on compositor when possible */
  -webkit-overflow-scrolling: touch;
}
html.is-touch #rows{
  /* content inside scroller: allow vertical pan to bubble to .tbl-wrap */
  touch-action: pan-y;
  overflow: visible;
}
html.is-touch .shell-panel{
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
html.is-touch .row,
html.is-touch .tile-x{
  touch-action: pan-y;
  /* avoid per-row will-change during scroll */
  will-change: auto;
}
/* Pull hint: cheaper transition on mobile */
html.is-touch .swipe-pull-hint{
  transition: opacity .15s ease, transform .15s ease;
}
html.is-touch .swipe-pull-hint.show{
  /* slight resistance feel via CSS only when active */
}

/* ===== Page transitions — CSS fallback (anime.js primary) ===== */
@keyframes ptxOutForward{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:0;transform:translate3d(-18px,0,0)}
}
@keyframes ptxInForward{
  from{opacity:0;transform:translate3d(22px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ptxOutBack{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:0;transform:translate3d(18px,0,0)}
}
@keyframes ptxInBack{
  from{opacity:0;transform:translate3d(-22px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ptxOutFade{
  from{opacity:1;transform:translate3d(0,6px,0)}
  to{opacity:0;transform:translate3d(0,-4px,0)}
}
@keyframes ptxInFade{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

#rows.ptx-exit-forward,
#dirTitle.ptx-exit-forward,
#crumbs.ptx-exit-forward{animation:ptxOutForward .18s ease forwards}
#rows.ptx-enter-forward,
#dirTitle.ptx-enter-forward,
#crumbs.ptx-enter-forward,
#idxInfo.ptx-enter-forward{animation:ptxInForward .32s cubic-bezier(.22,.68,0,1.1) both}

#rows.ptx-exit-back,
#dirTitle.ptx-exit-back,
#crumbs.ptx-exit-back{animation:ptxOutBack .18s ease forwards}
#rows.ptx-enter-back,
#dirTitle.ptx-enter-back,
#crumbs.ptx-enter-back,
#idxInfo.ptx-enter-back{animation:ptxInBack .32s cubic-bezier(.22,.68,0,1.1) both}

#rows.ptx-exit-fade,
#dirTitle.ptx-exit-fade,
#crumbs.ptx-exit-fade{animation:ptxOutFade .16s ease forwards}
#rows.ptx-enter-fade,
#dirTitle.ptx-enter-fade,
#crumbs.ptx-enter-fade,
#idxInfo.ptx-enter-fade{animation:ptxInFade .28s ease both}

#rows.ptx-enter-forward .row,
#rows.ptx-enter-back .row,
#rows.ptx-enter-fade .row,
#rows.ptx-enter-forward .tile-x,
#rows.ptx-enter-back .tile-x,
#rows.ptx-enter-fade .tile-x{
  animation:ptxRowIn .38s ease both;
}
@keyframes ptxRowIn{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
#rows.ptx-enter-forward .row:nth-child(1),
#rows.ptx-enter-back .row:nth-child(1),
#rows.ptx-enter-fade .row:nth-child(1){animation-delay:.02s}
#rows.ptx-enter-forward .row:nth-child(2),
#rows.ptx-enter-back .row:nth-child(2),
#rows.ptx-enter-fade .row:nth-child(2){animation-delay:.04s}
#rows.ptx-enter-forward .row:nth-child(3),
#rows.ptx-enter-back .row:nth-child(3),
#rows.ptx-enter-fade .row:nth-child(3){animation-delay:.06s}
#rows.ptx-enter-forward .row:nth-child(4),
#rows.ptx-enter-back .row:nth-child(4),
#rows.ptx-enter-fade .row:nth-child(4){animation-delay:.08s}
#rows.ptx-enter-forward .row:nth-child(5),
#rows.ptx-enter-back .row:nth-child(5),
#rows.ptx-enter-fade .row:nth-child(5){animation-delay:.10s}
#rows.ptx-enter-forward .row:nth-child(n+6),
#rows.ptx-enter-back .row:nth-child(n+6),
#rows.ptx-enter-fade .row:nth-child(n+6){animation-delay:.12s}

@media (prefers-reduced-motion: reduce){
  #rows.ptx-exit-forward,#rows.ptx-enter-forward,
  #rows.ptx-exit-back,#rows.ptx-enter-back,
  #rows.ptx-exit-fade,#rows.ptx-enter-fade,
  #dirTitle.ptx-exit-forward,#dirTitle.ptx-enter-forward,
  #dirTitle.ptx-exit-back,#dirTitle.ptx-enter-back,
  #dirTitle.ptx-exit-fade,#dirTitle.ptx-enter-fade,
  #crumbs.ptx-exit-forward,#crumbs.ptx-enter-forward,
  #crumbs.ptx-exit-back,#crumbs.ptx-enter-back,
  #crumbs.ptx-exit-fade,#crumbs.ptx-enter-fade,
  #rows.ptx-enter-forward .row,#rows.ptx-enter-back .row,#rows.ptx-enter-fade .row{
    animation:none !important;
  }
}

/* Brand: mobile two-line title */
.brand-title .brand-mobile{display:none}
.brand-title .brand-full{display:inline}
.brand-title .bm-l1,
.brand-title .bm-l2{
  display:block;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
@media (max-width:820px){
  .brand-title{
    font-size:14px;letter-spacing:1px;line-height:1.15;
    max-width:min(36vw, 100px);
  }
  .brand-title .brand-full{display:none !important}
  .brand-title .brand-mobile{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    line-height:1.1;
  }
  .brand-title .bm-l1,
  .brand-title .bm-l2{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    font-weight:700;
    color:var(--neon,#fcee0a);
    text-transform:uppercase;
  }
  .brand-title .bm-l1{
    font-size:12px;
    letter-spacing:1.4px;
    opacity:.95;
  }
  .brand-title .bm-l2{
    font-size:15px;
    letter-spacing:1.6px;
  }
  .brand-sub{display:none !important}
}

/* ===== Desktop VERTICAL / portrait monitor =====
   Target: monitor tegak (mis. 1080×1920), aspect ratio ≤ 1, lebar desktop */
@media (orientation: portrait) and (min-width: 700px),
       (max-aspect-ratio: 11/13) and (min-width: 700px) and (min-height: 900px){

  :root{
    --c-sel: 32px;
    --c-ic: 36px;
    --c-name: minmax(140px, 1fr);
    --c-ket: 0px;
    --c-views: 96px;
    --c-code: 0px;
    --c-auth: 0px;
    --c-size: 72px;
    --c-date: 0px;
    --c-mode: 0px;
    --c-action: minmax(120px, 140px);
    --table-min: 0px;
  }

  /* Header lebih ringkas, brand tidak kepotong */
  header{
    height:auto;min-height:56px;
    padding:8px 14px;
    flex-wrap:nowrap;gap:10px;
  }
  .brand{flex:1 1 auto;min-width:0;max-width:55%}
  .brand-title, .glitch{
    font-size:17px;letter-spacing:1.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
  }
  /* Desktop portrait: tetap satu baris brand full (bukan layout HP) */
  .brand-title .brand-full{display:inline !important}
  .brand-title .brand-mobile{display:none !important}
  .brand-sub{
    display:block !important;
    font-size:9px;letter-spacing:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hright{
    flex:0 0 auto !important;
    flex-wrap:nowrap !important;
    justify-content:flex-end;
    gap:6px !important;
    max-width:none !important;
  }
  .hright .btn{
    padding:0 !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    justify-content:center !important;
    gap:0 !important;
    flex:0 0 38px !important;
    font-size:10px;
    overflow:hidden !important;
  }
  .hright .btn .btn-txt{display:none !important} /* icon-only — hindari "LOG" nanggung */
  .clock{display:none} /* hemat ruang horizontal */
  .status{padding:5px 8px;font-size:9px;letter-spacing:1px}
  .st-long{display:none}
  .st-short{display:inline}

  /* Main / panel isi tinggi penuh */
  main{
    padding:10px 12px 12px;
  }
  .panel{
    min-height:0;
  }
  .panel-head,.index-line{
    padding:8px 12px;
  }
  #dirTitle{font-size:16px;letter-spacing:1px}

  /* Toolbar: search fleksibel, tools wrap rapi */
  .toolbar{
    flex-wrap:wrap;
    gap:8px;
    padding:8px 12px;
  }
  .search-box{
    flex:1 1 200px;
    min-width:160px;
    max-width:100%;
  }
  .toolbar > .tools{
    margin-left:auto;
    flex-wrap:wrap;
  }

  /* Tabel: sembunyikan kolom sekunder di portrait */
  .c-ket,.c-code,.c-author,.c-date,.c-perm,
  .tbl-head .c-ket,.tbl-head .c-code,.tbl-head .c-author,
  .tbl-head .c-date,.tbl-head .c-perm{
    display:none !important;
  }
  .tbl-head, #rows.view-details .row{
    min-width:0 !important;
    width:100%;
  }
  #rows{
    overflow-x:hidden;
  }

  /* Action column tetap kebaca */
  .c-act .ai{width:34px;height:34px}

  /* Shell / modal manfaatkan tinggi */
  .shell-panel{
    max-height:min(88vh, 920px);
    width:min(96vw, 640px);
  }
  #mBody{max-height:min(70vh, 720px)}
}

/* Portrait sempit (≤900px lebar) — lebih agresif */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 900px),
       (max-aspect-ratio: 3/4) and (min-width: 700px) and (max-width: 900px){
  :root{
    --c-views: 84px;
    --c-size: 64px;
    --c-action: minmax(110px, 128px);
  }
  .hright .btn-donate .btn-txt,
  .hright a.btn .btn-txt{display:none}
  .tools .tbtn, .view-group .vbtn{
    width:36px;height:36px;
  }
}



/* ===== HELP modal (openHelp) ===== */
.help-root{text-align:left;max-height:min(78vh,82dvh);overflow:auto;padding:0 2px 8px 0;scrollbar-width:thin;width:100%;max-width:100%;box-sizing:border-box}
#shell .shell-body:has(.help-root),
#shell #mBody:has(.help-root){
  align-items:stretch!important;justify-content:flex-start!important;width:100%;
}
.help-sec-b{width:100%}
.help-keys-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.help-hero{padding:4px 2px 12px;border-bottom:1px solid var(--line2);margin-bottom:10px}
.help-hero-title{font-family:var(--disp),sans-serif;font-weight:700;font-size:18px;letter-spacing:2px;color:var(--neon)}
.help-hero-sub{font-size:11px;color:var(--dim);margin-top:2px;letter-spacing:.5px}
.help-hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.help-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--line2);font-size:9px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.help-pill.on{border-color:var(--cyan);color:var(--cyan)}
.help-path{margin-top:10px;font-size:11px;color:var(--dim);display:flex;align-items:center;gap:8px}
.help-path code{color:var(--txt);font-size:11px;word-break:break-all}
.help-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.help-toc a{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-decoration:none;border:1px solid var(--line2);padding:4px 8px}
.help-toc a:hover{color:var(--neon);border-color:var(--neon)}
.help-sec{margin:0 0 14px}
.help-sec-h{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--cyan);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.help-sec-h i{color:var(--neon);width:14px;text-align:center}
.help-sec-b{border:1px solid var(--line);background:rgba(0,0,0,.15)}
.help-row{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-bottom:1px dashed #1b2530}
.help-row:last-child{border-bottom:0}
.help-row > i{width:16px;color:var(--cyan);font-size:11px;margin-top:3px;flex:0 0 auto}
.help-row b{display:block;font-size:11.5px;color:#fff;font-weight:700;letter-spacing:.4px;margin-bottom:2px}
.help-row span{display:block;font-size:10.5px;color:var(--dim);line-height:1.65}
.help-keys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;padding:10px}
.help-keys-grid div{font-size:11px;color:var(--txt);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.help-kbd{display:inline-block;padding:2px 6px;border:1px solid var(--line2);background:var(--bg2);color:var(--neon);font-family:var(--mono),monospace;font-size:10px;letter-spacing:0;border-radius:2px}
.help-note{margin:0;padding:8px 10px 10px;font-size:10.5px;color:var(--dim);line-height:1.6;border-top:1px solid var(--line)}
.help-foot{margin:8px 0 0;font-size:10px;color:var(--dim);letter-spacing:.3px;line-height:1.5}
@media (max-width:520px){
  .help-root{max-height:min(82vh,78dvh)}
  .help-keys-grid{grid-template-columns:1fr}
}


/* ==========================================================================
 * Tablet / mid width header — NEVER half-clip labels (LOGIN → "LOG")
 * iPad landscape often 1024–1180; Pro up to 1366 with many header actions
 * ========================================================================== */
@media (max-width: 1280px) {
  header .hright {
    gap: 5px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }
  /* Icon-only labels (anti "LOG" clip) — ALL actions stay visible */
  header .hright .btn {
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 38px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-flex !important;
  }
  header .hright .btn .btn-txt {
    display: none !important;
  }
  header .hright .btn i {
    margin: 0 !important;
    font-size: 13px !important;
  }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook,
  header .hright #btnDonate,
  header .hright a.btn {
    display: inline-flex !important;
  }
  header .brand {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Wide desktop: restore text labels */
@media (min-width: 1281px) {
  header .hright .btn .btn-txt {
    display: inline !important;
  }
  header .hright .btn {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook {
    display: inline-flex !important;
  }
}


/* ==========================================================================
 * RESPONSIVE MOBILE LAYOUT — unified phone system (Patch 08e)
 * Breakpoints: 760 (phone), 560 (narrow), 400 (compact)
 * Goals: safe-area, 44px touch, no half-labels, search-first toolbar,
 *        full-bleed panel, stable scroll (.tbl-wrap)
 * ========================================================================== */

/* —— App shell: fill dynamic viewport —— */
html.is-touch,
html.is-touch body{
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
}
html.is-touch body{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.is-touch main{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.is-touch .panel{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.is-touch .browse-split,
html.is-touch #browseSplit{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
html.is-touch .tbl-wrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

@media (max-width: 760px) {
  /* —— Safe area chrome —— */
  header{
    height: auto !important;
    min-height: 52px;
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
    align-items: center;
  }
  .brand{
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 140px);
  }
  .brand-title, .glitch{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Icon-only header actions — no truncated LOGIN text */
  .hright{
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    max-width: none !important;
  }
  .hright .btn,
  header .hright .btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
  }
  .hright .btn .btn-txt,
  header .hright .btn .btn-txt{
    display: none !important;
  }
  #btnFS{ display: none !important; }
  /* Phone: keep menu icons (Help/About/QA/Guestbook/Donate/Login) */
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook,
  header .hright #btnDonate {
    display: inline-flex !important;
  }
  .status{
    max-width: 36vw;
    overflow: hidden;
  }

  /* —— Main / panel edge-to-edge —— */
  main{
    padding: 0 !important;
    padding-bottom: 0 !important;
  }
  .panel{
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    min-height: 0;
  }
  .panel-head,
  .index-line{
    padding: 8px max(10px, env(safe-area-inset-left, 0px)) 8px max(12px, env(safe-area-inset-right, 0px));
  }
  #crumbs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #crumbs::-webkit-scrollbar{ display: none; }

  /* —— Toolbar mobile: search full; tools scroll so Slideshow never clips —— */
  .toolbar{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    align-items: stretch;
  }
  .toolbar .search-box{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    order: 0;
  }
  .toolbar .search-box input{
    font-size: 16px !important;
  }
  /* Row of tools + theme + view */
  .toolbar > .tools{
    order: 1;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    scroll-padding-inline: 4px;
    justify-content: flex-start;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid var(--line2) !important;
    box-sizing: border-box !important;
  }
  .toolbar > .tools::-webkit-scrollbar{ display: none; }

  /* Compact hit targets — fit more icons without clipping */
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap,
  .toolbar > .tools > .fx-menu-wrap > .tbtn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .toolbar > .tools > .fx-menu-wrap{
    display: flex !important;
    flex: 0 0 34px !important;
  }
  /* Cegah tombol terakhir yang tampil di baris tools terlihat lebih
     lebar akibat border/box tambahan */
  .toolbar > .tools > .tbtn:last-child,
  .toolbar > .tools > a.tbtn:last-child{
    border-right: 0 !important;
    margin-right: 0 !important;
  }
  .toolbar > .tools > #btnFS,
  .toolbar > .tools > #btnRefresh,
  .toolbar > .tools > #btnRain,
  .toolbar > .tools > #btnRainLove,
  .toolbar > .tools > #btnSound{
    display: flex !important;
    flex: 0 0 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  /* Statistik & Slideshow tetap di menu Lainnya; Game Arcade + Quiz Hub tampil di tools */
  .toolbar > .tools > #btnStats,
  .toolbar > .tools > #btnSlides{
    display: none !important;
  }
  .toolbar > .tools > #btnGameHub,
  .toolbar > .tools > #btnPestGame,
  .toolbar > .tools > #btnQuizHub{
    display: flex !important;
    flex: 0 0 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .toolbar > .tools > .tbtn i,
  .toolbar > .tools > a.tbtn i{
    font-size: 13px !important;
    line-height: 1 !important;
  }

  /* Lainnya + Theme + View pinned after tools row via flex on a
     wrapper-less layout: put them on same visual row using negative
     margin trick → separate flex row */
  .toolbar > .more-menu-wrap,
  .toolbar > .theme-menu-wrap,
  .toolbar > .view-menu-wrap{
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line2) !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    align-self: center;
    /* separated from .tools — do not join borders */
  }
  /* Tools group | gap | Lainnya | Tema | Tampilan — visually separated,
     tiga terakhir berdampingan sebagai satu klaster */
  .toolbar{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px;
    grid-template-areas:
      "search search search search"
      "tools  more   theme  view";
    column-gap: 8px !important;   /* space tools ↔ Lainnya/Tema/Tampilan */
    row-gap: 6px !important;
  }
  .toolbar .search-box{ grid-area: search; }
  .toolbar > .tools{
    grid-area: tools;
    width: auto !important;
    margin-right: 0 !important;
  }
  .toolbar > .more-menu-wrap{
    grid-area: more;
    display: flex !important;
    margin: 0 !important;
    border: 1px solid var(--line2) !important;
    border-radius: 2px;
    justify-self: stretch;
    align-self: stretch;
    width: 34px !important;
    flex: none !important;
  }
  .toolbar > .theme-menu-wrap{
    grid-area: theme;
    margin: 0 !important;
    border: 1px solid var(--line2) !important;
    border-radius: 2px;
    justify-self: stretch;
    align-self: stretch;
    width: 34px !important;
    flex: none !important;
  }
  .toolbar > .view-menu-wrap{
    grid-area: view;
    margin: 0 !important;
    border: 1px solid var(--line2) !important;
    border-radius: 2px;
    justify-self: stretch;
    align-self: stretch;
    width: 34px !important;
    flex: none !important;
  }
  /* Slight gap between Lainnya, Tema, dan Tampilan, keep them a trio */
  .toolbar > .theme-menu-wrap,
  .toolbar > .view-menu-wrap{
    margin-left: 0 !important;
  }
  .toolbar > .more-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap > .tbtn,
  .toolbar > .view-menu-wrap > .tbtn,
  .toolbar > .more-menu-wrap .vbtn,
  .toolbar > .theme-menu-wrap .vbtn,
  .toolbar > .view-menu-wrap .vbtn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
  /* Dropdown "Lainnya" tetap sejajar tepi kanan aman layar */
  .toolbar > .more-menu-wrap .more-menu{
    right: max(0px, calc(-1 * env(safe-area-inset-right, 0px)));
  }
  .toolbar > .toolbar-mid{ display: none !important; }
  .toolbar-spacer{ display: none !important; }
  .tbtn, .vbtn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
  }

  /* Extra-narrow phones: 32px tools so the row still fits without scroll */
  @media (max-width: 400px){
    .toolbar{
      grid-template-columns: minmax(0, 1fr) 32px 32px 32px;
      column-gap: 6px !important;
    }
    .toolbar > .tools > .tbtn,
    .toolbar > .tools > a.tbtn,
    .toolbar > .tools > .fx-menu-wrap,
    .toolbar > .tools > .fx-menu-wrap > .tbtn,
    .toolbar > .more-menu-wrap,
    .toolbar > .theme-menu-wrap,
    .toolbar > .view-menu-wrap,
    .toolbar > .more-menu-wrap > .tbtn,
    .toolbar > .theme-menu-wrap > .tbtn,
    .toolbar > .view-menu-wrap > .tbtn{
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      max-width: 32px !important;
      flex: 0 0 32px !important;
    }
    .toolbar > .more-menu-wrap,
    .toolbar > .theme-menu-wrap,
    .toolbar > .view-menu-wrap{
      width: 32px !important;
    }
  }

  /* —— Listing —— */
  .tbl-wrap{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
  #rows.view-details .row{
    min-height: 52px;
  }
  #rows.view-list .tile-x{
    min-height: 44px;
    padding: 8px 12px;
  }
  #rows.view-tiles{
    padding: 8px !important;
    gap: 8px !important;
    grid-template-columns: 1fr !important;
  }
  #rows.view-tiles .tile-x{
    min-height: 56px;
  }

  /* —— Panel foot —— */
  .panel-foot{
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 8px 12px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    font-size: 10px !important;
  }
  .panel-foot .hints{
    display: none !important;
  }
  .panel-foot .disk-bar{
    width: 64px;
  }

  /* —— Social bar —— */
  .social-bar{
    padding: 6px 8px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
  }
  .social-label{
    display: none !important;
  }
  .social-wrap, #socWrap{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* —— Bulk bar —— */
  #bulkbar{
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: auto !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* —— Shell / modals —— */
  #shell .shell-panel,
  .shell-panel{
    width: min(100vw, 100%) !important;
    max-width: 100vw !important;
    max-height: min(92dvh, 92vh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #shell.open{
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #mBody{
    max-height: min(70dvh, 70vh) !important;
  }

  /* —— Toasts —— */
  #toasts{
    left: 10px !important;
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
  }
  .toast{
    width: 100%;
    max-width: none;
  }
}

/* Narrow phones */
@media (max-width: 560px) {
  header{
    min-height: 48px;
  }
  .brand-mark{
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .glitch, .brand-title{
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
  }
  .hright .btn,
  header .hright .btn{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex-basis: 36px !important;
  }
  .status{
    padding: 3px 6px !important;
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }
  .st-long{ display: none !important; }
  .st-short{ display: inline !important; }

  .toolbar .search-box{
    height: 40px !important;
  }
  .tbtn, .vbtn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #rows.view-tiles{
    grid-template-columns: 1fr !important;
  }
  #rows[class*="view-icons"]{
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  #rows.view-icons-xl{
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  }

  .panel-foot #statsLine{
    font-size: 9.5px;
  }
}

/* Very small / SE-size — DONASI tetap tampil (ikon saja jika sempit) */
@media (max-width: 400px) {
  .status{ display: none !important; }
  .hright .btn-donate,
  header .hright #btnDonate,
  header .hright .btn-donate{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hright .btn-donate .btn-txt{
    display: none !important; /* hemat ruang: ikon hati saja */
  }
  header .hright .btn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  #dirTitle{
    font-size: 13px !important;
  }
}

/* Touch devices: prefer ≥40px targets even if width rules conflict */
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
  .hright .btn,
  header .hright .btn{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
  .tbtn, .vbtn, .search-box{
    min-height: 42px !important;
  }
  .c-act .ai, .ai{
    width: 40px !important;
    height: 40px !important;
  }
  .row, #rows.view-details .row{
    min-height: 52px !important;
  }
}

/* Landscape phone: reclaim vertical space */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  header{
    min-height: 44px !important;
    padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 2px !important;
  }
  .brand-sub, .status{ display: none !important; }
  .toolbar{
    padding: 4px 8px !important;
  }
  .toolbar .search-box{
    height: 36px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    order: 0;
  }
  .social-bar{
    display: flex !important;
    min-height: 40px !important;
  }
  .panel-foot{
    padding: 4px 10px !important;
  }
}



/* ==========================================================================
 * DEVICE BREAKPOINT CONFIG — fixed tokens from DEVICE-MATRIX.txt (Patch 08f)
 * CSS px only. Portrait/landscape via orientation + short-land for phones.
 * ========================================================================== */
:root {
  /* Width tokens (max-width targets) */
  --bp-xxs: 320px;      /* accessibility Display Zoom */
  --bp-xs: 360px;       /* Galaxy S / Android base / zoomed */
  --bp-sm: 400px;       /* SE, mini, narrow iPhone */
  --bp-phone: 480px;    /* all phone portrait incl. Pro Max 440 */
  --bp-phablet: 600px;  /* phone landscape / small Android tab */
  --bp-tablet: 768px;   /* iPad mini P / phone landscape wide */
  --bp-tablet-md: 834px;/* iPad Air/Pro 11" portrait */
  --bp-tablet-lg: 1024px;/* iPad 13" P / tab landscape */
  --bp-laptop: 1280px;  /* laptop HD / iPad 13" landscape */
  --bp-desktop: 1440px; /* standard desktop */
  --bp-wide: 1920px;    /* FHD */
  --bp-uw: 2560px;      /* QHD+ */

  /* Layout density tokens (overridden per band) */
  --hdr-btn: 40px;
  --tool-btn: 42px;
  --touch-min: 44px;
  --chrome-pad-x: 12px;
  --tile-cols-hint: 1;
}

/* —— XXS accessibility zoom (≤320) — matrix: Display Zoom / SE zoomed —— */
@media (max-width: 320px) {
  :root {
    --hdr-btn: 32px;
    --tool-btn: 36px;
    --chrome-pad-x: 6px;
    --tile-cols-hint: 1;
  }
  header .hright .status,
  header .hright .btn-donate { display: inline-flex !important; }
  .brand-sub { display: none !important; }
}

/* —— XS / Android base (≤360 = --bp-xs) —— */
@media (max-width: 360px) {
  :root {
    --hdr-btn: 34px;
    --tool-btn: 38px;
    --chrome-pad-x: 8px;
    --tile-cols-hint: 1;
  }
  header .hright .status { display: none !important; }
  header .hright .btn-donate { display: inline-flex !important; }
}

/* —— SM phone (≤400 = --bp-sm) —— */
@media (max-width: 400px) {
  :root {
    --hdr-btn: 36px;
    --tool-btn: 40px;
    --chrome-pad-x: 10px;
  }
}

/* —— Phone portrait band (≤480 = --bp-phone)
   Policy: icon header, search full-width, tiles 1-col, details compact
   Covers Pro Max 440 and all phone portrait widths in DEVICE-MATRIX —— */
@media (max-width: 480px) {
  :root {
    --tile-cols-hint: 1;
    --hdr-btn: 40px;
  }
  header .hright .btn .btn-txt { display: none !important; }
  header .hright .btn {
    width: var(--hdr-btn) !important;
    height: var(--hdr-btn) !important;
    min-width: var(--hdr-btn) !important;
    max-width: var(--hdr-btn) !important;
    padding: 0 !important;
    flex: 0 0 var(--hdr-btn) !important;
    overflow: hidden !important;
  }
  #btnFS { display: none !important; }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook,
  header .hright #btnDonate {
    display: inline-flex !important;
  }
  #rows.view-tiles {
    grid-template-columns: 1fr !important;
    --tile-min: 100% !important;
  }
  #rows.view-icons-sm {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
  }
  #rows.view-icons-md {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  }
  #rows.view-icons-lg,
  #rows.view-icons-xl {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
  }
}

/* —— Phablet / small tablet & large phone landscape (≤600) —— */
@media (max-width: 600px) {
  :root { --tile-cols-hint: 1; }
}

/* —— Tablet mini portrait + phone landscape wide (≤768) ——
   iPad mini 744–768, Galaxy Tab small */
@media (max-width: 768px) {
  :root {
    --hdr-btn: 40px;
    --tool-btn: 42px;
    --tile-cols-hint: 2;
  }
  header .hright .btn .btn-txt { display: none !important; }
  header .hright .btn,
  .hright .btn {
    width: var(--hdr-btn) !important;
    height: var(--hdr-btn) !important;
    min-width: var(--hdr-btn) !important;
    max-width: var(--hdr-btn) !important;
    padding: 0 !important;
    flex: 0 0 var(--hdr-btn) !important;
    overflow: hidden !important;
  }
  #btnFS { display: none !important; }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook {
    display: inline-flex !important;
  }
}

/* —— iPad Air/Pro 11" portrait (≤834) —— */
@media (max-width: 834px) {
  :root { --tile-cols-hint: 2; }
  #rows.view-tiles {
    --tile-min: 200px;
  }
}

/* —— Tablet large / iPad 13" portrait / tab landscape (≤1024) —— */
@media (max-width: 1024px) {
  :root {
    --hdr-btn: 38px;
    --tile-cols-hint: 3;
  }
  header .hright .btn .btn-txt { display: none !important; }
  header .hright .btn {
    width: var(--hdr-btn) !important;
    height: var(--hdr-btn) !important;
    min-width: var(--hdr-btn) !important;
    max-width: var(--hdr-btn) !important;
    padding: 0 !important;
    flex: 0 0 var(--hdr-btn) !important;
  }
  #btnFS { display: none !important; }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook {
    display: inline-flex !important;
  }
}

/* —— Laptop / iPad 13" landscape (≤1280) —— */
@media (max-width: 1280px) {
  :root { --tile-cols-hint: 3; }
  header .hright .btn .btn-txt { display: none !important; }
  header .hright .btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
  }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook {
    display: inline-flex !important;
  }
}

/* —— Desktop full labels (≥1281) —— */
@media (min-width: 1281px) {
  :root {
    --hdr-btn: auto;
    --tile-cols-hint: 4;
  }
  header .hright .btn .btn-txt {
    display: inline !important;
  }
  header .hright .btn {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook {
    display: inline-flex !important;
  }
}

/* —— Wide / FHD+ —— */
@media (min-width: 1440px) {
  :root { --tile-cols-hint: 5; }
  #rows.view-tiles {
    --tile-min: 240px;
  }
}
@media (min-width: 1920px) {
  :root { --tile-cols-hint: 6; }
  #rows.view-tiles.tiles-comfy {
    --tile-min: 280px;
  }
}
/* —— QHD / 2560+ (27" 1440p, 5K scaled, UW) = --bp-uw —— */
@media (min-width: 2560px) {
  :root {
    --tile-cols-hint: 7;
    --pad-header-x: clamp(16px, 1.2vw, 28px);
    --pad-main: clamp(12px, 1vw, 28px);
    --gap-chrome: clamp(10px, 0.7vw, 18px);
    --fs-brand: clamp(18px, 0.9vw, 24px);
    --fs-title: clamp(16px, 0.7vw, 22px);
    --tile-min-fluid: clamp(220px, 12vw, 300px);
    --tile-media-fluid: clamp(44px, 2vw, 56px);
    --tile-h-fluid: clamp(64px, 3.5vw, 80px);
  }
  main {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-left: clamp(14px, 1.1vw, 28px) !important;
    padding-right: clamp(14px, 1.1vw, 28px) !important;
  }
  .panel {
    width: 100% !important;
    max-width: none !important;
  }
  header {
    min-height: 64px;
    padding-left: clamp(16px, 1.2vw, 28px);
    padding-right: clamp(16px, 1.2vw, 28px);
  }
  header .hright .btn .btn-txt {
    display: inline !important;
  }
  header .hright .btn {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 7px 14px !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    display: inline-flex !important;
  }
  header .hright #btnHelp,
  header .hright #btnAbout,
  header .hright #btnQA,
  header .hright #btnGuestbook,
  header .hright #btnDonate {
    display: inline-flex !important;
  }
  #rows.view-tiles {
    --tile-min: clamp(220px, 11vw, 300px);
    --tile-gap: 12px;
    --tile-pad: 14px;
  }
  #rows.view-tiles.tiles-comfy {
    --tile-min: clamp(260px, 12vw, 320px);
  }
  #rows.view-icons-xl {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  #rows.view-details .row {
    min-height: 44px;
  }
  .toolbar {
    padding: 10px 16px;
    gap: 12px;
  }
  .search-box {
    max-width: 420px;
    height: 42px;
  }
}

/* —— Super-ultrawide 32:9 / 21:9 very wide —— */
@media (min-width: 2560px) and (min-aspect-ratio: 21/9) {
  :root { --tile-cols-hint: 8; }
  main {
    max-width: none !important;
    padding-left: clamp(20px, 2vw, 40px) !important;
    padding-right: clamp(20px, 2vw, 40px) !important;
  }
  #rows.view-tiles {
    --tile-min: clamp(240px, 9vw, 300px);
  }
}

/* —— Orientation: phone landscape (wide short) —— */
/* short-land = orientation: landscape AND max-height: 500px (DEVICE-MATRIX §4)
   Phone landscape CSS widths 667–956; height often <500 after browser chrome */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --hdr-btn: 36px;
    --tool-btn: 36px;
    --tile-cols-hint: 2;
  }
  header {
    min-height: 44px !important;
    padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 2px !important;
  }
  .brand-sub, .status { display: none !important; }
  .social-bar { display: flex !important; min-height: 36px !important; }
  header .hright .btn .btn-txt { display: none !important; }
  .toolbar {
    padding: 4px 8px !important;
    flex-wrap: nowrap !important;
  }
  .toolbar .search-box {
    height: 36px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    order: 0 !important;
  }
  .panel-foot { padding: 4px 10px !important; }
  #rows.view-tiles {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)) !important;
  }
}

/* —— Orientation: tablet portrait (tall, mid width) —— */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
  :root { --tile-cols-hint: 2; }
  header .hright .btn .btn-txt { display: none !important; }
  #rows.view-tiles {
    --tile-min: 200px;
  }
}

/* —— Portrait desktop monitors (rotated) —— */
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1400px) {
  :root { --tile-cols-hint: 2; }
  header .hright .btn .btn-txt { display: none !important; }
  header .hright .btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex: 0 0 40px !important;
  }
  .hright { max-width: none !important; }
  #rows.view-tiles {
    --tile-min: 220px;
  }
}




/* ==========================================================================
 * FLUID RESPONSIVE DESIGN (Patch 08g)
 * Continuous scaling between device bands — clamp() + % + minmax grids
 * Breakpoint tokens remain as anchors; values interpolate smoothly.
 * ========================================================================== */

:root {
  /* Viewport-relative fluid units (capped) */
  --fs-brand: clamp(13px, 2.4vw + 8px, 21px);
  --fs-title: clamp(14px, 1.8vw + 8px, 19px);
  --fs-body: clamp(11px, 0.35vw + 10px, 13px);
  --fs-meta: clamp(9px, 0.25vw + 8px, 11px);
  --fs-btn: clamp(9px, 0.3vw + 8px, 11px);
  --fs-clock: clamp(14px, 1.2vw + 10px, 20px);
  --fs-mono: clamp(11px, 0.3vw + 10px, 12.5px);

  --pad-header-x: clamp(8px, 1.5vw, 20px);
  --pad-main: clamp(0px, 1.2vw, 20px);
  --pad-panel: clamp(8px, 1vw, 16px);
  --gap-chrome: clamp(6px, 0.8vw, 16px);
  --gap-tiles: clamp(6px, 0.7vw, 12px);
  --radius-soft: clamp(0px, 0.2vw, 2px);

  --hdr-h: clamp(48px, 8vw, 64px);
  --search-h: clamp(36px, 5vw, 44px);
  --mark-size: clamp(28px, 4vw, 40px);
  --tool-size: clamp(36px, 5vw, 44px);

  /* Fluid tile min — grows with viewport between phone and desktop */
  --tile-min-fluid: clamp(100%, 18vw, 280px);
  --tile-media-fluid: clamp(36px, 4vw, 52px);
  --tile-h-fluid: clamp(52px, 6vw, 76px);

  /* Content measure */
  --content-max: 100%;
  --ultrawide-max: 100%;
}

/* —— Fluid type & chrome (global, continuous) —— */
header {
  height: auto !important;
  min-height: var(--hdr-h);
  padding-left: max(var(--pad-header-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-header-x), env(safe-area-inset-right, 0px));
  gap: var(--gap-chrome);
}
.glitch,
.brand-title {
  font-size: var(--fs-brand) !important;
  letter-spacing: clamp(0.6px, 0.15vw, 2.5px);
}
.brand-mark {
  width: var(--mark-size) !important;
  height: var(--mark-size) !important;
  font-size: clamp(12px, 1.5vw, 17px) !important;
}
.brand-sub {
  font-size: var(--fs-meta);
}
.clock #clkTime {
  font-size: var(--fs-clock) !important;
}
.btn {
  font-size: var(--fs-btn);
  gap: clamp(4px, 0.5vw, 8px);
  padding: clamp(6px, 0.6vw, 10px) clamp(8px, 0.9vw, 14px);
}
#dirTitle {
  font-size: var(--fs-title) !important;
  letter-spacing: clamp(0.5px, 0.12vw, 1.5px);
}
.search-box {
  height: var(--search-h) !important;
  padding-left: clamp(10px, 1vw, 14px);
  padding-right: clamp(10px, 1vw, 14px);
}
.search-box input {
  font-size: max(16px, var(--fs-mono)); /* ≥16px avoids iOS zoom; desktop still fine */
}
@media (min-width: 768px) {
  .search-box input {
    font-size: var(--fs-mono);
  }
}
.tbtn, .vbtn {
  width: var(--tool-size) !important;
  height: var(--tool-size) !important;
  min-width: var(--tool-size) !important;
  min-height: var(--tool-size) !important;
  font-size: clamp(12px, 1.2vw, 15px);
}
.toolbar {
  gap: var(--gap-chrome);
  padding: clamp(6px, 0.8vw, 12px) clamp(8px, 1vw, 16px);
}
.panel-head,
.index-line {
  padding: clamp(6px, 0.8vw, 12px) clamp(10px, 1.2vw, 16px);
}
.panel-foot {
  padding: clamp(6px, 0.7vw, 12px) clamp(10px, 1.2vw, 16px);
  font-size: var(--fs-meta);
  gap: clamp(4px, 0.6vw, 12px);
}
main {
  padding: var(--pad-main);
  padding-left: max(var(--pad-main), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-main), env(safe-area-inset-right, 0px));
}

/* —— Fluid tiles grid —— */
#rows.view-tiles {
  --tile-min: var(--tile-min-fluid);
  --tile-gap: var(--gap-tiles);
  --tile-media: var(--tile-media-fluid);
  --tile-h: var(--tile-h-fluid);
  --tile-pad: clamp(6px, 0.8vw, 12px);
  gap: var(--tile-gap);
  padding: var(--tile-pad);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
}
#rows.view-tiles .tile-x {
  min-height: var(--tile-h);
  column-gap: clamp(8px, 1vw, 12px);
  padding: clamp(6px, 0.7vw, 12px) clamp(8px, 0.9vw, 12px);
}
#rows.view-tiles .tile-x .tx-nm {
  font-size: clamp(11.5px, 0.4vw + 10px, 13px);
}
#rows.view-tiles .tile-x .tx-sub {
  font-size: clamp(9.5px, 0.3vw + 8px, 11px);
}

/* Icon grids fluid */
#rows.view-icons-sm {
  grid-template-columns: repeat(auto-fill, minmax(clamp(56px, 12vw, 72px), 1fr));
  gap: clamp(4px, 0.5vw, 8px);
  padding: clamp(6px, 0.8vw, 12px);
}
#rows.view-icons-md {
  grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 14vw, 96px), 1fr));
  gap: clamp(6px, 0.6vw, 10px);
  padding: clamp(6px, 0.8vw, 12px);
}
#rows.view-icons-lg {
  grid-template-columns: repeat(auto-fill, minmax(clamp(88px, 16vw, 120px), 1fr));
  gap: clamp(6px, 0.7vw, 12px);
}
#rows.view-icons-xl {
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 18vw, 160px), 1fr));
  gap: clamp(8px, 0.8vw, 14px);
}

/* Details row fluid density */
#rows.view-details .row {
  min-height: clamp(40px, 6vw, 52px);
}
#rows.view-details .c-name .nm {
  font-size: clamp(12px, 0.35vw + 11px, 14px);
}
#rows.view-details .c-sub,
.c-sub {
  font-size: clamp(10px, 0.25vw + 9px, 11.5px);
}

/* List view fluid */
#rows.view-list .tile-x {
  min-height: clamp(40px, 5vw, 48px);
  padding: clamp(6px, 0.6vw, 10px) clamp(8px, 1vw, 14px);
}

/* Content view */
#rows.view-content .tile-x {
  min-height: clamp(44px, 6vw, 56px);
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(6px, 0.7vw, 12px) clamp(8px, 1vw, 14px);
}

/* —— Fluid header actions: size tracks token, labels still band-gated —— */
@media (max-width: 1280px) {
  header .hright .btn {
    width: var(--hdr-btn, 40px) !important;
    height: var(--hdr-btn, 40px) !important;
    min-width: var(--hdr-btn, 40px) !important;
    max-width: var(--hdr-btn, 40px) !important;
  }
}
@media (max-width: 1280px) {
  :root {
    --hdr-btn: clamp(34px, 5.5vw, 42px);
  }
}

/* —— Main panel fluid max on large screens —— */
/* Full-bleed content on large monitors (1920 / QHD / UW) — no empty side gutters */
@media (min-width: 1440px) {
  main {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-left: clamp(12px, 1.2vw, 24px);
    padding-right: clamp(12px, 1.2vw, 24px);
  }
  .panel {
    width: 100%;
    max-width: none;
  }
}

/* —— Toolbar fluid: search grows, tools stay —— */
.toolbar .search-box {
  flex: 1 1 auto;
  min-width: min(100%, 120px);
  max-width: 100%;
  width: auto;
}
@media (max-width: 760px) {
  .toolbar .search-box {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* —— Social / footer fluid —— */
.social-bar {
  padding: clamp(5px, 0.6vw, 10px) clamp(6px, 0.8vw, 12px);
  gap: clamp(4px, 0.5vw, 10px);
  padding-bottom: max(clamp(5px, 0.6vw, 10px), env(safe-area-inset-bottom, 0px));
}

/* —— Shell modal fluid —— */
.shell-panel {
  width: min(96vw, 640px);
  max-height: min(90dvh, 920px);
}
@media (max-width: 600px) {
  .shell-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: min(92dvh, 100%);
  }
}

/* —— Prefer continuous over jump: soften fixed tile overrides —— */
@media (min-width: 561px) and (max-width: 820px) {
  #rows.view-tiles {
    --tile-min: clamp(160px, 42vw, 220px);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
  }
}
@media (min-width: 821px) and (max-width: 1024px) {
  #rows.view-tiles {
    --tile-min: clamp(180px, 28vw, 240px);
  }
}
@media (min-width: 1025px) and (max-width: 1439px) {
  #rows.view-tiles {
    --tile-min: clamp(200px, 20vw, 260px);
  }
}

/* Reduced motion: disable fluid transitions that animate size */
@media (prefers-reduced-motion: reduce) {
  .tile-x, .btn, .tbtn, .vbtn, .tx-thumb {
    transition: none !important;
  }
}


/* Header menu: horizontal scroll if many icons on narrow phones */
@media (max-width: 600px) {
  header {
    flex-wrap: nowrap !important;
  }
  header .hright {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: min(58vw, 280px);
    padding-bottom: 2px;
  }
  header .hright::-webkit-scrollbar { display: none; }
  header .hright .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
  }
}


/* ==========================================================================
 * ICON SIZE SYSTEM (Patch 08i) — consistent glyph + hit-target
 * Hit target (button) ≠ glyph size. Glyph ~42–48% of button for balance.
 * ========================================================================== */
:root {
  --ico-tool: clamp(13px, 1.1vw + 10px, 15px);   /* toolbar .tbtn / .vbtn glyph */
  --ico-tool-btn: clamp(34px, 4.5vw, 40px);       /* toolbar hit target */
  --ico-header: clamp(12px, 1vw + 9px, 14px);     /* header action icons */
  --ico-header-btn: clamp(34px, 5vw, 40px);
  --ico-row: clamp(14px, 0.8vw + 11px, 18px);     /* details/list file type */
  --ico-tile: clamp(18px, 1.5vw + 12px, 24px);    /* tiles media glyph */
  --ico-action: clamp(12px, 0.6vw + 10px, 14px);  /* row action buttons */
  --ico-brand: clamp(12px, 1.2vw + 10px, 17px);
}

/* Toolbar tools — desktop / base */
.tbtn,
.vbtn {
  width: var(--ico-tool-btn);
  height: var(--ico-tool-btn);
  min-width: var(--ico-tool-btn);
  min-height: var(--ico-tool-btn);
  font-size: var(--ico-tool);
  line-height: 1;
}
.tbtn i,
.vbtn i,
.tbtn .fa-solid,
.vbtn .fa-solid {
  font-size: inherit;
  line-height: 1;
  width: 1em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header */
header .hright .btn i {
  font-size: var(--ico-header);
  line-height: 1;
}
.brand-mark {
  font-size: var(--ico-brand);
}

/* Listing type icons */
#rows.view-details .c-ic i,
#rows.view-list .tile-x .tx-ic {
  font-size: var(--ico-row);
}
#rows.view-tiles .tile-x .tx-ic {
  font-size: calc(var(--tile-media, 44px) * 0.48);
  line-height: 1;
}
#rows.view-content .tile-x .tx-ic {
  font-size: clamp(22px, 3vw, 28px);
}

/* Row action icons */
.c-act .ai,
.ai {
  font-size: var(--ico-action);
}

/* —— Mobile ≤820: compact but fully visible glyphs —— */
@media (max-width: 820px) {
  :root {
    --ico-tool: 14px;
    --ico-tool-btn: 36px;
    --ico-header: 13px;
    --ico-header-btn: 36px;
    --ico-row: 15px;
    --ico-tile: 18px;
    --ico-action: 13px;
  }
  .toolbar .tbtn,
  .toolbar .vbtn,
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap .tbtn,
  .toolbar > .view-menu-wrap .tbtn,
  .toolbar > .theme-menu-wrap .vbtn,
  .toolbar > .view-menu-wrap .vbtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
    font-size: 13px !important;
    padding: 0 !important;
  }
  .toolbar .tbtn i,
  .toolbar .vbtn i {
    font-size: 13px !important;
    line-height: 1 !important;
    width: 1em;
    height: 1em;
  }
  header .hright .btn {
    font-size: 13px;
  }
  header .hright .btn i {
    font-size: 13px !important;
  }
}

/* —— Narrow phone ≤480 —— */
@media (max-width: 480px) {
  :root {
    --ico-tool: 13px;
    --ico-tool-btn: 34px;
    --ico-header: 12px;
    --ico-header-btn: 34px;
  }
  .toolbar .tbtn,
  .toolbar .vbtn,
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap .tbtn,
  .toolbar > .view-menu-wrap .tbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    font-size: 12px !important;
  }
  .toolbar .tbtn i,
  .toolbar .vbtn i {
    font-size: 12px !important;
  }
}

/* —— Large desktop: slightly roomier —— */
@media (min-width: 1281px) {
  :root {
    --ico-tool: 14px;
    --ico-tool-btn: 36px;
    --ico-header: 13px;
  }
}
@media (min-width: 1920px) {
  :root {
    --ico-tool: 15px;
    --ico-tool-btn: 38px;
    --ico-header: 14px;
    --ico-row: 16px;
  }
}



/* ==========================================================================
 * ICON ACCESSIBILITY (Patch 08j)
 * ========================================================================== */

/* Decorative icons must not be announced twice when parent has aria-label */
.tbtn > i[aria-hidden="true"],
.vbtn > i[aria-hidden="true"],
.btn > i[aria-hidden="true"],
.ai > i[aria-hidden="true"],
header .btn > i[aria-hidden="true"] {
  speak: never;
  pointer-events: none;
}

/* Clearer keyboard focus for icon-only controls */
.tbtn:focus-visible,
.vbtn:focus-visible,
header .hright .btn:focus-visible,
.ai:focus-visible {
  outline: 2px solid var(--cyan, #00f0ff) !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bg, #0a0e12) 80%, transparent),
    0 0 0 4px color-mix(in srgb, var(--cyan, #00f0ff) 55%, transparent) !important;
  z-index: 2;
}

/* Pressed / active toggle — not color-only: shape + weight */
.tbtn[aria-pressed="true"],
.tbtn.on,
.vbtn.on {
  background: color-mix(in srgb, var(--neon, #fcee0a) 22%, transparent);
  border-color: color-mix(in srgb, var(--neon, #fcee0a) 55%, var(--line2));
  color: var(--neon, #fcee0a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon, #fcee0a) 35%, transparent);
}
.tbtn[aria-pressed="true"] i,
.tbtn.on i {
  color: inherit;
}

/* Sound muted state: distinct from "pressed" */
#btnSound.on {
  color: var(--mag, #ff2a6d);
  background: color-mix(in srgb, var(--mag, #ff2a6d) 12%, transparent);
}
#btnSound.on i { color: var(--mag, #ff2a6d); }

/* Ensure minimum contrast for dim icons on dark panel */
.tbtn,
.vbtn,
header .hright .btn {
  color: color-mix(in srgb, var(--dim, #8a9bb0) 70%, #e8eef5 30%);
}
.tbtn:hover,
.vbtn:hover,
.tbtn:focus-visible,
.vbtn:focus-visible {
  color: var(--txt, #e8eef5);
}

/* Windows High Contrast / forced-colors */
@media (forced-colors: active) {
  .tbtn,
  .vbtn,
  header .hright .btn,
  .ai {
    forced-color-adjust: none;
    border: 1px solid ButtonText !important;
    color: ButtonText !important;
    background: ButtonFace !important;
  }
  .tbtn:focus-visible,
  .vbtn:focus-visible,
  header .hright .btn:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }
  .tbtn[aria-pressed="true"],
  .tbtn.on,
  .vbtn.on {
    background: Highlight !important;
    color: HighlightText !important;
  }
}

/* Touch: slightly larger focus ring so it remains visible */
@media (hover: none), (pointer: coarse) {
  .tbtn:focus-visible,
  .vbtn:focus-visible,
  header .hright .btn:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}



/* ==========================================================================
 * CONTRAST VALIDATION FIXES (Patch 08k) — WCAG 2.2 AA targets
 * Body/title: AAA on bg/panel. Muted labels: AA ≥4.5 on panel.
 * ========================================================================== */
:root {
  /* Explicit readable muted text (replaces borderline --dim on panel) */
  --txt-muted: var(--dim);
  --txt-muted-strong: var(--dim2);
}

/* Secondary UI copy that must remain readable */
.brand-sub,
.clock #clkDate,
.btn:not(.neon):not(.danger),
.tbtn,
.vbtn,
.tx-sub,
.c-sub,
.panel-foot,
.hints,
.st-long,
.st-short,
.fld-hint,
.crumb:not(.active) {
  color: var(--dim2);
}

/* Placeholder — slightly stronger than pure dim for AA-ish on dark inputs */
.search-box input::placeholder,
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--dim2) 85%, #cfd8e0 15%);
  opacity: 1;
}

/* Disabled controls: still ≥3:1 against panel where possible */
.btn:disabled,
.tbtn:disabled,
button:disabled {
  color: var(--dim);
  opacity: 0.85;
}

/* Neon filled buttons already AAA (black on neon) — keep */
.btn.neon {
  color: #000;
  background: var(--neon);
}

/* Status / LIVE cyan on dark — AAA */
.status {
  color: var(--cyan);
}

/* Ensure table header labels readable */
.th,
.tbl-head .th {
  color: var(--dim2);
}
.th.sorted {
  color: var(--txt);
}


/* ================================================================
   CANONICAL RESPONSIVE OVERRIDE — sinkron dengan DEVICE-MATRIX.txt
   §4 Breakpoint tokens & §5 Layout Policy per band.
   Diletakkan PALING AKHIR agar menang dari aturan lama (700/720/760/
   820/900px) yang tersebar di file ini tanpa perlu menghapusnya satu
   per satu — mengurangi risiko regresi pada properti lain yang masih
   dipakai oleh aturan-aturan lama tsb (padding, gap, warna, dll).
   ================================================================ */

/* —— Header button label: icon-only ≤1024 (bp-tablet-lg),
       "icon-or-short label" mulai 1025 (bp-laptop), full label ≥1281 —— */
@media (max-width: 1024px) {
  header .hright .btn .btn-txt,
  .hright .btn .btn-txt {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  header .hright .btn .btn-txt,
  .hright .btn .btn-txt {
    display: inline !important;
  }
}

/* —— Toolbar tool icons (.tbtn/.vbtn): ukuran seragam per band,
       konsisten untuk SEMUA tombol termasuk yang terakhir tampil
       (mis. Slideshow saat tombol admin disembunyikan) —— */
@media (max-width: 480px) {
  .toolbar .tbtn, .toolbar .vbtn,
  .toolbar > .tools > .tbtn, .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap .tbtn, .toolbar > .view-menu-wrap .tbtn,
  .toolbar > .theme-menu-wrap .vbtn, .toolbar > .view-menu-wrap .vbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .toolbar .tbtn, .toolbar .vbtn,
  .toolbar > .tools > .tbtn, .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap .tbtn, .toolbar > .view-menu-wrap .tbtn,
  .toolbar > .theme-menu-wrap .vbtn, .toolbar > .view-menu-wrap .vbtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 13px !important;
    padding: 0 !important;
  }
}
/* Tombol terakhir yang terlihat di grup .tools tidak boleh dapat
   border/margin tambahan di sisi kanan (penyebab kasus Slideshow) */
@media (max-width: 1024px) {
  .toolbar > .tools {
    padding-right: 0 !important;
  }
  .toolbar > .tools > .tbtn:last-child,
  .toolbar > .tools > a.tbtn:last-child {
    border-right: 0 !important;
    margin-right: 0 !important;
  }
}

/* —— Status pill: jangan sampai lebih lebar dari sisa ruang di
       header pada layar sempit (xxs–xs band) —— */
@media (max-width: 360px) {
  header .hright .status,
  .status {
    max-width: 32vw !important;
  }
}

/* ================================================================
   MOBILE TOOLBAR — polish tampilan (indikator aktif + kerapian ikon)
   Hanya untuk lebar ≤1024px (band toolbar mobile/tablet, icon-only).
   Blok final: menang atas semua aturan lama termasuk .tbtn.on solid.
   ================================================================ */
@media (max-width: 1024px) {
  /* Indikator "aktif" halus: warna ikon + garis bawah tipis,
     bukan blok kuning penuh yang memutus alur baris toolbar */
  .toolbar > .tools > .tbtn.on,
  .toolbar > .tools > .vbtn.on,
  .toolbar > .tools > .fx-menu-wrap > .tbtn.on {
    background: transparent !important;
    color: var(--neon) !important;
    box-shadow: inset 0 -2px 0 0 var(--neon) !important;
  }
  .toolbar > .tools > .tbtn.on i,
  .toolbar > .tools > .vbtn.on i,
  .toolbar > .tools > .fx-menu-wrap > .tbtn.on i {
    color: var(--neon) !important;
  }

  /* Ikon seragam: ukuran, ketebalan garis, dan center vertikal sama
     persis di semua tombol toolbar */
  .toolbar > .tools > .tbtn i,
  .toolbar > .tools > a.tbtn i,
  .toolbar > .tools > .fx-menu-wrap > .tbtn i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  /* Pastikan kontainer tombol tidak memotong ikon lebar
     (mis. fa-table-columns pada Preview Pane) */
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn {
    overflow: visible !important;
  }

  /* Pemisah antar-tombol konsisten di semua sambungan, termasuk
     di sekitar menu FX (dulu bisa dobel/hilang) */
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap {
    border-left: 1px solid var(--line2) !important;
  }
  .toolbar > .tools > .tbtn:first-child,
  .toolbar > .tools > a.tbtn:first-child,
  .toolbar > .tools > .fx-menu-wrap:first-child {
    border-left: 0 !important;
  }
  .toolbar > .tools > .fx-menu-wrap > .tbtn {
    border-left: 0 !important;
  }

  /* Tinggi & alignment kontainer tools presisi, tidak ada tombol
     yang terlihat "naik/turun" sedikit dari yang lain */
  .toolbar > .tools {
    align-items: stretch !important;
  }
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap,
  .toolbar > .tools > .fx-menu-wrap > .tbtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ================================================================
   Hilangkan tombol toolbar yang kosong (tidak ada ikon di dalamnya)
   — mis. tombol yang dibuat via JS tapi ikonnya belum/tidak terisi
   (race condition), sehingga muncul kotak kosong di sebelah ikon lain.
   ================================================================ */
.toolbar > .tools > .tbtn:empty,
.toolbar > .tools > a.tbtn:empty,
.toolbar > .tools > .fx-menu-wrap > .tbtn:empty,
.toolbar > .theme-menu-wrap > .tbtn:empty,
.toolbar > .view-menu-wrap > .tbtn:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ================================================================
   TOOL "LAINNYA" (dropdown) — mobile menampilkan hanya:
   Fullscreen, Rescan, Hujan Digital, Love Beterbangan, FX, Sound,
   sisanya dipindah ke dropdown "Lainnya". Responsive & dropdown
   membuka ke bawah (mengikuti pola .view-menu yang sudah ada).
   ================================================================ */

/* —— Struktur & style dropdown (dipakai di semua ukuran layar) —— */
.more-menu-wrap {
  position: relative;
  flex: 0 0 auto;
  display: none; /* default: disembunyikan, dimunculkan lagi di media query mobile */
  align-items: stretch;
  /* Border penuh, sama seperti .theme-menu-wrap/.view-menu-wrap — sejak
     "Lainnya" pindah jadi item berdiri sendiri di klaster kanan, bukan
     lagi tombol yang menempel di dalam .tools */
  border: 1px solid var(--line2);
}
.more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 220px;
  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;
}
.more-menu.open { display: block; }
.more-menu .vm-it { width: 100%; }

/* —— Mobile / tablet (≤1024px) ——
   Tools dan klaster (LAINNYA + TEMA + TAMPILAN) adalah DUA grup berbeda.
   Markup .more-menu-wrap ada di HTML sebagai sibling .toolbar, tepat
   sebelum .theme-menu-wrap — jadi ia otomatis berdampingan dengan Tema
   & Tampilan, bukan bagian dari .tools.
   Layout jadi 2 baris, keduanya penuh lebar layar:
     Baris 1: [ SEARCH .......................................... ]
     Baris 2: [FS][RESCAN][HUJAN DIGITAL][LOVE BETERBANGAN][FX][SOUND]  ..........  [LAINNYA][TEMA][TAMPILAN]
   Baris 2: grup tools nempel kiri, klaster LAINNYA+TEMA+TAMPILAN
   didorong (margin-left:auto pada .more-menu-wrap, item pertama
   klaster) nempel kanan — jadi baris tetap penuh lebar layar, tapi
   ketiganya berdampingan satu sama lain (hanya dipisah gap toolbar
   biasa), TIDAK pernah masuk ke grup/menu tools. */
@media (max-width: 1024px) {
  .toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Baris 1: search penuh lebar layar sendirian */
  .toolbar > .search-box {
    flex: 1 1 100%;
    width: 100%;
  }
  .toolbar > .tcount {
    display: none !important;
  }
  /* Baris 2, kelompok kiri: tools */
  .toolbar > .tools {
    margin-left: 0 !important;
  }

  /* Sembunyikan semua tool lain secara default... */
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn {
    display: none !important;
  }
  /* Tool utama + Game Arcade + Quiz Hub selalu tampil di mobile/tablet */
  .toolbar > .tools > #btnFS,
  .toolbar > .tools > #btnRefresh,
  .toolbar > .tools > #btnRain,
  .toolbar > .tools > #btnRainLove,
  .toolbar > .tools > #btnSound,
  .toolbar > .tools > #btnGameHub,
  .toolbar > .tools > #btnPestGame,
  .toolbar > .tools > #btnQuizHub {
    display: flex !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* FX menu (wrapper) tetap tampil */
  .toolbar > .tools > .fx-menu-wrap {
    display: flex !important;
  }

  /* Baris 2, kelompok kanan: LAINNYA + TEMA + TAMPILAN — satu klaster,
     berdiri sendiri di luar .tools, didorong ke kanan (margin-left:auto
     pada item pertama klaster yaitu LAINNYA), dan tetap berdampingan
     satu sama lain (dipisah gap toolbar biasa, bukan disebar ke
     ujung-ujung layar) */
  .toolbar > .more-menu-wrap,
  .toolbar > .theme-menu-wrap,
  .toolbar > .view-menu-wrap {
    display: flex !important;
    margin-left: 0 !important;
  }
  .toolbar > .more-menu-wrap {
    margin-left: auto !important;
  }
}

/* Layar sangat sempit: rapatkan ukuran tombol supaya baris 2
   (tools + Lainnya + TEMA + TAMPILAN) tetap muat dalam satu baris
   penuh lebar layar, tanpa terpotong */
@media (max-width: 400px) {
  .toolbar {
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
  }
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn,
  .toolbar > .theme-menu-wrap > .tbtn,
  .toolbar > .view-menu-wrap > .tbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
  }
}

/* —— Desktop (≥1025px): tampilkan semua tool seperti biasa,
       sembunyikan tombol "Lainnya" karena tidak diperlukan —— */
@media (min-width: 1025px) {
  .more-menu-wrap {
    display: none !important;
  }
}
/* DIR//LISTER — Public Community section (Donate LB + FAQ + Guestbook)
 * v26.0915-community
 * Append to the end of index.css or include as separate stylesheet
 */

.pub-community {
  margin: 20px 0 32px;
  padding: 0 clamp(12px, 2vw, 28px);
}

.comm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  max-width: 1600px;
  margin: 0 auto;
}

.comm-panel {
  background: var(--panel, #0b1015);
  border: 1px solid var(--line2, #28394a);
  border-radius: 4px;
  padding: 14px 16px 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  min-height: 120px;
}

.comm-head {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--neon, #fcee0a);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
}

.comm-head i {
  color: var(--cyan, #00f0ff);
}

.comm-stats {
  font-size: 12.5px;
  color: var(--dim2, #8093a3);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line, #1b2530);
}

.comm-stats b {
  color: var(--green, #00ff9f);
}

.comm-empty {
  font-size: 12.5px;
  color: var(--dim, #6b7c8c);
  margin: 8px 0 0;
}

.comm-lb {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comm-lb li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line, #1b2530);
  font-size: 12.5px;
}

.comm-lb li:last-child {
  border-bottom: 0;
}

.comm-lb .rank {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
}

.comm-lb .name {
  flex: 1;
  color: var(--txt, #cfd8e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-lb .amt {
  color: var(--green, #00ff9f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.comm-sub {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--cyan, #00f0ff);
  text-transform: uppercase;
}

.comm-recent {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.comm-recent li {
  padding: 4px 0;
  color: var(--dim2, #8093a3);
}

.comm-recent b {
  color: var(--txt, #cfd8e0);
}

.comm-recent .dim {
  opacity: 0.75;
  font-size: 11px;
}

/* FAQ */
.comm-search {
  margin-bottom: 10px;
}

.comm-search input {
  width: 100%;
  background: var(--bg2, #0a0e13);
  border: 1px solid var(--line2, #28394a);
  color: var(--txt, #cfd8e0);
  padding: 9px 12px;
  border-radius: 2px;
  font: 12.5px var(--mono, system-ui, sans-serif);
  outline: none;
  transition: border-color 0.15s;
}

.comm-search input:focus {
  border-color: var(--neon, #fcee0a);
  box-shadow: 0 0 0 1px rgba(252, 238, 10, 0.25);
}

.comm-faq {
  margin: 8px 0;
  border: 1px solid var(--line, #1b2530);
  border-radius: 3px;
  background: rgba(10, 14, 19, 0.4);
}

.comm-faq summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--txt, #cfd8e0);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.comm-faq summary::-webkit-details-marker {
  display: none;
}

.comm-faq[open] summary {
  border-bottom: 1px solid var(--line, #1b2530);
  color: var(--neon, #fcee0a);
}

.comm-faq .ans {
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dim2, #8093a3);
  white-space: pre-wrap;
}

.comm-faq .meta {
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--dim, #6b7c8c);
}

.comm-faq .pill {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(0, 255, 159, 0.12);
  color: var(--green, #00ff9f);
  border: 1px solid rgba(0, 255, 159, 0.35);
  flex-shrink: 0;
}

/* Guestbook cards */
.comm-gb {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gb-card {
  background: var(--bg2, #0a0e13);
  border: 1px solid var(--line, #1b2530);
  border-radius: 3px;
  padding: 10px 12px;
}

.gb-name {
  font-weight: 600;
  color: var(--cyan, #00f0ff);
  font-size: 12.5px;
}

.gb-msg {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--txt, #cfd8e0);
  white-space: pre-wrap;
}

.gb-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--dim, #6b7c8c);
}

@media (max-width: 700px) {
  .comm-grid {
    grid-template-columns: 1fr;
  }
  .pub-community {
    margin-top: 16px;
  }
}


/* ===== Community loading skeleton & spinner ===== */
.comm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 12px;
  color: var(--dim, #6b7c8c);
  font-size: 12px;
}
.comm-loading.inline {
  flex-direction: row;
  justify-content: center;
  padding: 16px 8px;
}
.comm-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line2, #28394a);
  border-top-color: var(--neon, #fcee0a);
  border-radius: 50%;
  animation: comm-spin 0.7s linear infinite;
}
@keyframes comm-spin {
  to { transform: rotate(360deg); }
}
.comm-skel {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-skel-line {
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--line, #1b2530) 25%,
    var(--line2, #28394a) 50%,
    var(--line, #1b2530) 75%);
  background-size: 200% 100%;
  animation: comm-shimmer 1.2s ease-in-out infinite;
}
.comm-skel-line.short { width: 55%; }
.comm-skel-line.med { width: 75%; }
@keyframes comm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .comm-spinner { animation: none; border-top-color: var(--cyan, #00f0ff); }
  .comm-skel-line { animation: none; opacity: 0.6; }
}


/* ================================================================
   COMMUNITY MODAL — DIR//LISTER cyberpunk full-screen (v26.0915b)
   ================================================================ */

/* Backdrop: full viewport, no padding */
.comm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(252, 238, 10, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 42, 109, 0.05), transparent 50%),
    rgba(6, 8, 10, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .comm-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
}
.comm-modal[hidden] { display: none !important; }

/* Scanline overlay */
.comm-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  opacity: 0.35;
}

/* Near full-screen panel — inset on desktop, full on phone */
.comm-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1280px, 98vw);
  height: min(96vh, 96dvh);
  max-width: 98vw;
  max-height: min(96vh, 96dvh);
  margin: auto;
  border-radius: 0;
  background: var(--panel, #0b1015);
  border: 1px solid var(--line2, #28394a);
  border-top: 2px solid var(--neon, #fcee0a);
  border-bottom: 2px solid var(--cyan, #00f0ff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
@media (max-width: 760px) {
  .comm-modal-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}

/* Corner clip accents (cyberpunk) */
.comm-modal-panel::before,
.comm-modal-panel::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 2;
}
.comm-modal-panel::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--mag, #ff2a6d);
  border-left: 2px solid var(--mag, #ff2a6d);
}
.comm-modal-panel::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--cyan, #00f0ff);
  border-right: 2px solid var(--cyan, #00f0ff);
}

/* Header / tabs */
.comm-modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line2, #28394a);
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(14, 21, 28, 0.98), rgba(11, 16, 21, 0.95));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.comm-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.comm-tabs::-webkit-scrollbar { display: none; }

.comm-tab {
  position: relative;
  padding: 10px 16px;
  font: 700 11px/1.2 var(--mono, "Rajdhani", system-ui, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line2, #28394a);
  border-radius: 0;
  color: var(--dim, #6b7c8c);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.comm-tab:hover {
  color: var(--txt, #cfd8e0);
  border-color: rgba(0, 240, 255, 0.4);
}
.comm-tab.on {
  color: #000;
  border-color: var(--neon, #fcee0a);
  background: var(--neon, #fcee0a);
  box-shadow: 0 0 16px rgba(252, 238, 10, 0.35);
}
.comm-tab.on:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}

.comm-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2, #28394a);
  border-radius: 0;
  color: var(--dim, #6b7c8c);
  background: rgba(10, 14, 19, 0.8);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.comm-close:hover {
  color: var(--mag, #ff2a6d);
  border-color: var(--mag, #ff2a6d);
  background: rgba(255, 42, 109, 0.1);
  box-shadow: 0 0 12px rgba(255, 42, 109, 0.25);
}
.comm-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--cyan, #00f0ff);
}

/* Body scroll area */
.comm-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px max(28px, env(safe-area-inset-bottom, 16px));
  overscroll-behavior: contain;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}

.comm-pane[hidden] { display: none !important; }

/* Content chrome */
.comm-pane .comm-head {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--neon, #fcee0a);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(252, 238, 10, 0.25);
}
.comm-pane .comm-head i {
  color: var(--cyan, #00f0ff);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.comm-stats {
  font-size: 12.5px;
  color: var(--dim2, #8093a3);
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line, #1b2530);
  border-left: 2px solid var(--green, #00ff9f);
  background: rgba(0, 255, 159, 0.04);
}
.comm-stats b {
  color: var(--green, #00ff9f);
  text-shadow: 0 0 10px rgba(0, 255, 159, 0.3);
}

.comm-empty {
  font-size: 12.5px;
  color: var(--dim, #6b7c8c);
  margin: 12px 0 0;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--line2, #28394a);
}

.comm-lb { list-style: none; padding: 0; margin: 0; }
.comm-lb li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(36, 48, 64, 0.75);
  font-size: 13px;
  transition: background 0.12s;
}
.comm-lb li:hover {
  background: rgba(0, 240, 255, 0.04);
}
.comm-lb li:last-child { border-bottom: 0; }
.comm-lb .rank {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
  min-width: 32px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.comm-lb .name {
  flex: 1;
  color: var(--txt, #cfd8e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.comm-lb .amt {
  color: var(--green, #00ff9f);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.comm-sub {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cyan, #00f0ff);
  text-transform: uppercase;
  font-weight: 700;
}
.comm-recent { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.comm-recent li {
  padding: 6px 0;
  color: var(--dim2, #8093a3);
  border-bottom: 1px dashed rgba(36, 48, 64, 0.5);
}
.comm-recent b { color: var(--txt, #cfd8e0); }
.comm-recent .dim { opacity: 0.75; font-size: 11px; }

.comm-search { margin-bottom: 12px; }
.comm-search input {
  width: 100%;
  background: var(--bg2, #0a0e13);
  border: 1px solid var(--line2, #28394a);
  color: var(--txt, #cfd8e0);
  padding: 11px 14px;
  border-radius: 0;
  font: 13px var(--mono, "Rajdhani", system-ui, sans-serif);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.comm-search input:focus {
  border-color: var(--neon, #fcee0a);
  box-shadow: 0 0 0 1px rgba(252, 238, 10, 0.3), 0 0 20px rgba(252, 238, 10, 0.08);
}
.comm-search input::placeholder {
  color: var(--dim, #6b7c8c);
}

.comm-faq {
  margin: 8px 0;
  border: 1px solid var(--line, #1b2530);
  border-radius: 0;
  background: rgba(10, 14, 19, 0.55);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.comm-faq summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt, #cfd8e0);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.comm-faq summary::-webkit-details-marker { display: none; }
.comm-faq[open] {
  border-color: rgba(252, 238, 10, 0.35);
  box-shadow: 0 0 20px rgba(252, 238, 10, 0.06);
}
.comm-faq[open] summary {
  border-bottom: 1px solid var(--line, #1b2530);
  color: var(--neon, #fcee0a);
}
.comm-faq .ans {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--dim2, #8093a3);
  white-space: pre-wrap;
}
.comm-faq .meta {
  padding: 0 14px 12px;
  font-size: 11px;
  color: var(--dim, #6b7c8c);
  letter-spacing: 0.03em;
}
.comm-faq .pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 0;
  background: rgba(0, 255, 159, 0.12);
  color: var(--green, #00ff9f);
  border: 1px solid rgba(0, 255, 159, 0.4);
  flex-shrink: 0;
}

.comm-gb { display: flex; flex-direction: column; gap: 10px; }
.gb-card {
  background: var(--bg2, #0a0e13);
  border: 1px solid var(--line, #1b2530);
  border-left: 2px solid var(--cyan, #00f0ff);
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gb-card:hover {
  border-left-color: var(--neon, #fcee0a);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.06);
}
.gb-name {
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.gb-msg {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt, #cfd8e0);
  white-space: pre-wrap;
}
.gb-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--dim, #6b7c8c);
  letter-spacing: 0.03em;
}

/* Loading */
.comm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 12px 24px;
  color: var(--dim, #6b7c8c);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.comm-loading.inline {
  flex-direction: row;
  justify-content: center;
  padding: 20px 8px;
}
.comm-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line2, #28394a);
  border-top-color: var(--neon, #fcee0a);
  border-right-color: var(--cyan, #00f0ff);
  border-radius: 50%;
  animation: comm-spin 0.65s linear infinite;
  box-shadow: 0 0 12px rgba(252, 238, 10, 0.2);
}
@keyframes comm-spin { to { transform: rotate(360deg); } }
.comm-skel {
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comm-skel-line {
  height: 11px;
  border-radius: 0;
  background: linear-gradient(90deg,
    var(--line, #1b2530) 25%,
    var(--line2, #28394a) 50%,
    var(--line, #1b2530) 75%);
  background-size: 200% 100%;
  animation: comm-shimmer 1.15s ease-in-out infinite;
}
.comm-skel-line.short { width: 52%; }
.comm-skel-line.med { width: 72%; }
@keyframes comm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.comm-sentinel { height: 1px; width: 100%; pointer-events: none; }
.comm-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 8px;
  color: var(--dim, #6b7c8c);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comm-end {
  text-align: center;
  font-size: 10px;
  color: var(--dim, #6b7c8c);
  padding: 14px 0 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .comm-spinner { animation: none; border-top-color: var(--cyan, #00f0ff); }
  .comm-skel-line { animation: none; opacity: 0.55; }
}

/* Force hide any leftover permanent section */
.pub-community { display: none !important; }


/* ===== Community pro polish (DIR//LISTER) ===== */
.comm-brand{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-right:6px;
}
.comm-brand-ico{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2,#28394a);background:var(--bg2,#0a0e13);color:var(--neon,#fcee0a);
  font-size:14px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.comm-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.comm-brand-title{font:700 11px/1.1 var(--mono,Rajdhani,system-ui);letter-spacing:.14em;color:var(--neon,#fcee0a);text-transform:uppercase}
.comm-brand-sub{font:600 9px/1.1 var(--mono,Rajdhani,system-ui);letter-spacing:.16em;color:var(--cyan,#00f0ff);opacity:.85}

.comm-modal-head{gap:10px;flex-wrap:wrap}
.comm-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 14px}
.comm-tab i{font-size:11px;opacity:.9}
.comm-tab.on i{opacity:1}

.comm-modal-foot{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 14px max(10px,env(safe-area-inset-bottom,8px));
  border-top:1px solid var(--line,#1b2530);
  background:linear-gradient(0deg,rgba(8,12,18,.98),rgba(11,16,21,.92));
  font:600 10px/1.2 var(--mono,Rajdhani,system-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim,#6b7c8c);
}
.comm-foot-l{color:var(--cyan,#00f0ff);display:inline-flex;align-items:center;gap:6px}
.comm-foot-l i{font-size:9px;animation:commPulse 1.6s ease-in-out infinite}
@keyframes commPulse{0%,100%{opacity:.45}50%{opacity:1}}

.comm-body-inner{
  max-width:920px;margin:0 auto;width:100%;
}

.comm-pane .comm-head{
  padding-bottom:10px;margin-bottom:16px;
  border-bottom:1px solid var(--line,#1b2530);
}
.comm-pane .comm-head .comm-head-sub{
  margin-left:auto;font-size:10px;letter-spacing:.08em;color:var(--dim,#6b7c8c);
  font-weight:600;text-transform:uppercase;text-shadow:none;
}

.comm-kpi-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.comm-kpi{
  flex:1 1 120px;min-width:110px;padding:12px 12px;
  border:1px solid var(--line2,#28394a);background:var(--bg2,#0a0e13);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.comm-kpi .k{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim,#6b7c8c);margin-bottom:4px}
.comm-kpi .v{font-size:16px;font-weight:700;color:var(--cyan,#00f0ff);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.comm-kpi.neon .v{color:var(--neon,#fcee0a)}
.comm-kpi.ok .v{color:var(--green,#00ff9f)}
.comm-kpi.warn .v{color:var(--amber,#ff9f1c)}

.comm-section{
  border:1px solid var(--line,#1b2530);background:rgba(10,14,19,.45);
  margin-bottom:14px;padding:12px 12px 10px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.comm-section .comm-sub{margin-top:0}

.comm-lb li.top1 .rank{color:var(--neon,#fcee0a)}
.comm-lb li.top2 .rank{color:#c0c8d4}
.comm-lb li.top3 .rank{color:#d4a574}
.comm-lb li.top1{background:rgba(252,238,10,.05);border-left:2px solid var(--neon,#fcee0a)}
.comm-lb li.top2{background:rgba(192,200,212,.04);border-left:2px solid rgba(192,200,212,.5)}
.comm-lb li.top3{background:rgba(212,165,116,.05);border-left:2px solid rgba(212,165,116,.55)}

.comm-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:28px 16px;border-style:dashed;
}
.comm-empty .ico{font-size:22px;color:var(--cyan,#00f0ff);opacity:.5}
.comm-empty b{color:var(--txt,#cfd8e0);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.comm-cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.comm-cta{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;min-height:36px;
  border:1px solid var(--line2,#28394a);background:transparent;color:var(--dim,#6b7c8c);
  font:600 11px/1 var(--mono,Rajdhani,system-ui);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:color .12s,border-color .12s,background .12s;
}
.comm-cta:hover{color:var(--neon,#fcee0a);border-color:rgba(252,238,10,.45);background:rgba(252,238,10,.06)}
.comm-cta.primary{background:var(--neon,#fcee0a);border-color:var(--neon,#fcee0a);color:#000;font-weight:700}
.comm-cta.primary:hover{background:#fff38a;border-color:#fff38a;color:#000}

.comm-intro{
  font-size:12.5px;line-height:1.55;color:var(--dim2,#8093a3);margin:0 0 14px;
  padding:10px 12px;border:1px solid var(--line,#1b2530);border-left:2px solid var(--cyan,#00f0ff);
  background:rgba(0,240,255,.03);
}

@media (max-width:640px){
  .comm-brand-sub{display:none}
  .comm-tab span{display:none}
  .comm-tab{padding:10px 12px}
  .comm-tab i{font-size:13px}
  .comm-modal-foot{font-size:9px}
}


/* ==========================================================================
   CANONICAL BUTTON RESPONSIVE — top-bar (.hright .btn) + toolbar (.tbtn)
   Single source of truth (loaded last). Prevents label clip ("LOG"), uneven
   sizes, and conflicting display:none from older media queries.
   ========================================================================== */

/* —— Shared button reset in header —— */
header .hright {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100%;
  gap: 6px;
}
header .hright .btn,
header .hright a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
header .hright .btn .btn-txt,
header .hright a.btn .btn-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
header .hright .btn i,
header .hright a.btn i {
  flex: 0 0 auto;
  line-height: 1 !important;
}

/* Visible set (order comes from HTML) */
header .hright #btnQA,
header .hright #btnGuestbook,
header .hright #btnDonate,
header .hright #btnHelp,
header .hright #btnAbout {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Hide staff Login/Logout + Notif on mobile & tablet.
   MURID (portal murid) tetap tampil — class .btn-murid. */
@media (max-width: 1024px) {
  header .hright a.btn[href*="login"]:not(.btn-murid),
  header .hright a.btn[href*="logout"]:not(.btn-murid):not(.btn-logout-murid),
  header .hright a.btn[href*="?login"]:not(.btn-murid),
  header .hright a.btn[href*="?logout"]:not(.btn-murid):not(.btn-logout-murid),
  header .hright #btnLogin,
  header .hright #btnLogout,
  header .hright #btnAdmin,
  header .hright #btnNotify,
  .hright a.btn[href*="login"]:not(.btn-murid),
  .hright a.btn[href*="logout"]:not(.btn-murid):not(.btn-logout-murid),
  .hright a.btn[href*="?login"]:not(.btn-murid),
  .hright a.btn[href*="?logout"]:not(.btn-murid):not(.btn-logout-murid),
  .hright #btnLogin,
  .hright #btnLogout,
  .hright #btnAdmin,
  .hright #btnNotify {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* Paksa tampil tombol MURID di mobile/tablet (icon graduation-cap) */
  header .hright a.btn.btn-murid,
  .hright a.btn.btn-murid {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line2) !important;
    overflow: hidden !important;
    flex: 0 0 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  header .hright a.btn.btn-murid .btn-txt,
  .hright a.btn.btn-murid .btn-txt {
    display: none !important; /* icon-only di ≤1024; label full di desktop */
  }
  header .hright a.btn.btn-murid i,
  .hright a.btn.btn-murid i {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--neon, #00f0ff);
  }
}

/* Phone: ukuran ikon MURID diselaraskan */
@media (max-width: 480px) {
  header .hright a.btn.btn-murid,
  .hright a.btn.btn-murid {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
  }
}

/* Desktop: label teks MURID tampil penuh */
@media (min-width: 1281px) {
  header .hright a.btn.btn-murid,
  .hright a.btn.btn-murid {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 6px 12px !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  header .hright a.btn.btn-murid .btn-txt,
  .hright a.btn.btn-murid .btn-txt {
    display: inline !important;
  }
}
/* —— Phone (≤480): compact icon-only —— */
@media (max-width: 480px) {
  header .hright {
    gap: 4px !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 0 36px !important;
    overflow: hidden !important;
  }
  header .hright .btn .btn-txt,
  header .hright a.btn .btn-txt {
    display: none !important;
  }
  header .hright .btn i,
  header .hright a.btn i {
    margin: 0 !important;
    font-size: 13px !important;
  }
  /* Hide non-essential chrome so 6 actions fit */
  header .hright .clock,
  header .hright .status {
    display: none !important;
  }
}

/* —— Phablet / tablet / laptop (481–1280): touch-friendly icon-only —— */
@media (min-width: 481px) and (max-width: 1280px) {
  header .hright {
    gap: 5px !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
  }
  header .hright .btn .btn-txt,
  header .hright a.btn .btn-txt {
    display: none !important; /* anti clip LOGIN→LOG */
  }
  header .hright .btn i,
  header .hright a.btn i {
    margin: 0 !important;
    font-size: 14px !important;
  }
}

/* —— Portrait tablet: slightly tighter —— */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
  header .hright .btn,
  header .hright a.btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
  }
}

/* —— Wide desktop (≥1281): icon + full labels —— */
@media (min-width: 1281px) {
  header .hright {
    gap: 8px !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  header .hright .btn .btn-txt,
  header .hright a.btn .btn-txt {
    display: inline !important;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  header .hright .btn i,
  header .hright a.btn i {
    margin: 0 !important;
    font-size: 12px !important;
  }
}

/* —— Ultra-wide: a bit more padding —— */
@media (min-width: 1600px) {
  header .hright .btn,
  header .hright a.btn {
    padding: 7px 14px !important;
    gap: 8px !important;
  }
}

/* —— Toolbar tools: consistent hit targets —— */
@media (max-width: 480px) {
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .toolbar > .tools > .tbtn,
  .toolbar > .tools > a.tbtn,
  .toolbar > .tools > .fx-menu-wrap > .tbtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
  }
}

/* —— Game Arcade + Quiz Hub: always on tools row (mobile / portrait) —— */
@media (max-width: 1024px), (orientation: portrait) {
  .toolbar > .tools > #btnGameHub,
  .toolbar > .tools > #btnPestGame,
  .toolbar > .tools > #btnQuizHub {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* —— Reduced motion: no button scale jank —— */
@media (prefers-reduced-motion: reduce) {
  header .hright .btn,
  header .hright a.btn,
  .toolbar .tbtn,
  .toolbar .vbtn {
    transition: none !important;
  }
}


/* ==========================================================================
   CANONICAL BUTTON HOVER — smooth, GPU-friendly, cyberpunk neon
   Properties only: color, border, background, box-shadow, transform, opacity
   (avoids layout thrash; compositor-friendly)
   ========================================================================== */

:root {
  --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-dur: 0.18s;
  --btn-dur-fast: 0.12s;
  --btn-glow: 0 0 14px rgba(252, 238, 10, 0.22);
  --btn-glow-soft: 0 0 10px rgba(252, 238, 10, 0.12);
  --btn-glow-donate: 0 0 14px rgba(255, 107, 138, 0.28);
}

/* Base transition set */
header .hright .btn,
header .hright a.btn,
.btn,
.tbtn,
.vbtn,
.toolbar .tbtn,
.toolbar a.tbtn,
.toolbar .vbtn,
.more-menu-wrap > .tbtn,
.theme-menu-wrap > .tbtn,
.view-menu-wrap > .tbtn {
  transition:
    color var(--btn-dur) var(--btn-ease),
    background-color var(--btn-dur) var(--btn-ease),
    border-color var(--btn-dur) var(--btn-ease),
    box-shadow var(--btn-dur) var(--btn-ease),
    transform var(--btn-dur-fast) var(--btn-ease),
    opacity var(--btn-dur) var(--btn-ease),
    filter var(--btn-dur) var(--btn-ease) !important;
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* —— Header / generic .btn —— */
header .hright .btn:hover,
header .hright a.btn:hover,
.btn:hover {
  border-color: var(--neon, #fcee0a) !important;
  color: var(--neon, #fcee0a) !important;
  box-shadow: var(--btn-glow-soft);
  transform: translateY(-1px) translateZ(0);
}
header .hright .btn:active,
header .hright a.btn:active,
.btn:active {
  transform: translateY(0) scale(0.97) translateZ(0);
  box-shadow: none;
  filter: brightness(1.05);
  transition-duration: var(--btn-dur-fast) !important;
}

/* Neon primary */
.btn.neon:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  box-shadow: var(--btn-glow);
  transform: translateY(-1px) translateZ(0);
}
.btn.neon:active {
  transform: translateY(0) scale(0.97) translateZ(0);
}

/* Danger */
.btn.danger:hover {
  border-color: var(--mag, #ff2a6d) !important;
  color: #fff !important;
  background: rgba(255, 42, 109, 0.18) !important;
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.25);
}

/* Donate (pink) */
header .hright .btn-donate:hover,
.btn-donate:hover {
  color: #ffb3c6 !important;
  border-color: rgba(255, 120, 150, 0.65) !important;
  background: rgba(255, 80, 120, 0.12) !important;
  box-shadow: var(--btn-glow-donate) !important;
  transform: translateY(-1px) translateZ(0);
}
.btn-donate:active {
  transform: translateY(0) scale(0.97) translateZ(0);
}

/* Focus-visible (keyboard) — same language as hover, clearer ring */
header .hright .btn:focus-visible,
header .hright a.btn:focus-visible,
.btn:focus-visible,
.tbtn:focus-visible,
.vbtn:focus-visible {
  outline: none !important;
  border-color: var(--neon, #fcee0a) !important;
  color: var(--neon, #fcee0a) !important;
  box-shadow: var(--btn-glow-soft), 0 0 0 2px rgba(252, 238, 10, 0.25);
}

/* —— Toolbar icon buttons —— */
.tbtn:hover,
.vbtn:hover,
.toolbar .tbtn:hover,
.toolbar a.tbtn:hover {
  color: var(--neon, #fcee0a) !important;
  background: rgba(252, 238, 10, 0.06);
  box-shadow: inset 0 0 16px rgba(252, 238, 10, 0.1), var(--btn-glow-soft);
  transform: translateY(-1px) scale(1.04) translateZ(0);
}
.tbtn:active,
.vbtn:active,
.toolbar .tbtn:active,
.toolbar a.tbtn:active {
  transform: translateY(0) scale(0.94) translateZ(0);
  box-shadow: none;
  transition-duration: var(--btn-dur-fast) !important;
}

/* Active / on state — keep glow without fighting hover */
.tbtn.on,
.vbtn.on {
  color: var(--neon, #fcee0a);
  box-shadow: inset 0 0 12px rgba(252, 238, 10, 0.12);
}

/* Touch: no sticky hover after tap (coarse pointer) */
@media (hover: none), (pointer: coarse) {
  header .hright .btn:hover,
  header .hright a.btn:hover,
  .btn:hover,
  .btn.neon:hover,
  .btn-donate:hover,
  .tbtn:hover,
  .vbtn:hover,
  .toolbar .tbtn:hover {
    transform: none;
    box-shadow: none;
    filter: none;
  }
  /* Instant press feedback only */
  header .hright .btn:active,
  header .hright a.btn:active,
  .btn:active,
  .tbtn:active,
  .vbtn:active {
    transform: scale(0.96) translateZ(0);
    filter: brightness(1.08);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  header .hright .btn,
  header .hright a.btn,
  .btn,
  .tbtn,
  .vbtn,
  .toolbar .tbtn,
  .toolbar a.tbtn {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  header .hright .btn:hover,
  .btn:hover,
  .tbtn:hover,
  .vbtn:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   NEON SYSTEM — optimized animations (GPU: transform + opacity only)
   ========================================================================== */
:root {
  --neon: #fcee0a;
  --neon-rgb: 252, 238, 10;
  --cyan: #00f0ff;
  --cyan-rgb: 0, 240, 255;
  --mag: #ff2a6d;
  --mag-rgb: 255, 42, 109;
  --neon-glow: 0 0 12px rgba(var(--neon-rgb), 0.35);
  --neon-glow-lg: 0 0 24px rgba(var(--neon-rgb), 0.28), 0 0 48px rgba(var(--neon-rgb), 0.12);
  --neon-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --neon-dur: 0.2s;
}

/* Utility classes */
.neon-text {
  color: var(--neon);
  text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.45);
}
.neon-border {
  border-color: var(--neon) !important;
  box-shadow: var(--neon-glow);
}
.neon-pulse {
  animation: neonPulse 2.2s var(--neon-ease) infinite;
}
.neon-breathe {
  animation: neonBreathe 3s ease-in-out infinite;
}
.neon-scan {
  animation: neonScan 4s linear infinite;
}

@keyframes neonPulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.2);
  }
  50% {
    opacity: 0.92;
    filter: brightness(1.15);
    box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.4);
  }
}
@keyframes neonBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes neonScan {
  0% { transform: translate3d(0, -100%, 0); opacity: 0; }
  10% { opacity: 0.35; }
  90% { opacity: 0.35; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}
@keyframes neonRing {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(var(--neon-rgb), 0.06),
      0 0 16px rgba(var(--neon-rgb), 0.15);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(var(--neon-rgb), 0.12),
      0 0 28px rgba(var(--neon-rgb), 0.28);
  }
}
@keyframes neonFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.75; }
  94% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
}

/* ==========================================================================
   SHELL MODAL — structure + neon chrome
   ========================================================================== */
#shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
}
#shell.open {
  display: flex !important;
}
.shell-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: shellFadeIn 0.2s var(--neon-ease);
}
@keyframes shellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#shell .shell-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 94vw);
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--panel, #0b1015);
  border: 1px solid var(--line2, #28394a);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  animation: shellIn 0.28s var(--neon-ease);
  transform-origin: center center;
}
@keyframes shellIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Corner brackets */
.shell-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 3;
  border-color: var(--neon);
  opacity: 0.55;
}
.shell-corner.tl { top: 6px; left: 6px; border-top: 2px solid; border-left: 2px solid; }
.shell-corner.tr { top: 6px; right: 6px; border-top: 2px solid; border-right: 2px solid; }
.shell-corner.bl { bottom: 6px; left: 6px; border-bottom: 2px solid; border-left: 2px solid; }
.shell-corner.br { bottom: 6px; right: 6px; border-bottom: 2px solid; border-right: 2px solid; }

/* Scanline overlay */
.shell-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  top: 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--neon-rgb), 0.04),
    transparent
  );
  pointer-events: none;
  z-index: 2;
  animation: neonScan 5s linear infinite;
  opacity: 0.5;
}

.shell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2, #28394a);
  flex: 0 0 auto;
  min-width: 0;
}
.shell-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.shell-head #mIcon {
  color: var(--neon);
  font-size: 14px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(var(--neon-rgb), 0.4));
}
.shell-title {
  font-family: var(--disp, inherit);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--txt, #eef4fa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-meta {
  font-size: 10px;
  color: var(--dim, #7a8b9a);
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36%;
  flex: 0 1 auto;
}
.shell-x {
  flex: 0 0 auto;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin-left: 4px;
}
.shell-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.shell-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line2, #28394a);
  background: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   LOCK MODAL — FOLDER TERKUNCI (full HTML/CSS system)
   ========================================================================== */
#shell .shell-panel.shell-lock {
  width: min(460px, 94vw) !important;
  border-color: rgba(var(--neon-rgb), 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(var(--neon-rgb), 0.1),
    0 24px 64px rgba(0, 0, 0, 0.7),
    var(--neon-glow-lg);
}
#shell .shell-panel.shell-lock .shell-head {
  border-bottom-color: rgba(var(--neon-rgb), 0.22);
  background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.07), transparent);
}
#shell .shell-panel.shell-lock .shell-corner {
  opacity: 0.85;
  animation: neonBreathe 2.8s ease-in-out infinite;
}
#shell .shell-panel.shell-lock .shell-scanline {
  opacity: 0.7;
}

.lk-root {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 0 4px;
}

.lk-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(var(--neon-rgb), 0.12), transparent 55%),
    linear-gradient(135deg, rgba(14, 21, 28, 0.98), rgba(6, 10, 14, 0.99));
  border: 1px solid var(--line2, #28394a);
  border-left: 3px solid var(--neon);
  position: relative;
  overflow: hidden;
}
.lk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(var(--neon-rgb), 0.02) 3px,
    rgba(var(--neon-rgb), 0.02) 4px
  );
  pointer-events: none;
}
.lk-hero-ring {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  animation: neonRing 2.4s var(--neon-ease) infinite;
}
.lk-hero-core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--neon-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon);
  font-size: 18px;
  animation: neonFlicker 5s steps(1) infinite;
}
.lk-hero-text { min-width: 0; position: relative; z-index: 1; }
.lk-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--neon);
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.35);
}
.lk-title {
  font-family: var(--disp, inherit);
  font-size: 17px;
  font-weight: 700;
  color: var(--txt, #eef4fa);
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.lk-sub {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dim, #7a8b9a);
}

.lk-meta {
  display: grid;
  gap: 0;
  border: 1px solid var(--line2, #28394a);
  background: rgba(0, 0, 0, 0.25);
}
.lk-meta-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line, #1b2530);
  align-items: center;
  font-size: 11px;
}
.lk-meta-row:last-child { border-bottom: 0; }
.lk-meta-k {
  color: var(--dim, #7a8b9a);
  letter-spacing: 0.08em;
  font-size: 9.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lk-meta-k i {
  color: var(--cyan);
  font-size: 10px;
  width: 12px;
  text-align: center;
  filter: drop-shadow(0 0 4px rgba(var(--cyan-rgb), 0.35));
}
.lk-meta-v {
  color: var(--txt, #eef4fa);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-meta-v.mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.25);
}

.lk-form { display: flex; flex-direction: column; gap: 8px; }
.lk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dim, #7a8b9a);
  font-weight: 600;
}
.lk-hint { font-size: 9px; letter-spacing: 0.04em; opacity: 0.75; font-weight: 400; }
.lk-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--line2, #28394a);
  background: var(--bg2, #0e151c);
  transition: border-color var(--neon-dur) var(--neon-ease),
              box-shadow var(--neon-dur) var(--neon-ease);
}
.lk-input-wrap:focus-within {
  border-color: var(--neon);
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.2), var(--neon-glow);
}
.lk-input-ic {
  flex: 0 0 42px;
  text-align: center;
  color: var(--dim, #7a8b9a);
  font-size: 12px;
  pointer-events: none;
}
.lk-input-wrap:focus-within .lk-input-ic {
  color: var(--neon);
  filter: drop-shadow(0 0 4px rgba(var(--neon-rgb), 0.4));
}
.lk-input-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--txt, #eef4fa) !important;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  padding: 12px 8px 12px 0 !important;
  outline: none !important;
  box-shadow: none !important;
  caret-color: var(--neon);
}
.lk-input-wrap input::placeholder { color: var(--dim, #7a8b9a); opacity: 0.65; }
.lk-input-wrap input.lk-invalid { color: var(--mag) !important; }
.lk-input-wrap:has(input.lk-invalid) {
  border-color: var(--mag);
  box-shadow: 0 0 0 1px rgba(var(--mag-rgb), 0.25), 0 0 14px rgba(var(--mag-rgb), 0.15);
}
.lk-toggle {
  flex: 0 0 42px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--dim, #7a8b9a);
  cursor: pointer;
  font-size: 13px;
  transition: color var(--neon-dur) var(--neon-ease);
}
.lk-toggle:hover { color: var(--neon); }

.lk-err {
  display: none;
  font-size: 11px;
  color: var(--mag);
  padding: 8px 10px;
  border: 1px solid rgba(var(--mag-rgb), 0.4);
  background: rgba(var(--mag-rgb), 0.08);
  letter-spacing: 0.03em;
}
.lk-err:not([hidden]) { display: block; }

.lk-notes {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(var(--cyan-rgb), 0.25);
  background: rgba(var(--cyan-rgb), 0.03);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lk-notes li {
  font-size: 10.5px;
  color: var(--dim2, #8093a3);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lk-notes li i {
  color: var(--green, #00ff9f);
  font-size: 9px;
  margin-top: 3px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 4px rgba(0, 255, 159, 0.35));
}
.lk-notes b { color: var(--txt, #eef4fa); font-weight: 600; }

@media (max-width: 420px) {
  .lk-hero { flex-direction: column; text-align: center; gap: 12px; }
  .lk-kicker { justify-content: center; }
  .lk-meta-row { grid-template-columns: 1fr; gap: 2px; }
  .lk-hero-ring { width: 56px; height: 56px; }
  .lk-hero-core { width: 40px; height: 40px; font-size: 16px; }
  .shell-meta { display: none; }
}

/* Performance / a11y: cut neon motion */
@media (prefers-reduced-motion: reduce) {
  .neon-pulse,
  .neon-breathe,
  .neon-scan,
  .lk-hero-ring,
  .lk-hero-core,
  .shell-scanline,
  #shell .shell-panel.shell-lock .shell-corner {
    animation: none !important;
  }
  #shell .shell-panel {
    animation: none !important;
  }
  .shell-backdrop {
    animation: none !important;
  }
}
body.perf-lite .shell-scanline,
body.perf-lite .lk-hero-ring,
body.perf-lite .lk-hero-core,
html.perf-lite .shell-scanline {
  animation: none !important;
}


/* —— Neon Retro extras: CRT glow, scan, phosphor —— */
body[data-theme="neon-retro"] {
  --btn-glow: 0 0 14px rgba(255, 43, 214, 0.35);
  --btn-glow-soft: 0 0 10px rgba(255, 43, 214, 0.2);
  --btn-glow-donate: 0 0 14px rgba(255, 77, 255, 0.3);
}
body[data-theme="neon-retro"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
}
body[data-theme="neon-retro"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(10, 0, 20, 0.45) 100%
  );
  opacity: 0.85;
}
body[data-theme="neon-retro"] .glitch {
  text-shadow:
    0 0 8px rgba(255, 43, 214, 0.5),
    0 0 16px rgba(0, 240, 255, 0.25);
}
body[data-theme="neon-retro"] .tag {
  background: var(--neon);
  color: #0a0014;
  box-shadow: 0 0 12px rgba(255, 43, 214, 0.4);
}
body[data-theme="neon-retro"] .panel {
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, 0.12),
    0 0 40px rgba(255, 43, 214, 0.06),
    inset 0 0 60px rgba(0, 240, 255, 0.03);
}
body[data-theme="neon-retro"] header {
  border-bottom-color: rgba(255, 43, 214, 0.25);
  box-shadow: 0 1px 0 rgba(0, 240, 255, 0.08);
}
body[data-theme="neon-retro"] .btn:hover,
body[data-theme="neon-retro"] header .hright .btn:hover {
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  box-shadow: 0 0 14px rgba(255, 43, 214, 0.35), 0 0 28px rgba(0, 240, 255, 0.12);
}
body[data-theme="neon-retro"] .tbtn:hover,
body[data-theme="neon-retro"] .vbtn:hover {
  color: var(--cyan) !important;
  box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.12), 0 0 10px rgba(255, 43, 214, 0.15);
}
body[data-theme="neon-retro"] .btn.neon {
  background: var(--neon);
  color: #0a0014;
  box-shadow: 0 0 16px rgba(255, 43, 214, 0.45);
}
body[data-theme="neon-retro"] .btn.neon:hover {
  background: #fff;
  color: #0a0014;
  box-shadow: 0 0 20px rgba(255, 43, 214, 0.55), 0 0 32px rgba(0, 240, 255, 0.2);
}
body[data-theme="neon-retro"] .corner.tl,
body[data-theme="neon-retro"] .corner.tr,
body[data-theme="neon-retro"] .corner.bl,
body[data-theme="neon-retro"] .corner.br,
body[data-theme="neon-retro"] .shell-corner {
  border-color: var(--neon);
  filter: drop-shadow(0 0 4px rgba(255, 43, 214, 0.5));
}
body[data-theme="neon-retro"] #shell .shell-panel.shell-lock {
  border-color: rgba(255, 43, 214, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.15),
    0 24px 64px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(255, 43, 214, 0.2);
}
body[data-theme="neon-retro"] .lk-hero {
  border-left-color: var(--neon);
  background:
    radial-gradient(ellipse at 20% 40%, rgba(255, 43, 214, 0.15), transparent 55%),
    linear-gradient(135deg, rgba(26, 0, 56, 0.98), rgba(10, 0, 20, 0.99));
}
body[data-theme="neon-retro"] .status .led {
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="neon-retro"]::before,
  body[data-theme="neon-retro"]::after {
    opacity: 0.2;
  }
}
body.perf-lite[data-theme="neon-retro"]::before,
body.perf-lite[data-theme="neon-retro"]::after {
  display: none !important;
}

/* Paper: status chip & icons solid */
body[data-theme="paper"] .status,
body[data-theme="paper"] .st-long,
body[data-theme="paper"] .st-short{
  color: var(--txt) !important;
}
body[data-theme="paper"] .status .led{
  background: var(--green) !important;
}
body[data-theme="paper"] header .hright .btn i,
body[data-theme="paper"] .tbtn i,
body[data-theme="paper"] .vbtn i{
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
}
body[data-theme="paper"] .btn .btn-txt{
  color: inherit !important;
  opacity: 1 !important;
}


/* ==========================================================================
   FLAT THEMES — Ink Black · Matcha Flat · Navy Command
   No gradients, no glow — solid surfaces + high contrast text/buttons
   ========================================================================== */

/* —— 1. Ink Black —— */
body[data-theme="ink-black"]{
  --bg:#0d0d0d;
  --bg2:#161616;
  --panel:#141414;
  --panel2:#1c1c1c;
  --line:#2a2a2a;
  --line2:#3a3a3a;
  --txt:#f0f0f0;
  --dim:#a0a0a0;
  --dim2:#c8c8c8;
  --heading:#ffffff;
  --neon:#ffffff;
  --cyan:#d0d0d0;
  --mag:#e8e8e8;
  --green:#b8b8b8;
  --amber:#d4d4d4;
  --neon-rgb: 255, 255, 255;
  --cyan-rgb: 208, 208, 208;
  --btn-glow: none;
  --btn-glow-soft: none;
  --btn-glow-donate: none;
  color-scheme: dark;
}

/* —— 2. Matcha Flat —— */
body[data-theme="matcha"]{
  --bg:#f3f6f1;
  --bg2:#e5ebe3;
  --panel:#ffffff;
  --panel2:#f0f4ee;
  --line:#c5d0c0;
  --line2:#a8b8a0;
  --txt:#1b4332;
  --dim:#4a6b5a;
  --dim2:#2d4a3c;
  --heading:#081c15;
  --neon:#2d6a4f;
  --cyan:#40916c;
  --mag:#9b2226;
  --green:#1b4332;
  --amber:#bc6c25;
  --neon-rgb: 45, 106, 79;
  --cyan-rgb: 64, 145, 108;
  --btn-glow: none;
  --btn-glow-soft: none;
  --btn-glow-donate: none;
  color-scheme: light;
}

/* —— 3. Navy Command —— */
body[data-theme="navy-command"]{
  --bg:#0b1c2c;
  --bg2:#12263a;
  --panel:#0f2233;
  --panel2:#163044;
  --line:#1e3a50;
  --line2:#2a4d68;
  --txt:#e8f1f5;
  --dim:#8aa4b5;
  --dim2:#b0c5d2;
  --heading:#ffffff;
  --neon:#00b4d8;
  --cyan:#48cae4;
  --mag:#ef476f;
  --green:#06d6a0;
  --amber:#ffd166;
  --neon-rgb: 0, 180, 216;
  --cyan-rgb: 72, 202, 228;
  --btn-glow: none;
  --btn-glow-soft: none;
  --btn-glow-donate: none;
  color-scheme: dark;
}

/* Shared flat rules for ink-black, matcha, navy-command */
body[data-theme="ink-black"] header,
body[data-theme="ink-black"] .panel,
body[data-theme="ink-black"] .toolbar,
body[data-theme="ink-black"] footer,
body[data-theme="ink-black"] #shell .shell-panel,
body[data-theme="ink-black"] .pal-panel,
body[data-theme="ink-black"] .toast,
body[data-theme="ink-black"] #bulkbar,
body[data-theme="ink-black"] .search-box,
body[data-theme="matcha"] header,
body[data-theme="matcha"] .panel,
body[data-theme="matcha"] .toolbar,
body[data-theme="matcha"] footer,
body[data-theme="matcha"] #shell .shell-panel,
body[data-theme="matcha"] .pal-panel,
body[data-theme="matcha"] .toast,
body[data-theme="matcha"] #bulkbar,
body[data-theme="matcha"] .search-box,
body[data-theme="navy-command"] header,
body[data-theme="navy-command"] .panel,
body[data-theme="navy-command"] .toolbar,
body[data-theme="navy-command"] footer,
body[data-theme="navy-command"] #shell .shell-panel,
body[data-theme="navy-command"] .pal-panel,
body[data-theme="navy-command"] .toast,
body[data-theme="navy-command"] #bulkbar,
body[data-theme="navy-command"] .search-box{
  background: var(--panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="ink-black"] .bg-grid,
body[data-theme="ink-black"] .scanlines,
body[data-theme="matcha"] .bg-grid,
body[data-theme="matcha"] .scanlines,
body[data-theme="navy-command"] .bg-grid,
body[data-theme="navy-command"] .scanlines{
  display: none !important;
}

body[data-theme="ink-black"] .glitch,
body[data-theme="ink-black"] #dirTitle,
body[data-theme="ink-black"] .clock #clkTime,
body[data-theme="matcha"] .glitch,
body[data-theme="matcha"] #dirTitle,
body[data-theme="matcha"] .clock #clkTime,
body[data-theme="navy-command"] .glitch,
body[data-theme="navy-command"] #dirTitle,
body[data-theme="navy-command"] .clock #clkTime{
  color: var(--heading) !important;
  text-shadow: none !important;
}
body[data-theme="ink-black"] .glitch::before,
body[data-theme="ink-black"] .glitch::after,
body[data-theme="matcha"] .glitch::before,
body[data-theme="matcha"] .glitch::after,
body[data-theme="navy-command"] .glitch::before,
body[data-theme="navy-command"] .glitch::after{
  display: none !important;
}

/* Flat buttons */
body[data-theme="ink-black"] .btn,
body[data-theme="matcha"] .btn,
body[data-theme="navy-command"] .btn,
body[data-theme="ink-black"] header .hright .btn,
body[data-theme="matcha"] header .hright .btn,
body[data-theme="navy-command"] header .hright .btn,
body[data-theme="ink-black"] header .hright a.btn,
body[data-theme="matcha"] header .hright a.btn,
body[data-theme="navy-command"] header .hright a.btn{
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
body[data-theme="ink-black"] .btn:hover,
body[data-theme="matcha"] .btn:hover,
body[data-theme="navy-command"] .btn:hover,
body[data-theme="ink-black"] header .hright .btn:hover,
body[data-theme="matcha"] header .hright .btn:hover,
body[data-theme="navy-command"] header .hright .btn:hover{
  background: var(--bg2) !important;
  color: var(--neon) !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="ink-black"] .btn.neon,
body[data-theme="matcha"] .btn.neon,
body[data-theme="navy-command"] .btn.neon,
body[data-theme="ink-black"] .btn.neon:hover,
body[data-theme="matcha"] .btn.neon:hover,
body[data-theme="navy-command"] .btn.neon:hover{
  background: var(--neon) !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="ink-black"] .btn.neon,
body[data-theme="ink-black"] .btn.neon:hover{
  color: #0d0d0d !important;
}
body[data-theme="matcha"] .btn.neon,
body[data-theme="matcha"] .btn.neon:hover{
  color: #ffffff !important;
}
body[data-theme="navy-command"] .btn.neon,
body[data-theme="navy-command"] .btn.neon:hover{
  color: #0b1c2c !important;
}

body[data-theme="ink-black"] .tbtn,
body[data-theme="matcha"] .tbtn,
body[data-theme="navy-command"] .tbtn,
body[data-theme="ink-black"] .vbtn,
body[data-theme="matcha"] .vbtn,
body[data-theme="navy-command"] .vbtn{
  color: var(--dim2) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-theme="ink-black"] .tbtn:hover,
body[data-theme="matcha"] .tbtn:hover,
body[data-theme="navy-command"] .tbtn:hover,
body[data-theme="ink-black"] .vbtn:hover,
body[data-theme="matcha"] .vbtn:hover,
body[data-theme="navy-command"] .vbtn:hover{
  color: var(--neon) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="ink-black"] .tbtn.on,
body[data-theme="matcha"] .tbtn.on,
body[data-theme="navy-command"] .tbtn.on,
body[data-theme="ink-black"] .vbtn.on,
body[data-theme="matcha"] .vbtn.on,
body[data-theme="navy-command"] .vbtn.on{
  background: var(--neon) !important;
}
body[data-theme="ink-black"] .tbtn.on,
body[data-theme="ink-black"] .vbtn.on{
  color: #0d0d0d !important;
}
body[data-theme="matcha"] .tbtn.on,
body[data-theme="matcha"] .vbtn.on{
  color: #ffffff !important;
}
body[data-theme="navy-command"] .tbtn.on,
body[data-theme="navy-command"] .vbtn.on{
  color: #0b1c2c !important;
}

body[data-theme="ink-black"] .tag,
body[data-theme="navy-command"] .tag{
  background: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="ink-black"] .tag{ color: #0d0d0d !important; }
body[data-theme="navy-command"] .tag{ color: #0b1c2c !important; }
body[data-theme="matcha"] .tag{
  background: var(--neon) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-theme="ink-black"] .row:hover,
body[data-theme="matcha"] .row:hover,
body[data-theme="navy-command"] .row:hover,
body[data-theme="ink-black"] .tile-x:hover,
body[data-theme="matcha"] .tile-x:hover,
body[data-theme="navy-command"] .tile-x:hover,
body[data-theme="ink-black"] .row.selected,
body[data-theme="matcha"] .row.selected,
body[data-theme="navy-command"] .row.selected{
  background: var(--bg2) !important;
}

body[data-theme="ink-black"] .status .led,
body[data-theme="matcha"] .status .led,
body[data-theme="navy-command"] .status .led{
  box-shadow: none !important;
}

body[data-theme="ink-black"] .shell-backdrop,
body[data-theme="navy-command"] .shell-backdrop{
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none !important;
}
body[data-theme="matcha"] .shell-backdrop{
  background: rgba(27, 67, 50, 0.35) !important;
  backdrop-filter: none !important;
}

body[data-theme="ink-black"] .corner.tl,
body[data-theme="ink-black"] .corner.tr,
body[data-theme="ink-black"] .corner.bl,
body[data-theme="ink-black"] .corner.br,
body[data-theme="matcha"] .corner.tl,
body[data-theme="matcha"] .corner.tr,
body[data-theme="matcha"] .corner.bl,
body[data-theme="matcha"] .corner.br,
body[data-theme="navy-command"] .corner.tl,
body[data-theme="navy-command"] .corner.tr,
body[data-theme="navy-command"] .corner.bl,
body[data-theme="navy-command"] .corner.br{
  filter: none;
  opacity: 1;
}


/* ==========================================================================
   HACKER — professional terminal / phosphor console
   Inspired by secure ops workstations: deep green-black, phosphor text,
   high contrast, minimal chrome. Not cartoon “haxor” — clean & readable.
   ========================================================================== */
body[data-theme="hacker"]{
  /* Surfaces: near-black with green undertone */
  --bg:#050a07;
  --bg2:#0a120e;
  --panel:#0c1510;
  --panel2:#101a14;
  /* Lines: muted phosphor borders */
  --line:#1a2e22;
  --line2:#243d2e;
  /* Text hierarchy */
  --txt:#b8f0c8;
  --dim:#5f9a72;
  --dim2:#7eb892;
  --heading:#d4ffe0;
  /* Accents: classic phosphor green + secondary */
  --neon:#33ff66;
  --cyan:#00e5a0;
  --mag:#ff5c5c;
  --green:#33ff66;
  --amber:#c8f560;
  --neon-rgb: 51, 255, 102;
  --cyan-rgb: 0, 229, 160;
  --mag-rgb: 255, 92, 92;
  --sb-track: #0a120e;
  --sb-thumb: #243d2e;
  --sb-thumb-hover: var(--neon);
  --sb-thumb-active: var(--cyan);
  --btn-glow: none;
  --btn-glow-soft: none;
  --btn-glow-donate: none;
  color-scheme: dark;
}

/* Flat solid surfaces */
body[data-theme="hacker"] header,
body[data-theme="hacker"] .panel,
body[data-theme="hacker"] .toolbar,
body[data-theme="hacker"] footer,
body[data-theme="hacker"] .social-bar,
body[data-theme="hacker"] #shell .shell-panel,
body[data-theme="hacker"] .pal-panel,
body[data-theme="hacker"] .toast,
body[data-theme="hacker"] #bulkbar,
body[data-theme="hacker"] .search-box,
body[data-theme="hacker"] .more-menu,
body[data-theme="hacker"] .theme-menu,
body[data-theme="hacker"] .view-menu,
body[data-theme="hacker"] .fx-menu,
body[data-theme="hacker"] .lk-hero,
body[data-theme="hacker"] .lk-meta,
body[data-theme="hacker"] .lk-input-wrap{
  background: var(--panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-theme="hacker"] header{
  border-bottom: 1px solid var(--line2);
}
body[data-theme="hacker"] .panel{
  border: 1px solid var(--line2);
}
body[data-theme="hacker"] .bg-grid,
body[data-theme="hacker"] .scanlines{
  display: none !important;
}

/* Typography */
body[data-theme="hacker"] .glitch,
body[data-theme="hacker"] #dirTitle,
body[data-theme="hacker"] .clock #clkTime,
body[data-theme="hacker"] .row:hover .nm{
  color: var(--heading) !important;
  text-shadow: none !important;
}
body[data-theme="hacker"] .glitch::before,
body[data-theme="hacker"] .glitch::after{
  display: none !important;
}
body[data-theme="hacker"] .nm,
body[data-theme="hacker"] .tx-nm,
body[data-theme="hacker"] .shell-title,
body[data-theme="hacker"] .status,
body[data-theme="hacker"] .st-long,
body[data-theme="hacker"] .st-short{
  color: var(--txt) !important;
}
body[data-theme="hacker"] .brand-sub,
body[data-theme="hacker"] .clock #clkDate,
body[data-theme="hacker"] .ph-url,
body[data-theme="hacker"] .idx-info,
body[data-theme="hacker"] .crumb,
body[data-theme="hacker"] .c-size,
body[data-theme="hacker"] .c-date,
body[data-theme="hacker"] .c-ket,
body[data-theme="hacker"] .c-sub{
  color: var(--dim) !important;
}

/* Buttons — terminal flat */
body[data-theme="hacker"] .btn,
body[data-theme="hacker"] header .hright .btn,
body[data-theme="hacker"] header .hright a.btn{
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
body[data-theme="hacker"] .btn:hover,
body[data-theme="hacker"] header .hright .btn:hover,
body[data-theme="hacker"] header .hright a.btn:hover{
  background: var(--bg2) !important;
  color: var(--neon) !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="hacker"] .btn.neon,
body[data-theme="hacker"] .btn.neon:hover{
  background: var(--neon) !important;
  color: #050a07 !important;
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="hacker"] .btn.danger{
  color: var(--mag) !important;
  border-color: var(--mag) !important;
  background: var(--panel2) !important;
}
body[data-theme="hacker"] .btn.danger:hover{
  background: var(--mag) !important;
  color: #050a07 !important;
}
body[data-theme="hacker"] .btn-donate{
  color: var(--mag) !important;
  border-color: var(--mag) !important;
  background: var(--panel2) !important;
}
body[data-theme="hacker"] .tbtn,
body[data-theme="hacker"] .vbtn,
body[data-theme="hacker"] .ai{
  color: var(--dim2) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-theme="hacker"] .tbtn:hover,
body[data-theme="hacker"] .vbtn:hover,
body[data-theme="hacker"] .ai:hover{
  color: var(--neon) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
  transform: none !important;
}
body[data-theme="hacker"] .tbtn.on,
body[data-theme="hacker"] .vbtn.on{
  background: var(--neon) !important;
  color: #050a07 !important;
}

/* Tag / LED */
body[data-theme="hacker"] .tag{
  background: var(--neon) !important;
  color: #050a07 !important;
  box-shadow: none !important;
  letter-spacing: 0.12em;
}
body[data-theme="hacker"] .status .led{
  background: var(--neon) !important;
  box-shadow: none !important;
}

/* Rows */
body[data-theme="hacker"] .row:hover,
body[data-theme="hacker"] .tile-x:hover,
body[data-theme="hacker"] .row.selected,
body[data-theme="hacker"] .tile-x.selected{
  background: var(--bg2) !important;
}
body[data-theme="hacker"] .search-box:focus-within{
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="hacker"] .search-box input{
  color: var(--txt) !important;
  caret-color: var(--neon);
}
body[data-theme="hacker"] .search-box input::placeholder{
  color: var(--dim) !important;
  opacity: 1;
}

/* Shell / lock */
body[data-theme="hacker"] .shell-backdrop{
  background: rgba(5, 10, 7, 0.75) !important;
  backdrop-filter: none !important;
}
body[data-theme="hacker"] #shell .shell-panel{
  border: 1px solid var(--line2) !important;
}
body[data-theme="hacker"] #shell .shell-panel.shell-lock{
  border-color: var(--neon) !important;
  box-shadow: none !important;
}
body[data-theme="hacker"] .shell-corner{
  border-color: var(--neon) !important;
  opacity: 0.7;
  animation: none !important;
  filter: none !important;
}
body[data-theme="hacker"] .shell-scanline{
  display: none !important;
}
body[data-theme="hacker"] .lk-hero{
  border: 1px solid var(--line2) !important;
  border-left: 3px solid var(--neon) !important;
}
body[data-theme="hacker"] .lk-hero-ring{
  animation: none !important;
  box-shadow: none !important;
  border-color: var(--line2) !important;
}
body[data-theme="hacker"] .lk-hero-core{
  background: var(--bg2) !important;
  color: var(--neon) !important;
  animation: none !important;
}
body[data-theme="hacker"] .lk-kicker{
  color: var(--neon) !important;
  text-shadow: none !important;
  letter-spacing: 0.14em;
}
body[data-theme="hacker"] .lk-meta-v.mono{
  color: var(--cyan) !important;
  text-shadow: none !important;
}
body[data-theme="hacker"] .lk-err{
  background: #1a0a0a !important;
  border: 1px solid var(--mag) !important;
  color: var(--mag) !important;
}
body[data-theme="hacker"] .lk-notes{
  border: 1px solid var(--line2) !important;
  background: var(--panel2) !important;
}
body[data-theme="hacker"] .lk-notes li i{
  color: var(--neon) !important;
  filter: none !important;
}

/* Corners / selection / code */
body[data-theme="hacker"] .corner.tl,
body[data-theme="hacker"] .corner.tr,
body[data-theme="hacker"] .corner.bl,
body[data-theme="hacker"] .corner.br{
  border-color: var(--neon);
  filter: none;
  opacity: 0.85;
}
body[data-theme="hacker"] ::selection{
  background: var(--neon);
  color: #050a07;
}
body[data-theme="hacker"] code,
body[data-theme="hacker"] .md pre,
body[data-theme="hacker"] .hljs{
  background: var(--bg2) !important;
  color: var(--txt) !important;
}
body[data-theme="hacker"] #bulkbar{
  border-color: var(--neon) !important;
}
body[data-theme="hacker"] #bulkCount{
  color: var(--neon) !important;
}


/* ==========================================================================
   ABOUT — TENTANG PENYUSUN (detailed professional panel)
   ========================================================================== */
#shell .shell-panel.shell-about {
  width: min(1100px, 96vw) !important;
  max-height: min(94vh, 96dvh);
}
.ab-root {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 4px;
}
.ab-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line2);
  background: var(--panel2);
}
.ab-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neon);
  color: var(--neon);
  font-size: 28px;
  background: var(--panel);
}
.ab-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ab-name {
  margin: 0 0 4px;
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--heading, var(--txt));
}
.ab-tagline {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ab-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ab-badge {
  font-size: 10px;
  padding: 4px 8px;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--dim2);
  letter-spacing: 0.04em;
}
.ab-badge i {
  color: var(--neon);
  margin-right: 4px;
}
.ab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .ab-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ab-card {
  border: 1px solid var(--line2);
  background: var(--panel);
  padding: 12px 14px;
}
.ab-card-h {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--neon);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt);
}
.ab-p:last-child { margin-bottom: 0; }
.ab-p.muted { color: var(--dim); font-size: 12px; }
.ab-p b { color: var(--heading, var(--txt)); }

.ab-roles { display: flex; flex-direction: column; gap: 10px; }
.ab-role {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ab-role-ic {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  color: var(--cyan);
  font-size: 13px;
  background: var(--panel2);
}
.ab-role-t {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.03em;
}
.ab-role-d {
  font-size: 11px;
  color: var(--dim);
  line-height: 1.4;
  margin-top: 2px;
}

.ab-kvlist { display: flex; flex-direction: column; gap: 0; }
.ab-kv {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.ab-kv:last-child { border-bottom: 0; }
.ab-k {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}
.ab-v { color: var(--txt); }

.ab-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-quotes li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim2);
  padding: 8px 10px;
  border-left: 2px solid var(--neon);
  background: var(--panel2);
}

.ab-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line2);
  background: var(--panel2);
  color: var(--txt);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ab-pill:hover {
  border-color: var(--neon);
  color: var(--neon);
}
.ab-socs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ab-soc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--dim2);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.ab-soc:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.ab-soc i { width: 14px; text-align: center; }

.ab-foot {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 480px) {
  .ab-hero { flex-direction: column; text-align: center; }
  .ab-badges { justify-content: center; }
  .ab-kicker { justify-content: center; }
  .ab-kv { grid-template-columns: 1fr; gap: 2px; }
}


/* ==========================================================================
   CYBER MODAL COMPONENT — reusable DIR//LISTER chrome
   Classes: .cyber-modal (on #shell) · .shell-panel.cyber · size modifiers
   ========================================================================== */
#shell.cyber-modal {
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
#shell.cyber-modal.open {
  display: flex !important;
}
#shell.cyber-modal .shell-backdrop {
  background: rgba(4, 8, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#shell.cyber-modal .shell-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: 0.5;
}

#shell .shell-panel.cyber {
  position: relative;
  width: min(640px, 96vw);
  max-height: min(92vh, 92dvh);
  display: flex;
  flex-direction: column;
  background: var(--panel, #0b1015);
  border: 1px solid var(--line2, #28394a);
  box-shadow:
    0 0 0 1px rgba(var(--neon-rgb, 252, 238, 10), 0.08),
    0 24px 64px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: cyberModalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#shell .shell-panel.cyber.cyber-sm { width: min(420px, 96vw); max-height: min(90vh, 90dvh); }
#shell .shell-panel.cyber.cyber-md { width: min(720px, 96vw); max-height: min(92vh, 92dvh); }
#shell .shell-panel.cyber.cyber-lg { width: min(1000px, 97vw); max-height: min(94vh, 94dvh); }
#shell .shell-panel.cyber.cyber-xl { width: min(1240px, 98vw); max-height: min(96vh, 96dvh); }

@keyframes cyberModalIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Corner brackets */
#shell .shell-panel.cyber .shell-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 5;
  border-color: var(--neon, #fcee0a);
  opacity: 0.75;
}
#shell .shell-panel.cyber .shell-corner.tl { top: 5px; left: 5px; border-top: 2px solid; border-left: 2px solid; }
#shell .shell-panel.cyber .shell-corner.tr { top: 5px; right: 5px; border-top: 2px solid; border-right: 2px solid; }
#shell .shell-panel.cyber .shell-corner.bl { bottom: 5px; left: 5px; border-bottom: 2px solid; border-left: 2px solid; }
#shell .shell-panel.cyber .shell-corner.br { bottom: 5px; right: 5px; border-bottom: 2px solid; border-right: 2px solid; }

/* Scanline */
#shell .shell-panel.cyber .shell-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 35%;
  top: 0;
  background: linear-gradient(180deg, transparent, rgba(var(--neon-rgb, 252, 238, 10), 0.05), transparent);
  pointer-events: none;
  z-index: 2;
  animation: neonScan 5.5s linear infinite;
  opacity: 0.55;
}

/* Head */
#shell .shell-panel.cyber .shell-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(var(--neon-rgb, 252, 238, 10), 0.06), transparent);
  flex: 0 0 auto;
}
#shell .shell-panel.cyber .shell-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
#shell .shell-panel.cyber #mIcon {
  color: var(--neon);
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(var(--neon-rgb, 252, 238, 10), 0.35));
}
#shell .shell-panel.cyber .shell-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heading, var(--txt));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shell .shell-panel.cyber .shell-meta {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--dim);
  letter-spacing: 0.06em;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#shell .shell-panel.cyber .shell-x {
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid var(--line2);
  background: var(--panel2);
  color: var(--dim);
  cursor: pointer;
}
#shell .shell-panel.cyber .shell-x:hover {
  border-color: var(--mag);
  color: var(--mag);
}

/* Body / foot */
#shell .shell-panel.cyber .shell-body {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
#shell .shell-panel.cyber .shell-foot {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line2);
  background: var(--panel2);
}

/* Tone variants */
#shell .shell-panel.cyber.cyber-tone-cyan {
  border-color: rgba(var(--cyan-rgb, 0, 240, 255), 0.35);
}
#shell .shell-panel.cyber.cyber-tone-cyan .shell-head {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb, 0, 240, 255), 0.08), transparent);
}
#shell .shell-panel.cyber.cyber-tone-cyan #mIcon,
#shell .shell-panel.cyber.cyber-tone-cyan .shell-corner {
  color: var(--cyan);
  border-color: var(--cyan);
}
#shell .shell-panel.cyber.cyber-tone-mag {
  border-color: rgba(var(--mag-rgb, 255, 42, 109), 0.35);
}
#shell .shell-panel.cyber.cyber-tone-mag #mIcon,
#shell .shell-panel.cyber.cyber-tone-mag .shell-corner {
  color: var(--mag);
  border-color: var(--mag);
}

/* Inner content helpers */
.cyber-block {
  border: 1px solid var(--line2);
  background: var(--panel2);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.cyber-block-h {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--neon);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cyber-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cyber-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt);
}
.cyber-muted {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  #shell .shell-panel.cyber .shell-meta { display: none; }
  #shell .shell-panel.cyber .shell-body { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #shell .shell-panel.cyber { animation: none !important; }
  #shell .shell-panel.cyber .shell-scanline { animation: none !important; }
}
body.perf-lite #shell .shell-panel.cyber .shell-scanline { display: none !important; }


/* Notify history panel */
.nf-list{display:flex;flex-direction:column;gap:8px;max-height:min(50vh,420px);overflow:auto}
.nf-item{border:1px solid var(--line2);background:var(--panel2);padding:10px 12px;border-left:3px solid var(--cyan)}
.nf-item.nf-warn{border-left-color:var(--neon)}
.nf-item.nf-err{border-left-color:var(--mag)}
.nf-item.nf-ok{border-left-color:var(--green)}
.nf-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.nf-type{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--neon)}
.nf-time{font-size:10px;color:var(--dim);white-space:nowrap}
.nf-msg{font-size:12px;color:var(--txt);line-height:1.45;word-break:break-word}
#notifyBadge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--mag);color:#fff;font-size:9px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}


/* ==========================================================================
 * DIRLISTER FX anti-wash — cegah layar putih pudar saat rain/FX/game
 * ========================================================================== */
#rain,
#rain.is-on,
canvas#rain {
  mix-blend-mode: normal !important;
  opacity: 0.55 !important;
  filter: none !important;
  background: transparent !important;
}
#rain.rain-love,
#rain.rain-digital,
#rain.rain-fx {
  opacity: 0.58 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
/* Saat FX mati: pastikan canvas tidak menutupi konten */
#rain:not(.is-on) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Game Arcade terbuka: sembunyikan rain agar tidak double-layer */
body.game-hub-open #rain,
body.game-hub-open #rain.is-on {
  display: none !important;
  visibility: hidden !important;
}
/* Glitch overlay tidak boleh menutup putih */
#glitchFx {
  mix-blend-mode: soft-light !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}
body.glitch-burst #glitchFx {
  opacity: 0.45 !important;
}
.bg-grid {
  opacity: 0.28 !important;
  mix-blend-mode: normal !important;
}
.scanlines {
  opacity: 0.18 !important;
  mix-blend-mode: normal !important;
}


/* ==========================================================================
   INDEX topbar responsive + full-width content
   Progressive text hide when header is crowded; main/panel edge-to-edge.
   ========================================================================== */

/* Full-width content surface */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body > header,
body > main,
#app,
.shell {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
main {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
main .panel {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* Header: single row, shrink brand first */
header {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow: hidden;
}
header .brand {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}
header .hright {
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
}

/* —— ≤1280: icon-only action labels (anti clip), keep MURID visible —— */
@media (max-width: 1280px) {
  header .hright .btn .btn-txt,
  header .hright a.btn .btn-txt {
    display: none !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  header .clock {
    display: none !important; /* free space */
  }
  header .status .st-long {
    display: none !important;
  }
  header .status .st-short {
    display: inline !important;
  }
}

/* —— ≤900: hide brand subtitle —— */
@media (max-width: 900px) {
  header .brand-sub {
    display: none !important;
  }
  header {
    height: 56px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  main {
    padding: 10px max(10px, env(safe-area-inset-right, 0px))
             calc(12px + env(safe-area-inset-bottom, 0px))
             max(10px, env(safe-area-inset-left, 0px)) !important;
  }
}

/* —— ≤560: compact status + smaller icons —— */
@media (max-width: 560px) {
  header .hright {
    gap: 4px !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
  }
  header .status {
    padding: 4px 7px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
  main {
    padding: 8px max(8px, env(safe-area-inset-right, 0px))
             calc(10px + env(safe-area-inset-bottom, 0px))
             max(8px, env(safe-area-inset-left, 0px)) !important;
  }
  .panel-head {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .toolbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .index-line {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* —— ≤400: hide status chip text body if still tight (keep LED) —— */
@media (max-width: 400px) {
  header .status .st-body {
    display: none !important;
  }
  header .status {
    padding: 6px !important;
    min-width: 0;
  }
  header .hright .btn,
  header .hright a.btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
  }
}

/* Desktop wide: restore full button labels */
@media (min-width: 1281px) {
  header .hright .btn .btn-txt,
  header .hright a.btn .btn-txt {
    display: inline !important;
  }
  header .hright .btn,
  header .hright a.btn {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
  }
  header .clock {
    display: block !important;
  }
  main {
    padding: 16px 20px 18px !important;
  }
}

/* Ensure MURID stays visible on all sizes (from earlier patch) */
@media (max-width: 1280px) {
  header .hright a.btn.btn-murid {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}


/* Mobile brand short: RJ//D */
.brand-title .bm-short{
  display: inline-block;
  font: 700 16px/1.1 var(--disp, system-ui);
  letter-spacing: 1.5px;
  color: var(--neon, #fcee0a);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 560px){
  .brand-title .bm-short{
    font-size: 15px;
    letter-spacing: 1.2px;
  }
}
@media (max-width: 400px){
  .brand-title .bm-short{
    font-size: 14px;
    letter-spacing: 1px;
  }
}


/* ===== FORCE DONASI visible — Desktop / Tablet / Mobile ===== */
header .hright #btnDonate,
header .hright .btn-donate,
.hright #btnDonate,
.hright .btn-donate,
button#btnDonate.btn-donate {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}
@media (max-width: 1024px) {
  header .hright #btnDonate,
  header .hright .btn-donate {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  header .hright #btnDonate .btn-txt,
  header .hright .btn-donate .btn-txt {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  header .hright #btnDonate .btn-txt,
  header .hright .btn-donate .btn-txt {
    display: inline !important;
  }
}


/* ===== FORCE SOSIAL MEDIA BAR visible (Desktop / Tablet / Mobile) ===== */
footer.social-bar,
.social-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 6 !important;
  min-height: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.social-bar .social-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.social-bar .soc {
  display: inline-flex !important;
  visibility: visible !important;
}
.social-bar .soc-empty {
  border-style: dashed;
  color: var(--dim, #8fa0b0);
  opacity: 0.9;
}



/* Device pixel ratio buckets (set by dlApplyDpr) */
html[data-dpr="1"]{ --hairline: 1px; }
html[data-dpr="1.5"]{ --hairline: 0.67px; }
html[data-dpr="2"]{ --hairline: 0.5px; }
html[data-dpr="3"]{ --hairline: 0.33px; }

/* ===== HTML full-screen overlay — orientation + safe-area tuned ===== */
html.html-fs-lock,
body.html-fs-lock{
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Safe-area CSS variables (update otomatis saat rotate) */
#shell.is-html-fs{
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

#shell.is-html-fs.open,
#shell.is-html-fs{
  z-index: 12000 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  width: 100dvw !important;
  height: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #06080a !important;
  box-sizing: border-box !important;
}

#shell.is-html-fs .shell-panel,
#shell.is-html-fs #shellPanel{
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: #06080a !important;
  box-sizing: border-box !important;
  padding-top: var(--sa-t) !important;
  padding-bottom: var(--sa-b) !important;
  padding-left: var(--sa-l) !important;
  padding-right: var(--sa-r) !important;
}

#shell.is-html-fs .shell-head{
  flex: 0 0 auto !important;
  border-bottom: 1px solid rgba(0,240,255,.14) !important;
  background: rgba(6,8,10,.96) !important;
  padding: 10px 12px !important;
  min-height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#shell.is-html-fs .shell-head .shell-title,
#shell.is-html-fs .shell-head h2,
#shell.is-html-fs #mTitle{
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(55vw, 420px);
}
#shell.is-html-fs .shell-meta,
#shell.is-html-fs #mMeta{
  font-size: 10px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

#shell.is-html-fs #mBody,
#shell.is-html-fs .shell-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}

#shell.is-html-fs .html-fs-wrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  background: #0a0e12 !important;
  contain: strict;
}

#shell.is-html-fs .html-fs-loading{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,14,18,.9);
  color: var(--cyan, #00f0ff);
  font: 600 11px/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .15s ease;
}
#shell.is-html-fs .html-fs-loading.is-done{ opacity: 0; }
#shell.is-html-fs .html-fs-load-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(0,240,255,.2);
  background: rgba(0,0,0,.35);
}

#shell.is-html-fs .html-fs-frame,
#shell.is-html-fs iframe.html-fs-frame{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  background: #0a0e12 !important;
  display: block !important;
  contain: strict;
}

#shell.is-html-fs .shell-foot,
#shell.is-html-fs #mFoot{
  flex: 0 0 auto !important;
  border-top: 1px solid rgba(0,240,255,.12) !important;
  background: rgba(6,8,10,.96) !important;
  padding: 8px 10px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#shell.is-html-fs .shell-foot .btn,
#shell.is-html-fs .shell-foot button{
  min-height: 40px;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 8px 12px;
}

/* Portrait (data-attr + media) */
html[data-orient="portrait"] #shell.is-html-fs .shell-meta,
html[data-orient="portrait"] #shell.is-html-fs #mMeta,
#shell.is-html-fs.orient-portrait .shell-meta,
#shell.is-html-fs.orient-portrait #mMeta{
  display: none !important;
}
@media (max-width: 720px) and (orientation: portrait){
  #shell.is-html-fs .shell-head{
    padding: 8px 10px !important;
    min-height: 44px !important;
  }
  #shell.is-html-fs .shell-foot .btn,
  #shell.is-html-fs .shell-foot button{
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 42px;
  }
  #shell.is-html-fs .shell-foot .btn.neon,
  #shell.is-html-fs .shell-foot button.neon{
    flex: 1 1 100%;
  }
}

/* Landscape pendek */
html[data-orient="landscape"] #shell.is-html-fs .shell-head,
#shell.is-html-fs.orient-landscape .shell-head{
  min-height: 36px !important;
  padding: 4px 10px !important;
}
html[data-orient="landscape"] #shell.is-html-fs .shell-meta,
#shell.is-html-fs.orient-landscape .shell-meta,
html[data-orient="landscape"] #shell.is-html-fs #mMeta,
#shell.is-html-fs.orient-landscape #mMeta{
  display: none !important;
}
@media (orientation: landscape) and (max-height: 500px){
  #shell.is-html-fs .shell-head{
    min-height: 34px !important;
    max-height: 38px !important;
    padding: 4px 8px !important;
  }
  #shell.is-html-fs .shell-foot{
    padding: 4px 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  #shell.is-html-fs .shell-foot .btn,
  #shell.is-html-fs .shell-foot button{
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 9px !important;
  }
}

@supports not (height: 100dvh){
  #shell.is-html-fs{ height: 100vh !important; }
  html.html-fs-lock, body.html-fs-lock{ height: 100vh !important; }
}

/* ===== PDF full-screen responsive overlay ===== */
#shell.is-pdf-fs{
  z-index: 12000;
}
#shell.is-pdf-fs .shell-panel{
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
#shell.is-pdf-fs .shell-head{
  flex-shrink: 0;
  border-bottom: 1px solid var(--line2, #28394a);
  background: rgba(6,8,10,.96);
}
#shell.is-pdf-fs #mBody,
#shell.is-pdf-fs .shell-body{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#shell.is-pdf-fs .pdf-fs-wrap{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  background: #12161c;
}
#shell.is-pdf-fs .pdf-fs-loading{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #12161c;
  color: var(--mag, #ff2a6d);
  font: 600 12px/1 var(--mono, system-ui, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
#shell.is-pdf-fs .pdf-fs-frame{
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
  border: 0;
  background: #12161c;
}
#shell.is-pdf-fs .shell-foot{
  flex-shrink: 0;
  border-top: 1px solid var(--line2, #28394a);
  background: rgba(6,8,10,.96);
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px){
  #shell.is-pdf-fs .shell-head .shell-meta{ display: none; }
  #shell.is-pdf-fs .pdf-fs-frame{
    min-height: calc(100vh - 108px);
    min-height: calc(100dvh - 108px);
  }
  #shell.is-pdf-fs .shell-foot .btn{
    flex: 1 1 auto;
    min-height: 40px;
  }
}
@media (max-width: 420px){
  #shell.is-pdf-fs .shell-title{
    font-size: 13px;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === Hub tools + card preview polish (v26.0922-pro) === */
.tbtn.hub-tool{position:relative}
.tbtn.hub-tool#btnGameHub{color:var(--neon,#fcee0a)}
.tbtn.hub-tool#btnQuizHub{color:var(--cyan,#00f0ff)}
.tbtn.hub-tool#btnCourseHub{color:#38bdf8}
.tbtn.hub-tool:hover{filter:brightness(1.15)}
.tx-thumb,.tx-cover{
  width:100%;height:100%;object-fit:cover;display:block;
  background:rgba(0,0,0,.35);
  image-rendering:auto;
}
.tile-x .tx-media,.tile-x .t-media,.tx-media{
  overflow:hidden;background:rgba(0,0,0,.25);
}
.tx-vid-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:48px;
  background:linear-gradient(145deg,rgba(0,240,255,.08),rgba(0,0,0,.35));
}
.tx-vid-badge{
  position:absolute;bottom:4px;right:4px;
  font:700 8px/1 var(--mono,ui-monospace,monospace);
  letter-spacing:.08em;padding:3px 5px;
  background:rgba(0,0,0,.65);color:var(--cyan,#00f0ff);
  border:1px solid rgba(0,240,255,.35);
}
.view-tiles .tx-thumb,.view-icons-md .tx-thumb,.view-icons-lg .tx-thumb,.view-icons-xl .tx-thumb,
[data-view="tiles"] .tx-thumb,[data-view="icons-md"] .tx-thumb,[data-view="icons-lg"] .tx-thumb{
  min-height:64px;
}
.view-icons-lg .tx-thumb,.view-icons-xl .tx-thumb{min-height:96px}

/* === Tools menu order + colored icons (v26.0922-pro) === */
.tools-sep{
  display:inline-block;width:1px;align-self:center;height:16px;
  margin:0;padding:0;border:0;
  background:var(--line2,#28394a);opacity:.7;flex:0 0 1px;
}
/* Slot transparan — anak ikut layout .tools (tanpa box ekstra / spasi) */
.hub-slot{display:contents}
.tools > .hub-slot > .tbtn{border-left:1px solid var(--line2)}
#btnSound + .hub-slot > .tbtn:first-child,
#btnSound + #btnGameHub{border-left:1px solid var(--line2)}
/* Public/murid: sembunyikan separator yatim saat tombol .adm hilang */
body:not(.admin) #hubSlot + .tools-sep,
body:not(.admin) .tools-sep.adm-sep{
  display:none!important;
  width:0!important;flex:0 0 0!important;min-width:0!important;
  margin:0!important;padding:0!important;border:0!important;opacity:0!important;
}

/* Nav */
#btnRefresh{color:#7dd3fc}
#btnFS{color:#a5b4fc}
#btnPal{color:#c4b5fd}
/* View */
#btnPreviewPane{color:#67e8f9}
#btnSlides{color:#5eead4}
#btnStats{color:#86efac}
/* FX */
#btnRain{color:#38bdf8}
#btnRainLove{color:#fb7185}
#btnFx{color:#e879f9}
#btnSound{color:#fbbf24}
/* Hubs */
#btnGameHub,.hub-tool#btnGameHub{color:var(--neon,#fcee0a)!important}
#btnQuizHub,.hub-tool#btnQuizHub{color:var(--cyan,#00f0ff)!important}
#btnCourseHub,.hub-tool#btnCourseHub{color:#38bdf8!important}
/* File ops */
#btnMkdir{color:#fcd34d}
#btnMkfile{color:#fde68a}
#btnUpload{color:#34d399}
/* Admin */
#btnDashboard{color:#f97316}
#btnAudit{color:#fb923c}
#btnUsers{color:#fdba74}
/* Social */
#btnCommunity{color:#a78bfa}
#btnProfile{color:#c4b5fd}
/* Chrome */
#btnMore{color:var(--dim,#8fa0b0)}
#btnTheme,#btnThemeIcon{color:#f9a8d4}
#btnView,#btnViewIcon{color:#94a3b8}

.tbtn:hover{filter:brightness(1.2)}
.tbtn.on{filter:none}
.tbtn.adm:not(.need-admin){/* keep */ }


/* RANKED TOGGLE: never in listing toolbar */
.tools #ghRankedToggle,
.toolbar #ghRankedToggle,
#hubSlot #ghRankedToggle,
.tools button.tbtn#ghRankedToggle,
.toolbar button.tbtn#ghRankedToggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
#gameHub .gh-bar #ghRankedToggle.gh-btn {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
}