/* ==========================================================================
   Alexto Devs — "Spotify 2040" theme
   Dark glassmorphism theme that restyles the existing AdminLTE 2 markup to
   match the Stitch UX/UI reference. Loaded AFTER AdminLTE.min.css + skins so
   these rules win. Pure CSS — no markup or behavior changes.
   Reference tokens (Stitch): surface #121414, surface-lowest #0d0e0f,
   primary #53e076, primary-container #1db954, on-primary #002108,
   on-surface #e3e2e2, secondary #c8c6c5.
   ========================================================================== */

:root {
  --bg: #121212;
  --surface: #1e2020;
  --surface-low: #1a1c1c;
  --surface-lowest: #0d0e0f;
  --surface-high: #292a2a;
  --surface-bright: #38393a;
  --primary: #53e076;          /* bright green — text/accents */
  --primary-container: #1db954;/* Spotify green — buttons */
  --on-primary: #002108;       /* text on green */
  --ink: #e3e2e2;              /* main text */
  --muted: #c8c6c5;            /* secondary text */
  --dim: #9aa39a;              /* tertiary text */
  --glass: rgba(30, 32, 32, 0.60);
  --glass-strong: rgba(18, 20, 20, 0.72);
  --hair: rgba(255, 255, 255, 0.10);
  --hair-soft: rgba(255, 255, 255, 0.06);
  --glow: 0 0 15px rgba(29, 185, 84, 0.30);
  --radius: 12px;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label: "Space Grotesk", "Plus Jakarta Sans", monospace;
}

/* ---- Base --------------------------------------------------------------- */
body,
.wrapper,
.content-wrapper,
.main-footer {
  background-color: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.content-wrapper { min-height: 100vh; }

/* Atmospheric ambient glows behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 25%, rgba(29,185,84,0.06) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(83,224,118,0.04) 0%, transparent 52%);
}
.wrapper { position: relative; z-index: 1; }

a { color: var(--primary); }
a:hover, a:focus { color: #72fe8f; }
.text-muted, small { color: var(--muted) !important; }

h1, h2, h3, h4, h5, .box-title, .content-header > h1 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.content-header > h1 { font-weight: 800; letter-spacing: -0.02em; }
.content-header > h1 > small { color: var(--muted); font-family: var(--font-label); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(83,224,118,0.5); }

/* ---- Header (main-header / navbar) -------------------------------------- */
.main-header .navbar,
.skin-green .main-header .navbar {
  background: var(--glass-strong) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hair);
}
.main-header .logo,
.skin-green .main-header .logo {
  background: var(--glass-strong) !important;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair-soft);
  color: var(--primary) !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(83,224,118,0.45);
}
.skin-green .main-header .logo:hover { background: var(--glass-strong) !important; }
.main-header .logo b { color: var(--primary); }
.skin-green .main-header .navbar .sidebar-toggle { color: var(--muted); }
.skin-green .main-header .navbar .sidebar-toggle:hover { background: var(--hair-soft); color: var(--primary); }
.skin-green .main-header > .navbar .nav > li > a { color: var(--muted); }
.skin-green .main-header .navbar .nav > li > a:hover { background: var(--hair-soft); color: var(--primary); }
.navbar-nav > .user-menu .user-image { border: 1px solid var(--hair); }

/* ---- Sidebar ------------------------------------------------------------ */
.main-sidebar, .left-side {
  background: var(--surface-lowest) !important;
  border-right: 1px solid var(--hair-soft);
  box-shadow: 20px 0 40px rgba(0,0,0,0.6);
}
.sidebar a { color: var(--muted); }

.user-panel > .info, .user-panel > .info > a { color: var(--ink) !important; }
.user-panel { border-bottom: 1px solid var(--hair-soft); padding-bottom: 12px; }
.user-panel > .image > img { border: 1px solid rgba(83,224,118,0.35); box-shadow: var(--glow); }

.sidebar-menu > li.header {
  background: transparent !important;
  color: var(--dim);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 18px 8px;
}
.sidebar-menu > li > a {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-left: 4px solid transparent;
  padding: 12px 16px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion { color: var(--muted); transition: color .2s ease; }
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: rgba(29,185,84,0.10) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary);
}
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li:hover > a > .glyphicon,
.sidebar-menu > li.active > a > .glyphicon,
.sidebar-menu > li:hover > a > .ion,
.sidebar-menu > li.active > a > .ion { color: var(--primary); }

/* ---- Content header ----------------------------------------------------- */
.content-header { padding: 24px 24px 0; }
.content-header > h1 { font-size: 30px; }

