/* ── Variables ─────────────────────────────────────────────────────── */
:root {
  --bg:        #0d0d0d;
  --bg2:       #161616;
  --bg3:       #1e1e1e;
  --bg-hover:  #252525;
  --green:     #1DB954;
  --green-hi:  #1ed760;
  --text:      #ffffff;
  --muted:     #a7a7a7;
  --dim:       #535353;
  --border:    #2a2a2a;
  --danger:    #e74c3c;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 8px 32px rgba(0,0,0,.5);
  --sidebar-w: 280px;
}

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

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ── LOGIN ─────────────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 20%, #0d2b14 0%, var(--bg) 65%);
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.logo { display:flex; flex-direction:column; align-items:center; gap:.75rem; }

.logo-icon {
  width: 80px; height: 80px;
  background: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  box-shadow: 0 0 40px rgba(29,185,84,.35);
}

.logo h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.logo p  { color: var(--muted); font-size: .95rem; }

.error-box {
  background: rgba(231,76,60,.12);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: .75rem 1.25rem;
  color: #ff6b6b;
  font-size: .9rem;
  width: 100%;
}

.btn-spotify {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--green);
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  padding: .9rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background .15s, transform .15s;
  letter-spacing: .02em;
}
.btn-spotify:hover { background: var(--green-hi); transform: scale(1.03); }

.login-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s;
}
.login-links a:hover { color: var(--text); }

.login-info { color: var(--dim); font-size: .8rem; }
.login-info strong { color: var(--muted); }

.login-roles {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
}

.login-role-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: background .15s, border-color .15s, transform .12s;
  text-align: left;
}
.login-role-card:hover {
  background: #222;
  border-color: var(--green);
  transform: translateY(-1px);
}
.login-role-card.login-role-admin { border-color: #333; }
.login-role-card.login-role-admin:hover { border-color: #888; }

.role-icon { font-size: 1.75rem; flex-shrink: 0; }
.role-info  { flex: 1; min-width: 0; }
.role-title { font-weight: 700; font-size: .95rem; }
.role-desc  { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.role-arrow { color: var(--dim); flex-shrink: 0; }

/* ── Admin login ─────────────────────────────────────────────────────── */
.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
}
.admin-input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  color: var(--text);
  font-size: .95rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.admin-input:focus { border-color: #666; }
.btn-admin-login {
  background: #333;
  color: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  padding: .875rem;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.btn-admin-login:hover:not(:disabled) { background: #444; }
.btn-admin-login:disabled { opacity: .5; cursor: default; }
.admin-back-link {
  color: var(--dim);
  font-size: .85rem;
  text-decoration: none;
}
.admin-back-link:hover { color: var(--muted); }
.admin-link {
  color: var(--dim);
  font-size: .8rem;
  text-decoration: none;
  margin-top: .5rem;
}
.admin-link:hover { color: var(--muted); }

/* ── PLAYER PAGE ────────────────────────────────────────────────────── */
.player-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── APP LAYOUT: sidebar + main ─────────────────────────────────────── */
.app-layout {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  overflow: hidden;
  min-height: 0;
  height: calc(100vh - 90px);
  max-height: calc(100vh - 90px);
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #111;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.sidebar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem .75rem;
}
.brand { font-weight: 700; font-size: .95rem; }
.admin-link { color: var(--dim); text-decoration:none; font-size:1.2rem; transition:color .15s; }
.admin-link:hover { color: var(--muted); }

.status-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 1rem .75rem;
  padding: .625rem .875rem;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--muted);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
  transition: background .3s;
}
.status-dot.connected { background: var(--green); }
.status-dot.playing   { background: var(--green); animation: blink 1.4s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.sidebar-section {
  padding: 0 1rem .75rem;
}

.section-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: .5rem;
}

.next-ann-box {
  background: var(--bg2);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Sidebar tabs */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
  flex-shrink: 0;
}
.stab {
  flex: 1;
  background: none;
  border: none;
  color: var(--dim);
  padding: .6rem .5rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.stab:hover { color: var(--muted); }
.stab.active { color: var(--text); border-bottom-color: var(--green); }

.stab-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.stab-panel.hidden { display: none; }

.sidebar-scroll {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 1rem;
  padding-bottom: .5rem;
}
.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Track items */
.track-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .4rem .5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
  flex-shrink: 0;
}
.track-item:hover  { background: var(--bg-hover); }
.track-item.active { background: var(--bg-hover); }
.track-item.active .tr-name { color: var(--green); }
.track-item.track-local { cursor: default; opacity: .45; }
.track-item.track-local:hover { background: transparent; }

.tr-num  { font-size: .7rem; color: var(--dim); min-width: 18px; text-align: right; flex-shrink: 0; }
.tr-info { flex: 1; min-width: 0; }
.tr-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-artist { font-size: .72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-dur  { font-size: .7rem; color: var(--dim); flex-shrink: 0; }

/* Search result sections */
.result-header {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dim);
  padding: .5rem .5rem .25rem;
  text-transform: uppercase;
}

.search-box {
  position: relative;
  margin-bottom: .5rem;
}
.search-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  color: var(--text);
  font-size: .82rem;
  outline: none;
  transition: border .15s;
}
.search-input:focus { border-color: var(--green); }
.search-input::placeholder { color: var(--dim); }
.search-clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: .8rem;
  padding: .2rem;
}
.search-clear:hover { color: var(--muted); }

.playlist-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 340px;
}

