@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root{
  --bg:#07130d;
  --panel:#0c1c11;
  --line:rgba(159,255,36,.16);
  --text:#f5f7ef;
  --muted:rgba(245,247,239,.72);
  --yellow:#ffd61a;
  --green:#1fa63a;
  --danger:#ff7b72;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#1a230f 0%,#0b0f0b 42%,#050705 100%);
  color:var(--text)
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.container{max-width:1180px;margin:0 auto;padding:28px 18px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:56px;height:56px;min-width:56px;overflow:hidden;
  border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(212,255,57,.18),rgba(57,211,83,.18));
  border:1px solid var(--line);box-shadow:var(--shadow)
}
.logo img{width:34px;height:34px;object-fit:contain}
.brand h1{margin:0;font-size:22px;letter-spacing:-.02em}
.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.btn-row,.hero-actions,.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary,.btn-secondary,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:15px;border:1px solid transparent;cursor:pointer;transition:.18s ease
}
.btn-primary{background:linear-gradient(135deg,var(--yellow),var(--green));color:#071007;font-weight:700}
.btn-secondary{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line)}
.btn-danger{background:rgba(255,123,114,.10);color:#ffd8d5;border-color:rgba(255,123,114,.22)}
.hero,.panel,.card,.entry-card,.room-card,.stat{
  background:linear-gradient(180deg,rgba(23,29,23,.96),rgba(14,19,14,.98));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero{padding:34px}
.eyebrow{
  display:inline-block;padding:8px 12px;border-radius:999px;
  background:rgba(212,255,57,.08);border:1px solid var(--line);color:var(--yellow);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px
}
.hero h2{margin:0 0 12px;font-size:clamp(34px,4.8vw,60px);line-height:1.02;max-width:860px;letter-spacing:-.04em}
.hero p{margin:0;max-width:720px;color:var(--muted);font-size:18px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.stat{padding:18px}
.stat small{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.stat strong{display:block;margin-top:8px;font-size:22px}
.grid-2,.grid-3,.dual-entry{display:grid;gap:20px}
.grid-2,.dual-entry{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1.05fr .95fr}
.panel,.card,.entry-card,.room-card{padding:24px}
.panel h3,.card h3,.entry-card h3{margin:0 0 8px;font-size:22px}
.sub{color:var(--muted);margin:0 0 18px;font-size:14px;line-height:1.55}
.tag{
  display:inline-block;padding:6px 10px;border-radius:999px;font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;border:1px solid var(--line);margin-bottom:12px;color:var(--yellow)
}
.list,.room-grid{display:grid;gap:12px}
.item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)
}
.item strong,.room-card h4{margin:0;font-size:17px}
.meta{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.4}
.field{margin-bottom:14px}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
input,select{
  width:100%;border-radius:16px;border:1px solid var(--line);padding:14px;
  background:rgba(0,0,0,.22);color:var(--text);outline:none
}
.room-box{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;
  border:1px solid var(--line);border-radius:20px;background:rgba(0,0,0,.18);margin-bottom:18px
}
.qr{
  width:90px;height:90px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(212,255,57,.15),rgba(57,211,83,.15));
  border:1px solid var(--line);font-size:38px;color:var(--yellow)
}
.now{
  padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(212,255,57,.11),rgba(57,211,83,.11));
  border:1px solid var(--line);margin-bottom:18px
}
.pill{
  display:inline-block;padding:7px 10px;border-radius:999px;font-size:12px;background:rgba(57,211,83,.12);
  color:#caffb8;border:1px solid rgba(57,211,83,.22)
}
.now h2{margin:12px 0 6px;font-size:42px;letter-spacing:-.03em}
.now p{margin:0;color:var(--muted)}
.status-badge{
  display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;margin-top:8px;border:1px solid var(--line)
}
.status-pending{color:#fff1a8;background:rgba(212,255,57,.08)}
.status-accepted{color:#bfffd0;background:rgba(57,211,83,.10)}
.muted-box,.search-note{
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-size:14px
}
footer{margin-top:28px;color:var(--muted);font-size:13px}
@media (max-width:980px){.stats,.grid-2,.grid-3,.dual-entry{grid-template-columns:1fr}}


.hero-cta-band{
  margin-top:22px;padding:22px 24px;border-radius:22px;
  border:1px solid rgba(212,255,57,.24);
  background:linear-gradient(135deg,rgba(212,255,57,.16),rgba(57,211,83,.10));
  box-shadow:0 20px 60px rgba(0,0,0,.20);
}
.hero-cta-band strong{
  display:block;font-size:34px;font-weight:800;letter-spacing:-.05em;line-height:0.98;
  color:#f7fbef;
}
.cta-dual{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px
}
.cta-dual .btn-primary,.cta-dual .btn-secondary{
  min-height:58px;font-size:18px;font-weight:700
}
.cta-dual .btn-secondary{
  background:linear-gradient(135deg,#d4ff39,#7cf05c);
  color:#071007;border-color:transparent;
}
.entry-card{
  position:relative;overflow:hidden;
}
.entry-card:before{
  content:"";position:absolute;inset:auto -40px -40px auto;width:130px;height:130px;border-radius:999px;
  background:radial-gradient(circle,var(--yellow),transparent 70%);
  opacity:.08;pointer-events:none;
}
.entry-card h3{
  font-size:28px;letter-spacing:-.03em;line-height:1.02
}
.entry-card .sub{
  font-size:17px;max-width:520px
}


.hero-cta-band{
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:128px;
}
.hero-cta-band strong{
  max-width:980px;
  margin:0 auto;
}
.dual-entry{
  align-items:stretch;
}
.entry-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:280px;
}
.entry-card .btn-row{
  margin-top:18px;
}
.entry-card .btn-secondary{
  background:linear-gradient(135deg,var(--yellow),#7ef15d);
  color:#071007;
  border-color:transparent;
  font-weight:700;
}
.hero-actions .btn-primary,
.hero-actions .btn-secondary,
.cta-dual .btn-primary,
.cta-dual .btn-secondary{
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
@media (max-width:980px){
  .hero{
    padding:24px 20px;
  }
  .hero h2{
    font-size:clamp(30px,10vw,48px);
    line-height:1.02;
  }
  .hero p{
    font-size:16px;
    line-height:1.45;
  }
  .hero-cta-band{
    min-height:96px;
    padding:18px 16px;
  }
  .hero-cta-band strong{
    font-size:28px !important;
    line-height:1.02;
  }
  .cta-dual{
    grid-template-columns:1fr;
    gap:12px;
  }
  .cta-dual .btn-primary,
  .cta-dual .btn-secondary{
    width:100%;
    min-height:56px;
    font-size:17px;
  }
  .entry-card{
    min-height:auto;
    padding:22px 18px;
  }
  .entry-card h3{
    font-size:22px;
    line-height:1.05;
  }
  .entry-card .sub{
    font-size:16px;
    line-height:1.45;
  }
  .entry-card .btn-row a{
    width:100%;
    min-height:54px;
  }
}


.editorial-hero{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:26px;
  align-items:stretch;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-preview{
  position:relative;
  min-height:520px;
  border-radius:26px;
  border:1px solid rgba(196,255,85,.16);
  background:
    radial-gradient(circle at 20% 20%, rgba(212,255,57,.16), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(57,211,83,.13), transparent 36%),
    linear-gradient(180deg, rgba(18,24,18,.98), rgba(10,14,10,.98));
  overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}
.hero-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.18;
  pointer-events:none;
}
.preview-glow{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:999px;
  filter:blur(56px);
  opacity:.18;
}
.preview-glow.one{top:-40px; right:-30px; background:var(--yellow);}
.preview-glow.two{bottom:-50px; left:-20px; background:var(--green);}
.phone-mock{
  position:absolute;
  right:34px;
  top:38px;
  width:min(360px, 76%);
  border-radius:34px;
  border:1px solid rgba(196,255,85,.18);
  background:linear-gradient(180deg, rgba(9,13,9,.98), rgba(18,23,18,.98));
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  padding:18px;
  transform:rotate(2deg);
}
.phone-notch{
  width:110px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  margin:0 auto 18px;
}
.mock-screen{
  border-radius:24px;
  border:1px solid rgba(196,255,85,.12);
  padding:16px;
  background:
    radial-gradient(circle at top, rgba(27,35,15,.55), transparent 48%),
    linear-gradient(180deg, rgba(13,18,13,.98), rgba(9,12,9,.98));
}
.mock-badge{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(196,255,85,.14);
  color:var(--yellow);
  background:rgba(212,255,57,.08);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mock-now{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(196,255,85,.14);
  background:linear-gradient(135deg, rgba(212,255,57,.10), rgba(57,211,83,.08));
}
.mock-now h4{
  margin:6px 0 4px;
  font-size:28px;
  line-height:.98;
  letter-spacing:-.04em;
}
.mock-now p{margin:0;color:var(--muted)}
.mock-list{display:grid;gap:10px;margin-top:14px}
.mock-item{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.mock-item strong{display:block;font-size:15px}
.mock-item span{display:block;margin-top:5px;color:var(--muted);font-size:13px}
.floating-card{
  position:absolute;
  left:28px;
  bottom:34px;
  max-width:250px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(196,255,85,.15);
  background:rgba(10,14,10,.82);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.26);
}
.floating-card h4{
  margin:0 0 8px;
  font-size:24px;
  line-height:.98;
  letter-spacing:-.03em;
}
.floating-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.cta-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:20px
}
.cta-dual .btn-primary,.cta-dual .btn-secondary{
  min-height:58px;
  font-size:18px;
  font-weight:700;
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.cta-dual .btn-secondary{
  background:linear-gradient(135deg,var(--yellow),#7ef15d);
  color:#071007;
  border-color:transparent;
}
.hero-cta-band{
  margin-top:22px;
  padding:22px 24px;
  border-radius:22px;
  border:1px solid rgba(212,255,57,.24);
  background:linear-gradient(135deg,rgba(212,255,57,.16),rgba(57,211,83,.10));
  box-shadow:0 20px 60px rgba(0,0,0,.20);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:128px;
}
.hero-cta-band strong{
  display:block;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.05em;
  line-height:.98;
  color:#f7fbef;
  max-width:980px;
  margin:0 auto;
}

  50%{opacity:.24}
  100%{opacity:.12}
}


@media (max-width:980px){
  .editorial-hero{grid-template-columns:1fr}
  .hero-preview{min-height:420px}
  .phone-mock{
    position:relative;
    top:auto; right:auto;
    width:100%;
    max-width:380px;
    margin:30px auto 0;
    transform:none;
    animation:none;
  }
  .floating-card{
    position:relative;
    left:auto; bottom:auto;
    max-width:none;
    margin:18px;
  }
  .hero h2{font-size:clamp(30px,10vw,48px);line-height:1.02}
  .hero p{font-size:16px;line-height:1.45}
  .hero-cta-band{min-height:96px;padding:18px 16px}
  .hero-cta-band strong{font-size:28px !important;line-height:1.02}
  .cta-dual{grid-template-columns:1fr;gap:12px}
  .cta-dual .btn-primary,.cta-dual .btn-secondary{width:100%;min-height:56px;font-size:17px}
}


.top-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:22px;
}
.mini-marquee{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(23,29,23,.96),rgba(14,19,14,.98));
  box-shadow:var(--shadow);
  padding:18px;
}
.mini-marquee h3{
  margin:0 0 12px;
  font-size:18px;
  letter-spacing:-.02em;
}
.marquee-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:marqueeMove 22s linear infinite;
}
.mini-marquee:hover .marquee-track{
  animation-play-state:paused;
}
.marquee-pill{
  min-width:180px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.marquee-pill strong{
  display:block;
  font-size:16px;
}
.marquee-pill span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.request-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
  background:rgba(212,255,57,.08);
  color:var(--yellow);
}
@keyframes marqueeMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:980px){
  .top-strip{
    grid-template-columns:1fr;
  }
  .marquee-pill{
    min-width:150px;
  }
}


:root{
  --panel-border: rgba(196,255,85,.12);
}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(212,255,57,.08), transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(57,211,83,.08), transparent 25%),
    radial-gradient(circle at top,#1a230f 0%,#0b0f0b 42%,#050705 100%);
}
.topbar{
  position:relative;
}
.brand h1{
  letter-spacing:-.04em;
}
.hero,.panel,.card,.entry-card,.room-card,.stat,.mini-marquee{
  backdrop-filter: blur(10px);
}
.panel,.card,.entry-card,.room-card,.stat{
  border-color:var(--panel-border);
}
input,select{
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
input:focus,select:focus{
  border-color:rgba(212,255,57,.28);
  box-shadow:0 0 0 4px rgba(212,255,57,.08);
  transform:translateY(-1px);
}
.btn-primary,.btn-secondary,.btn-danger{
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  filter:saturate(1.03);
}
.panel h3,.card h3,.entry-card h3{
  letter-spacing:-.04em;
}
.room-card,.item{
  position:relative;
  overflow:hidden;
}
.room-card::after,.item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
  transform:translateX(-100%);
  pointer-events:none;
}
.room-card:hover::after,.item:hover::after{
  transition:transform .55s ease;
  transform:translateX(100%);
}
.export-note{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}


:root{
  --bg:#071007;
  --panel:#101712;
  --panel-2:#161f17;
  --line-strong:rgba(196,255,85,.22);
  --glass:rgba(9,13,9,.62);
  --shadow-soft:0 22px 60px rgba(0,0,0,.30);
  --shadow-hard:0 34px 100px rgba(0,0,0,.46);
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.01em;
  background:
    radial-gradient(circle at 12% 0%, rgba(212,255,57,.11), transparent 20%),
    radial-gradient(circle at 88% 10%, rgba(57,211,83,.10), transparent 24%),
    radial-gradient(circle at top,#172110 0%,#0b110b 42%,#050705 100%);
}

.container{
  max-width:1240px;
  padding:30px 20px 70px;
}

.topbar{
  padding:10px 0 4px;
}

.brand h1,
.hero h2,
.panel h3,
.card h3,
.entry-card h3,
.mini-marquee h3,
.now h2{
  font-family:"Space Grotesk", Inter, sans-serif;
  letter-spacing:-.06em;
}

.brand p,
.sub,
.meta{
  color:rgba(245,247,239,.74);
}

.logo{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:22px;
  border:1px solid rgba(196,255,85,.20);
  background:
    radial-gradient(circle at 30% 20%, rgba(212,255,57,.20), transparent 46%),
    linear-gradient(145deg, rgba(212,255,57,.14), rgba(57,211,83,.08));
  box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}

.logo img{
  width:35px;
  height:35px;
  filter:drop-shadow(0 0 12px rgba(212,255,57,.22));
}

.hero,
.panel,
.card,
.entry-card,
.room-card,
.stat,
.mini-marquee{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(23,29,23,.90), rgba(12,17,12,.96));
  border:1px solid rgba(196,255,85,.14);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
}

.hero::before,
.panel::before,
.card::before,
.entry-card::before,
.room-card::before,
.stat::before,
.mini-marquee::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.03) 20%, transparent 45%);
  pointer-events:none;
}

.hero{
  border-radius:28px;
  padding:40px;
  box-shadow:var(--shadow-hard), inset 0 1px 0 rgba(255,255,255,.05);
}

.hero h2{
  font-size:clamp(38px,5vw,70px);
  line-height:.96;
  text-wrap:balance;
}

.hero p{
  font-size:18px;
  line-height:1.42;
}

.eyebrow,
.tag,
.pill,
.request-count,
.muted-box[data-dj-badge],
.muted-box[data-guest-badge],
#consoleRoomCode{
  font-family:"Orbitron", Inter, sans-serif;
  letter-spacing:.12em;
}

.eyebrow,
.tag{
  border-color:rgba(196,255,85,.18);
  background:linear-gradient(135deg, rgba(212,255,57,.08), rgba(57,211,83,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-cta-band{
  border:1px solid rgba(196,255,85,.22);
  background:
    radial-gradient(circle at 50% 50%, rgba(212,255,57,.14), transparent 60%),
    linear-gradient(135deg, rgba(212,255,57,.16), rgba(57,211,83,.10));
  box-shadow:0 20px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-cta-band strong{
  text-shadow:0 4px 24px rgba(255,255,255,.06);
}

.btn-primary,
.btn-secondary,
.btn-danger{
  position:relative;
  overflow:hidden;
  min-height:54px;
  padding:14px 18px;
  border-radius:17px;
  font-weight:700;
  box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  will-change:transform, box-shadow;
}

.btn-primary::before,
.btn-secondary::before,
.btn-danger::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 40%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .65s ease;
  pointer-events:none;
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-danger:hover::before{
  transform:translateX(120%);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 20px 42px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.btn-primary{
  background:linear-gradient(135deg, #d9ff45 0%, #9af33d 40%, #4ee04f 100%);
}

.btn-secondary{
  background:linear-gradient(135deg, #d9ff45 0%, #8bf24b 100%);
  color:#091109;
  border-color:transparent;
}

.btn-danger{
  background:linear-gradient(135deg, rgba(255,123,114,.16), rgba(255,123,114,.08));
}

input,select{
  min-height:54px;
  border-radius:17px;
  background:linear-gradient(180deg, rgba(8,11,8,.74), rgba(12,18,12,.82));
  border:1px solid rgba(196,255,85,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

input::placeholder{
  color:rgba(245,247,239,.34);
}

input:focus,
select:focus{
  border-color:rgba(196,255,85,.30);
  box-shadow:0 0 0 4px rgba(212,255,57,.08), 0 14px 24px rgba(0,0,0,.18);
}

.item,
.room-card{
  border-radius:20px;
  border:1px solid rgba(196,255,85,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.item strong,
.room-card h4{
  font-size:18px;
  letter-spacing:-.03em;
}

.room-box{
  border-radius:24px;
  border-color:rgba(196,255,85,.16);
  background:
    radial-gradient(circle at 15% 15%, rgba(212,255,57,.08), transparent 30%),
    linear-gradient(180deg, rgba(9,13,9,.75), rgba(15,20,15,.82));
}

.qr{
  box-shadow:0 18px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

.now{
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 20%, rgba(212,255,57,.18), transparent 38%),
    linear-gradient(135deg, rgba(212,255,57,.10), rgba(57,211,83,.12));
  box-shadow:0 18px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
}

.now h2{
  font-size:48px;
  line-height:.94;
}

.muted-box{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(196,255,85,.12);
}

.request-count{
  border-color:rgba(196,255,85,.18);
  background:linear-gradient(135deg, rgba(212,255,57,.12), rgba(57,211,83,.08));
}

@media (max-width:980px){
  .container{
    padding:20px 14px 48px;
  }
  .hero{
    padding:24px 20px;
  }
  .hero h2{
    font-size:clamp(34px,11vw,52px);
  }
  .hero p{
    font-size:16px;
  }
  .now h2{
    font-size:38px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-danger{
    min-height:56px;
  }
}


.auth-shell,
.dashboard-shell,
.room-shell{
  position:relative;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(196,255,85,.16);
  background:linear-gradient(135deg, rgba(212,255,57,.08), rgba(57,211,83,.05));
  color:var(--yellow);
  font-family:"Orbitron", Inter, sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.page-hero{
  margin-bottom:20px;
  padding:26px 28px;
  border-radius:28px;
  border:1px solid rgba(196,255,85,.14);
  background:
    radial-gradient(circle at 12% 20%, rgba(212,255,57,.10), transparent 28%),
    linear-gradient(180deg, rgba(23,29,23,.90), rgba(12,17,12,.96));
  box-shadow:var(--shadow-hard), inset 0 1px 0 rgba(255,255,255,.04);
}
.page-hero h2{
  margin:12px 0 8px;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:clamp(32px,4.2vw,54px);
  line-height:.96;
  letter-spacing:-.06em;
}
.page-hero p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:17px;
  line-height:1.45;
}
.auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.auth-card{
  min-height:100%;
}
.visual-side{
  position:relative;
  overflow:hidden;
}
.visual-side::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-30px;
  top:-30px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(212,255,57,.22), transparent 70%);
  pointer-events:none;
}
.visual-side::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-20px;
  bottom:-30px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(57,211,83,.18), transparent 70%);
  pointer-events:none;
}
.feature-stack{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.feature-card{
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.feature-card strong{
  display:block;
  font-size:17px;
  letter-spacing:-.03em;
}
.feature-card span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}
.metric-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.metric-pill{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.metric-pill b{
  display:block;
  font-family:"Orbitron", Inter, sans-serif;
  font-size:18px;
  color:var(--yellow);
  letter-spacing:.06em;
}
.metric-pill span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.console-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
}
.sticky-side{
  position:sticky;
  top:22px;
  align-self:start;
}
.side-panel{
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(196,255,85,.12);
  background:
    radial-gradient(circle at 18% 18%, rgba(212,255,57,.10), transparent 35%),
    linear-gradient(180deg, rgba(23,29,23,.90), rgba(12,17,12,.96));
  box-shadow:var(--shadow-soft);
}
.side-panel h3{
  margin:0 0 8px;
  font-size:22px;
}
.side-list{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.side-item{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.side-item strong{
  display:block;
  font-size:16px;
}
.side-item span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.room-stage{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:20px;
}
.guest-stage{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
}
.hero-preview-compact{
  margin-top:18px;
  display:grid;
  gap:12px;
}
.preview-bar{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.preview-bar strong{
  display:block;
  font-size:16px;
}
.preview-bar span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}
@media (max-width:980px){
  .auth-grid,
  .console-grid,
  .room-stage,
  .guest-stage,
  .metric-row{
    grid-template-columns:1fr;
  }
  .page-hero{
    padding:22px 18px;
  }
  .page-hero h2{
    font-size:clamp(28px,9vw,42px);
  }
  .sticky-side{
    position:relative;
    top:auto;
  }
}


/* microinteractions + premium polish */
:root{
  --ease-premium:cubic-bezier(.22,.9,.28,1);
}
.brand,
.logo,
.hero,
.panel,
.card,
.entry-card,
.room-card,
.item,
.side-panel,
.btn-primary,
.btn-secondary,
.btn-danger,
input,
select{
  transition:
    transform .28s var(--ease-premium),
    box-shadow .28s var(--ease-premium),
    border-color .22s ease,
    background .28s var(--ease-premium),
    filter .22s ease,
    opacity .22s ease;
}

.hero:hover,
.panel:hover,
.card:hover,
.entry-card:hover,
.room-card:hover,
.side-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 30px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

.logo:hover{
  transform:translateY(-1px) scale(1.03) rotate(-1.5deg);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active{
  transform:translateY(1px) scale(.985);
}

.btn-primary,
.btn-secondary,
.btn-danger{
  isolation:isolate;
}

.btn-primary::after,
.btn-secondary::after,
.btn-danger::after{
  content:"";
  position:absolute;
  inset:auto;
  width:14px;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.26);
  filter:blur(10px);
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.0;
  transition:opacity .25s ease;
  z-index:-1;
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-danger:hover::after{
  opacity:.8;
}

.panel h3,
.card h3,
.entry-card h3,
.side-panel h3{
  display:flex;
  align-items:center;
  gap:10px;
}

.panel h3::before,
.card h3::before,
.entry-card h3::before,
.side-panel h3::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--yellow),var(--green));
  box-shadow:0 0 0 4px rgba(212,255,57,.08), 0 0 16px rgba(212,255,57,.12);
  flex:0 0 auto;
}

.muted-box[data-dj-badge],
.muted-box[data-guest-badge]{
  position:relative;
  padding-left:34px !important;
}

.muted-box[data-dj-badge]::before,
.muted-box[data-guest-badge]::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  transform:translateY(-50%);
  background:linear-gradient(135deg,var(--yellow),var(--green));
  box-shadow:0 0 12px rgba(212,255,57,.34);
  animation:statusPulse 2.2s ease-in-out infinite;
}

.pill{
  position:relative;
  padding-left:30px;
}

.pill::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  transform:translateY(-50%);
  background:#9cff8a;
  box-shadow:0 0 14px rgba(156,255,138,.52);
  animation:statusPulse 1.8s ease-in-out infinite;
}

.status-badge{
  backdrop-filter:blur(8px);
}

.request-count{
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.item{
  transform-origin:center;
}

.item:hover{
  transform:translateY(-1px);
  border-color:rgba(196,255,85,.18);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

input:hover,
select:hover{
  border-color:rgba(196,255,85,.18);
}

input[type="email"]{
  letter-spacing:.01em;
}

.now{
  position:relative;
  overflow:hidden;
}

.now::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.06) 30%, transparent 55%);
  transform:translateX(-120%);
  animation:softSweep 7s linear infinite;
  pointer-events:none;
}

.room-box .meta,
.preview-bar span,
.feature-card span,
.side-item span{
  text-wrap:balance;
}

.hero .cta-dual a,
.entry-card .btn-row a,
.topbar .btn-row a,
.topbar .btn-row button{
  min-width:170px;
}

#songResults .item .actions .btn-primary{
  min-width:168px;
}

#requestedList .item,
#acceptedList .item,
#playedList .item{
  border-left:1px solid rgba(196,255,85,.14);
}

@keyframes statusPulse{
  0%{opacity:.8; transform:translateY(-50%) scale(1)}
  50%{opacity:1; transform:translateY(-50%) scale(1.25)}
  100%{opacity:.8; transform:translateY(-50%) scale(1)}
}

@keyframes softSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

@media (max-width:980px){
  .hero .cta-dual a,
  .entry-card .btn-row a,
  .topbar .btn-row a,
  .topbar .btn-row button,
  #songResults .item .actions .btn-primary{
    min-width:unset;
    width:100%;
  }
  .panel h3,
  .card h3,
  .entry-card h3,
  .side-panel h3{
    gap:8px;
  }
  .panel h3::before,
  .card h3::before,
  .entry-card h3::before,
  .side-panel h3::before{
    width:9px;
    height:9px;
  }
}


/* copy + consistency polish */
.page-hero p,
.hero p,
.sub,
.meta,
.feature-card span,
.side-item span,
.preview-bar span{
  max-width:68ch;
}

.page-hero,
.hero,
.panel,
.card,
.entry-card,
.side-panel{
  border-radius:30px;
}

.room-card,
.item,
.feature-card,
.side-item,
.preview-bar,
.mini-marquee,
.metric-pill,
.room-box{
  border-radius:22px;
}

h1,h2,h3,h4,strong{
  text-rendering:optimizeLegibility;
}

.page-hero h2,
.hero h2{
  text-wrap:balance;
}

.btn-row{
  align-items:center;
}

@media (max-width:980px){
  .page-hero,
  .hero,
  .panel,
  .card,
  .entry-card,
  .side-panel{
    border-radius:24px;
  }
}


.qr{
  position:relative;
  overflow:hidden;
}
.qr img{
  background:#fff;
  padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
#guestAcceptedList .status-badge,
#guestPlayedList .status-badge{
  margin-top:10px;
}


/* console cleanup + mobile-first comfort */
.console-grid{
  align-items:start;
}
.console-main{
  display:grid;
  gap:18px;
}
.console-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.console-toolbar .left,
.console-toolbar .right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.console-section-title{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.03em;
}
.compact-list{
  display:grid;
  gap:10px;
}
.compact-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.compact-item .info strong{
  display:block;
  font-size:17px;
  letter-spacing:-.03em;
}
.compact-item .info .meta{
  margin-top:4px;
}
.compact-item .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.compact-item .actions .btn-secondary,
.compact-item .actions .btn-danger{
  min-height:46px;
  padding:10px 14px;
}
.console-room-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
}
.console-room-meta{
  display:grid;
  gap:8px;
}
.console-room-meta strong{
  font-size:30px;
  letter-spacing:-.05em;
}
.console-side-stats{
  display:grid;
  gap:10px;
}
.side-stat{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);
}
.side-stat b{
  display:block;
  font-family:"Orbitron", Inter, sans-serif;
  font-size:18px;
  color:var(--yellow);
}
.side-stat span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
#roomLinkMsg{max-width:420px}
.room-box .btn-row .btn-secondary{min-width:150px}
@media (max-width:980px){
  .page-hero{display:none;}
  .console-grid{grid-template-columns:1fr !important;gap:14px;}
  .console-main{gap:14px;}
  .console-toolbar{
    padding:10px 12px;border-radius:16px;position:sticky;top:8px;z-index:20;
    backdrop-filter:blur(10px);
  }
  .console-toolbar .left,.console-toolbar .right{width:100%}
  .console-toolbar .right{justify-content:stretch}
  .console-toolbar .right > *{flex:1 1 0}
  .console-room-head{grid-template-columns:1fr}
  .console-room-meta strong{font-size:24px}
  .room-box{padding:14px}
  .qr{width:74px;height:74px;justify-self:start}
  .now{padding:18px;border-radius:20px}
  .now h2{font-size:30px}
  .compact-item{grid-template-columns:1fr;gap:10px;padding:12px 14px;border-radius:16px}
  .compact-item .actions{justify-content:stretch}
  .compact-item .actions > *{flex:1 1 0}
  .compact-item .actions .btn-secondary,.compact-item .actions .btn-danger{min-height:48px}
  .side-panel{padding:16px;border-radius:20px}
  .side-panel .side-list,.hero-preview-compact,.export-note{display:none}
  .topbar .brand p{display:none}
  .topbar{margin-bottom:14px}
  .container.room-shell{padding-top:12px}
}


/* DJ console executive layout */
.executive-console{display:grid;gap:16px}
.console-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.03);backdrop-filter:blur(10px)}
.console-topline .left,.console-topline .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.info-strip{display:grid;grid-template-columns:1.3fr .95fr .95fr;gap:16px;align-items:stretch}
.event-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.event-card .event-main{display:grid;gap:8px}
.event-card .event-main strong{font-size:32px;letter-spacing:-.05em}
.event-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick-box{padding:14px 16px;border-radius:18px;border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.03)}
.quick-box b{display:block;font-family:"Orbitron", Inter, sans-serif;font-size:18px;color:var(--yellow)}
.quick-box span{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.song-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.song-column{display:grid;gap:12px;align-content:start}
.song-card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;padding:14px;border-radius:18px;border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.03)}
.song-art{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg, rgba(212,255,57,.18), rgba(57,211,83,.12));border:1px solid rgba(196,255,85,.10);overflow:hidden;display:grid;place-items:center}
.song-art img{width:100%;height:100%;object-fit:cover}
.song-art span{font-family:"Orbitron", Inter, sans-serif;color:var(--yellow);font-size:16px}
.song-meta{display:grid;gap:4px}
.song-meta strong{font-size:17px;line-height:1.02;letter-spacing:-.03em}
.song-meta .micro{color:var(--muted);font-size:12px;line-height:1.35}
.song-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.song-actions .btn-secondary,.song-actions .btn-danger,.song-actions .btn-primary{min-height:42px;padding:9px 12px}
.column-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.column-title h3{margin:0;font-size:18px}
.current-now{margin:0}
#roomLinkMsg{max-width:420px}
@media (max-width:1100px){.info-strip{grid-template-columns:1fr}.song-board{grid-template-columns:1fr}}
@media (max-width:980px){
  .page-hero{display:none !important}
  .console-topline{position:sticky;top:8px;z-index:30;padding:10px 12px}
  .console-topline .left,.console-topline .right{width:100%}
  .console-topline .right > *{flex:1 1 0}
  .event-card{grid-template-columns:1fr}
  .event-card .event-main strong{font-size:24px}
  .event-actions{display:grid;grid-template-columns:1fr 1fr}
  .event-actions > *{width:100%}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .song-card{grid-template-columns:48px 1fr;padding:12px;border-radius:16px}
  .song-art{width:48px;height:48px;border-radius:12px}
  .song-actions{display:grid;grid-template-columns:1fr 1fr}
  .song-actions > *{width:100%}
}


