:root{
  --ink:        #0c1c26;
  --panel:      #122834;
  --panel2:     #15303e;
  --water:      #0e2733;
  --line:       #2c4a58;
  --line-soft:  #1d3a47;
  --parchment:  #eae4d3;
  --parchment-dim: #b9b19d;
  --gold:       #c9a24a;
  --gold-dim:   #8a7440;
  --danger:     #c4463a;
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'IBM Plex Mono','Courier New',monospace;
}
a{ color:var(--gold); }
.wrap{max-width:1180px; margin:0 auto; padding:0 22px 60px;}

h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; margin:0; }

/* ---------- header / banner ---------- */
#banner{
  position:relative;
  height:150px;
  overflow:hidden;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  background:#0a1a24;
}
#banner:hover .banner-hint{ opacity:1; }
#banner-img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.banner-hint{
  position:absolute; right:22px; bottom:14px;
  font-size:.68rem; color:rgba(234,228,211,0.65);
  letter-spacing:.04em;
  opacity:0; transition:opacity .2s;
}

/* ---------- stats ---------- */
#stats-block{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:28px 0 36px;
}
.stat-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:22px 20px;
  text-align:center;
}
.stat-card .big{
  font-family:'Fraunces',Georgia,serif;
  font-size:2.1rem;
  font-weight:600;
  color:var(--parchment);
  line-height:1.05;
}
.stat-card .big .unit{ font-size:.85rem; font-weight:400; color:var(--gold); margin-left:4px; }
.stat-card .cap{
  font-size:.72rem; color:var(--gold); letter-spacing:.03em; margin:2px 0 14px;
}
.stat-card .mid{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.3rem; font-weight:600; color:var(--parchment);
}
.stat-card .mid-cap{ font-size:.68rem; color:var(--parchment-dim); margin:1px 0 12px; }
.stat-card .mid.clickable{ cursor:pointer; transition:color .15s; }
.stat-card .mid.clickable:hover{ color:var(--gold); text-decoration:underline; }
.stat-card .mid.clickable[data-empty="1"]{ cursor:default; }
.stat-card .mid.clickable[data-empty="1"]:hover{ color:var(--parchment); text-decoration:none; }
.stat-card .note{ font-size:.68rem; color:var(--parchment-dim); margin-top:8px; }

