/* ===================== Palette (matches manual/assets/css/style.css exactly) ===================== */
:root {
  --bg: #0b0e14;
  --bg-alt: #0f1115;
  --card: #151a24;
  --card-alt: #181b22;
  --border: #232a38;
  --text: #f2f2f2;
  --muted: #8a93a6;
  --accent: #7c4dff;
  --accent-2: #00e5c7;
  --accent-gradient: linear-gradient(90deg, #7c4dff, #00e5c7);
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; font-family:'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg-alt); color:var(--text); }
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px 80px; }
.center { min-height: 100vh; display:flex; align-items:center; justify-content:center; }
.queue-container { width: 100%;max-width: 480px; /*background-color:rgba(22, 27, 34, 0.9) ;  padding: 0 10px; position: fixed; */ }
.card { background:var(--card-alt); border:1px solid var(--border); border-radius:14px; padding: 28px; width: 100%; max-width: 360px; }
h1 { margin-top:0; font-size:1.5rem; display:flex; align-items:center; gap:10px; color: #fff;}
h1 [uk-icon] { color: var(--accent-2); }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
input[type=text] {
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid #2c313c; background:var(--bg-alt); color:#fff;
  font-size:1rem; margin-bottom:14px;
}
.btn { background:var(--accent-gradient); color:#fff; border:none; padding:13px 20px; border-radius:10px; font-weight:600; cursor:pointer; font-size:1rem; width:100%; }
.btn:disabled { background:#3a3f4b; color:var(--muted); }
.error { color:#ff8a8a; margin-top: -6px; margin-bottom: 14px; font-size:.9rem; }
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; position: sticky; top:0; background:var(--bg-alt); padding: 8px 0; }
.badge { background:var(--card-alt); padding:5px 12px; border-radius:999px; font-size:.8rem; }

/* Live connection indicator, styled as a toggle switch rather than a text pill */
.live-toggle {
  position: relative; width:46px; height:26px; border-radius:999px;
  background:#333844; transition: background .25s ease; cursor:default;

  &::after {
    content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#cbd2de; transition: left .25s ease, background .25s ease;
  }

  &.live { 
    background:#1f4d3a; 
    &::after { left: 23px; background:#4ade80;  }
  }
}
.searchbox { position: sticky; top: 48px; background:var(--bg-alt); padding: 6px 0 14px; }
.searchbox-row { display:flex; gap:10px; align-items:center; position: relative; }
.searchbox-row .search-icon {
  position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted);
  background:none; border:none; padding:0; display:flex; align-items:center; cursor:pointer; z-index:1;
}
.searchbox-row .search-icon:hover { color:#fff; }
.searchbox-row .search-icon:disabled { color:var(--muted); cursor:default; }
.searchbox-row input {
  flex:1; padding:14px 16px 14px 42px; border-radius:12px; border:1px solid #2c313c; background:var(--card-alt); color:#fff; font-size:1rem;
}
.icon-btn {
  position: relative; flex-shrink:0; width:48px; height:48px; border-radius:12px;
  background:var(--card-alt); border:1px solid #2c313c; color:#fff; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#favorites-btn {
  border-radius: 50%; background:#e5484d; border-color:#e5484d; color:#fff;
}
.fav-badge {
  position:absolute; top:-6px; right:-6px; background:#fff; color:#e5484d; font-size:.65rem; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* Search/play history suggestions shown while the input is focused with a short/empty query */
#suggestions-slot:not(:empty) {
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; margin-top:10px;
}
.suggest-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:6px 4px; }
.suggest-title:first-child { margin-top:0; }
.suggest-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.chip-btn {
  background:var(--card-alt); border:1px solid #2c313c; color:#cbd2de; padding:7px 14px; border-radius:999px;
  font-size:.85rem; cursor:pointer;
}
.chip-btn:hover { background:#232838; }
.banner { padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:.9rem; }
.banner.warn { background:#4d3a1f; color:#e5a03e; }
.banner.info { background:#1f2f4d; color:#7ea3ff; }
.result-card { position:relative; display:flex; gap:12px; padding: 12px; background:var(--card-alt); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
.result-card img { width:110px; height:auto; border-radius:8px; flex-shrink:0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.result-info { flex:1; min-width:0; padding-right: 44px; }
.result-info .title { font-weight:600; font-size:.95rem; margin-bottom:2px; line-height:1.25; }
.result-info .meta { font-size:.78rem; color:var(--muted); margin-bottom:6px; }
.result-info .desc { font-size:.75rem; color:#7b8494; max-height: 2.4em; overflow:hidden; margin-bottom:8px; }
.heart-btn {
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  background:transparent; border:0 solid #e5484d; color:#e5484d; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;

  &.favorited { background:#e5484d; color:#fff; }
}
.btn.small { width:auto; padding:8px 18px; font-size:.85rem; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.remove-reservation-btn {
  padding:6px; width:28px; height:28px; justify-content:center;
  background:transparent; border:1px solid #2c313c; color:var(--muted);
}
.remove-reservation-btn:hover { border-color:#e5484d; color:#e5484d; }
.section-title {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin: 18px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.queue-item { 
  display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:.88rem; 
  img { width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
}
.now-playing { 
  display:flex; gap:12px; align-items:center; background:var(--card-alt); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom: 18px;
  img { width:80px; height:80px; border-radius:8px; object-fit:cover; flex-shrink:0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
}  
.pill { padding:2px 8px; border-radius:999px; background:#1f4d3a; color:#4ade80; font-size:.7rem; }

/* Reservation confirmation toast - sits above everything (z-index), fades out after 5s */
.reserve-toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-12px);
  z-index: 9999; max-width: 90vw; background: #1f4d3a; color: #eafff2;
  border: 1px solid #2f6e4f; border-radius: 999px; padding: 10px 20px; font-size: .9rem;
  text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.reserve-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Favorites overlay - opened via the heart icon beside search */
.favorites-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.favorites-overlay.visible { opacity: 1; pointer-events: auto; }
.favorites-panel {
  width: 100%; max-width: 480px; max-height: 78vh; background: var(--bg);
  border-radius: 20px 20px 0 0; border: 1px solid var(--border); border-bottom: none;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(12px); transition: transform .25s ease;
}
.favorites-overlay.visible .favorites-panel { transform: translateY(0); }
.favorites-header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px; border-bottom: 1px solid var(--border); font-weight:600;
}
.favorites-header .icon-btn { width:36px; height:36px; font-size:1rem; }
.favorites-list { overflow-y: auto; padding: 14px; }