.playlist-list::-webkit-scrollbar { width: 4px; }
.playlist-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.pl-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.pl-item:hover { background: var(--bg-hover); }
.pl-item.active { background: var(--bg-hover); }
.pl-item.active .pl-name { color: var(--green); }

.pl-thumb {
  width: 38px; height: 38px;
  border-radius: 4px;
  background: var(--bg3);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.pl-thumb img { width:100%; height:100%; object-fit:cover; }

.pl-info { flex:1; min-width:0; }
.pl-name  { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-count { font-size:.72rem; color:var(--dim); }

/* Botão ▶ que aparece ao passar o mouse na playlist */
.pl-play-btn {
  opacity: 0;
  background: var(--green);
  border: none;
  color: #000;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .18s, transform .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
}
.pl-item:hover .pl-play-btn { opacity: 1; }
.pl-play-btn:hover { background: var(--green-hi); transform: scale(1.1); }

/* Cabeçalho da aba Faixas */
.tracks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
  flex-shrink: 0;
}
.tracks-count {
  font-size: .75rem;
  color: var(--muted);
}
.btn-play-all {
  background: var(--green);
  border: none;
  color: #000;
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.btn-play-all:hover { background: var(--green-hi); transform: scale(1.04); }

.btn-refresh-ctx {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 26px; height: 26px;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.btn-refresh-ctx:hover { color: var(--text); border-color: var(--muted); }

.sidebar-loading { color:var(--dim); font-size:.82rem; padding:.5rem 0; }

.sidebar-bottom {
  margin-top: auto;
  padding: .875rem 1rem;
  border-top: 1px solid var(--border);
}
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  padding: .4rem .875rem;
  border-radius: 50px;
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
}
.btn-logout:hover { color: var(--text); border-color: var(--muted); }

/* main player */
.player-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #122412 0%, var(--bg) 65%);
  overflow: hidden;
}

.now-playing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  max-width: 380px;
  width: 100%;
  padding: 2rem;
}

.album-art {
  width: 260px; height: 260px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .3s;
}
.album-art.playing { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.album-art img { width:100%; height:100%; object-fit:cover; display:block; }

.album-placeholder {
  width:100%; height:100%;
  background: var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-size: 5rem; color: var(--dim);
}

.track-info { text-align:center; width:100%; }
.track-name  { font-size:1.35rem; font-weight:700; line-height:1.2; margin-bottom:.25rem; }
.artist-name { font-size:.95rem; color:var(--muted); }
.album-name  { font-size:.8rem; color:var(--dim); margin-top:.15rem; }

.progress-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  font-size: .72rem;
  color: var(--dim);
}

.progress-track {
  flex:1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.progress-fill {
  height:100%;
  background: var(--muted);
  border-radius: 2px;
  width: 0%;
  transition: width .8s linear;
  pointer-events: none;
}
.progress-track:hover .progress-fill { background: var(--green); }

.controls { display:flex; align-items:center; gap:1.25rem; }

.ctrl-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: .5rem;
  border-radius: 50%;
  transition: color .15s, background .15s;
  line-height:1;
}
.ctrl-btn:hover { color:var(--text); background:var(--bg-hover); }