/* sticky optimized console */
.console-topline{
  position:sticky;
  top:8px;
  z-index:40;
}
.console-sticky-head{
  position:sticky;
  top:88px;
  z-index:35;
  display:grid;
  gap:16px;
  padding-bottom:6px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.compact-room-card{
  padding:18px 20px;
}
.compact-room-card .event-card .event-main strong{
  font-size:28px;
}
.compact-room-card .event-card{
  grid-template-columns:1.2fr auto;
}
@media (max-width:980px){
  .console-sticky-head{
    top:82px;
    gap:12px;
  }
  .compact-room-card{
    padding:14px;
  }
  .compact-room-card .event-card{
    grid-template-columns:1fr;
  }
  .compact-room-card .event-card .event-main strong{
    font-size:22px;
  }
}


/* narrower sticky head + independent scroll columns */
.console-sticky-head{
  max-width:1120px;
  margin:0 auto;
}
.compact-room-card{
  padding:14px 16px;
}
.compact-room-card .info-strip{
  grid-template-columns:1.15fr .85fr .8fr;
  gap:12px;
}
.compact-room-card .event-card .event-main strong{
  font-size:24px;
}
.compact-room-card .event-actions{
  gap:8px;
}
.compact-room-card .event-actions .btn-secondary{
  min-height:42px;
  padding:10px 12px;
}
.compact-room-card .quick-grid{
  gap:8px;
}
.compact-room-card .quick-box{
  padding:12px 12px;
}
.compact-room-card .quick-box b{
  font-size:16px;
}
.song-board{
  align-items:start;
}
.song-column{
  max-height:calc(100vh - 330px);
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03);
}
.song-column::-webkit-scrollbar{
  width:8px;
}
.song-column::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:999px;
}
.song-column::-webkit-scrollbar-thumb{
  background:rgba(196,255,85,.28);
  border-radius:999px;
}
.song-column .column-title{
  position:sticky;
  top:0;
  z-index:3;
  padding:0 0 10px;
  background:linear-gradient(180deg, rgba(16,23,18,.98) 0%, rgba(16,23,18,.92) 70%, rgba(16,23,18,0) 100%);
}
@media (max-width:1280px){
  .console-sticky-head{
    max-width:none;
  }
}
@media (max-width:1100px){
  .song-column{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  .song-column .column-title{
    position:relative;
    top:auto;
    background:none;
  }
  .compact-room-card .info-strip{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .console-sticky-head{
    top:78px;
  }
  .compact-room-card{
    padding:12px;
  }
  .compact-room-card .event-card .event-main strong{
    font-size:21px;
  }
  .compact-room-card .event-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* real fix: narrower sticky head + complete quick panel + scroll at correct level */
.executive-console{
  max-width: 1320px;
  margin: 0 auto;
}
.console-topline{
  max-width: 1180px;
  margin: 0 auto;
}
.console-sticky-head{
  max-width: 1180px;
  margin: 0 auto;
}
.compact-room-card{
  padding: 12px 14px;
}
.compact-room-card .info-strip{
  grid-template-columns: minmax(340px,1.15fr) minmax(260px,.8fr) minmax(300px,.95fr);
  gap: 12px;
}
.compact-room-card .event-card{
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.compact-room-card .event-card .event-main strong{
  font-size: 22px;
  line-height: .98;
}
.compact-room-card .event-actions{
  gap: 8px;
}
.compact-room-card .event-actions .btn-secondary{
  min-height: 40px;
  padding: 9px 12px;
}
.compact-room-card .quick-grid{
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}
.compact-room-card .quick-box{
  padding: 10px 12px;
}
.compact-room-card .quick-box b{
  font-size: 15px;
}
.compact-room-card .quick-box span{
  font-size: 12px;
  line-height: 1.2;
}
.current-now{
  padding: 16px;
}
.current-now h2{
  font-size: 34px;
}
.current-now p{
  font-size: 16px;
}
.song-board{
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  gap: 14px;
}
.song-column{
  min-height: 0;
}
.song-column.panel{
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.song-column .compact-list{
  min-height: 0;
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,255,85,.32) rgba(255,255,255,.03);
}
.song-column .compact-list::-webkit-scrollbar{
  width: 8px;
}
.song-column .compact-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,.03);
  border-radius: 999px;
}
.song-column .compact-list::-webkit-scrollbar-thumb{
  background: rgba(196,255,85,.28);
  border-radius: 999px;
}
.song-column .column-title{
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0 0 10px;
  background: linear-gradient(180deg, rgba(16,23,18,.98) 0%, rgba(16,23,18,.92) 70%, rgba(16,23,18,0) 100%);
}
@media (max-width: 1200px){
  .compact-room-card .info-strip{
    grid-template-columns: 1fr 1fr;
  }
  .compact-room-card .info-strip > :last-child{
    grid-column: 1 / -1;
  }
}
@media (max-width: 1100px){
  .song-board{
    grid-template-columns: 1fr;
  }
  .song-column.panel{
    display: block;
    overflow: visible;
  }
  .song-column .compact-list{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .song-column .column-title{
    position: relative;
    top: auto;
    background: none;
  }
}
@media (max-width: 980px){
  .console-topline,
  .console-sticky-head{
    max-width: none;
  }
  .compact-room-card{
    padding: 12px;
  }
  .compact-room-card .info-strip{
    grid-template-columns: 1fr;
  }
  .compact-room-card .event-card{
    grid-template-columns: 1fr;
  }
  .current-now h2{
    font-size: 28px;
  }
}


/* compact sticky console */
.executive-console{
  max-width:1240px;
}
.console-topline{
  max-width:1040px;
  padding:10px 12px;
}
.console-topline .left,
.console-topline .right{
  gap:8px;
}
.console-topline .muted-box{
  padding:8px 12px !important;
  font-size:13px;
}
.console-topline .btn-primary,
.console-topline .btn-secondary{
  min-height:40px;
  padding:8px 12px;
  font-size:14px;
  border-radius:14px;
}
.console-sticky-head{
  max-width:1040px;
  top:74px;
}
.compact-room-card{
  padding:10px 12px;
}
.compact-room-card .info-strip{
  grid-template-columns:minmax(300px,1.15fr) minmax(220px,.8fr) minmax(240px,.85fr);
  gap:10px;
}
.compact-room-card .event-card .event-main{
  gap:6px;
}
.compact-room-card .event-card .event-main strong{
  font-size:20px;
}
.compact-room-card .event-card .meta{
  font-size:13px;
  line-height:1.25;
}
.compact-room-card .event-actions{
  gap:8px;
}
.compact-room-card .event-actions .btn-secondary{
  min-height:36px;
  padding:8px 10px;
  font-size:13px;
  border-radius:12px;
}
.compact-room-card .qr{
  width:86px;
  height:86px;
  border-radius:16px;
}
.current-now{
  padding:12px 14px;
  border-radius:20px;
}
.current-now .pill{
  font-size:11px;
}
.current-now h2{
  font-size:26px;
  line-height:.95;
  margin:8px 0 4px;
}
.current-now p{
  font-size:15px;
}
.compact-room-card .quick-grid{
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.compact-room-card .quick-box{
  padding:10px 10px;
  border-radius:14px;
}
.compact-room-card .quick-box b{
  font-size:14px;
}
.compact-room-card .quick-box span{
  font-size:11px;
  line-height:1.15;
}
.song-board{
  gap:12px;
}
.song-column.panel{
  padding:14px;
}
.song-column .column-title h3{
  font-size:16px;
}
@media (max-width:980px){
  .topbar{
    margin-bottom:10px;
  }
  .topbar .brand h1{
    font-size:20px;
  }
  .topbar .btn-row{
    display:none;
  }
  .console-topline{
    max-width:none;
    top:8px;
    padding:8px 10px;
    gap:8px;
  }
  .console-topline .left{
    width:100%;
  }
  .console-topline .right{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .console-topline .right .btn-primary{
    grid-column:1 / -1;
  }
  .console-topline .muted-box{
    font-size:12px;
    padding:7px 10px !important;
  }
  .console-topline .btn-primary,
  .console-topline .btn-secondary{
    min-height:38px;
    font-size:13px;
    padding:8px 10px;
  }
  .console-sticky-head{
    max-width:none;
    top:66px;
    padding-bottom:2px;
  }
  .compact-room-card{
    padding:10px;
  }
  .compact-room-card .info-strip{
    grid-template-columns:1fr;
    gap:8px;
  }
  .compact-room-card .event-card .event-main strong{
    font-size:18px;
  }
  .compact-room-card .event-card .meta{
    font-size:12px;
  }
  .compact-room-card .event-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .compact-room-card .qr{
    width:72px;
    height:72px;
  }
  .current-now{
    padding:10px 12px;
  }
  .current-now h2{
    font-size:22px;
  }
  .current-now p{
    font-size:14px;
  }
  .compact-room-card .quick-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .song-board{
    grid-template-columns:1fr;
    gap:10px;
  }
  .song-column.panel{
    padding:12px;
  }
  .song-column .compact-list{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  .song-column .column-title{
    position:relative !important;
    top:auto !important;
    background:none !important;
    padding:0 0 6px !important;
  }
  #consoleRoomLink,
  #roomLinkMsg,
  #roomQr,
  #shareRoomBtn{
    display:none !important;
  }
  .compact-room-card .event-actions{
    margin-top:2px;
  }
  .compact-room-card .event-actions .btn-secondary{
    min-height:34px;
    font-size:12px;
    padding:7px 9px;
  }
}


/* single-line console header */
.console-sticky-head{
  max-width: 1160px;
}
.compact-room-card{
  padding: 10px 12px;
}
.compact-room-card .info-strip{
  display:grid;
  grid-template-columns: minmax(300px,1.25fr) minmax(230px,.72fr) minmax(280px,.9fr);
  gap:12px;
  align-items:stretch;
}
.compact-room-card .event-card{
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
}
.compact-room-card .event-main{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "title code"
    "link link"
    "actions actions";
  align-items:center;
  column-gap:12px;
  row-gap:8px;
}
.compact-room-card .event-main strong{
  grid-area:title;
  font-size:20px;
  margin:0;
}
.compact-room-card #consoleRoomCode{
  grid-area:code;
  justify-self:start;
}
.compact-room-card #consoleRoomLink{
  grid-area:link;
  font-size:12px;
  line-height:1.2;
  opacity:.82;
}
.compact-room-card .event-actions{
  grid-area:actions;
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}
.compact-room-card .event-actions .btn-secondary{
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
  border-radius:12px;
}
.compact-room-card .qr{
  width:72px;
  height:72px;
  border-radius:14px;
}
.current-now{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 12px;
  min-height:100%;
}
.current-now .pill{
  align-self:flex-start;
  margin-bottom:6px;
}
.current-now h2{
  font-size:22px;
  margin:0 0 2px;
}
.current-now p{
  margin:0;
  font-size:14px;
}
.compact-room-card .panel:last-child{
  padding:10px 12px;
}
.compact-room-card .quick-grid{
  grid-template-columns: repeat(4,1fr);
  gap:8px;
}
.compact-room-card .quick-box{
  padding:8px 10px;
  border-radius:12px;
}
.compact-room-card .quick-box b{
  font-size:13px;
}
.compact-room-card .quick-box span{
  font-size:10px;
  line-height:1.1;
}
.compact-room-card .column-title{
  margin-bottom:8px;
}
.compact-room-card .column-title h3{
  font-size:16px;
}
#roomLinkMsg{
  display:none !important;
}
@media (max-width: 1200px){
  .compact-room-card .info-strip{
    grid-template-columns:1fr;
  }
  .compact-room-card .quick-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width: 980px){
  .compact-room-card .event-main{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "code"
      "actions";
  }
  .compact-room-card #consoleRoomLink,
  .compact-room-card #roomQr,
  .compact-room-card #shareRoomBtn{
    display:none !important;
  }
  .compact-room-card .event-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .compact-room-card .quick-grid{
    grid-template-columns:repeat(2,1fr);
  }
}


/* remove second top line and move controls to topbar */
.topbar.console-top{
  align-items:center;
}
.topbar.console-top .btn-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar.console-top .btn-row .muted-box{
  padding:8px 12px !important;
  font-size:13px;
}
.topbar.console-top .btn-row .btn-primary,
.topbar.console-top .btn-row .btn-secondary{
  min-height:40px;
  padding:8px 12px;
  font-size:14px;
  border-radius:14px;
}
.console-topline{
  display:none !important;
}
@media (max-width:980px){
  .topbar.console-top{
    gap:10px;
  }
  .topbar.console-top .brand p{
    display:none;
  }
  .topbar.console-top .btn-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .topbar.console-top .btn-row .muted-box{
    grid-column:1 / -1;
  }
  .topbar.console-top .btn-row .btn-primary{
    grid-column:1 / -1;
  }
}


/* current song emphasis + qr closer */
.compact-room-card .info-strip{
  grid-template-columns:minmax(360px,1.05fr) minmax(430px,1.15fr) minmax(320px,.9fr) !important;
  gap:10px;
}
.compact-room-card .event-card{
  grid-template-columns:1fr auto;
  gap:8px;
}
.compact-room-card .event-main{
  column-gap:10px;
}
.compact-room-card .qr{
  width:64px;
  height:64px;
  margin-left:-4px;
}
.current-now{
  display:grid;
  grid-template-columns:76px 1fr;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
.current-art{
  width:76px;
  height:76px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(196,255,85,.10);
  background:linear-gradient(135deg, rgba(212,255,57,.18), rgba(57,211,83,.12));
  display:grid;
  place-items:center;
}
.current-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.current-art span{
  font-family:"Orbitron", Inter, sans-serif;
  color:var(--yellow);
  font-size:20px;
}
.current-content{
  display:grid;
  gap:4px;
}
.current-content .pill{
  justify-self:start;
  margin-bottom:2px;
}
.current-now h2{
  font-size:34px;
  margin:0;
  line-height:.94;
}
.current-now p{
  margin:0;
}
.current-extra{
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}
@media (max-width:1200px){
  .compact-room-card .info-strip{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:980px){
  .current-now{
    grid-template-columns:56px 1fr;
    gap:10px;
    padding:12px;
  }
  .current-art{
    width:56px;
    height:56px;
    border-radius:12px;
  }
  .current-now h2{
    font-size:24px;
  }
  .current-extra{
    font-size:12px;
  }
}


/* guest room native-like search-first */
.guest-native-top{
  position:sticky;
  top:8px;
  z-index:38;
  display:grid;
  gap:10px;
  padding-bottom:6px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.search-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
}
.search-line .field{
  margin:0;
}
.search-line .field label{
  margin-bottom:6px;
}
.search-line .hint-chip{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(196,255,85,.12);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
}
.guest-native-board{
  display:grid;
  grid-template-columns:1.2fr .85fr .95fr;
  gap:14px;
}
.song-card .meta + .micro{
  margin-top:1px;
}
.song-card.compact-search{
  grid-template-columns:52px 1fr;
}
.song-card.compact-search .song-actions{
  margin-top:10px;
}
.song-card.compact-search .song-actions .btn-primary{
  min-height:40px;
}
@media (max-width:1100px){
  .guest-native-board{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .container.room-shell{
    padding:10px 10px 24px;
  }
  .topbar.console-top{
    margin-bottom:8px;
  }
  .topbar.console-top .brand{
    gap:10px;
  }
  .topbar.console-top .logo{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:16px;
  }
  .topbar.console-top .brand h1{
    font-size:18px;
  }
  .topbar.console-top .btn-row{
    display:flex !important;
    width:auto !important;
    gap:8px;
  }
  .topbar.console-top .btn-row a{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
    border-radius:12px;
  }
  .topbar.console-top .btn-row .muted-box{
    display:none;
  }
  .guest-native-top{
    top:6px;
    gap:8px;
  }
  .compact-room-card{
    padding:10px;
  }
  .compact-room-card .info-strip{
    grid-template-columns:1fr !important;
    gap:8px;
  }
  .search-line{
    grid-template-columns:1fr;
    gap:8px;
  }
  .search-line .hint-chip{
    min-height:38px;
    font-size:12px;
    justify-content:flex-start;
  }
  .current-now{
    grid-template-columns:50px 1fr;
    gap:10px;
    padding:10px 12px;
  }
  .current-art{
    width:50px;
    height:50px;
    border-radius:12px;
  }
  .current-now h2{
    font-size:22px;
  }
  .quick-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px;
  }
  .quick-box{
    padding:8px 10px !important;
    border-radius:12px !important;
  }
  .quick-box b{
    font-size:13px !important;
  }
  .quick-box span{
    font-size:10px !important;
  }
  .guest-native-board{
    gap:10px;
  }
  .song-column.panel{
    padding:12px;
    border-radius:18px;
  }
  .song-column .column-title h3{
    font-size:15px;
  }
  .song-card,
  .song-card.compact-search{
    grid-template-columns:46px 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }
  .song-art{
    width:46px;
    height:46px;
    border-radius:10px;
  }
  .song-meta strong{
    font-size:15px;
  }
  .song-meta .micro{
    font-size:11px;
  }
  .song-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .song-actions > *{
    width:100%;
  }
  body{
    overscroll-behavior-y:contain;
  }
}


/* guest room search-first visual block */
.guest-search-hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:14px;
  align-items:stretch;
}
.search-hero-main{
  display:grid;
  gap:12px;
}
.search-hero-main h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.05em;
  line-height:.98;
}
.search-bar-visual{
  display:grid;
  gap:12px;
}
.search-bar-visual .field{
  margin:0;
}
.search-bar-visual .field input{
  min-height:58px;
  font-size:18px;
  border-radius:18px;
}
.live-side{
  display:grid;
  align-items:stretch;
}
.results-hero{
  display:grid;
  gap:12px;
}
.results-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.guest-native-board{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.replay-btn{
  width:100%;
}
@media (max-width:1100px){
  .guest-search-hero{
    grid-template-columns:1fr;
  }
  .results-preview{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .guest-search-hero{
    gap:10px;
  }
  .search-hero-main h2{
    font-size:22px;
  }
  .search-bar-visual .field input{
    min-height:52px;
    font-size:16px;
  }
}


/* exact sala layout: search hero + 3 columns */
.sala-search-hero{
  position:sticky;
  top:8px;
  z-index:34;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.sala-search-card{
  padding:16px 18px;
}
.sala-search-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:16px;
  align-items:stretch;
}
.sala-search-main{
  display:grid;
  gap:14px;
}
.sala-room-head{
  display:grid;
  gap:6px;
}
.sala-room-head strong{
  display:block;
  font-size:30px;
  line-height:.98;
  letter-spacing:-.05em;
}
.sala-search-input .field{
  margin:0;
}
.sala-search-input .field input{
  min-height:60px;
  font-size:18px;
  border-radius:18px;
}
.sala-results-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sala-results-title h3{
  margin:0;
  font-size:18px;
}
.sala-live-card{
  display:grid;
  align-items:stretch;
}
.sala-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.sala-column.panel{
  display:grid;
  gap:12px;
  align-content:start;
  padding:14px;
}
.sala-column .column-title{
  margin:0;
  padding:0 0 2px;
}
.sala-column .column-title h3{
  margin:0;
  font-size:17px;
}
.replay-btn{
  width:100%;
}
@media (max-width:1100px){
  .sala-search-grid{
    grid-template-columns:1fr;
  }
  .sala-columns{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .container.room-shell{
    padding:10px 10px 24px;
  }
  .topbar.console-top{
    margin-bottom:8px;
  }
  .topbar.console-top .brand h1{
    font-size:18px;
  }
  .topbar.console-top .brand p{
    display:none;
  }
  .topbar.console-top .btn-row .muted-box{
    display:none;
  }
  .topbar.console-top .btn-row a{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
    border-radius:12px;
  }
  .sala-search-hero{
    top:6px;
    padding-bottom:6px;
  }
  .sala-search-card{
    padding:12px;
  }
  .sala-room-head strong{
    font-size:22px;
  }
  .sala-search-input .field input{
    min-height:52px;
    font-size:16px;
  }
  .sala-column.panel{
    padding:12px;
    border-radius:18px;
  }
  .song-card.compact-search,
  .song-card{
    grid-template-columns:46px 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }
  .song-art{
    width:46px;
    height:46px;
    border-radius:10px;
  }
  .song-meta strong{
    font-size:15px;
  }
  .song-meta .micro{
    font-size:11px;
  }
  .song-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .song-actions > *{
    width:100%;
  }
  .current-now{
    grid-template-columns:50px 1fr;
    gap:10px;
    padding:12px;
  }
  .current-art{
    width:50px;
    height:50px;
    border-radius:12px;
  }
  .current-now h2{
    font-size:22px;
  }
}


/* exact guest room layout */
.sala-fixed-top{
  position:sticky;
  top:8px;
  z-index:34;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.sala-hero-card{
  padding:16px 18px;
}
.sala-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:16px;
  align-items:stretch;
}
.sala-search-stack{
  display:grid;
  gap:14px;
}
.sala-room-title{
  display:grid;
  gap:6px;
}
.sala-room-title strong{
  display:block;
  font-size:30px;
  line-height:.98;
  letter-spacing:-.05em;
}
.sala-search-stack .field{
  margin:0;
}
.sala-search-stack .field input{
  min-height:60px;
  font-size:18px;
  border-radius:18px;
}
.sala-search-results{
  display:grid;
  gap:10px;
}
.sala-search-results .column-title h3{
  margin:0;
  font-size:18px;
}
.sala-live-card{
  display:grid;
  align-items:stretch;
}
.sala-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.sala-column{
  display:grid;
  gap:12px;
  align-content:start;
}
.sala-column .column-title{
  padding-bottom:4px;
}
.sala-column .column-title h3{
  margin:0;
  font-size:17px;
}
.sala-column.panel{
  padding:14px;
}
.replay-btn{
  width:100%;
}
@media (max-width:1100px){
  .sala-hero-grid{
    grid-template-columns:1fr;
  }
  .sala-columns{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .container.room-shell{
    padding:10px 10px 24px;
  }
  .topbar.console-top{
    margin-bottom:8px;
  }
  .topbar.console-top .brand p{
    display:none;
  }
  .topbar.console-top .brand h1{
    font-size:18px;
  }
  .topbar.console-top .btn-row .muted-box{
    display:none;
  }
  .topbar.console-top .btn-row a{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
    border-radius:12px;
  }
  .sala-fixed-top{
    top:6px;
    padding-bottom:6px;
  }
  .sala-hero-card{
    padding:12px;
  }
  .sala-room-title strong{
    font-size:22px;
  }
  .sala-search-stack .field input{
    min-height:52px;
    font-size:16px;
  }
  .sala-column.panel{
    padding:12px;
    border-radius:18px;
  }
  .song-card.compact-search,
  .song-card{
    grid-template-columns:46px 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }
  .song-art{
    width:46px;
    height:46px;
    border-radius:10px;
  }
  .song-meta strong{
    font-size:15px;
  }
  .song-meta .micro{
    font-size:11px;
  }
  .song-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .song-actions > *{
    width:100%;
  }
  .current-now{
    grid-template-columns:50px 1fr;
    gap:10px;
    padding:12px;
  }
  .current-art{
    width:50px;
    height:50px;
    border-radius:12px;
  }
  .current-now h2{
    font-size:22px;
  }
}


/* precise sala fix: compact hero + visible 3 columns */
.sala-fixed-top{
  position:sticky;
  top:8px;
  z-index:34;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.sala-hero-card{
  padding:12px 14px;
}
.sala-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:14px;
  align-items:stretch;
}
.sala-search-stack{
  display:grid;
  gap:10px;
}
.sala-room-title{
  display:grid;
  gap:4px;
}
.sala-room-title strong{
  display:block;
  font-size:24px;
  line-height:.96;
  letter-spacing:-.05em;
}
.sala-search-stack .field{
  margin:0;
}
.sala-search-stack .field label{
  margin-bottom:6px;
}
.sala-search-stack .field input{
  min-height:52px;
  font-size:16px;
  border-radius:16px;
}
.sala-search-results{
  display:grid;
  gap:8px;
  min-height:0;
}
.sala-search-results .column-title{
  padding-bottom:0;
}
.sala-search-results .column-title h3{
  margin:0;
  font-size:16px;
}
#songResults.compact-list{
  max-height:230px;
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03);
}
#songResults.compact-list::-webkit-scrollbar{
  width:8px;
}
#songResults.compact-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:999px;
}
#songResults.compact-list::-webkit-scrollbar-thumb{
  background:rgba(196,255,85,.28);
  border-radius:999px;
}
.sala-live-card{
  display:grid;
  align-items:stretch;
}
.current-now{
  min-height:100%;
}
.current-now h2{
  font-size:28px;
}
.current-now p{
  font-size:15px;
}
.current-extra{
  font-size:12px;
}
.sala-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.sala-column{
  display:grid;
  gap:12px;
  align-content:start;
}
.sala-column.panel{
  padding:14px;
}
.sala-column .column-title{
  padding-bottom:2px;
}
.sala-column .column-title h3{
  margin:0;
  font-size:16px;
}
@media (max-width:1100px){
  .sala-hero-grid{
    grid-template-columns:1fr;
  }
  .sala-columns{
    grid-template-columns:1fr;
  }
  #songResults.compact-list{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}
@media (max-width:980px){
  .container.room-shell{
    padding:10px 10px 24px;
  }
  .topbar.console-top{
    margin-bottom:8px;
  }
  .topbar.console-top .brand p{
    display:none;
  }
  .topbar.console-top .brand h1{
    font-size:18px;
  }
  .topbar.console-top .btn-row .muted-box{
    display:none;
  }
  .topbar.console-top .btn-row a{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
    border-radius:12px;
  }
  .sala-fixed-top{
    top:6px;
    padding-bottom:6px;
  }
  .sala-hero-card{
    padding:10px;
  }
  .sala-room-title strong{
    font-size:20px;
  }
  .sala-search-stack .field input{
    min-height:48px;
    font-size:15px;
  }
  .sala-column.panel{
    padding:12px;
    border-radius:18px;
  }
  .song-card.compact-search,
  .song-card{
    grid-template-columns:46px 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }
  .song-art{
    width:46px;
    height:46px;
    border-radius:10px;
  }
  .song-meta strong{
    font-size:15px;
  }
  .song-meta .micro{
    font-size:11px;
  }
  .song-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .song-actions > *{
    width:100%;
  }
  .current-now{
    grid-template-columns:50px 1fr;
    gap:10px;
    padding:12px;
  }
  .current-art{
    width:50px;
    height:50px;
    border-radius:12px;
  }
  .current-now h2{
    font-size:22px;
  }
  #songResults.compact-list{
    max-height:190px;
  }
}


