:root{
  --bg:#0E0F14;
  --card:#121826;
  --border:rgba(148,163,184,.14);
  --text:#EDEFF2;
  --muted:rgba(237,239,242,.68);
  --cyan:#00CFFF;
  --alert:#FF5A3C;
}

html,body{background:var(--bg);color:var(--text);}

/* Cards */
.qp-card{
  position: relative; /* safety voor stacking/klikbaarheid */
  background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(18,24,38,.70));
  border:1px solid var(--border);
  border-radius: 18px;
}

.qp-glow:hover{
  box-shadow: 0 0 0 1px rgba(0,207,255,.18), 0 12px 30px rgba(0,207,255,.08);
}

/* Pulse dot */
.qp-pulse-dot{
  width:10px;height:10px;border-radius:999px;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,207,255,.45);
  animation:qpPulse 1.6s infinite;
}
@keyframes qpPulse{
  0%{box-shadow:0 0 0 0 rgba(0,207,255,.35)}
  70%{box-shadow:0 0 0 12px rgba(0,207,255,0)}
  100%{box-shadow:0 0 0 0 rgba(0,207,255,0)}
}

/* Star button */
.qp-star{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.qp-star:hover{ background:rgba(255,255,255,.08); }

/* Toast */
.qp-toast-wrap{
  position: fixed;
  right: 14px;
  top: 76px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qp-toast{
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,24,38,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.qp-toast-title{ font-size: 13px; font-weight: 700; color: rgba(237,239,242,.92); }
.qp-toast-sub{ margin-top: 2px; font-size: 12px; color: rgba(237,239,242,.62); }

/* Modal */
.qp-hidden{ display:none !important; }
.qp-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index:60;
}
.qp-modal{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 28px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(14,15,20,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:61;
}

/* Chips bar */
.qp-chipsbar{
  position: sticky;
  top: 64px;
  z-index: 25;
  margin: 10px 0 14px;
  padding: 10px 0;
  background: rgba(14,15,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (min-width: 768px){
  .qp-chipsbar{
    position: static;
    background: transparent;
    backdrop-filter:none;
    border-bottom:none;
    margin:0 0 14px;
    padding:0;
  }
}

.qp-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(237,239,242,.85);
  font-size:12px;
}
.qp-chip button{
  width:20px;height:20px;line-height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:rgba(237,239,242,.75);
}
.qp-chip button:hover{ background:rgba(255,255,255,.10); }

/* Mobile mini header */
.qp-minihead{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:70;
  width:min(420px, calc(100vw - 24px));
}
.qp-minihead-inner{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,15,20,.72);
  backdrop-filter: blur(10px);
}
.qp-mini-btn{
  flex:1;
  padding:10px 0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(237,239,242,.82);
}
.qp-mini-btn:hover{ background:rgba(255,255,255,.10); }
@media (min-width: 768px){
  .qp-minihead{ display:none !important; }
}

/* Nicer scroll area */
.qp-scroll{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.qp-scroll::-webkit-scrollbar{ height:10px; width:10px; }
.qp-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
.qp-scroll::-webkit-scrollbar-track{ background: transparent; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .qp-pulse-dot{ animation:none !important; }
}