:root{
  --bg: #0b0c0e;
  --panel: #121317;
  --panel-2: #1a1c21;
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --accent: #a78bfa;
  --accent-2:#7c3aed;
  --chip:#242634;
  --chip-border:#34374a;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding-top: 70px; /* Space for fixed header */
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:10px 14px; background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid #1f2230;
}
.brand{font-weight:700; letter-spacing:0.2px}
.controls{display:flex; gap:12px; align-items:center; flex:1; flex-wrap:wrap}
#search{
  flex:1 1 140px; max-width:260px; /* Reduced width by half */
  background:#0f1117; color:var(--text);
  border:1px solid #222538; border-radius:8px; padding:10px 12px;
  outline:none; box-shadow:none;
}
#search:focus{border-color:var(--accent)}
.select-wrap{position:relative; display:flex; align-items:center; gap:6px; background:var(--chip); border:1px solid var(--chip-border); padding:6px 10px; border-radius:8px}
.select-wrap span{color:var(--muted); font-size:12px}
.select-wrap select{
  background:transparent; color:var(--text); border:none; outline:none;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:24px; cursor:pointer;
}
.select-wrap:after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--muted);
  font-size:12px;
}
.stats{color:var(--muted); font-size:12px}

/* Dual post count range slider */
.range-wrap{
  display:flex; align-items:center; gap:8px; background:var(--chip);
  border:1px solid var(--chip-border); padding:6px 10px; border-radius:8px;
  min-width:200px; flex:1; position:relative;
}
.range-wrap span{color:var(--muted); font-size:12px}
.dual-range{
  position:relative; flex:1; height:20px;
}
.range-slider{
  position:absolute; width:100%; height:12px; /* Match thumb height for proper centering */
  background:transparent; top:2px; /* Moved up 2px for better centering */
  outline:none; -webkit-appearance:none; appearance:none;
  pointer-events:none;
}
.range-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; background:var(--accent);
  border-radius:50%; cursor:pointer; pointer-events:auto;
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
  position:relative; z-index:2;
}
.range-slider::-moz-range-thumb{
  width:12px; height:12px; background:var(--accent);
  border-radius:50%; border:none; cursor:pointer; pointer-events:auto;
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
  position:relative; z-index:2;
}
.range-track{
  position:absolute; top:8px; left:0; right:0;
  height:4px; background:#222538; border-radius:2px;
}
.range-progress{
  position:absolute; top:8px; height:4px;
  background:var(--accent); border-radius:2px;
  transition:all 0.1s ease;
}
.range-values{
  display:flex; align-items:center; gap:4px;
  color:var(--text); font-size:11px; white-space:nowrap;
}
.range-values input{
  width:60px; padding:2px 4px; font-size:11px;
  background:var(--panel); color:var(--text);
  border:1px solid #222538; border-radius:4px;
  text-align:center; outline:none;
}
.range-values input:focus{
  border-color:var(--accent);
}
.range-values span{
  color:var(--muted); margin:0 2px;
}

.gallery{
  /* Virtual scrolling: no grid layout needed, just basic container */
  padding:14px;
  position: relative;
  min-height: 100vh; /* Ensure proper height for virtual scrolling */
}