.play-btn {
  background: var(--text) !important;
  color: #000 !important;
  font-size: 1.2rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  padding:0;
}
.play-btn:hover { transform:scale(1.07); background:var(--text) !important; }

.volume-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
}
.vol-icon { font-size:1rem; cursor:pointer; color:var(--muted); user-select:none; }
.vol-slider {
  flex:1;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:var(--border);
  border-radius:2px;
  outline:none;
  cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:13px; height:13px;
  background:var(--text);
  border-radius:50%;
  cursor:pointer;
}
.vol-slider:hover { background:var(--bg-hover); }
#vol-val { font-size:.72rem; color:var(--dim); min-width:30px; text-align:right; }

/* ── ANNOUNCEMENT OVERLAY ───────────────────────────────────────────── */
.ann-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .35s ease;
}
.ann-overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.ann-content { text-align:center; }
.ann-icon    { font-size:4rem; margin-bottom:.875rem; }
.ann-label   { font-size:.65rem; font-weight:700; letter-spacing:.2em; color:var(--muted); margin-bottom:.375rem; }
.ann-name    { font-size:2rem; font-weight:800; margin-bottom:2rem; }

.ann-bars { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:44px; }
.ann-bars span {
  width:6px;
  background: var(--green);
  border-radius:3px;
  animation: bar .7s ease-in-out infinite alternate;
}
.ann-bars span:nth-child(1){animation-delay:0s}
.ann-bars span:nth-child(2){animation-delay:.12s}
.ann-bars span:nth-child(3){animation-delay:.24s}
.ann-bars span:nth-child(4){animation-delay:.36s}
.ann-bars span:nth-child(5){animation-delay:.48s}
@keyframes bar { from{height:8px;opacity:.4} to{height:44px;opacity:1} }

/* ── ADMIN PAGE ─────────────────────────────────────────────────────── */
.admin-page { min-height:100vh; background:var(--bg); }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #111;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-brand { font-size:1.2rem; font-weight:800; }
.header-sub   { font-weight:400; color:var(--muted); margin-left:.5rem; font-size:.95rem; }
.header-right { display:flex; align-items:center; gap:1rem; }

.status-badge {
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--muted);
}
.badge-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--green);
  animation:blink 2s ease infinite;
}

.admin-tabs {
  display: flex;
  background: #111;
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
}
.tab-btn {
  background: none; border:none;
  color: var(--muted);
  padding: .875rem 1.25rem;
  font-size: .9rem; font-weight:600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--text); border-bottom-color:var(--green); }

.admin-body { padding:2rem; max-width:860px; margin:0 auto; }

.tab-panel { display:none; }
.tab-panel.active { display:block; }

.panel-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.5rem;
}
.panel-header h2 { font-size:1.2rem; font-weight:700; }
.header-badge { font-size:.7rem; font-weight:700; letter-spacing:.05em; background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; padding:.25rem .65rem; border-radius:999px; white-space:nowrap; }

/* card */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card h3 { font-size:1rem; font-weight:700; margin-bottom:1.25rem; color:var(--muted); }

/* forms */
.form-group { margin-bottom:1rem; }
.form-group > label {
  display:block;
  font-size:.8rem; font-weight:600;
  color:var(--muted);
  margin-bottom:.4rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.form-input {
  width:100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .875rem;
  color: var(--text);
  font-size: .9rem;
  transition: border .15s;
  appearance: none;
}
.form-input:focus { outline:none; border-color:var(--green); }
.hint { font-size:.78rem; color:var(--dim); }

.radio-group { display:flex; gap:1.5rem; }
.radio-opt { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; }
.radio-opt input { accent-color:var(--green); }

.form-actions { display:flex; gap:.75rem; margin-top:1.25rem; }

/* upload zone */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover { border-color:var(--green); background:rgba(29,185,84,.04); }

.upload-ph {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--muted); font-size:.88rem;
  pointer-events:none;
}
.supported-types { font-size:.75rem; color:var(--dim); }
.file-label { color:var(--green); font-weight:600; font-size:.88rem; }

