:root{
  --ga-sp-accent:#ec4899;
  --ga-sp-accent-100:#fde7f2;
  --ga-sp-accent-200:#fcd7e9;
}
/* Reset/scope */
.ga-sp{font-size:14px; line-height:1.2; --ga-sp-rounded:12px}
.ga-sp, .ga-sp * { box-sizing: border-box; }
.ga-sp a, .ga-sp button { all: unset; display:inline-block; cursor:pointer; }
.ga-sp a{ color: var(--ga-sp-accent); text-decoration:none }
.ga-sp a:focus-visible, .ga-sp button:focus-visible{outline:2px solid var(--ga-sp-accent); outline-offset:2px; border-radius:10px}
.ga-sp button{ background: var(--ga-sp-accent); color:#fff; padding:6px 10px; border-radius:9px; font-weight:700; }
.ga-sp button:hover{filter:brightness(0.95)}
.ga-sp button:active{transform:translateY(1px)}
.ga-sp .ga-sp-code{ all: initial; font-family:monospace; font-size:12px; background:var(--ga-sp-accent-100); border:1px solid var(--ga-sp-accent-200); border-radius:8px; padding:4px 8px; display:inline-block; color:#111827 }

.ga-sp{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;max-width:100%}

/* Compact item */
.ga-sp-item{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--ga-sp-accent-200);border-radius:var(--ga-sp-rounded);padding:8px 10px;position:relative;box-shadow:0 6px 18px rgba(236,72,153,.06);max-width:100%}
.ga-sp-badge{color:var(--ga-sp-accent);background:var(--ga-sp-accent-100);border:1px solid var(--ga-sp-accent-200);border-radius:10px;padding:4px 6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.ga-sp-badge svg{display:block}
.ga-sp-content{min-width:140px}
.ga-sp-title{font-weight:700; font-size:14px}
.ga-sp-sub{font-size:12px;color:#6b7280}
.ga-sp-note{font-size:11px;color:#9ca3af;margin-top:2px}
.ga-sp-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ga-sp-link{color:var(--ga-sp-accent);padding:6px 10px;border-radius:9px;border:1px solid var(--ga-sp-accent-200);background:#fff;font-weight:700}
.ga-sp-link:hover{background:var(--ga-sp-accent-100)}
.ga-sp-countdown{position:absolute;right:10px;bottom:8px;font-size:11px;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:2px 6px;display:none}

/* Display modes */
.ga-sp-display-grid .ga-sp-item{flex:1 1 320px}
.ga-sp-display-grid2 .ga-sp-item{flex:1 1 calc(50% - 10px)}
.ga-sp-display-slider{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory}
.ga-sp-display-slider .ga-sp-item{flex:0 0 78%;scroll-snap-align:center}
@media (min-width: 900px){
  .ga-sp-display-slider .ga-sp-item{flex:0 0 40%}
}
/* Template layout locks */
.ga-sp-lock-grid2 .ga-sp-item{flex:1 1 calc(50% - 10px) !important}
.ga-sp-lock-full .ga-sp-item{flex:1 1 100% !important}

/* Templates */
.ga-sp--chip .ga-sp-item{border-radius:999px;background:var(--ga-sp-accent-100);border:none;box-shadow:none}
.ga-sp--chip .ga-sp-badge{background:#fff}
.ga-sp--ticket .ga-sp-item{background:linear-gradient(135deg,#fff,#fff0f7);border:1px dashed var(--ga-sp-accent)}
.ga-sp--ticket .ga-sp-item:before, .ga-sp--ticket .ga-sp-item:after{content:""; position:absolute; top:50%; width:12px; height:12px; background:#fff; border:1px dashed var(--ga-sp-accent); border-radius:50%; transform:translateY(-50%);}
.ga-sp--ticket .ga-sp-item:before{left:-6px} .ga-sp--ticket .ga-sp-item:after{right:-6px}
.ga-sp--ribbons .ga-sp-item{background:linear-gradient(180deg,#fff, #fff0f7)}
.ga-sp--list .ga-sp-item{width:100%}
.ga-sp--banner .ga-sp-item{width:100%;padding:14px 16px;background:linear-gradient(90deg,#fff0f7,#ffffff)}
.ga-sp--pills .ga-sp-item{border:none;background:var(--ga-sp-accent-100);padding:6px 10px;border-radius:999px;box-shadow:none}
.ga-sp--pills .ga-sp-badge{background:#fff}

/* Responsive */
@media (max-width: 540px){
  .ga-sp{gap:8px}
  .ga-sp-display-grid .ga-sp-item{flex:1 1 100%}
  .ga-sp-display-grid2 .ga-sp-item{flex:1 1 calc(50% - 8px)}
  .ga-sp--banner .ga-sp-item{padding:12px 14px}
}

/* Bottom sheet */
#ga-sp-sheet{position:fixed;left:0;right:0;bottom:-100%;height:70vh;z-index:999997;backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background:rgba(255,255,255,0.28); border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -10px 30px rgba(0,0,0,.25); transition:bottom .35s ease; display:flex;flex-direction:column;}
#ga-sp-sheet.show{bottom:0}
#ga-sp-sheet .ga-sp-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
#ga-sp-sheet .ga-sp-sheet-title{font-weight:700}
#ga-sp-sheet .ga-sp-sheet-close{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);border-radius:10px;padding:6px 10px;cursor:pointer}
#ga-sp-sheet .ga-sp-sheet-body{overflow:auto;padding:8px 12px}
#ga-sp-sheet .ga-sp-list .ga-sp-item{width:100%}
#ga-sp-sheet .ga-sp-apply{all: initial; display:inline-block; background:var(--ga-sp-accent); color:#fff; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer;}

/* Right drawer */
#ga-sp-overlay{position:fixed;inset:0;background:rgba(15,23,42,.25);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:999996}
#ga-sp-overlay.show{opacity:1;pointer-events:auto}
#ga-sp-drawer{position:fixed;right:-420px;top:0;height:100vh;width:380px;z-index:999997;backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background:rgba(255,255,255,0.55); box-shadow:-10px 0 30px rgba(0,0,0,.25); transition:right .35s ease; display:flex;flex-direction:column}
#ga-sp-drawer.show{right:0}
#ga-sp-drawer .ga-sp-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px}
#ga-sp-drawer .ga-sp-sheet-body{overflow:auto;padding:10px 12px}
#ga-sp-drawer .ga-sp-apply{all: initial; display:inline-block; background:var(--ga-sp-accent); color:#fff; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer;}

/* Toast */
.ga-sp-toast{position:fixed;right:16px;bottom:24px;color:#0f172a;padding:10px 14px;border-radius:14px;z-index:999999;font-weight:600;opacity:0;transform:translateY(10px);transition:all .25s ease;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.55); box-shadow:0 10px 30px rgba(0,0,0,.15)}
.ga-sp-toast.show{opacity:1;transform:translateY(0)}

/* Confetti canvas */
#ga-sp-confetti{position:fixed;inset:0;pointer-events:none;z-index:999998}


/* Actions mobile */
@media (max-width: 540px){
  .ga-sp-actions{width:100%;justify-content:flex-start;margin-top:6px}
  .ga-sp-actions .ga-sp-apply{flex:1 1 auto;text-align:center}
}