.server-line{
  font-size:.74rem; color:var(--gold-dim); letter-spacing:.03em;
  padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- track list ---------- */
.panel-heading{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:30px 0 12px; flex-wrap:wrap;
}
.panel-heading h2{ font-size:1.15rem; }
.panel-heading .note{ font-size:.72rem; color:var(--parchment-dim); }
.sort-btn{
  background:none; border:1px solid var(--line); color:var(--parchment-dim);
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.02em;
  padding:6px 12px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.sort-btn:hover{ border-color:var(--gold-dim); color:var(--parchment); }
.sort-btn #sort-icon{ color:var(--gold); font-size:.85rem; }

#track-list{ display:flex; flex-direction:column; gap:3px; }
.track-row{
  display:flex; align-items:center; gap:14px;
  background:#454c52;
  padding:14px 18px;
  cursor:pointer;
  user-select:none;
  transition:background .12s;
}
.track-row:hover{ background:#52585e; }
.track-row.selected{ background:#2c4a58; outline:1px solid var(--gold-dim); }
.track-row input[type=checkbox]{
  width:17px; height:17px; accent-color:var(--gold); flex:0 0 auto; cursor:pointer;
}
.track-row .fname{
  font-size:1.15rem; color:var(--parchment); font-weight:600;
  flex:0 0 auto;
}
.track-row .meta{
  font-size:.78rem; color:#9fd0e6;
  display:flex; gap:14px; flex-wrap:wrap;
}
.track-row .meta b{ color:#bfe3f2; }
.track-row .spacer{ flex:1; }
.track-row .open-link{
  font-size:.72rem; color:var(--gold); letter-spacing:.03em; text-decoration:none;
  padding:5px 10px; border:1px solid var(--gold-dim);
  white-space:nowrap;
}
.track-row .open-link:hover{ background:rgba(201,162,74,0.18); }
.track-row .err{ color:#e08a7d; font-size:.75rem; }

#empty-hint{
  padding:30px; text-align:center; color:var(--parchment-dim); font-size:.85rem;
  border:1px dashed var(--line);
}

/* ---------- floating compare bar ---------- */
#compare-bar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(120%);
  background:var(--panel2); border:1px solid var(--gold-dim);
  padding:12px 20px; display:flex; align-items:center; gap:16px;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
  transition:transform .22s ease;
  z-index:30;
  font-size:.82rem;
}
#compare-bar.show{ transform:translateX(-50%) translateY(0); }
#compare-bar button{
  background:var(--gold); color:#1a1308; border:none;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  padding:9px 16px; cursor:pointer; font-size:.82rem; letter-spacing:.02em;
}
#compare-bar button:hover{ background:#dab862; }
#compare-bar .clear{ color:var(--parchment-dim); cursor:pointer; text-decoration:underline; background:none; padding:0; }
#compare-bar .clear:hover{ background:none; color:var(--parchment); }

/* ---------- upload area ---------- */
#upload-zone{
  margin-top:34px;
  border:2px dashed var(--line);
  padding:34px 20px;
  text-align:center;
  color:var(--parchment-dim);
  font-size:.85rem;
  transition:background .15s, border-color .15s;
}
#upload-zone.dragover{ background:rgba(201,162,74,0.08); border-color:var(--gold); color:var(--parchment); }
#upload-zone .icon{ font-size:1.8rem; margin-bottom:8px; color:var(--gold-dim); }
#upload-zone .browse{ color:var(--gold); text-decoration:underline; cursor:pointer; }
#upload-list{ margin-top:16px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.upload-item{
  display:flex; align-items:center; gap:10px;
  font-size:.76rem; background:var(--panel); border:1px solid var(--line);
  padding:8px 12px;
}
.upload-item .name{ flex:1; color:var(--parchment); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-item .status{ white-space:nowrap; }
.upload-item.ok .status{ color:#7fc98a; }
.upload-item.err .status{ color:#e08a7d; }
.upload-item.busy .status{ color:var(--gold); }
.upload-bar{ height:3px; background:var(--line-soft); margin-top:4px; position:relative; overflow:hidden; }
.upload-bar i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--gold); transition:width .15s; }

/* ---------- lightbox gallery ---------- */
#lightbox{
  position:fixed; inset:0; background:rgba(5,12,16,0.94);
  display:none; align-items:center; justify-content:center;
  z-index:100; flex-direction:column;
}
#lightbox.show{ display:flex; }
#lightbox img{ max-width:88vw; max-height:76vh; border:1px solid var(--line); }
#lightbox .lb-controls{
  display:flex; align-items:center; gap:28px; margin-top:18px; color:var(--parchment);
}
#lightbox button{
  background:none; border:1px solid var(--line); color:var(--parchment);
  font-size:1.3rem; width:40px; height:40px; cursor:pointer;
}
#lightbox button:hover{ border-color:var(--gold); color:var(--gold); }
#lightbox .lb-count{ font-size:.78rem; color:var(--parchment-dim); }
#lightbox .lb-close{
  position:absolute; top:18px; right:24px; font-size:1.6rem;
  background:none; border:none; color:var(--parchment); cursor:pointer;
}
#lightbox .lb-close:hover{ color:var(--gold); }
#lightbox .lb-empty{ color:var(--parchment-dim); font-size:.9rem; }

/* thumbnail grid (shown first, before the single-photo view) */
#lb-grid-wrap{
  width:min(1100px, 92vw);
  max-height:82vh;
  overflow-y:auto;
  padding:6px;
}
#lb-grid-title{
  color:var(--gold); font-size:.78rem; letter-spacing:.04em; margin:0 0 14px; text-align:center;
}
#lb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.lb-thumb{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line); cursor:pointer; background:var(--panel);
}
.lb-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  max-width:none; max-height:none; border:none;
  transition:transform .18s ease, filter .18s ease;
}
.lb-thumb:hover img{ transform:scale(1.06); filter:brightness(1.08); }
.lb-thumb .lb-thumb-name{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(5,12,16,0.85), transparent);
  color:var(--parchment-dim); font-size:.62rem; padding:14px 6px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lb-back{
  position:absolute; top:18px; left:24px; font-size:.78rem;
  background:none; border:1px solid var(--line); color:var(--parchment);
  width:auto; height:auto; padding:7px 14px; cursor:pointer; letter-spacing:.03em;
  display:none;
}
#lb-back:hover{ border-color:var(--gold); color:var(--gold); }


footer{
  margin-top:36px; font-size:.68rem; color:var(--parchment-dim);
  text-align:center; letter-spacing:.03em;
}

@media (max-width:760px){
  #stats-block{ grid-template-columns:1fr; }
  #banner{ height:90px; }
  .track-row{ flex-wrap:wrap; }
}