:root {
  --bg: #07080c;
  --panel: #0d0f16;
  --ink: #d5d9e3;
  --ink-strong: #f5f7fa;
  --muted: #a0a7b4;
  --blue: #00bfff;
  --blue-2: #0099ff;
  --radius: 12px;
  --speed: 180ms;
  --ring: rgba(255,255,255,.07);
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Rajdhani', sans-serif;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #0099ff #0a0c12;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0a0c12; }
body::-webkit-scrollbar-thumb { background: #0099ff; border-radius: 5px; border: 2px solid #0a0c12; box-shadow: 0 0 8px rgba(0,191,255,.4); }
body::-webkit-scrollbar-thumb:hover { background: #00bfff; }

body > h1, body > hr, body > pre { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 52px;
  background: linear-gradient(180deg, #0b0d14f0, #08090ef0);
  border-bottom: 1px solid rgba(0,191,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.topbar-icon { color: var(--blue); font-size: 15px; }
.topbar-path {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .4px;
}
.topbar-path .seg { color: var(--blue); }
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar-count {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--muted);
  opacity: .65;
  letter-spacing: .3px;
}
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 5px 10px;
}
.topbar-search i { color: var(--muted); font-size: 11px; opacity: .7; }
.topbar-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  width: 140px;
}
.topbar-search input::placeholder { color: var(--muted); opacity: .5; }

.dl-banner {
  text-align: center;
  padding: 10px 20px;
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  color: var(--blue);
  opacity: .55;
  background: linear-gradient(180deg, rgba(0,191,255,.04), transparent);
  border-bottom: 1px solid rgba(0,191,255,.06);
}
.dl-banner i { margin-right: 6px; font-size: 11px; }

.wrap {
  max-width: 900px;
  margin: 28px auto 60px;
  padding: 0 20px;
}

.file-panel {
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,191,255,.05),
    inset 0 0 40px rgba(0,191,255,.03);
}

.col-head {
  display: grid;
  grid-template-columns: 26px 1fr 150px 88px;
  gap: 0 14px;
  padding: 9px 18px;
  background: rgba(0,191,255,.035);
  border-bottom: 1px solid var(--ring);
  font-family: 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
.col-head .col-size { text-align: right; }

.file-row {
  display: grid;
  grid-template-columns: 26px 1fr 150px 88px;
  gap: 0 14px;
  padding: 9px 18px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.03);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--speed), box-shadow var(--speed), color var(--speed);
  cursor: pointer;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover {
  background: rgba(0,191,255,.055);
  box-shadow: inset 3px 0 0 var(--blue);
  color: var(--ink-strong);
}
.file-row:hover .col-icon { color: var(--blue); }
.file-row:hover .col-date,
.file-row:hover .col-size { color: var(--ink); opacity: .9; }

.col-icon {
  font-size: 13px;
  text-align: center;
  transition: color var(--speed);
}
.col-name {
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-date {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  white-space: nowrap;
  transition: opacity var(--speed);
}
.col-size {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  text-align: right;
  white-space: nowrap;
  transition: opacity var(--speed);
}

.row-parent .col-icon { color: var(--muted); opacity: .6; }
.row-parent .col-name { color: var(--muted); }
.row-dir .col-icon    { color: var(--blue); opacity: .85; }
.row-dir .col-name    { color: #9fd8ff; }
.row-zip .col-icon    { color: #a78bfa; }
.row-tar .col-icon    { color: #f59e0b; }
.row-img .col-icon    { color: #34d399; }
.row-text .col-icon   { color: #94a3b8; }
.row-hash .col-icon   { color: #64748b; }

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  opacity: .5;
}

@media (max-width: 620px) {
  .col-head,
  .file-row { grid-template-columns: 24px 1fr 80px; }
  .col-date  { display: none; }
  .topbar-search { display: none; }
}