.upload-progress { margin-top:1rem; }
.uprog-bar { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:.5rem; }
.uprog-fill { height:100%; background:var(--green); border-radius:3px; width:0%; transition:width .3s; }
#uprog-status { font-size:.8rem; color:var(--muted); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--green); color:#000;
  font-weight:700; font-size:.88rem;
  padding:.6rem 1.25rem;
  border:none; border-radius:50px;
  cursor:pointer; transition:background .15s;
}
.btn-primary:hover { background:var(--green-hi); }

.btn-outline {
  background:none; color:var(--muted);
  font-size:.88rem;
  padding:.6rem 1.25rem;
  border:1px solid var(--border);
  border-radius:50px; cursor:pointer;
  text-decoration:none; transition:all .15s;
}
.btn-outline:hover { color:var(--text); border-color:var(--muted); }

.btn-ghost {
  background:none; color:var(--muted);
  font-size:.88rem; padding:.6rem 1rem;
  border:none; cursor:pointer; transition:color .15s;
}
.btn-ghost:hover { color:var(--text); }

.btn-danger {
  background:none; color:var(--danger);
  font-size:.8rem; padding:.35rem .75rem;
  border:1px solid rgba(231,76,60,.4);
  border-radius:50px; cursor:pointer;
  transition:all .15s;
}
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

.btn-play-now {
  background:none; color:var(--green);
  font-size:.8rem; padding:.35rem .75rem;
  border:1px solid rgba(29,185,84,.4);
  border-radius:50px; cursor:pointer;
  transition:all .15s;
}
.btn-play-now:hover { background:var(--green); color:#000; }

/* ── Items list ─────────────────────────────────────────────────────── */
.items-list { display:flex; flex-direction:column; gap:.625rem; }

.item-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .875rem 1.125rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  transition: border-color .15s;
}
.item-card:hover { border-color:var(--bg-hover); }

.item-icon { font-size:1.4rem; flex-shrink:0; }
.item-info { flex:1; min-width:0; }
.item-name { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-meta { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

.item-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

.mini-audio { height:28px; width:130px; }

/* toggle switch */
.toggle {
  position:relative;
  display:inline-block;
  width:40px; height:22px;
  flex-shrink:0;
}
.toggle input { opacity:0; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0;
  background:var(--border);
  border-radius:11px;
  cursor:pointer;
  transition:background .2s;
}
.toggle input:checked + .toggle-track { background:var(--green); }
.toggle-track::after {
  content:'';
  position:absolute;
  width:16px; height:16px;
  background:#fff;
  border-radius:50%;
  top:3px; left:3px;
  transition:transform .2s;
}
.toggle input:checked + .toggle-track::after { transform:translateX(18px); }

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast {
  position:fixed;
  bottom:2rem; left:50%;
  transform:translateX(-50%);
  background:var(--bg3);
  border:1px solid var(--border);
  color:var(--text);
  padding:.65rem 1.5rem;
  border-radius:50px;
  font-size:.88rem;
  z-index:999;
  box-shadow:var(--shadow);
  animation:slideUp .25s ease;
  white-space:nowrap;
}
.toast.success { border-color:var(--green); }
.toast.error   { border-color:var(--danger); }
@keyframes slideUp { from{transform:translateX(-50%) translateY(16px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

/* ── Utilities ──────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.list-loading { color:var(--dim); text-align:center; padding:2rem; font-size:.88rem; }

.empty-state {
  text-align:center;
  padding:3.5rem 2rem;
  color:var(--dim);
}
.empty-state .ei { font-size:3rem; margin-bottom:.875rem; }
.empty-state p   { font-size:.88rem; }

/* ── Schedule type tabs ─────────────────────────────────────────────── */
.sched-type-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: .25rem;
  border: 1px solid var(--border);
}
.stype-btn {
  flex: 1;
  padding: .5rem .75rem;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: .88rem;
  cursor: pointer;
  transition: background .18s, color .18s;
  font-weight: 500;
}
.stype-btn.active {
  background: var(--bg3);
  color: var(--text);
}
.stype-btn:hover:not(.active) { color: var(--text); }

/* ── Sequence form items ────────────────────────────────────────────── */
.seq-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.seq-num {
  font-size: 1.1rem;
  min-width: 1.5rem;
  text-align: center;
  color: var(--green);
  flex-shrink: 0;
}
.seq-sel { flex: 1; }
.seq-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.seq-remove:hover { border-color: var(--danger); color: var(--danger); }

.btn-seq-add {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: .45rem 1rem;
  font-size: .85rem;
  cursor: pointer;
  width: 100%;
  margin-top: .25rem;
  transition: border-color .15s, color .15s;
}
.btn-seq-add:hover { border-color: var(--green); color: var(--green); }

.hint-inline { color: var(--muted); font-size: .82rem; font-weight: 400; }

/* ── Sequence chips in list ─────────────────────────────────────────── */
.seq-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.seq-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .15rem .6rem;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   NOVO LAYOUT TIPO SPOTIFY
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar nova ────────────────────────────────────────────────────── */
.lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.lib-search-wrap {
  position: relative;
  margin: 0 .875rem .625rem;
  flex-shrink: 0;
}
.lib-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  pointer-events: none;
  color: var(--dim);
}
.lib-search-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem 2rem .5rem 2rem;
  color: var(--text);
  font-size: .82rem;
  outline: none;
  transition: border .15s;
}
.lib-search-input:focus { border-color: var(--green); }
.lib-search-input::placeholder { color: var(--dim); }

.search-clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: .82rem;
  padding: .2rem .3rem;
  line-height: 1;
}
.search-clear:hover { color: var(--muted); }

/* Lista de playlists na sidebar */
.playlist-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 .375rem .5rem;
}

