:root{--bg:#050516;--panel:#050516;--accent:#00e5a0;--text:#e7edf5;--muted:#8ea0b3}
*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,sans-serif}

/* Hide browser scrollbar */
html {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar {
  display: none !important;
}

body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  display: none !important;
}
.panel{display:flex;flex-direction:column;height:100%;background:var(--panel)}
.panel-header{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #1d2338}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;background:#0f1423;color:var(--text);border:1px solid #202840;border-radius:8px;padding:8px 10px}
.tabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid #1d2338;}
.tab{padding:6px 10px;border-radius:8px;background:#0f1423;color:var(--muted);cursor:pointer}
.tab.active{background:#0a1920;color:var(--text);outline:1px solid #203040}
.categories-list ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 12px}
.categories-list li{background:#1f2328;border-radius:12px;padding:6px 10px;color:var(--muted)}
.badge{display:inline-block;background:#1f2328;border:1px solid #263045;color:var(--muted);border-radius:9999px;padding:4px 8px;font-size:11px;line-height:1;white-space:nowrap}
.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px;align-content:start;align-items:start;overflow-y:auto}

/* Disable virtual scrolling for "All" category */
.grid:not(.virtual-scroll) {
  overflow-y: auto !important;
  max-height: none !important;
  height: auto !important;
  min-height: 800px !important;
}

/* Custom scrollbar styling */
.grid:not(.virtual-scroll)::-webkit-scrollbar {
  width: 8px !important;
}

.grid:not(.virtual-scroll)::-webkit-scrollbar-track {
  background: #0f1423 !important;
  border-radius: 4px !important;
}

.grid:not(.virtual-scroll)::-webkit-scrollbar-thumb {
  background: #00e5a0 !important;
  border-radius: 4px !important;
}

.grid:not(.virtual-scroll)::-webkit-scrollbar-thumb:hover {
  background: #00c080 !important;
}

/* Firefox scrollbar */
.grid:not(.virtual-scroll) {
  scrollbar-width: thin !important;
  scrollbar-color: #00e5a0 #0f1423 !important;
}
.hlist::-webkit-scrollbar{height:8px}
.hlist::-webkit-scrollbar-thumb{background:#202840;border-radius:8px}
.section{border-bottom:1px solid #1d2338;margin-bottom:12px;padding-bottom:8px}
#recent .section-header{border-bottom:1px solid #1d2338;padding-bottom:8px;margin-bottom:8px}
.hlist .card{border-color:#263045}
.card{background:#0f1423;border:1px solid #1f2a3e;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.card>*{flex:0 0 auto}
.thumb{position:relative;height:140px;background:#050516;overflow:hidden}
.thumb img{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;display:block}
.title{padding:6px 8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;border-bottom:1px solid #1d2338}
.footer{padding:8px 12px;border-top:1px solid #1d2338;display:flex;justify-content:space-between;color:var(--muted)}
.btn{background:var(--accent);color:#001a12;border:0;border-radius:10px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;min-width:84px}

/* Virtual scrolling styles */
#grid.virtual-scroll {
  display: block !important;
  overflow: auto !important;
  height: 400px !important;
  grid-template-columns: none !important;
  max-height: 400px !important;
}

#grid.virtual-scroll .virtual-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 6px;
  height: 280px;
}

#virtual-content {
  position: relative;
  width: 100%;
}