/* ---- Boxes / cards ------------------------------------------------------ */
.box {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--primary-container);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  color: var(--ink);
}
.box.box-success, .box.box-primary { border-top-color: var(--primary-container); }
.box.box-danger  { border-top-color: #e05a4d; }
.box.box-warning { border-top-color: #f0a020; }
.box.box-info    { border-top-color: #17a2b8; }
.box-header { color: var(--ink); border-bottom: 1px solid var(--hair); }
.box-header.with-border { border-bottom: 1px solid var(--hair); }
.box-header .box-title { font-size: 16px; font-weight: 700; }
.box-footer { background: transparent !important; border-top: 1px solid var(--hair-soft); color: var(--muted); }
.box-body { color: var(--ink); }

/* ---- Small boxes (dashboard KPIs) → glass bento ------------------------- */
.small-box {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  color: var(--ink);
  overflow: hidden;
}
.small-box > .inner { color: var(--ink); }
.small-box h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
.small-box p { color: var(--muted); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.small-box .icon { color: rgba(255,255,255,0.10); }
.small-box:hover .icon { color: rgba(83,224,118,0.20); }
.small-box .small-box-footer {
  background: rgba(255,255,255,0.05) !important;
  color: var(--primary) !important;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
/* KPI accent by AdminLTE color class (icon + top hairline glow) */
.small-box.bg-aqua   { border-top: 3px solid #17a2b8; }
.small-box.bg-green  { border-top: 3px solid var(--primary-container); box-shadow: 0 8px 32px rgba(0,0,0,0.45), var(--glow); }
.small-box.bg-yellow { border-top: 3px solid #f0a020; }
.small-box.bg-red    { border-top: 3px solid #e05a4d; }
.small-box.bg-aqua   .icon { color: rgba(23,162,184,0.30); }
.small-box.bg-green  .icon { color: rgba(83,224,118,0.28); }
.small-box.bg-yellow .icon { color: rgba(240,160,32,0.28); }
.small-box.bg-red    .icon { color: rgba(224,90,77,0.28); }
.small-box.bg-green  h3 { color: var(--primary); text-shadow: 0 0 10px rgba(83,224,118,0.45); }

/* ---- Tables ------------------------------------------------------------- */
.table { color: var(--ink); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(52,53,53,0.30);
  padding: 14px 16px;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--hair-soft);
  color: var(--ink);
  vertical-align: middle;
  padding: 12px 16px;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02); }
.table-hover > tbody > tr:hover {
  background-color: rgba(255,255,255,0.05);
  box-shadow: inset 2px 0 0 var(--primary);
}
.table > tbody > tr > td .img-rounded,
.table img.img-rounded { border: 1px solid var(--hair); border-radius: 10px; }
.table audio { filter: invert(0.9) hue-rotate(180deg); }

/* ---- Forms -------------------------------------------------------------- */
.form-control {
  background: rgba(20,22,22,0.55);
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--ink);
  box-shadow: none;
  height: 42px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { height: auto; }
.form-control:focus {
  background: rgba(20,22,22,0.75);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(83,224,118,0.15);
  color: var(--ink);
}
.form-control::-webkit-input-placeholder { color: var(--dim); }
.form-control::placeholder { color: var(--dim); }
select.form-control option { background: var(--surface); color: var(--ink); }

/* Override @tailwindcss/forms plugin — it forces white backgrounds AND a tiny
   font-size on text inputs, which made the dark-theme value text invisible
   until focus and smaller than the <select> fields. Unify all form controls. */
input.form-control, textarea.form-control, select.form-control {
  background-color: rgba(20,22,22,0.55) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair) !important;
  background-image: none !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus {
  background-color: rgba(20,22,22,0.85) !important;
  border-color: var(--primary) !important;
}
input.form-control::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: var(--dim) !important; }
input.form-control::placeholder, textarea.form-control::placeholder { color: var(--dim) !important; }
label, .control-label { color: var(--ink); font-weight: 600; }
legend { color: var(--ink); border-bottom: 1px solid var(--hair); }
.checkbox label, .radio label { color: var(--ink); }
.input-group-addon { background: var(--surface-high); border-color: var(--hair); color: var(--muted); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 9px 18px;
  transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success {
  background: var(--primary-container);
  border-color: var(--primary-container);
  color: var(--on-primary);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 20px rgba(29,185,84,0.5);
}
.btn-default {
  background: rgba(255,255,255,0.05);
  border-color: var(--hair);
  color: var(--ink);
}
.btn-default:hover, .btn-default:focus { background: rgba(255,255,255,0.10); color: var(--primary); border-color: rgba(83,224,118,0.4); }
.btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn-danger:hover { background: #e05a4d; border-color: #e05a4d; }
a.btn-primary, a.btn-success { color: var(--on-primary) !important; }

/* ---- Alerts ------------------------------------------------------------- */
.alert { border-radius: 10px; border: 1px solid var(--hair) !important; color: var(--ink) !important; }
.alert-success { background: rgba(29,185,84,0.12) !important; border-color: rgba(83,224,118,0.35) !important; color: #b8f5cd !important; }
.alert-danger  { background: rgba(224,90,77,0.12) !important; border-color: rgba(224,90,77,0.35) !important; color: #ffd7d2 !important; }
.alert-info    { background: rgba(23,162,184,0.12) !important; border-color: rgba(23,162,184,0.35) !important; color: #cdeff5 !important; }
.alert-warning { background: rgba(240,160,32,0.12) !important; border-color: rgba(240,160,32,0.35) !important; color: #ffe6c2 !important; }
.alert .close { color: var(--ink); opacity: .8; text-shadow: none; }

/* ---- Labels / chips / badges ------------------------------------------- */
.label, .badge {
  font-weight: 600; border-radius: 999px; font-family: var(--font-label);
  background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--hair);
}
.label-success, .badge { color: var(--muted); }

/* ---- Pagination --------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--hair);
}
.pagination > li > a:hover { background: rgba(255,255,255,0.08); color: var(--primary); }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: var(--primary-container);
  border-color: var(--primary-container);
  color: var(--on-primary);
}

/* ---- Dropdown menus (user menu, etc.) ---------------------------------- */
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--hair);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.dropdown-menu > li > a { color: var(--ink); }
.dropdown-menu > li > a:hover { background: rgba(255,255,255,0.06); color: var(--primary); }
.navbar-nav > .user-menu > .dropdown-menu > .user-header { background: var(--glass-strong); }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer { background: var(--surface-low); }
.user-footer .btn-default { background: rgba(255,255,255,0.06); color: var(--ink); }

/* ---- Modals ------------------------------------------------------------- */
.modal-content {
  background: var(--glass-strong) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.modal-header, .modal-footer { border-color: var(--hair); }
.modal-title { color: var(--ink); }
.modal .close { color: var(--ink); opacity: .8; text-shadow: none; }

/* ---- Footer ------------------------------------------------------------- */
.main-footer {
  border-top: 1px solid rgba(83,224,118,0.20);
  color: var(--muted);
  font-family: var(--font-label);
  background: var(--glass-strong) !important;
}
.main-footer a { color: var(--primary); }

/* ---- Breadcrumb (legacy views still using it) --------------------------- */
.breadcrumb { background: rgba(255,255,255,0.03); border-radius: 10px; }
.breadcrumb > li > a { color: var(--muted); }
.breadcrumb > .active { color: var(--ink); }

/* ==========================================================================
   Login page
   ========================================================================== */
body.login-page {
  background: var(--bg) !important;
  min-height: 100vh;
}
.login-logo a { color: var(--primary); font-weight: 800; text-shadow: 0 0 12px rgba(83,224,118,0.5); }
.login-logo small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); font-family: var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.login-box-body {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  color: var(--ink);
}
.login-box-body .login-box-msg { color: var(--muted); }
.login-page .form-control-feedback { color: var(--dim); }

/* ---- Page-size selector (list views) ----------------------------------- */
.perpage-select {
  background-color: rgba(30,32,32,0.6) !important;
  border: 1px solid var(--hair) !important;
  color: var(--ink) !important;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-label);
  font-size: 13px;
  height: 34px;
  outline: none;
  cursor: pointer;
}
.perpage-select:focus { border-color: var(--primary) !important; }
.perpage-select option { background: var(--surface); color: var(--ink); }
.perpage-apply {
  background: var(--primary-container);
  color: var(--on-primary);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.perpage-apply:hover { box-shadow: 0 0 14px rgba(29,185,84,0.5); }

/* ---- Filter bar input (list views) --------------------------------------
   Width is set in `ch` (one character of the field's own font) so the number
   of VISIBLE characters is guaranteed regardless of typeface. The +3.5rem
   offsets the input's inner padding (pl-10 icon gutter + pr-4), which
   border-box would otherwise eat from the text area.
   Mobile: fluid · Tablet: ~22ch · Desktop: 35ch min · Wide: 44ch            */
.filter-input { width: 100%; min-width: 0; }
@media (min-width: 640px)  { .filter-input { width: calc(22ch + 3.5rem); } }  /* tablet  */
@media (min-width: 1024px) { .filter-input { width: calc(35ch + 3.5rem); } }  /* desktop */
@media (min-width: 1440px) { .filter-input { width: calc(44ch + 3.5rem); } }  /* wide    */

/* ---- Filter bar SEARCH button (list views) ------------------------------ */
.filter-search-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 999px; padding: 7px 16px 7px 12px;
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.filter-search-btn:hover { color: var(--primary); border-color: var(--primary); }
.filter-search-btn:active { transform: translateY(1px); }

/* ---- "Play Now" button + Player Popup (design: Stitch Player Popup) ------ */
.stream-play-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-container); color: var(--on-primary);
  border: none; border-radius: 999px; padding: 7px 16px 7px 12px;
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, transform .02s ease;
}
.stream-play-btn:hover { box-shadow: 0 0 16px rgba(29,185,84,0.5); }
.stream-play-btn:active { transform: translateY(1px); }

.player-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.player-overlay.open { display: flex; }

.player-modal {
  position: relative; width: 100%; max-width: 900px; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; color: var(--ink);
  background: rgba(40,40,40,0.9); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
@media (min-width: 768px) { .player-modal { flex-direction: row; } }

.pp-close {
  position: absolute; top: 14px; right: 14px; z-index: 20; background: transparent; border: none;
  color: var(--muted); cursor: pointer; padding: 6px; border-radius: 999px; display: inline-flex;
  transition: background .15s, color .15s;
}
.pp-close:hover { background: rgba(255,255,255,0.1); color: var(--ink); }

.pp-left { position: relative; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px) { .pp-left { width: 44%; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.1); } }
.pp-ambient { position: absolute; inset: 0; pointer-events: none; filter: blur(30px);
  background: radial-gradient(circle at 50% 35%, rgba(29,185,84,0.25), transparent 60%); }
.pp-cover { position: relative; z-index: 10; width: 220px; height: 220px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 30px rgba(29,185,84,0.5); background: var(--surface-bright); }
.pp-cover img { width: 100%; height: 100%; object-fit: cover; }
.pp-live { position: absolute; top: 12px; left: 12px; z-index: 12; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #72fe8f; }
.pp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-container); box-shadow: 0 0 8px var(--primary-container); animation: pulse-dot 1.6s infinite; }
.pp-visualizer { position: relative; z-index: 10; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 40px; margin-top: 26px; }
.pp-visualizer span { width: 5px; height: 100%; border-radius: 3px 3px 0 0; background: var(--primary-container); transform: scaleY(0.2); }
.pp-visualizer.playing span { animation: viz-bounce 1s ease infinite alternate; }
@keyframes viz-bounce { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }

.pp-right { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; flex: 1; }
@media (min-width: 768px) { .pp-right { width: 56%; } }
.pp-cat-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.pp-name { font-family: var(--font-body); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.pp-sub { font-family: var(--font-body); color: var(--muted); margin: 0; }
.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-stat { background: var(--glass); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; }
.pp-stat-label { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.pp-stat-val { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); color: var(--ink); font-size: 14px; }
.pp-stat-ic { font-size: 18px; color: var(--primary); }
.pp-controls { display: flex; align-items: center; justify-content: center; }
.pp-playbtn { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; background: var(--primary-container); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(29,185,84,0.5); transition: transform .15s, box-shadow .15s; }
.pp-playbtn:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(29,185,84,0.7); }
.pp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hair-soft); padding-top: 18px; flex-wrap: wrap; }
.pp-volume { display: flex; align-items: center; gap: 8px; }
.pp-icon-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 4px; transition: color .15s; }
.pp-icon-btn:hover { color: var(--primary); }
.pp-vol-range { width: 110px; accent-color: var(--primary-container); cursor: pointer; }
.pp-url-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 60%; background: var(--glass); border: 1px solid var(--hair);
  border-radius: 999px; padding: 6px 12px; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; font-family: var(--font-label); font-size: 12px; }
.pp-url-chip:hover { border-color: rgba(83,224,118,0.5); color: var(--ink); }
.pp-url-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   DAY / LIGHT THEME  (activated by adding class "light" on <html>)
   Palette inspired by the Pandora reference images: white surfaces + a
   vibrant violet primary (#7c3aed) with blue/pink accents.
   ========================================================================== */

/* Theme-toggle icon: show sun in dark mode, moon in light mode */
.ti-moon { display: none; }
html.light .ti-sun { display: none; }
html.light .ti-moon { display: inline-block; }

/* --- 1) CSS variables (content components adapt automatically) --- */
html.light {
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-low: #f7f7fb;
  --surface-lowest: #ffffff;
  --surface-high: #eef0f6;
  --surface-bright: #e9ebf2;
  --primary: #7c3aed;
  --primary-container: #7c3aed;
  --on-primary: #ffffff;
  --ink: #1e1b2e;
  --muted: #5b6472;
  --dim: #9aa0ab;
  --glass: rgba(255,255,255,0.80);
  --glass-strong: rgba(255,255,255,0.90);
  --hair: rgba(20,20,45,0.10);
  --hair-soft: rgba(20,20,45,0.06);
  --glow: 0 6px 16px rgba(124,58,237,0.18);
}

/* --- 2) Base + ambient — Pandora-inspired 2040 gradient field ---
   Five soft colour wells (indigo · magenta · cyan · coral · violet) from the
   reference art bloom in the corners over a pale lavender→rose base. Kept low
   opacity + behind a fixed layer (z-index:-1) so cards/text stay fully legible. */
html.light body,
html.light .content-wrapper,
html.light .main-footer { background-color: #edeafb !important; color: #1e1b2e; }
html.light .ambient-bg {
  background:
    radial-gradient(46% 42% at 34% 15%,  rgba(58,27,216,0.22) 0%, transparent 60%),   /* indigo  */
    radial-gradient(46% 44% at 95% 14%,  rgba(236,72,153,0.24) 0%, transparent 58%),  /* magenta */
    radial-gradient(50% 52% at 97% 78%,  rgba(6,182,212,0.24) 0%, transparent 60%),   /* cyan    */
    radial-gradient(48% 46% at 44% 84%,  rgba(240,69,75,0.18) 0%, transparent 58%),   /* coral   */
    radial-gradient(66% 58% at 66% 48%,  rgba(139,63,240,0.13) 0%, transparent 72%),  /* violet  */
    linear-gradient(135deg, #f1ecff 0%, #eaf2fd 50%, #fdeef5 100%);
}
html.light .glow-text { text-shadow: none !important; }
html.light .glow-neon { box-shadow: 0 6px 16px rgba(124,58,237,0.18) !important; }
html.light ::-webkit-scrollbar-thumb { background: rgba(20,20,45,0.18); }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.5); }

/* --- 3) Chrome backgrounds (structural) --- */
html.light body > aside {
  background: #ffffff !important;
  border-right-color: rgba(20,20,45,0.08) !important;
  box-shadow: 12px 0 30px rgba(20,20,45,0.06) !important;
}
html.light body > header {
  background: rgba(255,255,255,0.78) !important;
  border-bottom-color: rgba(20,20,45,0.08) !important;
  box-shadow: 0 2px 20px rgba(20,20,45,0.06) !important;
}
html.light body > footer {
  background: rgba(255,255,255,0.88) !important;
  border-top-color: rgba(124,58,237,0.25) !important;
  box-shadow: 0 -6px 20px rgba(20,20,45,0.05) !important;
}
html.light .glass-panel {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(20,20,45,0.08) !important;
}

/* --- 4) Tailwind utility overrides used across the chrome --- */
html.light .text-primary { color: #7c3aed !important; }
html.light .text-on-surface { color: #1e1b2e !important; }
html.light .text-secondary,
html.light .text-secondary-fixed-dim { color: #5b6472 !important; }
html.light .text-primary\/10 { color: rgba(124,58,237,0.12) !important; }
html.light .text-secondary\/5 { color: rgba(20,20,45,0.05) !important; }
html.light .bg-primary { background-color: #7c3aed !important; }
html.light .bg-primary\/10 { background-color: rgba(124,58,237,0.10) !important; }
html.light .border-primary { border-color: #7c3aed !important; }
html.light .border-b-primary { border-bottom-color: #7c3aed !important; }
html.light .bg-surface-variant { background-color: #ece9f6 !important; }
html.light .bg-surface-bright { background-color: #eceef4 !important; }
html.light .bg-surface-container\/50 { background-color: rgba(20,20,45,0.03) !important; }
html.light .bg-surface-container-highest\/50 { background-color: rgba(20,20,45,0.04) !important; }
html.light .bg-white\/5 { background-color: rgba(20,20,45,0.04) !important; }
html.light .bg-white\/10 { background-color: rgba(20,20,45,0.06) !important; }
html.light .hover\:bg-white\/5:hover { background-color: rgba(124,58,237,0.07) !important; }
html.light .hover\:bg-white\/10:hover { background-color: rgba(20,20,45,0.08) !important; }
html.light .hover\:text-primary:hover { color: #7c3aed !important; }
html.light .hover\:text-white:hover { color: #1e1b2e !important; }
html.light .border-white\/5 { border-color: rgba(20,20,45,0.06) !important; }
html.light .border-white\/10 { border-color: rgba(20,20,45,0.10) !important; }
html.light .border-white\/20 { border-color: rgba(20,20,45,0.14) !important; }
html.light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(20,20,45,0.06) !important; }
/* Primary "Add" buttons: purple bg + white text */
html.light .bg-primary-container { background-color: #7c3aed !important; color: #ffffff !important; }
html.light .bg-primary-container:hover { box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important; }

/* --- 5) Stitch table / chips / pagination / icon buttons (header <style>) --- */
html.light .stitch-table thead tr { background: rgba(124,58,237,0.05); border-bottom-color: rgba(20,20,45,0.10); }
html.light .stitch-table thead th { color: #5b6472; }
html.light .stitch-table tbody tr { border-top-color: rgba(20,20,45,0.06); }
html.light .stitch-table tbody td { color: #1e1b2e; }
html.light .table-row-hover:hover { background: rgba(124,58,237,0.05); box-shadow: inset 2px 0 0 #7c3aed; }
html.light .stitch-chip { background: rgba(20,20,45,0.05); color: #5b6472; border-color: rgba(20,20,45,0.10); }
html.light .stitch-chip-primary { background: rgba(124,58,237,0.10); color: #7c3aed; border-color: rgba(124,58,237,0.25); }
html.light .icon-btn { color: #5b6472; }
html.light .icon-btn:hover { color: #7c3aed; }
html.light .icon-btn-danger:hover { color: #dc2626; }
html.light .stitch-pagination a,
html.light .stitch-pagination strong,
html.light .stitch-pagination b { color: #5b6472; border-color: rgba(20,20,45,0.12); }
html.light .stitch-pagination a:hover { background: rgba(124,58,237,0.06); color: #7c3aed; }
html.light .stitch-pagination strong,
html.light .stitch-pagination b { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* --- 6) Content components with hardcoded darks (forms/tables/buttons/alerts) --- */
html.light input.form-control,
html.light textarea.form-control,
html.light select.form-control {
  background-color: #ffffff !important;
  color: #1e1b2e !important;
  border: 1px solid rgba(20,20,45,0.15) !important;
}
html.light input.form-control:focus,
html.light textarea.form-control:focus,
html.light select.form-control:focus {
  background-color: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}
html.light input.form-control::placeholder,
html.light textarea.form-control::placeholder { color: #9aa0ab !important; }
html.light select.form-control option { background: #ffffff; color: #1e1b2e; }
html.light .table > thead > tr > th { background: rgba(124,58,237,0.05) !important; border-bottom-color: rgba(20,20,45,0.10); }
html.light .table > tbody > tr > td { border-top-color: rgba(20,20,45,0.06); }
html.light .table-striped > tbody > tr:nth-of-type(odd) { background-color: #faf9fe; }
html.light .table-hover > tbody > tr:hover { background-color: rgba(124,58,237,0.05); }
html.light .btn-default { background: #ffffff !important; border-color: rgba(20,20,45,0.15) !important; color: #1e1b2e !important; }
html.light .btn-default:hover { background: #f3f0fb !important; color: #7c3aed !important; border-color: rgba(124,58,237,0.4) !important; }
html.light .btn-primary:hover, html.light .btn-success:hover { background: #6d28d9 !important; border-color: #6d28d9 !important; box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important; }
html.light .pagination > li > a, html.light .pagination > li > span { background: #ffffff; color: #1e1b2e; border-color: rgba(20,20,45,0.12); }
html.light .pagination > .active > a, html.light .pagination > .active > span { background: #7c3aed; border-color: #7c3aed; color: #fff; }
html.light .alert-success { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.30) !important; color: #166534 !important; }
html.light .alert-danger { background: rgba(220,38,38,0.08) !important; border-color: rgba(220,38,38,0.30) !important; color: #991b1b !important; }
html.light .modal .close, html.light .alert .close { color: #1e1b2e; }
html.light label, html.light .control-label, html.light legend { color: #1e1b2e; }

/* --- 7) Login page in light mode --- */
html.light .login-logo a { text-shadow: none; }
html.light .login-box-body { box-shadow: 0 24px 60px rgba(20,20,45,0.15); }

/* --- 8) Page-size selector in light mode --- */
html.light .perpage-select { background-color: #ffffff !important; border-color: rgba(20,20,45,0.15) !important; color: #1e1b2e !important; }
html.light .perpage-select:focus { border-color: #7c3aed !important; }
html.light .perpage-select option { background: #ffffff; color: #1e1b2e; }
html.light .perpage-apply { background: #7c3aed; color: #ffffff; }
html.light .perpage-apply:hover { box-shadow: 0 4px 14px rgba(124,58,237,0.35); }

/* --- 9) Play Now button + Player Popup in light mode --- */
html.light .stream-play-btn:hover { box-shadow: 0 4px 14px rgba(124,58,237,0.35); }
html.light .player-modal { background: rgba(255,255,255,0.94); border-color: rgba(20,20,45,0.10); box-shadow: 0 20px 40px rgba(20,20,45,0.22); }
html.light .pp-close:hover { background: rgba(20,20,45,0.06); }
html.light .pp-left { border-bottom-color: rgba(20,20,45,0.08); }
@media (min-width: 768px) { html.light .pp-left { border-right-color: rgba(20,20,45,0.08); } }
html.light .pp-ambient { background: radial-gradient(circle at 50% 35%, rgba(124,58,237,0.20), transparent 60%); }
html.light .pp-cover { border-color: rgba(20,20,45,0.12); box-shadow: 0 8px 26px rgba(124,58,237,0.28); }
html.light .pp-live { background: rgba(255,255,255,0.9); border-color: rgba(20,20,45,0.10); color: #6d28d9; }
html.light .pp-cat-chip { background: rgba(20,20,45,0.05); border-color: rgba(20,20,45,0.10); }
html.light .pp-playbtn { box-shadow: 0 8px 26px rgba(124,58,237,0.35); }
html.light .pp-playbtn:hover { box-shadow: 0 10px 32px rgba(124,58,237,0.5); }
html.light .pp-url-chip:hover { border-color: rgba(124,58,237,0.5); }
html.light .pp-close, html.light .pp-icon-btn { color: #5b6472; }
html.light .pp-close:hover { color: #1e1b2e; }

/* =========================================================================
   SECTION 10 — Global responsiveness (mobile → desktop → 4K/5K/8K)
   ========================================================================= */

/* ---- Content container width: readable line length on huge displays ----- */
.content-container { max-width: 1600px; }
@media (min-width: 2200px) { .content-container { max-width: 1800px; } }
@media (min-width: 2560px) { .content-container { max-width: 2100px; } }   /* 1440p / QHD  */
@media (min-width: 3200px) { .content-container { max-width: 2500px; } }
@media (min-width: 3840px) { .content-container { max-width: 3000px; } }   /* 4K / 5K      */
@media (min-width: 6000px) { .content-container { max-width: 4200px; } }   /* 8K           */

/* ---- Mobile sidebar drawer (< 768px) ------------------------------------
   The sidebar is a fixed drawer that slides in from the left, dimming the
   page behind it. On >=768px it is a normal static rail (handled by md-flex)
   and the backdrop never shows. */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 767px) {
  /* Force the drawer into the DOM so it can animate (beats .dt-none via the
     more specific aside.dt-none selector). */
  aside.dt-none {
    display: flex !important;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  aside.dt-none.force-show { transform: translateX(0); }
  body.nav-open { overflow: hidden; }   /* lock page scroll while drawer open */
}
@media (min-width: 768px) {
  .sidebar-backdrop { display: none !important; }
}

/* ---- Fluid headings so large display type doesn't overflow small phones -- */
@media (max-width: 640px) {
  .text-display-lg  { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.12 !important; }
  .text-headline-lg { font-size: clamp(23px, 6.4vw, 30px) !important; }
  .text-headline-md { font-size: 20px !important; }
  .content-container { padding-bottom: 1rem; }
}

/* ---- Tables: let wide tables scroll inside their card, never the page ----
   min-width only inside an overflow-x-auto wrapper, so the CARD scrolls (not
   the page) and columns stay legible on phones. */
@media (max-width: 767px) {
  .overflow-x-auto > .stitch-table { min-width: 560px; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* ---- Small-phone padding tightening for the top bar & cards -------------- */
@media (max-width: 400px) {
  .stitch-table thead th { padding-left: 14px; padding-right: 14px; }
  .stitch-table tbody td { padding-left: 14px; padding-right: 14px; }
}

/* ---- Top-bar icon buttons: mobile hamburger + day/night theme toggle -----
   Use the active theme's accent (green at night / violet by day) instead of
   grey so they blend with the 2040 look; glyph turns white on hover in dark,
   ink-dark on hover in light (white would vanish on the light background). */
#sidebar-toggle, #theme-toggle { color: var(--primary) !important; }
#sidebar-toggle:hover, #theme-toggle:hover { color: #ffffff !important; }
html.light #sidebar-toggle:hover, html.light #theme-toggle:hover { color: #1e1b2e !important; }
/* The hamburger is a bare <button>; with Tailwind preflight OFF it keeps the
   browser's grey button chrome (grey fill + 3D outset border). Strip it so only
   the green/white icon shows, matching the theme toggle's clean look. */
#sidebar-toggle {
  background: transparent !important; border: 0 !important;
  padding: 4px !important; line-height: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

/* ---- Genre selector chips (radio add/edit) + genre column (radio lists) --
   Checkbox-chips capped at 5 by JS (server trims to 5 too). Colors come from
   the CSS vars, which html.light redefines, so one block themes day & night. */
.genre-chip-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 180px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--hair); border-radius: 10px;
}
.genre-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; user-select: none; margin: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.genre-chip:hover { color: var(--primary); border-color: var(--primary); }
.genre-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.genre-chip:has(input:checked) {
  color: var(--primary); border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.genre-chip:has(input:disabled:not(:checked)) { opacity: .4; cursor: not-allowed; }
/* Fallback for browsers without :has()/color-mix (JS adds .is-checked) */
.genre-chip.is-checked { color: var(--primary); border-color: var(--primary); background: rgba(83,224,118,0.12); }
html.light .genre-chip.is-checked { background: rgba(124,58,237,0.10); }
.genre-limit-msg { color: var(--primary); display: inline-block; margin-top: 6px; }
.genre-cell { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }

/* ---- Genre live-filter (radio add/edit): label + compact input in one row.
   Filters the chip list as you type so users don't scroll a huge catalog.
   Uses the CSS vars, so it themes day & night automatically. */
.genre-label-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
/* !important: Tailwind's forms reset ([type="text"]{background:#fff;...}) is
   injected inline AFTER this sheet, so plain declarations lose to it. */
.genre-filter-input {
  flex: 0 1 220px; min-width: 140px;
  padding: 5px 12px !important; font-size: 12.5px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid var(--hair) !important; border-radius: 999px !important;
  outline: none !important; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.genre-filter-input::placeholder { color: var(--muted) !important; opacity: .8; }
.genre-filter-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.genre-no-match { color: var(--muted); display: inline-block; margin-top: 6px; }

/* ---- Radio cover uploader (radio add/edit): dropzone + paste + preview ----
   Three input paths (Choose File / drag&drop / Ctrl+V paste) all feed the same
   <input name="file">. Colors come from the CSS vars -> day & night themed. */
.cover-dropzone {
  border: 2px dashed var(--hair); border-radius: 12px;
  padding: 16px; max-width: 480px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, background .15s;
}
.cover-dropzone.dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cover-drop-hint {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 12.5px; line-height: 1.4;
}
.cover-drop-hint .material-symbols-outlined { color: var(--primary); }
.cover-preview {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px;
}
.cover-preview img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--hair);
  background: #ffffff10;
}
.cover-preview-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cover-preview-name {
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cover-preview-size { color: var(--muted); font-size: 11.5px; }
/* Bare <button> keeps native chrome with Tailwind preflight OFF -> strip it
   (same fix as #sidebar-toggle). */
.cover-preview-remove {
  background: transparent !important; border: 0 !important;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px;
  border-radius: 999px; transition: color .15s;
}
.cover-preview-remove:hover { color: #ff6b6b; }
.cover-drop-error { color: #ff6b6b; }

/* ---- Cover uploader: 360x360 note + dimensions badge -------------------- */
.cover-drop-note { display: block; margin-top: 2px; color: var(--primary); font-size: 11.5px; }
.cover-preview-dims {
  display: inline-block; margin-top: 2px; align-self: flex-start;
  padding: 1px 8px; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--primary); font-size: 11px; font-weight: 600;
}

/* ---- Blur/Pixelate editor (radio cover): button + popup ------------------
   Chrome mirrors the player popup (reuses .player-overlay + .pp-close).
   Colors come from the CSS vars so day & night themes both work. */
.cover-drop-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cover-drop-row .cover-dropzone { flex: 1 1 320px; }
.bp-open-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: transparent !important; border: 1px solid var(--primary) !important;
  color: var(--primary) !important; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s, background-color .15s, transform .02s;
}
.bp-open-btn:hover { box-shadow: 0 0 14px rgba(29,185,84,0.35); }
html.light .bp-open-btn:hover { box-shadow: 0 0 14px rgba(124,58,237,0.30); }
.bp-open-btn:active { transform: translateY(1px); }

.bp-card {
  position: relative; width: 100%; max-width: 760px; color: var(--ink);
  border-radius: 20px; overflow: hidden; padding: 24px;
  background: rgba(40,40,40,0.92); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
html.light .bp-card { background: rgba(255,255,255,0.95); border-color: rgba(20,20,45,0.10); box-shadow: 0 20px 40px rgba(20,20,45,0.22); }

.bp-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding-right: 40px; }
.bp-title { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; }
.bp-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

.bp-body { display: flex; gap: 22px; flex-wrap: wrap; }
.bp-canvas-wrap {
  flex: 0 0 auto; width: min(360px, 100%); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hair);
  /* checkerboard so transparent areas are visible */
  background: repeating-conic-gradient(rgba(127,127,127,0.18) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
}
.bp-canvas-wrap canvas { display: block; width: 100%; height: auto; }

.bp-controls { flex: 1 1 220px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.bp-ctl-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bp-strength-val { color: var(--primary); text-transform: none; letter-spacing: 0; margin-left: 6px; }

.bp-modes { display: flex; gap: 8px; }
.bp-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: transparent !important; border: 1px solid var(--hair) !important;
  color: var(--muted) !important; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  -webkit-appearance: none; appearance: none; transition: color .15s, border-color .15s;
}
.bp-mode:hover { color: var(--primary) !important; border-color: var(--primary) !important; }
.bp-mode.is-active { color: var(--primary) !important; border-color: var(--primary) !important; background: rgba(83,224,118,0.12) !important; }
html.light .bp-mode.is-active { background: rgba(124,58,237,0.10) !important; }

.bp-range { width: 100%; accent-color: var(--primary); cursor: pointer; }
.bp-hint { font-size: 11.5px; color: var(--muted); margin: 0; }

.bp-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.bp-apply {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: 999px; cursor: pointer; border: 0 !important;
  background: var(--primary) !important; color: #10241a !important;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s, transform .02s;
}
html.light .bp-apply { color: #ffffff !important; }
.bp-apply:hover { box-shadow: 0 0 16px rgba(29,185,84,0.5); }
html.light .bp-apply:hover { box-shadow: 0 0 16px rgba(124,58,237,0.45); }
.bp-apply:active { transform: translateY(1px); }
.bp-cancel {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: transparent !important; border: 1px solid var(--hair) !important;
  color: var(--muted) !important; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  -webkit-appearance: none; appearance: none; transition: color .15s, border-color .15s;
}
.bp-cancel:hover { color: var(--ink) !important; border-color: var(--muted) !important; }

/* ---- "PIN NOW" button (radio list -> pin a radio to the apps' home) ------
   Outlined pill, accent color from the CSS vars (green night / violet day). */
.pin-now-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--primary); color: var(--primary) !important;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap; text-decoration: none !important;
  transition: box-shadow .15s, transform .02s;
}
.pin-now-btn:hover { box-shadow: 0 0 12px rgba(29,185,84,0.35); color: var(--primary) !important; }
html.light .pin-now-btn:hover { box-shadow: 0 0 12px rgba(124,58,237,0.30); }
.pin-now-btn:active { transform: translateY(1px); }

/* ---- Pinned list: drag&drop reordering ----------------------------------- */
.pin-drag-handle { cursor: grab; color: var(--muted); width: 40px; }
.pin-drag-handle:active { cursor: grabbing; }
.pin-drag-handle .material-symbols-outlined { font-size: 20px; vertical-align: middle; }
tr.dragging { opacity: .45; }
tr.dragging td { border-top: 1px dashed var(--primary); border-bottom: 1px dashed var(--primary); }
.pin-order-saved {
  display: inline-block; margin-left: 8px; color: var(--primary); font-weight: 700;
  opacity: 0; transition: opacity .25s;
}
.pin-order-saved.show { opacity: 1; }