/* sala search wider no live side */
.sala-hero-grid{
  grid-template-columns:1fr !important;
}
.sala-search-stack{
  max-width:none;
}
.sala-search-results #songResults.compact-list{
  max-height:320px;
}
@media (max-width:980px){
  .sala-search-results #songResults.compact-list{
    max-height:220px;
  }
}


/* sala layout: horizontal search + 2 result cols + live col */
.sala-fixed-top{
  position:sticky;
  top:8px;
  z-index:34;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.88) 78%, rgba(5,7,5,0) 100%);
}
.sala-hero-card{
  padding:12px 14px;
}
.sala-search-bar{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px;
  align-items:end;
  margin-bottom:12px;
}
.sala-room-title{
  display:grid;
  gap:4px;
}
.sala-room-title strong{
  display:block;
  font-size:22px;
  line-height:.96;
  letter-spacing:-.05em;
}
.sala-search-bar .field{
  margin:0;
}
.sala-search-bar .field input{
  min-height:54px;
  font-size:17px;
  border-radius:16px;
}
.sala-search-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.search-results-double{
  grid-column:span 2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.search-results-double .results-col{
  display:grid;
  gap:10px;
}
.results-col .compact-list{
  max-height:290px;
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03);
}
.results-col .compact-list::-webkit-scrollbar{
  width:8px;
}
.results-col .compact-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:999px;
}
.results-col .compact-list::-webkit-scrollbar-thumb{
  background:rgba(196,255,85,.28);
  border-radius:999px;
}
.sala-live-now{
  min-height:100%;
}
.sala-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.sala-column{
  display:grid;
  gap:12px;
  align-content:start;
}
.sala-column.panel{
  padding:14px;
}
.sala-column .column-title{
  padding-bottom:2px;
}
.sala-column .column-title h3{
  margin:0;
  font-size:16px;
}
@media (max-width:1100px){
  .sala-search-columns{
    grid-template-columns:1fr;
  }
  .search-results-double{
    grid-column:auto;
    grid-template-columns:1fr;
  }
  .sala-columns{
    grid-template-columns:1fr;
  }
  .results-col .compact-list{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}
@media (max-width:980px){
  .sala-search-bar{
    grid-template-columns:1fr;
    gap:10px;
  }
  .sala-room-title strong{
    font-size:20px;
  }
  .sala-search-bar .field input{
    min-height:48px;
    font-size:15px;
  }
  .sala-column.panel{
    padding:12px;
    border-radius:18px;
  }
}

/* vm focused rebuild */
body.mobile-page{
  background:
    radial-gradient(circle at 20% 0%, rgba(212,255,57,.08), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(57,211,83,.08), transparent 24%),
    linear-gradient(180deg,#0a0f0a 0%,#060806 100%);
}
.mobile-container{max-width:560px;margin:0 auto;padding:10px 10px 24px}
.mobile-shell{display:grid;gap:12px}
.mobile-header{
  position:sticky;top:6px;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 12px;border-radius:18px;border:1px solid rgba(196,255,85,.12);
  background:rgba(11,15,11,.86);backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.24)
}
.mobile-header .left{min-width:0;display:flex;align-items:center;gap:10px}
.mobile-header .meta-wrap{min-width:0}
.mobile-header .logo{width:42px;height:42px;min-width:42px;border-radius:14px}
.mobile-header h1{margin:0;font-size:18px;line-height:1;letter-spacing:-.04em}
.mobile-header p{margin:3px 0 0;font-size:11px;color:var(--muted)}
.mobile-actions-top{display:flex;gap:8px}
.mobile-actions-top a,.mobile-actions-top button{min-height:34px;padding:7px 10px;font-size:12px;border-radius:12px}
.mobile-card{
  padding:14px;border-radius:20px;border:1px solid rgba(196,255,85,.10);
  background:rgba(255,255,255,.03);box-shadow:0 10px 28px rgba(0,0,0,.16)
}
.mobile-title{display:grid;gap:4px}
.mobile-title strong{font-size:22px;line-height:.98;letter-spacing:-.05em}
.mobile-title .meta{color:var(--muted);font-size:13px}
.mobile-stack{display:grid;gap:10px}
.mobile-search input{min-height:52px;font-size:16px;border-radius:16px}
.mobile-live{
  display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:12px;
  border-radius:18px;border:1px solid rgba(196,255,85,.10);
  background:
    radial-gradient(circle at 20% 20%, rgba(212,255,57,.12), transparent 36%),
    linear-gradient(135deg, rgba(212,255,57,.08), rgba(57,211,83,.08))
}
.mobile-live-art{
  width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid rgba(196,255,85,.10);
  display:grid;place-items:center;background:rgba(255,255,255,.04)
}
.mobile-live-art img{width:100%;height:100%;object-fit:cover}
.mobile-live-art span{font-family:"Orbitron", Inter, sans-serif;color:var(--yellow);font-size:18px}
.mobile-live-meta{display:grid;gap:3px}
.mobile-live-meta .pill{justify-self:start}
.mobile-live-meta h2{margin:0;font-size:22px;line-height:.96}
.mobile-live-meta p{margin:0;font-size:14px}
.mobile-live-meta .micro{font-size:11px;color:var(--muted);line-height:1.25}
.mobile-segmented{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px;border-radius:16px;
  border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.03)
}
.mobile-tab{
  min-height:38px;padding:8px 10px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--text);font-size:12px;font-weight:700
}
.mobile-tab.is-active{
  background:linear-gradient(135deg, rgba(212,255,57,.18), rgba(57,211,83,.10));
  border-color:rgba(196,255,85,.14)
}
.mobile-list{display:grid;gap:8px}
.mobile-song{
  display:grid;grid-template-columns:48px 1fr;gap:10px;padding:10px;border-radius:14px;
  border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.03)
}
.mobile-song-art{
  width:48px;height:48px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  border:1px solid rgba(196,255,85,.10);background:rgba(255,255,255,.04)
}
.mobile-song-art img{width:100%;height:100%;object-fit:cover}
.mobile-song-art span{font-family:"Orbitron", Inter, sans-serif;color:var(--yellow);font-size:16px}
.mobile-song-body{display:grid;gap:3px}
.mobile-song-body strong{font-size:15px;line-height:1.02}
.mobile-song-body .meta{font-size:13px;line-height:1.2}
.mobile-song-body .micro{font-size:11px;line-height:1.25;color:var(--muted)}
.mobile-song-actions{display:grid;gap:6px;margin-top:8px}
.mobile-song-actions .btn-primary,.mobile-song-actions .btn-secondary,.mobile-song-actions .btn-danger{
  min-height:40px;padding:8px 10px;font-size:13px;border-radius:12px
}
.mobile-empty{
  padding:12px;border-radius:14px;border:1px solid rgba(196,255,85,.08);
  background:rgba(255,255,255,.02);color:var(--muted);font-size:13px
}

/* vm polish pass */
body.mobile-page{min-height:100vh}
.mobile-container{padding-top:max(10px, env(safe-area-inset-top));padding-bottom:max(24px, env(safe-area-inset-bottom))}
.mobile-shell{gap:10px}
.mobile-header{border-radius:20px;padding:10px 12px}
.mobile-header h1{font-size:17px}
.mobile-header p{font-size:10px}
.mobile-header .logo{width:40px;height:40px;min-width:40px}
.mobile-card{border-radius:18px;padding:12px}
.mobile-title strong{font-size:20px}
.mobile-title .meta{font-size:12px}
.mobile-search .field{margin:0}
.mobile-search input,.mobile-card input,.mobile-card select{min-height:50px;font-size:15px;border-radius:14px}
.mobile-card label{margin-bottom:6px;font-size:12px}
.mobile-live{border-radius:18px;padding:10px;grid-template-columns:50px 1fr}
.mobile-live-art{width:50px;height:50px;border-radius:12px}
.mobile-live-meta h2{font-size:20px}
.mobile-live-meta p{font-size:13px}
.mobile-live-meta .micro{font-size:10px}
.mobile-segmented{gap:6px;padding:3px;border-radius:14px}
.mobile-tab{min-height:36px;padding:7px 8px;font-size:11px;border-radius:11px}
.mobile-list{gap:7px}
.mobile-song{grid-template-columns:44px 1fr;gap:9px;padding:9px;border-radius:13px}
.mobile-song-art{width:44px;height:44px;border-radius:10px}
.mobile-song-body strong{font-size:14px}
.mobile-song-body .meta{font-size:12px}
.mobile-song-body .micro{font-size:10px}
.mobile-song-actions{gap:5px;margin-top:7px}
.mobile-song-actions .btn-primary,.mobile-song-actions .btn-secondary,.mobile-song-actions .btn-danger{min-height:38px;font-size:12px;border-radius:11px}
.mobile-actions-top .btn-secondary{min-height:34px}
.mobile-empty{padding:10px;border-radius:12px;font-size:12px}
.mobile-action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-action-bar .btn-secondary,.mobile-action-bar .btn-primary{width:100%}
.mobile-card.compact{padding:10px}
@media (max-width:390px){
  .mobile-container{padding-left:8px;padding-right:8px}
  .mobile-header{padding:9px 10px}
  .mobile-title strong{font-size:19px}
  .mobile-live-meta h2{font-size:18px}
  .mobile-song{grid-template-columns:42px 1fr;padding:8px}
  .mobile-song-art{width:42px;height:42px}
}


/* selector landing */
.selector-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 14px;
}
.selector-card{
  width:min(100%, 1080px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  padding:18px;
  border-radius:32px;
  border:1px solid rgba(196,255,85,.12);
  background:
    radial-gradient(circle at 14% 18%, rgba(212,255,57,.10), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(57,211,83,.08), transparent 24%),
    linear-gradient(180deg, rgba(20,26,20,.94), rgba(10,14,10,.98));
  box-shadow:0 30px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.selector-brand{
  display:grid;
  gap:14px;
  align-content:space-between;
  padding:20px;
}
.selector-brand-top{
  display:grid;
  gap:14px;
}
.selector-logo{
  width:64px;
  height:64px;
  border-radius:20px;
  border:1px solid rgba(196,255,85,.14);
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.selector-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.selector-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(196,255,85,.14);
  background:linear-gradient(135deg, rgba(212,255,57,.10), rgba(57,211,83,.06));
  color:var(--yellow);
  font-family:"Orbitron", Inter, sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.selector-title{
  margin:0;
  font-size:clamp(40px, 6vw, 72px);
  line-height:.92;
  letter-spacing:-.07em;
}
.selector-copy{
  margin:0;
  max-width:56ch;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}
.selector-foot{
  display:grid;
  gap:10px;
}
.selector-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.selector-options{
  display:grid;
  gap:14px;
  align-content:stretch;
}
.selector-option{
  position:relative;
  display:grid;
  gap:12px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(196,255,85,.12);
  background:rgba(255,255,255,.03);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}
.selector-option h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.05em;
}
.selector-option p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}
.selector-points{
  display:grid;
  gap:8px;
}
.selector-points span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.selector-option .btn-primary,
.selector-option .btn-secondary{
  min-height:48px;
  font-size:14px;
}
@media (max-width: 900px){
  .selector-card{
    grid-template-columns:1fr;
    padding:14px;
    border-radius:26px;
  }
  .selector-brand,
  .selector-option{
    padding:16px;
  }
  .selector-title{
    font-size:42px;
  }
}


/* vw guest room 4 cols stable */
.guest-now-strip{margin-bottom:14px}
.guest-now-strip .panel{padding:14px 16px}
/* v224 · cabecera de consola estrechada para dejar sitio al panel de selección del DJ */
.guest-now-strip{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dj-pick-panel{display:flex;flex-direction:column;gap:10px}
.dj-pick-panel .console-headline{display:grid;gap:2px}
.dj-pick-panel .dj-pick-title{margin:2px 0 0;font-size:20px;letter-spacing:-.03em}
.dj-pick-panel .dj-pick-hint{margin:0;font-size:12px;color:var(--muted)}
.dj-pick-search{display:grid;grid-template-columns:1fr auto;gap:8px}
.dj-pick-search input,.dj-pick-manual-grid input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(196,255,85,.22);border-radius:12px;color:var(--text);padding:9px 12px;font-size:13px;outline:none}
.dj-pick-search input:focus,.dj-pick-manual-grid input:focus{border-color:rgba(196,255,85,.55)}
.dj-pick-search .btn-secondary{padding:8px 14px;font-size:12px;border-radius:12px;white-space:nowrap}
.dj-pick-results{display:grid;gap:7px;max-height:188px;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03)}
.dj-pick-results::-webkit-scrollbar{width:7px}
.dj-pick-results::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}
.dj-pick-row{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:6px 8px}
.dj-pick-row .dj-pick-art{width:38px;height:38px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(196,255,85,.08);font-size:16px}
.dj-pick-row .dj-pick-art img{width:100%;height:100%;object-fit:cover}
.dj-pick-row .dj-pick-info{min-width:0}
.dj-pick-row .dj-pick-info strong{display:block;font-size:13px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-pick-row .dj-pick-info span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-pick-row .btn-primary{padding:6px 11px;font-size:11px;border-radius:10px;min-height:0;white-space:nowrap}
.dj-pick-manual{font-size:12px}
.dj-pick-manual summary{cursor:pointer;color:var(--muted);user-select:none;list-style:none}
.dj-pick-manual summary::-webkit-details-marker{display:none}
.dj-pick-manual summary::before{content:"+ ";color:rgba(196,255,85,.8)}
.dj-pick-manual[open] summary::before{content:"– "}
.dj-pick-manual-grid{display:grid;gap:7px;margin-top:8px}
.dj-pick-manual-grid .btn-primary{padding:9px 12px;font-size:12px;border-radius:12px;min-height:0}
@media (max-width:980px){.guest-now-strip{grid-template-columns:1fr}}
.guest-now-horizontal{display:grid;grid-template-columns:56px 1.2fr .8fr;gap:14px;align-items:center}
.guest-now-horizontal .current-art{width:56px;height:56px;border-radius:14px}
.guest-now-main{display:grid;gap:4px;min-width:0}
.guest-now-main .topline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guest-now-main h2{margin:0;font-size:30px;line-height:.96;letter-spacing:-.05em}
.guest-now-main p{margin:0}
.guest-now-side{display:grid;justify-items:end;gap:4px;text-align:right}
.guest-main-columns{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;gap:14px;align-items:start}
.guest-main-columns>.panel{padding:14px;min-height:540px;display:flex;flex-direction:column}
.guest-main-columns .column-title{flex:0 0 auto}
.guest-main-columns .compact-list{flex:1 1 auto;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03)}
.guest-main-columns .compact-list::-webkit-scrollbar{width:8px}
.guest-main-columns .compact-list::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
.guest-main-columns .compact-list::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}
.guest-search-col .field{margin:0 0 12px}
.guest-search-col .field input{min-height:50px;font-size:15px;border-radius:15px}
.guest-main-columns .song-card.compact-search{min-height:82px;padding:8px 9px;grid-template-columns:40px 1fr;gap:9px}
.guest-main-columns .song-card.compact-search .song-art{width:40px;height:40px;border-radius:9px}
.guest-main-columns .song-card.compact-search .song-meta strong{font-size:14px;line-height:1.02}
.guest-main-columns .song-card.compact-search .song-meta .meta{font-size:12px;line-height:1.15}
.guest-main-columns .song-card.compact-search .song-meta .micro{font-size:10px;line-height:1.2}
.guest-main-columns .song-card.compact-search .song-actions{margin-top:5px}
.guest-main-columns .song-card.compact-search .song-actions .btn-primary,.guest-main-columns .song-card.compact-search .song-actions .btn-secondary{min-height:32px;padding:5px 8px;font-size:11px;border-radius:10px}
@media (max-width:1350px){.guest-main-columns{grid-template-columns:1fr 1fr}.guest-main-columns>.panel{min-height:420px}}
@media (max-width:980px){.guest-now-horizontal{grid-template-columns:1fr;justify-items:start}.guest-now-side{justify-items:start;text-align:left}.guest-main-columns{grid-template-columns:1fr}.guest-main-columns>.panel{min-height:auto}.guest-main-columns .compact-list{max-height:none;overflow:visible;padding-right:0}}


/* scroll in dj room columns */
.song-columns{
  align-items:stretch;
}
.song-columns > .panel{
  min-height:540px;
  display:flex;
  flex-direction:column;
}
.song-columns > .panel .column-title{
  flex:0 0 auto;
}
.song-columns > .panel .compact-list{
  flex:1 1 auto;
  min-height:0;
  max-height:460px;
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03);
}
.song-columns > .panel .compact-list::-webkit-scrollbar{width:8px}
.song-columns > .panel .compact-list::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
.song-columns > .panel .compact-list::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}
@media (max-width:980px){
  .song-columns > .panel{
    min-height:auto;
  }
  .song-columns > .panel .compact-list{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}


/* guest console scroll + nicer back button */
.guest-main-columns{
  align-items:stretch;
}
.guest-main-columns > .panel{
  min-height:540px;
  display:flex;
  flex-direction:column;
}
.guest-main-columns > .panel .column-title{
  flex:0 0 auto;
}
.guest-main-columns > .panel .compact-list{
  flex:1 1 auto;
  min-height:0;
  max-height:460px;
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.32) rgba(255,255,255,.03);
}
.guest-main-columns > .panel .compact-list::-webkit-scrollbar{width:8px}
.guest-main-columns > .panel .compact-list::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
.guest-main-columns > .panel .compact-list::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}

/* prettier back button */
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn,
.mobile-actions-top .js-back-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(196,255,85,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(196,255,85,.06));
  box-shadow:0 8px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar .btn-row .js-back-btn::before,
.console-top .btn-row .js-back-btn::before,
.mobile-actions-top .js-back-btn::before{
  content:"←";
  display:inline-block;
  font-size:13px;
  line-height:1;
  color:var(--yellow);
}
.console-top{
  align-items:center;
}
.console-top .btn-row{
  display:flex;
  align-items:center;
  gap:10px;
}
@media (max-width:980px){
  .guest-main-columns > .panel{
    min-height:auto;
  }
  .guest-main-columns > .panel .compact-list{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  .mobile-actions-top .js-back-btn{
    padding:7px 10px;
    border-radius:12px;
  }
}


/* clean back button */
.js-back-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px);
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.js-back-btn::before{
  content:"←";
  display:inline-block;
  font-size:14px;
  line-height:1;
  color:var(--text);
}
.js-back-btn{
  font-size:0 !important;
}
.js-back-btn:hover{
  transform:translateX(-1px);
  border-color:rgba(196,255,85,.18) !important;
  background:rgba(255,255,255,.05) !important;
}
.topbar .btn-row,
.console-top .btn-row,
.mobile-actions-top{
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn{
  order:-1;
}
.mobile-actions-top .js-back-btn{
  min-width:36px;
  height:36px;
  padding:0 10px !important;
}



/* back button top right */
.topbar .btn-row,
.console-top .btn-row,
.mobile-actions-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  justify-content:flex-end;
}
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn,
.mobile-actions-top .js-back-btn{
  order:99;
}

/* back button next to versions */
.topbar .btn-row,
.console-top .btn-row,
.mobile-actions-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn,
.mobile-actions-top .js-back-btn{
  margin:0;
  min-width:auto;
  height:auto;
  padding:14px 24px !important;
  font-size:16px !important;
  border-radius:18px !important;
  border:1px solid rgba(196,255,85,.16) !important;
  background:linear-gradient(135deg, #d4ff39, #86f045) !important;
  color:#101410 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  order:0 !important;
}
.topbar .btn-row .js-back-btn::before,
.console-top .btn-row .js-back-btn::before,
.mobile-actions-top .js-back-btn::before{
  content:none !important;
}
@media (max-width:980px){
  .mobile-actions-top .js-back-btn{
    padding:10px 16px !important;
    font-size:14px !important;
    border-radius:14px !important;
  }
}

/* force back button to the right in all action groups */
.topbar .btn-row,
.console-top .btn-row,
.mobile-actions-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  justify-content:flex-end !important;
}
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn,
.mobile-actions-top .js-back-btn{
  order:999 !important;
  margin-left:0 !important;
}

/* back button next to logo */
.topbar,
.console-top,
.mobile-header{
  align-items:center;
}
.topbar .js-back-btn,
.console-top .js-back-btn{
  margin-right:8px;
}
.topbar .btn-row,
.console-top .btn-row{
  margin-left:0 !important;
  justify-content:flex-start !important;
}
.mobile-header .left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.mobile-actions-top{
  margin-left:auto;
}

/* refined back button placement */
.topbar,
.console-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar-left,
.console-top-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.topbar-actions,
.console-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.topbar-actions .js-back-btn,
.console-top-actions .js-back-btn,
.mobile-actions-top .js-back-btn{
  min-height:44px;
  padding:0 18px !important;
  border-radius:16px !important;
}
.mobile-header{
  justify-content:space-between;
}
.mobile-header .left{
  min-width:0;
}
.mobile-actions-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important;
}

/* back button same style as other buttons */
.topbar-actions .js-back-btn,
.console-top-actions .js-back-btn,
.mobile-actions-top .js-back-btn{
  min-height:unset !important;
  height:auto !important;
  min-width:auto !important;
  padding:14px 24px !important;
  border-radius:18px !important;
  border:1px solid rgba(196,255,85,.16) !important;
  background:linear-gradient(135deg, #d4ff39, #86f045) !important;
  color:#101410 !important;
  box-shadow:none !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.topbar-actions .js-back-btn::before,
.console-top-actions .js-back-btn::before,
.mobile-actions-top .js-back-btn::before{
  content:none !important;
}
@media (max-width:980px){
  .mobile-actions-top .js-back-btn{
    padding:10px 18px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }
}

/* place back button before badge */
.topbar-actions,
.console-top-actions,
.topbar .btn-row,
.console-top .btn-row,
.mobile-actions-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  justify-content:flex-end !important;
}
.topbar-actions .js-back-btn,
.console-top-actions .js-back-btn,
.topbar .btn-row .js-back-btn,
.console-top .btn-row .js-back-btn,
.mobile-actions-top .js-back-btn{
  order:1 !important;
}
.topbar-actions [data-dj-badge],
.topbar-actions [data-guest-badge],
.console-top-actions [data-dj-badge],
.console-top-actions [data-guest-badge],
.topbar .btn-row [data-dj-badge],
.topbar .btn-row [data-guest-badge],
.console-top .btn-row [data-dj-badge],
.console-top .btn-row [data-guest-badge]{
  order:2 !important;
}
.topbar-actions a,
.console-top-actions a,
.topbar .btn-row a,
.console-top .btn-row a{
  order:3 !important;
}

/* desktop guest room cleanup */
body:not(.mobile-page) .guest-now-strip{margin-bottom:16px}
body:not(.mobile-page) .guest-now-strip .panel{padding:18px 20px}
body:not(.mobile-page) .guest-now-horizontal{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center}
body:not(.mobile-page) .guest-now-horizontal .current-art{width:72px;height:72px;border-radius:16px;overflow:hidden}
body:not(.mobile-page) .guest-now-main{display:grid;gap:4px;min-width:0}
body:not(.mobile-page) .guest-now-main .topline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body:not(.mobile-page) .guest-now-main h2{margin:0;font-size:28px;line-height:.96;letter-spacing:-.05em}
body:not(.mobile-page) .guest-now-main p{margin:0;font-size:18px}
body:not(.mobile-page) .guest-now-side{display:grid;justify-items:end;gap:4px;text-align:right}
body:not(.mobile-page) .guest-main-columns{display:grid;grid-template-columns:1.08fr 1fr 1fr 1fr;gap:16px;align-items:start}
body:not(.mobile-page) .guest-main-columns>.panel{min-height:560px;display:flex;flex-direction:column;padding:16px}
body:not(.mobile-page) .guest-main-columns .column-title{flex:0 0 auto;margin-bottom:4px}
body:not(.mobile-page) .guest-main-columns .compact-list{flex:1 1 auto;min-height:0;max-height:470px;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(196,255,85,.28) rgba(255,255,255,.03)}
body:not(.mobile-page) .guest-main-columns .compact-list::-webkit-scrollbar{width:8px}
body:not(.mobile-page) .guest-main-columns .compact-list::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
body:not(.mobile-page) .guest-main-columns .compact-list::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}
body:not(.mobile-page) .guest-search-col .field{margin:0 0 12px}
body:not(.mobile-page) .guest-search-col .field input{min-height:52px;font-size:15px;border-radius:16px}
body:not(.mobile-page) .desktop-search-note{margin:0 0 10px;color:var(--muted)}
body:not(.mobile-page) #songResults{display:grid;gap:10px}
body:not(.mobile-page) #songResults .song-card.compact-search,
body:not(.mobile-page) #guestPendingList .song-card.compact-search,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start;min-height:unset;padding:12px;border-radius:16px}
body:not(.mobile-page) #songResults .song-card.compact-search .song-art,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-art,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-art,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-art{width:48px;height:48px;border-radius:12px;flex:0 0 auto}
body:not(.mobile-page) #songResults .song-card.compact-search .song-meta,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-meta,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-meta,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-meta{display:grid;gap:4px;min-width:0}
body:not(.mobile-page) #songResults .song-card.compact-search .song-meta strong,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-meta strong,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-meta strong,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-meta strong{font-size:15px;line-height:1.08}
body:not(.mobile-page) #songResults .song-card.compact-search .song-meta .meta,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-meta .meta,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-meta .meta,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-meta .meta{font-size:13px;line-height:1.2}
body:not(.mobile-page) #songResults .song-card.compact-search .song-meta .micro,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-meta .micro,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-meta .micro,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-meta .micro{font-size:11px;line-height:1.25;color:var(--muted)}
body:not(.mobile-page) #songResults .song-card.compact-search .song-actions,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-actions,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-actions,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
body:not(.mobile-page) #songResults .song-card.compact-search .song-actions .btn-primary,
body:not(.mobile-page) #songResults .song-card.compact-search .song-actions .btn-secondary,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-actions .btn-primary,
body:not(.mobile-page) #guestPendingList .song-card.compact-search .song-actions .btn-secondary,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-actions .btn-primary,
body:not(.mobile-page) #guestAcceptedList .song-card.compact-search .song-actions .btn-secondary,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-actions .btn-primary,
body:not(.mobile-page) #guestPlayedList .song-card.compact-search .song-actions .btn-secondary{min-height:34px;padding:7px 12px;font-size:12px;border-radius:12px}
body:not(.mobile-page) #guestPendingList .status-badge,
body:not(.mobile-page) #guestAcceptedList .status-badge,
body:not(.mobile-page) #guestPlayedList .status-badge{width:max-content}
@media (max-width:1280px){
  body:not(.mobile-page) .guest-main-columns{grid-template-columns:1fr 1fr}
  body:not(.mobile-page) .guest-main-columns>.panel{min-height:420px}
}
@media (max-width:920px){
  body:not(.mobile-page) .guest-now-horizontal{grid-template-columns:1fr;justify-items:start}
  body:not(.mobile-page) .guest-now-side{justify-items:start;text-align:left}
  body:not(.mobile-page) .guest-main-columns{grid-template-columns:1fr}
  body:not(.mobile-page) .guest-main-columns>.panel{min-height:auto}
  body:not(.mobile-page) .guest-main-columns .compact-list{max-height:none;overflow:visible;padding-right:0}
}

