/* Dark Mode Variables (brighter) */
:root {
    --bg-color: #1f1f1f;
    --fg-color: #f0f0f0;
    --panel-bg: #2c2c2c;
    --panel-border: #555;
    --btn-bg: #43a047;
    --btn-hover: #388e3c;
    --link-color: #aedcff;
    --file-link-bg: #383838;
    --file-link-border: #666;
    --file-link-hover-bg: #4a4a4a;
}

/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; color:var(--fg-color); font-family:Arial,sans-serif; }
body { background:var(--bg-color); padding:1rem; }

/* Tracker banner */
#tracker {
  max-width:400px; margin:0.6em auto 1em; text-align:center;
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:4px;
  padding:0.75em;
}
/* Discord card */
#discord {
  max-width:400px; margin:0 auto 1em; background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:8px; padding:1em; text-align:center;
}
#discord p { margin-bottom:0.75em; }
#discord a {
  display:inline-block; padding:.6em 1.2em; font-weight:bold; text-decoration:none;
  color:#fff; background:#7289da; border-radius:4px;
  transition: background .2s;
}
#discord a:hover { background:#4752c4; }

/* Folders */
details { margin-bottom:1rem; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:4px; }
details summary {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.75em; cursor:pointer;
}
details summary:hover { background:#333; }

/* Folder contents placeholder */
.folder-content { padding:1em; border-top:1px solid var(--panel-border); }

/* File & images */
.folder-files { display:flex; flex-wrap:wrap; gap:.5rem; }
.file-link {
  padding:.5rem .75rem; background:var(--file-link-bg); border:1px solid var(--file-link-border);
  border-radius:2px; text-decoration:none; color:var(--link-color);
}
.file-link:hover { background:var(--file-link-hover-bg); }
.folder-files img {
  max-width:150px; max-height:150px; border:1px solid var(--panel-border); border-radius:2px;
}

/* Tooltip */
.tooltip { position:relative; display:inline-block; }
.tooltip .tiptext {
  visibility:hidden; opacity:0; transition:.1s;
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:var(--panel-bg); padding:0.25em .5em; border:1px solid var(--panel-border);
  border-radius:4px; white-space:nowrap; z-index:10;
}
.tooltip:hover .tiptext { visibility:visible; opacity:1; }

/* Viewer */
#viewerContainer { text-align:center; margin:2rem auto; }
#imageCanvas {
  max-width:90%; border:1px solid var(--panel-border); background:var(--panel-bg);
}
.controls { margin-top:1rem; }
.controls button {
  padding:.5rem 1rem; margin:0 .25rem; border:none; border-radius:3px;
  background:var(--btn-bg); color:#fff; cursor:pointer;
}
.controls button:hover { background:var(--btn-hover); }