/* Playlists do dia (sugestões na sidebar) */
.daily-header { color: var(--green, #1db954); }
.daily-list {
  max-height: 252px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 .375rem .25rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #282828);
  margin-bottom: .25rem;
}
.daily-list::-webkit-scrollbar { width: 3px; }
.daily-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.playlist-scroll::-webkit-scrollbar { width: 3px; }
.playlist-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.lib-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.lib-item:hover { background: var(--bg-hover); }
.lib-item.active { background: var(--bg-hover); }
.lib-item.active .lib-item-name { color: var(--green); }

.lib-item-art {
  width: 42px; height: 42px;
  border-radius: 4px;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.lib-item-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-item-info { flex: 1; min-width: 0; }
.lib-item-name {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-item-sub {
  font-size: .72rem;
  color: var(--dim);
}

/* ── Top navigation bar ─────────────────────────────────────────────── */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.5rem;
  background: rgba(18, 18, 18, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.top-nav-home {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .12s;
}
.top-nav-home:hover { background: rgba(255,255,255,.12); transform: scale(1.07); }

.top-search-wrap {
  flex: 1;
  max-width: 480px;
  position: relative;
  display: flex;
  align-items: center;
}

.top-search-icon {
  position: absolute;
  left: .875rem;
  color: var(--dim);
  display: flex; align-items: center;
  pointer-events: none;
}

.top-search-input {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid transparent;
  border-radius: 500px;
  padding: .625rem 2.5rem .625rem 2.75rem;
  color: var(--text);
  font-size: .9rem;
  outline: none;
  transition: border .15s, background .15s;
  caret-color: var(--green);
}
.top-search-input:focus {
  border-color: var(--muted);
  background: #333;
}
.top-search-input::placeholder { color: var(--dim); }

.top-search-clear {
  position: absolute;
  right: .75rem;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: .82rem;
  padding: .2rem .3rem;
  line-height: 1;
  transition: color .15s;
}
.top-search-clear:hover { color: var(--text); }

/* ── Main content ────────────────────────────────────────────────────── */
.main-content {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background: var(--bg);
}
.main-content::-webkit-scrollbar { width: 8px; }
.main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.main-content::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.content-gradient {
  position: sticky;
  top: 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(29,185,84,.22) 0%, transparent 100%);
  margin-bottom: -280px;
  flex-shrink: 0;
}

.view {
  position: relative;
  z-index: 1;
  padding-bottom: 2rem;
}

/* ── Home view ───────────────────────────────────────────────────────── */
.home-inner {
  padding: 1.75rem 2rem 2rem;
}

.greeting {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}

.home-section {
  margin-bottom: 2.75rem;
}

.section-heading {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  letter-spacing: -.01em;
}

/* Quick grid (acesso rápido — top 8) */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem;
}

.quick-card {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  height: 56px;
}
.quick-card:hover { background: #2a2a2a; }

.quick-card-art {
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  overflow: hidden;
}
.quick-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.quick-card-name {
  font-size: .88rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2.5rem;
}

.quick-play-btn {
  position: absolute;
  right: .75rem;
  background: var(--green);
  border: none;
  color: #000;
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s, transform .18s, background .15s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.quick-card:hover .quick-play-btn { opacity: 1; transform: translateY(0); }
.quick-play-btn:hover { background: var(--green-hi) !important; transform: scale(1.07) !important; }

/* Cards grid de playlists */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1.25rem;
}

/* Prateleira horizontal (descoberta na home) */
.shelf-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bg3, #333) transparent;
}
.shelf-row::-webkit-scrollbar { height: 8px; }
.shelf-row::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
/* min-width:0 impede que nomes longos (nowrap) estiquem o card além dos 160px */
.shelf-row .pl-card { flex: 0 0 160px; width: 160px; min-width: 0; }

.pl-card {
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.pl-card:hover { background: #252525; }

.pl-card-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  margin-bottom: .875rem;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.pl-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-card-name {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.pl-card-sub {
  font-size: .78rem;
  color: var(--muted);
}

.pl-card-play {
  position: absolute;
  bottom: 1.1rem;
  right: .875rem;
  background: var(--green);
  border: none;
  color: #000;
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, background .15s;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.pl-card:hover .pl-card-play { opacity: 1; transform: translateY(0); }
.pl-card-play:hover { background: var(--green-hi) !important; transform: scale(1.06) !important; }

/* ── Tracks view ─────────────────────────────────────────────────────── */
.tracks-hero {
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  padding: 2.5rem 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(29,185,84,.2) 0%, transparent 100%);
}

.tracks-hero-art {
  width: 176px; height: 176px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
}
.tracks-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tracks-hero-info { flex: 1; min-width: 0; }
.tracks-hero-type {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.tracks-hero-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.tracks-hero-sub {
  font-size: .88rem;
  color: var(--muted);
}

.tracks-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 2rem .75rem;
}

.btn-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .45rem 1rem;
  border-radius: 50px;
  font-size: .82rem;
  cursor: pointer;
  transition: all .15s;
}
.btn-back:hover { color: var(--text); border-color: var(--muted); }

.btn-play-ctx {
  background: var(--green);
  border: none;
  color: #000;
  padding: .625rem 1.75rem;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.btn-play-ctx:hover { background: var(--green-hi); transform: scale(1.04); }

.btn-save-pl {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .55rem 1.1rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.btn-save-pl:hover { border-color: var(--green); transform: scale(1.04); }

/* Banner "continuar de onde parou" */
.resume-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.resume-banner.hidden { display: none; }
.resume-info  { flex: 1; min-width: 0; }
.resume-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.resume-track {
  font-size: .95rem;
  font-weight: 600;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: .25rem;
}
.resume-close:hover { color: var(--text); }

.tracks-scroll {
  padding: 0 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* track-item já definido acima, reutilizado */

/* ── Search results ──────────────────────────────────────────────────── */
.result-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.5rem 0 .875rem;
}

.search-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1.5rem;
}

.search-track-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.search-track-item:hover { background: var(--bg-hover); }

.search-track-art {
  width: 44px; height: 44px;
  border-radius: 4px;
  background: var(--bg3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.search-track-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.search-track-info { flex: 1; min-width: 0; }
.search-track-name {
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-track-artist { font-size: .78rem; color: var(--muted); }
.search-track-dur    { font-size: .78rem; color: var(--dim); flex-shrink: 0; }

/* ── Player bar (fixo embaixo) ───────────────────────────────────────── */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: #0a0a0a;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 100;
  gap: 1rem;
}

/* Now playing */
.bar-now-playing {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-width: 0;
}

.bar-art {
  width: 56px; height: 56px;
  border-radius: 4px;
  background: var(--bg2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bar-art img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.bar-art-ph   { font-size: 1.4rem; color: var(--dim); }

.bar-track-meta { min-width: 0; }
.bar-track-name {
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track-artist {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controles centrais */
.bar-controls-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.bar-controls {
  display: flex;
  align-items: center;
  gap: .875rem;
}

.play-btn-bar {
  background: var(--text) !important;
  color: #000 !important;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 1rem;
}
.play-btn-bar:hover { transform: scale(1.07); background: var(--text) !important; }

.bar-progress-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  max-width: 500px;
  font-size: .72rem;
  color: var(--dim);
}

/* Volume */
.bar-volume {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .625rem;
}

/* btn-logout já definido acima; apenas ajusta no contexto da bar */
.bar-volume .btn-logout {
  margin-left: .5rem;
}

/* Botão admin na sidebar */
.btn-admin {
  color: var(--dim);
  text-decoration: none;
  font-size: 1.2rem;
  padding: .25rem;
  border-radius: var(--radius-sm);
  transition: color .15s;
}
.btn-admin:hover { color: var(--muted); }

/* ── Dashboard stores grid ───────────────────────────────────────── */
.header-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1.5rem 0;
}
.stores-empty { text-align:center; padding:4rem 2rem; color:var(--muted); }

.store-card {
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.store-card-header { display:flex; align-items:center; gap:.75rem; }
.store-icon { font-size:1.75rem; flex-shrink:0; }
.store-info { flex:1; min-width:0; }
.store-name { font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.store-uptime { font-size:.72rem; color:var(--dim); margin-top:.1rem; }
.store-dot { width:9px; height:9px; border-radius:50%; background:var(--dim); flex-shrink:0; }
.store-dot.online { background:var(--green); box-shadow:0 0 6px rgba(29,185,84,.5); }

.store-track { min-height:2.2rem; }
.st-name   { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-artist { font-size:.75rem; color:var(--muted); }
.st-idle   { font-size:.78rem; color:var(--dim); font-style:italic; }

.store-controls { display:flex; gap:.375rem; }
.sc-btn {
  flex:1; background:#2a2a2a; border:1px solid #333; border-radius:6px;
  color:var(--text); font-size:.85rem; padding:.4rem .2rem;
  cursor:pointer; transition:background .12s;
}
.sc-btn:hover { background:#333; }
.sc-btn.sc-ann { background:rgba(29,185,84,.1); border-color:rgba(29,185,84,.3); }
.sc-btn.sc-ann:hover { background:rgba(29,185,84,.2); }

.store-vol-row { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--dim); }
.store-vol-slider { flex:1; accent-color:var(--green); }

/* ── History ──────────────────────────────────────────────────────── */
.hist-trigger {
  font-size:.72rem; padding:.2rem .5rem; border-radius:4px;
  background:#2a2a2a; color:var(--muted); white-space:nowrap; flex-shrink:0;
}
.btn-danger-sm {
  background:transparent; border:1px solid var(--danger); border-radius:6px;
  color:var(--danger); padding:.35rem .75rem; font-size:.82rem; cursor:pointer;
  transition:background .12s;
}
.btn-danger-sm:hover { background:rgba(231,76,60,.1); }

.pagination { display:flex; gap:.375rem; padding-top:1rem; flex-wrap:wrap; }
.pg-btn {
  background:#2a2a2a; border:1px solid #333; border-radius:6px;
  color:var(--muted); padding:.3rem .6rem; font-size:.8rem; cursor:pointer;
}
.pg-btn.active { background:var(--green); color:#000; border-color:var(--green); }

/* ── TTS ──────────────────────────────────────────────────────────── */
.tts-textarea { min-height:100px; resize:vertical; }
.tts-status {
  margin-top:.75rem; padding:.625rem 1rem; background:#1a1a1a;
  border:1px solid #333; border-radius:6px; font-size:.85rem; color:var(--green);
}

/* ── Config ───────────────────────────────────────────────────────── */
.config-slider { width:100%; accent-color:var(--green); margin-top:.5rem; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:180px; }

/* ── Days of week ─────────────────────────────────────────────────── */
.days-wrap { display:flex; gap:.375rem; flex-wrap:wrap; margin-top:.5rem; }
.day-chip {
  display:flex; align-items:center; gap:.3rem; padding:.3rem .65rem;
  background:#1a1a1a; border:1px solid #333; border-radius:20px;
  font-size:.8rem; cursor:pointer; transition:background .12s, border-color .12s;
}
.day-chip:has(input:checked) { background:rgba(29,185,84,.15); border-color:var(--green); color:var(--green); }
.day-chip input { display:none; }