/* standard guest desktop view */
body:not(.mobile-page) .guest-main-columns{
  grid-template-columns: 1.08fr 1fr 1fr 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
}
body:not(.mobile-page) .guest-main-columns > .panel{
  min-height: 620px !important;
  height: 620px !important;
  display: flex !important;
  flex-direction: column !important;
}
body:not(.mobile-page) .guest-main-columns > .panel .compact-list{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
  padding-right: 6px !important;
}
body:not(.mobile-page) .guest-search-col{
  min-height: 620px !important;
  height: 620px !important;
}
body:not(.mobile-page) .guest-search-col .field{
  margin: 0 0 14px !important;
}
body:not(.mobile-page) .guest-search-col .field input{
  min-height: 56px !important;
}
body:not(.mobile-page) .desktop-search-note{
  color: #f5f7f2 !important;
  opacity: 1 !important;
  font-size: 15px !important;
  margin: 0 0 10px !important;
}
body:not(.mobile-page) #songResults{
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}
body:not(.mobile-page) #songResults .song-card.compact-search{
  min-height: 96px !important;
}
@media (max-width: 1280px){
  body:not(.mobile-page) .guest-main-columns{
    grid-template-columns: 1fr 1fr !important;
  }
  body:not(.mobile-page) .guest-main-columns > .panel,
  body:not(.mobile-page) .guest-search-col{
    min-height: 460px !important;
    height: 460px !important;
  }
}
@media (max-width: 920px){
  body:not(.mobile-page) .guest-main-columns{
    grid-template-columns: 1fr !important;
  }
  body:not(.mobile-page) .guest-main-columns > .panel,
  body:not(.mobile-page) .guest-search-col{
    min-height: auto !important;
    height: auto !important;
  }
  body:not(.mobile-page) .guest-main-columns > .panel .compact-list{
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
}


/* play my song palette refresh */
body{
  background:
    radial-gradient(circle at top, rgba(95,191,44,.18) 0%, rgba(16,34,18,.96) 34%, #050705 100%),
    linear-gradient(180deg, #08110b 0%, #050705 100%);
}
.logo{
  background:linear-gradient(135deg, rgba(31,166,58,.22), rgba(255,214,26,.12));
  border-color:rgba(159,255,36,.18);
}
.btn-primary{
  background:linear-gradient(135deg, #d6ff2f, #29b144);
  color:#081008;
}
.panel,
.hero,
.selector-card,
.selector-option,
.mobile-card,
.mobile-header{
  border-color:rgba(159,255,36,.14);
}


/* dask pms identity lockup */
.brand h1,
.mobile-header h1{
  letter-spacing:-.03em;
}
.brand p,
.mobile-header p{
  color:rgba(255,214,26,.92);
  font-weight:700;
  letter-spacing:.01em;
}
.selector-title{
  letter-spacing:-.06em;
}
.selector-copy{
  max-width:60ch;
}


/* qr readability fix */
.qr-box,
.qr-card,
.qr-panel,
.qr-wrap{
  display:grid;
  place-items:center;
}
#roomQr,
#qrCanvas,
canvas[data-room-qr],
.qr-box canvas,
.qr-panel canvas,
.qr-wrap canvas{
  width: 220px !important;
  height: 220px !important;
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  padding: 16px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  image-rendering: pixelated;
}
@media (max-width: 980px){
  #roomQr,
  #qrCanvas,
  canvas[data-room-qr],
  .qr-box canvas,
  .qr-panel canvas,
  .qr-wrap canvas{
    width: 180px !important;
    height: 180px !important;
    padding: 14px !important;
  }
}

/* reduce qr size */
#roomQr,
#qrCanvas,
canvas[data-room-qr],
.qr-box canvas,
.qr-panel canvas,
.qr-wrap canvas{
  width: 170px !important;
  height: 170px !important;
  padding: 12px !important;
}
@media (max-width: 980px){
  #roomQr,
  #qrCanvas,
  canvas[data-room-qr],
  .qr-box canvas,
  .qr-panel canvas,
  .qr-wrap canvas{
    width: 148px !important;
    height: 148px !important;
    padding: 10px !important;
  }
}

/* fix solicitar tema placement */
body:not(.mobile-page) #songResults .song-card.compact-search{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}
body:not(.mobile-page) #songResults .song-card.compact-search .song-art{
  grid-column: 1 !important;
  align-self: start !important;
}
body:not(.mobile-page) #songResults .song-card.compact-search .song-meta{
  grid-column: 2 !important;
  align-self: center !important;
}
body:not(.mobile-page) #songResults .song-card.compact-search .song-actions{
  grid-column: 3 !important;
  align-self: center !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:not(.mobile-page) #songResults .song-card.compact-search .song-actions .btn-primary{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  min-height: 40px !important;
  padding: 9px 16px !important;
  white-space: nowrap !important;
}
@media (max-width: 1180px){
  body:not(.mobile-page) #songResults .song-card.compact-search{
    grid-template-columns: 54px minmax(0,1fr) !important;
    align-items: start !important;
  }
  body:not(.mobile-page) #songResults .song-card.compact-search .song-actions{
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 8px !important;
  }
}


/* =====================================================================
   DASK PMS · CAPA DE REDISEÑO (v92)
   Añadida al final: redefine tokens y pule componentes sin tocar el HTML.
   Si algo no te convence, borra desde este comentario hacia abajo y
   vuelves al diseño anterior. Nada más depende de este bloque.
   ===================================================================== */

