@keyframes vpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes vpRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vpDrift{from{transform:translateY(102dvh)}to{transform:translateY(-40px)}}
@keyframes vpRingOut{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.45);opacity:0}}
@keyframes vpSpin{to{transform:rotate(360deg)}}
@keyframes vpConfettiFall{0%{transform:translateY(-14px) rotate(0);opacity:1}100%{transform:translateY(210px) rotate(700deg);opacity:0}}

.vp{
  position:fixed;inset:0;z-index:10500;display:none;
  font-family:var(--font-body,'Onest','Manrope',sans-serif);
}
.vp.open{display:flex;align-items:center;justify-content:center;padding:20px;animation:vpFadeIn .18s ease}

.vp-bg{
  position:absolute;inset:0;z-index:0;cursor:pointer;
  background:radial-gradient(120% 90% at 50% -10%,rgba(27,209,94,.12),transparent 55%),rgba(8,10,16,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.vp-particle-field,.vp-particle,.vp-gradient-orb,.vp-orb-1,.vp-orb-2,.vp-orb-3,.vp-input-glow,.vp-shield-ring{display:none}

.vp-close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sunken,#EEF1F8);border:1px solid var(--line,#E4E8F2);
  color:var(--ink-3,#586287);transition:.15s;
}
.vp-close:hover{background:var(--line-2);color:var(--ink,#0B1024)}
.vp-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.vp-close-result{top:-46px;right:0;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff}
.vp-close-result:hover{background:rgba(255,255,255,.26);color:#fff}

.vp-step{
  position:relative;z-index:2;display:none;
  width:100%;max-width:430px;align-items:center;justify-content:center;
}
.vp-step-active{display:flex;animation:vpRise .26s cubic-bezier(.2,.7,.3,1)}

/* ── compact input card ── */
.vp-card{
  position:relative;width:100%;text-align:center;
  background:var(--paper,#fff);
  border:1px solid var(--line,#E4E8F2);
  border-radius:24px;padding:32px 26px 22px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55);
}
.vp-shield-icon{
  width:60px;height:60px;margin:0 auto 16px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft,rgba(27,209,94,.14));color:var(--brand,#1BD15E);
}
.vp-shield-icon svg{width:30px;height:30px;stroke:currentColor;fill:none}

.vp-title{
  font-family:var(--font-display,'Onest',sans-serif);
  font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink,#0B1024);margin-bottom:6px;
}
.vp-subtitle{font-size:13px;color:var(--ink-3,#586287);max-width:330px;margin:0 auto 20px;line-height:1.55}

.vp-field{display:flex;flex-direction:column;gap:10px}
.vp-input-wrap{position:relative;display:flex}
.vp-input-icon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:2;
  width:18px;height:18px;pointer-events:none;color:var(--ink-4,#8791AE);
}
.vp-input-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}
.vp-input{
  flex:1;min-width:0;height:54px;padding:0 16px 0 46px;
  background:var(--sunken,#F4F6FB);
  border:1.5px solid var(--line-2,#D3DAEA);
  border-radius:14px;outline:none;
  font-family:var(--font-mono,'Onest',monospace);
  font-size:16px;font-weight:700;letter-spacing:.14em;
  color:var(--ink,#0B1024);text-transform:uppercase;text-align:center;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.vp-input:focus{border-color:var(--brand,#1BD15E);background:var(--paper,#fff);box-shadow:0 0 0 3px var(--brand-tint,rgba(27,209,94,.15))}
.vp-input::placeholder{color:var(--ink-5,#BFC8DE);letter-spacing:.02em;text-transform:none;font-weight:500}

.vp-verify-btn{
  width:100%;height:52px;padding:0 22px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--brand-grad,linear-gradient(180deg,#1BD15E,#15B84F));
  color:var(--brand-ink,#fff);
  font-family:var(--font-display,'Onest',sans-serif);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 12px 26px -10px rgba(27,209,94,.5);transition:.18s;
}
.vp-verify-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.vp-verify-btn:active{transform:translateY(0)}
.vp-verify-btn:disabled{opacity:.6;pointer-events:none}
.vp-verify-btn-arrow{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vp-verify-btn-loading{display:none;align-items:center;gap:8px}
.vp-spinner{
  width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;
  animation:vpSpin .7s linear infinite;
}

.vp-error{
  display:flex;align-items:center;gap:9px;margin-top:12px;
  background:var(--live-soft,#FDEBEE);
  border:1px solid var(--live-border,rgba(214,40,57,.26));
  border-radius:12px;padding:10px 13px;
  font-size:12.5px;font-weight:600;color:var(--live,#E23048);text-align:left;
  animation:vpRise .18s ease;
}
.vp-error svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none}

.vp-trust{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line,#E4E8F2);
}
.vp-trust-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-3,#586287)}
.vp-trust-item svg{width:14px;height:14px;stroke:var(--brand,#1BD15E);fill:none}
.vp-trust-dot{width:3px;height:3px;border-radius:50%;background:var(--line-3,#C7CEDC)}

.vp-result-container{width:100%;max-width:430px}
.vp-result-card{
  background:var(--paper,#fff);
  border:1px solid var(--line,#E4E8F2);
  border-radius:var(--r-3xl,32px);overflow:hidden;
  box-shadow:var(--sh-3);animation:vpRise .28s ease;
}
.vp-result-banner{
  position:relative;text-align:center;padding:30px 22px 24px;overflow:hidden;
  border-bottom:1px solid var(--line,#E4E8F2);
  background:var(--paper-2,#F8FAFE);
}
.vp-result-banner::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink-5)}
.vp-result-banner.won::before{background:var(--brand-grad)}
.vp-result-banner.lost::before{background:var(--live)}
.vp-result-banner.running::before{background:var(--gold)}
.vp-result-banner.cashed_out::before{background:var(--info)}
.vp-result-banner.void::before{background:var(--ink-4)}
.vp-result-emoji{font-size:36px;margin-bottom:8px}
.vp-result-label{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);margin-bottom:6px;
}
.vp-result-amount{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:30px;font-weight:800;letter-spacing:-.04em;
  color:var(--ink,#0B1024);font-variant-numeric:tabular-nums;
}
.vp-result-banner.won .vp-result-amount{color:var(--brand-600,#3A26E0)}
.vp-result-banner.lost .vp-result-amount{color:var(--live,#E23048);font-size:21px}
.vp-result-banner.running .vp-result-amount{color:var(--gold,#9A6412)}
.vp-result-banner.cashed_out .vp-result-amount{color:var(--info,#2354C7)}
[data-theme="dark"] .vp-result-banner.won .vp-result-amount{color:var(--brand-400)}

.vp-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vp-confetti-piece{position:absolute;border-radius:2px;animation:vpConfettiFall 1.9s ease forwards}

.vp-ticket-info{padding:6px 20px;border-bottom:1px solid var(--line,#E4E8F2)}
.vp-ticket-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px dotted var(--line-2,#D3DAEA);font-size:12.5px;
}
.vp-ticket-row:last-child{border-bottom:none}
.vp-ticket-row-label{color:var(--ink-3,#586287);font-weight:500}
.vp-ticket-row-value{
  font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;color:var(--ink,#0B1024);
  font-variant-numeric:tabular-nums;text-align:right;word-break:break-all;
}
.vp-ticket-row-value.cyan{color:var(--info,#2354C7);letter-spacing:.1em}
.vp-ticket-row-value.gold{color:var(--gold,#9A6412)}
.vp-ticket-row-value.green{color:var(--brand-600,#3A26E0)}
[data-theme="dark"] .vp-ticket-row-value.green{color:var(--brand-400)}

.vp-selections{padding:16px 20px 8px;max-height:320px;overflow-y:auto;scrollbar-width:thin}
.vp-sel-title{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);margin-bottom:11px;
}
.vp-sel{
  position:relative;
  background:var(--paper-2,#F8FAFE);
  border:1px solid var(--line,#E4E8F2);
  border-radius:var(--r-xl,20px);padding:12px 13px 12px 16px;margin-bottom:9px;
}
.vp-sel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2.5px;border-radius:0 2px 2px 0;background:var(--ink-5)}
.vp-sel:has(.vp-sel-badge.won)::before{background:var(--brand)}
.vp-sel:has(.vp-sel-badge.lost)::before{background:var(--live)}
.vp-sel:has(.vp-sel-badge.running)::before{background:var(--gold)}
.vp-sel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.vp-sel-match{font-size:13px;font-weight:600;color:var(--ink,#0B1024);letter-spacing:-.015em}
.vp-sel-tournament{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:9px;color:var(--ink-4,#8791AE);margin-top:3px;letter-spacing:.04em;
}
.vp-sel-badge{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-xs,6px);flex-shrink:0;
  background:var(--sunken,#EEF1F8);color:var(--ink-3,#586287);
}
.vp-sel-badge.won{background:var(--brand-soft);color:var(--brand-600)}
.vp-sel-badge.lost{background:var(--live-soft);color:var(--live)}
.vp-sel-badge.running{background:var(--gold-soft);color:var(--gold)}
[data-theme="dark"] .vp-sel-badge.won{color:var(--brand-400)}
.vp-sel-details{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vp-sel-detail{min-width:0}
.vp-sel-detail-label{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);margin-bottom:3px;
}
.vp-sel-detail-value{
  font-size:11.5px;font-weight:600;color:var(--ink-2,#2C3450);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.vp-result-actions{display:flex;gap:9px;padding:16px 20px 20px}
.vp-action-btn{
  flex:1;height:44px;border-radius:var(--r-lg,16px);
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-size:13px;font-weight:600;letter-spacing:-.01em;transition:.16s;
}
.vp-action-btn.primary{
  background:var(--brand-grad);color:var(--brand-ink,#fff);box-shadow:var(--sh-brand);
}
.vp-action-btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.vp-action-btn.ghost{
  background:var(--paper,#fff);color:var(--ink-2,#2C3450);
  border:1px solid var(--line-2,#D3DAEA);box-shadow:var(--sh-1);
}
.vp-action-btn.ghost:hover{color:var(--ink);border-color:var(--line-3);background:var(--sunken)}

@media(max-width:520px){
  .vp-input-wrap{flex-direction:column}
  .vp-verify-btn{width:100%}
  .vp-sel-details{grid-template-columns:repeat(2,1fr)}
  .vp-title{font-size:21px}
  .vp-step{padding:24px 14px}
}



@keyframes scwPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes scwDot{0%,80%,100%{transform:scale(.7);opacity:.35}40%{transform:scale(1);opacity:1}}

.scw{
  position:fixed;right:18px;bottom:calc(var(--dock-h,62px) + 53px + env(safe-area-inset-bottom));
  z-index:800 !important;font-family:var(--font-body,'Manrope',sans-serif);
}
@media(min-width:881px){.scw{bottom:22px}}

.scw-fab{
  position:relative;width:52px;height:52px;border-radius:var(--r-2xl,26px);
  background:var(--brand-grad,linear-gradient(135deg,#6152FF,#3A26E0));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-brand,0 8px 22px -6px rgba(10,154,79,.44));
  transition:.18s;
}
.scw-fab:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.05)}
.scw-fab-icon svg,.scw-fab-close svg{width:21px;height:21px;stroke:var(--brand-ink,#fff);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scw.chat-open .scw-fab-icon{display:none}
.scw.chat-open .scw-fab-close{display:flex!important}
.scw-fab-pulse{display:none}
.scw-fab-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill,999px);
  background:var(--live,#E23048);color:#fff;
  font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--canvas,#EEF1F8);
}

.scw-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:min(378px,calc(100vw - 28px));
  height:min(560px,calc(100dvh - 160px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--paper,#fff);
  border:1px solid var(--line,#E4E8F2);
  border-radius:var(--r-2xl,26px);
  box-shadow:var(--sh-3);
}
.scw-panel.open{display:flex;animation:scwPop .22s ease}

.scw-header{
  display:flex;align-items:center;gap:12px;padding:13px 15px;flex-shrink:0;
  background:var(--paper-2,#F8FAFE);
  border-bottom:1px solid var(--line,#E4E8F2);
}
.scw-header-avatar{
  position:relative;width:38px;height:38px;border-radius:var(--r-lg,16px);flex-shrink:0;
  background:var(--brand-grad);color:var(--brand-ink,#fff);
  display:flex;align-items:center;justify-content:center;
}
.scw-header-avatar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.scw-header-avatar-dot,.scw-online-dot{
  position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
  background:var(--brand,#8A5CFF);border:2px solid var(--paper-2,#F8FAFE);
}
.scw-header-status .scw-online-dot,.scw-mobile-status .scw-online-dot{position:static;border:none;width:6px;height:6px}
.scw-header-info{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.scw-header-name{
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-size:13.5px;font-weight:700;color:var(--ink,#0B1024);letter-spacing:-.02em;
}
.scw-header-status{
  display:flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-600,#3A26E0);
}
[data-theme="dark"] .scw-header-status{color:var(--brand-400)}
.scw-header-close{
  width:30px;height:30px;border-radius:var(--r-md,12px);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-4,#8791AE);transition:.14s;
}
.scw-header-close:hover{background:var(--sunken,#EEF1F8);color:var(--ink)}
.scw-header-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.scw-mobile-bar,.scw-mobile-back,.scw-mobile-title,.scw-mobile-status{display:none}

.scw-messages{
  flex:1;overflow-y:auto;scrollbar-width:thin;
  padding:16px 14px;display:flex;flex-direction:column;gap:8px;
  background:var(--canvas,#EEF1F8);
}
.scw-msg{
  max-width:82%;padding:10px 13px;
  font-size:13px;line-height:1.55;word-break:break-word;
  animation:scwPop .18s ease;
}
.scw-msg.user{
  align-self:flex-end;
  background:var(--brand-grad);color:var(--brand-ink,#fff);
  border-radius:14px 14px 4px 14px;font-weight:500;
  box-shadow:var(--sh-1);
}
.scw-msg.admin{
  align-self:flex-start;
  background:var(--paper,#fff);color:var(--ink-2,#2C3450);
  border:1px solid var(--line,#E4E8F2);
  border-radius:14px 14px 14px 4px;
  box-shadow:var(--sh-1);
}
.scw-msg-time{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:8.5px;font-weight:600;letter-spacing:.04em;
  opacity:.55;margin-top:4px;text-align:right;
}
.scw-msg-date-sep{
  align-self:center;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);background:var(--paper,#fff);
  border:1px solid var(--line);
  padding:3px 12px;border-radius:var(--r-pill,999px);margin:8px 0;
}

.scw-welcome{text-align:center;padding:26px 14px;margin:auto 0}
.scw-welcome-icon{font-size:30px;margin-bottom:11px}
.scw-welcome-title{
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-size:15.5px;font-weight:700;color:var(--ink,#0B1024);margin-bottom:6px;letter-spacing:-.03em;
}
.scw-welcome-text{font-size:12.5px;color:var(--ink-3,#586287);line-height:1.65;max-width:270px;margin:0 auto 17px}
.scw-quick-actions{display:flex;flex-direction:column;gap:7px;max-width:250px;margin:0 auto}
.scw-quick-btn{
  padding:10px 14px;border-radius:var(--r-lg,16px);
  background:var(--paper,#fff);border:1px solid var(--line-2,#D3DAEA);
  font-size:12.5px;font-weight:500;color:var(--ink-2,#2C3450);
  transition:.15s;text-align:left;box-shadow:var(--sh-1);
}
.scw-quick-btn:hover{border-color:var(--brand);color:var(--brand-600);background:var(--brand-soft)}

.scw-typing{display:flex;align-items:center;gap:9px;padding:8px 16px;flex-shrink:0;font-size:11px;color:var(--ink-4)}
.scw-typing-dots{display:flex;gap:4px}
.scw-typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:scwDot 1.2s infinite}
.scw-typing-dots span:nth-child(2){animation-delay:.15s}
.scw-typing-dots span:nth-child(3){animation-delay:.3s}

.scw-input-area{
  padding:11px 12px calc(11px + env(safe-area-inset-bottom)/2);flex-shrink:0;
  background:var(--paper,#fff);
  border-top:1px solid var(--line,#E4E8F2);
}
.scw-input-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--paper,#fff);
  border:1px solid var(--line-2,#D3DAEA);
  border-radius:var(--r-xl,20px);padding:5px 5px 5px 14px;
  transition:border-color .15s,box-shadow .15s;
}
.scw-input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.scw-input{
  flex:1;min-width:0;height:36px;background:transparent;border:none;outline:none;
  font-size:13px;color:var(--ink,#0B1024);
}
.scw-input::placeholder{color:var(--ink-5,#BFC8DE)}
.scw-send-btn{
  width:36px;height:36px;border-radius:var(--r-lg,16px);flex-shrink:0;
  background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.scw-send-btn:hover{filter:brightness(1.06)}
.scw-send-btn svg{width:15px;height:15px;fill:var(--brand-ink,#fff)}
.scw-powered{
  text-align:center;padding-top:8px;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-5,#BFC8DE);
}

@media(max-width:520px){
  .scw{right:13px}
  .scw-panel{
    position:fixed;inset:0;width:100%;height:100dvh;
    border-radius:0;border:none;bottom:0;right:0;
  }
  .scw-header{display:none}
  .scw-mobile-bar{
    display:flex;align-items:center;gap:12px;flex-shrink:0;
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
    background:var(--paper,#fff);border-bottom:1px solid var(--line);
  }
  .scw-mobile-back{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:var(--r-md,12px);
    background:var(--sunken);color:var(--ink-2);flex-shrink:0;
  }
  .scw-mobile-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .scw-mobile-title{
    display:block;flex:1;
    font-family:var(--font-display,'Bricolage Grotesque',sans-serif);font-size:15px;font-weight:700;
    color:var(--ink);letter-spacing:-.02em;
  }
  .scw-mobile-status{
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:9px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--brand-600);
  }
  .scw-input-area{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
}

/* ═══════════════════════════════════════════════════════════════════
   STRIKA — verify portal & support chat
   The verify portal is where someone checks a slip is genuine, so it
   should feel like the ticket being held up to the light: volt field,
   brass on the code itself, a result that reads as a stamp.
   ═══════════════════════════════════════════════════════════════════ */

/* Ambient field. The old orbs were green blooms on a light page; volt
   on near-black reads as the "inspection" moment the screen is for. */
.vp{background:var(--canvas,#EEF1F8)}
.vp-gradient-orb{opacity:.5;filter:blur(70px)}
.vp-orb-1{background:radial-gradient(circle,rgba(10,154,79,.55),transparent 70%)}
.vp-orb-2{background:radial-gradient(circle,rgba(255,199,44,.32),transparent 70%)}
.vp-orb-3{background:radial-gradient(circle,rgba(245,196,81,.30),transparent 70%)}

.vp-title{
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  letter-spacing:-.035em;
}

/* The code field is the hero. Mono, wide tracking, dashed stock —
   it should look like the thing printed on the slip. */
.vp-input{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.vp-input-wrap{
  border-style:dashed;
  border-color:var(--line-3,#BFC8DE);
  border-radius:var(--r-lg,16px);
}
.vp-input-wrap:focus-within{
  border-style:solid;
  border-color:var(--volt,#8A5CFF);
}
.vp-input-glow{background:radial-gradient(circle,var(--volt-tint,rgba(10,154,79,.07)),transparent 70%)}

.vp-verify-btn{
  background:var(--volt-grad,linear-gradient(135deg,#6152FF,#3A26E0));
  box-shadow:var(--sh-volt,0 10px 26px -8px rgba(10,154,79,.44));
  border-radius:var(--r-md,12px);
}
.vp-shield-ring{border-color:var(--volt-border,rgba(10,154,79,.26))}

/* Support chat: the launcher sits above the docked ticket stub and the
   bottom nav, never on top of them. */
/* The launcher lives inside .scw, which is already position:fixed — so
   offsetting the button itself double-counts and lands it mid-screen.
   Position the container and leave the button where it sits. */
.scw{
  /* Clear of the bottom nav AND the docked ticket stub, so it never
     sits on a card's action row. */
  bottom:calc(env(safe-area-inset-bottom) + var(--bottomnav-h,62px) + 86px);
  right:14px;
}
/* Shrink on phones — a 60px circle over a 360px column is a lot of
   screen for something you rarely tap. */
@media(max-width:599px){
  .scw-fab{width:48px;height:48px}
  .scw-fab svg{width:22px;height:22px}
}
.scw-fab{
  background:var(--volt-grad,linear-gradient(135deg,#6152FF,#3A26E0));
  box-shadow:var(--sh-volt,0 10px 26px -8px rgba(10,154,79,.44));
}
.scw-fab-pulse{background:var(--volt,#8A5CFF)}

@media(min-width:900px){
  /* No bottom nav or docked stub on desktop — back to the corner. */
  .scw{bottom:24px;right:24px}
}

/* A sheet is open — the launcher would float over it (it sits at
   z-index 800, sheets at 100) and cover the summary rows. Stand down
   until the sheet closes. openOverlay()/closeAll() toggle .no-scroll. */
body.no-scroll .scw{opacity:0;pointer-events:none;transform:scale(.85)}
.scw{transition:opacity var(--t-base,.16s),transform var(--t-base,.16s)}

.scw-panel{
  border-radius:var(--r-2xl,26px);
  border:1px solid var(--line,#E4E8F2);
  box-shadow:var(--sh-3,0 24px 60px -18px rgba(11,16,36,.34));
}
.scw-header{background:var(--volt-grad,linear-gradient(135deg,#6152FF,#3A26E0))}
.scw-send-btn{
  background:var(--volt,#8A5CFF);
  border-radius:var(--r-md,12px);
}
.scw-online-dot{background:var(--win,#0B9E63)}

/* Full-screen on phones — a floating panel on a 360px viewport is a
   worse experience than just taking the screen. */
@media(max-width:599px){
  .scw-panel{
    inset:0;width:100%;height:100dvh;max-height:none;
    border-radius:0;border:none;
  }
}