/* Global Reset / Defaults */
:root {
  --bg:#0d0d0f; --bg-card:#15151a; --bg-header:#101015; --border:#2a2a33;
  --bg-card: #1a1a1d;
  --bg-header: #111114;
  --border: #2c2c33;
  --text:#e6e6f0; 
  --text-dim:#a6a6bf;
  --text-dim: #a0a0ac;
  --link: #4da6ff;
  --link-hover: #80c1ff;
  --accent:#7c5cff; 
  --accent-2:#26d6ff; 
  --ok:#22c55e; 
  --danger:#ef4444;


  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

/* Header / Footer */
.site-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.site-header .logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-right: 20px;
}
.main-nav a {
  margin-right: 16px;
  font-weight: 500;
  color: var(--text-dim);
}
.main-nav a:hover {
  color: var(--link-hover);
}
.user {
  margin-right: 16px;
  color: var(--ok);
}

.site-footer {
  background: var(--bg-header);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 12px 0;
  margin-top: auto;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Layout */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Buttons */
.btn,
.btn-secondary {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.btn {
  background: var(--accent);
  border: none;
  color: #fff;
}
.btn:hover {
  background: #2563eb;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--border);
}

/* Forms */
label {
  display: block;
  margin: 10px 0 4px;
  font-weight: 500;
}
input, textarea, select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #101012;
  color: var(--text);
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

/* Flash messages */
.flash {
  padding: 12px;
  border-radius: 6px;
  margin: 12px 0;
}
.flash.ok {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid var(--ok);
  color: var(--ok);
}
.flash.err {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 0.95rem;
}
th, td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
th {
  background: #1f1f24;
  font-weight: 600;
}
tr:nth-child(even) {
  background: #141418;
}

/* Logo text gradient on hover */
.logo span { transition: color .2s; }
.logo:hover span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* cards tighten spacing on mobile */
@media (max-width:640px){
  .wrap { padding:12px; }
  .card { margin:14px 0; padding:16px; }
}

/* === i.G.M. Player polish (scoped to the footer player only) === */
#globalPlayer{
  /* tweak these to taste */
  --gp-accent: #7c61ff;         /* purple accent to match your buttons */
  --gp-bg: rgba(10,10,14,.78);  /* glass backdrop */
  --gp-track: #262626;          /* slider track (unfilled) */
  --gp-border: #1c1c1c;
  --gp-text: #e8e8e8;
  --gp-dim: #a0a0a0;
}
#globalPlayer #gp-bar{
  background: var(--gp-bg);
  border-top: 1px solid var(--gp-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 28px rgba(0,0,0,.35);
}

/* Title + time */
#globalPlayer #gp-title{
  color: var(--gp-text);
  font-weight: 500;
  letter-spacing: .1px;
}
#globalPlayer #gp-time{
  color: var(--gp-dim);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}

/* Icon buttons (prev/play/next) */
#globalPlayer #gp-prev,
#globalPlayer #gp-next,
#globalPlayer #gp-toggle{
  width: 36px; height: 36px; line-height: 34px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #eee;
  display: inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .05s ease;
}
#globalPlayer #gp-prev:hover,
#globalPlayer #gp-next:hover,
#globalPlayer #gp-toggle:hover{ background:#171717; }
#globalPlayer #gp-prev:active,
#globalPlayer #gp-next:active,
#globalPlayer #gp-toggle:active{ transform: translateY(1px); }

/* “Pop-out” & “Current playlist” only here (don’t affect other .btn on site) */
#globalPlayer .btn{
  background: var(--gp-accent);
  border: 0;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(124,97,255,.25);
}
#globalPlayer .btn:hover{ filter: brightness(1.05); }
#globalPlayer .btn-secondary{
  background: #151515;
  border: 1px solid #2a2a2a;
  color: #e9e9e9;
  border-radius: 10px;
}
#globalPlayer .btn-secondary:hover{ background:#1b1b1b; }

/* Sliders (seek & volume) with filled progress */
#globalPlayer input[type="range"]{
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
              var(--gp-accent) var(--fill,0%),
              var(--gp-track)  var(--fill,0%));
  border: 1px solid #00000040;
  outline: none;
  transition: filter .15s ease;
}
#globalPlayer input[type="range"]:hover{ filter: brightness(1.05); }

/* WebKit track/thumb */
#globalPlayer input[type="range"]::-webkit-slider-runnable-track{
  height: 8px; background: transparent; border-radius: 999px;
}
#globalPlayer input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gp-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Firefox track/thumb */
#globalPlayer input[type="range"]::-moz-range-track{
  height: 8px; background: transparent; border-radius: 999px;
}
#globalPlayer input[type="range"]::-moz-range-progress{
  height: 8px; background: var(--gp-accent); border-radius: 999px;
}
#globalPlayer input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gp-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Queue drawer rows */
#globalPlayer #gp-drawer .qrow{
  background: #0f0f0f;
}
#globalPlayer #gp-drawer .qrow:hover{
  background: #141414;
}
#globalPlayer #gp-drawer .btn-secondary{
  border-radius: 8px;
}

/* Space between the header and page content */
.site-header + .site-main {
  margin-top: 18px;   /* tweak to taste: 12–24px works well */
}

/* Optional: slightly larger gap on wide screens */
@media (min-width: 1024px) {
  .site-header + .site-main { margin-top: 22px; }
}

/* (Nice touch) a subtle divider under the header */
.site-header {
  border-bottom: 1px solid #1f1f1f;
}