/* =========================================================
   LPQ DPmarket Skin (Bootstrap 5.2.3)
   Primary: #000424
   Premium particles: minimal, performant
   ========================================================= */

:root{
  --bs-primary: #000424;
  --bs-primary-rgb: 0, 4, 36;

  --lpq-gap: 18px;
  --lpq-size: 58px;
  --lpq-z: 999999;

  --lpq-glass: rgba(255,255,255,.86);
  --lpq-border: rgba(0,0,0,.10);
  --lpq-radius: 22px;
}

/* fixed: true bottom-left */
.lpq-dpm{
  position: fixed;
  left: var(--lpq-gap);
  bottom: var(--lpq-gap);
  z-index: var(--lpq-z);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------------- FAB ---------------- */
.lpq-dpm__fab{
  width: var(--lpq-size);
  height: var(--lpq-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  background: var(--bs-primary);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lpq-dpm__fab:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
}

.lpq-dpm__fab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .20), 0 22px 70px rgba(0,0,0,.34);
}

.lpq-dpm__fabIcon{ font-size: 20px; line-height: 1; }

.lpq-dpm__fab::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  background: conic-gradient(
    from 180deg,
    rgba(120,190,255,.35),
    rgba(255,255,255,.06),
    rgba(120,190,255,.25)
  );
  z-index:-1;
}

@media (prefers-reduced-motion: no-preference){
  .lpq-dpm__fab::before{ animation: lpqSpin 3.6s linear infinite; }
  @keyframes lpqSpin{ to{ transform: rotate(360deg);} }
}

/* chip */
.lpq-dpm__chip{
  position:absolute;
  top:-8px;
  right:-10px;
  font-size:11px;
  font-weight:800;
  color:#fff;
  padding:6px 9px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* ---------------- Bubble (opens right) ---------------- */
.lpq-dpm__bubble{
  position:absolute;
  bottom: 4px;
  left: calc(var(--lpq-size) + 14px);
  width: min(390px, calc(100vw - 140px));
  opacity: 0;
  transform: translateY(10px) scale(.985);
  pointer-events: none;
  transition: opacity .20s ease, transform .20s ease;
}

.lpq-dpm[data-open="1"] .lpq-dpm__bubble{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* glass card */
.lpq-dpm__glass{
  position: relative;
  padding: 14px 14px 12px;
  border-radius: var(--lpq-radius);
  background: var(--lpq-glass);
  border: 1px solid var(--lpq-border);
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* subtle blobs background like dpmarket */
.lpq-dpm__glass::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(closest-side, rgba(0,194,255,.20), transparent 65%) 18% 22%/42% 42% no-repeat,
    radial-gradient(closest-side, rgba(96,130,255,.16), transparent 68%) 78% 30%/46% 46% no-repeat,
    radial-gradient(closest-side, rgba(0,4,36,.10), transparent 70%) 60% 88%/60% 60% no-repeat;
  pointer-events:none;
}

/* premium gradient hairline */
.lpq-dpm__glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--lpq-radius);
  padding:1px;
  background: linear-gradient(135deg,
    rgba(0,194,255,.22),
    rgba(0,0,0,.06),
    rgba(var(--bs-primary-rgb), .18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* close */
.lpq-dpm__x{
  position:absolute;
  top:10px;
  right:10px;
  padding:0;
  text-decoration:none;
  color: rgba(11,13,18,.55);
  font-size:14px;
  line-height:1;
}
.lpq-dpm__x:hover{ color: rgba(11,13,18,.85); }

/* kicker */
.lpq-dpm__kicker{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(11,13,18,.55);
  letter-spacing: .2px;
}
.lpq-dpm__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12);
}

/* text */
.lpq-dpm__title{
  margin-top: 8px;
  font-weight: 850;
  color: #0b0d12;
  line-height: 1.12;
  font-size: 14.8px;
  padding-right: 18px;
}
.lpq-dpm__sub{
  margin-top: 6px;
  color: rgba(11,13,18,.66);
  font-size: 13px;
  line-height: 1.35;
}
.lpq-dpm__actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 12px;
}

/* tail */
.lpq-dpm__tail{
  position:absolute;
  left:-7px;
  bottom:18px;
  width:14px;
  height:14px;
  background: var(--lpq-glass);
  border-left: 1px solid var(--lpq-border);
  border-bottom: 1px solid var(--lpq-border);
  transform: rotate(45deg);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.10));
}

/* auto-flip */
.lpq-dpm.lpq--flip .lpq-dpm__bubble{ left:auto; right: calc(var(--lpq-size) + 14px); }
.lpq-dpm.lpq--flip .lpq-dpm__tail{
  left:auto;
  right:-7px;
  border-left:none;
  border-bottom:none;
  border-right: 1px solid var(--lpq-border);
  border-top: 1px solid var(--lpq-border);
  transform: rotate(45deg);
}

/* ---------------- Premium particles (minimal) ---------------- */
.lpq-dpm__particles{
  position: absolute;
  inset: -20px;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--lpq-radius);
  opacity: 0;
}

.lpq-dpm[data-open="1"] .lpq-dpm__particles{ opacity: 1; }

.lpq-dpm__particles::before,
.lpq-dpm__particles::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 90%, rgba(0,194,255,.20), transparent 42%),
    radial-gradient(circle at 30% 82%, rgba(96,130,255,.16), transparent 44%),
    radial-gradient(circle at 52% 92%, rgba(0,4,36,.14), transparent 46%),
    radial-gradient(circle at 74% 84%, rgba(0,194,255,.12), transparent 45%),
    radial-gradient(circle at 86% 92%, rgba(96,130,255,.12), transparent 45%),
    radial-gradient(circle at 60% 78%, rgba(255,255,255,.10), transparent 40%);
  filter: blur(1px);
  transform: translateY(18px) scale(.98);
  opacity: 0;
}

/* replay trigger */
.lpq-dpm.lpq--spark .lpq-dpm__particles::before{ animation: lpqSparkA 950ms ease-out forwards; }
.lpq-dpm.lpq--spark .lpq-dpm__particles::after{  animation: lpqSparkB 1150ms ease-out forwards; }

@media (prefers-reduced-motion: reduce){
  .lpq-dpm__particles{ display:none; }
  .lpq-dpm__particles::before,
  .lpq-dpm__particles::after{ animation: none !important; }
}

@keyframes lpqSparkA{
  0%   { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(2px); }
  25%  { opacity: .90; }
  70%  { opacity: .30; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.02); filter: blur(8px); }
}

@keyframes lpqSparkB{
  0%   { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(2px); }
  30%  { opacity: .80; }
  75%  { opacity: .28; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.04); filter: blur(9px); }
}

/* mobile */
@media (max-width: 420px){
  :root{ --lpq-gap: 14px; --lpq-size: 54px; }
  .lpq-dpm__bubble{ width: min(350px, calc(100vw - 120px)); }
}