/* --- Additive visual refresh (no feature changes) -------------------------
   This file only overrides visuals. It does not rename classes/ids.
---------------------------------------------------------------------------*/

/* CSS variables for a cohesive theme */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #69717d;
  --primary: #0d6efd;
  --primary-600: #0b5ed7;
  --danger: #dc3545;
  --secondary: #6c757d;
  --ring: rgba(13,110,253,.35);
  --shadow: 0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --space: 14px;
  --space-lg: 22px;
  --border: 1px solid #e9ecf3;
}

/* Base typography & layout */
html,body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{ margin: 28px; }
@media (max-width: 600px){ body{ margin: 16px; } }

h1,h2,h3{ color: var(--text); }
h1{
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 var(--space-lg);
  letter-spacing: -0.01em;
}
h2{
  font-size: clamp(16px, 2.2vw, 22px);
  margin: var(--space-lg) 0 var(--space);
}

/* Cards & sections */
.card, .panel, ol, ul{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: var(--border);
}
.card{ padding: calc(var(--space) + 2px); }
.panel{ padding: var(--space); }

/* Buttons */
button, .btn, input[type="submit"]{
  appearance: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: #333;
  color: #fff;
  font-weight: 600;
  transition: transform .02s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
button:hover, .btn:hover, input[type="submit"]:hover{ transform: translateY(-1px); }
button:active, .btn:active, input[type="submit"]:active{ transform: translateY(0); }
button:focus-visible, .btn:focus-visible, input[type="submit"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

button.primary, .btn.primary{ background: var(--primary); }
button.primary:hover, .btn.primary:hover{ background: var(--primary-600); }
button.secondary, .btn.secondary{ background: var(--secondary); }
button.danger, .btn.danger{ background: var(--danger); }

button:disabled{ opacity: .6; cursor: not-allowed; }

/* Inputs */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="email"], select, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #dfe3ea;
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Range sliders */
input[type="range"]{
  width: 180px;
  accent-color: var(--primary);
  height: 4px;
}
.vol-wrap{ gap: 10px; }
.vol-wrap label{ color: var(--muted); font-size: 13px; }

/* Status bar */
#status{
  margin-top: var(--space);
  padding: 10px 12px;
  background: #f1f4fb;
  border: 1px dashed #d6deef;
  color: #283044;
  border-radius: var(--radius-sm);
}

/* Grid responsiveness */
.grid{ gap: var(--space-lg); }
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* Ordered lists (playlist, files) */
ol, ul{
  padding: var(--space);
  margin: var(--space) 0;
}
ol li, ul li{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
ol li + li, ul li + li{ margin-top: 6px; }
ol li:hover, ul li:hover{ background: #f8faff; border-color: #e8eefc; }
ol li .meta, ul li .meta{ color: var(--muted); font-size: 12px; }

/* Reorder handles (only visible in reordering mode) */
.drag-handle{
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-grid; place-items: center;
  border: 1px dashed #d8deea;
  background: #f8faff;
}
.re-item{ border-radius: var(--radius-sm); }
.re-item.placeholder{ border: 2px dashed var(--primary); background: rgba(13,110,253,.06); }

/* Sections */
.controls-row{ gap: 18px; margin-bottom: var(--space); }
.controls-row.wrap{ flex-wrap: wrap; }

/* Tables (if used in admin) */
table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--surface);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td{ padding: 12px 14px; text-align: left; }
thead th{
  background: #f7f9fc;
  color: #394150;
  border-bottom: 1px solid #e9edf5;
  font-weight: 700;
}
tbody tr + tr td{ border-top: 1px solid #eef2f8; }
tbody tr:hover td{ background: #fbfdff; }

/* Login/error */
.error{
  background: #fff1f2;
  color: #b42318;
  padding: 10px 12px;
  border: 1px solid #ffdad5;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space);
}

/* Footer actions */
.actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* Subtle animations */
.fade-in{ animation: fade-in .18s ease both; }
@keyframes fade-in{ from{ opacity:0; transform: translateY(2px) } to{ opacity:1; transform: none } }