/* Virtual scrolling container */
.virtual-scroll-container {
  position: relative;
}
.card{
  background:var(--panel); border:1px solid #1f2230; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
  /* Removed min-height:100% - was making cards massive in virtual scroll! */
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  cursor: pointer;
}
.card:hover{
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
}
.thumb{position:relative; background:#0f1117}
.thumb img{
  width:100%;
  display:block;
  /* Show full 1024x1024 images without cropping */
  object-fit: contain;
  aspect-ratio: 1 / 1;
}
.thumb .copy-overlay{ display:none }
.sampler-active{color:var(--accent)}
.meta{padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.tag{font-weight:600; word-break:break-word; background:transparent; border:none; padding:0; margin:0; color:var(--text); text-align:left}
.tag.clickable{cursor:pointer}
.tag.clickable:hover{text-decoration:underline dotted}
.tag:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.tag.copied::after{content:"  (copied)"; color:var(--accent); font-weight:500}
.meta-sub{display:flex; gap:10px; color:var(--muted); font-size:12px}
.coverage{margin-left:auto; color:var(--muted)}
.coverage.full{color:var(--accent)}
.sentinel{height:80px}

.btn{background:var(--chip); color:var(--text); border:1px solid var(--chip-border); padding:6px 10px; border-radius:8px; cursor:pointer;}
.btn:hover{border-color:var(--accent)}

/* Modal */
.hidden{display:none}
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100}
.modal-content{background:var(--panel-2); border:1px solid #26293a; border-radius:10px; width:min(1600px, 96vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden}
.modal-close{position:absolute; margin:8px; align-self:flex-end; background:transparent; color:#bbb; border:none; font-size:24px; cursor:pointer}
.modal-main{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px; min-height:0; align-items:stretch}
.modal-img-wrap{background:#0e1016; display:block; overflow:auto; border:1px solid #1f2230; border-radius:8px; user-select:none; touch-action:none}
.modal-img-wrap img{max-width:none; max-height:none; transform-origin:center;}
.modal-img-wrap{scrollbar-color: var(--accent) #0f1117; scrollbar-width: thin}
.modal-img-wrap::-webkit-scrollbar{width:10px; height:10px}
.modal-img-wrap::-webkit-scrollbar-track{background:#0f1117; border-radius:8px}
.modal-img-wrap::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),#6d28d9); border-radius:8px}
.modal-img-wrap.grabbing{cursor:grabbing}
.modal-img-wrap{cursor:grab}
.modal-info{min-width:320px; max-width:420px; display:flex; flex-direction:column; gap:8px; background:var(--panel); border:1px solid #1f2230; border-radius:8px; padding:10px}
.kv{display:flex; gap:8px; align-items:flex-start}
.kv span{min-width:88px; color:var(--muted)}
.kv code, .kv pre{background:#0f1117; border:1px solid #1f2230; border-radius:6px; padding:6px 8px; color:#ddd; overflow:auto}
.kv pre{white-space:pre-wrap; max-height:220px}
.modal select{background:#0f1117; color:var(--text); border:1px solid #1f2230; border-radius:6px; padding:4px 8px; outline:none; appearance:none; -webkit-appearance:none; -moz-appearance:none}
.modal select:focus{border-color:var(--accent)}

/* Try to enforce dark dropdown list backgrounds across browsers */
select option, .modal select option { background-color:#0f1117; color:var(--text); }
select optgroup { background-color:#0f1117; color:var(--muted); }
.kv.prompt .prompt-box{position:relative; flex:1}
.kv.prompt .prompt-box pre{margin:0; padding-right:48px}
.copy-btn{position:absolute; top:6px; right:8px; font-size:12px; padding:3px 6px; border-radius:6px; background:var(--chip); color:var(--text); border:1px solid var(--chip-border); cursor:pointer; opacity:0.85}
.copy-btn:hover{opacity:1; border-color:var(--accent)}
.modal-toolbar{display:flex; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid #1f2230; background:var(--panel)}

/* Prevent page scroll when modal open */
.no-scroll{overflow:hidden}

@media (min-width: 1200px){
  .gallery{grid-template-columns:repeat(auto-fill, minmax(260px,1fr));}
}

.check-wrap{display:flex; align-items:center; gap:6px; background:var(--chip); border:1px solid var(--chip-border); padding:6px 10px; border-radius:8px}
.check-wrap input{accent-color: var(--accent)}
.check-wrap span{color:var(--muted); font-size:12px}

.modal.hidden{display:none !important}

/* Dropdown arrow: use CSS triangle to avoid font fallbacks */
.select-wrap select{ padding-right:24px; }
.select-wrap:after{
  content:"" !important; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--muted);
}

/* Favorites styling */
.favorite-btn{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,0.8); border:none; border-radius:50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; opacity:0.9; z-index:2;
  transition:all 0.2s ease;
}
.favorite-btn:hover{
  background:rgba(0,0,0,0.9); opacity:1; transform:scale(1.1);
}
.favorite-btn.favorited{
  color:var(--accent); background:rgba(0,0,0,0.8);
}
.favorite-btn.favorited svg{
  fill:var(--accent);
}

.favorites-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--chip); border:1px solid var(--chip-border);
  padding:6px 10px; border-radius:8px; white-space:nowrap;
}
.favorites-btn svg{
  flex-shrink:0;
}
.favorites-btn.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.favorites-btn.active svg{
  fill:#fff;
}

.favorites-actions{
  display:flex; gap:6px; align-items:center;
}
.favorites-actions.hidden{
  display:none;
}

/* Loading skeleton animation */
@keyframes skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.skeleton {
  animation: skeleton-pulse 2s ease-in-out infinite;
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  background: var(--panel);
  border: 1px solid #1f2230;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 320px;
}

.skeleton-thumb {
  height: 260px;
  background: var(--panel-2);
  position: relative;
  overflow: hidden;
}

.skeleton-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite;
}

.skeleton-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.skeleton-tag {
  height: 16px;
  background: var(--panel-2);
  border-radius: 4px;
  width: 70%;
}

.skeleton-meta-sub {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.skeleton-postcount {
  height: 12px;
  background: var(--panel-2);
  border-radius: 3px;
  width: 60px;
}

.skeleton-sampler {
  height: 12px;
  background: var(--panel-2);
  border-radius: 3px;
  width: 80px;
}

.skeleton-coverage {
  height: 12px;
  background: var(--panel-2);
  border-radius: 3px;
  width: 30px;
  margin-left: auto;
}

/* Image loading spinner */
@keyframes spinner-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.image-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(167, 139, 250, 0.3);
  border-top: 3px solid var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
  z-index: 1;
}

.thumb.loading {
  background: var(--panel-2);
}

.thumb.loading img {
  opacity: 0;
}

.thumb.loaded img {
  opacity: 1;
}

/* Similar artists button */
.similar-btn{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,0.8); border:none; border-radius:50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; opacity:0.9; z-index:2;
  transition:all 0.2s ease;
}
.similar-btn:hover{
  background:rgba(0,0,0,0.9); opacity:1; transform:scale(1.1);
  color:var(--accent);
}

/* Similar artists button active state */
.similar-btn.active{
  background:rgba(167,139,250,0.3); color:var(--accent); border:2px solid var(--accent);
}

/* Original artist card highlighting in similar mode */
.card.similar-original{
  background:linear-gradient(135deg, var(--panel) 0%, rgba(167,139,250,0.1) 100%);
  border:2px solid var(--accent);
  position:relative;
}
.card.similar-original::before{
  content:"Original"; position:absolute; top:-1px; left:-1px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:3px 0 6px 0; z-index:3;
}