/*
 * ultra.css — Second Spot "Aurora Glass" layer
 * Loads after premium.css on every customer page. Pure CSS, system fonts only (CSP-safe),
 * no markup dependencies. Remove the <link> to revert to the previous look.
 *
 *   porcelain  #FBF7FF   page          aubergine  #1D0E2B   ink / footer
 *   ultraviolet #4F2EF2  ┐             glass      rgba(255,255,255,.72)
 *   orchid     #B91FD1   ├ brand glow  line       rgba(120,60,170,.16)
 *   rose       #FF2D78   ┘
 */
:root{
  --ux-bg:#FBF7FF; --ux-ink:#1D0E2B;
  --ux-glass:rgba(255,255,255,.72); --ux-glass-strong:rgba(255,255,255,.88);
  --ux-line:rgba(120,60,170,.16);
  --ux-ring:linear-gradient(135deg,rgba(79,46,242,.55),rgba(185,31,209,.45) 50%,rgba(255,45,120,.55));
  --ux-glow:0 1px 2px rgba(29,14,43,.05),0 22px 60px -22px rgba(110,30,180,.35);
  --ss-bg:var(--ux-bg); --ss-ink:var(--ux-ink);
}

/* ── Atmosphere: soft aurora behind everything ─────────────────────────── */
html body{background:var(--ux-bg)!important;position:relative;min-height:100vh}
html body::before{
  content:""!important;position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% -4%,rgba(79,46,242,.16),transparent 70%),
    radial-gradient(560px 400px at 92% 6%,rgba(255,45,120,.14),transparent 70%),
    radial-gradient(760px 520px at 55% 108%,rgba(185,31,209,.12),transparent 70%)!important;
}
html body::after{ /* fine grain keeps the gradients from banding */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .2  0 0 0 0 .5  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Floating glass navigation ─────────────────────────────────────────── */
html body .nav{
  position:sticky!important;top:10px!important;z-index:50;
  width:calc(100% - 24px)!important;max-width:1100px;margin:10px auto 0!important;
  border:1px solid rgba(255,255,255,.75)!important;border-radius:20px!important;
  background:rgba(255,255,255,.62)!important;
  backdrop-filter:blur(22px) saturate(180%)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 34px -14px rgba(90,30,150,.28),0 0 0 1px var(--ux-line)!important;
  padding:8px 14px!important;min-height:60px!important;
}
html body .nav-links a{border-radius:12px!important;font-weight:650!important}
html body .nav-links a:hover{background:rgba(185,31,209,.08)!important}
html body .nav .nav-links a.active{background:rgba(185,31,209,.10)!important}
html body .nav-links a.active::after{left:50%;right:auto;width:16px;margin-left:-8px;bottom:3px;height:3px}
@media (max-width:640px){
  html body .nav{top:6px!important;width:calc(100% - 16px)!important;margin-top:6px!important;padding:10px 8px 6px!important;border-radius:18px!important}
  html body .nav-links a.active::after{left:50%;right:auto}
}

/* ── Index hero ────────────────────────────────────────────────────────── */
html body .ss-banner-wrap{padding-top:26px}
html body .ss-banner{
  border:0!important;border-radius:30px!important;background:#fff;
  box-shadow:0 2px 4px rgba(29,14,43,.06),0 40px 90px -34px rgba(110,30,190,.55),0 0 0 1px rgba(255,255,255,.6) inset!important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.ss-banner::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:var(--ux-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.ss-banner:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(29,14,43,.06),0 50px 100px -34px rgba(110,30,190,.65)!important}
html body .ss-intro{padding-top:40px}
html body .ss-intro h1{font-size:clamp(28px,5vw,46px)!important;font-weight:820!important;letter-spacing:-.04em!important;line-height:1.06!important;
  color:var(--ux-ink)!important;-webkit-text-fill-color:var(--ux-ink)!important}
html body .ss-intro .ss-tag{font-size:clamp(16px,2.2vw,19px);font-weight:560;color:#5B4766}

/* ── Live total sales — the one memorable element ──────────────────────── */
html body .ss-sales{
  align-items:center;gap:10px;margin:18px 0 0!important;padding:9px 18px 9px 14px;border-radius:999px;
  font-size:14px!important;font-weight:600;color:#5B4766!important;
  background:var(--ux-glass-strong)!important;
  box-shadow:0 0 0 1px var(--ux-line),0 14px 34px -14px rgba(110,30,190,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html body .ss-sales::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#16C47F;flex:none;
  box-shadow:0 0 0 0 rgba(22,196,127,.55);animation:ux-live 2.2s ease-out infinite;
}
html body .ss-sales strong{
  font-size:20px!important;font-weight:820;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:var(--ux-ring);-webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(115deg,#4F2EF2,#B91FD1 55%,#FF2D78);
}
@keyframes ux-live{0%{box-shadow:0 0 0 0 rgba(22,196,127,.5)}70%{box-shadow:0 0 0 9px rgba(22,196,127,0)}100%{box-shadow:0 0 0 0 rgba(22,196,127,0)}}

/* ── Sub-page heroes ───────────────────────────────────────────────────── */
html body .hero h1{font-weight:820!important;letter-spacing:-.04em!important;color:var(--ux-ink)!important}
html body .hero .ss-hero-icon{filter:drop-shadow(0 16px 26px rgba(150,30,200,.35))}

/* ── Cards: frosted glass with a gradient hairline ─────────────────────── */
html body .card{
  border:1.5px solid transparent!important;border-radius:26px!important;
  background:
    linear-gradient(var(--ux-glass-strong),var(--ux-glass-strong)) padding-box,
    var(--ux-ring) border-box!important;
  box-shadow:var(--ux-glow)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html body .card>.row>strong,html body .card>strong{font-size:18px;font-weight:780;letter-spacing:-.02em}
html body .badge{border-radius:999px!important;padding:5px 12px!important;background:rgba(185,31,209,.08)!important;border-color:rgba(185,31,209,.18)!important}
html body .qr{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,243,248,.9))!important;border:1px solid var(--ux-line)!important}
html body #done-card>div{border:1.5px solid transparent!important;border-radius:28px!important;
  background:linear-gradient(180deg,#fff,#FFF3F8) padding-box,var(--ux-ring) border-box!important;box-shadow:var(--ux-glow)!important}

/* ── Inputs ────────────────────────────────────────────────────────────── */
html body input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html body select,html body textarea{
  background:rgba(255,255,255,.9)!important;border:1.5px solid rgba(120,60,170,.2)!important;border-radius:16px!important;
  padding:13px 16px!important;box-shadow:0 1px 2px rgba(29,14,43,.04) inset!important;
}
html body input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
html body select:focus,html body textarea:focus{
  border-color:#B91FD1!important;box-shadow:0 0 0 4px rgba(185,31,209,.14),0 8px 24px -12px rgba(185,31,209,.5)!important;
}
html body .svc-dd-btn{border-radius:16px!important;border:1.5px solid rgba(120,60,170,.2)!important;background:rgba(255,255,255,.9)!important}
html body .svc-dd-menu{border-radius:20px!important;border:1px solid var(--ux-line)!important;
  background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px);box-shadow:0 30px 70px -24px rgba(60,10,110,.45)!important}

/* ── Buttons: glowing gradient with a sheen on hover ───────────────────── */
html body .btn{
  position:relative;overflow:hidden;border-radius:16px!important;padding:15px 24px!important;font-weight:760!important;
  background:linear-gradient(115deg,#4F2EF2 0%,#B91FD1 52%,#FF2D78 100%)!important;background-size:160% 100%!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 36px -14px rgba(160,30,200,.65)!important;
}
html body .btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:left .6s ease;
}
html body .btn:hover::after{left:130%}
html body .btn:hover{transform:translateY(-2px)!important;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 24px 44px -14px rgba(160,30,200,.75)!important}
html body .btn.ghost{background:rgba(255,255,255,.85)!important;border:1.5px solid rgba(120,60,170,.22)!important}
html body .btn.ghost::after{display:none}

/* ── Social / "More" list items ────────────────────────────────────────── */
html body .soc-item{border:1px solid var(--ux-line)!important;border-radius:18px!important;background:var(--ux-glass-strong)!important;
  box-shadow:0 10px 28px -16px rgba(110,30,180,.35)!important;transition:transform .2s,box-shadow .2s!important}
html body .soc-item:hover{transform:translateY(-2px)!important;box-shadow:0 18px 38px -16px rgba(110,30,180,.5)!important}
html body .soc-icon{border-radius:14px!important}
html body .soc-arrow{color:#B91FD1!important;opacity:.55}
html body .soc-item:hover .soc-arrow{opacity:1;transform:translateX(2px)}
html body .soc-section-label{color:#85708F!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important}

/* ── Status & kv rows ──────────────────────────────────────────────────── */
html body .kvs .kv-row{background:rgba(255,243,248,.8)!important;border:1px solid var(--ux-line);border-radius:14px!important}
html body .table th{background:rgba(185,31,209,.06)!important}

/* ── Modal ─────────────────────────────────────────────────────────────── */
html body #guide-overlay{background:rgba(29,14,43,.55)!important;backdrop-filter:blur(10px)!important}
html body #guide-overlay>div{border-radius:28px!important}

/* ── Footer: deep aubergine with a gradient edge ───────────────────────── */
html body .footer{
  position:relative;margin-top:72px!important;border-top:0!important;color:#C9B6D6!important;
  background:radial-gradient(600px 220px at 50% 0,rgba(185,31,209,.28),transparent 70%),#1D0E2B!important;
}
html body .footer{box-shadow:0 100vh 0 100vh #1D0E2B;clip-path:inset(0 0 -100vh 0)}
html body .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4F2EF2,#B91FD1,#FF2D78)}
html body .footer .ss-foot img{filter:drop-shadow(0 8px 18px rgba(185,31,209,.55))}
html body .footer .ss-foot nav a{color:#E7DAF0!important}
html body .footer .ss-foot nav a:hover{color:#FF7AAE!important}
html body .footer .ss-foot small{color:#9C86AD!important}

/* ── 404 ───────────────────────────────────────────────────────────────── */
html body .ss-404-icon{filter:drop-shadow(0 18px 30px rgba(150,30,200,.4))}

/* ── One orchestrated entrance on load (no scroll-triggered motion) ────── */
@keyframes ux-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ss-banner-wrap,.hero,.ss-intro,main.container>.card:first-child{animation:ux-rise .7s cubic-bezier(.2,.7,.2,1) both}
.ss-intro{animation-delay:.12s}main.container>.card:first-child{animation-delay:.22s}

@media (max-width:640px){
  html body .card{border-radius:22px!important}
  html body .ss-sales{font-size:13px!important}
  html body .ss-sales strong{font-size:18px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html body .hero p{padding:0 16px;max-width:560px;margin-left:auto;margin-right:auto}