:root{
  /* base más negra y con un punto de profundidad fría */
  --bg:#050a07;
  --panel:#0a140d;
  --line:rgba(174,255,71,.14);
  --line-strong:rgba(174,255,71,.30);
  --text:#f2f6ec;
  --muted:rgba(238,244,228,.66);
  /* acento más eléctrico y con mejor contraste */
  --yellow:#e7ff4f;
  --green:#22c55e;
  --accent:#aef547;
  --danger:#ff6b6b;
  --shadow:0 28px 80px rgba(0,0,0,.55);
  --shadow-soft:0 12px 34px rgba(0,0,0,.38);
  --ring:0 0 0 3px rgba(174,255,71,.35);
  --radius:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* fondo con malla de luz + grano sutil para dar atmósfera de cabina */
body{
  background:
    radial-gradient(60% 50% at 18% -8%, rgba(174,255,71,.10), transparent 60%),
    radial-gradient(55% 45% at 100% 0%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(circle at top, #11200f 0%, #0a0f0a 44%, #040604 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.container,.selector-shell,.mobile-container{position:relative;z-index:1}

/* títulos con la display que ya cargas (Space Grotesk), más carácter */
.brand h1,.hero h2,.selector-title,.panel h3,.card h3,.entry-card h3,.now h2{
  font-family:"Space Grotesk",Inter,sans-serif;
  letter-spacing:-.03em;
}

/* superficies: hairline más limpio y profundidad real */
.hero,.panel,.card,.entry-card,.room-card,.stat,.selector-card{
  background:
    linear-gradient(180deg,rgba(24,33,22,.94),rgba(11,17,11,.97));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.room-card:hover,.entry-card:hover,.stat:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* botones: lift al pasar, press al pulsar, y foco visible accesible */
.btn-primary,.btn-secondary,.btn-danger{
  border-radius:14px;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease),border-color .2s var(--ease),filter .2s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--green));
  color:#06140a;font-weight:700;
  box-shadow:0 10px 26px rgba(34,197,94,.28);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 34px rgba(34,197,94,.4)}
.btn-secondary:hover{border-color:var(--line-strong);background:rgba(255,255,255,.07)}
.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:translateY(0) scale(.985)}

/* FOCO VISIBLE: clave para accesibilidad con teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-danger:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* inputs: foco que sí se ve (antes era outline:none a secas) */
input,select{
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
input:focus,select:focus{
  border-color:var(--line-strong);
  box-shadow:var(--ring);
  background:rgba(0,0,0,.3);
}

/* eyebrow / tag / pill: más nítidos y luminosos */
.eyebrow,.tag,.pill,.status-badge{backdrop-filter:blur(2px)}
.eyebrow{color:var(--accent);border-color:var(--line-strong)}

/* "now playing": que respire como protagonista */
.now{
  background:linear-gradient(135deg,rgba(174,255,71,.12),rgba(34,197,94,.08));
  border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* tarjetas de canción: micro-feedback al pasar */
.song-card,.item,.mobile-song{
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.song-card:hover,.item:hover,.mobile-song:hover{
  border-color:var(--line-strong);
  background:rgba(255,255,255,.05);
}

/* entrada de página con un reveal suave y escalonado */
@keyframes pms-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero,.dual-entry,.top-strip,.grid-2,.grid-3,.selector-card,.mobile-card{
  animation:pms-rise .55s var(--ease) both;
}
.dual-entry{animation-delay:.08s}
.top-strip{animation-delay:.16s}

/* respeto a quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* pulido móvil: targets más cómodos para el pulgar */
@media (max-width:560px){
  .btn-primary,.btn-secondary,.btn-danger{padding:14px 16px;min-height:48px}
  .hero{padding:24px}
}


/* access and overlap fixes */
@media (max-width: 900px){
  .topbar,
  .console-top{
    gap:12px;
    align-items:flex-start;
  }
  .topbar-left,
  .console-top-left{
    min-width:0;
    flex:1 1 100%;
  }
  .topbar-actions,
  .console-top-actions{
    width:100%;
    margin-left:0;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .topbar > .btn-row,
  .console-top > .btn-row{
    width:100%;
    flex-wrap:wrap;
  }
  .btn-row .btn-primary,
  .btn-row .btn-secondary,
  .btn-row .btn-danger{
    max-width:100%;
  }
  .guest-now-horizontal{
    grid-template-columns:56px 1fr;
  }
  .guest-now-side{
    grid-column:1 / -1;
    justify-items:start;
    text-align:left;
  }
  .guest-main-columns{
    grid-template-columns:1fr;
  }
  .guest-main-columns > .panel{
    min-height:unset;
  }
}
@media (max-width: 640px){
  .page-hero .btn-row,
  .side-panel .btn-row,
  .panel .btn-row{
    flex-direction:column;
    align-items:stretch;
  }
  .page-hero .btn-row > *,
  .side-panel .btn-row > *,
  .panel .btn-row > *{
    width:100%;
  }
  .console-top-actions .muted-box,
  .topbar .muted-box{
    width:100%;
  }
  .guest-now-main h2{
    font-size:24px;
  }
}


/* =====================================================================
   DASK PMS · AJUSTES v143  (matices 1, 3 y 4)
   Capa al final: gana por cascada. Borra desde aquí para revertir.
   ===================================================================== */

/* --- MATIZ 3: que los botones de cada tema NO se superpongan --- */
/* La tarjeta nunca recorta su contenido */
.song-card,
.song-card.compact-search{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  align-items:start;
}
/* En las columnas estrechas de sala/consola, los botones se apilan a lo ancho */
.guest-main-columns .song-actions{
  display:flex !important;
  flex-direction:column;
  gap:8px !important;
  margin-top:8px !important;
}
.guest-main-columns .song-actions > *{
  width:100% !important;
  min-width:0;
  white-space:nowrap;
  justify-content:center;
}
/* En resultados de búsqueda (columna más ancha) caben en fila si entran */
#songResults .song-actions{
  display:flex;flex-wrap:wrap;gap:8px;
}
#songResults .song-actions > *{flex:1 1 130px;min-width:0;justify-content:center}

/* --- MATIZ 4 (consola): 3 columnas reales en la cabina, sin hueco muerto --- */
body:not(.mobile-page) .guest-main-columns.console-board{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}
@media (max-width:980px){
  body:not(.mobile-page) .guest-main-columns.console-board{
    grid-template-columns:1fr !important;
  }
}

/* --- MATIZ 1: aviso de "date de alta" para invitado no registrado --- */
.guest-register-notice{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line-strong, rgba(174,255,71,.30));
  background:linear-gradient(135deg, rgba(174,255,71,.12), rgba(34,197,94,.08));
  box-shadow:var(--shadow-soft, 0 12px 34px rgba(0,0,0,.38));
  animation:pms-rise .45s ease both;
}
.guest-register-notice .grn-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.guest-register-notice .grn-text strong{font-size:16px;letter-spacing:-.01em}
.guest-register-notice .grn-text span{color:var(--muted);font-size:13px;line-height:1.4}
.guest-register-notice .btn-primary{white-space:nowrap}
.mobile-page .guest-register-notice{margin:0 0 14px;padding:14px}

/* --- MATIZ 4 (foco): el "now playing" manda visualmente, sin recargar --- */
.now h2, #nowTitle, #guestNowTitle{letter-spacing:-.03em}
.guest-register-notice + .guest-now-horizontal{margin-top:2px}


/* =====================================================================
   DASK PMS · TARJETA DE TEMA LIMPIA  (.pms-track) — v144
   Componente único para sala DJ, sala invitado y móvil. Aislado: no hereda
   las reglas conflictivas de .song-card. Flujo en columna => nada se solapa.
   ===================================================================== */
.pms-track{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:start;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line, rgba(174,255,71,.16));
  background:rgba(255,255,255,.035);
  transition:border-color .18s ease, background .18s ease;
}
.pms-track:hover{ border-color:var(--line-strong, rgba(174,255,71,.30)); background:rgba(255,255,255,.06); }

.pms-track-art{
  width:46px;height:46px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg, rgba(174,255,71,.18), rgba(34,197,94,.12));
  border:1px solid var(--line, rgba(174,255,71,.16));
}
.pms-track-art img{width:100%;height:100%;object-fit:cover;display:block}
.pms-track-art span{font-family:"Orbitron", Inter, sans-serif;font-weight:700;color:var(--accent, #aef547);font-size:15px}

.pms-track-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.pms-track-title{
  font-weight:700;font-size:15px;line-height:1.2;letter-spacing:-.01em;
  color:var(--text, #f2f6ec);overflow-wrap:anywhere;
}
.pms-track-sub{color:var(--muted, rgba(238,244,228,.66));font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.pms-track-meta{color:var(--muted, rgba(238,244,228,.55));font-size:11px;line-height:1.3}
.pms-track-req{color:var(--muted, rgba(238,244,228,.55));font-size:11px;line-height:1.3;overflow-wrap:anywhere}

.pms-track-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.pms-track-tags .status-badge{margin-top:0}
.pms-track-count{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;
  color:#06140a;background:var(--accent, #aef547);
}

.pms-track-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pms-track-actions > .btn-primary,
.pms-track-actions > .btn-secondary,
.pms-track-actions > .btn-danger{
  flex:1 1 108px;min-width:0;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;font-size:13px;border-radius:11px;white-space:nowrap;
}

/* En las columnas estrechas (sala/consola), un único botón ocupa toda la fila */
.guest-main-columns .pms-track-actions > *{flex:1 1 100%}
/* En la búsqueda y en móvil, dos botones conviven en fila si entran */
#songResults .pms-track-actions > *,
.mobile-list .pms-track-actions > *{flex:1 1 108px}


/* =====================================================================
   DASK PMS · CONSOLA DJ compacta (como la sala invitado) — v145
   ===================================================================== */
.console-headline{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.room-code-pill{
  display:inline-block;font-family:"Space Grotesk", ui-monospace, monospace;
  letter-spacing:.12em;font-size:13px;color:var(--accent, #aef547);
  border:1px solid var(--line-strong, rgba(174,255,71,.30));
  background:rgba(174,255,71,.06);
  padding:5px 12px;border-radius:999px;
}
.console-stats{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:18px;
}
.cstat{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;border-radius:14px;
  border:1px solid var(--line, rgba(174,255,71,.16));
  background:rgba(255,255,255,.03);
}
.cstat small{color:var(--muted, rgba(238,244,228,.6));text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.cstat strong{font-family:"Space Grotesk", Inter, sans-serif;font-size:24px;line-height:1;letter-spacing:-.02em}
@media (max-width:560px){
  .console-stats{gap:8px}
  .cstat{padding:11px 12px}
  .cstat strong{font-size:20px}
}


/* DJ console: acciones en una sola línea + QR compartible */
.console-action-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.console-action-line .btn-primary,
.console-action-line .btn-secondary{
  white-space:nowrap;
}
.dj-qr-wrap{
  width:max-content;
  max-width:100%;
  padding:12px;
  border:1px solid rgba(180,255,90,.18);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}
.dj-qr-wrap img{
  display:block;
  width:172px;
  height:172px;
  border-radius:16px;
  background:#fff;
  padding:12px;
  object-fit:contain;
}
.mobile-action-bar.mobile-action-bar-three{
  grid-template-columns:1fr 1fr 1fr;
}
.mobile-dj-qr{
  margin-top:10px;
}
@media (max-width: 720px){
  .console-action-line{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .console-action-line .btn-primary,
  .console-action-line .btn-secondary{
    width:100%;
  }
  .mobile-action-bar.mobile-action-bar-three{
    grid-template-columns:1fr;
  }
  .dj-qr-wrap{
    width:100%;
    text-align:center;
  }
  .dj-qr-wrap img{
    margin:0 auto;
  }
}


/* v148 - logout pequeño y acciones móviles abajo */
.logout-mini,
.topbar-actions .logout-mini,
.console-top-actions .logout-mini,
.mobile-actions-top .logout-mini{
  min-height:auto !important;
  height:auto !important;
  padding:8px 12px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.86) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
.logout-mini:hover{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(196,255,85,.22) !important;
  color:#fff !important;
}
.mobile-actions-top .logout-mini{
  padding:7px 10px !important;
  border-radius:10px !important;
  font-size:11px !important;
  white-space:nowrap !important;
}
.mobile-page .mobile-action-bar{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}
.mobile-page .mobile-action-bar-three{
  grid-template-columns:1fr !important;
}
.mobile-page .mobile-action-bar button{
  width:100% !important;
}

/* v149: nombre de sesión pegado a la marca, no mezclado con acciones */
.session-name{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:220px;
  margin-top:6px;
  padding:6px 10px;
  border:1px solid rgba(171,255,77,.18);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(245,250,239,.78);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.session-name-left::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 12px rgba(154,255,70,.55);
}
.mobile-session-name{
  margin-top:4px!important;
  max-width:160px;
  padding:5px 8px;
  font-size:11px;
}
.mobile-header .meta-wrap p.mobile-session-name{
  color:rgba(245,250,239,.78);
}

/* v150: sala arrastrada desde enlace/QR al alta de invitado */
.detected-room-note strong{color:var(--lime);font-weight:900;letter-spacing:.04em}
input.is-prefilled-room{border-color:rgba(169,255,43,.42);background:rgba(169,255,43,.055)}

/* HOME V2 · acceso simple DJ/invitado */
.home-v2-shell{
  min-height:100vh;
  padding-top:34px;
  padding-bottom:42px;
}
.home-v2-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:52px;
}
.home-v2-header .brand{text-decoration:none;color:inherit;}
.home-v2-nav{display:flex;align-items:center;gap:12px;}
.home-v2-nav .btn-primary,.home-v2-nav .btn-secondary{min-height:46px;padding:0 22px;}
.home-v2-hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(340px,.88fr);
  gap:clamp(28px,5vw,68px);
  align-items:center;
}
.home-v2-kicker{
  display:inline-flex;
  margin-bottom:18px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(190,255,67,.22);
  color:var(--accent,#baff3d);
  background:rgba(190,255,67,.06);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-v2-copy h2{
  margin:0;
  max-width:820px;
  font-size:clamp(4rem,8.2vw,7.6rem);
  line-height:.86;
  letter-spacing:-.085em;
}
.home-v2-copy>p{
  max-width:620px;
  margin:28px 0 30px;
  color:var(--muted,#bfc7b9);
  font-size:clamp(1.08rem,1.55vw,1.35rem);
  line-height:1.45;
}
.home-v2-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}
.home-v2-role-card,.home-v2-code-card,.home-v2-steps,.home-v2-preview{
  border:1px solid rgba(190,255,67,.16);
  background:linear-gradient(180deg,rgba(20,35,18,.76),rgba(6,10,7,.74));
  box-shadow:0 22px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
.home-v2-role-card{
  padding:22px;
  border-radius:28px;
}
.home-v2-role-card>span{
  color:var(--accent,#baff3d);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-v2-role-card h3{
  margin:10px 0 8px;
  font-size:1.55rem;
  letter-spacing:-.045em;
}
.home-v2-role-card p{
  min-height:54px;
  margin:0 0 18px;
  color:var(--muted,#bfc7b9);
  line-height:1.35;
}
.home-v2-role-card .btn-primary,.home-v2-role-card .btn-secondary{width:100%;justify-content:center;}
.home-v2-code-card{
  padding:18px;
  border-radius:24px;
}
.home-v2-code-card label{
  display:block;
  margin-bottom:10px;
  font-weight:900;
  letter-spacing:-.025em;
}
.home-v2-code-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.home-v2-code-row input{
  min-height:52px;
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:0 16px;
  color:var(--text,#f5f6ed);
  background:rgba(0,0,0,.28);
  outline:none;
  font:inherit;
  font-weight:800;
  text-transform:uppercase;
}
.home-v2-code-row input:focus{border-color:rgba(190,255,67,.62);box-shadow:0 0 0 4px rgba(190,255,67,.08);}
.home-v2-code-row button{min-height:52px;padding:0 28px;}
.home-v2-code-card small{display:block;min-height:18px;margin-top:8px;color:#ffd7d3;font-weight:700;}
.home-v2-preview{
  position:relative;
  min-height:540px;
  display:grid;
  place-items:center;
  border-radius:38px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(190,255,67,.18),transparent 42%),
    linear-gradient(145deg,rgba(190,255,67,.09),rgba(255,255,255,.025));
}
.home-v2-phone{
  width:min(350px,78vw);
  padding:22px;
  border:1px solid rgba(190,255,67,.22);
  border-radius:34px;
  background:rgba(5,8,5,.84);
  box-shadow:0 34px 100px rgba(0,0,0,.48);
  transform:rotate(2deg);
}
.home-v2-floating{
  position:absolute;
  left:34px;
  bottom:34px;
  width:220px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,5,.82);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.home-v2-floating strong{display:block;font-size:1.35rem;line-height:.95;letter-spacing:-.05em;margin-bottom:10px;}
.home-v2-floating span{display:block;color:var(--muted,#bfc7b9);line-height:1.35;}
.home-v2-steps{
  margin-top:50px;
  padding:24px;
  border-radius:30px;
}
.home-v2-steps h3{margin:0 0 18px;font-size:1.35rem;letter-spacing:-.04em;}
.home-v2-steps>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.home-v2-steps article{padding:17px;border-radius:20px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);}
.home-v2-steps span{display:block;margin-bottom:8px;color:var(--accent,#baff3d);font-weight:950;}
.home-v2-steps strong{display:block;line-height:1.23;}

@media (max-width: 980px){
  .home-v2-shell{padding:20px 14px 34px;}
  .home-v2-header{align-items:flex-start;margin-bottom:34px;}
  .home-v2-nav{width:100%;display:grid;grid-template-columns:1fr 1fr;}
  .home-v2-nav .btn-primary,.home-v2-nav .btn-secondary{width:100%;justify-content:center;padding:0 12px;}
  .home-v2-hero{grid-template-columns:1fr;gap:20px;}
  .home-v2-copy h2{font-size:clamp(3.5rem,17vw,5.4rem);}
  .home-v2-copy>p{margin:20px 0 22px;}
  .home-v2-actions{grid-template-columns:1fr;}
  .home-v2-role-card p{min-height:auto;}
  .home-v2-code-row{grid-template-columns:1fr;}
  .home-v2-code-row button{width:100%;}
  .home-v2-preview{min-height:auto;padding:22px;border-radius:30px;}
  .home-v2-phone{width:100%;transform:none;}
  .home-v2-floating{display:none;}
  .home-v2-steps{margin-top:22px;}
  .home-v2-steps>div{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .home-v2-header{display:grid;grid-template-columns:1fr;gap:14px;}
  .home-v2-mobile-shell .home-v2-preview{display:none;}
}

/* v152: home explicativa + créditos DJ */
.selector-card-rich .selector-title{
  font-size:clamp(3rem,6.2vw,5.8rem);
  line-height:.88;
  letter-spacing:-.075em;
}
.selector-card-rich .selector-copy + .selector-copy{margin-top:12px;}

.home-v2-explainer{
  max-width:650px;
  margin:-12px 0 24px;
  padding:16px 18px;
  border:1px solid rgba(190,255,67,.16);
  border-radius:22px;
  background:rgba(255,255,255,.04);
}
.home-v2-explainer strong{
  display:block;
  margin-bottom:6px;
  color:var(--accent,#baff3d);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.76rem;
}
.home-v2-explainer span{
  display:block;
  color:var(--muted,#bfc7b9);
  line-height:1.38;
}
.home-v2-role-card:nth-child(1){
  border-color:rgba(190,255,67,.26);
  background:linear-gradient(180deg,rgba(32,53,24,.84),rgba(6,10,7,.76));
}
.home-v2-role-card:nth-child(2){
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(18,28,25,.82),rgba(6,10,7,.74));
}
.credits-window{
  border-color:rgba(190,255,67,.24)!important;
}
.credits-balance-box:empty{
  display:block;
  min-height:92px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
}
.credits-balance-card{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(190,255,67,.18);
  background:radial-gradient(circle at 85% 20%,rgba(190,255,67,.16),transparent 34%),rgba(255,255,255,.045);
}
.credits-balance-card span,
.credits-balance-card small{
  display:block;
  color:var(--muted,#bfc7b9);
  font-weight:800;
}
.credits-balance-card span{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.credits-balance-card strong{
  display:block;
  margin:8px 0 4px;
  color:var(--accent,#baff3d);
  font-size:3rem;
  line-height:1;
  letter-spacing:-.06em;
}
.credits-balance-card small{font-size:.86rem;}
.credits-modal[hidden]{display:none!important;}
.credits-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:20px;
}
.credits-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}
.credits-modal-card{
  position:relative;
  width:min(480px,100%);
  padding:28px;
  border-radius:30px;
  border:1px solid rgba(190,255,67,.22);
  background:linear-gradient(180deg,rgba(22,35,18,.96),rgba(5,8,5,.97));
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}
.credits-modal-card h3{
  margin:10px 0 10px;
  font-size:1.8rem;
  line-height:1;
  letter-spacing:-.05em;
}
.credits-modal-card p{
  margin:0 0 18px;
  color:var(--muted,#bfc7b9);
  line-height:1.45;
}
.credits-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:var(--text,#f5f6ed);
  background:rgba(255,255,255,.06);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
body.modal-open{overflow:hidden;}

@media (max-width: 980px){
  .home-v2-explainer{margin:0 0 18px;}
  .selector-card-rich .selector-title{font-size:clamp(2.7rem,12vw,4.2rem);}
}

/* v153 - logout a la izquierda del grupo de acciones superior */
.topbar-actions-left-logout{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.topbar-actions-left-logout .logout-mini{
  order:0;
}
.topbar-actions-left-logout .js-back-btn{
  order:1;
}
.topbar-actions-left-logout a[href="desktop.html"]{
  order:2;
}
@media (max-width: 720px){
  .topbar-actions-left-logout{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    margin-left:0;
  }
  .topbar-actions-left-logout .btn-secondary,
  .topbar-actions-left-logout .logout-mini{
    width:100% !important;
    min-height:46px !important;
  }
}


/* =====================================================================
   DASK PMS · DEMO VIVA del inicio + pulido home — v153
   Sustituye el móvil estático por una sala en vivo animada.
   ===================================================================== */
.home-demo-phone{
  width:min(360px,82vw);
  padding:20px;
  border:1px solid rgba(190,255,67,.22);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(10,16,10,.92), rgba(4,7,4,.96));
  box-shadow:0 34px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  transform:rotate(1.5deg);
}
.home-demo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.home-demo-top .mock-badge{display:inline-flex;align-items:center;gap:7px}
.home-demo-top .mock-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent,#aef547);
  box-shadow:0 0 0 0 rgba(174,245,71,.6);animation:demoPulse 1.8s ease-out infinite;
}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 rgba(174,245,71,.55)}100%{box-shadow:0 0 0 9px rgba(174,245,71,0)}}

/* ecualizador */
.home-demo-eq{display:flex;align-items:flex-end;gap:3px;height:22px}
.home-demo-eq i{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--accent,#aef547),var(--green,#22c55e));animation:demoEq 1s ease-in-out infinite}
.home-demo-eq i:nth-child(1){animation-delay:-.0s}
.home-demo-eq i:nth-child(2){animation-delay:-.3s}
.home-demo-eq i:nth-child(3){animation-delay:-.6s}
.home-demo-eq i:nth-child(4){animation-delay:-.15s}
.home-demo-eq i:nth-child(5){animation-delay:-.45s}
@keyframes demoEq{0%,100%{height:5px}50%{height:22px}}

/* now playing */
.home-demo-now{
  padding:16px;border-radius:18px;
  border:1px solid rgba(190,255,67,.26);
  background:linear-gradient(135deg, rgba(174,255,71,.14), rgba(34,197,94,.07));
}
.home-demo-now .pill{font-size:10px}
.home-demo-now h4{margin:9px 0 2px;font-size:21px;letter-spacing:-.03em;line-height:1.05;animation:demoFade .5s ease both}
.home-demo-now p{margin:0;color:var(--muted);animation:demoFade .5s ease both}
@keyframes demoFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.home-demo-sub{margin:16px 4px 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.home-demo-queue{display:grid;gap:9px}
.home-demo-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-radius:14px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);
  animation:demoSlide .5s ease both;
}
.home-demo-item.s1{animation-delay:.02s}
.home-demo-item.s2{animation-delay:.09s;opacity:.92}
.home-demo-item.s3{animation-delay:.16s;opacity:.78}
@keyframes demoSlide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.home-demo-item .hd-meta{min-width:0}
.home-demo-item strong{display:block;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-demo-item span{display:block;color:var(--muted);font-size:12px}
.home-demo-item em{
  flex:0 0 auto;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 9px;border-radius:999px;color:var(--accent,#aef547);
  border:1px solid rgba(190,255,67,.24);background:rgba(190,255,67,.06);white-space:nowrap;
}
.home-demo-item.s1 em{color:#06140a;background:var(--accent,#aef547);border-color:transparent;font-weight:700}

@media (max-width:980px){
  .home-demo-phone{transform:none;width:100%}
}

/* pulido home: que los botones de las dos tarjetas de rol queden alineados abajo */
.home-v2-role-card{display:flex;flex-direction:column}
.home-v2-role-card p{flex:1 0 auto}
.home-v2-role-card .btn-primary,
.home-v2-role-card .btn-secondary{margin-top:auto}


/* =====================================================================
   DASK PMS · orden de peticiones + hora + voto — v154
   ===================================================================== */
.column-title-sort{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sort-toggle{display:inline-flex;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--line,rgba(174,255,71,.16));background:rgba(255,255,255,.03)}
.sort-toggle button{
  border:0;cursor:pointer;font:inherit;font-size:12px;
  padding:6px 12px;border-radius:999px;color:var(--muted,rgba(238,244,228,.66));background:transparent;
  transition:background .15s ease,color .15s ease;
}
.sort-toggle button.is-active{background:var(--accent,#aef547);color:#06140a;font-weight:700}
.pms-track-time{font-size:11px;color:var(--accent,#aef547);opacity:.85;letter-spacing:.02em}


/* =====================================================================
   DASK PMS · LANDING MÓVIL del invitado (.mlp) — v155
   Simple, visual, una sola columna, acción de invitado al frente.
   ===================================================================== */
.mlp{
  min-height:100svh;
  max-width:520px;margin:0 auto;
  padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:20px;
}
.mlp-top{display:flex;align-items:center;justify-content:center;padding-top:6px}
.mlp-brand{display:flex;align-items:center;gap:11px}
.mlp-logo{width:46px;height:46px;border-radius:14px;overflow:hidden;border:1px solid rgba(174,255,71,.18);background:rgba(255,255,255,.04);display:grid;place-items:center}
.mlp-logo img{width:100%;height:100%;object-fit:contain}
.mlp-brand-txt{display:flex;flex-direction:column;line-height:1.05}
.mlp-brand-txt strong{font-size:18px;letter-spacing:-.02em}
.mlp-brand-txt span{font-size:12px;color:var(--yellow,#e7ff4f);font-weight:600}

.mlp-hero{display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center}
.mlp-kicker{
  align-self:flex-start;font-family:"Orbitron",Inter,sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent,#aef547);
  padding:7px 13px;border-radius:999px;border:1px solid rgba(174,255,71,.26);background:rgba(174,255,71,.06);
}
.mlp-hero h1{
  margin:0;font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(54px,18vw,82px);line-height:.9;letter-spacing:-.05em;
}
.mlp-hero > p{margin:0;color:var(--muted);font-size:16px;line-height:1.5;max-width:34ch}

.mlp-code{
  margin-top:4px;padding:16px;border-radius:20px;
  border:1px solid rgba(174,255,71,.18);background:rgba(255,255,255,.035);
}
.mlp-code label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
.mlp-code-row{display:grid;grid-template-columns:1fr auto;gap:9px}
.mlp-code-row input{
  min-height:54px;border-radius:14px;padding:0 16px;font:inherit;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text,#f2f6ec);
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);outline:none;
}
.mlp-code-row input:focus{border-color:rgba(174,255,71,.6);box-shadow:0 0 0 4px rgba(174,255,71,.1)}
.mlp-code-row button{min-height:54px;padding:0 22px;border-radius:14px}
.mlp-code small{display:block;min-height:16px;margin-top:8px;color:#ffd7d3;font-weight:600;font-size:13px}

.mlp-cta{min-height:58px;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:16px}

.mlp-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mlp-steps li{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px}
.mlp-steps li span{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#06140a;background:var(--accent,#aef547);
}
.mlp-dj{
  margin-top:8px;text-align:center;color:var(--muted);font-size:14px;text-decoration:none;
  padding:14px;border-radius:14px;border:1px dashed rgba(255,255,255,.14);
}
.mlp-dj:hover{border-color:rgba(174,255,71,.3);color:var(--text,#f2f6ec)}


/* =====================================================================
   DASK PMS · home PC (accesos a la derecha + matrix) + enlaces música — v160
   ===================================================================== */
.home-v2-hero{align-items:start}
.home-v2-actions-col{display:flex;flex-direction:column;gap:14px}
.home-v2-actions-col .home-v2-role-card,
.home-v2-actions-col .home-v2-code-card{width:100%}
.home-v2-actions-col .home-v2-role-card p{min-height:0}

/* fondo matrix (canvas a pantalla completa, detrás de todo) */
#matrixBg{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.38;
}
.home-v2-shell{position:relative;z-index:1}

/* enlaces rápidos a plataformas en las tarjetas (consola DJ) */
.pms-track-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pms-track-links .plink{
  font-size:11px;font-weight:700;text-decoration:none;line-height:1;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line,rgba(174,255,71,.18));
  color:var(--text,#f2f6ec);background:rgba(255,255,255,.04);
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.pms-track-links .plink:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.pms-track-links .plink-sp{border-color:rgba(30,215,96,.45);color:#5ff0a0}
.pms-track-links .plink-ap{border-color:rgba(250,90,120,.4);color:#ff8fa3}
.pms-track-links .plink-sc{border-color:rgba(255,140,40,.45);color:#ffb066}


/* =====================================================================
   DASK PMS · sala invitado MÓVIL: la búsqueda como protagonista — v162
   ===================================================================== */
.guest-search-hero{margin-top:6px}
.guest-search-hero .gsh-head h2{
  margin:0;font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(26px,7.5vw,34px);line-height:1;letter-spacing:-.03em;
}
.guest-search-hero .gsh-head p{margin:6px 0 0;color:var(--muted);font-size:14px}

/* barra de búsqueda grande y pegajosa al hacer scroll */
.guest-search-hero .gsh-bar{
  position:sticky;top:8px;z-index:20;
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding:0 14px;min-height:58px;border-radius:18px;
  border:1px solid rgba(174,255,71,.34);
  background:rgba(8,14,9,.96);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 4px rgba(174,255,71,.05);
  backdrop-filter:blur(8px);
}
.guest-search-hero .gsh-ico{flex:0 0 auto;color:var(--accent,#aef547);display:grid;place-items:center}
.guest-search-hero .gsh-bar input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;font-size:17px;font-weight:600;color:var(--text,#f2f6ec);
  height:56px;padding:0;
}
.guest-search-hero .gsh-bar input::placeholder{color:rgba(238,244,228,.45);font-weight:500}
.guest-search-hero .gsh-bar input::-webkit-search-cancel-button{filter:invert(.7)}

.guest-search-hero .gsh-results{margin-top:12px;min-height:4px}
.guest-search-hero .gsh-results:empty{margin-top:0}

/* "sonando" en versión compacta para no robar protagonismo a la búsqueda */
.mobile-live.mobile-live-compact{margin-top:16px;padding:12px 14px;opacity:.95}
.mobile-live.mobile-live-compact .mobile-live-art{width:50px;height:50px}
.mobile-live.mobile-live-compact h2{font-size:18px}


/* =====================================================================
   DASK PMS · home PC en UNA sola pantalla (sin scroll) — v163
   Solo en pantallas grandes (los móviles van a desktop-mobile.html).
   ===================================================================== */
@media (min-width:721px){
  .home-v2-shell{
    min-height:100vh;box-sizing:border-box;overflow:visible;
    display:flex;flex-direction:column;
    padding-top:clamp(14px,2.2vh,28px);
    padding-bottom:clamp(14px,2.2vh,28px);
  }
  .home-v2-header{margin-bottom:clamp(10px,2.6vh,26px);flex:0 0 auto}
  .home-v2-hero{flex:1 1 auto;align-items:center;min-height:0}

  .home-v2-kicker{margin-bottom:clamp(6px,1.4vh,14px)}
  .home-v2-copy h2{font-size:clamp(2.8rem,5.6vh,5.2rem);line-height:.9}
  .home-v2-copy>p{
    margin:clamp(10px,1.8vh,20px) 0;
    font-size:clamp(.98rem,1.7vh,1.2rem);line-height:1.4;
  }
  .home-v2-explainer{margin:0}

  .home-v2-actions-col{gap:clamp(8px,1.3vh,14px)}
  .home-v2-actions-col .home-v2-role-card{padding:clamp(12px,1.7vh,18px)}
  .home-v2-actions-col .home-v2-role-card h3{margin:2px 0 6px}
  .home-v2-actions-col .home-v2-role-card p{margin:0 0 10px;font-size:.95rem}

  .home-v2-steps{
    flex:0 0 auto;margin-top:clamp(10px,2.2vh,26px);
    padding:clamp(13px,1.9vh,22px);
  }
  .home-v2-steps h3{margin:0 0 clamp(7px,1.3vh,15px);font-size:1.2rem}
  .home-v2-steps article{padding:clamp(11px,1.5vh,16px)}
}

/* en pantallas muy bajas, mejor permitir scroll que recortar info */
@media (min-width:721px) and (max-height:620px){
  .home-v2-shell{height:auto;overflow:visible;min-height:100vh}
}


/* =====================================================================
   DASK PMS · invitado escritorio: búsqueda protagonista + modal — v164
   ===================================================================== */
/* búsqueda hero en escritorio */
.guest-search-hero-desktop{margin:18px 0 6px}
.guest-search-hero-desktop .gsh-head h2{font-size:clamp(30px,4vw,46px)}
.guest-search-hero-desktop .gsh-bar{top:14px}
.gsh-results-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;margin-top:14px;max-height:44vh;overflow:auto;padding-right:4px;
}
.gsh-results-grid:empty{margin-top:0}

/* 3 columnas (sin la de búsqueda) */
.guest-main-columns.guest-main-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* línea de opciones arriba: separador sutil */
.console-top-actions .top-sep{width:1px;height:24px;background:rgba(255,255,255,.12);margin:0 4px;border-radius:1px}
.console-top-actions{flex-wrap:wrap;gap:8px}

/* ===== modal de confirmación (pedir / votar) ===== */
.pms-modal-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(2,5,2,.66);backdrop-filter:blur(4px);
}
.pms-modal-overlay.is-open{display:flex;animation:pmsFade .18s ease}
@keyframes pmsFade{from{opacity:0}to{opacity:1}}
.pms-modal{
  width:min(380px,92vw);text-align:center;padding:28px 24px 24px;
  border-radius:24px;border:1px solid rgba(174,255,71,.28);
  background:linear-gradient(180deg,rgba(18,30,16,.98),rgba(6,10,7,.99));
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:pmsPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pmsPop{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.pms-modal-check{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;color:#06140a;
  background:var(--accent,#aef547);box-shadow:0 0 0 8px rgba(174,255,71,.12);
}
.pms-modal h3{margin:0 0 6px;font-size:24px;letter-spacing:-.03em}
.pms-modal #pmsModalSong{margin:0 0 4px;font-weight:700;color:var(--text,#f2f6ec)}
.pms-modal .pms-modal-sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.pms-modal .btn-primary{width:100%;min-height:50px}

/* campos de formulario (nombre, email, código) más visibles — v164 */
.field label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--muted,#bfc7b9)}
.field input,.field select{
  width:100%;box-sizing:border-box;color:var(--text,#f2f6ec);
  border:1px solid rgba(174,255,71,.32);
  background:rgba(0,0,0,.3);
}
.field input::placeholder{color:rgba(245,247,239,.46)}
.field input:focus,.field select:focus{
  border-color:rgba(174,255,71,.62);
  box-shadow:0 0 0 4px rgba(174,255,71,.1);
}


/* =====================================================================
   DASK PMS · invitado escritorio rediseño + simetría botones — v165
   ===================================================================== */
/* Logout integrado a la izquierda, junto a la marca */
.console-top-left{display:flex;align-items:center;gap:14px}
.topbar-left{display:flex;align-items:center;gap:14px}

/* botones de la barra superior simétricos */
.top-actions-sym{display:flex;align-items:center;gap:10px}
.top-actions-sym>.btn-secondary,.top-actions-sym>.btn-primary{
  min-width:128px;justify-content:center;text-align:center;
}

/* fila de opciones simétrica (compartir/QR/exportar...) */
.opt-row{display:flex;flex-wrap:wrap;gap:10px}
.opt-row>button,.opt-row>a{flex:1 1 0;min-width:140px;justify-content:center;text-align:center}

/* ===== buscador "pide tu tema": casilla clara + desplegable flotante ===== */
.guest-search-block{position:relative;margin:18px 0 10px;z-index:30}
.gsb-label{
  display:block;margin-bottom:12px;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;color:var(--text,#f2f6ec);
}
.gsb-field{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:0 18px;
  border-radius:18px;border:1px solid rgba(174,255,71,.34);
  background:rgba(8,14,9,.96);box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.gsb-field:focus-within{border-color:rgba(174,255,71,.62);box-shadow:0 0 0 4px rgba(174,255,71,.08),0 14px 34px rgba(0,0,0,.4)}
.gsb-ico{flex:0 0 auto;color:var(--accent,#aef547);display:grid;place-items:center}
.gsb-field input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;font-size:18px;font-weight:600;color:var(--text,#f2f6ec);height:58px;
  min-height:0;border-radius:0;box-shadow:none;
}
.gsb-field input::placeholder{color:rgba(245,247,239,.4);font-weight:500}
.gsb-field input::-webkit-search-cancel-button{filter:invert(.7)}

.gsb-dropdown{
  position:absolute;left:0;right:0;top:100%;margin-top:10px;z-index:50;display:none;
  max-height:62vh;overflow:auto;padding:10px;
  border-radius:18px;border:1px solid rgba(174,255,71,.24);
  background:rgba(7,11,7,.99);box-shadow:0 34px 90px rgba(0,0,0,.62);
}
.gsb-dropdown.is-open{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}

/* 3 columnas a todo el ancho del contenedor */
.guest-main-columns.guest-main-columns-3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}


/* =====================================================================
   DASK PMS · cabeceras simétricas + columnas 3 a todo el ancho — v166
   ===================================================================== */
/* 3 columnas del invitado: ganar a la regla de 4 columnas (más específica) */
body:not(.mobile-page) .guest-main-columns.guest-main-columns-3{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
@media (max-width:980px){
  body:not(.mobile-page) .guest-main-columns.guest-main-columns-3{grid-template-columns:1fr}
}

/* barra de opciones (compartir/exportar) arriba, fuera de la tarjeta */
.console-toolbar{margin:14px 0 0}

/* Logout simétrico: mismo criterio que volver/inicio, integrado en acciones */
.console-top-left .logout-mini,
.topbar-left .logout-mini,
.topbar-actions .logout-mini{
  min-height:46px !important;
  height:46px !important;
  padding:0 22px !important;
  border-radius:14px !important;
  font-size:14px !important;
  min-width:120px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* botones de la barra superior, todos al mismo alto */
.console-top .btn-secondary,
.topbar .btn-secondary{min-height:46px;display:inline-flex;align-items:center;justify-content:center}


/* =====================================================================
   DASK PMS · topbar de una sola fila simétrico + casilla blanca — v167
   ===================================================================== */
/* más ancho en consola/sala para aprovechar pantallas grandes */
.container.room-shell,.container.dashboard-shell{max-width:1600px}

/* barra superior: una sola fila, marca izquierda, navegación derecha */
.app-topbar{display:flex !important;align-items:center;justify-content:flex-start !important;gap:10px;flex-wrap:wrap}
.app-topbar .brand{margin-right:6px}
.app-topbar .topbar-grow{flex:1 1 24px;min-width:10px}
.app-topbar .btn-secondary,
.app-topbar .logout-mini{
  min-width:122px;min-height:48px !important;height:auto !important;
  padding:0 16px !important;border-radius:14px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  text-align:center;white-space:normal;line-height:1.12;font-size:14px !important;
}

/* "pide tu tema": título grande + CASILLA BLANCA que resalta */
.gsb-label{font-size:clamp(32px,5vw,52px)}
.gsb-field{background:#f5f8ef;border:1px solid rgba(120,200,40,.55);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.gsb-field:focus-within{border-color:#74d63a;box-shadow:0 0 0 4px rgba(116,214,58,.2),0 14px 34px rgba(0,0,0,.4)}
.gsb-ico{color:#3a7d1c}
.gsb-field input{color:#0c120a}
.gsb-field input::placeholder{color:#6f786a}
.gsb-field input::-webkit-search-cancel-button{filter:none}


/* =====================================================================
   DASK PMS · pulido móvil invitado + panel DJ — v168
   ===================================================================== */
body.mobile-page .guest-search-hero{
  padding:18px 0 4px;
}
body.mobile-page .guest-search-hero .gsh-head h2{
  font-size:clamp(42px,15vw,64px);
  line-height:.86;
  letter-spacing:-.07em;
  max-width:8ch;
}
body.mobile-page .guest-search-hero .gsh-head p{
  font-size:16px;
  color:rgba(238,244,228,.72);
  margin-top:10px;
}
body.mobile-page .guest-search-hero .gsh-bar{
  min-height:66px;
  padding:0 16px;
  border-radius:20px;
  background:#f5f8ef;
  border:1px solid rgba(130,210,55,.7);
  box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 0 4px rgba(174,255,71,.08);
}
body.mobile-page .guest-search-hero .gsh-ico{
  color:#2f7117;
}
body.mobile-page .guest-search-hero .gsh-bar input{
  height:64px;
  font-size:18px;
  font-weight:750;
  color:#0b1208;
}
body.mobile-page .guest-search-hero .gsh-bar input::placeholder{
  color:#687363;
}
body.mobile-page .guest-search-hero .gsh-bar input::-webkit-search-cancel-button{
  filter:none;
}
body.mobile-page .mobile-live.mobile-live-compact{
  margin-top:18px;
}
body.mobile-page #roomsList{
  display:grid;
  gap:12px;
}
body.mobile-page #roomsList .room-card{
  position:relative;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(174,255,71,.36);
  background:linear-gradient(135deg,rgba(42,93,28,.42),rgba(12,18,12,.94) 58%,rgba(10,14,10,.98));
  box-shadow:0 20px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
body.mobile-page #roomsList .room-card::before{
  content:"";
  position:absolute;
  inset:-1px auto auto -1px;
  width:5px;
  height:calc(100% + 2px);
  background:linear-gradient(180deg,#baff38,#22e06d);
  box-shadow:0 0 24px rgba(174,255,71,.5);
}
body.mobile-page #roomsList .room-card::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:150px;
  height:150px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(174,255,71,.20),transparent 68%);
  pointer-events:none;
}
body.mobile-page #roomsList .room-card h4{
  font-size:24px;
  letter-spacing:-.045em;
  margin-bottom:8px;
}
body.mobile-page #roomsList .room-card .meta{
  color:rgba(238,244,228,.78);
  font-size:14px;
}
body.mobile-page #roomsList .room-card .btn-row{
  margin-top:16px !important;
}
body.mobile-page #roomsList .room-card .btn-primary{
  width:100%;
  min-height:54px;
}
body.mobile-page .export-requests-bottom{
  margin-top:4px;
}


/* =====================================================================
   DASK PMS · pulido invitado + salas — v170
   ===================================================================== */
.room-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.room-card-head h4{margin:0}
.room-created{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(174,255,71,.25);
  background:rgba(174,255,71,.08);
  color:rgba(238,244,228,.82);
  font-size:12px;font-weight:800;line-height:1;white-space:nowrap;
}
body.mobile-page #roomsList .room-card-head{display:grid;gap:8px;justify-items:start}
body.mobile-page #roomsList .room-created{font-size:12px;padding:7px 10px}

/* Más aire en la sala de invitado */
body:not(.mobile-page) .guest-now-strip{margin-bottom:28px !important}
body:not(.mobile-page) .guest-search-block{margin:26px 0 16px !important}
body:not(.mobile-page) .guest-now-strip .panel{padding:24px 28px !important}
body:not(.mobile-page) .guest-now-main .topline{gap:16px !important}
body:not(.mobile-page) .gsb-label{margin-bottom:18px !important}

/* El desplegable de búsqueda no debe dejar una banda negra cuando está vacío/cerrado */
body:not(.mobile-page) #songResults.gsb-dropdown:not(.is-open){display:none !important}
body:not(.mobile-page) #songResults.gsb-dropdown.is-open{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
body:not(.mobile-page) #songResults.gsb-dropdown:empty{display:none !important;padding:0 !important;border:0 !important;box-shadow:none !important}

/* Texto exacto pedido */
body:not(.mobile-page) .gsb-label{text-transform:none}


/* =====================================================================
   DASK PMS · pulido cabecera desktop y sala invitado — v170
   ===================================================================== */
@media (min-width:981px){
  .app-topbar{gap:8px;flex-wrap:nowrap}
  .app-topbar .brand{flex:0 0 auto;margin-right:4px}
  .app-topbar .topbar-grow{flex:1 1 auto;min-width:18px}
  .app-topbar .btn-secondary,
  .app-topbar .logout-mini{
    min-width:auto !important;
    min-height:42px !important;
    height:42px !important;
    padding:0 14px !important;
    border-radius:13px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  #copyRoomLinkBtn,#guestCopyRoomLinkBtn{min-width:118px !important}
  #shareRoomBtn,#guestShareRoomBtn{min-width:128px !important}
  #shareRoomQrBtn,#guestShareRoomQrBtn{min-width:126px !important}
  #exportExcelBtn{min-width:122px !important}
  #exportPlaylistBtn{min-width:112px !important}
  .app-topbar .js-back-btn{min-width:96px !important}
  .app-topbar a.btn-secondary{min-width:112px !important}
}
.guest-console-style .console-headline{margin-bottom:0}
.guest-console-style .guest-now-horizontal{align-items:center}
.guest-console-style .guest-now-side{text-align:right;min-width:180px}
.guest-console-style .room-code-pill{margin-top:8px}


/* v171 · estadísticas también en encabezado de sala invitado */
.guest-room-stats{margin-top:18px}
body:not(.mobile-page) .guest-room-stats{max-width:none}
.mobile-guest-room-stats{margin:12px 0 12px;grid-template-columns:repeat(3,minmax(0,1fr));}
.mobile-guest-room-stats .cstat{padding:10px 9px;border-radius:14px}
.mobile-guest-room-stats .cstat small{font-size:8.5px;letter-spacing:.10em}
.mobile-guest-room-stats .cstat strong{font-size:20px}
@media (max-width:380px){
  .mobile-guest-room-stats{gap:6px}
  .mobile-guest-room-stats .cstat{padding:9px 7px}
  .mobile-guest-room-stats .cstat small{font-size:7.5px}
  .mobile-guest-room-stats .cstat strong{font-size:18px}
}


/* v172 · contadores pequeños en pestañas móviles */
.mobile-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.mobile-tab em{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:#0b160c;
  background:linear-gradient(135deg, var(--yellow), var(--green));
  box-shadow:0 0 14px rgba(166,255,70,.22);
}
.mobile-tab:not(.is-active) em{
  opacity:.85;
  background:rgba(212,255,57,.16);
  color:var(--yellow);
  border:1px solid rgba(212,255,57,.20);
  box-shadow:none;
}


/* DASK PMS · ajustes v173: ordenadores de listas y botones panel DJ */
.top-actions-sym{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.top-actions-sym>.btn-secondary,.top-actions-sym>.btn-primary,.top-actions-sym>.logout-mini{
  min-width:118px !important;
  min-height:46px !important;
  padding:0 18px !important;
  border-radius:14px !important;
  line-height:1.1;
}
.column-title-sort{align-items:flex-start}
.column-title-sort h3{margin-top:4px}
.sort-toggle.mobile-sort-toggle{width:100%;justify-content:center}
.sort-toggle.mobile-sort-toggle button{flex:1}
@media (max-width:720px){
  .sort-toggle{width:100%;justify-content:stretch}
  .sort-toggle button{flex:1}
}

/* DASK PMS · ajustes v174: barra superior ordenada y móvil invitado limpio */
.room-topbar-clean{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center !important;
  gap:18px !important;
}
.room-topbar-clean .topbar-left{min-width:0}
.room-topbar-clean .topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.room-topbar-clean .room-share-actions{
  justify-content:flex-start;
  min-width:0;
  overflow:hidden;
}
.room-topbar-clean .room-nav-actions{
  justify-content:flex-end;
}
.room-topbar-clean .btn-secondary,
.room-topbar-clean .btn-primary,
.room-topbar-clean .logout-mini{
  min-height:42px !important;
  min-width:auto !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:13.5px !important;
  white-space:nowrap;
}
.room-topbar-clean .logout-mini{
  padding:0 14px !important;
}
.room-topbar-clean .room-nav-actions a:last-child,
.room-topbar-clean .room-nav-actions .btn-primary:last-child{
  min-width:132px !important;
}
@media (max-width:1240px){
  .room-topbar-clean{
    grid-template-columns:1fr auto;
  }
  .room-topbar-clean .room-share-actions{
    grid-column:1 / -1;
    order:3;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .room-topbar-clean .room-nav-actions{order:2}
}
@media (max-width:760px){
  .room-topbar-clean{
    display:flex !important;
    flex-wrap:wrap;
    gap:12px !important;
  }
  .room-topbar-clean .topbar-left{width:100%}
  .room-topbar-clean .room-share-actions,
  .room-topbar-clean .room-nav-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .room-topbar-clean .btn-secondary,
  .room-topbar-clean .btn-primary,
  .room-topbar-clean .logout-mini{
    width:100%;
    min-height:40px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
  }
}


/* DASK PMS · ajuste v176: sala invitado desktop con Logout SIEMPRE al extremo derecho */
@media (min-width: 761px){
  .room-topbar-clean{
    grid-template-columns: auto minmax(0,1fr) auto !important;
  }
  .room-topbar-clean .room-share-actions{
    justify-content:flex-start !important;
  }
  .room-topbar-clean .room-nav-actions,
  .room-topbar-clean .guest-nav-right{
    justify-content:flex-end !important;
    margin-left:auto !important;
  }
  .room-topbar-clean .room-nav-actions .logout-mini,
  .room-topbar-clean .guest-nav-right .logout-mini{
    order:99 !important;
    margin-left:4px !important;
  }
}

/* DASK PMS · smart music control */
.smart-control-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:16px}
.smart-control .column-title{align-items:center}
.mode-selector{display:flex;gap:8px;flex-wrap:wrap}
.mode-selector button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}
.mode-selector button.is-active{background:var(--text);color:#08080a;border-color:var(--text)}
.smart-card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border-radius:20px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.smart-card h3{margin:8px 0 2px;font-size:22px;letter-spacing:-.04em}.smart-card p{margin:0;color:var(--muted)}
.smart-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.smart-card-head strong{color:var(--text);font-size:18px;letter-spacing:-.02em}
.smart-reason{margin-top:10px;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.06);color:var(--muted);font-size:13px}.micro{font-size:12px;color:var(--muted)}
.input{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:var(--text);border-radius:14px;padding:10px 12px;margin-top:6px}
.mobile-mode-selector{gap:6px}.mobile-mode-selector button{flex:1;padding:9px 8px;font-size:12px}.mobile-card .smart-card h3{font-size:18px}.mobile-card .pms-track-actions{gap:6px}.mobile-card .pms-track-actions button{flex:1 1 45%;padding:9px 8px;font-size:12px}
@media (max-width: 900px){.smart-control-grid{grid-template-columns:1fr}.mode-selector button{flex:1}}

.spotify-agent-box{
  margin:10px 0 8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(30,215,96,.08);
}

/* v183: compact music-control actions */
.smart-card .pms-track-actions,
.smart-actions-compact{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.smart-card .pms-track-actions button,
.smart-actions-compact button,
.btn-compact{
  min-width:0 !important;
  max-width:100%;
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:0 1 auto;
}
.spotify-agent-box{
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  margin-top:8px;
}
@media (max-width: 680px){
  .smart-card .pms-track-actions,
  .smart-actions-compact{
    gap:5px;
  }
  .smart-card .pms-track-actions button,
  .smart-actions-compact button,
  .btn-compact{
    padding:7px 8px !important;
    font-size:11px !important;
    flex:1 1 calc(50% - 6px);
  }
}

/* v184: recognition panel removed, leave clean UX space for future controls */
.smart-control-grid{grid-template-columns:1fr}
.smart-control{max-width:100%}
#smartModePanel .pms-track-actions{gap:6px;flex-wrap:wrap}
#smartModePanel .pms-track-actions button{min-height:34px;padding:8px 10px;font-size:12px;line-height:1.05;white-space:normal;overflow-wrap:anywhere}
@media (min-width: 901px){.smart-control-grid{max-width:980px;margin-left:auto;margin-right:auto}}


/* v185: full-width music control + cleaner assisted UX */
.smart-control-grid{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  grid-template-columns:1fr !important;
}
.smart-control{
  width:100% !important;
  max-width:none !important;
}
.smart-control .smart-card{
  width:100%;
}
@media (min-width: 901px){
  .smart-control-grid{max-width:none !important;margin-left:0 !important;margin-right:0 !important;}
  #smartModePanel .smart-card{padding:16px 18px;}
  #smartModePanel .pms-track-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
  #smartModePanel .pms-track-actions button{width:100%;}
}
#smartModePanel .pms-track-actions button{
  text-align:center;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:680px){
  #smartModePanel .pms-track-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  #smartModePanel .pms-track-actions button{width:100%;}
}


/* v186 verified: music control full width + compact clean actions */
body:not(.mobile-page) .smart-control-grid{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body:not(.mobile-page) .smart-control{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
body:not(.mobile-page) #smartModePanel .smart-card{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 18px;
  align-items:start;
}
body:not(.mobile-page) #smartModePanel .smart-card h3,
body:not(.mobile-page) #smartModePanel .smart-card p,
body:not(.mobile-page) #smartModePanel .smart-reason,
body:not(.mobile-page) #smartModePanel .pms-track-tags,
body:not(.mobile-page) #smartModePanel .spotify-agent-box{
  grid-column:1 / 2;
}
body:not(.mobile-page) #smartModePanel .smart-card-head{grid-column:1 / -1;}
body:not(.mobile-page) #smartModePanel .pms-track-actions{
  grid-column:2 / 3;
  grid-row:2 / span 5;
  align-self:center;
  min-width:360px;
  max-width:460px;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
body:not(.mobile-page) #smartModePanel .pms-track-actions button{
  width:100% !important;
  min-height:38px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:980px){
  body:not(.mobile-page) #smartModePanel .smart-card{display:block;}
  body:not(.mobile-page) #smartModePanel .pms-track-actions{
    min-width:0;
    max-width:none;
    margin-top:12px;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
.mobile-card #mobileSmartModePanel .pms-track-actions,
.mobile-card #smartModePanel .pms-track-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}
.mobile-card #mobileSmartModePanel .pms-track-actions button,
.mobile-card #smartModePanel .pms-track-actions button{
  width:100% !important;
  min-height:34px !important;
  padding:7px 8px !important;
  font-size:11px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


/* =====================================================================
   DASK PMS · control musical: tarjeta compacta + agente — v187
   ===================================================================== */
.smart-card.smart-card-v2{padding:14px 16px}
.smart-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.smart-kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#aef547);font-weight:800}
.smart-score{
  font-size:11px;font-weight:800;color:var(--text);white-space:nowrap;cursor:help;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(174,255,71,.28);background:rgba(174,255,71,.08);
}
.smart-song{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.smart-song strong{font-size:19px;letter-spacing:-.03em;line-height:1.1}
.smart-song-artist{color:var(--muted);font-size:14px}
.smart-song .status-badge{margin-left:auto}
.smart-card-v2 .smart-reason{margin-top:8px;padding:8px 11px;font-size:12.5px;border-radius:11px}

.agent-line{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:13px;font-weight:700;color:var(--muted);
}
.agent-line .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.agent-line.is-on{color:var(--accent,#aef547)}
.agent-line.is-on .dot{animation:demoPulse 1.6s ease-out infinite}
.agent-hint{margin-top:5px;opacity:.85}

.smart-card-v2 .smart-actions-compact{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.smart-card-v2 .smart-actions-compact .btn-compact{
  flex:0 1 auto;min-height:40px;padding:6px 15px;font-size:13px;
}
@media (max-width:760px){
  .smart-song .status-badge{margin-left:0}
  .smart-card-v2 .smart-actions-compact .btn-compact{flex:1 1 46%}
}

/* v192 - control musical: portada + estados no disponibles */
.smart-card-v2 .smart-track-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.smart-card-v2 .smart-track-art{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  font-weight:800;
  letter-spacing:.04em;
}
.smart-card-v2 .smart-track-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.smart-card-v2 .smart-song{
  min-width:0;
}
.smart-card-v2 .smart-song strong,
.smart-card-v2 .smart-song-artist{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.btn-disabled,
button.btn-disabled,
.btn-disabled:disabled{
  background:rgba(10,13,18,.82)!important;
  color:rgba(255,255,255,.42)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
  opacity:1!important;
}
.smart-actions-compact .btn-compact,
.smart-actions-compact button{
  min-width:96px;
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 640px){
  .smart-card-v2 .smart-track-art{width:48px;height:48px;flex-basis:48px;border-radius:12px;}
  .smart-actions-compact .btn-compact,
  .smart-actions-compact button{min-width:84px;max-width:112px;font-size:12px;padding-inline:10px;}
}


/* v193 - mobile guest scroll + symmetric music control hero */
html, body.mobile-page{
  min-height:100%;
  height:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.mobile-page .mobile-container,
body.mobile-page .mobile-shell{
  min-height:auto!important;
  height:auto!important;
  overflow:visible!important;
}
body.mobile-page #guestMobileTabContent{
  max-height:min(52vh, 520px);
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(196,255,85,.28) rgba(255,255,255,.03);
}
body.mobile-page #guestMobileTabContent::-webkit-scrollbar{width:6px}
body.mobile-page #guestMobileTabContent::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
body.mobile-page #guestMobileTabContent::-webkit-scrollbar-thumb{background:rgba(196,255,85,.28);border-radius:999px}
body.mobile-page .guest-search-hero .gsh-results{
  max-height:34vh;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}

#smartModePanel .smart-card.smart-card-v2{
  padding:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(212,255,57,.13), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
}
#smartModePanel .smart-card-top{margin-bottom:14px}
#smartModePanel .smart-track-row{
  display:grid;
  grid-template-columns:minmax(128px, 180px) minmax(0,1fr);
  gap:18px;
  align-items:center;
}
#smartModePanel .smart-track-art{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  min-width:0;
  max-width:180px;
  border-radius:22px;
  box-shadow:0 18px 42px rgba(0,0,0,.32);
}
#smartModePanel .smart-song{
  display:grid;
  align-content:center;
  gap:8px;
  min-width:0;
}
#smartModePanel .smart-song strong{
  display:block;
  font-size:clamp(30px, 4vw, 52px);
  line-height:.92;
  letter-spacing:-.07em;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
#smartModePanel .smart-song-artist{
  display:block;
  font-size:clamp(16px, 1.6vw, 22px);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  color:rgba(255,255,255,.72);
}
#smartModePanel .smart-song .status-badge{
  justify-self:start;
  margin-left:0;
  width:max-content;
}
#smartModePanel .smart-reason{
  margin-top:16px;
  text-align:center;
  border-radius:16px;
  padding:12px 14px;
}
#smartModePanel .smart-actions-compact{
  margin-top:16px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px!important;
  align-items:stretch;
}
#smartModePanel .smart-actions-compact button,
#smartModePanel .smart-actions-compact .btn-compact{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:42px;
  padding:9px 12px;
  border-radius:14px;
  font-size:12px;
  text-align:center;
}
#smartModePanel .smart-card:not(.smart-card-v2) .smart-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:760px){
  #smartModePanel .smart-card.smart-card-v2{padding:14px;border-radius:20px}
  #smartModePanel .smart-track-row{grid-template-columns:72px minmax(0,1fr);gap:12px}
  #smartModePanel .smart-track-art{max-width:72px;border-radius:16px}
  #smartModePanel .smart-song strong{font-size:22px;line-height:.98;letter-spacing:-.055em}
  #smartModePanel .smart-song-artist{font-size:14px}
  #smartModePanel .smart-actions-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important}
  #smartModePanel .smart-actions-compact button,
  #smartModePanel .smart-actions-compact .btn-compact{min-height:38px;padding:8px 6px;font-size:11px;border-radius:12px}
}
@media (max-width:390px){
  #smartModePanel .smart-actions-compact{grid-template-columns:1fr 1fr}
  #smartModePanel .smart-actions-compact button:last-child:nth-child(3){grid-column:1 / -1}
}


/* v194 · sala invitado móvil: pestañas funcionales + buscador compacto */
body.mobile-page .guest-search-hero{
  padding-top: 18px;
  margin-bottom: 12px;
}
body.mobile-page .guest-search-hero .gsh-head{
  display: none !important;
}
body.mobile-page .gsh-bar-title{
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  padding: 0 22px;
  border-radius: 30px;
}
body.mobile-page .gsh-bar-title input{
  font-weight: 950;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-size: clamp(28px, 8vw, 48px);
  line-height: .92;
  color: var(--ink);
}
body.mobile-page .gsh-bar-title input::placeholder{
  color: rgba(9, 16, 9, .72);
  opacity: 1;
}
body.mobile-page .gsh-inline-help{
  margin: 10px 6px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}
body.mobile-page .mobile-segmented[data-guest-mobile-tabs]{
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
body.mobile-page .mobile-segmented[data-guest-mobile-tabs] .mobile-tab{
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body.mobile-page #guestMobileTabContent{
  display: grid !important;
  gap: 8px;
  min-height: 96px;
  max-height: min(48vh, 430px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
  scroll-padding-top: 8px;
}
body.mobile-page #guestMobileTabContent .sort-toggle{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
}
@media (max-width:390px){
  body.mobile-page .gsh-bar-title{ min-height: 76px; padding: 0 18px; border-radius: 26px; }
  body.mobile-page .gsh-bar-title input{ font-size: clamp(25px, 7.4vw, 38px); }
  body.mobile-page .gsh-inline-help{ font-size: 13px; }
}

/* v195 · fix real pestañas sala invitado móvil + búsqueda integrada */
body.mobile-page .guest-search-hero .gsh-head,
body.mobile-page .guest-search-hero h1,
body.mobile-page .guest-search-hero h2{
  display:none!important;
}
body.mobile-page .guest-search-hero{
  position:relative;
  z-index:1;
  padding-top:18px!important;
  margin-bottom:12px!important;
}
body.mobile-page .gsh-bar-title{
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  padding:0 22px!important;
  border-radius:30px!important;
}
body.mobile-page .gsh-bar-title input{
  min-width:0!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  text-transform:uppercase!important;
  font-size:clamp(27px, 7.8vw, 46px)!important;
  line-height:.92!important;
}
body.mobile-page .mobile-card:has([data-guest-mobile-tabs]){
  position:relative!important;
  z-index:20!important;
}
body.mobile-page .mobile-segmented[data-guest-mobile-tabs]{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:manipulation!important;
}
body.mobile-page .mobile-segmented[data-guest-mobile-tabs] .mobile-tab{
  position:relative!important;
  z-index:31!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(196,255,85,.18)!important;
}
body.mobile-page #guestMobileTabContent{
  display:grid!important;
  min-height:120px!important;
  max-height:52vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  position:relative!important;
  z-index:10!important;
}

/* v197 · Generador de cartel DJ */
.poster-generator{margin-top:22px;overflow:hidden}
.poster-generator-title{align-items:flex-start;gap:14px}
.poster-generator-title h3{margin:4px 0 0;font-size:clamp(24px,3vw,36px);letter-spacing:-.04em;text-transform:uppercase}
.poster-generator-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,480px);gap:18px;align-items:start;margin-top:18px}
.poster-editor,.poster-preview-panel{min-width:0}
.poster-step{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 10px;color:var(--text)}
.poster-step strong{text-transform:uppercase;letter-spacing:.08em;font-size:12px}.poster-step span,.poster-preview-head span{color:var(--muted);font-size:12px}
.poster-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.poster-style-card{position:relative;min-height:84px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#101010;color:#fff;text-align:left;padding:14px;overflow:hidden;cursor:pointer;transition:.18s transform,.18s border,.18s box-shadow}
.poster-style-card:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.2),transparent 28%);opacity:.8}.poster-style-card span,.poster-style-card strong{position:relative;display:block}.poster-style-card span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.72)}.poster-style-card strong{margin-top:10px;font-size:18px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase}.poster-style-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}.poster-style-card.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.25)}
.poster-style-latin{background:linear-gradient(135deg,#160804,#3f1600 50%,#f97316)}.poster-style-club{background:linear-gradient(135deg,#050505,#180707 50%,#e11d48)}.poster-style-remember{background:linear-gradient(135deg,#090015,#3b0764 55%,#ec4899)}.poster-style-open{background:linear-gradient(135deg,#070707,#2d2108 55%,#facc15)}.poster-style-pop{background:linear-gradient(135deg,#06111f,#0f5ead 55%,#38bdf8)}.poster-style-minimal{background:linear-gradient(135deg,#050505,#292929)}.poster-style-elegant{background:linear-gradient(135deg,#141006,#6b4e16 55%,#f8e7ba)}.poster-style-college{background:linear-gradient(135deg,#12051f,#7f1d1d 55%,#a3e635)}
.poster-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.poster-form-grid label{display:flex;flex-direction:column;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.poster-form-grid input,.poster-form-grid select{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);border-radius:14px;padding:13px 12px;font:inherit;outline:none}.poster-form-grid input:focus,.poster-form-grid select:focus{border-color:rgba(255,255,255,.42);box-shadow:0 0 0 3px rgba(255,255,255,.06)}.poster-wide{grid-column:1/-1}.poster-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.poster-actions button{flex:1;min-width:135px}.poster-preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.poster-preview-wrap{display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.04);padding:14px;overflow:auto;max-height:760px}
.poster-canvas{position:relative;width:min(100%,420px);aspect-ratio:1/1;background:#050505;color:#fff;overflow:hidden;border-radius:0;box-shadow:0 24px 80px rgba(0,0,0,.35);font-family:Impact,'Arial Black',system-ui,sans-serif;isolation:isolate}.poster-format-story{aspect-ratio:9/16;width:min(100%,330px)}.poster-format-vertical{aspect-ratio:4/5;width:min(100%,380px)}.poster-format-a4{aspect-ratio:1/1.414;width:min(100%,360px)}.poster-canvas:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 32%),linear-gradient(to bottom,rgba(255,255,255,.05),transparent 40%,rgba(0,0,0,.35));z-index:-1}.poster-canvas:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 0 92%,rgba(255,255,255,.08)),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.35;pointer-events:none}.poster-bg-brand{position:absolute;left:50%;top:3%;transform:translateX(-50%);font-size:clamp(42px,13vw,82px);letter-spacing:-.08em;white-space:nowrap;color:rgba(255,255,255,.055);z-index:0}.poster-lights{position:absolute;inset:0;background:radial-gradient(circle at 12% 70%,var(--poster-glow,rgba(255,0,80,.5)),transparent 22%),radial-gradient(circle at 88% 35%,var(--poster-glow2,rgba(255,255,0,.28)),transparent 20%);filter:blur(4px);opacity:.75;z-index:-1}.poster-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8.5% 8% 7%;z-index:1}.poster-kicker{font-family:system-ui,sans-serif;font-weight:800;font-size:clamp(10px,2vw,15px);letter-spacing:.42em;color:var(--poster-accent,#f5f500);margin-bottom:2%}.poster-event{font-size:clamp(42px,12vw,76px);line-height:.86;margin:0;text-transform:uppercase;letter-spacing:-.06em;text-shadow:0 8px 26px rgba(0,0,0,.55)}.poster-dj{margin-top:3%;font-family:system-ui,sans-serif;font-size:clamp(13px,3vw,20px);font-weight:900;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.88)}.poster-date{margin-top:2%;font-family:system-ui,sans-serif;font-size:clamp(14px,3vw,22px);font-weight:900;letter-spacing:.22em;color:#fff}.poster-divider{width:54%;height:1px;background:linear-gradient(90deg,transparent,var(--poster-accent,#f5f500),transparent);margin:5% 0}.poster-headline{margin:0;font-size:clamp(36px,10vw,66px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;color:#fff}.poster-subtitle{font-family:system-ui,sans-serif;text-transform:uppercase;font-weight:900;font-size:clamp(10px,2vw,16px);line-height:1.35;letter-spacing:.08em;max-width:85%;margin:3% 0 5%;color:var(--poster-accent,#f5f500)}.poster-qr-box{display:grid;place-items:center;width:34%;min-width:132px;aspect-ratio:1/1;background:#fff;border-radius:14px;padding:3%;box-shadow:0 0 28px var(--poster-accent-soft,rgba(245,245,0,.5))}.poster-qr-box img{width:100%;height:100%;object-fit:contain;display:block}.poster-qr-box span{color:#111;font-family:system-ui;font-weight:900}.poster-powered{margin-top:auto;font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(8px,1.5vw,12px);color:rgba(255,255,255,.64)}
.poster-format-story .poster-inner{padding-top:13%;padding-bottom:9%}.poster-format-story .poster-event{font-size:clamp(54px,15vw,92px)}.poster-format-story .poster-headline{font-size:clamp(44px,12vw,76px)}.poster-format-story .poster-qr-box{width:48%;margin-top:3%}.poster-format-a4 .poster-qr-box,.poster-format-vertical .poster-qr-box{width:42%}
.poster-style-club{--poster-accent:#ff174f;--poster-accent-soft:rgba(255,23,79,.65);--poster-glow:rgba(255,0,60,.55);--poster-glow2:rgba(255,255,255,.18)}.poster-style-latin{--poster-accent:#ffd000;--poster-accent-soft:rgba(255,208,0,.58);--poster-glow:rgba(249,115,22,.7);--poster-glow2:rgba(250,204,21,.35)}.poster-style-remember{--poster-accent:#ff4ff3;--poster-accent-soft:rgba(255,79,243,.62);--poster-glow:rgba(168,85,247,.65);--poster-glow2:rgba(236,72,153,.45)}.poster-style-open{--poster-accent:#f7c948;--poster-accent-soft:rgba(247,201,72,.55);--poster-glow:rgba(247,201,72,.45);--poster-glow2:rgba(255,255,255,.15)}.poster-style-pop{--poster-accent:#38bdf8;--poster-accent-soft:rgba(56,189,248,.58);--poster-glow:rgba(14,165,233,.55);--poster-glow2:rgba(236,72,153,.3)}.poster-style-minimal{--poster-accent:#ffffff;--poster-accent-soft:rgba(255,255,255,.38);--poster-glow:rgba(255,255,255,.18);--poster-glow2:rgba(255,255,255,.12)}.poster-style-elegant{--poster-accent:#f8e7ba;--poster-accent-soft:rgba(248,231,186,.5);--poster-glow:rgba(212,175,55,.42);--poster-glow2:rgba(255,255,255,.15)}.poster-style-college{--poster-accent:#a3e635;--poster-accent-soft:rgba(163,230,53,.6);--poster-glow:rgba(239,68,68,.48);--poster-glow2:rgba(163,230,53,.42)}
@media(max-width:900px){.poster-generator-grid{grid-template-columns:1fr}.poster-style-grid,.poster-form-grid{grid-template-columns:1fr}.poster-preview-wrap{max-height:none}.poster-canvas{width:min(100%,360px)}.poster-format-story{width:min(100%,280px)}}
.mobile-page .poster-generator{margin-top:14px}.mobile-page .poster-generator-title{display:flex}.mobile-page .poster-style-grid{grid-template-columns:1fr 1fr}.mobile-page .poster-form-grid{grid-template-columns:1fr}.mobile-page .poster-actions{display:grid;grid-template-columns:1fr}.mobile-page .poster-preview-wrap{padding:10px}.mobile-page .poster-canvas{width:min(100%,330px)}.mobile-page .poster-format-story{width:min(100%,255px)}

/* v198 · Generador de cartel movido al panel de control DJ */
.poster-generator-page[hidden]{display:none!important}
.poster-generator-page{margin:22px 0}
.poster-room-picker{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:end;margin:16px 0 20px}
.poster-room-picker label{display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.78);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.poster-room-picker select{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;border-radius:16px;padding:13px 14px;outline:none}
.poster-room-picker select option{color:#050505;background:#fff}
.room-card .btn-row .btn-secondary{white-space:nowrap}
@media(max-width:760px){.poster-room-picker{grid-template-columns:1fr}.poster-generator-page{margin:12px 0}.room-card .btn-row{display:grid!important;grid-template-columns:1fr;gap:8px}.room-card .btn-row a,.room-card .btn-row button{width:100%}}

/* v199 poster fixes: QR safe area, fixed PMS watermark and closed date input */
.poster-canvas{overflow:hidden}
.poster-inner{padding:7% 8% 9%;gap:0;justify-content:flex-start}
.poster-event{max-width:96%;overflow-wrap:break-word;word-break:normal;text-wrap:balance}
.poster-date{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.16em}
.poster-divider{margin:4% 0}
.poster-headline{font-size:clamp(30px,8vw,56px);max-width:92%;text-wrap:balance}
.poster-subtitle{font-size:clamp(9px,1.7vw,14px);max-width:82%;margin:3% 0 4%;text-wrap:balance}
.poster-qr-box{width:30%;min-width:112px;padding:2.4%;border-radius:13px;flex:0 0 auto;margin-bottom:34px}
.poster-powered{display:none!important}
.poster-watermark{position:absolute;right:4.6%;bottom:3.8%;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:system-ui,sans-serif;text-transform:uppercase;text-align:right;color:rgba(255,255,255,.74);letter-spacing:.12em;z-index:3;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.poster-watermark strong{font-size:clamp(12px,2.1vw,18px);line-height:1;color:#fff;letter-spacing:.18em;font-weight:950}
.poster-watermark span{font-size:clamp(6px,1vw,9px);line-height:1.05;color:rgba(255,255,255,.58);font-weight:850;white-space:nowrap}
.poster-format-square .poster-kicker{margin-bottom:1.5%}
.poster-format-square .poster-event{font-size:clamp(34px,9.5vw,64px)}
.poster-format-square .poster-dj{margin-top:2.2%;font-size:clamp(12px,2.4vw,18px)}
.poster-format-square .poster-date{margin-top:1.8%;font-size:clamp(13px,2.5vw,20px)}
.poster-format-square .poster-divider{margin:4% 0}
.poster-format-square .poster-headline{font-size:clamp(30px,7.8vw,54px)}
.poster-format-square .poster-subtitle{margin:3% 0 4%;font-size:clamp(9px,1.65vw,13px)}
.poster-format-square .poster-qr-box{width:29%;min-width:108px;margin-bottom:38px}
.poster-format-vertical .poster-qr-box,.poster-format-a4 .poster-qr-box{width:38%;margin-bottom:42px}
.poster-format-story .poster-qr-box{width:45%;margin-bottom:48px}
.poster-format-story .poster-watermark,.poster-format-vertical .poster-watermark,.poster-format-a4 .poster-watermark{right:5%;bottom:3.2%}
.poster-form-grid input#posterEventDate{text-transform:uppercase;letter-spacing:.06em}


/* v200 poster layout: QR always visible + fixed PMS watermark */
.poster-canvas{overflow:hidden!important;}
.poster-inner{box-sizing:border-box!important;height:100%!important;padding:6.2% 7.4% 8.4%!important;justify-content:flex-start!important;}
.poster-kicker{margin-bottom:1.1%!important;}
.poster-event{font-size:clamp(30px,8.2vw,56px)!important;line-height:.82!important;max-width:96%!important;}
.poster-dj{margin-top:1.8%!important;font-size:clamp(10px,2.05vw,15px)!important;letter-spacing:.22em!important;}
.poster-date{margin-top:2%!important;font-size:clamp(11px,2.15vw,16px)!important;letter-spacing:.17em!important;}
.poster-divider{display:none!important;}
.poster-headline{margin-top:6.8%!important;font-size:clamp(24px,6.2vw,42px)!important;line-height:.92!important;max-width:94%!important;}
.poster-headline:before{content:'';display:inline-block;width:.36em;height:.36em;border-radius:999px;background:linear-gradient(135deg,var(--poster-accent,#fff),#fff);margin-right:.5em;vertical-align:.16em;box-shadow:0 0 14px var(--poster-accent-soft,rgba(255,255,255,.45));}
.poster-subtitle{margin:4.2% 0 3.8%!important;font-size:clamp(8px,1.45vw,11px)!important;line-height:1.25!important;max-width:84%!important;letter-spacing:.11em!important;}
.poster-qr-box{width:25%!important;min-width:96px!important;padding:2.1%!important;border-radius:12px!important;margin:0!important;box-shadow:0 0 22px var(--poster-accent-soft,rgba(255,255,255,.45))!important;}
.poster-watermark{position:absolute!important;right:4.4%!important;bottom:3.2%!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;z-index:20!important;color:rgba(255,255,255,.82)!important;text-shadow:0 2px 14px rgba(0,0,0,.8)!important;}
.poster-watermark strong{font-size:clamp(10px,1.65vw,14px)!important;letter-spacing:.16em!important;}
.poster-watermark span{font-size:clamp(5px,.78vw,7px)!important;letter-spacing:.08em!important;}
.poster-bg-brand{top:5%!important;font-size:clamp(36px,10vw,66px)!important;}
.poster-format-square .poster-event{font-size:clamp(30px,8.1vw,54px)!important;}
.poster-format-square .poster-headline{font-size:clamp(24px,6vw,40px)!important;margin-top:6.8%!important;}
.poster-format-square .poster-subtitle{font-size:clamp(8px,1.4vw,10.5px)!important;margin:4.2% 0 4%!important;}
.poster-format-square .poster-qr-box{width:25%!important;min-width:94px!important;}
.poster-format-vertical .poster-inner,.poster-format-a4 .poster-inner{padding:8% 8% 9%!important;}
.poster-format-vertical .poster-event,.poster-format-a4 .poster-event{font-size:clamp(36px,9vw,68px)!important;}
.poster-format-vertical .poster-headline,.poster-format-a4 .poster-headline{font-size:clamp(30px,7vw,52px)!important;margin-top:7.5%!important;}
.poster-format-vertical .poster-qr-box,.poster-format-a4 .poster-qr-box{width:34%!important;min-width:116px!important;}
.poster-format-story .poster-inner{padding:10% 8% 9%!important;}
.poster-format-story .poster-event{font-size:clamp(46px,13vw,88px)!important;}
.poster-format-story .poster-headline{font-size:clamp(36px,10vw,70px)!important;margin-top:9%!important;}
.poster-format-story .poster-subtitle{font-size:clamp(10px,2.1vw,16px)!important;}
.poster-format-story .poster-qr-box{width:46%!important;min-width:140px!important;}
.poster-form-grid input#posterEventDate{letter-spacing:0!important;text-transform:none!important;}


/* v201 poster layout hardfix: fixed safe-area positions, no clipping in 1:1/PDF */
.poster-canvas{overflow:hidden!important;container-type:inline-size;}
.poster-inner{position:absolute!important;inset:0!important;height:100%!important;width:100%!important;padding:0!important;display:block!important;text-align:center!important;box-sizing:border-box!important;}
.poster-kicker,.poster-event,.poster-dj,.poster-date,.poster-headline,.poster-subtitle,.poster-qr-box,.poster-watermark{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;box-sizing:border-box!important;}
.poster-kicker{top:7.2%!important;font-family:system-ui,sans-serif!important;font-weight:900!important;font-size:3.1cqw!important;line-height:1!important;letter-spacing:.48em!important;color:var(--poster-accent,#fff)!important;width:90%!important;}
.poster-event{top:17%!important;width:88%!important;max-width:88%!important;font-size:14.2cqw!important;line-height:.78!important;letter-spacing:-.07em!important;white-space:normal!important;overflow:visible!important;text-wrap:balance!important;}
.poster-dj{top:34.6%!important;width:86%!important;font-family:system-ui,sans-serif!important;font-size:4.2cqw!important;line-height:1.05!important;font-weight:950!important;letter-spacing:.27em!important;color:rgba(255,255,255,.9)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.poster-date{top:43.2%!important;width:86%!important;font-family:system-ui,sans-serif!important;font-size:4.4cqw!important;line-height:1!important;font-weight:950!important;letter-spacing:.2em!important;white-space:nowrap!important;}
.poster-headline{top:57.2%!important;width:88%!important;max-width:88%!important;font-size:7.3cqw!important;line-height:.95!important;letter-spacing:-.045em!important;text-wrap:balance!important;}
.poster-headline:before{width:.32em!important;height:.32em!important;margin-right:.42em!important;vertical-align:.14em!important;}
.poster-subtitle{top:66.9%!important;width:82%!important;max-width:82%!important;font-family:system-ui,sans-serif!important;font-size:3.15cqw!important;line-height:1.25!important;letter-spacing:.12em!important;text-wrap:balance!important;color:var(--poster-accent,#fff)!important;}
.poster-qr-box{top:78.2%!important;width:18.5%!important;min-width:0!important;aspect-ratio:1/1!important;padding:1.7%!important;border-radius:3.2cqw!important;background:#fff!important;display:grid!important;place-items:center!important;box-shadow:0 0 18px var(--poster-accent-soft,rgba(255,255,255,.45))!important;}
.poster-qr-box img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;}
.poster-watermark{left:auto!important;right:3.4%!important;bottom:3.2%!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:.15em!important;font-family:system-ui,sans-serif!important;text-transform:uppercase!important;text-align:right!important;z-index:25!important;pointer-events:none!important;text-shadow:0 2px 14px rgba(0,0,0,.9)!important;}
.poster-watermark strong{font-size:3cqw!important;line-height:.9!important;color:#fff!important;letter-spacing:.16em!important;font-weight:950!important;}
.poster-watermark span{font-size:1.35cqw!important;line-height:1!important;color:rgba(255,255,255,.62)!important;letter-spacing:.08em!important;font-weight:900!important;white-space:nowrap!important;}
.poster-bg-brand{top:8%!important;font-size:14cqw!important;}
.poster-lights{opacity:.58!important;}
.poster-format-square .poster-qr-box{top:78.2%!important;width:18.5%!important;}
.poster-format-square .poster-event{font-size:14.2cqw!important;}
.poster-format-square .poster-headline{font-size:7.3cqw!important;}
.poster-format-square .poster-subtitle{font-size:3.15cqw!important;}

/* Vertical formats get more air without changing the square safe layout */
.poster-format-vertical .poster-kicker,.poster-format-a4 .poster-kicker{top:7%!important;font-size:3.1cqw!important;}
.poster-format-vertical .poster-event,.poster-format-a4 .poster-event{top:15.2%!important;font-size:15.4cqw!important;}
.poster-format-vertical .poster-dj,.poster-format-a4 .poster-dj{top:30.5%!important;font-size:4.3cqw!important;}
.poster-format-vertical .poster-date,.poster-format-a4 .poster-date{top:37.2%!important;font-size:4.6cqw!important;}
.poster-format-vertical .poster-headline,.poster-format-a4 .poster-headline{top:50.5%!important;font-size:8cqw!important;}
.poster-format-vertical .poster-subtitle,.poster-format-a4 .poster-subtitle{top:59.5%!important;font-size:3.25cqw!important;}
.poster-format-vertical .poster-qr-box,.poster-format-a4 .poster-qr-box{top:70.2%!important;width:28%!important;}

.poster-format-story .poster-kicker{top:8.5%!important;font-size:3.2cqw!important;}
.poster-format-story .poster-event{top:15%!important;font-size:16cqw!important;}
.poster-format-story .poster-dj{top:29.5%!important;font-size:4.5cqw!important;}
.poster-format-story .poster-date{top:35.5%!important;font-size:4.7cqw!important;}
.poster-format-story .poster-headline{top:48.5%!important;font-size:8.8cqw!important;}
.poster-format-story .poster-subtitle{top:57.3%!important;font-size:3.7cqw!important;}
.poster-format-story .poster-qr-box{top:68.5%!important;width:36%!important;}

@supports not (font-size: 1cqw){
  .poster-kicker{font-size:13px!important}.poster-event{font-size:60px!important}.poster-dj{font-size:18px!important}.poster-date{font-size:18px!important}.poster-headline{font-size:31px!important}.poster-subtitle{font-size:13px!important}.poster-watermark strong{font-size:13px!important}.poster-watermark span{font-size:6px!important}
}

/* v203 poster canvas: exportación real por canvas, sin desplazamientos ni recortes */
.poster-preview-wrap{overflow:auto!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;}
.poster-canvas-rendered{display:block!important;width:min(100%,420px)!important;height:auto!important;aspect-ratio:auto!important;max-width:100%!important;background:#050505!important;box-shadow:0 24px 80px rgba(0,0,0,.35)!important;}
.poster-canvas-rendered.poster-format-story,.poster-canvas-rendered.poster-format-a4,.poster-canvas-rendered.poster-format-vertical{width:min(100%,420px)!important;}
.mobile-page .poster-canvas-rendered{width:min(100%,330px)!important;}

/* v204 · portadas forzadas + control musical estático */
.pms-track-art,
.smart-track-art,
.current-art,
.mobile-live-art,
.mobile-song-art{
  position:relative;
  background:linear-gradient(135deg, rgba(212,255,57,.16), rgba(255,255,255,.055))!important;
}
.pms-track-art.artwork-failed::after,
.smart-track-art.artwork-failed::after{
  content:"♪";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--yellow, #d4ff39);
  font-weight:900;
  font-size:24px;
}
.pms-track-art img,
.smart-track-art img,
.current-art img,
.mobile-live-art img,
.mobile-song-art img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#111;
}

/* El bloque de control musical no puede cambiar de tamaño por títulos largos */
#musicControlBox{
  min-height:520px;
  display:flex;
  flex-direction:column;
}
#smartModePanel{
  min-height:410px;
  display:block;
}
#smartModePanel > .muted-box,
#smartModePanel > .smart-card{
  min-height:410px;
  box-sizing:border-box;
}
#smartModePanel .smart-card.smart-card-v2{
  height:410px!important;
  min-height:410px!important;
  max-height:410px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto 178px auto auto;
  gap:12px;
}
#smartModePanel .smart-card-top{
  min-height:28px;
  margin:0!important;
}
#smartModePanel .smart-track-row{
  display:grid!important;
  grid-template-columns:178px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:178px;
  max-height:178px;
}
#smartModePanel .smart-track-art{
  width:178px!important;
  height:178px!important;
  max-width:178px!important;
  min-width:178px!important;
  border-radius:22px!important;
}
#smartModePanel .smart-song{
  min-width:0!important;
  height:178px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:8px!important;
  overflow:hidden!important;
}
#smartModePanel .smart-song strong{
  width:100%!important;
  max-width:100%!important;
  min-height:96px;
  max-height:96px;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  font-size:clamp(34px, 4vw, 52px)!important;
  line-height:.92!important;
}
#smartModePanel .smart-song-artist{
  width:100%!important;
  max-width:100%!important;
  min-height:24px;
  max-height:48px;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
}
#smartModePanel .smart-song .status-badge{
  flex:0 0 auto;
}
#smartModePanel .smart-reason{
  height:54px!important;
  max-height:54px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
#smartModePanel .smart-actions-compact{
  align-self:end;
  margin:0!important;
  min-height:92px;
  max-height:92px;
}
#smartModePanel .smart-actions-compact button,
#smartModePanel .smart-actions-compact .btn-compact{
  min-height:42px!important;
  max-height:42px!important;
}
@media (max-width:760px){
  #musicControlBox{min-height:410px;}
  #smartModePanel{min-height:300px;}
  #smartModePanel > .muted-box,
  #smartModePanel > .smart-card{min-height:300px;}
  #smartModePanel .smart-card.smart-card-v2{
    height:300px!important;
    min-height:300px!important;
    max-height:300px!important;
    grid-template-rows:auto 86px auto auto;
    gap:8px;
  }
  #smartModePanel .smart-track-row{
    grid-template-columns:86px minmax(0,1fr)!important;
    min-height:86px;
    max-height:86px;
    gap:12px!important;
  }
  #smartModePanel .smart-track-art{
    width:86px!important;
    height:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    border-radius:16px!important;
  }
  #smartModePanel .smart-song{height:86px!important;gap:4px!important;}
  #smartModePanel .smart-song strong{
    min-height:42px;
    max-height:42px;
    font-size:22px!important;
    line-height:.96!important;
  }
  #smartModePanel .smart-song-artist{
    min-height:17px;
    max-height:34px;
    font-size:13px!important;
  }
  #smartModePanel .smart-reason{height:40px!important;max-height:40px!important;font-size:11.5px!important;padding:6px 8px!important;}
  #smartModePanel .smart-actions-compact{min-height:78px;max-height:78px;}
  #smartModePanel .smart-actions-compact button,
  #smartModePanel .smart-actions-compact .btn-compact{min-height:36px!important;max-height:36px!important;}
}


/* v206 · reparación consola DJ: mantener funcionalidad y separar visualmente canción / log / acciones */
#roomsList .room-card [data-poster-room],
#roomsList .room-card .poster-room-btn,
#roomsList .room-card .generate-poster-btn,
#roomsList .room-card .js-room-poster-btn{display:none!important}
.smart-control{overflow:visible!important}
#smartModePanel{margin-top:14px!important}
.smart-layout-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:16px;align-items:stretch}
.smart-side-stack{display:grid;gap:12px;align-content:start}
.smart-song-static{min-height:210px;height:210px;display:grid;align-content:center;overflow:hidden}
.smart-song-static .smart-track-row{min-height:120px;align-items:center}
.smart-song-static .smart-song{min-width:0;overflow:hidden}
.smart-song-static .smart-song strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(22px,2.8vw,34px);line-height:.96}
.smart-song-static .smart-song-artist{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.smart-info-card,.smart-action-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:22px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.smart-score-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.smart-score-card span,.smart-reason-card span{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:11px;font-weight:900}
.smart-score-card strong{font-size:34px;line-height:1;letter-spacing:-.05em}
.smart-reason-card p{margin:8px 0 0;color:var(--text);font-weight:750;line-height:1.25}
.smart-action-card .pms-track-actions{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.smart-action-card .pms-track-actions button{width:100%;min-height:42px}
.smart-action-card .pms-track-actions button:only-child{grid-column:1/-1}
.smart-track-art img,.pms-track-art img,.current-art img{display:block;width:100%;height:100%;object-fit:cover}
.artwork-failed::after{content:'♪';display:grid;place-items:center;width:100%;height:100%;font-weight:900;font-size:34px;color:rgba(255,255,255,.75)}
@media(max-width:900px){.smart-layout-split{grid-template-columns:1fr}.smart-song-static{height:auto;min-height:190px}.smart-action-card .pms-track-actions{grid-template-columns:1fr}}


/* v207 · control musical simétrico + portadas estables */
#musicControlBox{
  min-height:0!important;
  height:auto!important;
  display:block!important;
  overflow:visible!important;
}
#smartModePanel{
  min-height:0!important;
  height:auto!important;
  margin-top:16px!important;
  overflow:visible!important;
}
#smartModePanel > .muted-box,
#smartModePanel > .smart-card{
  min-height:0!important;
  height:auto!important;
}
.smart-manual-state{
  min-height:92px!important;
  max-width:720px!important;
  display:flex!important;
  align-items:center!important;
  font-size:16px!important;
  line-height:1.28!important;
}
.smart-layout-split{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(340px,.74fr)!important;
  gap:16px!important;
  align-items:stretch!important;
  min-height:0!important;
}
.smart-card.smart-card-v2.smart-song-static,
#smartModePanel .smart-card.smart-card-v2.smart-song-static{
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  padding:18px!important;
  display:grid!important;
  grid-template-rows:34px minmax(0,1fr)!important;
  gap:14px!important;
  align-content:stretch!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.smart-card-top{
  min-height:0!important;
  height:34px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  overflow:hidden!important;
}
.smart-kicker{
  max-width:160px!important;
  display:block!important;
  line-height:1.05!important;
}
#smartModePanel .smart-track-row,
.smart-track-row{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:18px!important;
  min-height:0!important;
  max-height:none!important;
  height:100%!important;
  align-items:center!important;
  overflow:hidden!important;
}
#smartModePanel .smart-track-art,
.smart-track-art{
  width:150px!important;
  height:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  align-self:center!important;
  background:linear-gradient(135deg,rgba(142,255,58,.24),rgba(255,255,255,.06))!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
#smartModePanel .smart-song,
.smart-song{
  height:auto!important;
  min-height:0!important;
  max-height:210px!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:10px!important;
  overflow:hidden!important;
}
#smartModePanel .smart-song strong,
.smart-song strong{
  min-height:0!important;
  max-height:124px!important;
  width:100%!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
  font-size:clamp(30px,3.1vw,48px)!important;
  line-height:.96!important;
  letter-spacing:-.06em!important;
}
#smartModePanel .smart-song-artist,
.smart-song-artist{
  min-height:0!important;
  max-height:48px!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
  font-size:clamp(16px,1.5vw,22px)!important;
  line-height:1.08!important;
}
.smart-side-stack{
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  display:grid!important;
  grid-template-rows:70px minmax(0,1fr) 82px!important;
  gap:12px!important;
  overflow:hidden!important;
}
.smart-info-card,.smart-action-card{
  min-height:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.smart-score-card{
  height:70px!important;
  padding:14px 18px!important;
}
.smart-score-card strong{font-size:32px!important;line-height:1!important;}
.smart-reason-card{
  padding:14px 18px!important;
  display:block!important;
}
.smart-reason-card p{
  margin-top:8px!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  line-height:1.22!important;
}
.smart-action-card{
  height:82px!important;
  padding:14px 18px!important;
  display:grid!important;
  align-items:center!important;
}
.smart-action-card .pms-track-actions,
.smart-action-card .smart-actions-compact{
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
}
.smart-action-card .pms-track-actions button,
.smart-action-card .smart-actions-compact button,
.smart-action-card .btn-compact{
  min-height:44px!important;
  max-height:44px!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.smart-action-card .pms-track-actions button:only-child,
.smart-action-card .smart-actions-compact button:only-child{grid-column:1/-1!important;}
.smart-track-art img,.pms-track-art img,.current-art img,.mobile-live-art img,.mobile-song-art img{
  opacity:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.artwork-failed{display:grid!important;place-items:center!important;}
.artwork-failed::after{content:'♪'!important;}
@media(max-width:900px){
  .smart-layout-split{grid-template-columns:1fr!important;}
  .smart-card.smart-card-v2.smart-song-static,
  #smartModePanel .smart-card.smart-card-v2.smart-song-static{height:230px!important;min-height:230px!important;max-height:230px!important;}
  .smart-side-stack{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:auto!important;}
  #smartModePanel .smart-track-row,.smart-track-row{grid-template-columns:104px minmax(0,1fr)!important;}
  #smartModePanel .smart-track-art,.smart-track-art{width:104px!important;height:104px!important;min-width:104px!important;max-width:104px!important;border-radius:18px!important;}
  #smartModePanel .smart-song strong,.smart-song strong{font-size:26px!important;max-height:58px!important;}
  .smart-action-card{height:auto!important;}
  .smart-manual-state{max-width:none!important;}
}


/* v208 · control musical: encaje real + botones compactos */
#musicControlBox{
  padding:22px 28px!important;
  overflow:visible!important;
}
#smartModePanel{margin-top:12px!important;overflow:visible!important;}
.smart-manual-state{
  min-height:58px!important;
  height:auto!important;
  max-width:680px!important;
  padding:16px 20px!important;
}
.smart-layout-split{
  grid-template-columns:minmax(0,1.04fr) minmax(300px,.76fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.smart-card.smart-card-v2.smart-song-static,
#smartModePanel .smart-card.smart-card-v2.smart-song-static{
  height:244px!important;
  min-height:244px!important;
  max-height:244px!important;
  padding:16px 18px!important;
  grid-template-rows:28px minmax(0,1fr)!important;
  gap:10px!important;
  overflow:hidden!important;
}
.smart-card-top,
#smartModePanel .smart-card-top{
  height:28px!important;
  max-height:28px!important;
  min-height:28px!important;
  align-items:center!important;
  margin:0!important;
  overflow:hidden!important;
}
.smart-kicker{max-width:210px!important;font-size:10px!important;line-height:1.05!important;}
#smartModePanel .smart-track-row,
.smart-track-row{
  display:grid!important;
  grid-template-columns:118px minmax(0,1fr)!important;
  gap:16px!important;
  height:100%!important;
  min-height:0!important;
  align-items:center!important;
  overflow:hidden!important;
}
#smartModePanel .smart-track-art,
.smart-track-art{
  width:118px!important;
  height:118px!important;
  min-width:118px!important;
  max-width:118px!important;
  border-radius:20px!important;
  align-self:center!important;
}
#smartModePanel .smart-song,
.smart-song{
  min-height:0!important;
  max-height:150px!important;
  gap:8px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#smartModePanel .smart-song strong,
.smart-song strong{
  font-size:clamp(24px,2.25vw,34px)!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  max-height:70px!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}
#smartModePanel .smart-song-artist,
.smart-song-artist{
  font-size:clamp(14px,1.25vw,18px)!important;
  line-height:1.1!important;
  max-height:40px!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}
.smart-side-stack{
  height:244px!important;
  min-height:244px!important;
  max-height:244px!important;
  grid-template-rows:58px minmax(0,1fr) 58px!important;
  gap:10px!important;
}
.smart-info-card,.smart-action-card{border-radius:18px!important;padding:12px 16px!important;}
.smart-score-card{height:58px!important;padding:10px 16px!important;}
.smart-score-card strong{font-size:28px!important;}
.smart-score-card span,.smart-reason-card span{font-size:10px!important;letter-spacing:.13em!important;}
.smart-reason-card{padding:12px 16px!important;}
.smart-reason-card p{
  margin-top:6px!important;
  font-size:14px!important;
  line-height:1.18!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.smart-reason-card .agent-line{margin-top:6px!important;font-size:12px!important;line-height:1.1!important;}
.smart-reason-card .agent-hint{display:none!important;}
.smart-action-card{height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
.smart-action-card .pms-track-actions,
#smartModePanel .smart-actions-compact{
  width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:center!important;
}
.smart-action-card .pms-track-actions button,
#smartModePanel .smart-actions-compact button,
#smartModePanel .smart-actions-compact .btn-compact{
  min-height:32px!important;
  max-height:34px!important;
  height:34px!important;
  padding:6px 10px!important;
  border-radius:12px!important;
  font-size:11.5px!important;
  line-height:1!important;
}
.smart-action-card .pms-track-actions button:only-child{grid-column:1/-1!important;max-width:none!important;}
@media(max-width:900px){
  .smart-layout-split{grid-template-columns:1fr!important;}
  .smart-card.smart-card-v2.smart-song-static,
  #smartModePanel .smart-card.smart-card-v2.smart-song-static{height:210px!important;min-height:210px!important;max-height:210px!important;}
  .smart-side-stack{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:auto!important;}
  #smartModePanel .smart-track-row,.smart-track-row{grid-template-columns:86px minmax(0,1fr)!important;gap:12px!important;}
  #smartModePanel .smart-track-art,.smart-track-art{width:86px!important;height:86px!important;min-width:86px!important;max-width:86px!important;}
  #smartModePanel .smart-song strong,.smart-song strong{font-size:24px!important;max-height:54px!important;}
  .smart-action-card{height:auto!important;min-height:52px!important;}
  .smart-action-card .pms-track-actions,#smartModePanel .smart-actions-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* v210 · REPARACIÓN REAL: control musical simétrico sin recortes */
body:not(.mobile-page) #musicControlBox{
  padding:22px 28px!important;
  overflow:visible!important;
}
body:not(.mobile-page) #smartModePanel{
  margin-top:14px!important;
  overflow:visible!important;
}
body:not(.mobile-page) .smart-layout-split{
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(320px,.74fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
body:not(.mobile-page) #smartModePanel .smart-card.smart-card-v2.smart-song-static,
body:not(.mobile-page) .smart-card.smart-card-v2.smart-song-static{
  display:flex!important;
  flex-direction:column!important;
  height:260px!important;
  min-height:260px!important;
  max-height:260px!important;
  padding:16px 18px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body:not(.mobile-page) #smartModePanel .smart-card-top,
body:not(.mobile-page) .smart-card-top{
  flex:0 0 28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 10px!important;
  overflow:visible!important;
}
body:not(.mobile-page) #smartModePanel .smart-kicker,
body:not(.mobile-page) .smart-kicker{
  max-width:260px!important;
  font-size:10px!important;
  line-height:1.05!important;
  letter-spacing:.13em!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
}
body:not(.mobile-page) #smartModePanel .smart-card-top .status-badge,
body:not(.mobile-page) .smart-card-top .status-badge{
  flex:0 0 auto!important;
  max-width:130px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body:not(.mobile-page) #smartModePanel .smart-track-row,
body:not(.mobile-page) .smart-track-row{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  overflow:hidden!important;
}
body:not(.mobile-page) #smartModePanel .smart-track-art,
body:not(.mobile-page) .smart-track-art{
  width:112px!important;
  height:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  flex:0 0 112px!important;
  border-radius:18px!important;
  align-self:center!important;
  justify-self:center!important;
  overflow:hidden!important;
}
body:not(.mobile-page) #smartModePanel .smart-song,
body:not(.mobile-page) .smart-song{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:160px!important;
  overflow:hidden!important;
}
body:not(.mobile-page) #smartModePanel .smart-song strong,
body:not(.mobile-page) .smart-song strong{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
  font-size:clamp(24px,2.15vw,34px)!important;
  line-height:1.02!important;
  letter-spacing:-.052em!important;
  max-height:74px!important;
  margin:0!important;
}
body:not(.mobile-page) #smartModePanel .smart-song-artist,
body:not(.mobile-page) .smart-song-artist{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
  font-size:clamp(14px,1.18vw,18px)!important;
  line-height:1.12!important;
  max-height:42px!important;
}
body:not(.mobile-page) .smart-side-stack{
  height:260px!important;
  min-height:260px!important;
  max-height:260px!important;
  display:grid!important;
  grid-template-rows:54px minmax(0,112px) 78px!important;
  gap:8px!important;
  overflow:hidden!important;
}
body:not(.mobile-page) .smart-info-card,
body:not(.mobile-page) .smart-action-card{
  min-height:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
body:not(.mobile-page) .smart-score-card{
  height:54px!important;
  padding:9px 16px!important;
}
body:not(.mobile-page) .smart-score-card strong{font-size:27px!important;line-height:1!important;}
body:not(.mobile-page) .smart-reason-card{padding:12px 16px!important;}
body:not(.mobile-page) .smart-reason-card p{
  margin:6px 0 0!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  font-size:13.5px!important;
  line-height:1.18!important;
}
body:not(.mobile-page) .smart-reason-card .agent-line{margin-top:5px!important;font-size:11.5px!important;line-height:1.1!important;}
body:not(.mobile-page) .smart-reason-card .agent-hint{display:none!important;}
body:not(.mobile-page) .smart-action-card{
  height:78px!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions,
body:not(.mobile-page) .smart-action-card .smart-actions-compact{
  width:100%!important;
  max-height:58px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px 8px!important;
  align-items:center!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) .smart-action-card .btn-compact{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  padding:4px 8px!important;
  border-radius:10px!important;
  font-size:10.5px!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:only-child{
  grid-column:1 / -1!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:nth-child(3):last-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:nth-child(3):last-child{
  grid-column:1 / -1!important;
}
body:not(.mobile-page) .smart-manual-state{
  min-height:52px!important;
  max-width:720px!important;
  padding:14px 18px!important;
}
.smart-track-art img,.pms-track-art img,.current-art img,.mobile-live-art img,.mobile-song-art img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
@media(max-width:900px){
  body:not(.mobile-page) .smart-layout-split{grid-template-columns:1fr!important;}
  body:not(.mobile-page) #smartModePanel .smart-card.smart-card-v2.smart-song-static,
  body:not(.mobile-page) .smart-card.smart-card-v2.smart-song-static{height:220px!important;min-height:220px!important;max-height:220px!important;}
  body:not(.mobile-page) .smart-side-stack{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:auto!important;}
  body:not(.mobile-page) .smart-action-card{height:auto!important;min-height:66px!important;}
}

/* v211 - ajuste final control musical: botones compactos y portadas direct-first */
body:not(.mobile-page) .smart-action-card{
  height:52px!important;
  min-height:52px!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions,
body:not(.mobile-page) .smart-action-card .smart-actions-compact,
body:not(.mobile-page) #smartModePanel .smart-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  align-items:center!important;
  min-height:0!important;
  max-height:38px!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) #smartModePanel .smart-actions-compact button,
body:not(.mobile-page) .smart-action-card .btn-compact{
  min-height:32px!important;
  max-height:32px!important;
  height:32px!important;
  padding:6px 10px!important;
  border-radius:12px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  width:100%!important;
  max-width:none!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:only-child{
  grid-column:1 / -1!important;
  max-width:420px!important;
  justify-self:center!important;
}
@media(max-width:900px){
  .smart-action-card{height:auto!important;min-height:46px!important;padding:8px!important;}
  .smart-action-card .pms-track-actions,.smart-action-card .smart-actions-compact,#smartModePanel .smart-actions-compact{grid-template-columns:1fr 1fr!important;max-height:none!important;}
  .smart-action-card .pms-track-actions button,.smart-action-card .smart-actions-compact button,#smartModePanel .smart-actions-compact button{height:30px!important;min-height:30px!important;font-size:11px!important;padding:5px 8px!important;}
  .smart-action-card .pms-track-actions button:nth-child(3):last-child,.smart-action-card .smart-actions-compact button:nth-child(3):last-child{grid-column:1/-1!important;}
}

/* v212 · acciones compactas sin recortes desktop/móvil */
body:not(.mobile-page) .smart-side-stack{
  grid-template-rows:54px minmax(0,112px) 66px!important;
  height:260px!important;
  min-height:260px!important;
  max-height:260px!important;
}
body:not(.mobile-page) .smart-action-card{
  height:66px!important;
  min-height:66px!important;
  max-height:66px!important;
  padding:8px 12px!important;
  overflow:visible!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions,
body:not(.mobile-page) .smart-action-card .smart-actions-compact,
body:not(.mobile-page) #smartModePanel .smart-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-height:none!important;
  min-height:0!important;
  align-items:center!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) #smartModePanel .smart-actions-compact button,
body:not(.mobile-page) #smartModePanel .smart-actions-compact .btn-compact,
body:not(.mobile-page) .smart-action-card .btn-compact{
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:4px 8px!important;
  border-radius:10px!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  width:100%!important;
  max-width:none!important;
  box-shadow:0 8px 18px rgba(117,255,66,.18)!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:only-child,
body:not(.mobile-page) #smartModePanel .smart-actions-compact button:only-child{
  grid-column:1 / -1!important;
  max-width:280px!important;
  justify-self:center!important;
}
@media(max-width:1200px){
  body:not(.mobile-page) .smart-action-card .pms-track-actions,
  body:not(.mobile-page) .smart-action-card .smart-actions-compact,
  body:not(.mobile-page) #smartModePanel .smart-actions-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body:not(.mobile-page) .smart-action-card .pms-track-actions button:nth-child(3):last-child,
  body:not(.mobile-page) .smart-action-card .smart-actions-compact button:nth-child(3):last-child,
  body:not(.mobile-page) #smartModePanel .smart-actions-compact button:nth-child(3):last-child{grid-column:1/-1!important;max-width:260px!important;justify-self:center!important;}
}
@media(max-width:900px){
  .smart-side-stack{gap:8px!important;}
  .smart-action-card{height:auto!important;min-height:50px!important;padding:8px!important;overflow:visible!important;}
  .smart-action-card .pms-track-actions,
  .smart-action-card .smart-actions-compact,
  #smartModePanel .smart-actions-compact{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-height:none!important;}
  .smart-action-card .pms-track-actions button,
  .smart-action-card .smart-actions-compact button,
  #smartModePanel .smart-actions-compact button,
  #smartModePanel .smart-actions-compact .btn-compact{height:28px!important;min-height:28px!important;max-height:28px!important;padding:4px 6px!important;border-radius:10px!important;font-size:10.5px!important;line-height:1!important;}
  .smart-action-card .pms-track-actions button:nth-child(3):last-child,
  .smart-action-card .smart-actions-compact button:nth-child(3):last-child,
  #smartModePanel .smart-actions-compact button:nth-child(3):last-child{grid-column:1/-1!important;max-width:220px!important;justify-self:center!important;}
  .smart-action-card .pms-track-actions button:only-child,
  .smart-action-card .smart-actions-compact button:only-child,
  #smartModePanel .smart-actions-compact button:only-child{grid-column:1/-1!important;max-width:220px!important;justify-self:center!important;}
}

/* v213 · CONTROL MUSICAL BAJO + BOTONES COMPACTOS + ORDENACIÓN ESTABLE */
body:not(.mobile-page) #musicControlBox{
  padding:18px 24px!important;
}
body:not(.mobile-page) #smartModePanel{
  margin-top:10px!important;
}
body:not(.mobile-page) .mode-selector button{
  padding:8px 14px!important;
  font-size:15px!important;
  line-height:1!important;
}
body:not(.mobile-page) .smart-layout-split{
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}
body:not(.mobile-page) #smartModePanel .smart-card.smart-card-v2.smart-song-static,
body:not(.mobile-page) .smart-card.smart-card-v2.smart-song-static{
  height:185px!important;
  min-height:185px!important;
  max-height:185px!important;
  padding:13px 16px!important;
}
body:not(.mobile-page) #smartModePanel .smart-card-top,
body:not(.mobile-page) .smart-card-top{
  flex:0 0 24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  margin-bottom:6px!important;
}
body:not(.mobile-page) #smartModePanel .smart-kicker,
body:not(.mobile-page) .smart-kicker{
  font-size:9.5px!important;
  letter-spacing:.12em!important;
  max-width:260px!important;
}
body:not(.mobile-page) #smartModePanel .smart-track-row,
body:not(.mobile-page) .smart-track-row{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:14px!important;
}
body:not(.mobile-page) #smartModePanel .smart-track-art,
body:not(.mobile-page) .smart-track-art{
  width:92px!important;
  height:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  border-radius:15px!important;
}
body:not(.mobile-page) #smartModePanel .smart-song,
body:not(.mobile-page) .smart-song{
  max-height:112px!important;
  gap:6px!important;
}
body:not(.mobile-page) #smartModePanel .smart-song strong,
body:not(.mobile-page) .smart-song strong{
  font-size:clamp(22px,1.8vw,30px)!important;
  line-height:1.02!important;
  max-height:62px!important;
}
body:not(.mobile-page) #smartModePanel .smart-song-artist,
body:not(.mobile-page) .smart-song-artist{
  font-size:clamp(13px,1vw,16px)!important;
  max-height:36px!important;
}
body:not(.mobile-page) .smart-side-stack{
  height:185px!important;
  min-height:185px!important;
  max-height:185px!important;
  grid-template-rows:44px minmax(0,82px) 43px!important;
  gap:8px!important;
}
body:not(.mobile-page) .smart-score-card{
  height:44px!important;
  padding:7px 14px!important;
}
body:not(.mobile-page) .smart-score-card strong{
  font-size:23px!important;
}
body:not(.mobile-page) .smart-info-card,
body:not(.mobile-page) .smart-action-card{
  border-radius:15px!important;
  padding:10px 14px!important;
}
body:not(.mobile-page) .smart-reason-card p{
  font-size:12.5px!important;
  line-height:1.16!important;
  -webkit-line-clamp:2!important;
  margin-top:5px!important;
}
body:not(.mobile-page) .smart-action-card{
  height:43px!important;
  min-height:43px!important;
  max-height:43px!important;
  padding:7px 12px!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions,
body:not(.mobile-page) .smart-action-card .smart-actions-compact{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  max-height:none!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) .smart-action-card .btn-compact{
  flex:0 1 128px!important;
  width:auto!important;
  max-width:128px!important;
  min-width:92px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  padding:4px 9px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
  box-shadow:none!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:only-child{
  max-width:190px!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:nth-child(3):last-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:nth-child(3):last-child{
  flex-basis:128px!important;
}
body:not(.mobile-page) .smart-manual-state{
  min-height:42px!important;
  max-width:680px!important;
  padding:12px 16px!important;
  font-size:14px!important;
}
@media(max-width:900px){
  #musicControlBox{padding:14px 14px!important;}
  .mode-selector{gap:6px!important;}
  .mode-selector button{padding:8px 10px!important;font-size:13px!important;}
  #smartModePanel{margin-top:10px!important;}
  #smartModePanel .smart-card.smart-card-v2.smart-song-static,
  .smart-card.smart-card-v2.smart-song-static{
    height:168px!important;
    min-height:168px!important;
    max-height:168px!important;
    padding:12px!important;
  }
  #smartModePanel .smart-track-row,.smart-track-row{grid-template-columns:72px minmax(0,1fr)!important;gap:10px!important;}
  #smartModePanel .smart-track-art,.smart-track-art{width:72px!important;height:72px!important;min-width:72px!important;max-width:72px!important;border-radius:13px!important;}
  #smartModePanel .smart-song strong,.smart-song strong{font-size:21px!important;max-height:48px!important;}
  #smartModePanel .smart-song-artist,.smart-song-artist{font-size:13px!important;max-height:32px!important;}
  .smart-side-stack{gap:7px!important;}
  .smart-score-card{height:40px!important;padding:7px 12px!important;}
  .smart-score-card strong{font-size:22px!important;}
  .smart-reason-card{padding:10px 12px!important;}
  .smart-reason-card p{font-size:12px!important;line-height:1.15!important;}
  .smart-action-card{height:auto!important;min-height:40px!important;padding:8px 10px!important;}
  .smart-action-card .pms-track-actions,.smart-action-card .smart-actions-compact,#smartModePanel .smart-actions-compact{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .smart-action-card .pms-track-actions button,.smart-action-card .smart-actions-compact button,#smartModePanel .smart-actions-compact button,#smartModePanel .smart-actions-compact .btn-compact{
    min-width:0!important;
    max-width:none!important;
    width:100%!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    padding:4px 6px!important;
    font-size:10px!important;
    border-radius:9px!important;
  }
}

/* v214 · botones de acciones dentro del contenedor, simétricos y mismo tamaño */
body:not(.mobile-page) .smart-side-stack{
  grid-template-rows:44px minmax(0,78px) 54px!important;
  height:184px!important;
  min-height:184px!important;
  max-height:184px!important;
  gap:7px!important;
}
body:not(.mobile-page) .smart-action-card{
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:9px 12px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions,
body:not(.mobile-page) .smart-action-card .smart-actions-compact,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  height:32px!important;
  max-height:32px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) .smart-action-card .btn-compact{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  font-size:11px!important;
  line-height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  grid-column:auto!important;
  justify-self:stretch!important;
  box-shadow:0 6px 14px rgba(117,255,66,.16)!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:only-child,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact button:only-child{
  grid-column:1 / -1!important;
  width:min(100%,260px)!important;
  justify-self:center!important;
}
body:not(.mobile-page) .smart-action-card .pms-track-actions button:nth-child(3):last-child,
body:not(.mobile-page) .smart-action-card .smart-actions-compact button:nth-child(3):last-child,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact button:nth-child(3):last-child{
  grid-column:auto!important;
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
}

@media(max-width:900px){
  .smart-side-stack{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    gap:7px!important;
  }
  .smart-action-card{
    height:auto!important;
    min-height:48px!important;
    max-height:none!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  .smart-action-card .pms-track-actions,
  .smart-action-card .smart-actions-compact,
  #smartModePanel .smart-action-card .smart-actions-compact{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    height:30px!important;
    max-height:30px!important;
  }
  .smart-action-card .pms-track-actions button,
  .smart-action-card .smart-actions-compact button,
  #smartModePanel .smart-action-card .smart-actions-compact button,
  #smartModePanel .smart-action-card .smart-actions-compact .btn-compact{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding:0 6px!important;
    border-radius:10px!important;
    font-size:9.5px!important;
    line-height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    grid-column:auto!important;
    justify-self:stretch!important;
  }
  .smart-action-card .pms-track-actions button:nth-child(3):last-child,
  .smart-action-card .smart-actions-compact button:nth-child(3):last-child,
  #smartModePanel .smart-action-card .smart-actions-compact button:nth-child(3):last-child{
    grid-column:auto!important;
    max-width:none!important;
    justify-self:stretch!important;
  }
  .smart-action-card .pms-track-actions button:only-child,
  .smart-action-card .smart-actions-compact button:only-child,
  #smartModePanel .smart-action-card .smart-actions-compact button:only-child{
    grid-column:1 / -1!important;
    width:min(100%,230px)!important;
    justify-self:center!important;
  }
}

/* =====================================================================
   DASK PMS · v215 mobile auto button visibility
   Fix: en consola DJ móvil, el botón de iniciar/pausar agente quedaba
   oculto por alturas heredadas del smart-card. Se permite crecimiento real.
   ===================================================================== */
body.mobile-page .mobile-card.compact:has(#smartModePanel){
  overflow:visible !important;
}
body.mobile-page #musicControlBox,
body.mobile-page #smartModePanel{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
body.mobile-page #smartModePanel .smart-card,
body.mobile-page #smartModePanel .smart-card.smart-card-v2{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:12px !important;
  display:grid !important;
  gap:8px !important;
}
body.mobile-page #smartModePanel .smart-card-top{
  margin-bottom:2px !important;
}
body.mobile-page #smartModePanel .smart-track-row{
  grid-template-columns:58px minmax(0,1fr) !important;
  gap:9px !important;
  align-items:center !important;
}
body.mobile-page #smartModePanel .smart-track-art{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border-radius:12px !important;
}
body.mobile-page #smartModePanel .smart-song strong{
  font-size:18px !important;
  line-height:1.03 !important;
  max-height:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
body.mobile-page #smartModePanel .smart-song-artist{
  font-size:12.5px !important;
  line-height:1.15 !important;
}
body.mobile-page #smartModePanel .smart-reason,
body.mobile-page #smartModePanel .agent-line,
body.mobile-page #smartModePanel .agent-hint{
  font-size:11px !important;
  line-height:1.25 !important;
  margin:0 !important;
}
body.mobile-page #smartModePanel .pms-track-actions,
body.mobile-page #smartModePanel .smart-actions-compact{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  width:100% !important;
  height:auto !important;
  min-height:32px !important;
  max-height:none !important;
  margin-top:2px !important;
  overflow:visible !important;
}
body.mobile-page #smartModePanel .pms-track-actions button,
body.mobile-page #smartModePanel .smart-actions-compact button,
body.mobile-page #smartModePanel .btn-compact{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 6px !important;
  border-radius:10px !important;
  font-size:10px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
body.mobile-page #smartModePanel .pms-track-actions button:only-child,
body.mobile-page #smartModePanel .smart-actions-compact button:only-child{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}
body.mobile-page #smartModePanel .pms-track-actions button:nth-child(3):last-child,
body.mobile-page #smartModePanel .smart-actions-compact button:nth-child(3):last-child{
  grid-column:auto !important;
  width:100% !important;
  max-width:none !important;
}
@media(max-width:380px){
  body.mobile-page #smartModePanel .smart-track-row{grid-template-columns:52px minmax(0,1fr) !important;}
  body.mobile-page #smartModePanel .smart-track-art{width:52px!important;height:52px!important;min-width:52px!important;}
  body.mobile-page #smartModePanel .pms-track-actions,
  body.mobile-page #smartModePanel .smart-actions-compact{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.mobile-page #smartModePanel .pms-track-actions button:nth-child(3):last-child,
  body.mobile-page #smartModePanel .smart-actions-compact button:nth-child(3):last-child{grid-column:1 / -1 !important;}
}

/* v216 · generador de cartel: editor más estrecho y preview protagonista */
@media (min-width: 980px){
  .poster-generator-grid{
    grid-template-columns:minmax(280px,340px) minmax(0,1fr)!important;
    gap:24px!important;
    align-items:start!important;
  }
  .poster-editor{
    max-width:340px!important;
    width:100%!important;
  }
  .poster-preview-panel{
    min-width:0!important;
    width:100%!important;
  }
  .poster-style-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .poster-style-card{
    min-height:58px!important;
    padding:11px 12px!important;
    border-radius:15px!important;
  }
  .poster-style-card strong{
    margin-top:5px!important;
    font-size:15px!important;
    line-height:1!important;
  }
  .poster-style-card span{
    font-size:9.5px!important;
  }
  .poster-form-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .poster-form-grid input,
  .poster-form-grid select{
    padding:10px 11px!important;
    border-radius:12px!important;
  }
  .poster-step{
    margin:10px 0 8px!important;
  }
  .poster-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .poster-actions button{
    min-width:0!important;
    padding:10px 12px!important;
    font-size:13px!important;
  }
  .poster-preview-wrap{
    min-height:620px!important;
    max-height:none!important;
    padding:18px!important;
    align-items:flex-start!important;
  }
  .poster-canvas-rendered{
    width:min(100%,620px)!important;
    max-width:620px!important;
  }
  .poster-canvas-rendered.poster-format-story{
    width:min(100%,430px)!important;
    max-width:430px!important;
  }
  .poster-canvas-rendered.poster-format-vertical{
    width:min(100%,520px)!important;
    max-width:520px!important;
  }
  .poster-canvas-rendered.poster-format-a4{
    width:min(100%,500px)!important;
    max-width:500px!important;
  }
}

@media (min-width: 1280px){
  .poster-generator-grid{
    grid-template-columns:minmax(290px,350px) minmax(0,1fr)!important;
    gap:28px!important;
  }
  .poster-editor{max-width:350px!important;}
  .poster-canvas-rendered{
    width:min(100%,700px)!important;
    max-width:700px!important;
  }
  .poster-canvas-rendered.poster-format-story{
    width:min(100%,470px)!important;
    max-width:470px!important;
  }
  .poster-canvas-rendered.poster-format-vertical{
    width:min(100%,560px)!important;
    max-width:560px!important;
  }
  .poster-canvas-rendered.poster-format-a4{
    width:min(100%,540px)!important;
    max-width:540px!important;
  }
}

/* DASK bilingual language selector */
.dask-logo-with-language{position:relative!important;overflow:visible!important}
#daskLanguageSwitcher{
  position:absolute;
  left:50%;
  top:calc(100% + 4px);
  transform:translateX(-50%);
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:max-content;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  white-space:nowrap;
}
#daskLanguageSwitcher span{
  color:rgba(255,255,255,.28);
  font:500 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#daskLanguageSwitcher button{
  min-width:0;
  height:auto;
  padding:2px 1px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.48);
  font:600 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .16s ease,opacity .16s ease;
}
#daskLanguageSwitcher button:hover,
#daskLanguageSwitcher button:focus-visible{color:rgba(255,255,255,.9);outline:none}
@media(max-width:640px){
  #daskLanguageSwitcher{top:calc(100% + 3px);gap:3px}
  #daskLanguageSwitcher button{font-size:8px;padding:1px}
  #daskLanguageSwitcher span{font-size:8px}
}

/* ───────── v214 · marca de agua tenue (anti-copia) + acceso legal discreto ───────── */
body::after{
  content:"© DASK ENTERTAINMENT S.L.";
  position:fixed; right:8px; bottom:6px; z-index:40;
  pointer-events:none; user-select:none;
  font:600 9px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,247,239,.13); text-shadow:0 1px 2px rgba(0,0,0,.4);
}
@media print{ body::after{display:none} }

.legal-footer{
  margin:20px auto 12px; padding:12px 14px 0; text-align:center;
  font-size:11px; line-height:1.5; color:rgba(245,247,239,.45);
  border-top:1px solid rgba(245,247,239,.06);
}
.legal-footer a{ color:rgba(245,247,239,.62); text-decoration:none; border-bottom:1px solid rgba(245,247,239,.18); }
.legal-footer a:hover{ color:var(--text); }
.legal-footer .sep{ opacity:.4; margin:0 7px; }

/* páginas legales */
.legal-page{ max-width:760px; margin:0 auto; padding:28px 20px 60px; color:var(--text); }
.legal-page .legal-back{ display:inline-block; margin-bottom:18px; color:var(--muted); text-decoration:none; font-size:13px; }
.legal-page .legal-back:hover{ color:var(--text); }
.legal-page h1{ font-size:24px; margin:0 0 4px; }
.legal-page .legal-updated{ color:var(--muted); font-size:12px; margin:0 0 22px; }
.legal-page h2{ font-size:16px; margin:26px 0 8px; color:var(--yellow); }
.legal-page p, .legal-page li{ color:rgba(245,247,239,.82); font-size:14px; line-height:1.65; }
.legal-page ul{ margin:6px 0 6px 18px; padding:0; }
.legal-page .legal-data{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.7; }
.legal-page a{ color:var(--yellow); }

/* =====================================================================
   v218 · ritmo vertical uniforme en la consola DJ
   + barra de enlace/QR vacía oculta en la sala de invitado
   ===================================================================== */
/* consola DJ (escritorio): misma separación entre TODOS los contenedores
   apilados, para que el primero no quede pegado al segundo. */
body:not(.mobile-page) .dashboard-shell .console-toolbar{margin:0 0 16px !important}
body:not(.mobile-page) .dashboard-shell .guest-now-strip{margin:0 0 16px !important}
body:not(.mobile-page) .dashboard-shell .smart-control-grid{margin:0 0 16px !important}
body:not(.mobile-page) .dashboard-shell .console-board{margin:0 !important}

/* sala invitado: la barra superior de enlace/QR arranca sin contenido visible,
   así que no debe verse como un contenedor vacío. Solo ocupa espacio cuando
   el invitado pulsa "compartir QR". */
.room-shell .console-toolbar{margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
.room-shell .console-toolbar #guestRoomQrWrap{margin:18px 0 6px}

/* =====================================================================
   v219 · panel inteligente (consola DJ): la fila de acciones NUNCA se recorta.
   Se anulan las alturas fijas + overflow:hidden heredadas (v213/v214) que
   cortaban los botones (aceptar / reproducir / sugerencia). Scoped a
   #smartModePanel para ganar en especificidad sobre las reglas previas.
   ===================================================================== */
body:not(.mobile-page) #smartModePanel .smart-side-stack{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  grid-template-rows:auto auto auto !important;
  gap:10px !important;
  align-content:start !important;
}
body:not(.mobile-page) #smartModePanel .smart-action-card{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:10px 12px !important;
  display:block !important;
}
body:not(.mobile-page) #smartModePanel .smart-action-card .pms-track-actions,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:stretch !important;
}
body:not(.mobile-page) #smartModePanel .smart-action-card .pms-track-actions button,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact button,
body:not(.mobile-page) #smartModePanel .smart-action-card .btn-compact{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:40px !important;
  max-height:none !important;
  padding:9px 10px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  border-radius:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body:not(.mobile-page) #smartModePanel .smart-action-card .pms-track-actions button:only-child,
body:not(.mobile-page) #smartModePanel .smart-action-card .smart-actions-compact button:only-child{
  grid-column:1 / -1 !important;
  width:min(100%,260px) !important;
  justify-self:center !important;
}

/* =====================================================================
   v220 · ficha del evento (brief) en la consola DJ
   ===================================================================== */
.event-brief-panel .sub{margin-top:2px}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.brief-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted,#bfc7b9)}
.brief-field select,.brief-field textarea{
  width:100%;font:inherit;font-size:14px;font-weight:600;color:var(--text,#f2f6ec);
  background:rgba(255,255,255,.04);border:1px solid rgba(190,255,67,.18);border-radius:12px;
  padding:10px 12px;outline:none;box-sizing:border-box;
}
.brief-field select:focus,.brief-field textarea:focus{border-color:rgba(190,255,67,.5);box-shadow:0 0 0 3px rgba(190,255,67,.08)}
.brief-field textarea{resize:vertical;min-height:64px;line-height:1.4}
.brief-free{margin-top:14px}
.brief-styles{margin-top:14px}
.brief-styles-label{display:block;font-size:13px;font-weight:700;color:var(--muted,#bfc7b9);margin-bottom:8px}
.brief-chips{display:flex;flex-wrap:wrap;gap:8px}
.brief-chip{
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(190,255,67,.22);background:rgba(255,255,255,.03);color:var(--text,#f2f6ec);
  transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.brief-chip:hover{transform:translateY(-1px)}
.brief-chip.is-on{background:linear-gradient(135deg,#86e23c,#c4ff55);border-color:transparent;color:#0a1207}
@media(max-width:720px){.brief-grid{grid-template-columns:1fr}}

/* =====================================================================
   v220 · panel inteligente: columnas izquierda/derecha a la MISMA altura.
   Tras desbloquear alturas en v219, la derecha quedaba más corta que la
   izquierda. Ahora ambas se igualan y los bordes quedan alineados.
   ===================================================================== */
body:not(.mobile-page) #smartModePanel .smart-layout-split{
  align-items:stretch !important;
}
body:not(.mobile-page) #smartModePanel .smart-card.smart-song-static{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
body:not(.mobile-page) #smartModePanel .smart-side-stack{
  height:100% !important;
  align-content:space-between !important;
}

/* =====================================================================
   v221 · ficha del evento como modal por sala + botón en cada tarjeta
   ===================================================================== */
/* botón "ficha" junto a "abrir sala" en cada tarjeta de sala */
#roomsList .room-card .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#roomsList .room-card .btn-row > .btn-primary,
#roomsList .room-card .btn-row > .btn-secondary{flex:1 1 130px;justify-content:center;text-align:center}

/* modal de la ficha (reusa .credits-modal) — un poco más ancho */
.brief-modal-card{width:min(540px,100%);text-align:left}
.brief-modal-card .section-kicker{margin-bottom:6px}
.brief-modal-card #briefModalRoom{margin:0 0 16px;font-weight:800;color:var(--accent,#baff3d)}
.brief-modal-card .brief-grid{margin-top:6px}

/* ventana de confirmación tras guardar */
.brief-saved{text-align:center;padding:14px 6px 4px}
.brief-saved-check{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:34px;font-weight:900;color:#0a1207;
  background:linear-gradient(135deg,#86e23c,#c4ff55);
  box-shadow:0 12px 30px rgba(132,226,60,.4);
}
.brief-saved h3{margin:0 0 8px}
.brief-saved p{margin:0 0 20px;color:var(--muted,#bfc7b9)}

/* v229 · aviso de petición duplicada en el mismo modal visual */
.pms-modal.is-warning{border-color:rgba(255,190,70,.55);box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,190,70,.12) inset}
.pms-modal.is-warning .pms-modal-check{background:rgba(255,190,70,.14);color:#ffc45c}