body{background:#09090b;color:#f4f4f5;font-family:Inter,system-ui,sans-serif}
::selection{background:#e4e4e7;color:#09090b}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#09090b}::-webkit-scrollbar-thumb{background:#27272a;border-radius:8px}
.grid-bg{background-image:linear-gradient(#27272a55 1px,transparent 1px),linear-gradient(90deg,#27272a55 1px,transparent 1px);background-size:36px 36px}
.glow{transition:transform .3s,border-color .3s,box-shadow .3s}
.glow:hover{transform:translateY(-4px) scale(1.01);border-color:#52525b;box-shadow:0 0 32px -8px #e4e4e733}
.caret::after{content:"▌";margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tab-on{background:#e4e4e7;color:#09090b;border-color:#e4e4e7}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #e4e4e7;outline-offset:2px}

/* File explorer: kolom */
.fh-cols{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.75rem 1rem}
.fh-cols .c-size,.fh-cols .c-type{display:none}
.fh-cols>*:last-child{justify-self:end}
@media(min-width:640px){
  .fh-cols{grid-template-columns:minmax(0,1fr) 90px 110px 130px}
  .fh-cols .c-size,.fh-cols .c-type{display:block}
}
/* File explorer: area scroll mulus + blur */
.fh-scroll{max-height:min(26rem,65vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3f3f46 transparent}
.fh-scroll::-webkit-scrollbar{width:8px}.fh-scroll::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:8px}
.fh-inner{filter:blur(var(--b,0px));transition:filter .18s ease-out}
.fh-row{border-bottom:1px solid #27272a99;transition:background .2s,opacity .55s,filter .55s;opacity:0;filter:blur(10px)}
.fh-row.in{opacity:1;filter:none}
.fh-row:hover{background:#27272a4d}
.fh-fade{position:absolute;left:0;right:0;height:64px;z-index:5;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fh-fade.top{top:0;background:linear-gradient(#121215,transparent);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.fh-fade.bot{bottom:0;background:linear-gradient(transparent,#121215);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.fh-fade.on{opacity:1;visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fh-row{opacity:1;filter:none}.fh-inner{filter:none}}
