/* Styles for the customer storefront (index.html). Loaded via a single
   <link rel="stylesheet"> in that file's <head> -- all 70 <style> blocks
   that used to be scattered through index.html live here now, in their
   original order (cascade order matters, so don't reshuffle sections). */
:root{
  --bg1:#160021;
  --bg2:#2a083f;
  --bg3:#4c1480;
  --bg4:#7a35c7;
  --bg5:#c78cff;

  --text:#ffffff;
  --muted:rgba(255,255,255,.74);

  --glass:rgba(255,255,255,.10);
  --glass2:rgba(255,255,255,.06);
  --border:rgba(224,180,255,.22);

  --neon:#d58cff;
  --neon2:#b86bff;
  --neon3:#f3b8ff;
  --cyan:#b993ff;

  --good:#c9ffe0;
  --danger:#ff9fc9;

  --shadow:0 18px 44px rgba(18,0,32,.28);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      -webkit-tap-highlight-color:transparent;
    }
html,
body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:auto;
  background:#12001d;
  -webkit-overflow-scrolling:touch;
}
body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18) 0%, transparent 16%),
    radial-gradient(circle at 80% 20%, rgba(220,160,255,.18) 0%, transparent 20%),
    radial-gradient(circle at 50% 78%, rgba(190,140,255,.14) 0%, transparent 24%),
    linear-gradient(135deg,
      #1a0028 0%,
      #34104f 28%,
      #5a1a86 58%,
      #7a35c7 82%,
      #b57cff 100%);
  background-attachment:fixed;
}
    @keyframes bgMove{
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }
#particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.95;
}
   

    .page{
      position:relative;
      z-index:1;
      width:min(1220px,94%);
      margin:0 auto;
      padding:18px 0 50px;

    }

    .hero{
      text-align:center;
      padding:10px 0 18px;
    }

    .brand-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:8px;
    }

    .brand-orb{
      width:58px;
      height:58px;
      border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%, #fff8c4 0%, #ffd166 12%, #f3c1ff 28%, #c77dff 48%, #7b2cbf 76%, #2d0847 100%);
      box-shadow:
        0 0 18px rgba(255,255,255,.28),
        0 0 28px rgba(199,125,255,.48),
        0 0 54px rgba(123,44,191,.35);
      animation:orbPulse 2.8s ease-in-out infinite alternate;
    }

    @keyframes orbPulse{
      from{transform:scale(1);}
      to{transform:scale(1.08);}
    }

    .hero-title{
      font-size:clamp(32px,5vw,54px);
      font-weight:900;
      letter-spacing:.5px;
      background:linear-gradient(90deg,#fff3b0 0%,#ffd166 20%,#ffffff 46%,#f1c8ff 66%,#c77dff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow:
        0 0 12px rgba(255,255,255,.14),
        0 0 24px rgba(199,125,255,.34),
        0 0 52px rgba(157,78,221,.24);
      line-height:1.1;
    }

    .hero-sub{
      margin-top:6px;
      font-size:14px;
      color:var(--muted);
      letter-spacing:.4px;
    }

    .search-wrap{
      width:min(760px,100%);
      margin:18px auto 14px;
      position:relative;
    }
.search-wrap input{
  width:100%;
  border:none;
  outline:none;
  border-radius:20px;
  padding:16px 18px 16px 48px;
  color:#fff;
  font-size:15px;
  background:linear-gradient(180deg, rgba(75,20,120,.88), rgba(45,8,71,.88));
  border:1px solid rgba(199,125,255,.20);
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:.3s ease;
}
    
.search-wrap input:focus{
  border-color:rgba(255,120,255,.42);
  box-shadow:
    0 0 0 1px rgba(255,120,255,.16),
    0 0 18px rgba(199,125,255,.18),
    0 10px 24px rgba(0,0,0,.22);
}
    

    .search-wrap input::placeholder{
      color:rgba(255,255,255,.56);
    }

    .search-icon{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      pointer-events:none;
      opacity:.82;
      font-size:18px;
      width:18px;
      height:18px;
    }

    .categories{
      display:flex;
      flex-wrap:nowrap;
      gap:12px;
      justify-content:flex-start;
      margin-bottom:22px;
      padding:0 6px 8px;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .categories::-webkit-scrollbar{ display:none; }
.cat{
  padding:10px 16px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(76,20,128,.28);
  border:1px solid rgba(224,180,255,.18);
  cursor:pointer;
  user-select:none;
  font-size:13px;
  transition:.22s ease;
  box-shadow:
    0 0 10px rgba(199,125,255,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  flex:0 0 auto;
  white-space:nowrap;
}

.cat:hover,
.cat.active{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(154,82,235,.42), rgba(88,25,150,.34));
  border-color:rgba(245,195,255,.34);
  box-shadow:
    0 0 18px rgba(213,140,255,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}


    .hidden{
      display:none !important;
    }

    .payment-modal{
  position:fixed;
  inset:0;

  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(10,0,20,.72);

  backdrop-filter:blur(16px);
}

.payment-card{
  position:relative;

  width:min(92%,400px);

  padding:24px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.04)
    );

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    0 0 40px rgba(199,125,255,.25);
}

.payment-title{
  text-align:center;

  font-size:24px;
  font-weight:900;

  color:#fff;

  text-shadow:
    0 0 18px rgba(199,125,255,.65);
}

.payment-sub{
  margin-top:8px;

  text-align:center;

  color:rgba(255,255,255,.65);
}

#paymentNumber{
  margin-top:24px;

  padding:18px;

  border-radius:20px;

  background:rgba(255,255,255,.06);

  text-align:center;
}

.pay-method{
  font-size:18px;
  font-weight:900;

  color:#ffd6ff;
}

.pay-name{
  margin-top:12px;

  color:#f3ddff;

  font-weight:700;
}

.pay-phone{
  margin-top:14px;

  font-size:22px;
  font-weight:900;

  color:#fff;

  text-shadow:
    0 0 16px rgba(199,125,255,.55);
}

.payment-copy-wrap{
  margin-top:18px;
}

#copyPayBtn{
  width:100%;

  border:none;

  padding:16px;

  border-radius:18px;

  color:#fff;

  font-weight:900;

  background:
    linear-gradient(
      135deg,
      #c77dff,
      #7b2fff
    );
}

.close-modal{
  position:absolute;

  right:28px;

  border:none;
  background:none;

  color:#fff;

  font-size:22px;
}
    .catalog-view{
      width:100%;
    }

    .products{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:20px;
      justify-items:center;
      align-items:start;
    }
.top-product-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
  border-radius:999px;
  color:#fff;
  letter-spacing:.3px;
  background:linear-gradient(135deg,#ffb347,#ff6b6b);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 6px 16px rgba(255,107,107,.25),
    0 0 12px rgba(255,179,71,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.card{
  width:100%;
  max-width:220px;
  position:relative;
  border-radius:22px;
  padding:18px 14px 16px;
  cursor:pointer;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(70,18,110,.72), rgba(30,6,50,.88));

  border:1px solid rgba(200,140,255,.16);

  box-shadow:
    0 12px 28px rgba(15,0,25,.28),
    0 0 12px rgba(199,125,255,.06),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  overflow:hidden;
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  animation:none;
  gap:10px;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.02), transparent 50%, rgba(213,140,255,.05));
  pointer-events:none;
}

.card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(220,160,255,.28);

  box-shadow:
    0 14px 32px rgba(15,0,25,.34),
    0 0 18px rgba(199,125,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06);
}
    
    @keyframes cardFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
    }

.icon-wrap{
  width:78px;
  height:78px;
  border-radius:20px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(199,125,255,.14);
  box-shadow:0 0 18px rgba(199,125,255,.18);
  overflow:hidden;
  font-size:34px;
}
.card img{
  width:100%;
  height:100%;
  border-radius:16px;
  object-fit:cover;
  transition:transform .28s ease, filter .28s ease;
}


   .card:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(199,125,255,.42);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 18px rgba(199,125,255,.18);
   } 
.card:active{
  transform:scale(.97);
}
    .card-name{
      font-size:16px;
      font-weight:800;
      line-height:1.25;
      text-align:center;
    }

    .card-sub{
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
      text-align:center;
    }

    .card-bottom{
      margin-top:14px;
      text-align:center;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 12px;
      border-radius:999px;
      font-size:12px;
      background:rgba(166,255,203,.10);
      border:1px solid rgba(166,255,203,.20);
      color:#effff5;
      box-shadow:0 0 12px rgba(166,255,203,.08);
    }

   .price-from{
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  color:#fff;
   } 
   .order-view{
  width:min(760px,100%);
  margin:0 auto;
  animation:fadeInUp .3s ease;
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
} 

.panel{
  background:rgba(28,0,43,.86);
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow), 0 0 30px rgba(199,125,255,.12);
  text-align:left;

    }

    .top-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:10px;
    }

    .back-btn{
      border:none;
      border-radius:14px;
      padding:10px 14px;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      cursor:pointer;
      font-weight:700;
    }

    .panel-title{
      text-align:center;
      font-size:22px;
      font-weight:900;
      margin-bottom:6px;
    }

    .panel-sub{
      text-align:center;
      font-size:12px;
      color:var(--muted);
      margin-bottom:14px;
    }

    .field{
      margin-top:16px;
    }

    .field-title{
      font-size:13px;
      font-weight:800;
      margin-bottom:10px;
    }

    .field-required{
      color:#ff6b6b;
    }

    .input.input-error{
      border-color:#ff6b6b !important;
      animation:inputShake .35s ease;
    }
    @keyframes inputShake{
      0%,100%{ transform:translateX(0); }
      20%{ transform:translateX(-6px); }
      40%{ transform:translateX(6px); }
      60%{ transform:translateX(-4px); }
      80%{ transform:translateX(4px); }
    }

    .input,
    .note-box{
      width:100%;
      border:none;
      outline:none;
      border-radius:16px;
      padding:13px 14px;
      color:#fff;
      font-size:14px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:
        0 0 18px rgba(199,125,255,.12),
        inset 0 0 10px rgba(255,255,255,.06);
      transition:.22s ease;
    }

    .input:focus,
    .note-box:focus{
      border-color:rgba(199,125,255,.42);
      box-shadow:
        0 0 22px rgba(199,125,255,.20),
        0 0 44px rgba(157,78,221,.10),
        inset 0 0 10px rgba(255,255,255,.08);
    }

    .input::placeholder,
    .note-box::placeholder{
      color:rgba(255,255,255,.52);
    }

    .note-box{
      min-height:96px;
      resize:none;
      line-height:1.55;
    }

    .desc-box{
      min-height:96px;
      resize:none;
      line-height:1.55;
    }

    .cart-item{
      margin-top:14px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      padding:12px;
    }

    .cart-head{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
    }

    .cart-name{
      font-size:16px;
      font-weight:800;
      line-height:1.25;
    }

    .cart-plan-current{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
    }

    .remove-btn{
      flex-shrink:0;
      border:none;
      border-radius:10px;
      padding:6px 10px;
      font-size:12px;
      color:#fff;
      background:rgba(255,159,201,.14);
      border:1px solid rgba(255,159,201,.24);
      cursor:pointer;
    }

    .plan-toggle{
      width:100%;
      margin-top:10px;
      border:none;
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.06);
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }
.order-gallery{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.order-gallery.hidden{ display:none; }
.order-gallery img{
  flex:1 1 0;
  min-width:0;
  width:50%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.order-gallery-static{
  flex:1 1 0;
  min-width:0;
  width:50%;
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.order-gallery-static img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.order-gallery-carousel{
  position:relative;
  flex:1 1 0;
  min-width:0;
  width:50%;
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  background:#111;
  cursor:pointer;
}
.order-gallery-carousel .oc-track{ position:relative; width:100%; height:100%; }
.order-gallery-carousel .oc-slide{
  position:absolute; inset:0; margin:0; opacity:0; transition:opacity .7s ease;
}
.order-gallery-carousel .oc-slide.is-active{ opacity:1; }
.order-gallery-carousel .oc-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.order-gallery-carousel .oc-dots{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2;
}
.order-gallery-carousel .oc-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .25s, transform .25s; cursor:pointer; border:none; padding:0;
}
.order-gallery-carousel .oc-dot.is-active{ background:#fff; transform:scale(1.3); }

.plan-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.plan-option{
  position: relative;
  padding: 14px 12px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);

  cursor: pointer;

  font-size: 14.5px;     /* 🔥 bigger */
  font-weight: 700;      /* 🔥 bold */
  line-height: 1.5;

  color: rgba(255,255,255,0.95);  /* 🔥 brighter white */

  text-shadow:
    0 0 6px rgba(255,255,255,.3),
    0 0 12px rgba(199,125,255,.25); /* 🔥 neon glow */

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: .2s ease;
  overflow: visible;
}
.plan-sub-label{
  font-size:12px;
  font-weight:800;
  color:#ffe66d;
  margin-top:5px;
  text-align:center;
  white-space:pre-line;

  text-shadow:
    0 0 6px rgba(255,230,109,.75),
    0 0 14px rgba(255,210,60,.55),
    0 0 24px rgba(255,180,0,.35);
}
 .plan-option div {
  white-space: pre-line !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
 }   

.plan-option.active{
  background: linear-gradient(
    180deg,
    rgba(199,125,255,.18),
    rgba(255,255,255,.05)
  );

  border-color: rgba(220,160,255,.55);

  box-shadow:
    0 0 16px rgba(199,125,255,.25),
    0 0 30px rgba(199,125,255,.18);

  outline: 2px solid rgba(199,125,255,.6);

  color: #ffffff;

  text-shadow:
    0 0 10px rgba(255,255,255,.6),
    0 0 20px rgba(199,125,255,.6); /* 🔥 strong glow */
}



.plan-option.best-seller{
  border-color: rgba(255, 196, 87, .38);
  box-shadow:
    0 0 18px rgba(255, 196, 87, .10),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.best-seller-badge{
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, #ffb347, #ff6b6b);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 18px rgba(255, 107, 107, .22),
    0 0 16px rgba(255, 179, 71, .18);
  white-space: nowrap;
}

.plan-option.active.best-seller{
  background: linear-gradient(180deg, rgba(199,125,255,.16), rgba(255,179,71,.10));
  border-color: rgba(255, 196, 87, .55);
  box-shadow:
    0 0 18px rgba(199,125,255,.18),
    0 0 20px rgba(255,179,71,.16);
} 
.discount-badge{
  position: absolute;
  top: -10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, #00d4ff, #0099ff);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 18px rgba(0, 153, 255, .22),
    0 0 16px rgba(0, 212, 255, .18);
  white-space: nowrap;
}

.plan-option.discount{
  border-color: rgba(0, 212, 255, .45);
  box-shadow:
    0 0 18px rgba(0, 212, 255, .12),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
    .out-stock-badge{
  position:absolute;
  top:-10px;
  left:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 18px rgba(255,77,109,.22),
    0 0 16px rgba(201,24,74,.18);
  white-space:nowrap;
}

.plan-option.out-stock{
  opacity:.55;
  border-color:rgba(255,77,109,.45);
  box-shadow:
    0 0 18px rgba(255,77,109,.10),
    inset 0 0 0 1px rgba(255,255,255,.03);
  pointer-events:none;
}

.low-stock-badge{
  position:absolute;
  top:-10px;
  left:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:#3a2405;
  background:linear-gradient(135deg,#ffd166,#ffb020);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 8px 18px rgba(255,176,32,.22),
    0 0 16px rgba(255,176,32,.18);
  white-space:nowrap;
}

.plan-option.low-stock{
  border-color:rgba(255,176,32,.45);
  box-shadow:
    0 0 18px rgba(255,176,32,.12),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
    .qty-row{
      margin-top:12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .qty-box{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .qty-btn{
      width:30px;
      height:30px;
      border:none;
      border-radius:50%;
      cursor:pointer;
      color:#fff;
      font-size:16px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.12);
    }

    .qty-num{
      min-width:26px;
      text-align:center;
      font-size:14px;
      font-weight:800;
    }

    .amount{
      font-size:13px;
      font-weight:800;
    }

    .summary{
      margin-top:16px;
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.10);
      display:grid;
      gap:10px;
    }

    .line{
      display:flex;
      justify-content:space-between;
      gap:12px;
      font-size:14px;
    }

    .line-total{
      display:flex;
      justify-content:space-between;
      gap:12px;
      font-size:18px;
      font-weight:900;
    }

    .pay-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }

    .pay-option{
      border-radius:14px;
      padding:12px 10px;
      text-align:center;
      cursor:pointer;
      font-size:13px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12);
      transition:.22s ease;
      user-select:none;
    }

    .pay-option.active{
      background:rgba(199,125,255,.17);
      border-color:rgba(199,125,255,.45);
      box-shadow:0 0 18px rgba(199,125,255,.22);
    }

    .telegram-btn{
      position:relative;
      width:100%;
      margin-top:18px;
      border:none;
      border-radius:18px;
      padding:15px 16px;
      color:#fff;
      font-size:16px;
      font-weight:800;
      cursor:pointer;
      overflow:hidden;
      background:linear-gradient(90deg,#7b2cff,#c24dff,#7b2cff);
      background-size:200% 100%;
      animation:btnFlow 3s linear infinite;
      box-shadow:
        0 0 18px rgba(199,125,255,.34),
        0 0 40px rgba(157,78,221,.18);
    }

    .telegram-btn::before{
      content:"";
      position:absolute;
      inset:-45%;
      background:linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
      transform:rotate(25deg);
      animation:btnGlow 3.2s linear infinite;
      pointer-events:none;
    }

    .telegram-btn:disabled{
      opacity:.6;
      cursor:not-allowed;
      box-shadow:none;
      animation:none;
    }
    .telegram-btn:active{
  transform:scale(.97);
    }

    @keyframes btnFlow{
      0%{background-position:0% 50%;}
      100%{background-position:200% 50%;}
    }

    @keyframes btnGlow{
      0%{transform:translateX(-120%) rotate(25deg);}
      100%{transform:translateX(220%) rotate(25deg);}
    }

    .preview{
      margin-top:16px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }

    .preview-title{
  color:#ffccff;

  text-shadow:
    0 0 10px rgba(255,120,255,.7),
    0 0 20px rgba(199,125,255,.45);
    }

.preview-box{
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;

  font-size:12.5px;

  line-height:1.7;

  color:#f6e6ff;

  font-weight:700;

  text-shadow:
    0 0 10px rgba(214,140,255,.35),
    0 0 20px rgba(199,125,255,.18);

  text-align:left;
}

    .site-footer{
      margin-top:42px;
      text-align:center;
      padding:22px 10px 28px;
      font-size:14px;
      font-weight:700;
      color:#efd6ff;
      border-top:1px solid rgba(199,125,255,.22);
      text-shadow:
        0 0 10px rgba(199,125,255,.55),
        0 0 20px rgba(157,78,221,.35);
    }

    @media (max-width:640px){
  .page{
    width:96%;
  }

  .products{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }

  .card{
    max-width:100%;
    min-height:170px;
    padding:12px 8px;
    border-radius:16px;
  }

  .icon-wrap{
    width:48px;
    height:48px;
    font-size:24px;
    border-radius:14px;
    margin-bottom:8px;
  }

  .card-name{
    font-size:12px;
    line-height:1.2;
  }

  .card-sub{
    font-size:10px;
  }

  .badge{
    font-size:10px;
    padding:5px 8px;
  }

  .price-from{
    font-size:10px;
  }

  .top-product-badge{
    font-size:9px;
    padding:4px 7px;
    top:6px;
    right:6px;
  }
  }

    /* FIX Xiaomi Pad Chrome sticky bug */
.search-wrap {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.categories {
  position: relative;   /* instead of transform */
}
    .custom-box{
  margin-top:12px;
  display:none;
}

.custom-box.show{
  display:block;
}

.custom-hint{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.68);
}
    .custom-hint.error{
  color:#ff6b6b;
  font-weight:800;
    }
    /* FAQ START */
.faq-wrap{
  width:100%;
  max-width:760px;
  margin:30px auto 10px;
  padding:0 6px;
}

.faq-item{
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.faq-item summary{
  cursor:pointer;
  padding:14px 16px;
  font-size:14px;
  font-weight:800;
  list-style:none;
  position:relative;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}

.faq-item[open] summary::after{
  content:"−";
}

.faq-answer{
  padding:0 16px 14px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.8);
}

.faq-item:hover{
  box-shadow:0 0 20px rgba(199,125,255,.25);
}
    .desc-nav{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.desc-tab{
  border:none;
  border-radius:999px;
  padding:8px 12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}

.desc-tab.active{
  background:rgba(199,125,255,.25);
  border-color:rgba(199,125,255,.55);
}
    .info-card{
  width:100%;
  border-radius:16px;
  padding:10px 12px;   

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.04)
    );

  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow:
    0 0 24px rgba(199,125,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06);

  max-height:120px;
  overflow:auto;    
}

.info-content{
  white-space:pre-line;

  line-height:1.5;

  font-size:12.5px;

  color:#f6e6ff;

  font-weight:700;

  text-shadow:
    0 0 8px rgba(214,140,255,.25);
}

    .info-card:hover{
  border-color:rgba(199,125,255,.35);

  box-shadow:
    0 0 30px rgba(199,125,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
    }
    .section-title{
  margin-top:20px;
  margin-bottom:10px;

  font-size:17px;
  font-weight:900;

  color:#fff;

  text-shadow:
    0 0 10px rgba(199,125,255,.35);
}

.section-title::after{
  content:"";
  display:block;

  width:100%;
  height:1px;

  margin-top:8px;

  background:
    linear-gradient(
      90deg,
      rgba(199,125,255,.55),
      transparent
    );
}
    /* A full-width, 15px-padded CTA felt oversized for a mid-flow "next
       step" action (vs. the final Place Order button, which should stay
       the biggest thing on screen) -- shrink it to a compact right-aligned
       pill instead. */
    #continueBtn.telegram-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:fit-content;
  margin:14px 0 0 auto;
  padding:11px 26px;
  font-size:13.5px;
  border-radius:999px;
    }
/* FAQ END */
  
/* International game-store UI upgrade */
:root{--bg1:#041c46;--bg2:#063d91;--bg3:#087cff;--bg4:#19cfff;--bg5:#9cf7ff;--neon:#22e6ff;--neon2:#087cff;--neon3:#d6fbff;--cyan:#6e7bff;--border:rgba(178,249,255,.34);--shadow:0 20px 48px rgba(0,35,110,.34)}
body{font-family:Inter,Arial,Helvetica,sans-serif;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.22),transparent 18%),radial-gradient(circle at 88% 20%,rgba(41,230,255,.25),transparent 24%),linear-gradient(135deg,#03183f 0%,#064da8 50%,#16c9ed 100%);background-attachment:fixed}
.hero-title{background:linear-gradient(90deg,#fff,#d2fbff 42%,#50ddff 70%,#fff);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 18px rgba(33,230,255,.45),0 0 42px rgba(8,124,255,.35)}
.hero-sub{color:rgba(235,255,255,.76)}.brand-orb{background:radial-gradient(circle at 30% 25%,#fff,#9cf7ff 18%,#087cff 52%,#073a91 82%);box-shadow:0 0 20px rgba(33,230,255,.7),0 0 54px rgba(8,124,255,.45)}
.search-wrap input,.panel,.payment-card{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055)),rgba(4,39,100,.48);border-color:rgba(177,248,255,.34);box-shadow:0 18px 44px rgba(0,35,110,.26),inset 0 1px rgba(255,255,255,.22);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
.cat{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),rgba(4,61,145,.34);border-color:rgba(178,249,255,.28)}.cat:hover,.cat.active{background:linear-gradient(135deg,rgba(33,230,255,.30),rgba(8,124,255,.38));border-color:rgba(178,249,255,.72);box-shadow:0 0 20px rgba(33,230,255,.24)}
.card{background:linear-gradient(145deg,rgba(19,125,255,.78),rgba(4,47,137,.82));border-color:rgba(178,249,255,.40);box-shadow:0 16px 34px rgba(0,35,110,.30),inset 0 1px rgba(255,255,255,.25)}.card:hover{border-color:rgba(178,249,255,.78);box-shadow:0 22px 42px rgba(0,35,110,.36),0 0 24px rgba(33,230,255,.28)}
.info-card{background:rgba(5,54,130,.28);border-color:rgba(178,249,255,.30);box-shadow:inset 0 1px rgba(255,255,255,.16),0 12px 28px rgba(0,35,110,.18);max-height:none;overflow:hidden;padding:0;transition:box-shadow .24s ease}.info-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;color:#eaffff;font-size:14px;font-weight:900;cursor:pointer}.info-card summary::-webkit-details-marker{display:none}.info-card summary:after{content:"+";display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:#053a91;background:linear-gradient(135deg,#b7fbff,#22e6ff);font-size:19px;line-height:1;box-shadow:0 0 15px rgba(33,230,255,.38);transition:transform .2s ease}.info-card[open] summary:after{content:"−";transform:rotate(180deg)}.info-card[open]{box-shadow:0 0 0 2px rgba(33,230,255,.12),0 16px 32px rgba(0,35,110,.22)}.info-content{max-height:220px;overflow:auto;padding:0 14px 14px;color:rgba(239,255,255,.84);text-shadow:0 0 8px rgba(33,230,255,.16)}.info-content::-webkit-scrollbar{width:5px}.info-content::-webkit-scrollbar-thumb{background:#22e6ff;border-radius:10px}.desc-nav{display:none!important}
.plan-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:14px}.plan-option{position:relative;display:flex;min-height:178px;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 14px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(41,174,255,.10) 48%,rgba(4,54,143,.35));border:1px solid rgba(178,249,255,.34);box-shadow:0 13px 28px rgba(0,35,110,.25),inset 0 1px rgba(255,255,255,.22);font-size:13px;font-weight:900;line-height:1.35;text-align:center;color:#f2ffff;cursor:pointer;overflow:hidden;transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s ease,border-color .22s ease,background .22s ease}.plan-option:before{content:"";position:absolute;inset:-60% 22% 45% -28%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);transform:rotate(-16deg);pointer-events:none}.plan-option:hover{transform:translateY(-6px);border-color:rgba(178,249,255,.84);box-shadow:0 21px 38px rgba(0,35,110,.34),0 0 22px rgba(33,230,255,.26)}.plan-option:active{transform:scale(.95)}.plan-option.active{background:linear-gradient(145deg,rgba(33,230,255,.40),rgba(8,124,255,.42) 55%,rgba(59,130,246,.30));border-color:#aefaff;box-shadow:0 0 0 3px rgba(33,230,255,.22),0 0 25px rgba(33,230,255,.50),0 18px 34px rgba(0,35,110,.34);animation:planSelected .45s cubic-bezier(.23,1,.32,1)}@keyframes planSelected{0%{transform:scale(.94);filter:brightness(1.3)}55%{transform:scale(1.045)}100%{transform:scale(1)}}.plan-option.best-seller{border-color:rgba(255,210,91,.82);box-shadow:0 0 16px rgba(255,190,60,.18),0 13px 28px rgba(0,35,110,.23)}.plan-option.active.best-seller{border-color:#ffe36f;box-shadow:0 0 0 3px rgba(255,219,86,.22),0 0 26px rgba(255,196,65,.34)}.plan-option.out-stock{filter:grayscale(.45);opacity:.48}.plan-sub-label{color:#ffe66d;text-shadow:0 0 8px rgba(255,230,109,.6)}.best-seller-badge,.discount-badge,.out-stock-badge{top:9px;font-size:9px;padding:4px 7px}.best-seller-badge{right:8px}.discount-badge,.out-stock-badge{left:8px}.qty-row{margin-top:15px}.telegram-btn{background:linear-gradient(90deg,#087cff,#22e6ff,#087cff);background-size:200% 100%;box-shadow:0 0 20px rgba(33,230,255,.32),0 0 42px rgba(8,124,255,.18)}.section-title,.preview-title{color:#c9fbff;text-shadow:0 0 10px rgba(33,230,255,.45)}
#guideView,.faq-wrap{display:none!important}.guide-only,.guide-card{display:none!important}
@media (max-width:900px){.plan-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plan-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.plan-option{min-height:154px;padding:17px 8px 12px;border-radius:18px;font-size:11px}.plan-sub-label{font-size:10px}.info-content{max-height:180px}.panel-title{font-size:20px}}


/* Bright cyan glass glow refinement */
:root{--neon:#49f3ff;--neon2:#00bfff;--neon3:#eaffff;--cyan:#8b9dff;--border:rgba(151,249,255,.62)}
body{background:radial-gradient(circle at 12% 12%,rgba(144,252,255,.22),transparent 18%),radial-gradient(circle at 85% 18%,rgba(0,222,255,.28),transparent 24%),linear-gradient(135deg,#021440 0%,#034ba8 47%,#08c9ee 100%)}
.card,.panel,.search-wrap input,.info-card,.payment-card{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(74,213,255,.13) 45%,rgba(4,74,163,.36)),rgba(4,74,163,.24);border-color:rgba(174,252,255,.56);box-shadow:0 18px 42px rgba(0,30,100,.24),0 0 22px rgba(0,219,255,.16),inset 0 1px 0 rgba(255,255,255,.38);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)}
.plan-option{background:linear-gradient(145deg,rgba(235,255,255,.28) 0%,rgba(42,222,255,.25) 34%,rgba(0,130,236,.22) 68%,rgba(5,55,145,.24) 100%);border:1px solid rgba(190,255,255,.74);box-shadow:0 14px 30px rgba(0,28,102,.25),0 0 14px rgba(0,226,255,.28),0 0 34px rgba(0,190,255,.13),inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(106,240,255,.22);color:#ffffff;text-shadow:0 1px 8px rgba(0,38,100,.45)}
.plan-option:after{content:"";position:absolute;inset:1px;border-radius:20px;background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 24%,transparent 72%,rgba(111,246,255,.16));pointer-events:none;mix-blend-mode:screen}.plan-option:hover{background:linear-gradient(145deg,rgba(240,255,255,.38),rgba(55,230,255,.34) 38%,rgba(0,136,255,.32) 72%,rgba(13,65,168,.30));border-color:#c9ffff;box-shadow:0 20px 38px rgba(0,28,102,.30),0 0 18px rgba(0,236,255,.52),0 0 42px rgba(0,187,255,.26),inset 0 1px 0 rgba(255,255,255,.62)}.plan-option.active{background:linear-gradient(145deg,rgba(245,255,255,.46),rgba(34,236,255,.44) 38%,rgba(0,141,255,.42) 72%,rgba(50,77,220,.34));border-color:#e2ffff;box-shadow:0 0 0 3px rgba(130,249,255,.30),0 0 20px rgba(0,239,255,.72),0 0 48px rgba(0,190,255,.42),0 18px 38px rgba(0,26,110,.32),inset 0 1px 0 rgba(255,255,255,.72)}
.plan-option.best-seller{border-color:rgba(255,228,103,.95);box-shadow:0 0 18px rgba(255,208,62,.28),0 0 28px rgba(0,224,255,.14),inset 0 1px 0 rgba(255,255,255,.42)}.plan-option.active.best-seller{box-shadow:0 0 0 3px rgba(255,226,100,.26),0 0 24px rgba(255,215,70,.50),0 0 44px rgba(0,221,255,.34),inset 0 1px rgba(255,255,255,.72)}
.info-card summary:after{color:#002e79;background:linear-gradient(135deg,#ffffff,#a4fbff 44%,#14e6ff);box-shadow:0 0 12px rgba(0,241,255,.62),0 0 24px rgba(0,190,255,.28)}
.telegram-btn{background:linear-gradient(90deg,#006fff,#00dfff,#55f5ff,#006fff);box-shadow:0 0 20px rgba(0,239,255,.55),0 0 48px rgba(0,160,255,.30);text-shadow:0 1px 6px rgba(0,32,88,.7)}
.cat:hover,.cat.active,.pay-option.active{border-color:#b9ffff;box-shadow:0 0 18px rgba(0,236,255,.42),inset 0 1px rgba(255,255,255,.45)}
@media (max-width:640px){.plan-option{background:linear-gradient(145deg,rgba(240,255,255,.34),rgba(23,211,255,.28) 42%,rgba(0,105,225,.28));box-shadow:0 10px 22px rgba(0,28,102,.24),0 0 15px rgba(0,225,255,.25),inset 0 1px rgba(255,255,255,.42)}}


/* Global reduced-motion: covers every animation/transition in the file, so
   the several narrower reduced-motion queries that used to shadow this one
   (one per abandoned re-theme below) were pure duplication. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Hot flame badge + premium micro-interactions */
.top-product-badge{display:inline-flex;align-items:center;gap:4px;transform-origin:50% 100%;animation:hotFlicker 1.15s ease-in-out infinite alternate;will-change:transform,filter,box-shadow}.top-product-badge::before{content:"";position:absolute;inset:-4px -7px;border-radius:999px;background:radial-gradient(circle at 50% 100%,rgba(255,87,34,.45),transparent 68%);filter:blur(5px);z-index:-1;animation:hotAura 1.1s ease-in-out infinite alternate}.top-product-badge::after{content:"✦";font-size:8px;color:#fff4a6;animation:hotSpark .8s ease-in-out infinite alternate}.card:hover .top-product-badge{animation:hotHover .55s ease-in-out infinite alternate}.card:hover .icon-wrap img{transform:scale(1.06);filter:saturate(1.12) contrast(1.04)}.card:focus-within,.card:focus-visible{outline:3px solid rgba(0,185,216,.28);outline-offset:3px}.card{isolation:isolate}.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.34) 45%,transparent 62%);transform:translateX(-130%);pointer-events:none;opacity:0}.card:hover::after{opacity:1;animation:cardSheen .7s var(--market-ease) forwards}.plan-option{will-change:transform,box-shadow}.plan-option:active{transition-duration:.08s;transform:scale(.96)}.cat,.pay-option,.back-btn,.plan-toggle,.telegram-btn{transition:transform .18s var(--market-ease),box-shadow .18s var(--market-ease),background .18s ease,border-color .18s ease}.cat:active,.pay-option:active,.back-btn:active,.plan-toggle:active,.telegram-btn:active{transform:scale(.97)}
@keyframes hotFlicker{0%{transform:rotate(-3deg) scale(.98);filter:brightness(1)}35%{transform:rotate(2deg) scale(1.04);filter:brightness(1.18)}70%{transform:rotate(-1deg) scale(1.01);filter:brightness(1.06)}100%{transform:rotate(3deg) scale(1.06);filter:brightness(1.28)}}@keyframes hotAura{0%{opacity:.42;transform:scale(.92)}100%{opacity:.92;transform:scale(1.12)}}@keyframes hotSpark{0%{opacity:.25;transform:translateY(2px) scale(.75)}100%{opacity:1;transform:translateY(-2px) scale(1.2)}}@keyframes hotHover{0%{transform:translateY(0) rotate(-4deg) scale(1.02);filter:brightness(1.05)}100%{transform:translateY(-2px) rotate(4deg) scale(1.1);filter:brightness(1.35)}}@keyframes cardSheen{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.top-product-badge,.top-product-badge::before,.top-product-badge::after,.card:hover::after{animation:none!important}.top-product-badge{transform:none!important}.card:hover .icon-wrap img{transform:none!important}}



/* .order-view's entrance fade still uses this timing token; the rest of
   the dark-neon re-theme this once belonged to (unreachable now that the
   site is permanently light-mode, no toggle exists) has been removed. */
:root{--dark-ease:cubic-bezier(.23,1,.32,1)}
.order-view{animation:orderIn .6s var(--dark-ease)!important}
/* Fast visual loading: avoid blocking decode and reduce first-paint motion */
.card img{content-visibility:auto;contain-intrinsic-size:86px 86px}.products .card{animation-duration:.42s!important}.products .card:nth-child(n+7){animation-delay:.05s!important}


/* Popup reliability fix: keep popup outside the grid so renderPayments cannot delete it. */
.payment-field{position:relative}.payment-quick-pop{z-index:100;display:block}.payment-quick-pop.hidden{display:none!important}.payment-quick-pop.show{display:block!important}.payment-quick-method{color:#bfffff!important}.payment-quick-number{color:#f5ffff!important;text-shadow:0 0 12px rgba(86,243,255,.48)}.payment-quick-name{color:#9fefff!important}.pay-option .pay-method-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;color:#06152a;background:linear-gradient(145deg,#eaffff,#56f3ff);box-shadow:0 0 11px rgba(86,243,255,.42);font-size:13px;font-weight:950}.pay-option.active .pay-method-icon{box-shadow:0 0 16px rgba(86,243,255,.80)}


/* Branded payment logo tiles */
.pay-option{gap:5px!important}.pay-logo{width:34px;height:34px;object-fit:contain;border-radius:9px;padding:2px;background:rgba(255,255,255,.94);box-shadow:0 0 13px rgba(86,243,255,.24);transition:transform .28s var(--dark-ease),box-shadow .28s ease}.pay-option:hover .pay-logo,.pay-option.active .pay-logo{transform:scale(1.10);box-shadow:0 0 18px rgba(86,243,255,.62)}.pay-option span:last-child{font-size:10px;color:#eaffff}.pay-option.active span:last-child{color:#cfffff;text-shadow:0 0 8px rgba(86,243,255,.70)}
@media(max-width:640px){.pay-logo{width:29px;height:29px}.pay-option span:last-child{font-size:8px}}


/* FINAL MOBILE PAYMENT FIX */
:root{--cyan:#56f3ff;--cyan-soft:#bfffff;--neon-blue:#2378ff;--neon-purple:#8b5cff}
body{background-color:#050812!important;background-image:radial-gradient(circle at 18% 10%,rgba(35,120,255,.20),transparent 26%),radial-gradient(circle at 86% 18%,rgba(86,243,255,.14),transparent 24%),linear-gradient(135deg,#03050b,#071329 52%,#050812)!important;color:#f3fbff!important}
.panel{background:linear-gradient(145deg,rgba(16,26,50,.94),rgba(6,10,23,.96))!important;border-color:rgba(86,243,255,.28)!important;box-shadow:0 24px 60px rgba(0,0,0,.40),0 0 32px rgba(35,120,255,.12),inset 0 1px rgba(255,255,255,.08)!important}
.field.payment-field{position:relative!important}.pay-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;width:100%!important;align-items:stretch!important}.pay-option{position:relative!important;min-width:0!important;min-height:72px!important;aspect-ratio:1!important;padding:7px 3px!important;border-radius:16px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:5px!important;overflow:visible!important;background:linear-gradient(145deg,rgba(27,52,91,.72),rgba(7,14,30,.88))!important;border:1px solid rgba(86,243,255,.24)!important;color:#eaffff!important;box-shadow:0 12px 25px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.10)!important;transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease,border-color .2s ease!important}.pay-option:hover{transform:translateY(-4px) scale(1.03)!important;border-color:var(--cyan)!important;box-shadow:0 0 24px rgba(86,243,255,.28)!important}.pay-option.active{transform:translateY(-3px) scale(1.04)!important;background:linear-gradient(145deg,rgba(86,243,255,.27),rgba(35,120,255,.28))!important;border-color:#d8ffff!important;box-shadow:0 0 0 3px rgba(86,243,255,.14),0 0 30px rgba(86,243,255,.52)!important}.pay-option.active::after{content:"";position:absolute;left:15%;right:15%;bottom:-5px;height:3px;border-radius:99px;background:#dfffff;box-shadow:0 0 9px var(--cyan),0 0 20px var(--cyan)}.pay-logo{display:block!important;width:35px!important;height:35px!important;object-fit:contain!important;border-radius:9px!important;padding:2px!important;background:#fff!important;box-shadow:0 0 15px rgba(86,243,255,.34)!important;transition:transform .25s ease,box-shadow .25s ease!important}.pay-option:hover .pay-logo,.pay-option.active .pay-logo{transform:scale(1.1)!important;box-shadow:0 0 21px rgba(86,243,255,.74)!important}.pay-option span:last-child{font-size:9px!important;font-weight:900!important;white-space:nowrap!important;color:#eaffff!important}.pay-option.active span:last-child{color:#dfffff!important;text-shadow:0 0 9px rgba(86,243,255,.85)}
.payment-quick-pop{position:absolute!important;left:50%!important;bottom:calc(100% + 12px)!important;z-index:100!important;width:min(260px,calc(100vw - 42px))!important;padding:11px 13px!important;border-radius:15px!important;color:#efffff!important;background:linear-gradient(145deg,rgba(17,42,77,.99),rgba(4,10,25,.99))!important;border:1px solid rgba(86,243,255,.75)!important;box-shadow:0 0 25px rgba(86,243,255,.40),0 16px 30px rgba(0,0,0,.42)!important;opacity:0!important;transform:translateX(-50%) translateY(6px) scale(.94)!important;pointer-events:none!important;transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1)!important}.payment-quick-pop.show{opacity:1!important;transform:translateX(-50%) translateY(0) scale(1)!important;pointer-events:auto!important}.payment-quick-pop.hidden{display:none!important}.payment-quick-method{font-size:11px!important;color:#aaffff!important}.payment-quick-number{margin-top:3px!important;font-size:16px!important;font-weight:950!important;color:#fff!important;text-shadow:0 0 13px rgba(86,243,255,.62)}.payment-quick-name{margin-top:2px!important;color:#aeefff!important;font-size:11px!important}.payment-quick-hint{margin-top:6px!important;color:#7898b7!important;font-size:9px!important}
.support-profile{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 4px}.support-avatar{display:block!important;width:52px!important;height:52px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid rgba(86,243,255,.82)!important;box-shadow:0 0 20px rgba(86,243,255,.55)!important}.support-profile strong{display:block;color:#eaffff}.support-profile small{display:block;color:#8ca7bf;margin-top:3px}.support-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.support-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;text-decoration:none;color:#eaffff!important;background:rgba(86,243,255,.08)!important;border:1px solid rgba(86,243,255,.35)!important}.support-btn span{color:#8fa8c0;font-size:10px}.whatsapp-support{border-color:rgba(37,211,102,.65)!important}
@media(max-width:760px){.pay-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}.pay-option{min-height:57px!important;padding:5px 1px!important;border-radius:13px!important}.pay-logo{width:28px!important;height:28px!important}.pay-option span:last-child{font-size:7px!important}.payment-quick-pop{width:min(235px,calc(100vw - 38px))!important}.support-avatar{width:48px!important;height:48px!important}}
@media(prefers-reduced-motion:reduce){.pay-option,.pay-logo,.payment-quick-pop{transition:none!important}}


/* Product-card Buy Now micro-interaction */
.buy-now-btn{align-self:center;width:calc(100% - 10px);margin-top:5px;padding:8px 12px;border:1px solid rgba(95,247,255,.55);border-radius:999px;color:#eaffff;background:linear-gradient(100deg,rgba(35,120,255,.65),rgba(86,243,255,.30),rgba(139,92,255,.62));box-shadow:0 0 15px rgba(86,243,255,.18),inset 0 1px rgba(255,255,255,.16);font-size:11px;font-weight:950;letter-spacing:.25px;cursor:pointer;transition:transform .24s cubic-bezier(.23,1,.32,1),box-shadow .24s ease,filter .24s ease}.buy-now-btn span{display:inline-block;margin-left:4px;transition:transform .24s ease}.buy-now-btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.16);box-shadow:0 0 25px rgba(86,243,255,.42),0 8px 18px rgba(0,0,0,.22)}.buy-now-btn:hover span{transform:translate(2px,-2px)}.buy-now-btn:active{transform:scale(.96)}.card:hover .buy-now-btn{animation:buyShimmer 1.4s ease-in-out infinite alternate}@keyframes buyShimmer{from{box-shadow:0 0 14px rgba(86,243,255,.22),inset 0 1px rgba(255,255,255,.14)}to{box-shadow:0 0 27px rgba(86,243,255,.50),inset 0 1px rgba(255,255,255,.22)}}
@media(max-width:760px){.buy-now-btn{padding:7px 9px;font-size:10px;width:calc(100% - 4px)}}@media(prefers-reduced-motion:reduce){.buy-now-btn,.buy-now-btn span{animation:none!important;transition:none!important}}

/* UNIFIED TEXT ALIGNMENT v2 */
.card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
.card .icon-wrap,
.card .top-product-badge{
  align-self:center;
}
.card-name{
  min-height:2.5em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.28!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.card-sub{
  min-height:1.35em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.3!important;
}
.price-from{
  min-height:1.35em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.3!important;
}
.buy-now-btn{margin-top:auto!important}
.plan-list{
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
.plan-option{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:142px!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:24px 14px 18px!important;
  text-align:center!important;
  font-size:clamp(11px,1.5vw,13px)!important;
  font-weight:900!important;
  line-height:1.42!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.plan-option>div:not([class]){
  min-height:2.84em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
}
.plan-sub-label{
  min-height:1.4em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  line-height:1.4!important;
  white-space:pre-line!important;
}
.info-content{
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
  line-height:1.72!important;
  text-align:left!important;
}
@media(max-width:760px){
  .card-name{font-size:12px!important;min-height:2.56em!important}
  .plan-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .plan-option{min-height:126px!important;padding:22px 10px 16px!important;font-size:11px!important}
}
@media(max-width:430px){
  .plan-option{min-height:122px!important;padding-left:8px!important;padding-right:8px!important;font-size:10.5px!important}
}

/* ===== literal-newline-guard ===== */
.info-content{white-space:normal!important;line-height:1.72!important}
.info-content br{display:block;content:"";margin-bottom:.28em}

/* ===== support-logo-polish ===== */
.support-actions{align-items:center}
.support-btn{min-width:132px;justify-content:center!important;padding:8px 12px!important}
.support-logo{width:27px;height:27px;flex:0 0 27px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;box-shadow:0 0 14px rgba(95,247,255,.32)}
.whatsapp-logo{border-radius:50%;background:#25d366}
.telegram-logo{background:#fff}
.support-btn>span{font-size:11px!important;line-height:1.18;text-align:left}
.support-btn>span small{font-size:9px;color:#9fc1d6}
@media(max-width:480px){.support-actions{gap:7px}.support-btn{min-width:126px;padding:8px 9px!important}.support-logo{width:25px;height:25px;flex-basis:25px}.support-btn>span{font-size:10px!important}}

/* ===== theme-toggle-and-hero-motion ===== */
/* Theme toggle */
.market-strip{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important}
.market-strip-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.theme-toggle{border:1px solid rgba(95,247,255,.44);border-radius:999px;padding:7px 11px;color:#eaffff;background:linear-gradient(135deg,rgba(95,247,255,.14),rgba(50,136,255,.16));box-shadow:0 0 16px rgba(95,247,255,.14),inset 0 1px rgba(255,255,255,.16);font-size:11px;font-weight:900;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.theme-toggle:hover{transform:translateY(-2px);border-color:#bfffff;box-shadow:0 0 24px rgba(95,247,255,.36)}
.theme-toggle:active{transform:scale(.96)}
/* Hero text appears in sequence after the intro splash fades. */
.hero-title,.hero-sub,.hero-kicker,.hero-copy,.hero-stats{opacity:0;animation:heroTextReveal .72s cubic-bezier(.23,1,.32,1) forwards}
.hero-title{animation-delay:1.22s}.hero-sub{animation-delay:1.38s}.hero-kicker{animation-delay:1.52s}.hero-copy{animation-delay:1.66s}.hero-stats{animation-delay:1.82s}
@keyframes heroTextReveal{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Light theme */
body.light-mode{background:#edf5ff!important;color:#17304f!important;background-image:radial-gradient(ellipse at 12% 8%,rgba(70,190,255,.25),transparent 31%),radial-gradient(ellipse at 88% 14%,rgba(125,100,255,.16),transparent 27%),linear-gradient(135deg,#f8fcff 0%,#eaf5ff 52%,#f3efff 100%)!important}
body.light-mode::after{opacity:.28!important}
.light-mode .market-strip{background:rgba(255,255,255,.86)!important;border-bottom-color:rgba(33,111,180,.20)!important;box-shadow:0 4px 18px rgba(35,87,145,.10)!important;color:#24466e!important}
.light-mode .market-strip strong{color:#173b68!important}.light-mode .market-strip span{color:#5d7899!important}.light-mode .market-trust span{color:#365e86!important}
.light-mode .theme-toggle{color:#17406f;background:linear-gradient(135deg,#ffffff,#e4f7ff);border-color:#63cae4;box-shadow:0 5px 15px rgba(37,135,190,.16),inset 0 1px #fff}
.light-mode .hero{background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(225,241,255,.88))!important;border-color:rgba(55,170,214,.35)!important;box-shadow:0 22px 48px rgba(46,101,155,.16),0 0 34px rgba(47,186,230,.15),inset 0 1px #fff!important}
.light-mode .hero-title{background:linear-gradient(100deg,#173d70,#087fb2 45%,#6747c8)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:0 5px 18px rgba(41,128,185,.14)!important}
.light-mode .hero-sub,.light-mode .hero-kicker,.light-mode .hero-copy,.light-mode .section-note{color:#56718f!important}.light-mode .hero-copy span{color:#148fc1!important}.light-mode .hero-stats strong{color:#194777!important}.light-mode .hero-stats small{color:#6b86a3!important}
.light-mode .search-wrap input{background:rgba(255,255,255,.94)!important;color:#173b68!important;border-color:rgba(53,169,211,.40)!important;box-shadow:0 8px 22px rgba(35,87,145,.10),inset 0 1px #fff!important}.light-mode .search-wrap input::placeholder{color:#7890aa!important}
.light-mode .cat{background:rgba(255,255,255,.74)!important;color:#456789!important;border-color:rgba(60,139,184,.24)!important;box-shadow:0 5px 14px rgba(40,91,144,.08)!important}.light-mode .cat:hover,.light-mode .cat.active{color:#084a7c!important;background:linear-gradient(135deg,#e6fbff,#edf0ff)!important;border-color:#35b7d8!important;box-shadow:0 0 18px rgba(39,177,216,.22)!important}
.light-mode .card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(226,243,255,.90))!important;color:#173b68!important;border-color:rgba(56,151,197,.28)!important;box-shadow:0 12px 26px rgba(41,91,143,.13),inset 0 1px #fff!important}.light-mode .card:hover{background:linear-gradient(145deg,#ffffff,#e9f9ff)!important;border-color:#45c3e4!important;box-shadow:0 18px 34px rgba(41,91,143,.18),0 0 24px rgba(47,187,224,.18)!important}.light-mode .card-name{color:#173b68!important}.light-mode .card-sub{color:#6983a0!important}.light-mode .price-from{color:#0789b4!important}.light-mode .icon-wrap{background:#eef9ff!important;border-color:rgba(43,168,207,.30)!important;box-shadow:0 0 16px rgba(43,168,207,.15)!important}
.light-mode .panel{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(230,243,255,.94))!important;color:#173b68!important;border-color:rgba(56,151,197,.30)!important;box-shadow:0 22px 48px rgba(41,91,143,.15),inset 0 1px #fff!important}.light-mode .panel-title{color:#173b68!important}.light-mode .panel-sub,.light-mode .field-title,.light-mode .cart-plan-current{color:#67829e!important}.light-mode .info-card,.light-mode .cart-item,.light-mode .preview,.light-mode .input,.light-mode .note-box{background:rgba(255,255,255,.72)!important;color:#23496e!important;border-color:rgba(56,151,197,.24)!important}.light-mode .info-card summary,.light-mode .section-title,.light-mode .preview-title{color:#087fae!important}.light-mode .info-content{color:#52718f!important}.light-mode .plan-option{background:linear-gradient(145deg,#ffffff,#e6f8ff)!important;color:#21466d!important;border-color:rgba(56,151,197,.30)!important;box-shadow:0 10px 22px rgba(41,91,143,.11),inset 0 1px #fff!important}.light-mode .plan-option:hover{border-color:#31b8d9!important;box-shadow:0 0 24px rgba(47,187,224,.22)!important}.light-mode .plan-option.active{background:linear-gradient(145deg,#e5fcff,#e8e8ff)!important;color:#124a7a!important;border-color:#20aecf!important;box-shadow:0 0 0 3px rgba(32,174,207,.14),0 0 26px rgba(47,187,224,.22)!important}.light-mode .site-footer{color:#607996!important;border-color:rgba(56,151,197,.22)!important;text-shadow:none!important}
@media(max-width:640px){.market-strip{align-items:flex-start!important}.market-strip-actions{width:100%;justify-content:space-between}.theme-toggle{font-size:10px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){.hero-title,.hero-sub,.hero-kicker,.hero-copy,.hero-stats{animation:none!important;opacity:1!important}}

/* ===== soft-dim-light-mode ===== */
/* Soft dim light mode: readable, muted, and less glaring */
body.light-mode{background:#dce7f1!important;color:#263d55!important;background-image:radial-gradient(ellipse at 12% 8%,rgba(96,174,210,.16),transparent 32%),radial-gradient(ellipse at 88% 14%,rgba(135,119,204,.10),transparent 29%),linear-gradient(135deg,#dbe5ee 0%,#e7eef4 52%,#e1e1ed 100%)!important}
.light-mode .market-strip{background:rgba(218,229,238,.82)!important;border-bottom-color:rgba(62,102,135,.20)!important;color:#36536d!important}.light-mode .market-strip strong{color:#294968!important}.light-mode .market-strip span,.light-mode .market-trust span{color:#60788d!important}
.light-mode .theme-toggle{color:#304f68!important;background:linear-gradient(135deg,#eaf1f5,#d6e3eb)!important;border-color:rgba(75,139,169,.42)!important;box-shadow:0 4px 12px rgba(44,78,108,.14),inset 0 1px rgba(255,255,255,.78)!important}
.light-mode .hero{background:linear-gradient(135deg,rgba(226,237,244,.88),rgba(204,221,233,.86))!important;border-color:rgba(74,137,166,.30)!important;box-shadow:0 20px 44px rgba(49,85,112,.16),0 0 24px rgba(69,157,188,.10),inset 0 1px rgba(255,255,255,.70)!important}.light-mode .hero-title{background:linear-gradient(100deg,#294c70,#287b9c 48%,#655799)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.light-mode .hero-sub,.light-mode .hero-kicker,.light-mode .hero-copy,.light-mode .section-note{color:#61788b!important}.light-mode .hero-copy span{color:#2d829e!important}.light-mode .hero-stats strong{color:#315473!important}.light-mode .hero-stats small{color:#71879a!important}
.light-mode .search-wrap input{background:rgba(224,234,240,.84)!important;color:#294762!important;border-color:rgba(75,139,169,.30)!important;box-shadow:0 7px 18px rgba(47,83,111,.10),inset 0 1px rgba(255,255,255,.68)!important}.light-mode .search-wrap input::placeholder{color:#7a8f9f!important}
.light-mode .cat{background:rgba(218,231,239,.78)!important;color:#526d83!important;border-color:rgba(74,126,153,.22)!important;box-shadow:0 4px 11px rgba(47,83,111,.08)!important}.light-mode .cat:hover,.light-mode .cat.active{color:#315a76!important;background:linear-gradient(135deg,#d9edf1,#dedcf0)!important;border-color:#65aebe!important;box-shadow:0 0 15px rgba(76,161,182,.18)!important}
.light-mode .card{background:linear-gradient(145deg,rgba(224,235,241,.88),rgba(198,216,228,.86))!important;color:#294762!important;border-color:rgba(73,126,153,.25)!important;box-shadow:0 11px 23px rgba(46,82,108,.14),inset 0 1px rgba(255,255,255,.64)!important}.light-mode .card:hover{background:linear-gradient(145deg,rgba(233,242,246,.94),rgba(208,227,236,.90))!important;border-color:#69b5c7!important;box-shadow:0 16px 29px rgba(46,82,108,.18),0 0 20px rgba(75,170,191,.14)!important}.light-mode .card-name{color:#294762!important}.light-mode .card-sub{color:#718799!important}.light-mode .price-from{color:#277c98!important}.light-mode .icon-wrap{background:#dbe9ef!important;border-color:rgba(73,141,164,.25)!important;box-shadow:0 0 13px rgba(71,148,171,.12)!important}
.light-mode .panel{background:linear-gradient(145deg,rgba(224,235,241,.91),rgba(205,220,230,.89))!important;color:#294762!important;border-color:rgba(73,126,153,.28)!important;box-shadow:0 20px 42px rgba(46,82,108,.15),inset 0 1px rgba(255,255,255,.68)!important}.light-mode .panel-title{color:#294762!important}.light-mode .panel-sub,.light-mode .field-title,.light-mode .cart-plan-current{color:#718799!important}.light-mode .info-card,.light-mode .cart-item,.light-mode .preview,.light-mode .input,.light-mode .note-box{background:rgba(215,228,236,.76)!important;color:#3b5a72!important;border-color:rgba(73,126,153,.22)!important}.light-mode .info-card summary,.light-mode .section-title,.light-mode .preview-title{color:#327c98!important}.light-mode .info-content{color:#587389!important}.light-mode .plan-option{background:linear-gradient(145deg,#e0edf2,#ccdee7)!important;color:#34546c!important;border-color:rgba(73,126,153,.28)!important;box-shadow:0 9px 19px rgba(46,82,108,.11),inset 0 1px rgba(255,255,255,.68)!important}.light-mode .plan-option:hover{border-color:#62afbf!important;box-shadow:0 0 20px rgba(75,170,191,.18)!important}.light-mode .plan-option.active{background:linear-gradient(145deg,#d5eef0,#d9d9ec)!important;color:#315c76!important;border-color:#55aabd!important;box-shadow:0 0 0 3px rgba(75,170,191,.12),0 0 22px rgba(75,170,191,.18)!important}.light-mode .site-footer{color:#718799!important;border-color:rgba(73,126,153,.20)!important;text-shadow:none!important}

/* ===== compact-top-strip ===== */
.market-strip,.market-strip-actions,.market-trust{display:none!important}
.floating-theme-control{position:fixed;top:10px;right:14px;z-index:5000}
.floating-theme-control .theme-toggle{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page{padding-top:10px!important}
@media(max-width:640px){.floating-theme-control{top:8px;right:8px}.page{padding-top:8px!important}.floating-theme-control .theme-toggle{font-size:10px;padding:6px 9px}}

/* ===== compact-premium-header ===== */
.compact-header{width:min(1220px,94%);margin:8px auto 4px;min-height:48px;padding:8px 12px 8px 10px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(86,243,255,.18);border-radius:16px;background:linear-gradient(110deg,rgba(9,23,48,.78),rgba(10,17,37,.54));box-shadow:0 10px 26px rgba(0,0,0,.16),0 0 22px rgba(50,136,255,.08),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);animation:compactHeaderIn .7s cubic-bezier(.23,1,.32,1) both}
.compact-brand,.compact-header-right,.compact-header-left{display:flex;align-items:center;gap:9px}.compact-brand{cursor:pointer}.compact-header-left{gap:10px;min-width:0;}.compact-name{font-size:12px;font-weight:950;letter-spacing:1.4px;color:#efffff}.compact-name b{color:#5ff7ff}.compact-label{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#7f9bb4}.compact-divider{width:1px;height:16px;background:rgba(125,174,205,.32)}.compact-orb{width:23px;height:23px;border-radius:8px;background:linear-gradient(145deg,#faffff,#56f3ff 48%,#735dff);box-shadow:0 0 14px rgba(86,243,255,.55);animation:compactOrbPulse 2.6s ease-in-out infinite alternate}.compact-status{font-size:8px;letter-spacing:1px;color:#84a6b9}.compact-status i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#6dffbd;box-shadow:0 0 8px #6dffbd}.compact-header .theme-toggle{position:static!important}.compact-header .theme-toggle{font-size:10px;padding:6px 10px}
@keyframes compactHeaderIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes compactOrbPulse{from{transform:scale(1)}to{transform:scale(1.08);filter:brightness(1.12)}}
.light-mode .compact-header{background:linear-gradient(110deg,rgba(218,231,239,.82),rgba(204,219,229,.70));border-color:rgba(73,126,153,.25);box-shadow:0 9px 22px rgba(46,82,108,.10),inset 0 1px rgba(255,255,255,.65)}.light-mode .compact-name{color:#345571}.light-mode .compact-name b{color:#287f9d}.light-mode .compact-label,.light-mode .compact-status{color:#718799}.light-mode .compact-divider{background:rgba(73,126,153,.28)}
@media(max-width:640px){.compact-header{width:calc(100% - 24px);min-height:44px;padding:7px 8px;gap:8px}.compact-label,.compact-status{display:none}.compact-name{font-size:10px;letter-spacing:1px}.compact-orb{width:20px;height:20px;border-radius:7px}.compact-header-right{margin-left:auto}.compact-header .theme-toggle{font-size:9px;padding:5px 8px}
  /* Account button now sits next to the logo instead of the far right.
     The "GamePay Hub" wordmark keeps its full text -- it's the account
     button that shrinks to just its icon on a narrow phone, since a full
     display name next to it would otherwise force the wordmark down to
     an unreadable "GAME...". */
  .compact-header-left{ min-width:0; flex:0 0 auto; gap:8px; }
  .compact-name{ white-space:nowrap; }
  #myAccountBtn.auth-btn{ padding:7px 8px; }
  #myAccountBtn .auth-btn-label{ display:none; }
  .auth-btn{ font-size:9px; }
}

/* ===== contrast-and-neon-announcement ===== */
.neon-announcement{width:min(1220px,94%);height:30px;margin:7px auto 2px;overflow:hidden;position:relative;border:1px solid rgba(86,243,255,.24);border-radius:999px;background:linear-gradient(90deg,rgba(8,26,53,.70),rgba(25,15,62,.62),rgba(8,26,53,.70));box-shadow:0 0 18px rgba(86,243,255,.14),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.neon-announcement::before,.neon-announcement::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}.neon-announcement::before{left:0;background:linear-gradient(90deg,rgba(7,15,33,.96),transparent)}.neon-announcement::after{right:0;background:linear-gradient(270deg,rgba(7,15,33,.96),transparent)}
.neon-track{height:100%;display:flex;align-items:center;gap:24px;width:max-content;white-space:nowrap;padding-left:100%;animation:neonMarquee 26s linear infinite;color:#bfffff;font-size:10px;font-weight:800;letter-spacing:.35px;text-shadow:0 0 8px rgba(95,247,255,.72)}.neon-track b{color:#a88dff;font-size:13px;text-shadow:0 0 10px rgba(168,141,255,.85)}
@keyframes neonMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.light-mode .neon-announcement{background:linear-gradient(90deg,rgba(192,213,224,.76),rgba(213,207,231,.70),rgba(192,213,224,.76));border-color:rgba(57,121,151,.30);box-shadow:0 0 16px rgba(62,139,165,.13),inset 0 1px rgba(255,255,255,.56)}.light-mode .neon-announcement::before{background:linear-gradient(90deg,rgba(205,220,228,.96),transparent)}.light-mode .neon-announcement::after{background:linear-gradient(270deg,rgba(205,220,228,.96),transparent)}.light-mode .neon-track{color:#234b67;text-shadow:0 0 8px rgba(31,126,160,.25)}.light-mode .neon-track b{color:#65549b;text-shadow:none}
/* Make previously pale/white labels readable in the dim light theme. */
.light-mode .store-heading h2,.light-mode .hero-title,.light-mode .card-name,.light-mode .panel-title,.light-mode .section-title,.light-mode .preview-title,.light-mode .field-title,.light-mode .hero-stats strong{color:#294762!important;text-shadow:none!important}.light-mode .section-kicker,.light-mode .hero-kicker{color:#277c98!important;text-shadow:none!important}.light-mode .hero-copy{color:#385a72!important}.light-mode .hero-copy span{color:#267e9e!important}.light-mode .hero-sub,.light-mode .card-sub,.light-mode .section-note,.light-mode .panel-sub,.light-mode .info-content,.light-mode .cart-plan-current{color:#5a7184!important}.light-mode .price-from{color:#176f8d!important}.light-mode .buy-btn,.light-mode .telegram-btn,.light-mode button{color:#173d5b!important}
@media(max-width:640px){.neon-announcement{height:28px;margin-top:5px}.neon-track{font-size:9px;gap:18px;animation-duration:22s}}
@media(prefers-reduced-motion:reduce){.neon-track{animation:none!important;transform:none!important}}

/* ===== milk-brown-light-order-ui ===== */
/* Soft milk-brown light checkout theme */
.light-mode .order-view{color:#493d35!important}.light-mode .panel{background:linear-gradient(145deg,rgba(236,225,211,.94),rgba(215,199,181,.90))!important;color:#493d35!important;border-color:rgba(126,96,67,.28)!important;box-shadow:0 20px 44px rgba(92,66,43,.15),inset 0 1px rgba(255,250,240,.72)!important}.light-mode .panel-title{color:#493629!important;text-shadow:none!important}.light-mode .panel-sub{color:#7d6a59!important}.light-mode .section-title,.light-mode .preview-title,.light-mode .field-title{color:#805a3f!important;text-shadow:none!important}.light-mode .cart-item{background:rgba(226,211,194,.82)!important;color:#4c3b2f!important;border-color:rgba(126,96,67,.28)!important;box-shadow:0 8px 18px rgba(92,66,43,.10),inset 0 1px rgba(255,250,240,.55)!important}.light-mode .cart-item strong,.light-mode .cart-item b{color:#4b3427!important}.light-mode .cart-plan-current{color:#7b6654!important}.light-mode .preview{background:linear-gradient(145deg,rgba(225,209,191,.88),rgba(207,188,166,.82))!important;color:#4c392d!important;border-color:rgba(126,96,67,.30)!important;box-shadow:0 10px 22px rgba(92,66,43,.12),inset 0 1px rgba(255,250,240,.58)!important}.light-mode .preview-box{background:rgba(249,241,229,.54)!important;color:#4a382d!important;border-color:rgba(126,96,67,.24)!important}.light-mode .input,.light-mode .note-box{background:rgba(244,234,221,.82)!important;color:#49372b!important;border-color:rgba(126,96,67,.30)!important;box-shadow:inset 0 1px rgba(255,250,240,.68)!important}.light-mode .input::placeholder,.light-mode .note-box::placeholder{color:#9a8674!important}.light-mode .input:focus,.light-mode .note-box:focus{border-color:#b17b51!important;box-shadow:0 0 0 3px rgba(177,123,81,.13),0 0 18px rgba(177,123,81,.16)!important}.light-mode .info-card{background:rgba(229,213,196,.82)!important;color:#503d30!important;border-color:rgba(126,96,67,.26)!important}.light-mode .info-card summary{color:#805a3f!important}.light-mode .info-content{color:#6d5948!important}.light-mode .plan-option{background:linear-gradient(145deg,#eadbca,#d8c4ae)!important;color:#543e2f!important;border-color:rgba(126,96,67,.30)!important;box-shadow:0 9px 19px rgba(92,66,43,.12),inset 0 1px rgba(255,250,240,.60)!important}.light-mode .plan-option:hover{border-color:#b17b51!important;box-shadow:0 0 20px rgba(177,123,81,.20)!important}.light-mode .plan-option.active{background:linear-gradient(145deg,#e4c9aa,#d9bda3)!important;color:#4b3122!important;border-color:#b17b51!important;box-shadow:0 0 0 3px rgba(177,123,81,.13),0 0 24px rgba(177,123,81,.22)!important}.light-mode .panel button:not(.theme-toggle){color:#4d3527!important}.light-mode .order-view .telegram-btn{color:#fff8ed!important;background:linear-gradient(135deg,#a86f43,#7d4d35)!important;border-color:rgba(255,240,220,.35)!important;box-shadow:0 0 18px rgba(151,91,54,.20)!important}

/* ===== milky-lavender-light-order-ui ===== */
/* Milky lavender + soft purple glass checkout theme */
.light-mode .order-view{color:#3d3a58!important}.light-mode .panel{background:linear-gradient(145deg,rgba(239,235,249,.93),rgba(216,207,236,.88))!important;color:#3d3a58!important;border-color:rgba(119,102,170,.28)!important;box-shadow:0 20px 44px rgba(91,77,135,.15),inset 0 1px rgba(255,255,255,.78)!important}.light-mode .panel-title{color:#413b69!important;text-shadow:none!important}.light-mode .panel-sub{color:#756d91!important}.light-mode .section-title,.light-mode .preview-title,.light-mode .field-title{color:#67538d!important;text-shadow:none!important}.light-mode .cart-item{background:rgba(226,218,241,.78)!important;color:#443d61!important;border-color:rgba(119,102,170,.25)!important;box-shadow:0 8px 18px rgba(91,77,135,.10),inset 0 1px rgba(255,255,255,.68)!important}.light-mode .cart-item strong,.light-mode .cart-item b{color:#40375f!important}.light-mode .cart-plan-current{color:#776e91!important}.light-mode .preview{background:linear-gradient(145deg,rgba(230,222,243,.86),rgba(209,198,231,.80))!important;color:#443d61!important;border-color:rgba(119,102,170,.28)!important;box-shadow:0 10px 22px rgba(91,77,135,.11),inset 0 1px rgba(255,255,255,.68)!important}.light-mode .preview-box{background:rgba(246,242,252,.58)!important;color:#423a60!important;border-color:rgba(119,102,170,.22)!important}.light-mode .input,.light-mode .note-box{background:rgba(242,237,249,.78)!important;color:#40395e!important;border-color:rgba(119,102,170,.27)!important;box-shadow:inset 0 1px rgba(255,255,255,.74)!important}.light-mode .input::placeholder,.light-mode .note-box::placeholder{color:#9488aa!important}.light-mode .input:focus,.light-mode .note-box:focus{border-color:#9276c1!important;box-shadow:0 0 0 3px rgba(146,118,193,.13),0 0 18px rgba(146,118,193,.16)!important}.light-mode .info-card{background:rgba(228,220,241,.78)!important;color:#4c4268!important;border-color:rgba(119,102,170,.24)!important}.light-mode .info-card summary{color:#67538d!important}.light-mode .info-content{color:#6f6586!important}.light-mode .plan-option{background:linear-gradient(145deg,#e9e1f4,#d9cfea)!important;color:#4b4268!important;border-color:rgba(119,102,170,.28)!important;box-shadow:0 9px 19px rgba(91,77,135,.11),inset 0 1px rgba(255,255,255,.72)!important}.light-mode .plan-option:hover{border-color:#9a7fca!important;box-shadow:0 0 20px rgba(146,118,193,.20)!important}.light-mode .plan-option.active{background:linear-gradient(145deg,#e6d9f5,#d8c8ee)!important;color:#443564!important;border-color:#9a7fca!important;box-shadow:0 0 0 3px rgba(146,118,193,.13),0 0 24px rgba(146,118,193,.22)!important}.light-mode .panel button:not(.theme-toggle){color:#4a3c68!important}.light-mode .order-view .telegram-btn{color:#fffaff!important;background:linear-gradient(135deg,#8061bb,#5b4b9c)!important;border-color:rgba(255,255,255,.34)!important;box-shadow:0 0 18px rgba(102,79,166,.22)!important}.light-mode .remove-btn{color:#675076!important;background:rgba(221,210,239,.82)!important;border-color:rgba(119,102,170,.28)!important}

/* ===== aligned-plan-card-ui ===== */
.plan-option{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;text-align:center;min-height:142px;padding:24px 18px 18px!important}.plan-lines{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;gap:5px}.plan-line-name,.plan-line-meta,.plan-line-price{width:100%;overflow-wrap:anywhere;word-break:break-word}.plan-line-name{font-size:14px;font-weight:900;line-height:1.25;letter-spacing:.1px}.plan-line-meta{font-size:12px;font-weight:700;line-height:1.3;opacity:.84}.plan-line-price{font-size:14px;font-weight:950;line-height:1.25;color:#67f5ff;letter-spacing:.25px}.plan-watermark{position:absolute;z-index:1;width:112px;height:112px;object-fit:contain;right:-10px;bottom:-12px;opacity:.22;filter:none;pointer-events:none;mix-blend-mode:normal}.private-plan .plan-watermark{opacity:.24}.share-plan .plan-watermark{opacity:.22}.light-mode .plan-watermark{opacity:.30;mix-blend-mode:multiply}.light-mode .plan-line-name{color:#4a4168!important}.light-mode .plan-line-meta{color:#756c91!important}.light-mode .plan-line-price{color:#7652b0!important}.light-mode .plan-option{min-height:142px}.out-stock .plan-line-price{color:#9a8fa8!important}@media(max-width:640px){.plan-option{min-height:128px;padding:22px 10px 15px!important}.plan-line-name{font-size:12px}.plan-line-meta{font-size:10px}.plan-line-price{font-size:12px}.plan-watermark{width:92px;height:92px;right:-8px;bottom:-10px;opacity:.28}}

/* ===== storefront-ui-upgrade ===== */
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0 4px}.hero-cta{border:1px solid rgba(54,231,255,.34);border-radius:999px;padding:11px 17px;font-weight:900;letter-spacing:.2px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.hero-cta:hover{transform:translateY(-3px)}.hero-cta-primary{color:#07121f;background:linear-gradient(135deg,#65f6ff,#8d8bff);box-shadow:0 0 22px rgba(54,231,255,.25)}.hero-cta-secondary{color:#dffcff;background:rgba(18,28,56,.56);box-shadow:inset 0 1px rgba(255,255,255,.1)}.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 26px}.trust-item{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid rgba(141,163,231,.16);border-radius:16px;background:linear-gradient(145deg,rgba(31,39,70,.58),rgba(12,14,27,.66));box-shadow:inset 0 1px rgba(255,255,255,.07)}.trust-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;color:#67f5ff;background:rgba(54,231,255,.1);font-weight:950}.trust-item strong{display:block;font-size:11px;color:#f3f7ff}.trust-item small{display:block;margin-top:2px;font-size:10px;color:#8b98b2}.ui-toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:12px 16px;border-radius:999px;background:rgba(12,17,35,.9);border:1px solid rgba(54,231,255,.34);color:#eaffff;box-shadow:0 0 24px rgba(54,231,255,.18);font-size:12px;font-weight:800;transition:opacity .22s ease,transform .22s ease}.ui-toast.show{opacity:1;transform:translate(-50%,0)}.empty-state{grid-column:1/-1;text-align:center;padding:44px 20px;border:1px dashed rgba(54,231,255,.3);border-radius:22px;color:#a7b4ca;background:rgba(21,28,53,.5)}.empty-state strong{display:block;color:#eafcff;font-size:18px;margin-bottom:7px}.empty-state button{margin-top:15px;border:1px solid rgba(54,231,255,.35);border-radius:999px;padding:9px 14px;color:#07121f;background:#67f5ff;font-weight:900;cursor:pointer}.products .card{min-width:0}.card-name{min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center}.card-bottom{margin-top:auto}.light-mode .hero-cta-secondary{color:#514978;background:rgba(235,230,248,.72);border-color:rgba(124,103,178,.3)}.light-mode .trust-item{background:linear-gradient(145deg,rgba(239,235,249,.88),rgba(222,215,239,.8));border-color:rgba(124,103,178,.2)}.light-mode .trust-item strong{color:#4a4168}.light-mode .trust-item small{color:#776e91}.light-mode .trust-icon{color:#7357a8;background:rgba(134,105,193,.11)}.light-mode .empty-state{color:#71668b;background:rgba(235,230,247,.62);border-color:rgba(124,103,178,.3)}.light-mode .empty-state strong{color:#4a4168}.light-mode .ui-toast{background:rgba(247,243,253,.96);color:#4b4168;border-color:rgba(124,103,178,.3)}.categories{position:sticky;top:8px;z-index:12;padding:8px 6px;background:linear-gradient(180deg,rgba(11,14,28,.96),rgba(11,14,28,.72),transparent);backdrop-filter:blur(10px)}.light-mode .categories{background:linear-gradient(180deg,rgba(239,235,248,.96),rgba(239,235,248,.74),transparent)}@media(max-width:760px){.trust-row{grid-template-columns:repeat(2,1fr);gap:8px}.trust-item{padding:10px}.trust-item strong{font-size:10px}.trust-item small{font-size:9px}.hero-actions{margin-top:16px}.hero-cta{padding:10px 13px;font-size:11px}}@media(max-width:460px){.trust-row{grid-template-columns:1fr 1fr}.trust-item{gap:7px}.trust-icon{width:24px;height:24px;font-size:11px}.hero-cta{width:100%}}

/* ===== plan-filter-ui ===== */
.plan-filters{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 12px}.plan-filter{border:1px solid rgba(141,163,231,.22);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.05);color:#9faec7;font-size:10px;font-weight:850;cursor:pointer;transition:.2s ease}.plan-filter.active,.plan-filter:hover{color:#07121f;background:#67f5ff;border-color:#67f5ff;box-shadow:0 0 16px rgba(54,231,255,.18)}.light-mode .plan-filter{background:rgba(235,230,248,.72);color:#766b91;border-color:rgba(124,103,178,.25)}.light-mode .plan-filter.active,.light-mode .plan-filter:hover{color:#fff;background:#8265b6;border-color:#8265b6}@media(max-width:460px){.plan-filter{font-size:9px;padding:6px 8px}}

/* ===== professional-plan-cards ===== */
.plan-professional{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:15px;text-align:left}.plan-primary-line{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}.plan-field-label{display:block;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:1px;font-weight:950;color:#8d9ab4;opacity:.85}.plan-professional-name{display:block;max-width:100%;font-size:15px;line-height:1.25;letter-spacing:.1px;overflow-wrap:anywhere;color:#f5f8ff}.plan-access-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;color:#8fffff;background:rgba(54,231,255,.11);border:1px solid rgba(54,231,255,.28);font-size:9px;font-weight:950;letter-spacing:.2px}.plan-secondary-line{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;padding-top:11px;border-top:1px solid rgba(141,163,231,.16)}.plan-secondary-line>div{display:flex;flex-direction:column;gap:5px;min-width:0}.plan-secondary-line strong{font-size:13px;line-height:1.2;color:#dce5f7;overflow-wrap:anywhere}.plan-price-block{text-align:right}.plan-price-block strong{font-size:18px;color:#67f5ff;letter-spacing:.2px;white-space:nowrap}.light-mode .plan-field-label{color:#857a9f}.light-mode .plan-professional-name{color:#4a4168!important}.light-mode .plan-secondary-line{border-top-color:rgba(124,103,178,.18)}.light-mode .plan-secondary-line strong{color:#655b7f!important}.light-mode .plan-price-block strong{color:#7652b0!important}.light-mode .plan-access-badge{color:#694b9d;background:rgba(134,105,193,.12);border-color:rgba(134,105,193,.28)}@media(max-width:640px){.plan-professional{gap:12px}.plan-professional-name{font-size:13px}.plan-secondary-line strong{font-size:11px}.plan-price-block strong{font-size:15px}.plan-field-label{font-size:8px}.plan-option{min-height:136px!important}}

/* ===== light-checkout-contrast ===== */
/* High-contrast checkout CTA for the milky-lavender light theme */
.light-mode #continueBtn.telegram-btn {
  color: #ffffff !important;
  background: linear-gradient(100deg, #5b3fc4 0%, #7861e8 48%, #9a6df1 100%) !important;
  border: 1px solid rgba(104, 74, 190, .72) !important;
  box-shadow: 0 12px 26px rgba(93, 65, 176, .28), 0 0 22px rgba(141, 108, 232, .28) !important;
  text-shadow: 0 1px 4px rgba(37, 23, 86, .48) !important;
  font-weight: 950 !important;
  letter-spacing: .1px;
}
.light-mode #continueBtn.telegram-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(100deg, #4d32b3 0%, #6c55dc 48%, #8d5ee5 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 30px rgba(93, 65, 176, .34), 0 0 28px rgba(141, 108, 232, .34) !important;
}
.light-mode #continueBtn.telegram-btn:active { transform: translateY(0) scale(.985) !important; }

/* ===== telegram-cta-polish ===== */
/* Clear, premium Telegram CTA for the milky-lavender light theme */
.light-mode #orderBtn.telegram-btn {
  color: #ffffff !important;
  background: linear-gradient(100deg, #4e2aa8 0%, #6f43d7 48%, #8d55df 100%) !important;
  border: 1px solid rgba(78, 42, 168, .78) !important;
  box-shadow: 0 12px 28px rgba(78, 42, 168, .30), 0 0 24px rgba(141, 85, 223, .26) !important;
  text-shadow: 0 1px 4px rgba(29, 15, 75, .55) !important;
  font-weight: 950 !important;
}
.light-mode #orderBtn.telegram-btn:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(100deg, #43218f 0%, #6339c9 48%, #7e45d2 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(78, 42, 168, .36), 0 0 30px rgba(141, 85, 223, .34) !important;
}
.light-mode #orderBtn.telegram-btn:disabled { opacity: .48; filter: saturate(.72); }
.checkout-trustline {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:9px 0 0; padding:8px 10px; border-radius:12px;
  font-size:10px; font-weight:800; letter-spacing:.1px;
  color:#aebbd2; background:rgba(255,255,255,.035);
  border:1px solid rgba(141,163,231,.13);
}
.checkout-trustline b { color:#67f5ff; }
.light-mode .checkout-trustline { color:#675d80; background:rgba(235,230,248,.62); border-color:rgba(124,103,178,.2); }
.light-mode .checkout-trustline b { color:#6540ae; }
@media(max-width:460px){ .checkout-trustline{font-size:9px;padding:7px 8px} }

/* ===== premium-storefront-package ===== */
/* Restrained premium marketplace polish */
.card .card-bottom{display:flex;flex-direction:column;align-items:center;gap:7px}
.card-status-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-height:20px}
.status-pill,.feature-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:9px;line-height:1;font-weight:950;letter-spacing:.25px;white-space:nowrap}
.status-pill.status-available{color:#91fff0;background:rgba(33,214,187,.11);border:1px solid rgba(33,214,187,.28)}
.status-pill.status-limited{color:#ffe29b;background:rgba(255,190,72,.12);border:1px solid rgba(255,190,72,.3)}
.status-pill.status-coming,.status-pill.status-sold{color:#ffb4c0;background:rgba(255,86,116,.11);border:1px solid rgba(255,86,116,.3)}
.feature-pill{color:#d9c9ff;background:rgba(145,104,255,.13);border:1px solid rgba(145,104,255,.28)}
.light-mode .status-pill.status-available{color:#197c70;background:rgba(38,180,158,.12);border-color:rgba(38,180,158,.3)}
.light-mode .status-pill.status-limited{color:#91600b;background:rgba(232,169,44,.14);border-color:rgba(232,169,44,.34)}
.light-mode .status-pill.status-coming,.light-mode .status-pill.status-sold{color:#a13e58;background:rgba(226,76,112,.11);border-color:rgba(226,76,112,.28)}
.light-mode .feature-pill{color:#6540a2;background:rgba(134,105,193,.13);border-color:rgba(134,105,193,.28)}
.summary{position:relative;overflow:hidden;border-radius:18px!important}
.summary::before{content:"ORDER SUMMARY";display:block;margin-bottom:9px;color:#8e9db8;font-size:9px;font-weight:950;letter-spacing:1.5px}
.light-mode .summary::before{color:#75688d}
.checkout-support-shortcut{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;font-size:10px;font-weight:850;color:#aebbd2}
.checkout-support-shortcut a{color:#67f5ff;text-decoration:none;font-weight:950}
.light-mode .checkout-support-shortcut{color:#6f6387}.light-mode .checkout-support-shortcut a{color:#6540ae}
@media(max-width:520px){.status-pill,.feature-pill{font-size:8px;padding:5px 7px}.card-status-row{gap:5px}.checkout-support-shortcut{font-size:9px}}

/* ===== plan-page-neon-fix ===== */
/* Plan page: remove the large catalog hero while an order is open. */
body.order-mode .hero{display:none!important}
body.order-mode .neon-announcement{display:none!important}
body.order-mode .page{padding-top:18px!important}
body.order-mode .order-view{margin-top:8px!important}

/* Brighter cyan / electric-blue glass cards instead of grey cards. */
.order-view .plan-option{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(86,243,255,.20),transparent 38%),
    linear-gradient(145deg,rgba(18,62,96,.98),rgba(8,24,51,.98) 54%,rgba(39,25,86,.98))!important;
  border:1px solid rgba(86,243,255,.42)!important;
  color:#ecffff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.30),0 0 18px rgba(35,120,255,.16),inset 0 1px rgba(255,255,255,.12)!important;
  transition:transform .22s cubic-bezier(.23,1,.32,1),border-color .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.order-view .plan-option::after{
  content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#56f3ff,#8b7dff,transparent);
  opacity:.42;box-shadow:0 0 14px rgba(86,243,255,.72);pointer-events:none;z-index:1;
}
.order-view .plan-option:hover{
  transform:translateY(-4px)!important;
  border-color:#56f3ff!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(86,243,255,.30),transparent 42%),
    linear-gradient(145deg,rgba(22,81,119,.98),rgba(10,33,68,.98) 54%,rgba(52,30,112,.98))!important;
  box-shadow:0 20px 38px rgba(0,0,0,.36),0 0 28px rgba(86,243,255,.28),inset 0 1px rgba(255,255,255,.18)!important;
}
.order-view .plan-option.active{
  background:
    radial-gradient(circle at 18% 0%,rgba(191,255,255,.34),transparent 43%),
    linear-gradient(145deg,rgba(24,107,139,.98),rgba(15,53,97,.98) 52%,rgba(69,41,139,.98))!important;
  border-color:#c7ffff!important;
  box-shadow:0 0 0 3px rgba(86,243,255,.16),0 0 34px rgba(86,243,255,.48),0 18px 35px rgba(0,0,0,.30)!important;
}
.order-view .plan-field-label{color:#7fefff!important;text-shadow:0 0 9px rgba(86,243,255,.24)}
.order-view .plan-professional-name,.order-view .plan-secondary-line strong{color:#f1ffff!important;text-shadow:0 0 10px rgba(86,243,255,.10)}
.order-view .plan-price-block strong{color:#67f5ff!important;text-shadow:0 0 13px rgba(86,243,255,.48)}
.order-view .plan-access-badge{color:#dfffff!important;background:rgba(86,243,255,.14)!important;border-color:rgba(86,243,255,.48)!important}

/* Watermarks stay visible above the card glow and fail quietly if an asset is unavailable. */
.order-view .plan-watermark{display:block!important;z-index:2!important;width:118px!important;height:118px!important;right:-8px!important;bottom:-12px!important;object-fit:contain!important;opacity:.34!important;filter:drop-shadow(0 0 10px rgba(86,243,255,.36))!important;pointer-events:none!important}
.order-view .private-plan .plan-watermark{opacity:.38!important;filter:drop-shadow(0 0 12px rgba(86,243,255,.48))!important}
.order-view .share-plan .plan-watermark{opacity:.34!important;filter:drop-shadow(0 0 12px rgba(139,92,255,.50))!important}
.order-view .plan-professional{z-index:3!important}

/* Mobile: preserve readable columns and prevent long names/prices from colliding. */
@media(max-width:640px){
  body.order-mode .page{width:calc(100% - 18px)!important;padding-top:10px!important}
  .order-view .plan-option{min-height:136px!important;padding:21px 11px 16px!important}
  .order-view .plan-professional{gap:11px!important;text-align:left!important}
  .order-view .plan-primary-line{align-items:flex-start!important;min-width:0!important}
  .order-view .plan-professional-name{font-size:12px!important;line-height:1.28!important;max-width:100%!important}
  .order-view .plan-secondary-line{grid-template-columns:minmax(0,1fr) minmax(82px,auto)!important;gap:9px!important;padding-top:10px!important}
  .order-view .plan-secondary-line strong{font-size:11px!important;line-height:1.24!important;overflow-wrap:anywhere!important}
  .order-view .plan-price-block{text-align:right!important;min-width:0!important}
  .order-view .plan-price-block strong{font-size:14px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .order-view .plan-watermark{width:88px!important;height:88px!important;right:-7px!important;bottom:-9px!important;opacity:.31!important}
}

/* ===== plan-structural-final-fix ===== */
/* Structural isolation: checkout must never carry the catalog hero with it. */
.catalog-shell{display:block!important}
body.order-mode .catalog-shell{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
body.order-mode .compact-header{margin-bottom:6px!important}
body.order-mode .order-view{display:block!important;visibility:visible!important;opacity:1!important}
/* Account/Notice/My Orders/Message are meant to read as standalone pages,
   the same way News and the Noti hub already do (those cover the header
   entirely, being full-screen overlays) -- unlike them these four are
   normal in-flow content, so the header has to be hidden explicitly
   instead of just being painted over. Scoped to its own class rather
   than the broader order-mode, which also covers the product/checkout
   flow where the header should stay reachable. */
body.hub-page-mode .compact-header{display:none!important}

/* Final high-contrast dark card palette; declared after every legacy theme block. */
@media(max-width:640px){
  .order-view .panel{width:100%!important}
  .order-view .plan-option{min-height:136px!important}
  .order-view .plan-secondary-line{grid-template-columns:minmax(0,1fr) 88px!important}
  .order-view .plan-price-block strong{font-size:13px!important}
}

/* ===== light-plan-card-final-theme ===== */
/* Light mode intentionally uses its own milky-lavender glass language. */
body.light-mode .order-view .plan-option{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,255,255,.92),transparent 38%),
    linear-gradient(145deg,#fbf8ff 0%,#f0ebff 54%,#e9f8ff 100%)!important;
  border:1px solid rgba(132,104,190,.28)!important;
  color:#40365f!important;
  box-shadow:0 12px 26px rgba(102,78,148,.14),0 0 18px rgba(170,143,232,.15),inset 0 1px rgba(255,255,255,.95)!important;
}
body.light-mode .order-view .plan-option::after{
  background:linear-gradient(90deg,transparent,#9d7ee8,#76dbe7,transparent)!important;
  box-shadow:0 0 12px rgba(125,112,220,.30)!important;
  opacity:.52!important;
}
body.light-mode .order-view .plan-option:hover{
  transform:translateY(-4px)!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.98),transparent 42%),
    linear-gradient(145deg,#ffffff 0%,#f2edff 52%,#e8fbff 100%)!important;
  border-color:#9d7ee8!important;
  box-shadow:0 18px 32px rgba(102,78,148,.16),0 0 24px rgba(125,112,220,.22),inset 0 1px rgba(255,255,255,.98)!important;
}
body.light-mode .order-view .plan-option.active{
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,1),transparent 43%),
    linear-gradient(145deg,#eee7ff 0%,#e9e5ff 52%,#e4faff 100%)!important;
  border-color:#7f68c8!important;
  box-shadow:0 0 0 3px rgba(127,104,200,.13),0 0 26px rgba(125,112,220,.27),0 14px 28px rgba(102,78,148,.15),inset 0 1px rgba(255,255,255,.98)!important;
}
body.light-mode .order-view .plan-field-label{color:#7b6a9e!important;text-shadow:none!important}
body.light-mode .order-view .plan-professional-name,
body.light-mode .order-view .plan-secondary-line strong{color:#4a4168!important;text-shadow:none!important}
body.light-mode .order-view .plan-price-block strong{color:#7652b0!important;text-shadow:none!important}
body.light-mode .order-view .plan-access-badge{color:#67519a!important;background:rgba(145,119,209,.12)!important;border-color:rgba(132,104,190,.28)!important}
body.light-mode .order-view .plan-watermark{opacity:.24!important;filter:drop-shadow(0 0 8px rgba(125,112,220,.22))!important;mix-blend-mode:multiply!important}
body.light-mode .order-view .private-plan .plan-watermark{opacity:.26!important}
body.light-mode .order-view .share-plan .plan-watermark{opacity:.23!important;filter:drop-shadow(0 0 8px rgba(125,112,220,.24))!important}
@media(max-width:640px){
  body.light-mode .order-view .plan-option{min-height:136px!important}
  body.light-mode .order-view .plan-professional-name{font-size:12px!important}
  body.light-mode .order-view .plan-secondary-line strong{font-size:11px!important}
  body.light-mode .order-view .plan-price-block strong{font-size:13px!important}
}

/* ===== premium-header-contrast-final ===== */
/* Premium header and hero typography: readable in both themes. */
.compact-header{
  position:relative!important;overflow:hidden!important;
  min-height:54px!important;padding:9px 14px 9px 11px!important;
  border:1px solid rgba(86,243,255,.38)!important;border-radius:18px!important;
  background:linear-gradient(110deg,rgba(7,28,57,.96),rgba(13,22,49,.90) 58%,rgba(37,19,73,.88))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.26),0 0 24px rgba(86,243,255,.15),inset 0 1px rgba(255,255,255,.12)!important;
}
.compact-header::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#56f3ff,#8d7cff,transparent);box-shadow:0 0 14px rgba(86,243,255,.45);opacity:.72;pointer-events:none}
.compact-name{font-size:13px!important;letter-spacing:1.8px!important;color:#f4ffff!important;text-shadow:0 0 10px rgba(86,243,255,.16)!important}
.compact-name b{color:#68f6ff!important;text-shadow:0 0 12px rgba(86,243,255,.60)!important}
.compact-label{font-size:9px!important;letter-spacing:1.9px!important;color:#9bb5cd!important}
.compact-divider{height:20px!important;background:rgba(126,205,225,.42)!important}
.compact-status{font-size:9px!important;color:#a8c6d3!important;letter-spacing:1.2px!important}
.compact-status i{width:7px!important;height:7px!important;background:#6dffbd!important;box-shadow:0 0 10px #6dffbd!important}
.compact-header .theme-toggle{position:relative!important;z-index:2!important;color:#dffeff!important;background:rgba(86,243,255,.11)!important;border-color:rgba(86,243,255,.42)!important;box-shadow:0 0 14px rgba(86,243,255,.14),inset 0 1px rgba(255,255,255,.10)!important}
.compact-header .theme-toggle:hover{background:rgba(86,243,255,.22)!important;border-color:#8cffff!important;box-shadow:0 0 22px rgba(86,243,255,.30)!important}

.hero{border-color:rgba(86,243,255,.30)!important;background:linear-gradient(145deg,rgba(9,30,61,.94),rgba(12,18,42,.86) 55%,rgba(31,18,62,.72))!important;box-shadow:0 18px 44px rgba(0,0,0,.26),0 0 26px rgba(35,120,255,.12),inset 0 1px rgba(255,255,255,.10)!important}
.hero-title{color:#f5ffff!important;text-shadow:0 0 18px rgba(86,243,255,.38),0 2px 14px rgba(0,0,0,.28)!important}
.hero-sub{color:#b9d6e6!important;text-shadow:0 0 8px rgba(86,243,255,.14)!important}
.hero-kicker{color:#70f4ff!important;text-shadow:0 0 12px rgba(86,243,255,.34)!important}
.hero-copy{color:#e9f8ff!important}.hero-copy span{color:#72efff!important;text-shadow:0 0 12px rgba(86,243,255,.32)!important}

body.light-mode .compact-header{
  border-color:rgba(126,101,188,.32)!important;
  background:linear-gradient(110deg,rgba(255,253,255,.98),rgba(244,239,255,.96) 58%,rgba(232,249,255,.95))!important;
  box-shadow:0 12px 28px rgba(93,72,137,.13),0 0 22px rgba(151,126,216,.12),inset 0 1px #fff!important;
}
body.light-mode .compact-header::after{background:linear-gradient(90deg,transparent,#9a7bd9,#6fcbd5,transparent)!important;box-shadow:0 0 12px rgba(126,101,188,.22)!important;opacity:.62!important}
body.light-mode .compact-name{color:#44365f!important;text-shadow:none!important}.light-mode .compact-name b{color:#7455b0!important;text-shadow:none!important}
body.light-mode .compact-label{color:#786b94!important}.light-mode .compact-divider{background:rgba(126,101,188,.30)!important}.light-mode .compact-status{color:#6d6286!important}.light-mode .compact-status i{background:#36b77a!important;box-shadow:0 0 8px rgba(54,183,122,.40)!important}
body.light-mode .compact-header .theme-toggle{color:#51406f!important;background:linear-gradient(135deg,rgba(239,232,255,.96),rgba(226,248,252,.94))!important;border-color:rgba(126,101,188,.36)!important;box-shadow:0 5px 14px rgba(93,72,137,.10),inset 0 1px #fff!important}
body.light-mode .compact-header .theme-toggle:hover{color:#382651!important;background:#fff!important;border-color:#9a7bd9!important;box-shadow:0 0 18px rgba(126,101,188,.22)!important}
body.light-mode .hero{border-color:rgba(126,101,188,.30)!important;background:linear-gradient(145deg,rgba(255,253,255,.98),rgba(246,241,255,.96) 55%,rgba(232,249,255,.95))!important;box-shadow:0 18px 42px rgba(93,72,137,.13),0 0 24px rgba(126,101,188,.10),inset 0 1px #fff!important}
body.light-mode .hero-title{color:#44365f!important;text-shadow:0 3px 12px rgba(93,72,137,.12)!important}.light-mode .hero-sub{color:#70638a!important;text-shadow:none!important}.light-mode .hero-kicker{color:#7756b2!important;text-shadow:none!important}.light-mode .hero-copy{color:#51436d!important}.light-mode .hero-copy span{color:#358e9d!important;text-shadow:none!important}
@media(max-width:640px){.compact-header{min-height:48px!important;padding:8px 10px!important}.compact-name{font-size:11px!important;letter-spacing:1.3px!important}.compact-header .theme-toggle{font-size:9px!important;padding:6px 9px!important}.hero-title{font-size:clamp(25px,8vw,42px)!important}.hero-sub{font-size:12px!important}.hero-kicker{font-size:9px!important;letter-spacing:1.5px!important}.hero-copy{font-size:13px!important}}

/* ===== premium-benefit-tags-final ===== */
/* Clean premium benefit strip: less dashboard-like, more storefront-like. */
.trust-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:16px 0 28px!important}
.trust-item{position:relative!important;min-width:0!important;display:grid!important;grid-template-columns:auto auto minmax(0,1fr)!important;align-items:center!important;gap:8px!important;padding:12px 13px!important;border:1px solid rgba(100,153,197,.22)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(18,36,67,.78),rgba(19,22,49,.72))!important;box-shadow:0 8px 20px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.09)!important;overflow:hidden!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.trust-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#56f3ff,#8f7cff);box-shadow:0 0 10px rgba(86,243,255,.42);opacity:.75}
.trust-item:hover{transform:translateY(-3px)!important;border-color:rgba(86,243,255,.52)!important;box-shadow:0 13px 25px rgba(0,0,0,.20),0 0 18px rgba(86,243,255,.12),inset 0 1px rgba(255,255,255,.12)!important}
.trust-index{align-self:start;padding-top:1px;color:#6e9bb6!important;font-size:8px!important;line-height:1!important;font-weight:900!important;letter-spacing:.6px!important}
.trust-icon{width:25px!important;height:25px!important;border-radius:9px!important;color:#8ff8ff!important;background:linear-gradient(145deg,rgba(86,243,255,.18),rgba(118,92,255,.16))!important;border:1px solid rgba(86,243,255,.24)!important;font-size:12px!important;box-shadow:0 0 12px rgba(86,243,255,.10)!important}
.trust-item strong{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#eefcff!important;font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:10px!important;font-weight:850!important;letter-spacing:.15px!important}
.trust-item small{display:block!important;margin-top:3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#8fa9bc!important;font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:8px!important;line-height:1.2!important;letter-spacing:.05px!important}
body.light-mode .trust-item{border-color:rgba(126,101,188,.22)!important;background:linear-gradient(135deg,rgba(255,253,255,.92),rgba(241,235,255,.88) 58%,rgba(234,250,253,.86))!important;box-shadow:0 8px 20px rgba(93,72,137,.10),inset 0 1px #fff!important}
body.light-mode .trust-item::before{background:linear-gradient(180deg,#9a7bd9,#6fcbd5)!important;box-shadow:0 0 9px rgba(126,101,188,.26)!important}
body.light-mode .trust-item:hover{border-color:rgba(126,101,188,.46)!important;box-shadow:0 13px 25px rgba(93,72,137,.14),0 0 17px rgba(126,101,188,.12),inset 0 1px #fff!important}
body.light-mode .trust-index{color:#9a86b9!important}.light-mode .trust-icon{color:#7658b0!important;background:linear-gradient(145deg,rgba(154,123,217,.14),rgba(111,203,213,.14))!important;border-color:rgba(126,101,188,.23)!important;box-shadow:none!important}.light-mode .trust-item strong{color:#4a4168!important}.light-mode .trust-item small{color:#7e7198!important}
@media(max-width:760px){.trust-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.trust-item{padding:11px 10px!important}}
@media(max-width:430px){.trust-item{grid-template-columns:auto auto minmax(0,1fr)!important;gap:6px!important;padding:10px 8px!important}.trust-index{font-size:7px!important}.trust-icon{width:22px!important;height:22px!important;font-size:10px!important}.trust-item strong{font-size:9px!important}.trust-item small{font-size:7px!important}}

/* ===== single-market-highlight-final ===== */
/* One clean premium highlight instead of four crowded tags. */
.market-highlight{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;margin:16px 0 28px;padding:10px 14px;border:1px solid rgba(86,243,255,.26);border-radius:18px;background:linear-gradient(105deg,rgba(13,38,67,.86),rgba(24,24,59,.78) 60%,rgba(43,22,75,.68));box-shadow:0 10px 24px rgba(0,0,0,.16),0 0 20px rgba(86,243,255,.10),inset 0 1px rgba(255,255,255,.09);overflow:hidden}
.market-highlight::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#56f3ff,#8d7cff);box-shadow:0 0 13px rgba(86,243,255,.50)}
.market-highlight::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#56f3ff,#8d7cff,transparent);opacity:.52}
.market-highlight-mark{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;color:#061522;background:linear-gradient(145deg,#f5ffff,#56f3ff 50%,#8270ff);font-weight:950;font-size:15px;box-shadow:0 0 18px rgba(86,243,255,.30)}
.market-highlight-copy{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:4px}.market-highlight-copy strong{color:#f2ffff;font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif;font-size:12px;font-weight:900;letter-spacing:.1px}.market-highlight-copy span{color:#9eb6c9;font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif;font-size:9px;letter-spacing:.15px}.market-highlight-status{position:relative;z-index:1;margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:#8be8c1;font-size:8px;letter-spacing:1.2px;font-weight:900}.market-highlight-status i{width:6px;height:6px;border-radius:50%;background:#6dffbd;box-shadow:0 0 9px rgba(109,255,189,.72)}
body.light-mode .market-highlight{border-color:rgba(126,101,188,.25);background:linear-gradient(105deg,rgba(255,253,255,.95),rgba(243,237,255,.92) 60%,rgba(232,249,255,.92));box-shadow:0 10px 24px rgba(93,72,137,.11),0 0 18px rgba(126,101,188,.10),inset 0 1px #fff}.light-mode .market-highlight::before{background:linear-gradient(180deg,#9a7bd9,#6fcbd5);box-shadow:0 0 10px rgba(126,101,188,.28)}.light-mode .market-highlight::after{background:linear-gradient(90deg,transparent,#9a7bd9,#6fcbd5,transparent);opacity:.44}.light-mode .market-highlight-mark{color:#fffaff;background:linear-gradient(145deg,#8e73c8,#6a57a9);box-shadow:0 0 15px rgba(126,101,188,.22)}.light-mode .market-highlight-copy strong{color:#4a4168}.light-mode .market-highlight-copy span{color:#7e7198}.light-mode .market-highlight-status{color:#4f9474}.light-mode .market-highlight-status i{background:#36b77a;box-shadow:0 0 7px rgba(54,183,122,.38)}
@media(max-width:520px){.market-highlight{min-height:54px;gap:9px;padding:9px 10px;border-radius:15px}.market-highlight-mark{flex-basis:29px;width:29px;height:29px;font-size:13px;border-radius:9px}.market-highlight-copy strong{font-size:10px}.market-highlight-copy span{font-size:7px;letter-spacing:0}.market-highlight-status{font-size:7px;gap:4px}.market-highlight-status i{width:5px;height:5px}}

/* ===== watermark-reliability-final ===== */
/* Watermarks remain visible even when a deployment misses the PNG assets. */
.plan-watermark-wrap{position:absolute;z-index:2;right:-8px;bottom:-12px;width:124px;height:124px;display:block;pointer-events:none;opacity:1}
.plan-watermark-wrap .plan-watermark{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.plan-watermark-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:#56f3ff;font-size:13px;font-weight:950;letter-spacing:2px;transform:rotate(-18deg);text-shadow:0 0 12px currentColor;opacity:.28}
.plan-watermark-fallback.show{display:flex}
.private-plan .plan-watermark-wrap{filter:drop-shadow(0 0 12px rgba(86,243,255,.48))}.share-plan .plan-watermark-wrap{filter:drop-shadow(0 0 12px rgba(150,113,255,.62))}.private-plan .private-fallback{color:#56f3ff}.share-plan .share-fallback{color:#a78bff}
body.light-mode .plan-watermark-wrap{opacity:.82;filter:drop-shadow(0 0 8px rgba(126,101,188,.24))}.light-mode .plan-watermark-fallback{color:#7652b0;text-shadow:none;opacity:.20}.light-mode .share-plan .share-fallback{color:#6c5aa7}
@media(max-width:640px){.plan-watermark-wrap{width:94px;height:94px;right:-7px;bottom:-9px}.plan-watermark-fallback{font-size:9px;letter-spacing:1.3px}}

/* ===== mobile-three-premium-motion-final ===== */
/* Mobile: three products per row, with compact but readable cards. */
@media(max-width:640px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .products .card{min-width:0!important;border-radius:14px!important;padding:8px 5px 7px!important}
  .products .card-image,.products .card img{width:54px!important;height:54px!important;border-radius:14px!important}
  .products .card-name{min-height:30px!important;font-size:9px!important;line-height:1.15!important;overflow-wrap:anywhere!important}
  .products .card-note{font-size:7px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .products .card-price,.products .card-bottom{font-size:8px!important}
  .products .buy-btn,.products button{font-size:8px!important;padding:6px 5px!important;border-radius:8px!important}
  .products .hot-badge,.products .stock-badge{font-size:7px!important;padding:3px 4px!important}
}
@media(max-width:390px){.products{gap:5px!important}.products .card{padding:7px 3px 6px!important}.products .card-image,.products .card img{width:47px!important;height:47px!important}.products .card-name{font-size:8px!important}.products .card-note{font-size:6px!important}.products .buy-btn,.products button{font-size:7px!important;padding:5px 3px!important}}

/* Premium motion: lightweight transforms and opacity only, avoiding layout thrash. */
@keyframes gpHeadingFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes gpHeadingShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes gpFeatureSweep{0%{transform:translateX(-120%);opacity:0}18%{opacity:.55}55%,100%{transform:translateX(120%);opacity:0}}
@keyframes gpPlanBreath{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 0 rgba(86,243,255,0)}50%{box-shadow:0 10px 26px rgba(0,0,0,.20),0 0 18px rgba(86,243,255,.12)}}
@keyframes gpPlanReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero-title{background-size:220% 100%!important;animation:gpHeadingFloat 4.6s ease-in-out infinite,gpHeadingShimmer 7s linear infinite!important;will-change:transform,background-position}
.hero-kicker{animation:gpHeadingFloat 5.4s ease-in-out .2s infinite!important;will-change:transform}
.market-highlight{isolation:isolate!important;animation:gpPlanBreath 4.8s ease-in-out infinite!important}
.market-highlight::after{width:30%!important;left:-35%!important;right:auto!important;height:100%!important;bottom:0!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)!important;opacity:.8!important;transform:skewX(-18deg);animation:gpFeatureSweep 5.8s ease-in-out infinite!important;z-index:0}
.plan-option{animation:gpPlanReveal .42s cubic-bezier(.23,1,.32,1) both,gpPlanBreath 5.2s ease-in-out infinite!important;will-change:transform,box-shadow}
.plan-option:nth-child(2){animation-delay:.08s,.8s!important}.plan-option:nth-child(3){animation-delay:.16s,1.6s!important}.plan-option:nth-child(4){animation-delay:.24s,2.4s!important}
.plan-option:hover,.plan-option.active{transform:translateY(-3px) scale(1.008)!important}
.products .card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
.products .card:hover{transform:translateY(-4px)!important}
body.light-mode .market-highlight{animation:gpPlanBreathLight 4.8s ease-in-out infinite!important}
@keyframes gpPlanBreathLight{0%,100%{box-shadow:0 8px 22px rgba(93,72,137,.10),0 0 0 rgba(126,101,188,0)}50%{box-shadow:0 10px 26px rgba(93,72,137,.13),0 0 17px rgba(126,101,188,.14)}}
body.light-mode .plan-option{animation-name:gpPlanReveal,gpPlanBreathLight!important}
@media(prefers-reduced-motion:reduce){.hero-title,.hero-kicker,.market-highlight,.market-highlight::after,.plan-option{animation:none!important}.products .card{transition:none!important}}

/* ===== 2d-game-bridge-final ===== */
/* Lightweight 2D game-style bridge between hero and catalog. */
.game-bridge{position:relative;display:flex;align-items:center;gap:15px;margin:10px 0 18px;padding:8px 15px 8px 12px;min-height:55px;border:1px solid rgba(86,243,255,.20);border-radius:17px;background:linear-gradient(90deg,rgba(8,23,47,.60),rgba(24,22,57,.54),rgba(11,37,53,.54));box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 20px rgba(86,243,255,.06);overflow:hidden;isolation:isolate}
.game-bridge::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(86,243,255,.045) 6px 7px);opacity:.46;pointer-events:none;z-index:-1}
.game-bridge::after{content:"";position:absolute;left:-22%;top:0;width:18%;height:100%;background:linear-gradient(90deg,transparent,rgba(86,243,255,.20),transparent);transform:skewX(-18deg);animation:bridgeScan 4.2s ease-in-out infinite;pointer-events:none}
.game-bridge-track{position:relative;flex:1;height:29px;min-width:180px;border-bottom:2px solid rgba(86,243,255,.42);background:repeating-linear-gradient(90deg,rgba(86,243,255,.20) 0 2px,transparent 2px 16px);box-shadow:0 7px 12px -10px #56f3ff}
.game-bridge-track::before{content:"";position:absolute;left:4%;right:4%;top:8px;height:1px;background:linear-gradient(90deg,transparent,#56f3ff 18%,#9a7cff 72%,transparent);opacity:.72}
.bridge-node,.bridge-spark,.bridge-player,.bridge-goal{position:absolute;display:block;z-index:2}.bridge-node{bottom:-4px;width:7px;height:7px;border-radius:2px;background:#56f3ff;box-shadow:0 0 9px #56f3ff;animation:bridgeNode 1.8s ease-in-out infinite}.node-a{left:18%}.node-b{left:51%;animation-delay:.45s;background:#a98bff;box-shadow:0 0 9px #a98bff}.node-c{left:78%;animation-delay:.9s}.bridge-player{left:38%;top:1px;color:#ecffff;font-size:16px;line-height:1;text-shadow:0 0 10px #56f3ff;animation:bridgeRunner 2.2s ease-in-out infinite;transform:rotate(45deg)}.bridge-goal{right:2%;top:-3px;color:#ffe58a;font-size:17px;text-shadow:0 0 11px #ffcf5a;animation:bridgeGoal 1.5s ease-in-out infinite}.bridge-spark{width:3px;height:3px;background:#fff;box-shadow:0 0 7px #fff;animation:bridgeSpark 2.4s linear infinite}.spark-a{left:28%;top:5px}.spark-b{left:69%;top:16px;animation-delay:1.1s}.game-bridge-caption{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:#8bdbe5;font-size:8px;letter-spacing:1.4px;font-weight:900}.game-bridge-caption b{padding:4px 7px;border:1px solid rgba(255,218,108,.35);border-radius:6px;color:#ffe58a;background:rgba(255,206,82,.08);font-size:7px;letter-spacing:1px;animation:bridgeBadge 2s ease-in-out infinite}
@keyframes bridgeScan{0%,20%{left:-22%;opacity:0}42%{opacity:.8}72%,100%{left:120%;opacity:0}}@keyframes bridgeNode{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-5px);opacity:1}}@keyframes bridgeRunner{0%,100%{left:34%;transform:translateY(0) rotate(45deg)}50%{left:66%;transform:translateY(-6px) rotate(45deg)}}@keyframes bridgeGoal{0%,100%{transform:scale(1) rotate(0);opacity:.72}50%{transform:scale(1.3) rotate(18deg);opacity:1}}@keyframes bridgeSpark{0%{transform:translate(0,5px);opacity:0}35%{opacity:1}100%{transform:translate(28px,-8px);opacity:0}}@keyframes bridgeBadge{0%,100%{box-shadow:0 0 0 rgba(255,218,108,0)}50%{box-shadow:0 0 13px rgba(255,218,108,.24)}}
body.light-mode .game-bridge{border-color:rgba(126,101,188,.22);background:linear-gradient(90deg,rgba(255,253,255,.82),rgba(242,236,255,.82),rgba(232,249,253,.82));box-shadow:inset 0 1px #fff,0 0 18px rgba(126,101,188,.10)}body.light-mode .game-bridge::before{background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(126,101,188,.045) 6px 7px)}.light-mode .game-bridge-track{border-bottom-color:rgba(126,101,188,.35);background:repeating-linear-gradient(90deg,rgba(126,101,188,.16) 0 2px,transparent 2px 16px)}.light-mode .game-bridge-track::before{background:linear-gradient(90deg,transparent,#6fcbd5 18%,#9a7bd9 72%,transparent)}.light-mode .bridge-node{background:#65bfc6;box-shadow:0 0 8px rgba(65,174,184,.60)}.light-mode .bridge-node.node-b{background:#987bd2;box-shadow:0 0 8px rgba(126,101,188,.50)}.light-mode .bridge-player{color:#7456af;text-shadow:0 0 8px rgba(126,101,188,.50)}.light-mode .game-bridge-caption{color:#756493}.light-mode .game-bridge-caption b{color:#82642c;background:rgba(255,210,102,.14);border-color:rgba(145,111,48,.28)}
@media(max-width:520px){.game-bridge{gap:8px;margin:8px 0 15px;padding:7px 9px;min-height:48px}.game-bridge-track{min-width:110px;height:24px}.game-bridge-caption{gap:4px;font-size:6px;letter-spacing:.8px}.game-bridge-caption b{padding:3px 4px;font-size:6px;letter-spacing:.5px}.bridge-player{font-size:13px}.bridge-goal{font-size:14px}}
@media(prefers-reduced-motion:reduce){.game-bridge::after,.bridge-node,.bridge-player,.bridge-goal,.bridge-spark,.game-bridge-caption b{animation:none!important}}

/* ===== light-animation-contrast-final ===== */
/* Light mode: keep the motion, strengthen the typography. */
body.light-mode .hero-title{background:linear-gradient(100deg,#172f50 0%,#125d83 46%,#533995 100%)!important;background-size:180% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:0 4px 14px rgba(54,57,115,.20)!important}
body.light-mode .hero-sub{color:#3e5872!important;font-weight:750!important}.light-mode .hero-kicker{color:#50358f!important;font-weight:950!important;letter-spacing:2px!important;text-shadow:0 1px 0 rgba(255,255,255,.65)!important}.light-mode .hero-copy{color:#334d68!important;font-weight:700!important}.light-mode .hero-copy span{color:#087b9f!important;font-weight:900!important}
body.light-mode .market-highlight-copy strong{color:#35294f!important;font-weight:950!important;text-shadow:0 1px 0 rgba(255,255,255,.80)!important}.light-mode .market-highlight-copy span{color:#5b4e75!important;font-weight:700!important}.light-mode .market-highlight-status{color:#276b51!important;font-weight:950!important}
body.light-mode .game-bridge{border-color:rgba(91,67,145,.34)!important;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(239,232,255,.94),rgba(225,247,251,.94))!important;box-shadow:inset 0 1px #fff,0 8px 20px rgba(74,54,119,.12),0 0 18px rgba(111,93,174,.12)!important}
body.light-mode .game-bridge::before{opacity:.60!important;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(81,61,139,.08) 6px 7px)!important}.light-mode .game-bridge-track{border-bottom-color:rgba(79,60,135,.56)!important;background:repeating-linear-gradient(90deg,rgba(82,65,144,.24) 0 2px,transparent 2px 16px)!important;box-shadow:0 7px 12px -10px rgba(82,65,144,.72)!important}.light-mode .game-bridge-track::before{background:linear-gradient(90deg,transparent,#1b9caf 18%,#7553bd 72%,transparent)!important;opacity:.94!important}
body.light-mode .game-bridge-caption{color:#3e2e61!important;font-size:9px!important;font-weight:950!important;letter-spacing:1.25px!important;text-shadow:0 1px 0 #fff!important}.light-mode .game-bridge-caption b{color:#543b13!important;background:rgba(255,220,113,.38)!important;border-color:rgba(117,84,22,.48)!important;font-weight:950!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important}.light-mode .bridge-player{color:#4f2c98!important;text-shadow:0 0 9px rgba(104,71,175,.70)!important}.light-mode .bridge-goal{color:#a06b08!important;text-shadow:0 0 9px rgba(213,151,26,.64)!important}.light-mode .bridge-spark{background:#5f43ad!important;box-shadow:0 0 7px rgba(95,67,173,.75)!important}.light-mode .bridge-node{background:#1599a8!important;box-shadow:0 0 9px rgba(21,153,168,.78)!important}.light-mode .bridge-node.node-b{background:#8058c7!important;box-shadow:0 0 9px rgba(128,88,199,.74)!important}
body.light-mode .store-heading h2{color:#263f5d!important;text-shadow:0 2px 0 rgba(255,255,255,.75)!important}.light-mode .section-kicker{color:#624b99!important;font-weight:950!important}.light-mode .section-note{color:#536780!important;font-weight:700!important}
@media(max-width:520px){body.light-mode .game-bridge-caption{font-size:7px!important;letter-spacing:.75px!important}.light-mode .game-bridge-caption b{font-size:6px!important}}

/* ===== css-watermark-no-error-final ===== */
/* Error-free watermarks: pure CSS, no image requests, no broken asset icons. */
.css-watermark{position:absolute!important;z-index:3!important;right:-8px!important;bottom:-12px!important;width:124px!important;height:124px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:7px!important;transform:rotate(-18deg)!important;pointer-events:none!important;opacity:.30!important}
.plan-watermark-symbol{position:relative;display:block;color:#56f3ff;filter:drop-shadow(0 0 9px currentColor)}.private-symbol{width:34px;height:25px;border:3px solid currentColor;border-radius:4px}.private-symbol::before{content:"";position:absolute;left:5px;top:-17px;width:18px;height:17px;border:3px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0}.private-symbol::after{content:"";position:absolute;left:13px;top:7px;width:4px;height:9px;border-radius:3px;background:currentColor}.share-symbol{width:44px;height:23px;border:3px solid currentColor;border-radius:5px;margin-top:7px}.share-symbol::before,.share-symbol::after{content:"";position:absolute;top:-18px;width:13px;height:13px;border:3px solid currentColor;border-radius:50%;background:transparent}.share-symbol::before{left:3px}.share-symbol::after{right:3px}.plan-watermark-word{color:currentColor;font-size:11px;font-weight:950;letter-spacing:2px;text-shadow:0 0 10px currentColor}.private-watermark-css{color:#56f3ff;filter:drop-shadow(0 0 12px rgba(86,243,255,.62))}.share-watermark-css{color:#a78bff;filter:drop-shadow(0 0 12px rgba(167,139,255,.70))}
body.light-mode .css-watermark{opacity:.31!important}.light-mode .private-watermark-css{color:#6f51b0;filter:drop-shadow(0 0 8px rgba(111,81,176,.30))}.light-mode .share-watermark-css{color:#6752a5;filter:drop-shadow(0 0 8px rgba(103,82,165,.30))}.light-mode .plan-watermark-word{text-shadow:0 1px 0 rgba(255,255,255,.65)}
@media(max-width:640px){.css-watermark{width:94px!important;height:94px!important;right:-7px!important;bottom:-9px!important;gap:4px!important}.private-symbol{width:27px;height:19px;border-width:2px}.private-symbol::before{left:4px;top:-13px;width:14px;height:13px;border-width:2px}.private-symbol::after{left:10px;top:5px;width:3px;height:7px}.share-symbol{width:34px;height:18px;border-width:2px}.share-symbol::before,.share-symbol::after{top:-14px;width:10px;height:10px;border-width:2px}.plan-watermark-word{font-size:8px;letter-spacing:1.3px}}

/* ===== order-dashboard-flow-final ===== */
/* Full-screen dashboard view: no page scrolling and no accidental return to the first plan. */
#checkoutSection.order-dashboard-view{position:fixed!important;inset:0!important;z-index:80!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:clamp(14px,3vw,28px)!important;background:linear-gradient(135deg,rgb(4,10,28),rgb(10,21,48) 52%,rgb(20,11,48))!important;animation:dashboardEnter .32s cubic-bezier(.23,1,.32,1) both}
#checkoutSection.order-dashboard-view>.section-title,#checkoutSection.order-dashboard-view>.summary,#checkoutSection.order-dashboard-view>.field,#checkoutSection.order-dashboard-view>.telegram-btn,#checkoutSection.order-dashboard-view>.checkout-trustline,#checkoutSection.order-dashboard-view>.checkout-support-shortcut,#checkoutSection.order-dashboard-view>.preview{width:min(760px,100%);margin-left:auto;margin-right:auto}
.dashboard-head{width:min(760px,100%);margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.dashboard-back-btn{border:1px solid rgba(86,243,255,.34);border-radius:10px;padding:8px 11px;background:rgba(86,243,255,.08);color:#bdfcff;font:800 11px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 0 13px rgba(86,243,255,.10)}.dashboard-back-btn:hover{background:rgba(86,243,255,.16);transform:translateY(-1px)}.dashboard-chip{padding:6px 9px;border:1px solid rgba(167,139,255,.36);border-radius:999px;color:#c9bdff;background:rgba(167,139,255,.10);font:900 8px Inter,system-ui,sans-serif;letter-spacing:1.4px}
@keyframes dashboardEnter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
body.dashboard-mode{overflow:hidden!important}.order-view.dashboard-active{display:block!important}.order-view.dashboard-active>.panel{min-height:100vh!important}
body.light-mode #checkoutSection.order-dashboard-view{background:linear-gradient(135deg,#fbf9ff,#f0eaff 52%,#e9f8fa)!important;color:#33294d!important}body.light-mode .dashboard-back-btn{border-color:rgba(111,81,176,.32);background:rgba(111,81,176,.08);color:#4d3978;box-shadow:0 0 12px rgba(111,81,176,.10)}body.light-mode .dashboard-chip{border-color:rgba(111,81,176,.30);color:#5b438d;background:rgba(111,81,176,.09)}
@media(max-width:600px){#checkoutSection.order-dashboard-view{padding:12px 10px 22px!important}.dashboard-head{margin-bottom:10px}.dashboard-back-btn{font-size:10px;padding:7px 9px}.dashboard-chip{font-size:7px;padding:5px 7px}.order-dashboard-view .section-title{font-size:20px!important}}

/* ===== separate-dashboard-preview-final ===== */
/* Dashboard collects details; Preview is a separate final-review screen. */
#checkoutSection .preview{display:none!important}#checkoutSection #orderBtn{display:none!important}.review-order-btn{display:block!important;width:min(760px,100%)!important;margin:18px auto 0!important}
#previewSection.order-preview-view{position:fixed!important;inset:0!important;z-index:90!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:clamp(16px,4vw,34px)!important;background:linear-gradient(135deg,rgb(4,10,28),rgb(11,24,52) 52%,rgb(25,11,51))!important;animation:dashboardEnter .30s cubic-bezier(.23,1,.32,1) both}.preview-shell{width:min(760px,100%);min-height:100%;margin:0 auto}.preview-page-title{font-size:clamp(24px,5vw,38px)!important;font-weight:950!important;margin:18px 0 6px!important}.preview-page-sub{color:#9db5c8;font-size:12px;margin-bottom:18px}.preview-final-box{
  min-height:220px;white-space:pre-wrap;overflow:auto;
  background:linear-gradient(160deg,rgba(58,88,148,.42),rgba(74,58,140,.36))!important;
  backdrop-filter:blur(22px)!important; -webkit-backdrop-filter:blur(22px)!important;
  border:1px solid rgba(120,255,255,.45)!important;
  box-shadow:0 0 40px rgba(86,243,255,.20),0 18px 40px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.20)!important;
}.preview-chip{color:#ffe49a!important;border-color:rgba(255,216,107,.34)!important;background:rgba(255,216,107,.08)!important}body.light-mode #previewSection.order-preview-view{background:linear-gradient(135deg,#fbf9ff,#f0eaff 52%,#e9f8fa)!important;color:#33294d!important}body.light-mode .preview-page-sub{color:#665b7c!important}.light-mode .preview-final-box{background:linear-gradient(145deg,#fff,#f0e8fb 55%,#e8f8fa)!important;color:#41375d!important;border-color:rgba(111,81,176,.28)!important;box-shadow:0 12px 28px rgba(93,72,137,.12),inset 0 1px #fff!important}
@media(max-width:600px){#previewSection.order-preview-view{padding:12px 10px 22px!important}.preview-page-title{font-size:25px!important}.preview-page-sub{font-size:10px!important}.preview-final-box{min-height:190px;font-size:11px!important}}

/* ===== plan-card-stability-final ===== */
.plan-option{backface-visibility:hidden;transform:translateZ(0)}.plan-option.active{z-index:2}.plan-list{contain:layout paint}

/* ===== storefront-polish-final ===== */
/* Vivid access watermarks */
.plan-watermark-wrap{opacity:1!important;filter:none!important;mix-blend-mode:normal!important}.private-watermark-css{color:#72f8ff!important;text-shadow:0 0 7px #00d9ff,0 0 18px rgba(0,229,255,.75)!important}.private-watermark-css .private-symbol{background:linear-gradient(145deg,#8fffff,#198cff)!important;box-shadow:0 0 10px #00d9ff,0 0 24px rgba(0,210,255,.8)!important}.private-watermark-css .plan-watermark-word{color:#9fffff!important}.share-watermark-css{color:#ff9bf8!important;text-shadow:0 0 7px #ff4edb,0 0 18px rgba(255,67,211,.72)!important}.share-watermark-css .share-symbol{background:linear-gradient(145deg,#ffd0fb,#bd43ff)!important;box-shadow:0 0 10px #ff4edb,0 0 24px rgba(205,66,255,.8)!important}.share-watermark-css .plan-watermark-word{color:#ffc4fb!important}.light-mode .private-watermark-css{color:#087c9d!important;text-shadow:0 0 8px rgba(0,174,210,.34)!important}.light-mode .private-watermark-css .private-symbol{background:linear-gradient(145deg,#4ce4ee,#4386e8)!important;box-shadow:0 0 14px rgba(0,174,210,.42)!important}.light-mode .private-watermark-css .plan-watermark-word{color:#087c9d!important}.light-mode .share-watermark-css{color:#a13bc4!important;text-shadow:0 0 8px rgba(191,70,216,.32)!important}.light-mode .share-watermark-css .share-symbol{background:linear-gradient(145deg,#ff9be9,#a96bff)!important;box-shadow:0 0 14px rgba(191,70,216,.38)!important}.light-mode .share-watermark-css .plan-watermark-word{color:#a13bc4!important}
/* Professional preview table */
.preview-final-box{padding:0!important;overflow:hidden!important}.preview-table-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid rgba(86,243,255,.18);font-size:10px;letter-spacing:1.5px;color:#a5f9ff}.preview-table-caption b{font-size:8px;color:#8dffbd;border:1px solid rgba(141,255,189,.30);border-radius:999px;padding:5px 8px}.order-preview-table{width:100%;border-collapse:collapse;text-align:left}.order-preview-table th,.order-preview-table td{padding:13px 16px;border-bottom:1px solid rgba(141,163,231,.13);vertical-align:top}.order-preview-table th{width:36%;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#8da8bd;font-weight:900}.order-preview-table td{font-size:14.5px;color:#f2fbff;font-weight:800;overflow-wrap:anywhere}.order-preview-table tr:last-child th,.order-preview-table tr:last-child td{border-bottom:0}.order-preview-table tr:last-child td{color:#66f5ff;font-size:18px}.light-mode .preview-table-caption{border-bottom-color:rgba(111,81,176,.17);color:#684a9e}.light-mode .preview-table-caption b{color:#267a55;border-color:rgba(38,122,85,.28)}.light-mode .order-preview-table th{color:#81729c}.light-mode .order-preview-table td{color:#45365f}.light-mode .order-preview-table tr:last-child td{color:#7652b0}.preview-empty{padding:22px;color:#99aac0}.order-preview-table .preview-na{opacity:.45;font-weight:700}
/* Store information + FAQ */
.store-info-section{margin:26px auto 4px;width:min(1080px,100%);padding:26px;border-radius:26px;border:1px solid rgba(86,243,255,.17);background:linear-gradient(145deg,rgba(13,27,57,.72),rgba(18,18,45,.60));box-shadow:0 18px 42px rgba(0,0,0,.16)}.store-info-head h2{margin:7px 0 6px;color:#eefbff;font-size:clamp(22px,3vw,34px);letter-spacing:-.8px}.store-info-head p{margin:0;color:#8fa5ba;font-size:12px}.store-info-head.compact{margin-top:28px}.store-info-head.compact h2{font-size:22px}.store-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.store-info-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid rgba(141,163,231,.16);border-radius:18px;background:rgba(255,255,255,.045)}.store-info-icon{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:12px;color:#07182d;background:linear-gradient(145deg,#8fffff,#6e81ff);font:950 9px Inter,system-ui;letter-spacing:.5px;box-shadow:0 0 18px rgba(86,243,255,.28)}.store-info-card h3{margin:1px 0 5px;color:#effbff;font-size:13px}.store-info-card p{margin:0;color:#91a7bc;font-size:10px;line-height:1.55}.store-info-card a{display:inline-block;margin-top:8px;color:#72f8ff;font-size:10px;font-weight:900;text-decoration:none}.store-faq-item{border-top:1px solid rgba(141,163,231,.14);padding:13px 0}.store-faq-item summary{cursor:pointer;color:#dffaff;font-weight:850;font-size:12px;list-style:none}.store-faq-item summary::-webkit-details-marker{display:none}.store-faq-item summary::after{content:'+';float:right;color:#72f8ff;font-size:17px}.store-faq-item[open] summary::after{content:'−'}.store-faq-item p{margin:9px 24px 2px 0;color:#91a7bc;font-size:11px;line-height:1.6}.light-mode .store-info-section{background:linear-gradient(145deg,#fff,#f0e8fb 55%,#e8f8fa);border-color:rgba(111,81,176,.19);box-shadow:0 16px 36px rgba(93,72,137,.10)}.light-mode .store-info-head h2{color:#45365f}.light-mode .store-info-head p,.light-mode .store-info-card p,.light-mode .store-faq-item p{color:#75698c}.light-mode .store-info-card{background:rgba(255,255,255,.56);border-color:rgba(111,81,176,.15)}.light-mode .store-info-card h3,.light-mode .store-faq-item summary{color:#4d3b69}.light-mode .store-info-card a,.light-mode .store-faq-item summary::after{color:#7652b0}
@media(max-width:700px){.store-info-section{padding:19px 14px;border-radius:20px}.store-info-grid{grid-template-columns:1fr;gap:9px}.store-info-card{padding:13px}.order-preview-table th,.order-preview-table td{padding:11px 12px}.order-preview-table th{width:38%;font-size:8px}.order-preview-table td{font-size:11px}.order-preview-table tr:last-child td{font-size:15px}}

/* ===== watermark-preview-motion-final ===== */
/* Keep access watermarks decorative and physically separated from plan/price text. */
.plan-option{isolation:isolate;overflow:hidden!important}.plan-option .plan-watermark-wrap{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;z-index:1!important;transform:rotate(-10deg)!important;opacity:.72!important;pointer-events:none!important;display:flex!important;align-items:center!important;gap:5px!important;max-width:90px!important}.plan-option .plan-watermark-wrap .plan-watermark-word{font-size:8px!important;letter-spacing:1.4px!important;font-weight:1000!important;white-space:nowrap!important}.plan-option .plan-watermark-wrap .plan-watermark-symbol{flex:0 0 auto!important;width:25px!important;height:25px!important}.plan-option .plan-professional{position:relative!important;z-index:4!important;margin-top:22px!important;padding:12px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(8,18,39,.78),rgba(11,20,43,.58))!important;box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.10)!important}.plan-option .plan-secondary-line{position:relative!important;z-index:5!important}.plan-option .plan-price-block,.plan-option .plan-price-block strong{position:relative!important;z-index:6!important}.light-mode .plan-option .plan-professional{background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(246,239,255,.80))!important;border-color:rgba(111,81,176,.16)!important;box-shadow:0 8px 20px rgba(93,72,137,.09),inset 0 1px #fff!important}.light-mode .plan-option .plan-watermark-wrap{opacity:.78!important}
/* Premium final-review surface with a smooth scanning glow bar and staggered rows. */
.preview-final-box{position:relative!important;border:1px solid rgba(86,243,255,.42)!important;box-shadow:0 0 0 1px rgba(86,243,255,.08),0 0 22px rgba(86,243,255,.16),0 18px 42px rgba(0,0,0,.18)!important;animation:previewSurfacePulse 4.8s ease-in-out infinite}.preview-final-box::before{content:"";position:absolute;left:-25%;right:auto;top:0;width:24%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,#bfffff,#66f5ff,transparent);box-shadow:0 0 10px #56f3ff,0 0 24px rgba(86,243,255,.90);animation:previewScan 3.6s linear infinite;z-index:5;pointer-events:none}.preview-table-caption{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(86,243,255,.10),rgba(142,100,255,.13),rgba(255,83,213,.08));background-size:220% 100%;animation:previewHeaderFlow 6s ease-in-out infinite}.preview-table-caption::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-100%);animation:previewShimmer 4.5s ease-in-out infinite;pointer-events:none}.preview-table-caption span,.preview-table-caption b{position:relative;z-index:1}.order-preview-table tbody tr{animation:previewRowIn .42s cubic-bezier(.23,1,.32,1) both}.order-preview-table tbody tr:nth-child(2){animation-delay:.06s}.order-preview-table tbody tr:nth-child(3){animation-delay:.12s}.order-preview-table tbody tr:nth-child(4){animation-delay:.18s}.order-preview-table tbody tr:nth-child(5){animation-delay:.24s}.order-preview-table tbody tr:nth-child(6){animation-delay:.30s}.order-preview-table tbody tr:hover{background:rgba(86,243,255,.08);transform:translateX(3px);transition:background .2s ease,transform .2s ease}.light-mode .preview-final-box{border-color:rgba(111,81,176,.34)!important;box-shadow:0 0 0 1px rgba(111,81,176,.06),0 12px 30px rgba(93,72,137,.13),inset 0 1px #fff!important}.light-mode .preview-final-box::before{background:linear-gradient(90deg,transparent,#9b7be8,#65dce0,transparent);box-shadow:0 0 10px rgba(126,97,218,.60),0 0 22px rgba(101,220,224,.55)}
@keyframes previewScan{0%{left:-25%}100%{left:105%}}@keyframes previewShimmer{0%,45%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}@keyframes previewHeaderFlow{0%,100%{background-position:0 0}50%{background-position:100% 0}}@keyframes previewSurfacePulse{0%,100%{box-shadow:0 0 0 1px rgba(86,243,255,.08),0 0 22px rgba(86,243,255,.16),0 18px 42px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 1px rgba(86,243,255,.16),0 0 32px rgba(86,243,255,.25),0 18px 42px rgba(0,0,0,.18)}}@keyframes previewRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.preview-final-box,.preview-table-caption,.preview-final-box::before,.preview-table-caption::after,.order-preview-table tbody tr{animation:none!important}}

/* ===== mobile-light-readability-final ===== */
/* Mobile cards: reserve space for both Duration and Price so labels never stack letter-by-letter. */
@media(max-width:700px){
  .plan-option{min-width:0!important;overflow:hidden!important}
  .plan-option .plan-professional{margin-top:20px!important;padding:10px!important;min-width:0!important}
  .plan-option .plan-primary-line{min-width:0!important}
  .plan-option .plan-professional-name{display:block!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}
  .plan-option .plan-secondary-line{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(66px,auto)!important;gap:8px!important;align-items:end!important;min-width:0!important}
  .plan-option .plan-secondary-line>div{min-width:0!important;width:auto!important}
  .plan-option .plan-field-label{display:block!important;width:auto!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;letter-spacing:.55px!important;font-size:7px!important;line-height:1.1!important}
  .plan-option .plan-secondary-line strong{display:block!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;font-size:11px!important;line-height:1.2!important}
  .plan-option .plan-price-block{min-width:66px!important;text-align:right!important}
  .plan-option .plan-price-block strong{white-space:nowrap!important;font-size:14px!important}
}
/* Light mode: brighter controls and stronger text hierarchy. */
.light-mode .plan-toggle,.light-mode .plan-filter,.light-mode .remove-btn,.light-mode .dashboard-back-btn,.light-mode .review-order-btn,.light-mode .telegram-btn{color:#fff!important;background:linear-gradient(135deg,#7650b8,#9470d4 52%,#3faac1)!important;border-color:rgba(91,61,151,.36)!important;box-shadow:0 8px 20px rgba(94,67,155,.20),0 0 16px rgba(84,196,211,.18)!important;text-shadow:0 1px 2px rgba(38,24,71,.35)!important}
.light-mode .plan-filter:not(.active){color:#4b3c69!important;background:linear-gradient(145deg,#fff,#eee7f8)!important;border-color:rgba(111,81,176,.26)!important;box-shadow:0 5px 12px rgba(93,72,137,.10)!important;text-shadow:none!important}.light-mode .plan-filter.active{color:#fff!important;background:linear-gradient(135deg,#7650b8,#a275d9)!important}.light-mode .field-title,.light-mode .section-title,.light-mode .cart-name,.light-mode .cart-plan-current,.light-mode .plan-field-label{color:#4a386b!important}.light-mode .plan-secondary-line strong{color:#53436f!important}.light-mode .plan-price-block strong{color:#6d46ab!important;text-shadow:0 0 10px rgba(118,82,176,.18)!important}.light-mode .input,.light-mode .note-box{color:#44365f!important;background:#fff!important;border-color:rgba(111,81,176,.28)!important}.light-mode .input::placeholder,.light-mode .note-box::placeholder{color:#817496!important}.light-mode .review-order-btn:disabled,.light-mode .telegram-btn:disabled{color:#655a78!important;background:linear-gradient(135deg,#c9bddb,#b9d8db)!important;opacity:.82!important;text-shadow:none!important}
.plan-secondary-line .plan-field-label{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;display:block!important}.plan-secondary-line>div{min-width:0!important}.plan-secondary-line strong{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important}.plan-price-block{min-width:66px!important}

/* ===== light-button-contrast-final ===== */
body.light-mode #togglePlansBtn,body.light-mode #removeBtn,body.light-mode #reviewOrderBtn,body.light-mode #backBtn,body.light-mode #previewBackBtn,body.light-mode #previewOrderBtn{color:#fff!important;background:linear-gradient(135deg,#6842a9,#8b61cb 52%,#2e9eb4)!important;border-color:rgba(72,42,129,.42)!important;text-shadow:0 1px 2px rgba(26,16,54,.45)!important;box-shadow:0 8px 20px rgba(86,53,157,.25),0 0 18px rgba(57,190,208,.22)!important}.light-mode .plan-toggle:hover,.light-mode #removeBtn:hover,.light-mode #reviewOrderBtn:hover{filter:brightness(1.10)!important}

/* ===== soft-trustworthy-theme-final ===== */
/* =====================================================================
   Soft, trustworthy storefront theme (final layer — wins over every
   earlier reskin block above because it is both last in source order
   and uses the higher-specificity `body.light-mode …` / `!important`
   pattern already established in this file).
   Warm off-white surfaces, deep-navy CTAs, muted neutral text,
   soft elevation shadows, and one consistent type scale.
   ===================================================================== */
body.light-mode{
  --ink:#2b2621; --ink-soft:#4a4038; --muted:#786f63; --muted-2:#9c9184;
  --surface:#fffdf8; --surface-2:#fbf6ec; --page-bg:#f6efe2;
  --border:rgba(43,38,30,.12); --border-strong:rgba(43,38,30,.20);
  --navy:#16213e; --navy-hover:#20305a; --navy-active:#0f172c; --navy-ink:#eef1fb;
  --gold:#a8752e; --gold-soft:#c99a4f; --good:#2f7d5a; --good-bg:rgba(47,125,90,.12);
  --warn:#9a6a17; --warn-bg:rgba(184,131,20,.14); --danger:#a94848; --danger-bg:rgba(169,72,72,.12);
  --shadow-sm:0 2px 10px rgba(43,35,20,.07);
  --shadow-md:0 10px 26px rgba(43,35,20,.10);
  --shadow-lg:0 22px 48px rgba(43,35,20,.14);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.75);
  font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
}

/* ---------- Page background ---------- */
body.light-mode{
  background:var(--page-bg) !important;
  background-image:linear-gradient(180deg,#f9f4e9 0%,#f4ecdc 100%) !important;
  color:var(--ink) !important;
}
body.light-mode::after{ opacity:0 !important; }

/* ---------- Header / announcement ---------- */
body.light-mode .compact-header{
  border-color:var(--border) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-sm), var(--shadow-inset) !important;
}
body.light-mode .compact-header::after{ display:none !important; }
body.light-mode .compact-name{ color:var(--ink) !important; text-shadow:none !important; }
body.light-mode .compact-name b{ color:var(--navy) !important; text-shadow:none !important; }
body.light-mode .compact-label,
body.light-mode .compact-status{ color:var(--muted) !important; }
body.light-mode .compact-divider{ background:var(--border-strong) !important; }
body.light-mode .compact-status i{ background:var(--good) !important; box-shadow:none !important; }
body.light-mode .theme-toggle{
  color:var(--ink-soft) !important;
  background:var(--surface-2) !important;
  border-color:var(--border-strong) !important;
  box-shadow:var(--shadow-sm) !important;
}
body.light-mode .theme-toggle:hover{ border-color:var(--navy) !important; box-shadow:var(--shadow-md) !important; }

body.light-mode .neon-announcement{
  background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important;
}
body.light-mode .neon-announcement::before{ background:linear-gradient(90deg,var(--surface-2),transparent) !important; }
body.light-mode .neon-announcement::after{ background:linear-gradient(270deg,var(--surface-2),transparent) !important; }
body.light-mode .neon-track{ color:var(--muted) !important; text-shadow:none !important; }
body.light-mode .neon-track b{ color:var(--gold) !important; text-shadow:none !important; }

/* ---------- Hero ---------- */
body.light-mode .hero{
  background:var(--surface) !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-lg), var(--shadow-inset) !important;
}
body.light-mode .hero-title{
  background:none !important; -webkit-background-clip:unset !important; background-clip:unset !important;
  -webkit-text-fill-color:currentColor !important; color:var(--ink) !important;
  text-shadow:none !important; animation:none !important;
  font-weight:800 !important; letter-spacing:-.5px !important;
}
body.light-mode .hero-sub{ color:var(--muted) !important; font-weight:600 !important; text-shadow:none !important; }
body.light-mode .hero-kicker{ color:var(--gold) !important; font-weight:800 !important; text-shadow:none !important; }
body.light-mode .hero-copy{ color:var(--ink-soft) !important; font-weight:600 !important; }
body.light-mode .hero-copy span{ color:var(--navy) !important; font-weight:800 !important; text-shadow:none !important; }
body.light-mode .hero-stats strong{ color:var(--ink) !important; }
body.light-mode .hero-stats small{ color:var(--muted-2) !important; }
body.light-mode .hero-stats div{ border-right-color:var(--border) !important; }
body.light-mode .hero-cta-primary{
  color:var(--navy-ink) !important; background:var(--navy) !important; box-shadow:var(--shadow-sm) !important; border-color:transparent !important;
}
body.light-mode .hero-cta-primary:hover{ background:var(--navy-hover) !important; box-shadow:var(--shadow-md) !important; }
body.light-mode .hero-cta-secondary{
  color:var(--ink-soft) !important; background:var(--surface-2) !important; border-color:var(--border-strong) !important; box-shadow:none !important;
}
body.light-mode .hero-cta-secondary:hover{ border-color:var(--navy) !important; color:var(--navy) !important; }

/* ---------- Market highlight / store heading / game bridge ---------- */
body.light-mode .market-highlight{
  border-color:var(--border) !important; background:var(--surface) !important; box-shadow:var(--shadow-sm), var(--shadow-inset) !important;
}
body.light-mode .market-highlight::before{ background:var(--navy) !important; box-shadow:none !important; }
body.light-mode .market-highlight::after{ background:linear-gradient(90deg,transparent,var(--border-strong),transparent) !important; }
body.light-mode .market-highlight-mark{ color:var(--surface) !important; background:var(--navy) !important; box-shadow:none !important; }
body.light-mode .market-highlight-copy strong{ color:var(--ink) !important; text-shadow:none !important; }
body.light-mode .market-highlight-copy span{ color:var(--muted) !important; }
body.light-mode .market-highlight-status{ color:var(--good) !important; }
body.light-mode .market-highlight-status i{ background:var(--good) !important; box-shadow:none !important; }

body.light-mode .store-heading h2{ color:var(--ink) !important; text-shadow:none !important; font-weight:800 !important; }
body.light-mode .section-kicker{ color:var(--gold) !important; font-weight:800 !important; }
body.light-mode .section-note{ color:var(--muted) !important; font-weight:500 !important; }

body.light-mode .game-bridge{ border-color:var(--border) !important; background:var(--surface) !important; box-shadow:var(--shadow-inset) !important; }
body.light-mode .game-bridge::before{ background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(43,38,30,.04) 6px 7px) !important; }
body.light-mode .game-bridge-track{ border-bottom-color:var(--border-strong) !important; background:repeating-linear-gradient(90deg,var(--border-strong) 0 2px,transparent 2px 16px) !important; box-shadow:none !important; }
body.light-mode .game-bridge-track::before{ background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--navy) 72%,transparent) !important; }
body.light-mode .game-bridge-caption{ color:var(--muted) !important; text-shadow:none !important; }
body.light-mode .game-bridge-caption b{ color:var(--gold) !important; background:rgba(168,117,46,.12) !important; border-color:rgba(168,117,46,.30) !important; text-shadow:none !important; }
body.light-mode .bridge-player{ color:var(--navy) !important; text-shadow:none !important; }
body.light-mode .bridge-goal{ color:var(--gold) !important; text-shadow:none !important; }
body.light-mode .bridge-node{ background:var(--navy) !important; box-shadow:none !important; }
body.light-mode .bridge-node.node-b{ background:var(--gold-soft) !important; box-shadow:none !important; }
body.light-mode .bridge-spark{ background:var(--gold-soft) !important; box-shadow:none !important; }

/* ---------- Search + categories ---------- */
body.light-mode .search-wrap input{
  background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border-strong) !important;
  box-shadow:var(--shadow-sm) !important;
}
body.light-mode .search-wrap input::placeholder{ color:var(--muted-2) !important; }
body.light-mode .search-wrap input:focus{ border-color:var(--navy) !important; box-shadow:0 0 0 3px rgba(22,33,62,.10), var(--shadow-sm) !important; }
body.light-mode .search-icon{ color:var(--navy) !important; }
body.light-mode .categories{ background:linear-gradient(180deg,var(--page-bg),rgba(246,239,226,.85),transparent) !important; }
body.light-mode .cat{
  background:var(--surface) !important; color:var(--muted) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .cat:hover,
body.light-mode .cat.active{
  color:var(--navy-ink) !important; background:var(--navy) !important; border-color:var(--navy) !important; box-shadow:var(--shadow-md) !important;
}

/* ---------- Product cards ---------- */
body.light-mode .products .card,
body.light-mode .card{
  background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-sm), var(--shadow-inset) !important;
}
body.light-mode .card::before,
body.light-mode .card::after{ display:none !important; }
body.light-mode .card:hover{
  background:var(--surface) !important; border-color:var(--border-strong) !important; box-shadow:var(--shadow-md), var(--shadow-inset) !important;
}
body.light-mode .icon-wrap{ background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important; }
body.light-mode .card-name{ color:var(--ink) !important; font-weight:700 !important; }
body.light-mode .card-sub{ color:var(--muted) !important; }
body.light-mode .price-from{ color:var(--navy) !important; font-weight:800 !important; }
body.light-mode .top-product-badge{
  background:var(--gold) !important; color:#fff !important; border-color:transparent !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .top-product-badge::before{ display:none !important; }
body.light-mode .status-pill.status-available{ color:var(--good) !important; background:var(--good-bg) !important; border-color:rgba(47,125,90,.28) !important; }
body.light-mode .status-pill.status-limited{ color:var(--warn) !important; background:var(--warn-bg) !important; border-color:rgba(184,131,20,.30) !important; }
body.light-mode .status-pill.status-coming,
body.light-mode .status-pill.status-sold{ color:var(--danger) !important; background:var(--danger-bg) !important; border-color:rgba(169,72,72,.28) !important; }
body.light-mode .feature-pill{ color:var(--navy) !important; background:rgba(22,33,62,.08) !important; border-color:rgba(22,33,62,.20) !important; }
body.light-mode .buy-now-btn{
  color:var(--navy-ink) !important; background:var(--navy) !important; border-color:transparent !important; box-shadow:none !important;
}
body.light-mode .buy-now-btn:hover{ background:var(--navy-hover) !important; box-shadow:var(--shadow-sm) !important; }
body.light-mode .card:hover .buy-now-btn{ animation:none !important; }
body.light-mode .empty-state{ color:var(--muted) !important; background:var(--surface) !important; border-color:var(--border-strong) !important; }
body.light-mode .empty-state strong{ color:var(--ink) !important; }
body.light-mode .empty-state button{ background:var(--navy) !important; color:var(--navy-ink) !important; box-shadow:none !important; }

/* ---------- Store info + FAQ ---------- */
body.light-mode .store-info-section{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important; }
body.light-mode .store-info-head h2{ color:var(--ink) !important; }
body.light-mode .store-info-head p,
body.light-mode .store-info-card p,
body.light-mode .store-faq-item p{ color:var(--muted) !important; }
body.light-mode .store-info-card{ background:var(--surface-2) !important; border-color:var(--border) !important; }
body.light-mode .store-info-icon{ color:var(--navy-ink) !important; background:var(--navy) !important; box-shadow:none !important; }
body.light-mode .store-info-card h3,
body.light-mode .store-faq-item summary{ color:var(--ink) !important; }
body.light-mode .store-info-card a,
body.light-mode .store-faq-item summary::after{ color:var(--navy) !important; }
body.light-mode .store-faq-item{ border-top-color:var(--border) !important; }

/* ---------- Checkout panel ---------- */
body.light-mode .panel{
  background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-lg), var(--shadow-inset) !important;
}
body.light-mode .panel-title{ color:var(--ink) !important; text-shadow:none !important; font-weight:800 !important; }
body.light-mode .panel-sub{ color:var(--muted) !important; }
body.light-mode .back-btn{ color:var(--ink-soft) !important; background:var(--surface-2) !important; border-color:var(--border-strong) !important; }
body.light-mode .back-btn:hover{ border-color:var(--navy) !important; color:var(--navy) !important; }
body.light-mode .field-title,
body.light-mode .section-title,
body.light-mode .preview-title,
body.light-mode .cart-name,
body.light-mode .cart-plan-current,
body.light-mode .plan-field-label{ color:var(--ink-soft) !important; text-shadow:none !important; }
body.light-mode .info-card{ background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important; }
body.light-mode .info-card summary{ color:var(--navy) !important; }
body.light-mode .info-content{ color:var(--muted) !important; text-shadow:none !important; }
body.light-mode .input,
body.light-mode .note-box{
  background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border-strong) !important; box-shadow:none !important;
}
body.light-mode .input::placeholder,
body.light-mode .note-box::placeholder{ color:var(--muted-2) !important; }
body.light-mode .input:focus,
body.light-mode .note-box:focus{ border-color:var(--navy) !important; box-shadow:0 0 0 3px rgba(22,33,62,.10) !important; }
body.light-mode .cart-item{ background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important; }
body.light-mode .cart-item strong,
body.light-mode .cart-item b{ color:var(--ink) !important; }
body.light-mode .remove-btn{ color:var(--danger) !important; background:var(--danger-bg) !important; border-color:rgba(169,72,72,.24) !important; }
body.light-mode .custom-hint{ color:var(--muted) !important; }

/* ---------- Plan option cards ---------- */
body.light-mode .plan-option,
body.light-mode .order-view .plan-option{
  background:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-sm) !important; text-shadow:none !important;
}
body.light-mode .plan-option::after,
body.light-mode .order-view .plan-option::after{ display:none !important; }
body.light-mode .plan-option:hover,
body.light-mode .order-view .plan-option:hover{
  border-color:var(--border-strong) !important; background:var(--surface) !important; box-shadow:var(--shadow-md) !important;
}
body.light-mode .plan-option.active,
body.light-mode .order-view .plan-option.active{
  background:var(--surface) !important; border-color:var(--navy) !important; color:var(--ink) !important;
  box-shadow:0 0 0 2px rgba(22,33,62,.14), var(--shadow-md) !important; outline-color:transparent !important;
}
body.light-mode .plan-option.best-seller{ border-color:rgba(168,117,46,.45) !important; box-shadow:var(--shadow-sm) !important; }
body.light-mode .plan-option.active.best-seller{ border-color:var(--gold) !important; }
body.light-mode .plan-option.discount{ border-color:rgba(22,33,62,.30) !important; }
body.light-mode .plan-option.out-stock{ opacity:.55 !important; border-color:var(--border) !important; box-shadow:none !important; }
body.light-mode .plan-sub-label{ color:var(--gold) !important; text-shadow:none !important; }
body.light-mode .best-seller-badge{ background:var(--gold) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important; }
body.light-mode .discount-badge{ background:var(--navy) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important; }
body.light-mode .out-stock-badge{ background:var(--danger) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important; }
body.light-mode .plan-professional{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:none !important; }
body.light-mode .plan-professional-name,
body.light-mode .order-view .plan-professional-name,
body.light-mode .plan-secondary-line strong,
body.light-mode .order-view .plan-secondary-line strong{ color:var(--ink) !important; text-shadow:none !important; }
body.light-mode .plan-secondary-line{ border-top-color:var(--border) !important; }
body.light-mode .plan-price-block strong,
body.light-mode .order-view .plan-price-block strong{ color:var(--navy) !important; text-shadow:none !important; }
body.light-mode .plan-access-badge{ color:var(--navy) !important; background:rgba(22,33,62,.08) !important; border-color:rgba(22,33,62,.20) !important; }
body.light-mode .out-stock .plan-line-price{ color:var(--muted-2) !important; }
body.light-mode .plan-watermark-wrap,
body.light-mode .css-watermark,
body.light-mode .plan-watermark-fallback{ display:none !important; }

body.light-mode .plan-toggle,
body.light-mode .plan-filter.active{
  color:var(--navy-ink) !important; background:var(--navy) !important; border-color:transparent !important; box-shadow:none !important; text-shadow:none !important;
}
body.light-mode .plan-filter:not(.active){
  color:var(--muted) !important; background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important; text-shadow:none !important;
}
body.light-mode .plan-toggle:hover{ background:var(--navy-hover) !important; }

body.light-mode .qty-btn{ color:var(--ink) !important; background:var(--surface-2) !important; border-color:var(--border-strong) !important; }
body.light-mode .qty-num,
body.light-mode .amount{ color:var(--ink) !important; }
body.light-mode .summary{ border-top-color:var(--border) !important; }
body.light-mode .summary::before{ color:var(--muted-2) !important; }
body.light-mode .line{ color:var(--muted) !important; }
/* The label (first span) stays muted, but the actual value next to it
   was inheriting that same faint gray -- "Amount", "Total" etc. read as
   washed out instead of the numbers customers actually came to check. */
body.light-mode .line span:last-child{ color:var(--ink) !important; font-weight:800 !important; }
body.light-mode .line-total{ color:var(--ink) !important; }
body.light-mode .line-total span:last-child{ color:#a3790a !important; }

/* ---------- Primary CTAs (checkout + review + dashboard) ---------- */
body.light-mode .telegram-btn,
body.light-mode .review-order-btn,
body.light-mode #continueBtn.telegram-btn,
body.light-mode #orderBtn.telegram-btn,
body.light-mode #previewOrderBtn,
body.light-mode #togglePlansBtn,
body.light-mode #removeBtn,
body.light-mode #reviewOrderBtn,
body.light-mode #backBtn,
body.light-mode #previewBackBtn,
body.light-mode .dashboard-back-btn{
  color:var(--navy-ink) !important; background:var(--navy) !important; border-color:transparent !important;
  box-shadow:var(--shadow-sm) !important; text-shadow:none !important; animation:none !important;
}
body.light-mode .telegram-btn:hover:not(:disabled),
body.light-mode .review-order-btn:hover:not(:disabled),
body.light-mode #continueBtn.telegram-btn:hover:not(:disabled),
body.light-mode #orderBtn.telegram-btn:hover:not(:disabled),
body.light-mode #previewOrderBtn:hover:not(:disabled),
body.light-mode #togglePlansBtn:hover,
body.light-mode #removeBtn:hover,
body.light-mode #reviewOrderBtn:hover,
body.light-mode #backBtn:hover,
body.light-mode #previewBackBtn:hover,
body.light-mode .dashboard-back-btn:hover{
  background:var(--navy-hover) !important; box-shadow:var(--shadow-md) !important; transform:translateY(-1px) !important; filter:none !important;
}
body.light-mode .telegram-btn:active:not(:disabled),
body.light-mode .review-order-btn:active:not(:disabled){ background:var(--navy-active) !important; transform:scale(.98) !important; }
body.light-mode .telegram-btn::before{ display:none !important; }
body.light-mode .telegram-btn:disabled,
body.light-mode .review-order-btn:disabled,
body.light-mode #previewOrderBtn:disabled{
  color:var(--muted-2) !important; background:var(--surface-2) !important; box-shadow:none !important; opacity:1 !important;
}
body.light-mode .checkout-trustline{ color:var(--muted) !important; background:var(--surface-2) !important; border-color:var(--border) !important; }
body.light-mode .checkout-trustline b{ color:var(--navy) !important; }
body.light-mode .checkout-support-shortcut{ color:var(--muted) !important; }
body.light-mode .checkout-support-shortcut a{ color:var(--navy) !important; }
body.light-mode .dashboard-chip{ color:var(--navy) !important; background:rgba(22,33,62,.08) !important; border-color:rgba(22,33,62,.22) !important; }

/* ---------- Payment method grid ---------- */
body.light-mode .pay-option{
  background:var(--surface) !important; border-color:var(--border) !important; color:var(--ink) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .pay-option:hover{ border-color:var(--border-strong) !important; box-shadow:var(--shadow-md) !important; }
body.light-mode .pay-option.active{
  background:var(--surface) !important; border-color:var(--navy) !important; box-shadow:0 0 0 2px rgba(22,33,62,.14) !important;
}
body.light-mode .pay-option.active::after{ background:var(--navy) !important; box-shadow:none !important; }
body.light-mode .pay-logo{ background:#fff !important; box-shadow:none !important; }
body.light-mode .pay-option span:last-child{ color:var(--ink-soft) !important; }
body.light-mode .pay-option.active span:last-child{ color:var(--navy) !important; text-shadow:none !important; }
body.light-mode .payment-quick-pop{
  color:var(--ink) !important; background:var(--surface) !important; border-color:var(--border-strong) !important; box-shadow:var(--shadow-lg) !important;
}
body.light-mode .payment-quick-pop::after{ background:var(--surface) !important; border-color:var(--border-strong) !important; }
body.light-mode .payment-quick-method{ color:var(--muted) !important; }
body.light-mode .payment-quick-number{ color:var(--ink) !important; text-shadow:none !important; font-weight:800 !important; }
body.light-mode .payment-quick-name{ color:var(--muted) !important; }
body.light-mode .payment-quick-hint{ color:var(--muted-2) !important; }

/* ---------- Dashboard / preview screens ---------- */
body.light-mode #checkoutSection.order-dashboard-view,
body.light-mode #previewSection.order-preview-view{ background:var(--page-bg) !important; color:var(--ink) !important; }
body.light-mode .preview-page-sub{ color:var(--muted) !important; }
body.light-mode .preview-final-box{
  background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important; animation:none !important;
}
body.light-mode .preview-final-box::before{ display:none !important; }
body.light-mode .preview-table-caption{ background:var(--surface-2) !important; border-bottom-color:var(--border) !important; color:var(--muted) !important; animation:none !important; }
body.light-mode .preview-table-caption::after{ display:none !important; }
body.light-mode .preview-table-caption b{ color:var(--good) !important; border-color:rgba(47,125,90,.28) !important; }
/* --muted-2 (a light gray meant for onwhite cards elsewhere) reads as
   nearly invisible against this box's own warm glass background --
   darken it specifically here instead of reusing the generic token. */
body.light-mode .order-preview-table th{ color:#6b5f85 !important; }
body.light-mode .order-preview-table td{ color:var(--ink) !important; }
body.light-mode .order-preview-table th,
body.light-mode .order-preview-table td{ border-bottom-color:var(--border) !important; }
body.light-mode .order-preview-table tr:last-child td{ color:var(--navy) !important; }
body.light-mode .order-preview-table tbody tr:hover{ background:var(--surface-2) !important; }
body.light-mode .preview-empty{ color:var(--muted-2) !important; }
body.light-mode .preview-chip{ color:var(--gold) !important; border-color:rgba(168,117,46,.30) !important; background:rgba(168,117,46,.08) !important; }

/* ---------- Footer ---------- */
body.light-mode .site-footer{ color:var(--muted) !important; border-color:var(--border) !important; text-shadow:none !important; }
body.light-mode .support-btn{
  color:var(--ink-soft) !important; background:var(--surface) !important; border-color:var(--border-strong) !important;
}
body.light-mode .support-btn:hover{ border-color:var(--navy) !important; box-shadow:var(--shadow-sm) !important; }
body.light-mode .support-btn span{ color:var(--muted-2) !important; }
body.light-mode .whatsapp-support{ border-color:rgba(37,150,80,.45) !important; }
body.light-mode .ui-toast{ background:var(--navy) !important; color:var(--navy-ink) !important; border-color:transparent !important; box-shadow:var(--shadow-md) !important; }

/* ---------- Typography scale (applies in both themes) ---------- */
.hero-title{ line-height:1.15; }
.panel-title,.section-title,.store-heading h2,.preview-title{ line-height:1.25; }
.card-name{ line-height:1.3; }
.card-sub,.hero-sub,.panel-sub,.field-title,.cart-plan-current,.info-content,.store-info-card p,.store-faq-item p{ line-height:1.55; }
@media(max-width:640px){ body.light-mode .hero-title{ font-size:clamp(26px,7.5vw,38px) !important; } }

/* ===== soft-white-refinement-v2 ===== */
/* =====================================================================
   v2 refinement: soft-white base with blended gradient accents,
   tightened hero, professional page transitions, dedicated product
   page, and scroll-reveal copy. Last block in the document, so it
   settles every earlier reskin layer.
   ===================================================================== */
body.light-mode{
  --grad-brand:linear-gradient(120deg,#1d2b50 0%,#2f4370 45%,#4a6fa5 100%);
  --grad-soft:linear-gradient(135deg,#ffffff 0%,#fdfaf4 55%,#f4f7fb 100%);
  --grad-accent:linear-gradient(120deg,#2b3d66,#41628f 55%,#6d8fb8);
  --grad-warm:linear-gradient(135deg,#fffdf9,#f7f2e8);
  --page-bg:#fbfaf7;
  --surface:#ffffff;
  --surface-2:#f8f6f1;
}
body.light-mode{
  background:var(--page-bg) !important;
  background-image:
    radial-gradient(ellipse at 12% 0%,rgba(74,111,165,.07),transparent 42%),
    radial-gradient(ellipse at 88% 4%,rgba(201,154,79,.06),transparent 38%),
    linear-gradient(180deg,#fdfcfa 0%,#f7f4ee 100%) !important;
}

/* ---------- Hero: smaller, tighter, higher contrast ---------- */
body.light-mode .hero{
  min-height:0 !important;
  padding:24px 28px 22px !important;
  background:var(--grad-soft) !important;
  border-color:rgba(43,38,30,.10) !important;
  box-shadow:0 12px 30px rgba(43,35,20,.09), inset 0 1px 0 #fff !important;
}
/* Keep hero copy on the same left axis as the brand instead of floating centred. */
body.light-mode .hero-copy,
body.light-mode .hero-actions,
body.light-mode .hero-stats,
body.light-mode .hero-kicker,
body.light-mode .hero-sub{ text-align:left !important; justify-content:flex-start !important; }
body.light-mode .hero-kicker{ display:block !important; margin:2px 0 0 !important; }
body.light-mode .brand-wrap{ margin:6px 0 4px !important; gap:12px !important; align-items:center !important; }
/* The base sheet hides hero text at opacity:0 and reveals it via animation,
   so any rule that cancels that animation must restore opacity itself. */
.hero-title,.hero-sub,.hero-kicker,.hero-copy,.hero-stats{ opacity:1 !important; }
body.light-mode .hero-title{
  font-size:clamp(24px,3.2vw,36px) !important;
  font-weight:800 !important;
  letter-spacing:-.6px !important;
  background:var(--grad-brand) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  animation:none !important; text-shadow:none !important;
}
body.light-mode .hero-sub{ font-size:12px !important; margin-top:2px !important; }
body.light-mode .hero-kicker{ font-size:9.5px !important; letter-spacing:2px !important; }
body.light-mode .hero-copy{
  margin-top:10px !important;
  font-size:clamp(17px,2.2vw,24px) !important;
  line-height:1.2 !important;
}
body.light-mode .hero-stats{ margin-top:16px !important; gap:20px !important; }
body.light-mode .hero-stats strong{ font-size:17px !important; }
body.light-mode .hero-actions{ margin:16px 0 2px !important; }
body.light-mode .hero-cta-primary{ background:var(--grad-accent) !important; }
body.light-mode .hero-cta-primary:hover{ filter:brightness(1.08) !important; }

/* Logo slot beside the hero orb — image drops in when supplied. */
.brand-logo{
  display:block; width:60px; height:60px; flex:0 0 60px;
  object-fit:cover; border-radius:16px;
  box-shadow:0 6px 18px rgba(43,35,20,.16);
}
.compact-logo{
  display:block; width:30px; height:30px; flex:0 0 30px;
  object-fit:cover; border-radius:9px;
  border:1.5px solid rgba(120,235,255,.55);
  box-shadow:0 0 10px rgba(86,243,255,.40),0 2px 7px rgba(0,10,30,.30);
}
body.light-mode .compact-logo{
  border-color:rgba(126,101,188,.40);
  box-shadow:0 0 8px rgba(126,101,188,.26),0 2px 7px rgba(60,40,120,.14);
}
@media(max-width:640px){
  .brand-logo{ width:46px; height:46px; flex-basis:46px; border-radius:13px; }
  .compact-logo{ width:25px; height:25px; flex-basis:25px; border-radius:8px; }
}

/* Close the gap between hero and the "Choose what you need" heading */
body.light-mode .market-highlight{ margin:12px 0 12px !important; }
body.light-mode .game-bridge{ margin:8px 0 10px !important; }
body.light-mode .store-heading{ margin:14px 2px 12px !important; }
body.light-mode .store-heading h2{
  margin-top:4px !important;
  font-size:clamp(22px,3vw,32px) !important;
  letter-spacing:-.7px !important;
}
body.light-mode .search-wrap{ margin:0 0 12px !important; }
body.light-mode .categories{ margin-bottom:18px !important; }

/* ---------- Blended gradient accents on controls ---------- */
body.light-mode .cat:hover,
body.light-mode .cat.active,
body.light-mode .buy-now-btn,
body.light-mode .telegram-btn,
body.light-mode .review-order-btn,
body.light-mode #continueBtn.telegram-btn,
body.light-mode #orderBtn.telegram-btn,
body.light-mode #previewOrderBtn,
body.light-mode #productContinueBtn,
body.light-mode #togglePlansBtn,
body.light-mode #removeBtn,
body.light-mode #reviewOrderBtn,
body.light-mode #backBtn,
body.light-mode #previewBackBtn,
body.light-mode .dashboard-back-btn,
body.light-mode .plan-filter.active,
body.light-mode .market-highlight-mark,
body.light-mode .store-info-icon{
  background:var(--grad-accent) !important;
  border-color:transparent !important;
  color:#fdfefe !important;
}
body.light-mode .buy-now-btn:hover,
body.light-mode .telegram-btn:hover:not(:disabled),
body.light-mode #productContinueBtn:hover{ filter:brightness(1.09) !important; }
body.light-mode .card,
body.light-mode .panel,
body.light-mode .store-info-section{ background:var(--grad-soft) !important; }
body.light-mode .plan-option{ background:var(--grad-warm) !important; }
body.light-mode .plan-option.active{ background:var(--grad-soft) !important; }
body.light-mode .top-product-badge,
body.light-mode .best-seller-badge{ background:linear-gradient(120deg,#b8842f,#d0a659) !important; }

/* ---------- Professional page transitions (no slide-up-from-bottom) ---------- */
/* .order-view must NOT keep a transform: it contains position:fixed children
   (the checkout box and the order preview) and any transform — even the
   identity one an animation leaves behind — makes it their containing block,
   which sizes them to the panel instead of the viewport and clips them. */
.order-view{ animation:gpFadeOnly .30s ease both !important; }
#checkoutSection.order-dashboard-view,
#previewSection.order-preview-view{
  animation:gpFadeScale .34s cubic-bezier(.22,.61,.36,1) both !important;
}
@keyframes gpFadeOnly{ from{ opacity:0 } to{ opacity:1 } }
@keyframes gpFadeScale{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:none; }
}
/* Neutralise the legacy bottom-slide keyframes still referenced elsewhere. */
@keyframes fadeInUp{ from{opacity:0} to{opacity:1} }
@keyframes orderIn{ from{opacity:0} to{opacity:1} }
@keyframes dashboardEnter{ from{opacity:0} to{opacity:1} }
.plan-option{ animation:gpPlanFade .32s ease both !important; }
@keyframes gpPlanFade{ from{opacity:0} to{opacity:1} }

/* ---------- Dedicated product page (in-flow, storefront style) ---------- */
/* Rendered in normal document flow — never a fixed overlay — so the catalog
   and order views can never bleed through underneath it. */
.product-page{ display:block; width:min(1220px,94%); margin:0 auto; padding:10px 0 46px; }
.product-page.hidden{ display:none !important; }
/* The catalog/order markup is one deeply nested wrapper, so hide the whole
   wrapper rather than its parts — nothing can bleed through underneath. */
body.product-page-mode .page,
body.product-page-mode .neon-announcement{ display:none !important; }
/* The preview screen is a fixed overlay, so lock the page behind it too. */
body.preview-mode{ overflow:hidden !important; }
.product-page-shell{ width:100%; margin:0 auto; }
.product-page:not(.hidden) .product-page-shell{
  animation:gpFadeScale .34s cubic-bezier(.22,.61,.36,1) both;
}

.product-crumb{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 16px; }
.product-crumb-back{
  border:1px solid rgba(43,38,30,.16); border-radius:11px; padding:9px 13px;
  background:#fff; color:#2b2621; font:800 11px Inter,system-ui,sans-serif; cursor:pointer;
  box-shadow:0 2px 8px rgba(43,35,20,.06); transition:.18s ease;
}
.product-crumb-back:hover{ border-color:#2f4370; color:#1d2b50; transform:translateY(-1px); }
.product-crumb-trail{ display:flex; align-items:center; gap:7px; font-size:11px; color:#9c9184; min-width:0; }
.product-crumb-trail i{ font-style:normal; opacity:.5; }
.product-crumb-trail b{ color:#4a4038; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.product-hero{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }

.product-gallery{
  padding:20px; border:1px solid rgba(43,38,30,.11); border-radius:22px;
  background:linear-gradient(160deg,#ffffff,#f7f4ee);
  box-shadow:0 10px 26px rgba(43,35,20,.08), inset 0 1px 0 #fff;
  display:flex; flex-direction:column; align-items:center;
}
.product-gallery-main{
  display:grid; place-items:center;
  width:150px; height:150px; flex:0 0 150px;
  border-radius:20px; background:#fbfaf7; border:1px solid rgba(43,38,30,.07);
  font-size:52px; overflow:hidden; padding:20px;
}
.product-gallery-main img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.product-gallery-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center; }
.product-tag{
  padding:7px 11px; border-radius:999px; font-size:10px; font-weight:800;
  color:#4a4038; background:#fff; border:1px solid rgba(43,38,30,.12);
}

.product-buybox{
  padding:26px; border:1px solid rgba(43,38,30,.11); border-radius:22px;
  background:#fff; box-shadow:0 10px 26px rgba(43,35,20,.08), inset 0 1px 0 #fff;
}
.product-eyebrow{ font-size:9px; font-weight:900; letter-spacing:2px; color:#a8752e; }
.product-title{
  margin:8px 0 10px; font-size:clamp(24px,3.4vw,34px); font-weight:850;
  letter-spacing:-.8px; line-height:1.14; color:#2b2621;
}
.product-meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; font-size:11px; }
.product-stock{ font-weight:800; color:#2f7d5a; }
.product-stock.is-out{ color:#a94848; }
.product-rating{ color:#c99a4f; letter-spacing:1px; }
.product-rating b{ color:#786f63; font-size:10px; letter-spacing:0; margin-left:3px; }

.product-selected{
  padding:14px 16px; border-radius:14px; margin-bottom:14px;
  background:#f8f6f1; border:1px solid rgba(43,38,30,.09);
}
.product-selected-label{ font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:#9c9184; }
.product-selected-name{ margin:6px 0 0; font-size:15px; font-weight:800; color:#2b2621; line-height:1.4; overflow-wrap:anywhere; }

.product-price-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 0 18px; border-top:1px solid rgba(43,38,30,.10); border-bottom:1px solid rgba(43,38,30,.10); margin-bottom:18px;
}
.product-price-label{ font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:#9c9184; }
.product-price{
  margin-top:5px; font-size:30px; font-weight:900; letter-spacing:-.8px; line-height:1;
  background:linear-gradient(120deg,#1d2b50,#41628f 60%,#6d8fb8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.product-price-note{ font-size:10px; color:#9c9184; }
#productContinueBtn{ width:100%; margin-top:0 !important; }
.product-secondary-btn{
  width:100%; margin-top:9px; padding:12px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(43,38,30,.16); background:#fbfaf7; color:#4a4038;
  font:800 12px Inter,system-ui,sans-serif; transition:.18s ease;
}
.product-secondary-btn:hover{ border-color:#2f4370; color:#1d2b50; }
.product-assurances{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.product-assurances li{ display:flex; align-items:center; gap:9px; font-size:11px; color:#786f63; }
.product-assurances span{ font-size:13px; }

/* Deliberately unlike the Order Preview (which is a bordered summary table
   with a caption bar): this is a warm tinted spec sheet of separate chips. */
.product-details{
  position:relative; margin-top:20px; padding:22px 24px 24px;
  border:1px solid rgba(168,117,46,.22); border-left:4px solid #c99a4f;
  border-radius:18px; background:linear-gradient(160deg,#fffdf7,#faf4e8);
  box-shadow:0 6px 18px rgba(43,35,20,.06);
}
.product-details-head{
  display:flex; align-items:center; gap:13px; padding-bottom:15px; margin-bottom:5px;
  border-bottom:1px dashed rgba(168,117,46,.34);
}
.product-details-logo{
  display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px;
  padding:6px; border-radius:12px; font-size:20px; overflow:hidden;
  background:#fff; border:1px solid rgba(168,117,46,.24);
  box-shadow:0 2px 8px rgba(43,35,20,.07);
}
.product-details-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.product-details-title{ margin:0; font-size:15px; font-weight:900; letter-spacing:.2px; color:#6b4a17; text-transform:uppercase; }
.product-details-sub{ display:block; margin-top:3px; font-size:11px; color:#9c8353; font-weight:700; }
.product-detail-rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 0; }
.product-detail-row{
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.82); border:1px solid rgba(168,117,46,.16);
}
.product-detail-row.hidden{ display:none !important; }
.product-detail-row dt{
  display:inline-block; padding:3px 8px; border-radius:999px; margin-bottom:7px;
  font-size:9px; font-weight:900; letter-spacing:.9px; text-transform:uppercase;
  color:#8a6520; background:rgba(201,154,79,.16);
}
.product-detail-row dd{ margin:0; font-size:14px; font-weight:750; color:#40372c; line-height:1.5; overflow-wrap:anywhere; }

/* ---------- Product Benefits: collapsible feature/comparison box ----------
   Sits right under the Warranty/Format/Note card. Collapsed by default so
   it never lengthens the page for someone who's already decided -- see
   togglePBPanel() in the script for why the panel's height always comes
   from its own real content instead of a guessed number. */
.product-benefits{ margin-top:14px; }
.product-benefits.hidden{ display:none !important; }
.pb-toggle{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; border-radius:16px; border:1px solid rgba(118,80,184,.22);
  background:linear-gradient(160deg,#faf8ff,#f2edfd); cursor:pointer; font:inherit; color:#241a44;
}
.pb-toggle-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7650b8,#9470d4); color:#fff; box-shadow:0 4px 10px rgba(94,67,155,.28);
}
.pb-toggle-icon svg{ width:16px; height:16px; }
.pb-toggle-text{ flex:1 1 auto; min-width:0; }
.pb-toggle-text strong{ display:block; font-size:13.5px; font-weight:850; }
.pb-toggle-text small{ display:block; margin-top:2px; font-size:11px; color:#786a9c; }
.pb-chev{ width:17px; height:17px; flex:0 0 auto; color:#8a7ab0; transition:transform .2s ease; }
.pb-toggle[aria-expanded="true"] .pb-chev{ transform:rotate(180deg); }

.pb-panel{ overflow:hidden; transition:max-height .28s ease; }
.pb-panel[data-collapsed="true"]{ max-height:0 !important; }
.pb-inner{
  margin-top:8px; padding:16px 16px 17px; border-radius:16px;
  background:#fff; border:1px solid rgba(118,80,184,.16);
}
.pb-intro{ margin:0 0 13px; font-size:12.5px; line-height:1.6; color:#40372c; }

/* Each comparison point is its own icon+heading block, then a small
   label:value table -- one full-width line per plan. This is what makes a
   full model list (or any long line) readable on a phone: nothing is
   squeezed into a narrow side-by-side column, and it scales to any number
   of plans by adding rows, not columns. */
.pb-rows{ display:flex; flex-direction:column; gap:16px; }
.pb-row + .pb-row{ padding-top:16px; border-top:1px solid rgba(118,80,184,.12); }
.pb-row-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.pb-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:9px;
  display:grid; place-items:center; background:linear-gradient(135deg,#7650b8,#9470d4); color:#fff;
}
.pb-icon svg{ width:14px; height:14px; }
.pb-row-head h5{ margin:0; font-size:12.5px; font-weight:800; color:#241a44; }
.pb-row-text{ margin:0; font-size:11.5px; line-height:1.6; color:#5a4f78; }
.pb-row-text b{ color:#241a44; font-weight:800; }

.pb-mini{ width:100%; border-collapse:collapse; font-size:11.5px; }
.pb-mini td,.pb-mini th{ padding:4px 0; vertical-align:top; text-align:left; }
.pb-mini-tier{
  width:64px; flex:0 0 auto; font-weight:800; font-size:9.5px; letter-spacing:.02em;
  padding-right:8px !important; white-space:nowrap;
}
.pb-mini td{ color:#3a3355; line-height:1.55; }
.pb-t-go{ color:#6a6280; }
.pb-t-plus{ color:#7650b8; }
.pb-t-pro{ color:#4a3a9e; }
.pb-t-share{ color:#6a6280; }
.pb-t-private{ color:#7650b8; }
.pb-t-pro5x{ color:#4a3a9e; }
.pb-t-pro20x{ color:#8a6520; }
.pb-t-proplus{ color:#7650b8; }
.pb-t-max{ color:#8a6520; }

.pb-yn{ display:inline-flex; width:17px; height:17px; border-radius:50%; align-items:center; justify-content:center; font-size:10px; font-weight:900; }
.pb-yn.yes{ background:rgba(47,158,116,.14); color:#1f7d54; }
.pb-yn.no{ background:rgba(192,53,107,.12); color:#a12a58; }

@media(max-width:400px){
  .pb-mini-tier{ width:52px; font-size:9px; }
  .pb-mini{ font-size:11px; }
}

@media(max-width:820px){
  .product-hero{ grid-template-columns:1fr; gap:14px; }
  .product-gallery{ padding:18px; }
  .product-gallery-main{ aspect-ratio:1.8; padding:18px; }
  .product-buybox{ padding:20px; }
  .product-details{ padding:16px 15px 18px; margin-top:14px; }
  .product-detail-rows{ grid-template-columns:1fr; gap:8px; }
  .product-price{ font-size:26px; }
  .pb-toggle{ padding:12px 13px; }
  .pb-inner{ padding:13px 13px 14px; }
}

/* Dark theme */
/* ---------- Page loader ---------- */
.page-loader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(251,250,247,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .24s ease; pointer-events:none;
}
.page-loader.show{ opacity:1; pointer-events:auto; }
.page-loader.hidden{ display:none !important; }

.view-fade-out{ opacity:0; transition:opacity .14s ease; }
.view-fade-in{ animation:viewFadeIn .22s ease; }
@keyframes viewFadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Products -> Plans skeleton screen ---------- */
.plan-skeleton{ width:min(460px,100%); margin:0 auto; }
.skel-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.skel-circle{ width:40px; height:40px; border-radius:50%; flex:0 0 40px; }
.skel-lines{ flex:1; min-width:0; display:grid; gap:8px; }
.skel-line{ height:10px; border-radius:6px; }
.skel-bar{ height:14px; border-radius:8px; margin-bottom:14px; }
.skel-block{ height:130px; border-radius:14px; margin-bottom:14px; }
.skel-chips{ display:flex; gap:10px; }
.skel-chip{ flex:1; height:48px; border-radius:12px; }
.skel-circle,.skel-line,.skel-bar,.skel-block,.skel-chip{
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
  background-size:400% 100%;
  animation:skeletonShimmer 1.4s ease infinite;
}
body.light-mode .skel-circle, body.light-mode .skel-line, body.light-mode .skel-bar,
body.light-mode .skel-block, body.light-mode .skel-chip{
  background:linear-gradient(90deg, rgba(31,41,55,.07) 25%, rgba(31,41,55,.14) 37%, rgba(31,41,55,.07) 63%);
  background-size:400% 100%;
}
@keyframes skeletonShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@media(prefers-reduced-motion:reduce){
  .skel-circle,.skel-line,.skel-bar,.skel-block,.skel-chip{ animation:none; }
}
.page-loader-inner{ display:grid; justify-items:center; gap:16px; }
/* A radar-style "connecting" ping instead of a plain spinner -- reads as
   "reaching out to a system" rather than a generic wait indicator. */
.page-loader-signal{ position:relative; width:44px; height:44px; display:grid; place-items:center; }
.page-loader-signal i{
  width:10px; height:10px; border-radius:50%;
  background:#2f4370; box-shadow:0 0 10px rgba(47,67,112,.5);
}
.page-loader-signal span{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(47,67,112,.45);
  animation:gpPing 1.5s cubic-bezier(.2,.6,.4,1) infinite;
}
.page-loader-signal span:nth-child(2){ animation-delay:.4s; }
.page-loader-signal span:nth-child(3){ animation-delay:.8s; }
@keyframes gpPing{ 0%{ transform:scale(.25); opacity:.9; } 100%{ transform:scale(1.7); opacity:0; } }
.page-loader-track{
  width:150px; height:4px; border-radius:999px; overflow:hidden;
  background:rgba(43,38,30,.10);
}
.page-loader-fill{
  height:100%; width:0%; border-radius:999px;
  background:#2f4370;
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.page-loader-text{
  font-size:11px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:#786f63;
}
/* The page loader used to hand off to whatever it revealed with a hard
   cut -- the spinner would fade out over the same beat the destination
   view just snapped in, so the "loading" never felt connected to what
   came after it. Give the two views the loader actually swaps between
   (product catalog and the dedicated product page) a matching arrival
   animation instead, timed to the loader's own fade-out. */
#catalogShell:not(.hidden), #productPage:not(.hidden){
  animation:gpPageArrive .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gpPageArrive{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  #catalogShell:not(.hidden), #productPage:not(.hidden){ animation:none !important; }
}
/* ---------- "Why Gamepay Hub" scroll-reveal ---------- */
.reveal-up{ opacity:0; transform:translateY(16px); }
.reveal-up.in-view{
  animation:gpRevealUp .62s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes gpRevealUp{ to{ opacity:1; transform:none; } }
.store-info-grid .store-info-card.in-view:nth-child(2){ animation-delay:.09s; }
.store-info-grid .store-info-card.in-view:nth-child(3){ animation-delay:.18s; }
.store-faq-item.in-view:nth-child(2){ animation-delay:.06s; }
.store-faq-item.in-view:nth-child(3){ animation-delay:.12s; }
.store-faq-item.in-view:nth-child(4){ animation-delay:.18s; }

/* ---------- TikTok / no-duration plan card fix ---------- */
.plan-secondary-line.no-duration{
  grid-template-columns:minmax(0,1fr) !important;
  justify-items:end !important;
}
.plan-secondary-line.no-duration .plan-price-block{ text-align:right !important; }
.custom-box.show{
  position:relative; z-index:4; clear:both;
  margin-top:14px !important; padding-top:12px;
  border-top:1px solid rgba(43,38,30,.10);
}
@media(prefers-reduced-motion:reduce){
  .order-view,#checkoutSection.order-dashboard-view,#previewSection.order-preview-view,
  .plan-option,.reveal-up,.reveal-up.in-view,.page-loader-signal span{ animation:none !important; }
  .reveal-up{ opacity:1; transform:none; }
}

/* ===== white-dominant-compact-final ===== */
/* =====================================================================
   v3: white-dominant palette, tightened vertical rhythm, compact
   categories, order-preview overflow fix, and light-only theming.
   Dark mode has been removed, so `.light-mode` is always on <body>.
   ===================================================================== */

/* ---------- Palette: white-dominant with soft complementary accents ---------- */
body.light-mode{
  --ink:#1f2937; --ink-soft:#3f4a5a; --muted:#6b7686; --muted-2:#98a1ad;
  --surface:#ffffff; --surface-2:#f7f9fc; --page-bg:#ffffff;
  --border:rgba(31,41,55,.10); --border-strong:rgba(31,41,55,.17);
  --navy:#25406b; --navy-hover:#2f5288; --navy-active:#1b3155; --navy-ink:#ffffff;
  --gold:#9a6f2c; --gold-soft:#c2a06a;
  --good:#2b7a58; --good-bg:rgba(43,122,88,.10);
  --grad-brand:linear-gradient(120deg,#25406b 0%,#3a5f96 55%,#5b86bd 100%);
  --grad-accent:linear-gradient(120deg,#25406b,#3a5f96 58%,#5580b5);
  --grad-soft:linear-gradient(160deg,#ffffff 0%,#fdfefe 60%,#f6f9fd 100%);
  --grad-warm:linear-gradient(150deg,#ffffff,#f7f9fc);
  --shadow-sm:0 1px 3px rgba(31,41,55,.05), 0 1px 8px rgba(31,41,55,.04);
  --shadow-md:0 6px 18px rgba(31,41,55,.07);
  --shadow-lg:0 14px 34px rgba(31,41,55,.09);
}
body.light-mode{
  background:#ffffff !important;
  background-image:
    radial-gradient(ellipse at 10% 0%,rgba(91,134,189,.055),transparent 45%),
    radial-gradient(ellipse at 92% 2%,rgba(194,160,106,.045),transparent 40%) !important;
  background-attachment:fixed !important;
}

/* ---------- Logo (with graceful fallback if the PNG is missing) ---------- */
.brand-logo.logo-missing,
.compact-logo.logo-missing{
  background:var(--grad-accent); border-radius:16px;
  object-fit:cover; font-size:0; color:transparent;
}
.compact-logo.logo-missing{ border-radius:8px; }

/* ---------- Header + hero: tighter, whiter ---------- */
body.light-mode .compact-header{
  min-height:48px !important; padding:7px 14px 7px 10px !important;
  border-radius:14px !important; background:#fff !important;
  border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .neon-announcement{ height:26px !important; margin:6px auto 2px !important; }
body.light-mode .hero{
  padding:20px 24px 18px !important; border-radius:18px !important;
  background:var(--grad-soft) !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-md) !important;
}
body.light-mode .hero-stats{ margin-top:13px !important; gap:18px !important; }
body.light-mode .hero-actions{ margin:13px 0 0 !important; }
body.light-mode .hero-copy{ margin-top:8px !important; }

/* ---------- Kill the dead space the user circled ---------- */
body.light-mode .page{ padding-top:6px !important; padding-bottom:30px !important; }
body.light-mode .market-highlight{ min-height:48px !important; margin:10px 0 8px !important; padding:8px 12px !important; }
body.light-mode .game-bridge{ display:none !important; }   /* decorative filler, pure empty space */
body.light-mode .search-wrap{ width:100% !important; margin:0 0 10px !important; }
body.light-mode .search-wrap input{
  height:42px !important; padding:12px 16px !important;   /* no icon, so no left inset */
  border-radius:11px !important; font-size:13px !important;
  background:#fff !important; border-color:var(--border-strong) !important;
  box-shadow:var(--shadow-sm) !important;
}
body.light-mode .catalog-view > .store-info-section{ margin-top:18px !important; }

/* ---------- Categories: compact single band ---------- */
body.light-mode .categories{
  gap:6px !important; margin-bottom:12px !important; padding:6px 6px !important;
  background:linear-gradient(180deg,#fff 55%,rgba(255,255,255,0)) !important;
}
body.light-mode .cat{
  padding:6px 11px !important; font-size:11.5px !important; border-radius:999px !important;
  background:#f7f9fc !important; border-color:var(--border) !important;
  color:var(--muted) !important; box-shadow:none !important;
}
body.light-mode .cat:hover,
body.light-mode .cat.active{
  background:var(--grad-accent) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:var(--shadow-sm) !important;
}
@media(max-width:640px){
  body.light-mode .categories{ gap:5px !important; margin-bottom:10px !important; }
  body.light-mode .cat{ padding:5px 9px !important; font-size:10.5px !important; }
}

/* ---------- Cards / panels: white-dominant ---------- */
body.light-mode .card,
body.light-mode .panel,
body.light-mode .store-info-section,
body.light-mode .product-gallery,
body.light-mode .product-buybox{
  background:#fff !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .card:hover{ box-shadow:var(--shadow-md) !important; border-color:var(--border-strong) !important; }
body.light-mode .icon-wrap{ background:#f7f9fc !important; border-color:var(--border) !important; }
body.light-mode .plan-option{ background:var(--grad-warm) !important; }
body.light-mode .plan-option.active{ background:#fff !important; }
body.light-mode .store-info-card,
body.light-mode .product-selected,
body.light-mode .cart-item,
body.light-mode .info-card{ background:#f7f9fc !important; border-color:var(--border) !important; }

/* ---------- Order preview: never cut off, buttons always reachable ---------- */
/* :not(.hidden) matters — an id+class rule would otherwise outrank .hidden
   and leave the preview permanently on top of the page. */
#previewSection.order-preview-view:not(.hidden){
  display:block !important;
  padding:14px clamp(12px,3vw,28px) 40px !important;
  -webkit-overflow-scrolling:touch !important;
}
/* min-height:100% on the shell forced the box to a fixed frame and clipped
   the action buttons; let it grow with its content instead. */
#previewSection.order-preview-view .preview-shell{
  min-height:0 !important; height:auto !important;
  padding-bottom:max(30px, env(safe-area-inset-bottom)) !important;
}
#previewSection .preview-final-box{
  max-height:none !important; overflow:visible !important; min-height:0 !important;
}
#previewSection #previewOrderBtn{ margin-top:16px !important; }
body.light-mode #previewSection.order-preview-view{
  background:#fff !important;
  background-image:radial-gradient(ellipse at 10% 0%,rgba(91,134,189,.05),transparent 45%) !important;
}
body.light-mode .preview-final-box{
  background:#fff !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .preview-table-caption{ background:#f7f9fc !important; border-bottom-color:var(--border) !important; }
#checkoutSection.order-dashboard-view{ padding-bottom:34px !important; }

/* ---------- Product page: logo grouped tightly with the details ---------- */
.product-hero{ grid-template-columns:200px minmax(0,1fr) !important; gap:16px !important; }
.product-gallery{ padding:14px !important; gap:10px; }
.product-gallery-main{ width:118px !important; height:118px !important; flex-basis:118px !important; padding:14px !important; border-radius:16px !important; }
.product-gallery-tags{ margin-top:10px !important; }
.product-tag{ padding:5px 9px !important; font-size:9.5px !important; }
.product-buybox{ padding:20px !important; }
.product-title{ margin:6px 0 8px !important; }
.product-details{ margin-top:14px !important; padding:18px 20px 20px !important; }
.product-details-head{ padding-bottom:12px !important; }
@media(max-width:820px){
  .product-hero{ grid-template-columns:1fr !important; }
  /* Mobile: logo sits inline with the title so they read as one group. */
  .product-gallery{ flex-direction:row !important; align-items:center !important; gap:12px !important; padding:12px !important; }
  .product-gallery-main{ width:74px !important; height:74px !important; flex-basis:74px !important; padding:10px !important; border-radius:14px !important; }
  .product-gallery-tags{ margin-top:0 !important; justify-content:flex-start !important; }
}

/* ---------- Loading overlay: smoother, on-brand ----------
   Light mode only -- these were previously unscoped and used !important,
   so (unlike a normal specificity fight) they silently beat the dark-mode
   colors above regardless of which theme was active. */
body.light-mode .page-loader{ background:rgba(255,255,255,.86) !important; }
.page-loader-inner{ gap:14px; }
body.light-mode .page-loader-signal i{ background:#25406b; box-shadow:0 0 10px rgba(37,64,107,.45); }
body.light-mode .page-loader-signal span{ border-color:rgba(37,64,107,.40); }
body.light-mode .page-loader-track{ background:rgba(37,64,107,.12); }
body.light-mode .page-loader-fill{ background:linear-gradient(90deg,#3a5f96,#25406b); }
body.light-mode .page-loader-text{ color:#6b7686; font-size:10.5px; }

/* ---------- Misc trims ---------- */
body.light-mode .site-footer{ margin-top:26px !important; padding:18px 10px 22px !important; }
body.light-mode .store-info-section{ padding:20px !important; }
body.light-mode .store-info-head.compact{ margin-top:18px !important; }
.theme-toggle, .floating-theme-control{ display:none !important; }

@media(prefers-reduced-motion:reduce){
  .page-loader-signal span{ animation:none !important; opacity:.6 !important; transform:none !important; }
}

/* ===== pale-white-landing-final ===== */
/* =====================================================================
   v4: pale-white theme, landing page + separate products page,
   restructured product box. Last block in the document.
   ===================================================================== */
body.light-mode{
  --ink:#1c2434; --ink-soft:#3b4557; --muted:#6a7488; --muted-2:#98a1b2;
  --surface:#ffffff; --surface-2:#f6f8fc; --page-bg:#fbfcfe;
  --border:rgba(28,36,52,.09); --border-strong:rgba(28,36,52,.15);
  --navy:#33528a; --navy-hover:#3e63a5; --navy-active:#27406e; --navy-ink:#ffffff;
  --violet:#7b5cd6; --teal:#2fa8ae; --gold:#b4842f;
  --grad-accent:linear-gradient(115deg,#33528a,#5a63b8 52%,#7b5cd6);
  --grad-brand:linear-gradient(115deg,#2b4a80,#5a63b8 50%,#7b5cd6);
  --grad-panel:linear-gradient(150deg,#f4f7fe 0%,#f7f2fd 48%,#eef8fb 100%);
  --shadow-sm:0 1px 2px rgba(28,36,52,.05), 0 2px 10px rgba(28,36,52,.04);
  --shadow-md:0 8px 22px rgba(28,36,52,.07);
  --shadow-lg:0 18px 40px rgba(28,36,52,.09);
}
body.light-mode{
  background:var(--page-bg) !important;
  background-image:
    radial-gradient(ellipse at 8% -4%,rgba(123,92,214,.07),transparent 46%),
    radial-gradient(ellipse at 96% 0%,rgba(47,168,174,.06),transparent 42%) !important;
}
.hidden{ display:none !important; }

/* ---------- Landing hero ---------- */
.lp-hero{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:22px; align-items:stretch; margin:6px 0 18px;
}
.lp-hero > *{ min-width:0; }
.lp-hero-copy > *{ min-width:0; max-width:100%; }
.lp-hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:30px 30px 28px; border-radius:22px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.lp-kicker{ font-size:9.5px; font-weight:900; letter-spacing:2.2px; color:var(--violet); }
.lp-title{
  overflow-wrap:anywhere; margin:10px 0 0; font-size:clamp(25px,3.5vw,40px); font-weight:850;
  letter-spacing:-1px; line-height:1.1; color:var(--ink);
}
.lp-brand{
  display:block; margin-bottom:2px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lp-sub{ margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--muted); max-width:46ch; }

/* scrolling student-offer ticker */
.lp-ticker{
  position:relative; overflow:hidden; width:100%; max-width:100%; margin:16px 0 0; height:32px;
  border-radius:999px; border:1px solid rgba(123,92,214,.20);
  background:linear-gradient(90deg,rgba(123,92,214,.07),rgba(47,168,174,.07));
}
.lp-ticker::before,.lp-ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; z-index:2; pointer-events:none;
}
.lp-ticker::before{ left:0; background:linear-gradient(90deg,#f7f5fd,transparent); }
.lp-ticker::after{ right:0; background:linear-gradient(270deg,#eef8fb,transparent); }
.lp-ticker-track{
  display:flex; align-items:center; gap:18px; height:100%; width:max-content;
  white-space:nowrap; padding-left:8px;
  font-size:11px; font-weight:800; color:#4a4270;
  animation:lpTicker 24s linear infinite;
}
.lp-ticker-track b{ color:var(--violet); }
@keyframes lpTicker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.lp-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
body.light-mode .lp-cta,
.lp-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:12px; border:1px solid transparent;
  font:800 13px Inter,system-ui,sans-serif; cursor:pointer; text-decoration:none;
  color:#ffffff !important; background:var(--grad-accent); box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lp-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); filter:brightness(1.06); }
body.light-mode .lp-cta-ghost,
.lp-cta-ghost{
  color:var(--ink-soft) !important; background:var(--surface-2);
  border-color:var(--border-strong); box-shadow:none;
}
.lp-cta-ghost:hover{ color:var(--navy); border-color:var(--navy); filter:none; }

/* ---------- Landing panel with the brand tiles ---------- */
.lp-hero-panel{
  padding:22px; border-radius:22px; border:1px solid var(--border);
  background:var(--grad-panel); box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:16px; justify-content:center;
}
.lp-panel-head{ display:flex; align-items:center; gap:12px; }
.lp-panel-logo{
  width:56px; height:56px; flex:0 0 56px; border-radius:15px; object-fit:cover;
  box-shadow:0 6px 16px rgba(28,36,52,.14);
}
.lp-panel-head strong{ display:block; font-size:15px; font-weight:850; color:var(--ink); letter-spacing:-.3px; }
.lp-panel-head span{ display:block; margin-top:2px; font-size:10.5px; color:var(--muted); }
.lp-brands{ display:grid; gap:13px; }
.lp-brand-label{
  display:block; margin-bottom:7px;
  font-size:9px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-2);
}
.brand-row{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.brand-tile{
  display:grid; place-items:center; width:38px; height:38px; padding:6px;
  border-radius:11px; background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.brand-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.brand-tile img{ max-width:100%; max-height:100%; object-fit:contain; }
.brand-tile i{ display:none; }
/* If the official art is missing, show a compact readable name chip instead. */
.brand-tile.no-art{ width:auto; min-width:38px; padding:0 10px; }
.brand-tile.no-art img{ display:none; }
.brand-tile.no-art{
  background:linear-gradient(150deg,#fbfcfe,#f2f5fb);
  border-color:var(--border-strong);
}
.brand-tile.no-art i{
  display:block; font-style:normal; font-size:9px; font-weight:900;
  letter-spacing:.2px; color:var(--ink-soft); white-space:nowrap;
}
.brand-more{
  padding:0 11px; height:38px; display:inline-flex; align-items:center;
  border-radius:11px; font-size:10px; font-weight:900; color:#fff;
  background:var(--grad-accent); box-shadow:var(--shadow-sm);
}

@media(max-width:900px){
  .lp-hero{ grid-template-columns:1fr; gap:14px; }
  .lp-hero-copy{ padding:22px 20px 20px; }
  .lp-hero-panel{ padding:18px; }
  .lp-cta{ padding:11px 16px; font-size:12px; }
}
@media(max-width:430px){
  .lp-actions{ gap:8px; }
  .lp-cta{ flex:1 1 100%; justify-content:center; }
  .brand-tile{ width:34px; height:34px; padding:5px; border-radius:10px; }
  .brand-more{ height:34px; font-size:9px; }
}

/* ---------- Products page ---------- */
.products-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 14px;
}
.products-head h2{
  margin:0; font-size:clamp(19px,2.4vw,26px); font-weight:850;
  letter-spacing:-.6px; color:var(--ink);
}
body.light-mode .catalog-shell{ animation:gpFadeOnly .3s ease both; }

/* ---------- Product details box: grouped top, two actions at the bottom ---------- */
.product-hero{ display:block !important; }
.product-buybox{ padding:22px !important; }
.product-topgroup{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);
}
.product-topgroup .product-gallery-main{
  width:76px !important; height:76px !important; flex:0 0 76px !important;
  padding:11px !important; border-radius:16px !important;
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
}
.product-topgroup-copy{ min-width:0; }
.product-topgroup .product-title{ margin:5px 0 8px !important; font-size:clamp(20px,2.8vw,27px) !important; }
.product-topgroup .product-meta-row{ margin-bottom:0 !important; gap:7px !important; flex-wrap:wrap; }
.product-actions{ display:grid; gap:9px; margin-top:18px; }
.product-actions .telegram-btn,
.product-actions .product-secondary-btn{ width:100%; margin:0 !important; }
@media(max-width:600px){
  .product-topgroup{ gap:11px; }
  .product-topgroup .product-gallery-main{ width:60px !important; height:60px !important; flex-basis:60px !important; padding:9px !important; }
  .product-buybox{ padding:16px !important; }
}

/* ---------- Shared surfaces in the pale theme ---------- */
body.light-mode .compact-header,
body.light-mode .card,
body.light-mode .panel,
body.light-mode .store-info-section,
body.light-mode .product-buybox{
  background:var(--surface) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
/* The final order-preview card gets its own gold+purple glass treatment
   instead of the plain white "surface" every other card gets -- this is
   the last screen a customer sees before placing the order, so it's
   worth it standing out. Kept as the last ".preview-final-box" rule in
   the file (several earlier ones fight over this same selector) so it
   actually wins. */
body.light-mode .preview-final-box{
  background:linear-gradient(160deg,rgba(255,251,240,.92),rgba(233,215,255,.75)) !important;
  backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important;
  border:2px solid rgba(212,168,67,.65) !important;
  box-shadow:0 0 0 4px rgba(168,124,224,.22), 0 18px 40px rgba(93,72,137,.22), inset 0 1px rgba(255,255,255,.85) !important;
  color:#372b52 !important;
  animation:none !important;
}
body.light-mode .preview-final-box::before{
  background:linear-gradient(90deg,transparent,#d4a843,#a87ce0,transparent) !important;
  box-shadow:0 0 10px rgba(212,168,67,.55),0 0 20px rgba(168,124,224,.50) !important;
  display:block !important;
}
body.light-mode .store-info-card,
body.light-mode .icon-wrap,
body.light-mode .cart-item,
body.light-mode .product-selected,
body.light-mode .info-card{ background:var(--surface-2) !important; border-color:var(--border) !important; }
body.light-mode .store-info-icon,
body.light-mode .cat:hover,
body.light-mode .cat.active,
body.light-mode .buy-now-btn,
body.light-mode .telegram-btn,
body.light-mode .plan-filter.active,
body.light-mode .plan-toggle,
body.light-mode .dashboard-back-btn,
body.light-mode #productContinueBtn{
  background:var(--grad-accent) !important; color:#fff !important; border-color:transparent !important;
}
body.light-mode .product-price,
body.light-mode .price-from,
body.light-mode .plan-price-block strong{ color:var(--navy) !important; }
body.light-mode .product-price{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.light-mode .neon-announcement{ display:none !important; }

@media(prefers-reduced-motion:reduce){
  .lp-ticker-track{ animation:none !important; }
}

/* ===== vibrant-hero-final ===== */
/* =====================================================================
   v5: brighter palette, scaled-down hero type, inline hero illustration,
   self-contained brand marks, and the corrected product page order.
   ===================================================================== */
body.light-mode{
  --ink:#141c2e; --ink-soft:#39445a; --muted:#68738a; --muted-2:#98a2b6;
  --surface:#ffffff; --surface-2:#f4f8ff; --page-bg:#ffffff;
  --border:rgba(20,28,46,.08); --border-strong:rgba(20,28,46,.14);
  --navy:#3a5bd9; --navy-hover:#4a6bec; --navy-ink:#ffffff;
  --violet:#7c4ddb; --teal:#17b3c8; --gold:#e0a020;
  --grad-accent:linear-gradient(115deg,#3a5bd9,#6a54e0 52%,#9b53d8);
  --grad-brand:linear-gradient(112deg,#2f4fd0,#7145dd 48%,#b449c9);
  --grad-panel:linear-gradient(150deg,#f2f6ff 0%,#f6f0ff 46%,#eafaff 100%);
  --shadow-sm:0 1px 2px rgba(20,28,46,.05), 0 3px 12px rgba(58,91,217,.06);
  --shadow-md:0 10px 26px rgba(58,91,217,.10);
  --shadow-lg:0 20px 44px rgba(58,91,217,.13);
}
body.light-mode{
  background:#fff !important;
  background-image:
    radial-gradient(ellipse at 6% -6%,rgba(124,77,219,.11),transparent 46%),
    radial-gradient(ellipse at 98% 0%,rgba(23,179,200,.10),transparent 44%),
    radial-gradient(ellipse at 50% 108%,rgba(58,91,217,.07),transparent 52%) !important;
}

/* ---------- Hero: smaller, balanced typography ---------- */
.lp-hero{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) !important; gap:18px !important; align-items:start !important; }
.lp-hero-copy{ padding:24px 26px 22px !important; }
.lp-kicker{ font-size:8.5px !important; letter-spacing:1.9px !important; color:var(--violet) !important; }
.lp-title{
  margin:8px 0 0 !important;
  font-size:clamp(19px,2.15vw,27px) !important;
  line-height:1.16 !important; letter-spacing:-.5px !important; font-weight:800 !important;
}
.lp-brand{ font-size:1.24em; margin-bottom:1px !important; }
.lp-sub{ margin-top:9px !important; font-size:11.5px !important; line-height:1.55 !important; max-width:44ch !important; }
.lp-ticker{ height:28px !important; margin-top:13px !important; }
.lp-ticker-track{ font-size:10px !important; gap:14px !important; }
.lp-actions{ margin-top:14px !important; gap:9px !important; }
body.light-mode .lp-cta, .lp-cta{ padding:10px 16px !important; font-size:12px !important; border-radius:11px !important; }

/* ---------- Hero illustration ---------- */
.lp-hero-right{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.lp-hero-right .lp-hero-panel{ flex:1; }
.lp-art{ display:block; margin:0; }
.lp-art svg{ display:block; width:100%; height:auto; max-height:210px; }

/* ---------- Panel + brand marks (no external requests) ---------- */
.lp-hero-panel{ padding:18px !important; gap:13px !important; }
.lp-panel-logo{ width:46px !important; height:46px !important; flex-basis:46px !important; border-radius:13px !important; }
.lp-panel-head strong{ font-size:13.5px !important; }
.lp-panel-head span{ font-size:9.5px !important; }
.lp-brand-label{ font-size:8.5px !important; margin-bottom:6px !important; }
.brand-tile{ width:34px; height:34px; padding:5px; border-radius:10px; }
.brand-tile.tile-wide{ width:auto; min-width:34px; padding:0 9px; }
.brand-tile.tile-mc{ width:46px; padding:5px 7px; }
.brand-tile .tile-name{ display:none; }
.brand-tile.has-art > *:not(img){ display:none !important; }
.brand-tile.has-art img{ display:block; max-width:100%; max-height:100%; object-fit:contain; }
.mark-svg{ width:100%; height:100%; display:block; }
.mark-visa{
  font:italic 900 13px/1 Inter,system-ui,sans-serif; letter-spacing:.4px; color:#1434CB; white-space:nowrap;
}
.mark-word{ display:grid; line-height:1; text-align:center; white-space:nowrap; }
.mark-word b{ font-size:10.5px; font-weight:900; letter-spacing:.2px; }
.mark-word i{ font-style:normal; font-size:6.5px; font-weight:800; letter-spacing:.5px; color:var(--muted-2); margin-top:2px; }
.mark-mlbb b{ background:linear-gradient(100deg,#1c6ee0,#f0b429); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mark-genshin b{ background:linear-gradient(100deg,#2f8fd6,#7c4ddb); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-more{ height:34px; font-size:9.5px; }

/* ---------- Brighter surfaces ---------- */
body.light-mode .compact-header,
body.light-mode .card,
body.light-mode .panel,
body.light-mode .store-info-section,
body.light-mode .product-buybox,
body.light-mode .lp-hero-copy{
  background:#fff !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .store-info-icon{ box-shadow:0 4px 12px rgba(58,91,217,.22) !important; }
body.light-mode .cat:hover, body.light-mode .cat.active,
body.light-mode .buy-now-btn, body.light-mode .telegram-btn,
body.light-mode .plan-filter.active, body.light-mode .plan-toggle,
body.light-mode .dashboard-back-btn, body.light-mode #productContinueBtn,
body.light-mode .brand-more, body.light-mode .lp-cta:not(.lp-cta-ghost){
  background:var(--grad-accent) !important; color:#fff !important; box-shadow:var(--shadow-sm) !important;
}
body.light-mode .plan-option.active{ border-color:var(--navy) !important; box-shadow:0 0 0 2px rgba(58,91,217,.16), var(--shadow-md) !important; }

/* ---------- Product page: details inside the box, support outside ---------- */
.product-buybox .product-details{
  margin:0 0 14px !important; border-radius:14px !important; padding:15px 16px 16px !important;
}
.product-buybox .product-detail-rows{ gap:8px !important; margin-top:12px !important; }
.product-buybox .product-detail-row{ padding:10px 12px !important; }
.product-support{
  margin-top:14px; padding:16px 18px; border-radius:18px;
  border:1px solid var(--border); background:var(--surface-2); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.product-support-head strong{ display:block; font-size:13px; font-weight:850; color:var(--ink); }
.product-support-head span{ display:block; margin-top:3px; font-size:11px; color:var(--muted); }
.product-support-links{ display:flex; gap:8px; flex-wrap:wrap; }
.product-support-links .support-btn{
  padding:9px 13px; border-radius:11px; font:800 11px Inter,system-ui,sans-serif;
  text-decoration:none; color:var(--ink-soft) !important;
  background:#fff; border:1px solid var(--border-strong);
}
.product-support-links .support-btn:hover{ border-color:var(--navy); color:var(--navy) !important; }

@media(max-width:900px){
  .lp-hero{ grid-template-columns:1fr !important; }
  .lp-art svg{ max-height:170px; }
}
@media(max-width:600px){
  .lp-hero-copy{ padding:18px 16px 16px !important; }
  .lp-title{ font-size:clamp(18px,5.4vw,23px) !important; }
  .lp-sub{ font-size:11px !important; }
  .lp-art svg{ max-height:150px; }
  .product-support{ flex-direction:column; align-items:flex-start; }
}

/* ===== editorial-hero-final ===== */
/* =====================================================================
   v6: reference-style split hero (copy left / illustration right),
   brand list demoted to a slim strip, and a light intro splash.
   ===================================================================== */

/* ---------- Hero: one clean white card, text left, artwork right ---------- */
.lp-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) !important;
  align-items:center !important;
  gap:8px !important;
  margin:8px 0 14px !important;
  padding:34px 40px !important;
  border-radius:26px !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 14px 40px rgba(58,91,217,.09) !important;
  overflow:hidden;
}
/* An earlier sheet styles .lp-hero-copy as its own card; outrank it so the
   copy sits flat inside the single hero card. */
body.light-mode .lp-hero .lp-hero-copy,
.lp-hero .lp-hero-copy{
  padding:0 !important; background:none !important; background-image:none !important;
  border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
.lp-kicker{ font-size:9px !important; letter-spacing:2.4px !important; }
.lp-title{
  margin:11px 0 0 !important;
  font-size:clamp(21px,2.5vw,32px) !important;
  line-height:1.14 !important; letter-spacing:-.7px !important;
}
.lp-brand{ font-size:1.18em; }
.lp-sub{ margin-top:11px !important; font-size:12.5px !important; max-width:40ch !important; }
.lp-ticker{ margin-top:15px !important; }
.lp-actions{ margin-top:17px !important; }

.lp-art{ display:block; min-width:0; }
.lp-art svg{ display:block; width:100%; height:auto; max-height:280px; }

/* ---------- Brand strip: slim, secondary, below the hero ---------- */
.lp-brandstrip{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:20px;
  margin:0 0 16px; padding:15px 20px; border-radius:18px;
  background:var(--grad-panel); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.lp-strip-brand{ display:flex; align-items:center; gap:11px; }
.lp-strip-brand .lp-panel-logo{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px; object-fit:cover;
  box-shadow:0 5px 14px rgba(28,36,52,.14);
}
.lp-strip-brand strong{ display:block; font-size:12.5px; font-weight:850; color:var(--ink); letter-spacing:-.2px; }
.lp-strip-brand span{ display:block; margin-top:2px; font-size:9.5px; color:var(--muted); }
.lp-brandstrip .lp-brands{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:10px 26px;
}
.lp-brandstrip .lp-brand-label{ font-size:8px !important; margin-bottom:5px !important; }
.lp-brandstrip .brand-tile{ width:30px; height:30px; padding:4px; border-radius:9px; }
.lp-brandstrip .brand-tile.tile-wide{ width:auto; min-width:30px; padding:0 8px; }
.lp-brandstrip .brand-tile.tile-mc{ width:40px; padding:4px 6px; }
.lp-brandstrip .brand-more{ height:30px; font-size:9px; padding:0 10px; }
.lp-brandstrip .mark-visa{ font-size:11.5px; }
.lp-brandstrip .mark-word b{ font-size:9.5px; }
.lp-brandstrip .mark-word i{ font-size:6px; }

@media(max-width:940px){
  .lp-hero{ grid-template-columns:1fr !important; padding:24px 22px !important; gap:4px !important; }
  .lp-art{ order:-1; }
  .lp-art svg{ max-height:210px; }
  .lp-brandstrip{ grid-template-columns:1fr; gap:14px; }
  .lp-brandstrip .lp-brands{ grid-template-columns:1fr; gap:11px; }
}
@media(max-width:560px){
  .lp-hero{ padding:18px 16px !important; border-radius:20px !important; }
  .lp-title{ font-size:clamp(19px,5.6vw,24px) !important; }
  .lp-art svg{ max-height:180px; }
}

/* ===== compact-hero-real-logos ===== */
/* Real brand art in the strip */
.brand-tile.tile-sq{ width:34px; height:34px; padding:0; overflow:hidden; }
.brand-tile.tile-card{ width:52px; height:34px; padding:2px; }
.brand-tile.has-art img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; }
.brand-tile.tile-sq img{ object-fit:cover; }
.lp-brandstrip .brand-tile.tile-sq{ width:30px; height:30px; }
.lp-brandstrip .brand-tile.tile-card{ width:46px; height:30px; }

/* Hero takes far less vertical space */
.lp-hero{
  padding:22px 30px !important; margin:6px 0 10px !important;
  gap:20px !important; border-radius:22px !important;
}
.lp-kicker{ font-size:8.5px !important; letter-spacing:2.2px !important; }
.lp-title{ margin:8px 0 0 !important; font-size:clamp(19px,2.1vw,27px) !important; line-height:1.15 !important; }
.lp-brand{ font-size:1.12em; }
.lp-sub{ margin-top:8px !important; font-size:11.5px !important; }
.lp-ticker{ margin-top:11px !important; height:26px !important; }
.lp-ticker-track{ font-size:9.5px !important; }
.lp-actions{ margin-top:12px !important; }
body.light-mode .lp-cta, .lp-cta{ padding:9px 15px !important; font-size:11.5px !important; }
.lp-art svg{ max-height:200px !important; }
.lp-brandstrip{ padding:12px 18px !important; margin-bottom:12px !important; }
@media(max-width:940px){
  .lp-hero{ padding:18px 18px !important; }
  .lp-art svg{ max-height:160px !important; }
}
@media(max-width:560px){
  .lp-art svg{ max-height:140px !important; }
  .lp-title{ font-size:clamp(18px,5.2vw,22px) !important; }
}

/* ===== hero-3d-final ===== */
/* ---------- 3D extruded brand lettering (reference-style) ---------- */
body.light-mode .lp-hero .lp-brand,
.lp-brand{
  display:block;
  font-weight:900 !important;
  font-size:clamp(32px,3.9vw,52px) !important;
  letter-spacing:-.5px;
  line-height:1.02;
  margin-bottom:6px !important;
  color:#4b39c9 !important;
  -webkit-text-fill-color:#4b39c9 !important;
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  text-shadow:
     1px 1px 0 #7c5be6,
     2px 2px 0 #6e4fdc,
     3px 3px 0 #6044cf,
     4px 4px 0 #5239bf,
     5px 5px 0 #452fae,
     6px 6px 0 #3a279b,
     7px 8px 14px rgba(58,39,155,.34);
  transform:rotate(-1.2deg);
  transform-origin:left center;
}
/* second line sits flat and quiet so the 3D line owns the space */
.lp-title{
  font-weight:750 !important; color:#39445a !important;
  font-size:clamp(14px,1.45vw,18px) !important; line-height:1.35 !important;
  letter-spacing:-.1px !important; max-width:34ch;
}

/* ---------- Give the figure real dimension ---------- */
.lp-art{ filter:drop-shadow(0 18px 26px rgba(40,52,90,.16)); }
.lp-art svg [fill="url(#hShirt)"]{ filter:drop-shadow(0 6px 8px rgba(40,52,90,.22)); }

@media(max-width:560px){
  .lp-brand{ font-size:clamp(28px,8.6vw,38px) !important; text-shadow:
     1px 1px 0 #7c5be6, 2px 2px 0 #6044cf, 3px 3px 0 #5239bf,
     4px 4px 0 #452fae, 5px 6px 11px rgba(58,39,155,.34) !important; }
}

/* ===== hero-student-photo ===== */
.lp-art{ filter:none !important; display:flex; justify-content:center; }
.lp-photo{
  position:relative; margin:0; width:100%; max-width:330px;
  border-radius:22px; overflow:visible;
}
.lp-photo img{
  display:block; width:100%; height:auto; max-height:250px;
  object-fit:cover; object-position:50% 22%;
  border-radius:20px;
  box-shadow:0 18px 38px rgba(40,52,90,.18);
}
/* soft brand glow behind the photo */
.lp-photo::before{
  content:""; position:absolute; inset:-16px -14px -10px;
  border-radius:28px; z-index:-1;
  background:linear-gradient(150deg,rgba(124,108,240,.20),rgba(63,192,216,.16));
  filter:blur(2px);
}
.lp-photo-badge{
  position:absolute; left:-10px; bottom:-14px;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:13px;
  background:#fff; box-shadow:0 8px 20px rgba(28,36,52,.16);
  border:1px solid rgba(20,28,46,.07);
}
.lp-photo-badge span{ font-size:15px; line-height:1; }
.lp-photo-badge b{ display:block; font-size:10.5px; font-weight:900; color:#141c2e; }
.lp-photo-badge i{ display:block; font-style:normal; font-size:8.5px; color:#68738a; margin-top:1px; }
@media(max-width:940px){
  .lp-photo{ max-width:300px; }
  .lp-photo img{ max-height:210px; }
}
@media(max-width:560px){
  .lp-photo{ max-width:100%; }
  .lp-photo img{ max-height:190px; }
  .lp-photo-badge{ left:6px; bottom:-12px; padding:7px 10px; }
}

/* ===== hero-photo-blend ===== */
/* The café photo is warm (orange/brown) and the site palette is cool
   indigo/violet, so seat it on a brand panel and tint it to match. */
.lp-photo{
  padding:10px !important;
  border-radius:24px !important;
  background:linear-gradient(150deg,#eef1ff 0%,#f3edff 48%,#e9f8fd 100%) !important;
  border:1px solid rgba(20,28,46,.06);
  box-shadow:0 12px 30px rgba(58,91,217,.10);
}
.lp-photo::before{ display:none !important; }
.lp-photo img{
  border-radius:16px !important;
  box-shadow:0 6px 16px rgba(40,52,90,.14) !important;
  filter:saturate(.86) contrast(1.03) brightness(1.02);
}
/* cool wash that pulls the warm tones toward the brand palette */
.lp-photo::after{
  content:""; position:absolute; inset:10px; border-radius:16px; pointer-events:none;
  background:linear-gradient(150deg,rgba(88,78,214,.30),rgba(52,150,205,.16) 55%,rgba(124,108,240,.20));
  mix-blend-mode:soft-light;
}
.lp-photo-badge{
  left:-8px !important; bottom:-12px !important;
  border-color:rgba(20,28,46,.06) !important;
  box-shadow:0 10px 22px rgba(58,91,217,.16) !important;
}
@media(max-width:560px){
  .lp-photo{ padding:8px !important; }
  .lp-photo::after{ inset:8px; }
  .lp-photo-badge{ left:6px !important; }
}

/* ===== card-tiles-blend ===== */
/* Payment/game tiles sit on the same soft brand panel as the hero photo
   so the card photography stops fighting the interface. */
.lp-brandstrip .brand-tile.tile-card,
.lp-brandstrip .brand-tile.tile-sq{
  background:linear-gradient(150deg,#eef1ff,#f3edff 52%,#e9f8fd) !important;
  border:1px solid rgba(20,28,46,.07) !important;
  box-shadow:0 3px 10px rgba(58,91,217,.10) !important;
  padding:3px !important;
}
.lp-brandstrip .brand-tile.tile-card{ width:60px !important; height:38px !important; }
.lp-brandstrip .brand-tile.tile-sq{ width:38px !important; height:38px !important; }
.lp-brandstrip .brand-tile.tile-card img,
.lp-brandstrip .brand-tile.tile-sq img{
  border-radius:6px !important;
  filter:saturate(.9) contrast(1.02);
}
.lp-brandstrip .brand-tile.tile-card:hover img,
.lp-brandstrip .brand-tile.tile-sq:hover img{ filter:none; }

/* ===== long-note-spec ===== */
/* Long feature lists (Cursor etc.) need to breathe: the Note cell spans the
   full row, keeps its line breaks and drops to a smaller type size. */
.product-detail-row.row-wide{ grid-column:1 / -1; }
.product-detail-row dd.dd-note{
  white-space:pre-line;
  font-size:11px !important;
  font-weight:650 !important;
  line-height:1.62 !important;
  letter-spacing:.05px;
  max-height:none;
}
/* render the tick list as a tidy two-column block when there is room */
@media(min-width:620px){
  .product-detail-row dd.dd-note.is-list{
    columns:2; column-gap:22px; column-rule:1px solid rgba(20,28,46,.07);
  }
}
.product-detail-row dd.dd-note b{
  display:block; margin-bottom:5px; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:#9c9184; font-weight:900;
  column-span:all;
}
@media(max-width:600px){
  .product-detail-row dd.dd-note{ font-size:10.5px !important; line-height:1.58 !important; }
}

/* ===== myanmar-font-support ===== */
/* Latin stacks carry no Myanmar glyphs, so Burmese text fell back to
   whatever the device had. Append proper Myanmar Unicode faces everywhere. */
:root{ --mm:"Noto Sans Myanmar","Padauk","Myanmar Text","Myanmar Sans Pro","Pyidaungsu"; }
html, body,
h1,h2,h3,h4,p,span,div,a,button,input,textarea,summary,dt,dd,strong,b,i,small,label{
  font-family:Inter,"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",
              var(--mm),Arial,Helvetica,sans-serif;
}
/* Burmese sits taller than Latin, so give the text blocks a little more room */
.product-detail-row dd.dd-note,
.info-content,
.plan-professional-name,
.cart-plan-current,
.store-faq-item p{ line-height:1.75 !important; }
.product-detail-row dd{ line-height:1.6; }

/* ===== alignment-photo-cards-fix ===== */
/* =====================================================================
   Fixes: mid-word line breaks in the plan cards, the over-cropped hero
   photo, and the barely-legible payment card tiles.
   ===================================================================== */

/* ---------- 1. Plan cards: never break a word mid-letter ----------
   An earlier mobile rule set overflow-wrap:anywhere on these values, which
   shatters short labels ("Standard" -> "Sta/nda/rd") once the Duration
   column is squeezed under ~55px. Values only ever wrap at spaces now. */
body .plan-secondary-line strong,
body .plan-option .plan-secondary-line strong,
body .order-view .plan-secondary-line strong{
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  hyphens:none !important;
  white-space:normal !important;
}
/* Long plan names still need to break, but only when a single word really
   cannot fit -- break-word, unlike anywhere, keeps intrinsic sizing sane. */
body .plan-option .plan-professional-name,
body .order-view .plan-professional-name{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
}
/* Same fix for the Final Review table -- a long "Plan" value (name +
   duration + price all in one string) was shattering mid-word the same
   way the plan cards used to, reading as ragged/uneven next to the
   short one-line Product/Payment rows above and below it. */
body .order-preview-table td{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
}
/* Under ~500px a two-up plan card is only ~110px wide inside, so Duration
   and Price cannot share a row. Stack them and each gets the full width. */
@media(max-width:500px){
  body .plan-option .plan-secondary-line,
  body .order-view .plan-secondary-line{
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    align-items:start !important;
  }
  body .plan-option .plan-price-block,
  body .order-view .plan-price-block{
    text-align:left !important; min-width:0 !important;
  }
  body .plan-secondary-line.no-duration .plan-price-block{ text-align:left !important; }
}

/* ---------- 2. Hero photo: show the whole frame ----------
   max-height + object-fit:cover was cropping the books off the bottom.
   The image keeps its natural 648x680 ratio instead. */
.lp-photo{ max-width:308px !important; margin:0 auto !important; }
.lp-photo img{
  max-height:none !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
}
@media(max-width:940px){
  .lp-photo{ max-width:290px !important; }
  .lp-photo img{ max-height:none !important; }
}
@media(max-width:560px){
  .lp-photo{ max-width:262px !important; }
  .lp-photo img{ max-height:none !important; }
}
/* The floating badge was sitting over the bottom of the photo -- exactly
   where the books are. Clear it on desktop, drop it below on small screens. */
.lp-photo-badge{ bottom:-21px !important; white-space:nowrap !important; }
.lp-art{ padding-bottom:26px !important; }
@media(max-width:700px){
  .lp-photo-badge{
    position:static !important; margin:10px auto 0 !important;
    width:max-content !important; max-width:100% !important;
    white-space:normal !important;
  }
  .lp-art{ padding-bottom:0 !important; }
}

/* ---------- 3. Payment tiles: cards big enough to read ----------
   Visa is a vertical card, so it needs a portrait tile; forcing it into the
   60x38 landscape tile rendered it ~23px wide. Both tiles share a height so
   the row still lines up. */
.lp-brandstrip .brand-row{ align-items:center !important; }
.lp-brandstrip .brand-tile.tile-visa{ width:32px !important; height:60px !important; }
.lp-brandstrip .brand-tile.tile-mc2{ width:97px !important; height:60px !important; }
.lp-brandstrip .brand-tile.tile-card{ padding:3px !important; border-radius:9px !important; }
.lp-brandstrip .brand-tile.tile-card img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:6px !important;
  filter:none !important;
}
@media(max-width:560px){
  .lp-brandstrip .brand-tile.tile-visa{ width:29px !important; height:54px !important; }
  .lp-brandstrip .brand-tile.tile-mc2{ width:87px !important; height:54px !important; }
}

/* ===== mobile-hero-proportions ===== */
/* =====================================================================
   Mobile hero: the photo was eating 40% of the screen and pushing the
   headline below the fold. Desktop reads copy-first / photo-second, so
   mobile now does the same, and the two-column split survives down to
   760px instead of collapsing at 940px.
   ===================================================================== */

/* ---- 760-940px: keep the desktop side-by-side hero ---- */
@media(min-width:760px) and (max-width:940px){
  .lp-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) !important;
    align-items:center !important;
    gap:20px !important;
    padding:26px 26px !important;
  }
  .lp-hero .lp-art{ order:0 !important; padding-bottom:24px !important; }
  .lp-hero .lp-photo{ max-width:100% !important; margin:0 !important; }
  .lp-hero .lp-photo-badge{
    position:absolute !important; left:-8px !important; bottom:-21px !important;
    margin:0 !important; width:max-content !important; white-space:nowrap !important;
  }
}

/* ---- under 760px: stack, but copy first so the headline leads ---- */
@media(max-width:760px){
  .lp-hero{
    display:flex !important; flex-direction:column !important;
    /* stretch, not center: on a column flex container align-items works on
       the horizontal axis, and "center" sizes each child to its max-content
       -- which the ticker's marquee track blows up to ~1350px. */
    align-items:stretch !important;
    gap:16px !important; padding:20px 18px 22px !important;
  }
  .lp-hero > *:not(.lp-badge){ width:100% !important; min-width:0 !important; max-width:100% !important; }
  .lp-hero .lp-hero-copy{ order:0 !important; align-items:stretch !important; }
  .lp-hero .lp-hero-copy > *{ min-width:0 !important; max-width:100% !important; }
  .lp-hero .lp-art{ order:1 !important; padding-bottom:0 !important; }

  /* A supporting portrait card, not a full-height block */
  .lp-hero .lp-photo{ max-width:236px !important; margin:0 auto !important; }
  /* Full-width pill under the photo. Tying it to the photo's 212px and
     forcing nowrap made it spill past the frame. */
  .lp-hero .lp-photo-badge{
    position:static !important; margin:10px 0 0 !important;
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    justify-content:center !important; gap:8px !important;
    white-space:normal !important; padding:8px 12px !important;
    border-radius:12px !important;
  }
  .lp-photo-badge b{ font-size:10.5px !important; }
  .lp-photo-badge i{ display:inline !important; font-size:9px !important; margin:0 !important; }
  /* markup is <span>emoji</span><b>title</b><i>sub</i> as direct flex items */
  .lp-hero .lp-photo-badge{ flex-wrap:wrap !important; align-items:center !important; }

  /* Type scale that keeps a real hierarchy at phone widths */
  .lp-kicker{ font-size:8px !important; letter-spacing:1.7px !important; }
  body.light-mode .lp-hero .lp-brand, .lp-hero .lp-brand{
    font-size:clamp(29px,8.4vw,38px) !important;
  }
  .lp-title{ font-size:clamp(17px,4.6vw,21px) !important; line-height:1.2 !important; }
  .lp-sub{ font-size:11.5px !important; line-height:1.55 !important; max-width:100% !important; }
  .lp-ticker{ margin-top:12px !important; }
  .lp-actions{ margin-top:13px !important; }
}

/* ---- narrow phones ---- */
@media(max-width:430px){
  .lp-hero{ padding:18px 15px 20px !important; }
  .lp-hero .lp-photo{ max-width:212px !important; }
  .lp-hero .lp-photo-badge{ max-width:212px !important; }
}

/* ---- Ticker: fade the ends into the card instead of hard-cutting text ---- */
.lp-ticker::before{ background:linear-gradient(90deg,#fff 34%,rgba(255,255,255,0)) !important; width:46px !important; }
.lp-ticker::after{ background:linear-gradient(270deg,#fff 34%,rgba(255,255,255,0)) !important; width:46px !important; }
/* a touch smaller so the brand name stays the loudest thing in the hero */
@media(max-width:760px){ .lp-title{ font-size:clamp(16px,4.2vw,19px) !important; } }

/* ===== mobile-catalog-proportions ===== */
/* =====================================================================
   Catalog on phones: three columns left each card ~119px wide, so the
   logo, badges and Buy Now button were all fighting for the same space.
   Two columns on phones, three from 560px, and every card is a flex
   column so the Buy Now buttons line up across a row.
   ===================================================================== */
@media(max-width:560px){
  .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:11px !important; }
}
@media(min-width:561px) and (max-width:860px){
  .products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; }
}

@media(max-width:860px){
  .products .card{
    display:flex !important; flex-direction:column !important;
    min-width:0 !important; padding:14px 12px 13px !important;
    min-height:0 !important; border-radius:15px !important;
  }
  /* the untagged wrapper holding icon + name + subtitle */
  .products .card > div:not(.card-bottom):not(.top-product-badge){ min-width:0 !important; }
  .products .card .card-bottom{ margin-top:auto !important; padding-top:9px !important; }
  .products .card .buy-now-btn{ width:100% !important; margin-top:10px !important; }

  .products .icon-wrap{ width:58px !important; height:58px !important; margin:2px auto 10px !important; }
  .products .card-name{
    font-size:12.5px !important; line-height:1.3 !important;
    overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important;
  }
  .products .card-sub{ font-size:10px !important; line-height:1.35 !important; }
  .products .price-from{ font-size:13px !important; }
  .products .card-status-row{ gap:5px !important; flex-wrap:wrap !important; }
  .products .status-pill, .products .feature-pill{ font-size:9px !important; padding:3px 7px !important; }
  .products .buy-now-btn{ font-size:11px !important; padding:9px 10px !important; }

  /* keep the Hot badge off the logo: it was landing on top of it once the
     card dropped under ~130px */
  .products .top-product-badge{
    top:7px !important; right:7px !important;
    font-size:8.5px !important; padding:3px 6px !important;
    animation:none !important; z-index:3 !important;
  }
}
@media(max-width:400px){
  .products{ gap:9px !important; }
  .products .card{ padding:12px 10px 11px !important; }
  .products .icon-wrap{ width:52px !important; height:52px !important; }
  .products .card-name{ font-size:11.5px !important; }
}

/* ===== plan-card-tightening ===== */
/* The plan cards reserve ~20px at the top for a watermark that is hidden,
   so every card without a "Best Seller" ribbon carried dead space. Reclaim
   it only where there is no ribbon to sit in it. */
.plan-option:not(:has(.best-seller-badge)) .plan-professional{ margin-top:6px !important; }
@media(max-width:860px){
  .plan-option:not(:has(.best-seller-badge)) .plan-professional{ margin-top:4px !important; }
  .plan-option{ min-height:0 !important; }
}

/* ===== mobile-brandstrip-fill ===== */
/* =====================================================================
   Brand strip on phones: the three groups stacked with a left-aligned
   row of 30px tiles each, so most of the panel width sat empty. The
   tiles now spread evenly across the full width and are big enough to
   read, and the payment cards get their own balanced row.
   ===================================================================== */
@media(max-width:860px){
  .lp-brandstrip{
    grid-template-columns:1fr !important;
    gap:15px !important; padding:16px 15px 17px !important;
  }
  .lp-brandstrip .lp-brands{ grid-template-columns:1fr !important; gap:15px !important; }
  .lp-brand-label{ margin-bottom:8px !important; font-size:8.5px !important; }

  /* spread the tiles across the panel instead of bunching them left */
  .lp-brandstrip .brand-row{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(46px,1fr)) !important;
    gap:8px !important; align-items:center !important; justify-items:stretch !important;
  }
  .lp-brandstrip .brand-tile{
    width:auto !important; height:46px !important; padding:7px !important;
    border-radius:12px !important;
  }
  .lp-brandstrip .brand-tile.tile-wide{ min-width:0 !important; padding:0 6px !important; }
  .lp-brandstrip .brand-more{
    height:46px !important; width:auto !important; padding:0 10px !important;
    justify-content:center !important; font-size:9.5px !important; border-radius:12px !important;
    grid-column:span 2;
  }

  /* Games: only three items, so let the "+180 games" pill take the slack
     instead of leaving a third of the row empty */
  .lp-brandstrip .lp-brand-group:nth-child(2) .brand-row{
    display:flex !important; gap:9px !important; align-items:center !important;
  }
  .lp-brandstrip .lp-brand-group:nth-child(2) .brand-tile{ width:46px !important; flex:0 0 auto !important; }
  .lp-brandstrip .lp-brand-group:nth-child(2) .brand-tile.tile-wide{ width:auto !important; padding:0 12px !important; }
  .lp-brandstrip .brand-more{ flex:1 1 auto !important; }

  /* payment cards keep their real proportions, side by side and centred */
  .lp-brandstrip .lp-brand-group:last-child .brand-row{
    display:flex !important; gap:12px !important; align-items:center !important;
    justify-content:center !important;
  }
  .lp-brandstrip .brand-tile.tile-visa{ width:38px !important; height:64px !important; flex:0 0 auto !important; }
  .lp-brandstrip .brand-tile.tile-mc2{ width:103px !important; height:64px !important; flex:0 0 auto !important; }
}
@media(max-width:430px){
  .lp-brandstrip .brand-row{ grid-template-columns:repeat(auto-fill,minmax(42px,1fr)) !important; gap:7px !important; }
  .lp-brandstrip .brand-tile{ height:42px !important; padding:6px !important; }
  .lp-brandstrip .brand-more{ height:42px !important; font-size:9px !important; }
  .lp-brandstrip .brand-tile.tile-visa{ width:34px !important; height:58px !important; }
  .lp-brandstrip .brand-tile.tile-mc2{ width:93px !important; height:58px !important; }
}

/* ===== payment-card-aspect-fix ===== */
/* The Visa art is a 208x394 vertical card (ratio .528) but the tile was
   .586-.594 on phones, so object-fit:cover sliced the top and bottom off
   the card. Pin each tile to its artwork's ratio and switch to contain so
   the full card always shows, at any size. */
.lp-brandstrip .brand-tile.tile-visa{
  aspect-ratio:208/394 !important; width:auto !important; height:62px !important;
  flex:0 0 auto !important;
}
.lp-brandstrip .brand-tile.tile-mc2{
  aspect-ratio:297/184 !important; width:auto !important; height:62px !important;
  flex:0 0 auto !important;
}
.lp-brandstrip .brand-tile.tile-card img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
}
@media(max-width:430px){
  .lp-brandstrip .brand-tile.tile-visa,
  .lp-brandstrip .brand-tile.tile-mc2{ height:56px !important; }
}

/* ===== dreamscape-hero ===== */
/* =====================================================================
   Hero rebuilt to the Figma "Kingdom of Bombon" reference: a soft violet
   scene of floating objects, clouds rolling across the base, then a small
   overline above one very large wordmark, centred copy, and a lime blob
   badge. Only the hero changes -- nothing below it is touched.
   ===================================================================== */
body.light-mode .lp-hero, .lp-hero{
  display:block !important;
  position:relative;
  margin:6px 0 18px !important;
  padding:26px 0 34px !important;
  border-radius:30px !important;
  border:1px solid rgba(90,62,160,.10) !important;
  background:linear-gradient(180deg,#EFE8FA 0%,#EBE2F8 38%,#F4EFFC 68%,#FBF9FE 100%) !important;
  box-shadow:0 20px 54px rgba(78,52,142,.13) !important;
  overflow:hidden !important;
  text-align:center;
  animation:none !important; opacity:1 !important;
}

/* ---------- top eyebrow ---------- */
.lp-hero .lp-eyebrow{
  margin:0 auto 6px !important; padding:0 20px;
  font-size:clamp(12px,1.5vw,16px) !important; font-weight:800 !important;
  color:#6B54A8 !important; letter-spacing:-.01em; text-wrap:balance;
}

/* ---------- the scene ---------- */
/* The hero carousel shows full promotional banners (16:9 landscape,
   dense with text/logos) instead of a small floating collage -- the
   scene just needs to be tall enough to frame that banner. */
.lp-hero .lp-scene{
  position:relative; width:100%; height:clamp(200px,38vw,360px);
  margin:0 0 10px; pointer-events:none; user-select:none;
}
.lp-hero .lp-hills{ position:absolute; inset:auto 0 0; width:100%; height:100%; display:block; }
.lp-hero .lp-stage{ position:absolute; inset:0; }

/* the student photo takes the castle's place at the head of the road */
.lp-hero .lp-hero-photo{
  position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:clamp(112px,15vw,178px); margin:0;
  padding:7px; border-radius:20px;
  background:linear-gradient(155deg,#FFFFFF,#F1EAFC);
  box-shadow:0 18px 40px rgba(70,44,132,.26);
}
.lp-hero .lp-hero-photo img{
  display:block; width:100%; height:auto; border-radius:14px;
  filter:saturate(.92) contrast(1.02);
}

/* floating objects -- the candy of the reference, made of real logos */
.lp-hero .lp-orb{
  position:absolute; display:grid; place-items:center;
  border-radius:22%; background:#fff;
  box-shadow:0 12px 26px rgba(70,44,132,.20);
  animation:lpFloat 7s ease-in-out infinite;
}
.lp-hero .lp-orb img{
  width:100%; height:100%; object-fit:contain; border-radius:inherit; padding:16%;
}
.lp-hero .orb-genshin{ border-radius:50%; }
.lp-hero .orb-genshin img{ padding:0; }
.lp-hero .orb-visa{
  border-radius:9px; background:linear-gradient(150deg,#FFFFFF,#EFE8FB);
  padding:3px; transform:rotate(11deg);
}
.lp-hero .orb-visa img{ padding:0; border-radius:6px; }

/* size + placement, all in % so the scene scales with the viewport */
/* every object stays above 60% so the cloud bank never eats it */
.lp-hero .orb-canva  { width:6.2%;  aspect-ratio:1; left:18%;  top:8%;  animation-delay:-2.1s; }
.lp-hero .orb-gpt    { width:8.2%;  aspect-ratio:1; left:5%;   top:30%; animation-delay:-.4s; }
.lp-hero .orb-gemini { width:6.6%;  aspect-ratio:1; left:12%;  top:50%; animation-delay:-1.6s; }
.lp-hero .orb-claude { width:6.8%;  aspect-ratio:1; left:25%;  top:44%; animation-delay:-3.4s; }
.lp-hero .orb-genshin{ width:9%;    aspect-ratio:1; left:32%;  top:29%; animation-delay:-1.2s; }
.lp-hero .orb-yt     { width:6.5%;  aspect-ratio:1; left:33.5%;top:58%; animation-delay:-5.0s; }
.lp-hero .orb-netflix{ width:7%;    aspect-ratio:1; right:23%; top:16%; animation-delay:-1.7s; }
.lp-hero .orb-visa   { width:7.2%;  aspect-ratio:84/160; right:8%; top:36%; animation-delay:-3.9s; }
.lp-hero .orb-capcut { width:5.6%;  aspect-ratio:1; right:36%; top:56%; animation-delay:-2.7s; }
.lp-hero .orb-spotify{ width:7.6%;  aspect-ratio:1; right:30%; top:36%; animation-delay:-.9s; }
.lp-hero .orb-perp   { width:6%;    aspect-ratio:1; right:17%; top:59%; animation-delay:-4.4s; }

@keyframes lpFloat{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-11px) }
}
.lp-hero .orb-visa{ animation-name:lpFloatTilt; }
@keyframes lpFloatTilt{
  0%,100%{ transform:translateY(0) rotate(11deg) }
  50%    { transform:translateY(-11px) rotate(8deg) }
}

/* Auto-rotating 3-slide hero visual (Digital Premium / Games / Gift
   Cards) -- replaces the old photo + floating-logo-orbs collage, which
   mixed real app icons with a stock photo and a fan-art avatar at
   inconsistent sizes and read as unpolished rather than "store". One
   consistent image category, cross-fading on a timer, reads calmer and
   more like an actual storefront. */
/* The three banners are dense, text-heavy promotional graphics (app
   grids, gift-card art, CTAs baked into the image) at a fixed 16:9
   ratio -- sized to that exact ratio and shown with object-fit:contain
   so nothing is ever cropped off (a lesson learned the hard way with
   the News feature's images: cropping an infographic loses the actual
   content, not just some empty margin). Sized by width and centered,
   since a landscape banner scales with the available width, not the
   scene's height. The 480px cap keeps the resulting 16:9 height inside
   the scene's own height budget at wide viewports -- a wider cap once
   made the box taller than the scene, so it overflowed into the Hot
   Products strip below and the carousel dots ended up hidden under it. */
.lp-hero .lp-hero-carousel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92%,620px); aspect-ratio:16/9;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(155deg,#FFFFFF,#F1EAFC);
  box-shadow:0 22px 48px rgba(70,44,132,.28);
}
.lp-hero .lp-hero-slide{
  position:absolute; inset:0; margin:0; opacity:0; transition:opacity .7s ease;
}
.lp-hero .lp-hero-slide.is-active{ opacity:1; }
.lp-hero .lp-hero-slide img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* Overlaid on the image itself, inside the carousel's own box -- a
   bottom:-20px placement here used to sit outside the box, which the
   carousel's overflow:hidden silently clipped away (invisible AND
   unclickable, unnoticed since the auto-rotate timer alone made the
   carousel still look like it worked). */
.lp-hero .lp-hero-dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:6px; z-index:3;
}
.lp-hero .lp-hero-dot{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .25s, transform .25s; cursor:pointer; border:none; padding:0;
}
.lp-hero .lp-hero-dot.is-active{ background:#fff; transform:scale(1.3); }
@media(max-width:640px){
  .lp-hero .lp-hero-carousel{ border-radius:12px; }
  /* A taller mobile box (aspect-ratio:4/3) was tried for more vertical
     presence, but the source art is an exact 16:9 landscape banner --
     any box taller than that always leaves empty letterbox space above
     or below the picture. Desktop's plain 16:9 box has zero such gap
     since it matches the source images exactly, so mobile now uses the
     same ratio: the full banner fills its box edge-to-edge, no crop and
     no empty space, identical to desktop. */
}

/* ---------- clouds rolling across the base of the scene ---------- */
.lp-hero .lp-clouds{ position:absolute; inset:auto 0 -8px; height:27%; }
.lp-hero .lp-clouds i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 50% 46%, #FFFFFF 58%, rgba(255,255,255,0) 72%);
  filter:blur(1px);
}
.lp-hero .lp-clouds .c1{ left:-8%;  bottom:-40%; width:46%; height:150%; }
.lp-hero .lp-clouds .c2{ left:20%;  bottom:-52%; width:40%; height:132%; }
.lp-hero .lp-clouds .c3{ left:45%;  bottom:-46%; width:36%; height:120%; }
.lp-hero .lp-clouds .c4{ right:6%;  bottom:-50%; width:42%; height:140%; }
.lp-hero .lp-clouds .c5{ right:-9%; bottom:-36%; width:34%; height:116%; }

/* ---------- headline block ---------- */
.lp-hero .lp-headline{ position:relative; z-index:3; padding:0 clamp(16px,4vw,44px); }
.lp-hero .lp-overline{
  margin:0 0 -.06em !important;
  font-size:clamp(20px,3.4vw,44px) !important; font-weight:700 !important;
  color:#171523 !important; letter-spacing:-.02em; line-height:1.1;
}
body.light-mode .lp-hero .lp-wordmark, .lp-hero .lp-wordmark{
  margin:0 auto 14px !important;
  font-size:clamp(42px,10.4vw,132px) !important;
  font-weight:900 !important; line-height:.86 !important;
  letter-spacing:-.045em !important;
  color:#171523 !important; -webkit-text-fill-color:#171523 !important;
  background:none !important; text-shadow:none !important; transform:none !important;
  text-wrap:balance;
}
.lp-hero .lp-blurb{
  margin:0 auto 20px !important; max-width:60ch;
  font-size:clamp(12.5px,1.5vw,15px) !important; line-height:1.62 !important;
  font-weight:600 !important; color:#5B4B8A !important;
}
.lp-hero .lp-actions{
  display:flex !important; justify-content:center !important;
  gap:11px !important; flex-wrap:wrap; margin:0 !important;
}
body.light-mode .lp-hero .lp-cta, .lp-hero .lp-cta{
  padding:14px 26px !important; border-radius:999px !important;
  font-size:14px !important; font-weight:800 !important;
}
body.light-mode .lp-hero .lp-cta:not(.lp-cta-ghost){
  background:#171523 !important; color:#fff !important; border-color:#171523 !important;
}
body.light-mode .lp-hero .lp-cta-ghost{
  background:rgba(255,255,255,.72) !important; color:#171523 !important;
  border:1.5px solid rgba(23,21,35,.16) !important;
}

/* ---------- lime blob badge ---------- */
.lp-hero .lp-badge{
  position:absolute; right:clamp(10px,2.2vw,30px); top:clamp(214px,29vw,368px);
  z-index:4; display:grid; place-content:center; justify-items:center;
  width:clamp(96px,13vw,152px) !important; aspect-ratio:1; padding:6px;
  background:#E4F84B; color:#171523; text-align:center;
  transform:rotate(-7deg);
  border-radius:62% 38% 46% 54% / 44% 58% 42% 56%;
  box-shadow:0 12px 28px rgba(120,140,20,.24);
}
.lp-hero .lp-badge b{
  display:block; font-size:clamp(11px,1.5vw,17px); font-weight:900;
  line-height:1.12; letter-spacing:-.02em;
}
.lp-hero .lp-badge em{ font-style:normal; font-size:clamp(15px,2vw,23px); margin-top:4px; }

/* ---------- phones: fewer objects, tighter scene ---------- */
@media(max-width:760px){
  body.light-mode .lp-hero, .lp-hero{ padding:22px 0 24px !important; border-radius:24px !important; }
  .lp-hero .lp-scene{ height:clamp(180px,58vw,260px); margin-bottom:8px; }
  .lp-hero .lp-hero-photo{ width:clamp(104px,29vw,132px); top:8%; padding:6px; border-radius:17px; }
  .lp-hero .lp-hero-photo img{ border-radius:12px; }
  /* keep six objects so the scene reads without crowding the photo */
  .lp-hero .orb-canva, .lp-hero .orb-capcut, .lp-hero .orb-perp, .lp-hero .orb-yt{ display:none; }
  /* On a phone the scene has three usable lanes: left of the photo, right
     of it, and the cloud bank at the base. The badge takes the cloud on the
     left so both side lanes stay clear of the photo. */
  .lp-hero .lp-badge{
    left:4px; right:auto; top:clamp(132px,35vw,168px);
    width:clamp(70px,19vw,82px) !important;
  }
  .lp-hero .orb-genshin{ width:14.5%; left:16%;  top:4%;  }
  .lp-hero .orb-gpt    { width:13.5%; left:1.5%; top:30%; }
  .lp-hero .orb-netflix{ width:12%;   right:6%;  top:9%;  }
  .lp-hero .orb-visa   { width:12%;   right:8%;  top:40%; }
  .lp-hero .orb-claude, .lp-hero .orb-spotify, .lp-hero .orb-gemini{ display:none; }
  .lp-hero .lp-actions{ flex-direction:column; align-items:stretch; }
  .lp-hero .lp-cta{
    justify-content:center !important;
    padding:11px 18px !important; font-size:12.5px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .lp-hero .lp-orb{ animation:none !important; }
}

/* ===== facts-paybar-strip ===== */
/* =====================================================================
   Second card: the app logos moved into the hero, so this strip stopped
   earning its space. It now carries what the hero cannot -- the numbers
   that prove the shop is real, and every way you can pay. Visa and
   Mastercard are vector marks; the card photographs were unreadable at
   this size.
   ===================================================================== */
.lp-brandstrip{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important; gap:clamp(16px,3vw,34px) !important;
  padding:16px clamp(16px,2.6vw,26px) !important;
}
.lp-facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,2vw,26px); min-width:0;
}
.lp-fact{ min-width:0; }
.lp-fact b{
  display:block; font-size:clamp(15px,1.9vw,21px); font-weight:900;
  letter-spacing:-.03em; line-height:1.1; color:#241C3C;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lp-fact span{
  display:block; margin-top:3px; font-size:clamp(9px,1.05vw,10.5px);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7E7396;
}

/* Two separate things: the wallets customers pay us with, and the
   international cards the shop sells. They are not the same list. */
.lp-paybar{ display:grid; gap:13px; justify-items:start; min-width:0; }
.lp-paygroup{ display:grid; gap:7px; justify-items:start; min-width:0; }
.lp-paygroup-sell{ padding-top:12px; border-top:1px solid rgba(36,28,60,.09); width:100%; }
.lp-paybar .lp-brand-label{ margin:0 !important; }
.lp-pays{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
/* Groups USD/GBP/EUR as one unit -- flex-basis:100% forces a line break
   before the group in the wrapping .lp-pays row, so the three currency
   chips always land together on their own row instead of the wrap point
   splitting them unevenly across the payment-logo row above. */
.currency-chip-group{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; flex-basis:100%; }
.pay-mark{
  display:grid; place-items:center;
  width:44px; height:30px; padding:5px 6px;
  background:#fff; border:1px solid rgba(36,28,60,.09); border-radius:8px;
  box-shadow:0 2px 6px rgba(58,40,110,.09);
}
.pay-mark.pay-wide{ width:52px; }
.pay-mark img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

@media(max-width:980px){
  .lp-brandstrip{ grid-template-columns:1fr !important; gap:15px !important; }
  .lp-paybar{ justify-items:stretch; }
}
@media(max-width:560px){
  .lp-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
  .pay-mark{ width:42px; height:29px; }
  .pay-mark.pay-wide{ width:50px; }
}

/* ===== landing-leak-and-type ===== */
/* =====================================================================
   1. The WHY / FAQ block sits outside #landingShell in the parsed DOM
      (a stray </div> closes the shell early), so hiding the landing left
      it stranded above the products page. Tie it to the mode instead.
   2. A display face for the headings so the type carries some character
      instead of running the whole page on one UI sans.
   ===================================================================== */
body.products-mode .store-info-section{ display:none !important; }

/* ---------- display type ---------- */
.lp-hero .lp-wordmark{
  font-family:Archivo,"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  font-stretch:112% !important;
  font-weight:900 !important;
  letter-spacing:-.05em !important;
}
.lp-hero .lp-overline{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  font-weight:800 !important; letter-spacing:-.025em !important;
}
.lp-hero .lp-eyebrow{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  letter-spacing:-.005em !important;
}
.lp-hero .lp-blurb,
.lp-hero .lp-cta{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
}

/* section headings across the landing and the store */
.store-info-head h2,
.store-faq h2,
.products-head h2,
.panel-title,
.product-title,
.lp-fact b,
.lp-strip-brand strong{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  letter-spacing:-.028em !important;
}
.store-info-head h2, .store-faq h2{ font-weight:800 !important; }
.store-info-card h3{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  font-weight:800 !important; letter-spacing:-.018em !important;
}

/* small uppercase labels read better with air between the letters */
.section-kicker, .lp-brand-label, .lp-fact span, .plan-field-label{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;
  letter-spacing:.13em !important;
}

/* ===== instant-page-switches ===== */
/* Every view switch calls window.scrollTo(0,0), but html,body carried
   scroll-behavior:smooth, so instead of arriving at the new page you
   watched the old one scroll all the way back up. Switches jump now;
   anchor links inside a page can still opt back in. */
html, body{ scroll-behavior:auto !important; }

/* .page only wraps the landing, so once the landing is hidden its padding
   was leaving a dead band above the products and checkout views. */
body.products-mode .page,
body.order-mode .page,
body.dashboard-mode .page,
body.preview-mode .page{
  padding:0 !important; margin:0 auto !important; min-height:0 !important;
}

/* ===== view-hidden-wins ===== */
/* body.order-mode .order-view{display:block!important} (0,2,1) outranked
   .hidden (0,1,0), so leaving the plans view for the product page left it
   on screen and the two pages stacked into one long scroll. ID selectors
   put .hidden back on top for every view container. */
#landingShell.hidden,
#catalogShell.hidden,
#orderView.hidden,
#catalogView.hidden,
#checkoutSection.hidden,
#previewSection.hidden,
#productPage.hidden,
#cartItem.hidden,
#planSkeleton.hidden,
#pageLoader.hidden{ display:none !important; }

/* ===== hero-depth-3d ===== */
/* =====================================================================
   Depth pass on the hero: the objects were flat stickers pasted on a flat
   drawing. Now the scene has a perspective camera, every floating object
   is tilted slightly into it and lit from the sun's side, and each throws
   a contact shadow onto the valley so it reads as sitting in the space
   rather than on top of it.
   ===================================================================== */
.lp-hero .lp-scene{ perspective:1400px; perspective-origin:50% 34%; }
.lp-hero .lp-stage{ transform-style:preserve-3d; }

.lp-hero .lp-orb{
  transform-style:preserve-3d;
  background:linear-gradient(150deg,#FFFFFF 0%,#FBFAFE 46%,#EFEBF8 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -2px 5px rgba(74,54,132,.10) inset,
    0 3px 6px rgba(56,38,102,.13),
    0 16px 30px rgba(56,38,102,.22);
}
/* the light comes from the upper left, so the sheen sits there too */
.lp-hero .lp-orb::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 42%);
}
/* contact shadow on the ground under each object */
.lp-hero .lp-orb::before{
  content:""; position:absolute; left:12%; right:12%; bottom:-16%; height:22%;
  border-radius:50%; background:rgba(58,40,104,.30); filter:blur(7px);
  transform:translateZ(-40px); pointer-events:none;
}
.lp-hero .orb-genshin::after{ border-radius:50%; }

.lp-hero .lp-hero-photo{
  transform:translateX(-50%) perspective(900px) rotateX(4deg) rotateY(-3deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 8px 16px rgba(56,38,102,.18),
    0 30px 56px rgba(56,38,102,.30);
}
.lp-hero .lp-hero-photo::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-22px; height:26px;
  border-radius:50%; background:rgba(58,40,104,.30); filter:blur(11px); z-index:-1;
}

/* each object leans a little differently, as things at different depths do */
.lp-hero .orb-canva  { transform:rotate(-4deg) rotateY(11deg)  rotateX(5deg); }
.lp-hero .orb-gpt    { transform:rotate(3deg)  rotateY(14deg)  rotateX(4deg); }
.lp-hero .orb-gemini { transform:rotate(-6deg) rotateY(10deg)  rotateX(6deg); }
.lp-hero .orb-claude { transform:rotate(5deg)  rotateY(8deg)   rotateX(3deg); }
.lp-hero .orb-genshin{ transform:rotate(-3deg) rotateY(6deg)   rotateX(4deg); }
.lp-hero .orb-yt     { transform:rotate(4deg)  rotateY(7deg)   rotateX(5deg); }
.lp-hero .orb-netflix{ transform:rotate(-5deg) rotateY(-10deg) rotateX(4deg); }
.lp-hero .orb-spotify{ transform:rotate(4deg)  rotateY(-8deg)  rotateX(5deg); }
.lp-hero .orb-capcut { transform:rotate(-4deg) rotateY(-7deg)  rotateX(4deg); }
.lp-hero .orb-perp   { transform:rotate(6deg)  rotateY(-12deg) rotateX(5deg); }
.lp-hero .orb-visa   { transform:rotate(11deg) rotateY(-16deg) rotateX(6deg); }

/* the float has to carry the lean with it, or the tilt snaps off mid-cycle */
.lp-hero .lp-orb{ animation:none !important; }
.lp-hero .lp-stage{ animation:lpDrift 9s ease-in-out infinite; }
@keyframes lpDrift{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-7px) }
}

/* the cloud bank gets volume instead of being a flat white blob */
.lp-hero .lp-clouds i{
  box-shadow:0 -8px 26px rgba(255,255,255,.9);
}
.lp-hero .lp-clouds::after{
  content:""; position:absolute; inset:auto 0 0; height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,0),#FFFFFF 62%);
}

@media(prefers-reduced-motion:reduce){
  .lp-hero .lp-stage{ animation:none !important; }
}

/* ===== product-card-redesign-retired ===== */
/* =====================================================================
   Product cards rebuilt to the reference pattern: a coloured header band
   with a swooped bottom edge, the logo in its own framed panel, the price
   as the loudest thing in the body, and a full-bleed action bar welded to
   the bottom edge. A ribbon replaces the floating Hot pill.

   The accent is keyed off the product's own category, so the grid reads as
   a set of colours the way the reference does -- but drawn from the site's
   own indigo/violet family rather than an unrelated rainbow.
   ===================================================================== */
.products .card{
  --pc: #4C4BD8;
  --pc-2:#6E5CE8;
  position:relative;
  display:flex !important; flex-direction:column !important;
  padding:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(30,24,64,.08) !important;
  box-shadow:0 2px 4px rgba(40,28,90,.05), 0 14px 28px rgba(40,28,90,.10) !important;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease !important;
}
.products .card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 4px 8px rgba(40,28,90,.07), 0 22px 42px rgba(40,28,90,.17) !important;
}

/* category accents, all within the brand family */
.products .card[data-cat="AI"]       { --pc:#4C4BD8; --pc-2:#7B5BEC; }
.products .card[data-cat="VPN"]      { --pc:#1E7FC4; --pc-2:#3AA6DE; }
.products .card[data-cat="Music"]    { --pc:#1F9E74; --pc-2:#2FBE8C; }
.products .card[data-cat="Video"]    { --pc:#C0356B; --pc-2:#E2568C; }
.products .card[data-cat="Editing"]  { --pc:#7B3FD1; --pc-2:#9A62E8; }
.products .card[data-cat="Social"]   { --pc:#2C63D8; --pc-2:#4E86EE; }
.products .card[data-cat="Services"] { --pc:#B3701A; --pc-2:#D89231; }
.products .card[data-cat="Streaming"]{ --pc:#B02F5A; --pc-2:#D6527F; }
.products .card[data-cat="Gift"]     { --pc:#8A3FB8; --pc-2:#AC61D6; }
.products .card[data-cat="Games"]    { --pc:#6A44C8; --pc-2:#8C63E4; }

/* ---------- header band with the swooped edge ---------- */
.products .pc-head{
  position:relative; z-index:1;
  padding:13px 14px 20px;
  background:linear-gradient(128deg,var(--pc),var(--pc-2));
  border-radius:18px 18px 34% 66% / 18px 18px 20px 13px;
  color:#fff;
}
.products .pc-cat{
  display:block; font-size:8.5px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.78);
}
.products .pc-name{
  margin:4px 0 0; font-size:14px; font-weight:800; line-height:1.22;
  letter-spacing:-.02em; color:#fff;
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}

/* ---------- ribbon, hanging from the top-right like the reference ---------- */
.products .pc-ribbon{
  position:absolute; top:0; right:14px; z-index:4;
  width:26px; padding:16px 0 4px;
  background:linear-gradient(180deg,#F5A524,#E07C10);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:0 4px 10px rgba(120,70,0,.28);
  display:grid; place-items:center;
}
.products .pc-ribbon span{
  font-size:7.5px; font-weight:900; letter-spacing:.09em; color:#fff;
}

/* ---------- body ---------- */
.products .pc-body{
  display:flex; flex-direction:column; gap:10px;
  padding:2px 14px 14px; flex:1 1 auto; min-width:0;
}
.products .pc-art{
  display:grid; place-items:center;
  padding:10px; border-radius:14px;
  background:linear-gradient(160deg,#F7F6FD,#EFEDFA);
  border:1px solid rgba(30,24,64,.06);
}
.products .pc-art .icon-wrap{
  width:54px !important; height:54px !important; margin:0 !important;
  background:#fff !important; border:1px solid rgba(30,24,64,.07) !important;
  box-shadow:0 3px 8px rgba(40,28,90,.10) !important;
}
.products .pc-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.products .pc-tags .status-pill,
.products .pc-tags .feature-pill{ font-size:9px !important; padding:3px 8px !important; }

.products .pc-price-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:8px; margin-top:auto; padding-top:2px;
}
.products .price-from{
  margin:0 !important; display:flex; align-items:baseline; gap:4px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.products .price-from small{
  font-size:8.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#8C86A8;
}
.products .price-from strong{
  font-size:20px; font-weight:900; letter-spacing:-.035em;
  color:var(--pc) !important; background:none !important;
  -webkit-text-fill-color:currentColor !important;
}
.products .price-from em{ font-style:normal; font-size:11px; font-weight:800; color:var(--pc); }
.products .price-from .pc-ask{ font-size:12px; letter-spacing:-.01em; }
.products .pc-plans{
  font-size:9px; font-weight:800; letter-spacing:.05em;
  color:#8C86A8; white-space:nowrap; padding-bottom:3px;
}
.products .pc-tagline{
  min-height:1.35em; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; letter-spacing:-.01em;
  color:var(--pc); margin:0;
}

/* ---------- full-bleed action bar ---------- */
.products .card .buy-now-btn{
  width:100% !important; margin:0 !important;
  padding:13px 10px !important;
  border:0 !important; border-radius:0 !important;
  background:linear-gradient(100deg,var(--pc),var(--pc-2)) !important;
  color:#fff !important;
  font-size:11px !important; font-weight:900 !important;
  letter-spacing:.12em !important; text-transform:uppercase;
  box-shadow:none !important;
  transition:filter .18s ease !important;
}
.products .card .buy-now-btn:hover{ filter:brightness(1.08) !important; }
.products .card .buy-now-btn:active{ transform:none !important; filter:brightness(.94) !important; }

/* ---------- phones ---------- */
@media(max-width:560px){
  .products .pc-head{ padding:11px 11px 16px; border-radius:16px 16px 34% 66% / 16px 16px 17px 11px; }
  .products .pc-name{ font-size:12.5px; }
  .products .pc-body{ padding:2px 11px 11px; gap:8px; }
  .products .pc-art{ padding:8px; border-radius:12px; }
  .products .pc-art .icon-wrap{ width:46px !important; height:46px !important; }
  .products .price-from strong{ font-size:17px; }
  .products .pc-plans{ font-size:8.5px; }
  .products .card .buy-now-btn{ padding:12px 8px !important; font-size:10px !important; letter-spacing:.1em !important; }
}
@media(max-width:400px){
  .products .pc-name{ font-size:11.5px; }
  .products .pc-art .icon-wrap{ width:42px !important; height:42px !important; }
  .products .price-from strong{ font-size:15.5px; }
}

@media(prefers-reduced-motion:reduce){
  .products .card, .products .card .buy-now-btn{ transition:none !important; }
  .products .card:hover{ transform:none !important; }
}

/* ===== catalog-shell-gutters ===== */
/* The catalog shell spanned the full viewport with zero padding, so the
   search field, the category chips and now the cards all ran into the
   screen edges. Match the landing container: width:min(1220px,94%). */
#catalogShell.catalog-shell:not(.hidden){
  width:min(1220px,94%) !important;
  margin:0 auto !important;
  padding:18px 0 44px !important;
}

/* ===== product-card-v2 ===== */
/* =====================================================================
   Product card, second pass. Three across on a phone means a card is
   ~117px wide, so the header band and the framed art panel had to go --
   at that width they were all chrome and no product.

   The logo carries the card instead, presented the same way the hero
   presents its floating tiles: a white rounded tile with an inner
   highlight and a real drop shadow, sitting on a stage tinted with the
   product's category colour. That ties the two halves of the site
   together instead of inventing a third visual language.
   ===================================================================== */
.products{ align-items:stretch; }

.products .card{
  --pc:#4C4BD8; --pc-2:#6E5CE8;
  position:relative;
  display:flex !important; flex-direction:column !important;
  padding:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(28,22,60,.07) !important;
  box-shadow:0 1px 2px rgba(38,26,86,.05), 0 10px 22px rgba(38,26,86,.09) !important;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease !important;
  min-height:0 !important;
}
.products .card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 2px 5px rgba(38,26,86,.07), 0 18px 34px rgba(38,26,86,.16) !important;
}

.products .card[data-cat="AI"]       { --pc:#4C4BD8; --pc-2:#7B5BEC; }
.products .card[data-cat="VPN"]      { --pc:#1E7FC4; --pc-2:#3AA6DE; }
.products .card[data-cat="Music"]    { --pc:#1F9E74; --pc-2:#2FBE8C; }
.products .card[data-cat="Video"]    { --pc:#C0356B; --pc-2:#E2568C; }
.products .card[data-cat="Editing"]  { --pc:#7B3FD1; --pc-2:#9A62E8; }
.products .card[data-cat="Social"]   { --pc:#2C63D8; --pc-2:#4E86EE; }
.products .card[data-cat="Services"] { --pc:#B3701A; --pc-2:#D89231; }
.products .card[data-cat="Streaming"]{ --pc:#B02F5A; --pc-2:#D6527F; }
.products .card[data-cat="Gift"]     { --pc:#8A3FB8; --pc-2:#AC61D6; }
.products .card[data-cat="Games"]    { --pc:#6A44C8; --pc-2:#8C63E4; }

/* ---------- stage: the logo is the picture ---------- */
.products .pc-stage{
  position:relative;
  display:grid; place-items:center;
  padding:16px 10px 13px;
  background:
    radial-gradient(78% 74% at 50% 22%, color-mix(in srgb, var(--pc) 15%, transparent), transparent 72%),
    linear-gradient(180deg,#FAF9FE,#F4F2FB);
}
.products .pc-stage::after{
  content:""; position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  width:52%; height:9px; border-radius:50%;
  background:color-mix(in srgb, var(--pc) 32%, transparent); filter:blur(6px);
}
.products .pc-stage .icon-wrap{
  position:relative; z-index:1;
  width:48px !important; height:48px !important; margin:0 !important;
  padding:8px !important; border-radius:14px !important;
  background:linear-gradient(152deg,#FFFFFF,#F6F4FD) !important;
  border:1px solid rgba(28,22,60,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -2px 4px rgba(66,46,132,.07) inset,
    0 3px 6px rgba(48,32,104,.12),
    0 10px 18px rgba(48,32,104,.16) !important;
}

/* the Hot flag is a corner tab now, not a ribbon */
.products .pc-flag{
  position:absolute; top:7px; right:7px; z-index:3;
  padding:2px 6px; border-radius:6px;
  background:linear-gradient(140deg,#F7A72A,#E4780F);
  color:#fff; font-size:7px; font-weight:900; letter-spacing:.08em;
  box-shadow:0 2px 6px rgba(150,88,4,.30);
}

/* ---------- body ---------- */
.products .pc-body{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 10px 11px; flex:1 1 auto; min-width:0; text-align:center;
}
.products .pc-cat{
  font-size:7.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pc); opacity:.85;
}
.products .pc-name{
  margin:2px 0 0; font-size:11.5px; font-weight:800; line-height:1.24;
  letter-spacing:-.015em; color:#1B1636;
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.products .price-from{
  margin:7px 0 0 !important;
  display:flex; align-items:baseline; justify-content:center; gap:3px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.products .price-from small{
  font-size:7.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#A29CBA;
}
.products .price-from strong{
  font-size:15px; font-weight:900; letter-spacing:-.035em;
  color:var(--pc) !important; background:none !important;
  -webkit-text-fill-color:currentColor !important;
}
.products .price-from em{ font-style:normal; font-size:9px; font-weight:800; color:var(--pc); }
.products .price-from .pc-ask{ font-size:11.5px; letter-spacing:-.01em; }

.products .pc-plans{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  margin-top:auto; padding-top:6px;
  font-size:8.5px; font-weight:700; color:#948EAE; white-space:nowrap;
}
.products .pc-dot{
  width:5px; height:5px; border-radius:50%; background:#22A06B; flex:0 0 auto;
}
.products .pc-dot.status-limited{ background:#D89231; }
.products .pc-dot.status-coming{ background:#A29CBA; }
.products .pc-tagline{
  margin:7px 0 0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:900; letter-spacing:-.01em; color:var(--pc);
}

/* ---------- action bar ---------- */
.products .card .buy-now-btn{
  width:100% !important; margin:0 !important;
  padding:10px 6px !important;
  border:0 !important; border-radius:0 !important;
  background:linear-gradient(100deg,var(--pc),var(--pc-2)) !important;
  color:#fff !important;
  font-size:9.5px !important; font-weight:900 !important;
  letter-spacing:.11em !important; text-transform:uppercase;
  box-shadow:none !important;
  transition:filter .18s ease !important;
}
.products .card .buy-now-btn:hover{ filter:brightness(1.09) !important; }
.products .card .buy-now-btn:active{ transform:none !important; filter:brightness(.93) !important; }

/* ---------- columns: two across on a phone ----------
   Three columns squeezed every card down to ~117px on a typical 390px
   phone -- logo, name, price and the Buy Now button all fighting for the
   same cramped strip, badges overlapping the icon. Two columns gives each
   card roughly the same room the 561-860px 3-column layout already gets,
   so it can use close to that same comfortable sizing instead of a
   separately-shrunk set of overrides. */
@media(max-width:560px){
  .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:11px !important; }
  .products .pc-stage{ padding:16px 10px 13px; }
  .products .pc-stage .icon-wrap{ width:50px !important; height:50px !important; padding:8px !important; }
  .products .pc-body{ padding:10px 10px 11px; }
  .products .pc-name{ font-size:12.5px; }
  .products .price-from strong{ font-size:15px; }
  .products .card .buy-now-btn{ padding:10px 6px !important; font-size:9.5px !important; }
}
@media(max-width:380px){
  .products{ gap:9px !important; }
  .products .pc-name{ font-size:11.5px; }
  .products .price-from strong{ font-size:14px; }
}

/* wider screens can afford a bigger logo and larger type */
@media(min-width:861px){
  .products .pc-stage{ padding:22px 12px 18px; }
  .products .pc-stage .icon-wrap{ width:62px !important; height:62px !important; padding:10px !important; border-radius:17px !important; }
  .products .pc-body{ padding:13px 12px 14px; }
  .products .pc-name{ font-size:13.5px; }
  .products .pc-cat{ font-size:8.5px; }
  .products .price-from strong{ font-size:19px; }
  .products .price-from em{ font-size:11px; }
  .products .pc-plans{ font-size:9.5px; }
  .products .card .buy-now-btn{ padding:12px 8px !important; font-size:10.5px !important; }
}

@media(prefers-reduced-motion:reduce){
  .products .card, .products .card .buy-now-btn{ transition:none !important; }
  .products .card:hover{ transform:none !important; }
}

/* ===== plan-card-v2 ===== */
/* =====================================================================
   Plan cards. The old ones were a card drawn inside a card: .plan-option
   held a bordered, shadowed .plan-professional panel, so every plan had a
   double frame and a band of dead space above and below it. The labels
   PLAN / DURATION / PRICE repeated on all four cards, and duration and
   price stacked vertically instead of sharing a line.

   Now .plan-option is the only card. The name sits at the top, the access
   chip under it, and a single baseline row is pinned to the bottom with
   the duration on the left and the price -- the thing being chosen -- on
   the right, so the four cards line up and can be read across.
   ===================================================================== */
/* the badges and the tick sit above the card edge, so the row needs
   headroom and nothing above may clip */
#orderView .plan-list{
  align-items:stretch;
  padding-top:12px !important;
  overflow:visible !important;
}
#orderView .plan-list > *{ overflow:visible !important; }

#orderView .plan-option{
  position:relative;
  display:flex !important; flex-direction:column !important;
  min-height:0 !important;
  padding:15px 14px 13px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1.5px solid rgba(28,22,60,.10) !important;
  box-shadow:0 1px 2px rgba(38,26,86,.04), 0 8px 20px rgba(38,26,86,.07) !important;
  overflow:visible !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
}
#orderView .plan-option:hover{
  border-color:rgba(76,75,216,.34) !important;
  box-shadow:0 2px 5px rgba(38,26,86,.06), 0 14px 28px rgba(38,26,86,.12) !important;
}
#orderView .plan-option.active{
  border-color:#4C4BD8 !important;
  background:linear-gradient(180deg,#FBFAFF,#F4F2FE) !important;
  box-shadow:0 0 0 3px rgba(76,75,216,.13), 0 12px 26px rgba(56,40,150,.16) !important;
}
/* The selected state is carried by the accent border, the tint and the
   ring. A tick pseudo-element was also tried here, but .plan-option::after
   is claimed by an older rule that hides it and drops its opacity, and
   fighting that for a decoration the border already communicates was not
   worth the specificity war. */

/* the inner panel stops being a panel */
#orderView .plan-option .plan-professional{
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; gap:0 !important;
}

/* ---------- name ---------- */
#orderView .plan-option .plan-primary-line{
  display:block !important; gap:0 !important;
}
#orderView .plan-option .plan-primary-line .plan-field-label{ display:none !important; }
#orderView .plan-option .plan-professional-name{
  display:block !important;
  font-size:13.5px !important; font-weight:800 !important; line-height:1.28 !important;
  letter-spacing:-.018em !important; color:#1B1636 !important;
  overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important;
}
#orderView .plan-option .plan-access-badge{
  display:inline-flex !important; margin-top:7px !important;
  padding:3px 9px !important; border-radius:999px !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.02em !important;
  color:#4C4BD8 !important; background:rgba(76,75,216,.10) !important;
  border:1px solid rgba(76,75,216,.20) !important;
}

/* ---------- the baseline row, pinned to the bottom ---------- */
#orderView .plan-option .plan-secondary-line{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important; gap:10px !important;
  margin-top:auto !important; padding-top:11px !important;
  border-top:1px solid rgba(28,22,60,.09) !important;
}
#orderView .plan-option .plan-secondary-line.no-duration{
  grid-template-columns:minmax(0,1fr) !important;
}
#orderView .plan-option .plan-secondary-line > div{ display:grid !important; gap:3px !important; min-width:0 !important; }
#orderView .plan-option .plan-secondary-line .plan-field-label{
  display:block !important;
  font-size:7.5px !important; font-weight:900 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#A29CBA !important; line-height:1 !important;
}
#orderView .plan-option .plan-secondary-line strong{
  font-size:11.5px !important; font-weight:800 !important; line-height:1.2 !important;
  color:#4B4468 !important; white-space:normal !important;
  overflow-wrap:normal !important; word-break:keep-all !important;
}
#orderView .plan-option .plan-price-block{ text-align:right !important; }
#orderView .plan-option .plan-price-block strong{
  font-size:17px !important; font-weight:900 !important;
  letter-spacing:-.035em !important; color:#4C4BD8 !important;
  white-space:nowrap !important; font-variant-numeric:tabular-nums;
  text-shadow:none !important;
}
#orderView .plan-option.active .plan-price-block strong{ color:#3C2FCC !important; }

/* ---------- badges ---------- */
#orderView .plan-option .best-seller-badge,
#orderView .plan-option .out-stock-badge,
#orderView .plan-option .low-stock-badge,
#orderView .plan-option .discount-badge{
  position:absolute !important; top:-9px !important; right:11px !important; left:auto !important;
  padding:3px 9px !important; border-radius:999px !important;
  font-size:8.5px !important; font-weight:900 !important; letter-spacing:.04em !important;
  color:#fff !important; border:0 !important; z-index:3 !important;
  box-shadow:0 3px 8px rgba(90,60,10,.26) !important;
  display:inline-flex !important; align-items:center !important; gap:3px !important;
}
#orderView .plan-option .best-seller-badge{ background:linear-gradient(140deg,#F7A72A,#E4780F) !important; }
/* A discounted plan can also be flagged Best Seller -- both badges shared
   the same top-right corner before, so the Best Seller ribbon (rendered
   after in the markup) silently painted over the discount one every time
   a plan had both. Discount now takes the top-left corner instead so
   neither ever hides the other. */
#orderView .plan-option .discount-badge{
  background:linear-gradient(140deg,#2FBE8C,#1F9E74) !important;
  left:11px !important; right:auto !important;
}
.discount-badge-icon{ width:9px !important; height:9px !important; flex:0 0 auto; }
#orderView .plan-option .out-stock-badge{
  background:#9A94B2 !important; box-shadow:0 3px 8px rgba(60,50,90,.22) !important;
}
#orderView .plan-option .low-stock-badge{
  color:#3a2405 !important; background:linear-gradient(140deg,#ffd166,#ffb020) !important;
}
#orderView .plan-option.out-of-stock,
#orderView .plan-option:has(.out-stock-badge){ opacity:.62 !important; }

/* the SHARE / PRIVATE watermark was already hidden; keep it out of the flow */
#orderView .plan-option .plan-watermark-wrap{ display:none !important; }

/* ---------- Order Cart chrome ---------- */
#orderView .panel-title,
#orderView .section-title,
#orderView .field-title,
#orderView .cart-name{
  font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
  letter-spacing:-.025em !important;
}
#orderView .panel-title{ font-weight:800 !important; }
#orderView .plan-filter{
  font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
  font-weight:800 !important; letter-spacing:-.005em !important;
}

@media(max-width:560px){
  #orderView .plan-option{ padding:13px 11px 11px !important; border-radius:14px !important; }
  #orderView .plan-option .plan-professional-name{ font-size:12px !important; }
  #orderView .plan-option .plan-price-block strong{ font-size:15px !important; }
  #orderView .plan-option .plan-secondary-line strong{ font-size:10.5px !important; }
}
@media(prefers-reduced-motion:reduce){
  #orderView .plan-option{ transition:none !important; }
}

/* ===== hero-badge-card-paytiles ===== */
/* =====================================================================
   1. The lime badge sat in the same lane as the end of the wordmark, so
      on wide screens it covered the final letter. It moves to the hero's
      top-right corner -- where the Figma reference puts it -- and the
      wordmark loses a little size so the line breathes.
   2. The hero payment card is the new landscape artwork, so the orb has
      to stop being portrait.
   3. The Pay with logos each carry their own coloured square, which read
      as five unrelated stickers on the pale panel. Equal inner tiles with
      matching corners make them a set.
   ===================================================================== */

/* ---------- 1. badge out of the wordmark's lane ---------- */
@media(min-width:761px){
  .lp-hero .lp-badge{
    top:clamp(12px,1.6vw,22px) !important;
    right:clamp(12px,1.8vw,26px) !important;
    width:clamp(88px,10vw,124px) !important;
  }
}
body.light-mode .lp-hero .lp-wordmark, .lp-hero .lp-wordmark{
  font-size:clamp(40px,9.4vw,116px) !important;
}

/* ---------- 2. the new card is landscape ---------- */
.lp-hero .orb-visa{
  aspect-ratio:506/359 !important;
  border-radius:11px !important;
  padding:0 !important;
  background:none !important;
  box-shadow:0 10px 22px rgba(38,26,96,.30) !important;
}
.lp-hero .orb-visa img{ padding:0 !important; border-radius:11px !important; }
.lp-hero .orb-visa::after{ border-radius:11px !important; }
.lp-hero .orb-visa{ width:13% !important; right:6% !important; top:34% !important; }
@media(max-width:760px){
  .lp-hero .orb-visa{ width:23% !important; right:4% !important; top:40% !important; }
}

/* ---------- 3. one visual treatment for every payment logo ---------- */
/* Some source logos (KBZPay, WavePay) already bake their own colored
   square right up to the image edge, while others (AYA Pay, UABPay, Visa,
   Mastercard) are transparent art with no background of their own. Letting
   images fill the tile edge-to-edge made the baked-in ones look like
   mismatched solid blocks next to the transparent ones. Inset every logo
   the same amount instead, so every tile reads as "a small logo centered
   on one uniform white card" regardless of what the source image contains. */
.lp-paybar .pay-mark{
  width:46px !important; height:34px !important;
  padding:6px 7px !important; border-radius:9px !important;
  background:#fff !important;
  border:1px solid rgba(36,28,60,.10) !important;
  box-shadow:0 1px 2px rgba(58,40,110,.06), 0 3px 8px rgba(58,40,110,.08) !important;
}
.lp-paybar .pay-mark.pay-wide{ width:54px !important; }
.lp-paybar .pay-mark img{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important;
  border-radius:4px !important;
}
/* KBZPay and WavePay's source logos fill their whole square canvas edge to
   edge -- shown as-is with nothing added behind them (no card background,
   no colored inset), just the picture filling the tile. */
.lp-paybar .pay-mark.pay-compact{
  padding:0 !important; background:transparent !important; overflow:hidden;
}
.lp-paybar .pay-mark.pay-compact img{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:cover !important; transform:none !important; border-radius:8px !important;
}
/* UABPay's source file is the icon mark stacked over a "uab pay" wordmark
   in one square image -- fit normally, the mark itself renders tiny (most
   of the tile spent on empty margin + the wordmark), reading as near-blank
   next to the other brand marks. Zoom into just the icon and crop the
   wordmark out instead. */
.lp-paybar .pay-mark.uab{ overflow:hidden; }
.lp-paybar .pay-mark.uab img{
  transform:scale(1.9) translateY(18%) !important;
  object-fit:contain !important;
}
/* Currency chips -- a coin-style badge (glossy highlight, ring border,
   same overlay trick as the avatar circles) plus its own name underneath,
   since a bare "$" badge didn't say which currencies were meant. */
.currency-chip{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.currency-chip-label{
  font-size:7.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted,rgba(36,28,60,.55)); white-space:nowrap;
}
.currency-badge{
  width:30px !important; height:30px !important; border-radius:50% !important; flex:0 0 auto !important;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff; font-family:var(--font-display,inherit);
  box-shadow:0 2px 6px rgba(58,40,110,.18);
  position:relative; overflow:hidden !important;
}
/* The three currency icons the user supplied directly -- each one already
   a finished square coin/bag illustration, so just fill the badge with it
   edge to edge (no flat color fill or glossy overlay needed anymore).
   !important throughout since these must never grow past the badge circle
   regardless of the source image's own intrinsic size. */
.currency-badge img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; }
@media(max-width:560px){
  .lp-paybar .pay-mark{ width:44px !important; height:32px !important; }
  .lp-paybar .pay-mark.pay-wide{ width:52px !important; }
  .currency-badge{ width:27px !important; height:27px !important; font-size:12.5px; }
  .currency-chip-label{ font-size:7px; }
}

/* ===== tiers-mobile-orbs-paytiles ===== */
/* =====================================================================
   1. Plan tiers get their own colour, so Plus / Pro / Premium are told
      apart at a glance instead of four identical cards.
   2. Mobile hid six of the ten hero logos, which is why the phone looked
      like a different site from the desktop. The scene grows and every
      logo gets a place.
   3. The checkout payment tiles carried their logos at different sizes on
      a glassy ground; equal white tiles make them a set.
   ===================================================================== */

/* ---------- 1. plan tiers ---------- */
#orderView .plan-option{ --tier:#5B6478; --tier-2:#7C869C; }
#orderView .plan-option[data-tier="plus"]    { --tier:#1E7FD6; --tier-2:#5AA9F0; }
#orderView .plan-option[data-tier="pro"]     { --tier:#2C63D8; --tier-2:#4E86EE; }
#orderView .plan-option[data-tier="proplus"] { --tier:#1E40AF; --tier-2:#4E7DE0; }
#orderView .plan-option[data-tier="premium"] { --tier:#B3701A; --tier-2:#D89231; }
#orderView .plan-option[data-tier="max"]     { --tier:#C0356B; --tier-2:#E2568C; }
#orderView .plan-option[data-tier="vip"]     { --tier:#9A7B12; --tier-2:#C8A62A; }
#orderView .plan-option[data-tier="business"]{ --tier:#1F9E74; --tier-2:#2FBE8C; }
#orderView .plan-option[data-tier="basic"]   { --tier:#5B6478; --tier-2:#7C869C; }

/* a colour rail down the left edge carries the tier without shouting */
#orderView .plan-option.has-tier{
  padding-left:17px !important;
  background-image:linear-gradient(180deg,var(--tier),var(--tier-2)) !important;
  background-size:4px 100% !important;
  background-repeat:no-repeat !important;
  background-position:left top !important;
}
#orderView .plan-option.has-tier.active{
  background-image:
    linear-gradient(180deg,var(--tier),var(--tier-2)),
    linear-gradient(180deg,#FBFAFF,#F4F2FE) !important;
  background-size:4px 100%, 100% 100% !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:left top, left top !important;
}

#orderView .plan-chip-row{
  display:flex !important; flex-wrap:wrap; gap:5px; margin-top:7px;
}
#orderView .plan-tier-chip{
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:999px;
  font-size:9.5px; font-weight:900; letter-spacing:.04em;
  color:#fff; background:linear-gradient(120deg,var(--tier),var(--tier-2));
  box-shadow:0 2px 6px color-mix(in srgb, var(--tier) 34%, transparent);
}
#orderView .plan-option .plan-access-badge{ margin-top:0 !important; }
#orderView .plan-option.has-tier .plan-price-block strong{ color:var(--tier) !important; }

/* ---------- 2. every hero logo shows on a phone ---------- */
@media(max-width:760px){
  .lp-hero .lp-scene{ height:clamp(180px,58vw,260px) !important; margin-bottom:8px !important; }

  /* nothing is hidden any more */
  .lp-hero .orb-canva, .lp-hero .orb-capcut, .lp-hero .orb-perp, .lp-hero .orb-yt,
  .lp-hero .orb-claude, .lp-hero .orb-spotify, .lp-hero .orb-gemini{ display:grid !important; }

  /* left of the photo */
  .lp-hero .orb-canva  { width:11%   !important; left:2%    !important; top:3%  !important; }
  .lp-hero .orb-gpt    { width:12.5% !important; left:13.5% !important; top:17% !important; }
  .lp-hero .orb-gemini { width:11%   !important; left:1.5%  !important; top:31% !important; }
  .lp-hero .orb-claude { width:10.5% !important; left:14%   !important; top:43% !important; }
  .lp-hero .orb-yt     { width:11.5% !important; left:2.5%  !important; top:56% !important; }

  /* right of the photo */
  .lp-hero .orb-netflix{ width:11.5% !important; right:2%    !important; top:3%  !important; }
  .lp-hero .orb-perp   { width:11%   !important; right:14%   !important; top:17% !important; }
  .lp-hero .orb-spotify{ width:12%   !important; right:1.5%  !important; top:31% !important; }
  .lp-hero .orb-capcut { width:10%   !important; right:15%   !important; top:44% !important; }
  .lp-hero .orb-visa   { width:20%   !important; right:2%    !important; top:57% !important; }

  /* under the photo, on the road */
  .lp-hero .orb-genshin{ width:13%   !important; left:41%    !important; top:52% !important; }

  /* a shallower cloud bank so the lower row is not swallowed */
  .lp-hero .lp-clouds{ height:22% !important; }
  /* Eleven logos fill both side lanes and the centre, so there is no gap
     left to float a blob into without it landing on something. On a phone
     the badge joins the flow instead: a centred pill closing the hero,
     which cannot collide with anything. Desktop keeps the corner blob. */
  .lp-hero .lp-badge{
    /* pinned to the hero's own bottom edge -- the one strip of the phone
       layout no logo, no cloud and no text occupies */
    position:absolute !important; z-index:5 !important;
    /* centred without a transform -- something further up the sheet claims
       transform on this element with !important */
    left:0 !important; right:0 !important; top:auto !important;
    bottom:12px !important;
    margin-inline:auto !important;
    display:inline-flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:center !important;
    gap:7px !important;
    width:max-content !important; max-width:calc(100% - 32px) !important;
    aspect-ratio:auto !important;
    padding:9px 16px !important;
    border-radius:999px !important;
    transform:none !important;
  }
  .lp-hero .lp-badge b{ font-size:11.5px !important; }
  .lp-hero .lp-badge em{ font-size:14px !important; margin:0 !important; }
  .lp-hero .lp-headline{ display:flex; flex-direction:column; }
}

/* ---------- pinned to the student photo's own corner ----------
   The badge moved inside <figure class="lp-hero-photo"> in the markup, so
   it can be positioned relative to the photo itself instead of guessing
   pixel offsets against the whole scene at every breakpoint. This selector
   is more specific than the older ".lp-hero .lp-badge" rules above (which
   floated it elsewhere on the scene), so it wins at every screen size
   without having to delete those. */
.lp-hero .lp-hero-photo{ position:absolute; }
.lp-hero .lp-hero-photo .lp-badge{
  position:absolute !important; z-index:6 !important;
  top:-10px !important; right:-12px !important; left:auto !important; bottom:auto !important;
  margin:0 !important; transform:rotate(-8deg) !important;
  width:clamp(44px,10vw,60px) !important; aspect-ratio:1 !important;
  display:grid !important; place-content:center !important; justify-items:center !important;
  padding:3px !important;
}
.lp-hero .lp-hero-photo .lp-badge b{ font-size:clamp(6.5px,1.6vw,8.5px) !important; line-height:1.05 !important; }
.lp-hero .lp-hero-photo .lp-badge em{ font-size:clamp(9px,2vw,12px) !important; margin-top:1px !important; }
@media(max-width:760px){
  .lp-hero .lp-hero-photo .lp-badge{
    width:clamp(36px,13vw,46px) !important; top:-6px !important; right:-8px !important;
  }
}

/* ---------- 3. checkout payment tiles ----------
   Light mode only -- these hardcoded white/navy colors were previously
   unscoped, so they also clobbered the dark theme's own gradient tiles
   (defined earlier, unscoped, as the base ".pay-option" style) with a
   plain white card that didn't match anything else on a dark screen. */
body.light-mode #checkoutSection .pay-option{
  aspect-ratio:auto !important; min-height:0 !important;
  padding:11px 6px 9px !important;
  border-radius:14px !important;
  gap:7px !important;
  background:#fff !important;
  border:1px solid rgba(36,28,60,.10) !important;
  box-shadow:0 1px 2px rgba(58,40,110,.05), 0 4px 12px rgba(58,40,110,.07) !important;
  font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.01em !important;
  color:#4B4468 !important;
}
body.light-mode #checkoutSection .pay-option.active{
  border-color:#4C4BD8 !important;
  background:linear-gradient(180deg,#FBFAFF,#F2F0FE) !important;
  box-shadow:0 0 0 3px rgba(76,75,216,.13), 0 8px 20px rgba(56,40,150,.15) !important;
  color:#3C2FCC !important;
}
#checkoutSection .pay-logo{
  width:38px !important; height:38px !important;
  padding:0 !important; border-radius:10px !important;
  object-fit:contain !important;
  background:#fff !important;
  border:1px solid rgba(36,28,60,.08) !important;
  box-shadow:0 1px 3px rgba(58,40,110,.10) !important;
  transform:none !important;
}
#checkoutSection .pay-option.active .pay-logo{
  transform:none !important;
  box-shadow:0 2px 7px rgba(56,40,150,.20) !important;
}
@media(max-width:560px){
  #checkoutSection .pay-logo{ width:33px !important; height:33px !important; }
  body.light-mode #checkoutSection .pay-option{ padding:9px 4px 8px !important; font-size:8.5px !important; }
}

/* ===== plan-tier-badges-v2 ===== */
/* =====================================================================
   Tier badges and the card frame.

   Business, Premium, VIP and Max are the plans worth the most, so they get
   the richest treatment: a deep two-stop ground, a metallic top edge and a
   coloured glow. The everyday tiers stay flat and quiet, which is what
   makes the expensive ones read as expensive.
   ===================================================================== */

/* ---------- tier palette ---------- */
#orderView .plan-option[data-tier="business"]  { --tier:#0E5C4A; --tier-2:#1C8F6B; --tier-ink:#EAFBF3; }
#orderView .plan-option[data-tier="premium"]   { --tier:#7A5410; --tier-2:#C79A2E; --tier-ink:#FFF8E6; }
#orderView .plan-option[data-tier="vip"]       { --tier:#6A4A08; --tier-2:#B98F1E; --tier-ink:#FFF6DF; }
#orderView .plan-option[data-tier="max"]       { --tier:#7A1B44; --tier-2:#C2366F; --tier-ink:#FFEDF4; }
#orderView .plan-option[data-tier="pro"]       { --tier:#1E3A8A; --tier-2:#3B63C9; --tier-ink:#EDF2FF; }
#orderView .plan-option[data-tier="proplus"]   { --tier:#1E3F9E; --tier-2:#456FDB; --tier-ink:#EDF3FF; }
#orderView .plan-option[data-tier="core"]      { --tier:#0F6E64; --tier-2:#22A399; --tier-ink:#E7FBF8; }
#orderView .plan-option[data-tier="standard"]  { --tier:#3C4A66; --tier-2:#63799E; --tier-ink:#EEF3FB; }
#orderView .plan-option[data-tier="plus"]      { --tier:#1D64C8; --tier-2:#4E94E8; --tier-ink:#EDF3FF; }
#orderView .plan-option[data-tier="team"]      { --tier:#0F5F7A; --tier-2:#2A93B5; --tier-ink:#E9F8FC; }
#orderView .plan-option[data-tier="individual"]{ --tier:#33415C; --tier-2:#5B7BA6; --tier-ink:#EDF2F7; }
#orderView .plan-option[data-tier="education"] { --tier:#155E45; --tier-2:#2E9B72; --tier-ink:#EAFBF3; }
#orderView .plan-option[data-tier="family"]    { --tier:#8A4210; --tier-2:#C97A2A; --tier-ink:#FFF2E4; }
#orderView .plan-option[data-tier="go"]        { --tier:#D4AF37; --tier-2:#F6DFA0; --tier-ink:#5C4310; }
#orderView .plan-option[data-tier="link"]      { --tier:#0E5468; --tier-2:#2B8AA6; --tier-ink:#E9F7FB; }
#orderView .plan-option[data-tier="gift"]      { --tier:#A3234F; --tier-2:#DE5A8A; --tier-ink:#FFEEF4; }
#orderView .plan-option[data-tier="basic"]     { --tier:#475569; --tier-2:#6B7A90; --tier-ink:#F1F4F9; }
#orderView .plan-option[data-tier="4k"]        { --tier:#0B4F6C; --tier-2:#1C9FC6; --tier-ink:#E8FBFF; }
#orderView .plan-option[data-tier="gptpro"]    { --tier:#1B2F6B; --tier-2:#3F6FD6; --tier-ink:#EDF2FF; }
#orderView .plan-option[data-tier="ultra"]     { --tier:#101018; --tier-2:#4F7DF3; --tier-ink:#EEF4FF; }

/* ---------- the badge ---------- */
#orderView .plan-tier-chip{
  position:relative;
  padding:4px 12px !important; border-radius:999px !important;
  font-size:9.5px !important; font-weight:900 !important;
  letter-spacing:.06em !important; text-transform:uppercase;
  color:var(--tier-ink) !important;
  background:linear-gradient(135deg,var(--tier),var(--tier-2)) !important;
  border:1px solid color-mix(in srgb, var(--tier) 55%, #000 6%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
    0 2px 7px color-mix(in srgb, var(--tier) 40%, transparent) !important;
  overflow:hidden;
}
/* the metallic sweep only the premium tiers get */
#orderView .plan-option[data-tier="business"] .plan-tier-chip::after,
#orderView .plan-option[data-tier="premium"]  .plan-tier-chip::after,
#orderView .plan-option[data-tier="vip"]      .plan-tier-chip::after,
#orderView .plan-option[data-tier="svip"]      .plan-tier-chip::after,
#orderView .plan-option[data-tier="go"]       .plan-tier-chip::after,
#orderView .plan-option[data-tier="4k"]       .plan-tier-chip::after,
#orderView .plan-option[data-tier="gptpro"]   .plan-tier-chip::after,
#orderView .plan-option[data-tier="ultra"]    .plan-tier-chip::after,
#orderView .plan-option[data-tier="max"]      .plan-tier-chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 64%);
  pointer-events:none;
}

/* ---------- Type row ---------- */
#orderView .plan-type-line{
  display:grid; gap:3px; margin-top:9px; padding-top:9px;
  border-top:1px solid rgba(28,22,60,.07);
}
#orderView .plan-type-line:empty{ display:none; }
#orderView .plan-type-line .plan-field-label{
  display:block !important;
  font-size:7.5px !important; font-weight:900 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#A29CBA !important; line-height:1 !important;
}
#orderView .plan-type-value{
  font-size:11.5px !important; font-weight:800 !important;
  color:#4B4468 !important; letter-spacing:-.005em;
}

/* ---------- a real frame on the card ---------- */
#orderView .plan-option.has-tier{
  border:1.5px solid color-mix(in srgb, var(--tier) 26%, rgba(28,22,60,.10)) !important;
}
#orderView .plan-option.has-tier:hover{
  border-color:color-mix(in srgb, var(--tier) 52%, transparent) !important;
  box-shadow:0 2px 5px rgba(38,26,86,.06),
             0 14px 28px color-mix(in srgb, var(--tier) 18%, rgba(38,26,86,.10)) !important;
}
#orderView .plan-option.has-tier.active{
  border-color:var(--tier) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tier) 17%, transparent),
             0 12px 26px color-mix(in srgb, var(--tier) 26%, transparent) !important;
}
/* the premium tiers also get a lit top edge */
#orderView .plan-option[data-tier="business"],
#orderView .plan-option[data-tier="premium"],
#orderView .plan-option[data-tier="vip"],
#orderView .plan-option[data-tier="svip"],
#orderView .plan-option[data-tier="go"],
#orderView .plan-option[data-tier="4k"],
#orderView .plan-option[data-tier="gptpro"],
#orderView .plan-option[data-tier="ultra"],
#orderView .plan-option[data-tier="max"]{
  background-image:
    linear-gradient(180deg,var(--tier),var(--tier-2)),
    linear-gradient(90deg,var(--tier),var(--tier-2)) !important;
  background-size:4px 100%, 100% 3px !important;
  background-position:left top, left top !important;
  background-repeat:no-repeat, no-repeat !important;
}
#orderView .plan-option[data-tier="business"].active,
#orderView .plan-option[data-tier="premium"].active,
#orderView .plan-option[data-tier="vip"].active,
#orderView .plan-option[data-tier="svip"].active,
#orderView .plan-option[data-tier="go"].active,
#orderView .plan-option[data-tier="4k"].active,
#orderView .plan-option[data-tier="gptpro"].active,
#orderView .plan-option[data-tier="ultra"].active,
#orderView .plan-option[data-tier="max"].active{
  background-image:
    linear-gradient(180deg,var(--tier),var(--tier-2)),
    linear-gradient(90deg,var(--tier),var(--tier-2)),
    linear-gradient(180deg,#FBFAFF,#F4F2FE) !important;
  background-size:4px 100%, 100% 3px, 100% 100% !important;
  background-position:left top, left top, left top !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
}

@media(max-width:560px){
  #orderView .plan-tier-chip{ padding:3px 10px !important; font-size:8.5px !important; }
  #orderView .plan-type-value{ font-size:10.5px !important; }
  #orderView .plan-type-line{ margin-top:8px; padding-top:8px; }
}

/* ===== order-status-chat-style ===== */
/* Order status (pending -> approved) + live chat, styled to match the
   existing dashboard/preview cards so the new flow doesn't look bolted on. */
.order-status-view, .order-chat-view{ display:block; }
.order-status-view.hidden, .order-chat-view.hidden{ display:none; }
/* This view (and the .preview-shell/.acct-list cards inside it) had no
   horizontal gutter of its own, so on narrow screens the cards sat flush
   against the viewport edge and their rounded corners had nothing to show
   against -- they read as square. */
.order-status-view{ padding:0 clamp(12px,4vw,28px); }
.order-status-card{
  width:min(560px,100%);
  margin:18px auto 0;
  padding:34px 22px;
  text-align:center;
  background:linear-gradient(180deg, rgba(75,20,120,.55), rgba(45,8,71,.55));
  border:1px solid rgba(199,125,255,.22);
  border-radius:var(--radius-lg,22px);
  box-shadow:var(--shadow,0 18px 44px rgba(18,0,32,.28));
}
.order-status-icon{ font-size:44px; line-height:1; margin-bottom:10px; }
.order-status-title{ font-size:23px; font-weight:800; margin-bottom:8px; }
.order-status-sub{ font-size:14px; color:var(--muted,rgba(255,255,255,.74)); margin-bottom:10px; }
.order-status-sub b{ color:#fff; }
.order-status-hint{ font-size:12px; color:var(--muted,rgba(255,255,255,.74)); line-height:1.5; margin-bottom:18px; }
/* A rejected order's reason gets its own boxed callout (icon + text)
   instead of running into the plain hint sentence below it -- the reason
   is the one piece of information a rejected customer actually needs to
   act on, so it reads as a distinct, professional notice, not filler. */
.status-reason-box{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  width:min(500px,100%); margin:0 auto 16px; padding:13px 15px;
  border-radius:14px; background:rgba(169,72,72,.14); border:1px solid rgba(255,143,174,.28);
}
.status-reason-box.hidden{ display:none; }
.status-reason-icon{ flex:0 0 auto; width:20px; height:20px; color:#ff8fae; }
.status-reason-icon svg{ width:20px; height:20px; }
.status-reason-text{ font-size:13px; line-height:1.5; color:#ffd7e2; font-weight:600; }
body.light-mode .status-reason-box{ background:rgba(220,38,38,.07); border-color:rgba(220,38,38,.22); }
body.light-mode .status-reason-icon{ color:#dc2626; }
body.light-mode .status-reason-text{ color:#7a2323; }
#openChatBtn{ width:min(320px,100%); margin:0 auto; }
/* Reuses the existing .order-preview-table look (see the Order Preview
   screen) so this reads as the same polished table, not a second style. */
.order-status-details{
  width:min(500px,100%); margin:0 auto 16px; text-align:left;
  background:rgba(255,255,255,.045); border:1px solid rgba(199,125,255,.20);
  border-radius:16px; overflow:hidden;
}
.order-status-details .order-preview-table{ width:100%; margin:0; }
.status-details-caption{
  font-size:10.5px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted,rgba(255,255,255,.55)); padding:13px 16px 0;
}
body.light-mode .status-details-caption{ color:#8a7aa8; }
body.light-mode .order-status-details{
  background:rgba(255,255,255,.55); border-color:rgba(168,124,224,.28); box-shadow:inset 0 1px rgba(255,255,255,.7);
}
body.light-mode .order-status-details .order-preview-table th{ color:#6b5f85 !important; }
body.light-mode .order-status-details .order-preview-table td{ color:#372b52 !important; }

/* Indeterminate progress bar shown while an order is being placed */
.order-progress-bar{
  width:min(760px,100%); height:4px; margin:12px auto 0;
  background:rgba(255,255,255,.14); border-radius:4px; overflow:hidden;
}
.order-progress-bar.hidden{ display:none; }
.order-progress-fill{
  height:100%; width:35%; border-radius:4px;
  background:linear-gradient(90deg,#7a35c7,#d58cff);
  animation:orderProgressSlide 1.1s ease-in-out infinite;
}
@keyframes orderProgressSlide{
  0%{ transform:translateX(-110%); }
  100%{ transform:translateX(320%); }
}
body.light-mode .order-progress-bar{ background:var(--border,rgba(31,41,55,.14)); }

/* Checkout/preview/status/chat/My-Orders each carry their own back button
   and title chip (.dashboard-head) -- the plan-selection cart's own
   "Order Cart / Back to Products" bar above it was showing on every one
   of those screens too, doubling up. Hide it everywhere except the cart. */
.order-view.hide-cart-header > .panel > .top-actions,
.order-view.hide-cart-header > .panel > .panel-title,
.order-view.hide-cart-header > .panel > .panel-sub{ display:none; }

/* Order status stepper -- placed / under review / approved */
.status-stepper{
  width:min(420px,100%); margin:6px auto 18px; display:flex; align-items:flex-start;
}
.status-step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; width:84px; }
.status-step-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.22); color:var(--muted,rgba(255,255,255,.6));
  font-size:11px; font-weight:800;
}
.status-step.done .status-step-dot{ background:#3ec98b; border-color:#3ec98b; color:#0a2e1c; box-shadow:0 0 10px rgba(62,201,139,.65), 0 0 22px rgba(62,201,139,.35); }
.status-step.current .status-step-dot{ background:#d58cff; border-color:#d58cff; color:#2d0847; box-shadow:0 0 10px rgba(213,140,255,.7), 0 0 24px rgba(213,140,255,.4); animation:stepPulse 1.6s ease-in-out infinite; }
@keyframes stepPulse{ 0%,100%{ box-shadow:0 0 10px rgba(213,140,255,.7), 0 0 24px rgba(213,140,255,.4); } 50%{ box-shadow:0 0 16px rgba(213,140,255,.95), 0 0 34px rgba(213,140,255,.6); } }
.status-step-label{ font-size:9.5px; font-weight:700; color:var(--muted,rgba(255,255,255,.65)); text-align:center; line-height:1.3; }
.status-step.done .status-step-label, .status-step.current .status-step-label{ color:var(--text,#fff); }
.status-step-line{ flex:1 1 auto; height:3px; border-radius:3px; background:rgba(255,255,255,.18); margin-top:12px; }
.status-step-line.done{ background:linear-gradient(90deg,#3ec98b,#7ee6b8); box-shadow:0 0 8px rgba(62,201,139,.6); }
.status-step.rejected .status-step-dot{ background:#ff8fae; border-color:#ff8fae; color:#3a0016; box-shadow:0 0 10px rgba(255,143,174,.65), 0 0 22px rgba(255,143,174,.35); }
body.light-mode .status-step-dot{ background:var(--surface-2,#f7f9fc); border-color:var(--border,rgba(31,41,55,.18)); color:var(--muted,#6b7686); }
body.light-mode .status-step-label{ color:var(--muted,#6b7686); }
body.light-mode .status-step.done .status-step-label, body.light-mode .status-step.current .status-step-label{ color:var(--ink,#1f2937); }
body.light-mode .status-step-line{ background:var(--border,rgba(31,41,55,.14)); }


/* Stat chips shared by the Invite Friends page. */
.acct-referral-stats{ display:flex; gap:8px; width:min(460px,100%); margin:0 auto 18px; }
.acct-referral-stat{
flex:1; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(199,125,255,.16);
border-radius:12px; padding:12px 6px;
}
.acct-referral-stat b{ display:block; font-size:17px; font-weight:900; }
.acct-referral-stat span{ font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--muted,rgba(255,255,255,.6)); text-transform:uppercase; margin-top:2px; display:block; }
body.light-mode .acct-referral-stat{ background:var(--surface,#fff); border-color:var(--border,rgba(31,41,55,.14)); }

/* Invite Friends page -- a dark hero banner branded with the app's own
purple/pink gradient instead of a third-party illustration, then the
code preview + a single CTA that opens the Share popup. */
.invite-hero{ text-align:center; width:min(460px,100%); margin:6px auto 18px; padding:26px 20px;
border-radius:22px; background:linear-gradient(160deg,#2d0847,#4c1480 55%,#7a35c7);
box-shadow:0 20px 50px rgba(93,72,137,.30);
}
.invite-hero-icon{
width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#e0a83c,#ffcf6b); color:#fff;
box-shadow:0 6px 18px rgba(224,168,60,.40);
}
.invite-hero-icon svg{ width:26px; height:26px; }
.invite-hero-title{ font-size:22px; font-weight:900; color:#fff; margin:0 0 8px; }
.invite-hero-title span{ color:#ffcf6b; }
.invite-hero-sub{ font-size:12.5px; color:rgba(255,255,255,.78); line-height:1.5; margin:0; }
.invite-code-preview{
width:min(460px,100%); margin:0 auto 16px; padding:14px; text-align:center;
font-family:monospace; font-size:15px; font-weight:800; letter-spacing:.04em;
background:rgba(255,255,255,.05); border:1px dashed rgba(199,125,255,.35); border-radius:14px;
}
body.light-mode .invite-code-preview{ background:var(--surface,#fff); border-color:rgba(124,58,237,.30); }
.invite-share-btn{ width:min(460px,100%); margin:0 auto; display:block; }

/* Share popup -- Referral code / link, each its own copyable row, plus
share-to-app shortcuts. */
.share-copy-row{
display:flex; align-items:center; gap:10px; margin-bottom:12px;
background:rgba(124,58,237,.06); border:1px solid rgba(124,58,237,.18); border-radius:12px; padding:10px 14px;
}
.share-copy-text{ flex:1; min-width:0; }
.share-copy-label{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#6b7686); }
.share-copy-value{ font-family:monospace; font-size:13px; font-weight:700; color:var(--ink,#1f2937); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-copy-btn{
flex:0 0 auto; width:34px; height:34px; padding:0; border:none; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#7a35c7,#b86bff); color:#fff; cursor:pointer;
}
.share-copy-btn svg{ width:16px; height:16px; }
.share-apps-row{ display:flex; justify-content:space-between; gap:8px; margin-top:16px; }
.share-app-btn{
flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
background:none; border:none; color:var(--ink,#1f2937); font-size:10.5px; font-weight:700;
text-decoration:none; cursor:pointer;
}
.share-app-icon{
width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
}
.share-app-icon svg{ width:20px; height:20px; }
.share-app-icon.telegram{ background:#29a9eb; }
.share-app-icon.whatsapp{ background:#25d366; }
.share-app-icon.x{ background:#000; }
.share-app-icon.copy{ background:var(--muted,#98a1ad); }

/* My Account -- settings-list style */
/* My Account -- Figma "User greeting" account screen: a light, app-style page
   (appbar, purple profile card, settings cards, invite card, help card and a
   bottom tab bar). First page only -- the email modal, invite-friends view
   and security view keep their existing designs untouched. */
body.account-mode .compact-header,
body.account-mode .neon-announcement{ display:none !important; }
.acct-screen{
  background:#F4F4FA; color:#23233A; min-height:100dvh; padding-bottom:104px;
}
.acct-col{
  width:min(520px,100%); margin:0 auto; padding:14px 16px 8px;
  display:flex; flex-direction:column; gap:14px;
}

/* Appbar: dark gamepay. logo, bell, avatar */
.acct-appbar{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 2px; }
.acct-appbar-brand{ display:flex; align-items:center; gap:9px; }
.acct-appbar-plus{
  width:36px; height:36px; border-radius:12px; background:#23233A; color:#fff;
  font-size:22px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center;
}
.acct-appbar-word{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:#23233A; }

/* ===== Security page: Figma "User greeting" /account/security ===== */
.sec-appbar{ border-bottom:1px solid #EBEBF3; padding-bottom:12px; }
.sec-back-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #E4E4EE; border-radius:999px;
  padding:10px 18px; font-size:14px; font-weight:600; color:#3A3A4C; cursor:pointer;
}
.sec-back-pill svg{ width:15px; height:15px; }
.sec-card{ background:#fff; border:1px solid #ECECF3; border-radius:20px; overflow:hidden; }
.sec-card-head{
  display:flex; align-items:center; gap:10px; background:#F4F1FF;
  padding:15px 18px; font-size:17px; font-weight:700; color:#26263A;
  border-bottom:1px solid #ECECF3;
}
.sec-head-icon{ color:#7C5CFF; display:flex; }
.sec-head-icon svg{ width:22px; height:22px; }
.sec-row{
  display:flex; align-items:center; gap:14px; width:100%;
  background:#fff; border:0; border-bottom:1px solid #F1F1F6;
  padding:13px 18px; cursor:pointer; text-align:left; font-family:inherit;
}
.sec-row:last-child{ border-bottom:0; }
.sec-row-icon{
  width:46px; height:46px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; font-weight:600; line-height:1;
}
.sec-row-icon svg{ width:22px; height:22px; }
.sec-row-icon.tint-purple{ background:#F1EDFF; color:#7C5CFF; }
.sec-row-icon.tint-green{ background:#E9F7EF; color:#1F9D55; }
.sec-row-icon.tint-grey{ background:#F1F2F6; color:#5A5A6E; }
.sec-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sec-row-label{ font-size:13px; color:#8B8B9F; }
.sec-row-value{ font-size:16px; font-weight:700; color:#23233A; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-row-value.dim{ color:#A2A2B6; font-weight:500; font-size:14px; }
.sec-row-chev{ color:#BCBCCF; display:flex; flex:none; }
.sec-row-chev svg{ width:20px; height:20px; }
.sec-support-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px 12px; font-size:16px; font-weight:700; color:#23233A;
}
.sec-support-btns{ display:flex; gap:10px; padding:0 18px 18px; }
.sec-support-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; padding:13px 0; font-size:15px; font-weight:600; text-decoration:none;
}
.sec-support-btn svg{ width:20px; height:20px; }
.sec-support-btn.wa{ background:#E7F7EE; color:#1E7A4C; }
.sec-support-btn.tg{ background:#EAF1FE; color:#2B6CB0; }
.sec-notice{
  display:flex; align-items:center; gap:10px;
  background:#F5F2FF; border-radius:16px; padding:14px 16px;
  font-size:13px; line-height:1.5; color:#6E6E86;
}
.sec-notice svg{ width:18px; height:18px; color:#7C5CFF; flex:none; }
.sec-foot{ text-align:center; font-size:12px; line-height:1.7; color:#9A9AAE; margin:2px 0 4px; }
.acct-appbar-actions{ display:flex; align-items:center; gap:10px; }
.acct-icon-btn{
  width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid #E9E9F2;
  color:#23233A; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.acct-icon-btn svg{ width:20px; height:20px; }
.acct-appbar-avatar{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#7a35c7,#b86bff);
  color:#fff; font-size:17px; font-weight:800; border:2px solid #DCD2FF;
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
}
.acct-appbar-avatar img{ width:100%; height:100%; object-fit:cover; }

/* Profile card: soft purple gradient, decorative circle, avatar + verified pill + stats */
.acct-profile-card{
  position:relative; overflow:hidden; border-radius:24px; padding:20px;
  background:linear-gradient(135deg,#F5F1FF 0%,#EBE4FF 58%,#E1D6FF 100%);
  border:1px solid #E3DAFB;
}
.acct-profile-card::after{
  content:""; position:absolute; top:-72px; right:-72px; width:216px; height:216px;
  border-radius:50%; background:rgba(255,255,255,.5); pointer-events:none;
}
.acct-profile-top{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.acct-avatar-wrap{ position:relative; flex:0 0 auto; width:74px; height:74px; }
.acct-avatar{
  width:74px; height:74px; border-radius:24px; font-size:28px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7a35c7,#b86bff); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(122,53,199,.35); overflow:hidden;
}
.acct-avatar img{ width:100%; height:100%; object-fit:cover; }
.acct-avatar-edit{
  position:absolute; right:-6px; bottom:-6px; width:28px; height:28px; border-radius:50%;
  background:#fff; border:1px solid #E7E2F7; color:#7C5CFC; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(35,35,58,.12);
}
.acct-avatar-edit svg{ width:13px; height:13px; }
.acct-profile-id{ min-width:0; }
.acct-profile-name{ font-size:22px; font-weight:800; color:#2A1B4E; letter-spacing:-.01em; }
.acct-profile-handle{ font-size:13px; color:#8A8AA3; margin-top:2px; }
.acct-verified{
  display:inline-flex; align-items:center; gap:5px; margin-top:9px;
  background:#fff; border:1px solid #E7E2F7; color:#7C5CFC;
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px;
}
.acct-verified svg{ width:14px; height:14px; }
.acct-stats{
  position:relative; z-index:1; display:flex; background:#fff;
  border-radius:18px; margin-top:16px; border:1px solid #EFEDF7;
}
.acct-stat{ flex:1; min-width:0; padding:14px 18px; }
.acct-stat + .acct-stat{ border-left:1px solid #F0F0F6; }
.acct-stat-label{ font-size:12.5px; color:#8A8AA3; margin-bottom:4px; }
.acct-stat-value{ font-size:24px; font-weight:800; color:#1F1F33; letter-spacing:-.01em; }
.acct-stat-value small{ font-size:13px; font-weight:600; color:#8A8AA3; margin-left:5px; }

/* Avatar gallery popover (kept from the old design, restyled light) */
.avatar-popover{
  position:absolute; z-index:5; top:104px; left:20px; width:min(300px,82%);
  background:#fff; border:1px solid #EBEBF3; border-radius:16px;
  box-shadow:0 12px 30px rgba(35,35,58,.12); padding:12px;
}
.avatar-popover.hidden{ display:none; }
.avatar-popover-label{ font-size:12px; font-weight:700; color:#8A8AA3; margin-bottom:8px; }
.avatar-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:10px; }
.avatar-gallery-item{ border:none; background:none; padding:0; cursor:pointer; }
.avatar-gallery-circle{
  display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto;
  border-radius:50%; border:2px solid transparent; transition:transform .12s, border-color .12s;
  color:#fff; font-weight:800; font-size:20px; overflow:hidden;
}
.avatar-gallery-circle img{ width:100%; height:100%; object-fit:cover; }
.avatar-gallery-item:hover .avatar-gallery-circle{ transform:scale(1.06); }
.avatar-gallery-item.active .avatar-gallery-circle{ border-color:#7C5CFC; box-shadow:0 0 0 2px rgba(124,92,252,.35); }

/* White cards + rows */
.acct-card{ background:#fff; border:1px solid #EBEBF3; border-radius:20px; padding:2px 18px; }
.acct-card-title{
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:800; color:#23233A; padding:14px 0 4px;
}
.acct-card-title svg{ width:18px; height:18px; color:#7C5CFC; }
.acct-row{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #F2F2F7; }
.acct-card .acct-row:last-child{ border-bottom:none; }
.acct-row-noborder{ border-bottom:none !important; }
.acct-row-btn{ cursor:pointer; }
.acct-tile{
  flex:0 0 auto; width:46px; height:46px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
}
.acct-tile svg{ width:22px; height:22px; }
.tint-purple{ background:#EFEBFF; color:#7C5CFC; }
.tint-green{ background:#E7F7EE; color:#1FA35C; }
.tint-grey{ background:#EFF1F6; color:#5B6B7F; }
.acct-row-body{ flex:1; min-width:0; }
.acct-row-sub{ font-size:12.5px; color:#8A8AA3; margin-top:2px; }
.acct-row-sub b{ color:#7C5CFC; font-weight:700; }
.acct-row-value{
  font-size:15px; font-weight:700; color:#23233A;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-edit-link{
  display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
  color:#7C5CFC; font-size:13.5px; font-weight:700; padding:6px 0 6px 6px;
}
.acct-edit-link svg{ width:14px; height:14px; }
.acct-chevron{ flex:0 0 auto; color:#B9B9CC; display:flex; }
.acct-chevron svg{ width:18px; height:18px; }

/* Log out */
.acct-logout{
  display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer;
  color:#E5484D; font-size:15px; font-weight:700; padding:8px 4px; text-align:left;
}
.acct-logout svg{ width:20px; height:20px; }

/* Invite & earn footer */
.acct-invite-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0 14px; border-top:1px solid #F2F2F7;
}
.acct-text-link{
  display:flex; align-items:center; gap:3px; background:none; border:none; cursor:pointer;
  color:#8A8AA3; font-size:13.5px; font-weight:600; padding:8px 0;
}
.acct-text-link svg{ width:15px; height:15px; }
.acct-invite-btn{
  display:flex; align-items:center; gap:8px; background:#7C5CFC; color:#fff;
  border:none; border-radius:14px; padding:12px 20px; font-size:14.5px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(124,92,252,.35);
}
.acct-invite-btn svg{ width:17px; height:17px; }
.acct-invite-btn:active{ transform:scale(.97); }

/* Help card buttons */
.acct-help-row{ display:flex; gap:12px; padding:2px 0 14px; }
.acct-help-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 8px; border-radius:14px; font-size:14.5px; font-weight:700; text-decoration:none;
}
.acct-help-btn svg{ width:20px; height:20px; }
.acct-help-btn.wa{ background:#E9F9EF; color:#1E9E5A; }
.acct-help-btn.tg{ background:#EAF1FE; color:#2B6CB0; }

/* Bottom tab bar */
.acct-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.97); border-top:1px solid #EBEBF3;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
}
.acct-tabbar-inner{ width:min(520px,100%); margin:0 auto; display:flex; gap:6px; }
.acct-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; border:none; border-radius:14px; background:none; cursor:pointer;
  color:#9A9AB0; font-size:11.5px; font-weight:600;
}
.acct-tab svg{ width:22px; height:22px; }
.acct-tab.active{ background:#EFEBFF; color:#7C5CFC; font-weight:800; }
@media (min-width:720px){
  .acct-col{ padding-top:22px; }
}

/* Legacy account row styles -- kept ONLY for #securityView (a next-page
   screen whose design must stay untouched). The first page above uses the
   new .acct-row system. */
#securityView .acct-list{
  width:min(460px,100%); margin:0 auto 10px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(199,125,255,.16);
}
#securityView .acct-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
#securityView .acct-list .acct-row:last-child{ border-bottom:none; }
#securityView .acct-row-btn{ cursor:pointer; transition:background .15s; }
#securityView .acct-row-btn:hover{ background:rgba(255,255,255,.05); }
#securityView .acct-row-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--muted,rgba(255,255,255,.65));
}
#securityView .acct-row-icon svg{ width:16px; height:16px; }
#securityView .acct-row-icon-text{ font-size:14px; font-weight:800; }
#securityView .acct-row-body{ flex:1; min-width:0; }
#securityView .acct-row-label{ font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--muted,rgba(255,255,255,.5)); margin-bottom:2px; }
#securityView .acct-row-value{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#securityView .acct-row-chevron{ flex:0 0 auto; width:15px; height:15px; color:var(--muted,rgba(255,255,255,.4)); }
body.light-mode #securityView .acct-list{ background:var(--surface,#fff); border-color:var(--border,rgba(31,41,55,.14)); }
body.light-mode #securityView .acct-row{ border-bottom-color:var(--border,rgba(31,41,55,.10)); }
body.light-mode #securityView .acct-row-btn:hover{ background:var(--surface-2,#f7f9fc); }
body.light-mode #securityView .acct-row-icon{ background:var(--accent-soft,#f2ecff); color:#7c3aed; }
body.light-mode #securityView .acct-row-label{ color:var(--muted,#6b7686); }
body.light-mode #securityView .acct-row-value{ color:var(--ink,#1f2937); }
body.light-mode #securityView .acct-row-chevron{ color:var(--muted,#98a1ad); }



/* Support chat -- a single card (avatar + name + "manual, not a bot" status
   in the header, bubbles below, pill input + round send button) instead of
   a bare message list, so it reads like a real support widget even though
   it's still a full-page view, not a floating overlay. */
.chat-panel{
  width:min(560px,100%);
  margin:14px auto 0;
  border-radius:22px;
  overflow:hidden;
  background:rgba(20,4,34,.55);
  border:1px solid rgba(199,125,255,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.chat-panel-header{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,#7a35c7,#4c1480);
  color:#fff;
}
.chat-panel-back{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border:none; color:#fff; cursor:pointer;
}
.chat-panel-back svg{ width:16px; height:16px; }
.chat-panel-avatar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.chat-panel-avatar img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.chat-panel-info{ flex:1; min-width:0; }
.chat-panel-name{ font-weight:800; font-size:14px; line-height:1.25; }
.chat-panel-status{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:rgba(255,255,255,.85); margin-top:2px; }
.chat-status-dot{ width:7px; height:7px; border-radius:50%; background:#3ec98b; box-shadow:0 0 6px #3ec98b; flex:0 0 auto; }
/* Order chat vs. Support chat used to share one identical panel design,
   with only the JS-level chatMode variable telling them apart -- nothing
   on screen did. This small corner tag is the one header difference;
   the order-summary card below is the bigger one. */
.chat-mode-tag{
  flex:0 0 auto; align-self:flex-start; padding:4px 8px; border-radius:7px;
  font-size:8.5px; font-weight:900; letter-spacing:.05em;
  background:rgba(255,255,255,.22); color:inherit;
}
/* Order ID, date, product/plan, amount, warranty/format/note and status --
   shown once, above the conversation, instead of repeated in every message
   or left for the customer to scroll back to the order-status page for. */
.chat-order-summary{
  margin:0 14px 10px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
}
.chat-order-summary-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:5px 0; font-size:12px;
}
.chat-order-summary-row + .chat-order-summary-row{ border-top:1px dashed rgba(255,255,255,.14); }
.chat-order-summary-label{
  flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.6); padding-top:1px;
}
.chat-order-summary-value{ flex:1 1 auto; text-align:right; font-weight:700; white-space:pre-line; }
body.light-mode .chat-order-summary{ background:rgba(255,255,255,.55); border-color:rgba(212,168,67,.35); }
body.light-mode .chat-order-summary-label{ color:rgba(44,31,66,.55); }
body.light-mode .chat-order-summary-row + .chat-order-summary-row{ border-top-color:rgba(44,31,66,.14); }
/* Shown once admin ends the conversation -- the input row below is
   disabled at the same time (see openChatView()/lockChatInput()). */
.chat-closed-banner{
  margin:0 14px 10px; padding:9px 12px; border-radius:12px; text-align:center;
  font-size:11.5px; font-weight:700;
  background:rgba(255,110,150,.14); color:#ff9fc9; border:1px solid rgba(255,110,150,.3);
}
body.light-mode .chat-closed-banner{ background:#ffe6ec; color:#c81e4d; border-color:#f3b7c6; }
.chat-input-row.is-disabled{ opacity:.5; pointer-events:none; }
.chat-panel .chat-messages{
  min-height:280px;
  max-height:52vh;
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:rgba(0,0,0,.18);
}
.chat-empty{ margin:auto; font-size:12px; color:var(--muted,rgba(255,255,255,.6)); }
.chat-bubble{
  max-width:74%;
  padding:9px 14px;
  border-radius:18px;
  font-size:13.5px;
  line-height:1.4;
  word-break:break-word;
  white-space:pre-wrap;
}
.chat-bubble.customer{
  align-self:flex-end;
  background:linear-gradient(135deg,#7a35c7,#b86bff);
  color:#fff;
  border-bottom-right-radius:5px;
}
.chat-bubble.admin{
  align-self:flex-start;
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(224,180,255,.22);
  border-bottom-left-radius:5px;
}
.chat-row{ display:flex; align-items:flex-end; gap:7px; margin-bottom:2px; }
.chat-row.admin{ justify-content:flex-start; }
.chat-row.customer{ justify-content:flex-end; }
.chat-row .chat-bubble{ margin:0; }
.chat-row-avatar{ width:24px; height:24px; font-size:10.5px; }
.chat-row-avatar svg{ width:12px; height:12px; }
.chat-row-avatar img{ width:100%; height:100%; object-fit:contain; border-radius:50%; padding:2px; }
.chat-panel .chat-input-row{
  margin:0;
  padding:10px 12px 12px;
  background:rgba(0,0,0,.14);
  display:flex;
  gap:8px;
}
.chat-input-row .input{ flex:1; border-radius:999px; }
.chat-send-btn{
  flex:0 0 auto; width:40px; height:40px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7a35c7,#b86bff); border:none; color:#fff; cursor:pointer;
}
.chat-send-btn svg{ width:17px; height:17px; }
.chat-attach-btn{
  flex:0 0 auto; width:40px; height:40px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(224,180,255,.28); color:#fff; cursor:pointer;
}
.chat-attach-btn svg{ width:17px; height:17px; }
.chat-attach-btn:hover{ background:rgba(255,255,255,.14); }
body.light-mode .chat-attach-btn{ background:rgba(255,255,255,.5); border-color:rgba(212,168,67,.35); color:var(--ink,#1f2937); }
.chat-image-preview{ margin:0 12px 10px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted,rgba(255,255,255,.74)); }
.chat-image-preview img{ width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid rgba(224,180,255,.3); }
.chat-image-preview.hidden{ display:none; }
.chat-bubble-image{ display:block; max-width:100%; border-radius:10px; margin-bottom:6px; }
.chat-bubble-image:last-child{ margin-bottom:0; }
body.light-mode .chat-bubble.customer{ box-shadow:0 1px 2px rgba(122,53,199,.25); }
body.light-mode .chat-panel{
  background:linear-gradient(160deg,rgba(255,251,240,.95),rgba(233,215,255,.8));
  border:2px solid rgba(212,168,67,.65);
  box-shadow:0 0 0 4px rgba(168,124,224,.18), 0 18px 40px rgba(93,72,137,.20), inset 0 1px rgba(255,255,255,.85);
}
body.light-mode .chat-panel-header{
  background:linear-gradient(135deg,#d4a843,#a87ce0);
  color:#2c1f42;
}
body.light-mode .chat-panel-status{ color:rgba(44,31,66,.75); }
body.light-mode .chat-panel-back{ background:rgba(255,255,255,.35); color:#2c1f42; }
body.light-mode .chat-panel .chat-messages{ background:rgba(255,255,255,.35); }
body.light-mode .chat-panel .chat-input-row{ background:rgba(255,255,255,.25); }
body.light-mode .chat-bubble.admin{ background:rgba(255,255,255,.75); color:#372b52; border-color:rgba(212,168,67,.35); }

.my-orders-btn{
  position:relative;
  border:1px solid rgba(224,180,255,.28);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:7px 12px;
  border-radius:20px;
  cursor:pointer;
}
@media(max-width:640px){ .my-orders-btn{ font-size:9px; padding:6px 9px; } }
/* Icon-only variant (Noti) -- a square tap target instead of a pill with
   a label, so the icon itself can be sized up without the button growing
   into a wide text-plus-icon pair. */
.icon-only-btn{ display:flex; align-items:center; justify-content:center; padding:8px; }
.noti-btn-icon{ width:22px; height:22px; margin:0; }
@media(max-width:640px){ .icon-only-btn{ padding:7px; } .noti-btn-icon{ width:20px; height:20px; } }
.notif-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:#ff4d6d; color:#fff;
  font-size:10px; font-weight:900; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px var(--bg1,#160021);
}
body.light-mode .notif-badge{ box-shadow:0 0 0 2px #fff; }
.notif-badge.hidden{ display:none; }

.my-orders-list{
  width:min(680px,100%);
  margin:14px auto 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.my-order-row{
  /* flex-start, not center: a long plan name used to force the icon and
     amount to sit centered against however many lines .mo-body ended up
     wrapping to, which read as "not lined up" whenever a plan name ran
     long. Every row now anchors to its own top line no matter how tall
     .mo-body gets. */
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px;
  border-radius:14px;
  border:1px solid rgba(199,125,255,.22);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  transition:.15s;
}
.my-order-row:hover{ background:rgba(255,255,255,.11); }
.my-order-row .mo-status-icon{ margin-top:1px; }
.my-order-row .mo-body{ flex:1; min-width:0; }
.my-order-row .moc{ font-weight:800; font-size:13px; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.my-order-row .mol{ font-size:12px; color:var(--muted,rgba(255,255,255,.7)); margin-top:3px; }
/* One line, ellipsized -- a long plan name used to wrap onto a second
   line and make the row's height (and the icon/amount centered against
   it) unpredictable from row to row. Full text is still one tap/hover
   away via the title attribute. */
.my-order-row .mol.mo-plan{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-order-row .mol.mo-date{ opacity:.75; }
/* The amount used to be buried inline in the small-print subtitle
   (alongside a plan name that already had its own price in the text,
   showing the price twice) -- pulled out as its own right-aligned figure
   so the row reads: status, code, what it was, when, and what it cost,
   each in its own place instead of one run-on line. */
.my-order-row .mo-amount{
  flex:0 0 auto; font-weight:800; font-size:13px; color:var(--ink,#fff);
  white-space:nowrap; margin-left:4px; margin-top:1px;
}
.my-order-row .mo-chevron{ margin-top:3px; }
/* Skeleton shimmer for list loading (My Orders / Notices) -- a moving
   gradient over placeholder shapes instead of bare "Loading…" text, and a
   different loading language than the intro splash's ring or the page
   loader's radar ping so they don't all read as one recycled effect. */
.skeleton-row{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border-radius:14px; border:1px solid rgba(199,125,255,.14); background:rgba(255,255,255,.04);
}
.skeleton-icon{ width:34px; height:34px; border-radius:12px; flex:0 0 auto; }
.skeleton-lines{ flex:1; display:flex; flex-direction:column; gap:7px; }
.skeleton-line{ height:10px; border-radius:5px; }
.skeleton-icon,.skeleton-line{
  background:linear-gradient(90deg,rgba(150,140,180,.14) 25%,rgba(150,140,180,.30) 37%,rgba(150,140,180,.14) 63%);
  background-size:400% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
body.light-mode .skeleton-row{ background:var(--surface,#fff); border-color:var(--border,rgba(31,41,55,.12)); }
body.light-mode .skeleton-icon,body.light-mode .skeleton-line{
  background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 37%,rgba(0,0,0,.06) 63%);
  background-size:400% 100%;
}
@media(prefers-reduced-motion:reduce){ .skeleton-icon,.skeleton-line{ animation:none !important; } }
.notice-body-preview{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; white-space:pre-wrap; word-break:break-word;
}
.mo-status-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; border:1px solid transparent;
}
.mo-status-icon svg{ width:17px; height:17px; }
.mo-status-icon.pending{ background:rgba(224,168,60,.16); color:#ffcf6b; border-color:rgba(224,168,60,.38); }
.mo-status-icon.approved, .mo-status-icon.completed{ background:rgba(62,201,139,.16); color:#7de8b3; border-color:rgba(62,201,139,.38); }
.mo-status-icon.rejected{ background:rgba(255,110,150,.16); color:#ff9fc9; border-color:rgba(255,110,150,.38); }
body.light-mode .mo-status-icon.pending{ background:#fff3d6; color:#a15c00; border-color:#f0d090; }
body.light-mode .mo-status-icon.approved, body.light-mode .mo-status-icon.completed{ background:#e2f5ea; color:#0f7a3f; border-color:#b7e6c9; }
body.light-mode .mo-status-icon.rejected{ background:#ffe6ec; color:#c81e4d; border-color:#f3b7c6; }
.mo-chevron{ flex:0 0 auto; width:16px; height:16px; color:var(--muted,rgba(255,255,255,.4)); }
.unread-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  padding:0 5px; border-radius:999px; background:#ff4d6d; color:#fff; font-size:10px; font-weight:800;
  margin-left:6px; vertical-align:middle;
}
.mo-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800;
  padding:4px 10px; border-radius:8px; margin-left:8px; letter-spacing:.02em; border:1px solid transparent;
}
.mo-badge.pending{ background:rgba(224,168,60,.16); color:#ffcf6b; border-color:rgba(224,168,60,.4); }
.mo-badge.approved,.mo-badge.completed{ background:rgba(62,201,139,.16); color:#7de8b3; border-color:rgba(62,201,139,.4); }
.mo-badge.rejected{ background:rgba(255,110,150,.16); color:#ff9fc9; border-color:rgba(255,110,150,.4); }
body.light-mode .mo-badge.pending{ background:#fff3d6; color:#a15c00; border-color:#f0d090; }
body.light-mode .mo-badge.approved, body.light-mode .mo-badge.completed{ background:#e2f5ea; color:#0f7a3f; border-color:#b7e6c9; }
body.light-mode .mo-badge.rejected{ background:#ffe6ec; color:#c81e4d; border-color:#f3b7c6; }
/* Summary counts above the order list -- same status colors as the row
   badges above, so "3 Pending" and a pending row read as the same color
   language instead of introducing a second palette. */
.mo-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; }
@media(max-width:420px){
  .mo-stats{ gap:4px; }
  .mo-stat{ padding:7px 2px; border-radius:10px; }
  .mo-stat-num{ font-size:13px; }
  .mo-stat-label{ font-size:7px; }
}
/* Tapping a tile filters the list below to that status -- Total clears
   the filter. Kept compact (this used to be noticeably chunkier) since
   it's a quick-glance summary row, not a set of headline numbers. */
.mo-stat{
  padding:8px 6px; border-radius:12px; text-align:center; border:1px solid;
  cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .12s ease;
  background:none;
}
.mo-stat:active{ transform:scale(.96); }
.mo-stat.active{ box-shadow:0 0 0 2px currentColor inset; }
.mo-stat-num{ display:block; font-size:15px; font-weight:900; line-height:1.15; }
.mo-stat-label{ display:block; font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; opacity:.85; }
.mo-stat.total{ background:rgba(124,77,219,.08); border-color:rgba(124,77,219,.22); color:var(--violet,#7c4ddb); }
.mo-stat.pending{ background:#fff3d6; border-color:#f0d090; color:#a15c00; }
.mo-stat.completed{ background:#e2f5ea; border-color:#b7e6c9; color:#0f7a3f; }
.mo-stat.failed{ background:#ffe6ec; border-color:#f3b7c6; color:#c81e4d; }
.chat-avatar{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(160deg,#7a35c7,#4c1480); display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:11px; line-height:1;
}
.chat-avatar svg{ width:10px; height:10px; }

/* Light-theme readability -- the site defaults to body.light-mode, so
   every one of the blocks above (written for the dark theme) needs an
   explicit light counterpart or it renders as low-contrast mud. */
/* Was a flat white card with a plain orange clock -- give it the same
   golden+purple glass treatment already established for the Final
   Preview box, so the order-status screen doesn't look like a plainer,
   unfinished cousin of the page right before it. */
body.light-mode .order-status-card{
  position:relative;
  background:linear-gradient(160deg,rgba(255,251,240,.92),rgba(233,215,255,.75));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:2px solid rgba(212,168,67,.65);
  box-shadow:0 0 0 4px rgba(168,124,224,.22), 0 18px 40px rgba(93,72,137,.22), inset 0 1px rgba(255,255,255,.85);
  color:#372b52;
  overflow:hidden;
}
body.light-mode .order-status-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,transparent,#d4a843,#a87ce0,transparent);
  box-shadow:0 0 10px rgba(212,168,67,.55),0 0 20px rgba(168,124,224,.50);
}
body.light-mode .order-status-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:76px; height:76px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(233,215,255,.45));
  box-shadow:0 0 0 6px rgba(168,124,224,.14), 0 8px 22px rgba(93,72,137,.20);
}
body.light-mode .order-status-icon .status-icon-svg{ width:38px; height:38px; }
body.light-mode .order-status-title{ color:#372b52; }
body.light-mode .order-status-sub,
body.light-mode .order-status-hint{ color:#6b5f85; }
body.light-mode .order-status-sub b{ color:#372b52; }
body.light-mode .status-step-dot{
  background:rgba(255,255,255,.85); border-color:rgba(168,124,224,.35); color:#6b5f85;
  box-shadow:0 2px 8px rgba(93,72,137,.12);
}
body.light-mode .status-step.current .status-step-dot{
  background:linear-gradient(135deg,#d4a843,#a87ce0); border-color:transparent; color:#fff;
  box-shadow:0 0 0 4px rgba(168,124,224,.20), 0 0 16px rgba(212,168,67,.45);
}
body.light-mode .status-step.done .status-step-dot{
  background:linear-gradient(135deg,#3ec98b,#7ee6b8); border-color:transparent; color:#0a2e1c;
  box-shadow:0 0 12px rgba(62,201,139,.40);
}
body.light-mode .status-step-line.done{ background:linear-gradient(90deg,#3ec98b,#7ee6b8); }
body.light-mode .chat-empty{ color:var(--muted,#6b7686); }
body.light-mode .my-orders-btn{
  color:var(--ink,#1f2937);
  background:var(--surface,#fff);
  border-color:var(--border,rgba(31,41,55,.16));
}
body.light-mode .my-order-row{
  background:var(--surface,#fff);
  border-color:var(--border,rgba(31,41,55,.14));
}
body.light-mode .my-order-row .moc{ color:var(--ink,#1f2937); }
body.light-mode .my-order-row .mol{ color:var(--muted,#6b7686); }
body.light-mode .my-order-row .mo-amount{ color:var(--ink,#1f2937); }

/* Payment popup: explicit Copy + Close buttons instead of tap-anywhere */
.payment-quick-actions{ display:flex; gap:8px; margin-top:10px; }
.pq-btn{
  flex:1; padding:8px 10px; border-radius:10px; border:1px solid rgba(224,180,255,.32);
  background:rgba(255,255,255,.10); color:#fff; font-size:11px; font-weight:800; cursor:pointer;
}
.pq-btn:hover{ background:rgba(255,255,255,.18); }
body.light-mode .pq-btn{ background:var(--surface,#fff); color:var(--ink,#1f2937); border-color:var(--border,rgba(31,41,55,.18)); }

/* Payment-slip upload */
.slip-upload-box{ margin-top:10px; }
.slip-upload-label{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-radius:12px; border:1.5px dashed rgba(224,180,255,.4);
  background:rgba(255,255,255,.05); color:var(--muted,rgba(255,255,255,.74));
  font-size:12px; font-weight:700; cursor:pointer; text-align:center;
}
.slip-upload-label:hover{ border-color:rgba(224,180,255,.7); }
body.light-mode .slip-upload-label{ border-color:var(--border-strong,rgba(31,41,55,.2)); color:var(--muted,#6b7686); background:var(--surface-2,#f7f9fc); }
.slip-preview{ margin-top:8px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted,rgba(255,255,255,.74)); }
.slip-preview img{ width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid rgba(224,180,255,.3); }
.slip-preview .slip-remove{ color:#ff9fc9; cursor:pointer; font-weight:800; font-size:11px; }
/* Attach animation: preview pops in, box flashes a soft success ring */
@keyframes slipPopIn{ from{ opacity:0; transform:translateY(10px) scale(.92); } to{ opacity:1; transform:none; } }
.slip-preview.slip-pop{ animation:slipPopIn .38s cubic-bezier(.3,1.25,.5,1); }
@keyframes slipBoxFlash{ 0%{ box-shadow:0 0 0 0 rgba(30,122,60,0); } 30%{ box-shadow:0 0 0 4px rgba(30,122,60,.35); } 100%{ box-shadow:0 0 0 0 rgba(30,122,60,0); } }
.slip-upload-box.slip-flash{ animation:slipBoxFlash .7s ease; border-radius:12px; }

/* Login / Sign up */
.auth-header-actions{ display:flex; gap:6px; align-items:center; }
.auth-btn{
  border:1px solid rgba(224,180,255,.32); background:rgba(255,255,255,.08); color:#fff;
  font-size:10px; font-weight:800; padding:7px 11px; border-radius:20px; cursor:pointer;
}
body.light-mode .auth-btn{ color:var(--ink,#1f2937); background:var(--surface,#fff); border-color:var(--border,rgba(31,41,55,.16)); }
.auth-modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(circle at 50% 38%,rgba(150,130,220,.28),rgba(60,40,95,.30));
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.auth-modal-backdrop.hidden{ display:none; }
/* Bright glass card with a springy 3D pop-in and a thin animated glow that
   traces the card's own border -- an earlier version put a giant spinning
   sunburst disc behind the whole card (inset:-70px, border-radius:50%),
   which read as messy and was distracting while typing in the fields.
   This keeps the light confined to a slim ring right on the edge instead. */
.auth-modal{
  position:relative;
  width:min(360px,100%); color:var(--ink,#1f2937);
  border-radius:22px; padding:26px 22px; border:1.5px solid rgba(124,58,237,.30);
  background:linear-gradient(165deg,rgba(255,255,255,.97),rgba(245,241,255,.94));
  backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 30px 70px rgba(93,72,137,.22), 0 0 0 4px rgba(124,58,237,.10), inset 0 1px rgba(255,255,255,.95);
  animation:authModalPop .55s cubic-bezier(.34,1.56,.64,1) both;
  transform-style:preserve-3d;
  isolation:isolate;
}
@property --auth-glow-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.auth-modal::before{
  content:""; position:absolute; inset:-2px; border-radius:24px; padding:2px;
  background:conic-gradient(from var(--auth-glow-angle),
    transparent 0deg, rgba(124,58,237,.9) 40deg, rgba(199,178,255,.95) 70deg,
    rgba(124,58,237,.9) 100deg, transparent 150deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:authBorderGlow 3.4s linear infinite;
  pointer-events:none;
}
@keyframes authBorderGlow{ to{ --auth-glow-angle:360deg; } }
@keyframes authModalPop{
  0%{ opacity:0; transform:perspective(800px) translateY(26px) scale(.90) rotateX(9deg); }
  100%{ opacity:1; transform:perspective(800px) translateY(0) scale(1) rotateX(0); }
}
@media(prefers-reduced-motion:reduce){ .auth-modal{ animation:none; } .auth-modal::before{ animation:none; } }
.auth-modal h3{ margin:0 0 4px; font-size:18px; }
.auth-modal p.auth-sub{ font-size:12px; color:var(--muted,rgba(255,255,255,.7)); margin:0 0 16px; }

/* Signup's "check your email" step -- a real milestone (the account can't
   be used until that link is opened), so it gets the same golden+purple
   glass treatment as the rest of the site's premium moments instead of
   sharing the plain login-form chrome. */
.auth-modal-icon{
  width:64px; height:64px; margin:2px auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(233,215,255,.55));
  box-shadow:0 0 0 6px rgba(168,124,224,.16), 0 10px 26px rgba(93,72,137,.24);
  color:#a87ce0;
  animation:authIconPop .45s cubic-bezier(.23,1,.32,1) both;
}
.auth-modal-icon.hidden{ display:none; }
.auth-modal-icon svg{ width:30px; height:30px; }
.auth-modal-icon img{ width:40px; height:40px; object-fit:contain; }
@keyframes authIconPop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
.auth-modal.celebrate{
  border:2px solid rgba(212,168,67,.55);
  box-shadow:0 0 0 5px rgba(168,124,224,.16), 0 22px 54px rgba(93,72,137,.30);
  text-align:center;
}
body.light-mode .auth-modal.celebrate{
  background:linear-gradient(160deg,rgba(255,251,240,.97),rgba(240,230,255,.92));
}
.auth-modal.celebrate #authModalTitle{ color:#372b52; }
.auth-modal.celebrate .auth-sub{ color:#6b5f85; }
.auth-field{ position:relative; margin-bottom:12px; }
.auth-field-icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted,rgba(255,255,255,.5)); pointer-events:none;
}
.auth-modal input{
  width:100%; padding:13px 14px 13px 40px; border-radius:13px; margin-bottom:0;
  border:1.5px solid rgba(224,180,255,.28); background:rgba(0,0,0,.22); color:#fff; font-size:14px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.auth-modal input:focus{
  outline:none; border-color:#b86bff; transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(184,107,255,.20), 0 6px 16px rgba(93,72,137,.22), inset 0 1px 3px rgba(0,0,0,.10);
}
body.light-mode .auth-modal input{
  background:rgba(255,255,255,.65); color:var(--ink,#1f2937); border-color:rgba(212,168,67,.30);
  box-shadow:inset 0 1px 3px rgba(93,72,137,.10), inset 0 -1px 0 rgba(255,255,255,.7);
}
body.light-mode .auth-field-icon{ color:var(--muted,#6b7686); }
#authPasswordField input, #authNewPasswordField input{ padding-right:40px; }
.auth-field-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; padding:0; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--muted,rgba(255,255,255,.5)); cursor:pointer;
}
.auth-field-toggle svg{ width:16px; height:16px; }
.auth-field-toggle:hover{ color:#fff; }
body.light-mode .auth-field-toggle{ color:var(--muted,#6b7686); }
body.light-mode .auth-field-toggle:hover{ color:var(--ink,#1f2937); }
.auth-error{ color:#ff9fc9; font-size:12px; min-height:16px; margin-bottom:6px; }
.auth-field-icon{ font-size:14px; font-weight:800; line-height:16px; text-align:center; }
/* Telegram link modal -- the pending/linked states show a plain status
   pill instead of an input, since there's nothing left to type once a
   username has been submitted. */
.telegram-link-status{
  display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:14px;
  border-radius:13px; font-size:14px; font-weight:700;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(224,180,255,.22); color:#fff;
}
.telegram-link-status svg{ width:20px; height:20px; flex:0 0 auto; }
.telegram-link-status.pending{ color:#ffd479; }
.telegram-link-status.pending svg{ color:#ffd479; }
.telegram-link-status.linked{ color:#6dffbd; }
.telegram-link-status.linked svg{ color:#6dffbd; }
body.light-mode .telegram-link-status{ background:rgba(255,255,255,.7); border-color:rgba(212,168,67,.28); color:var(--ink,#1f2937); }
.auth-btn-danger{
  width:100%; padding:13px 14px; border-radius:13px; border:1.5px solid rgba(255,110,150,.4);
  background:rgba(255,79,120,.12); color:#ff8fae; font-size:14px; font-weight:800; cursor:pointer;
  transition:background .15s, transform .15s;
}
.auth-btn-danger:hover{ background:rgba(255,79,120,.22); }
.auth-btn-danger:active{ transform:scale(.98); }
body.light-mode .auth-btn-danger{ background:#fee2e2; border-color:#f3c6c6; color:#dc2626; }
body.light-mode .auth-btn-danger:hover{ background:#fecdd3; }
/* Tactile press for the submit button -- lifts on hover, presses down on
   click, instead of sitting flat like a static label. */
.auth-modal #authSubmitBtn{ transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease; }
.auth-modal #authSubmitBtn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(93,72,137,.28); }
.auth-modal #authSubmitBtn:active{ transform:translateY(0) scale(.97); }
.auth-forgot-row{ text-align:right; margin:-4px 0 12px; }
.auth-forgot-row a{ color:#b86bff; font-size:11.5px; font-weight:700; cursor:pointer; }
.auth-forgot-row.hidden{ display:none; }
.auth-switch{ text-align:center; font-size:12px; color:var(--muted,rgba(255,255,255,.7)); margin-top:14px; }
.auth-switch a{ color:#b86bff; font-weight:800; cursor:pointer; }
.auth-close{ float:right; cursor:pointer; font-size:18px; color:var(--muted,rgba(255,255,255,.6)); }

/* Icons -- inline SVG instead of emoji, sized to sit inline with text */
.btn-icon{ width:15px; height:15px; vertical-align:-2.5px; margin-right:5px; }
.news-btn-icon{ object-fit:contain; border-radius:3px; }
.account-btn-icon{ object-fit:contain; }
.status-icon-svg{ width:46px; height:46px; margin-bottom:8px; }
.status-icon-svg.pending{ color:#e0a83c; }
.status-icon-svg.approved{ color:#3ec98b; }
.status-icon-svg.rejected{ color:#ff8fae; }
body.light-mode .status-icon-svg.pending{ color:#d97706; }
body.light-mode .status-icon-svg.approved{ color:#16a34a; }
body.light-mode .status-icon-svg.rejected{ color:#dc2626; }
/* Noti hub: a full page (same .news-feed-overlay shell as News) listing
   Notice/My Orders/Message as rows -- replaces the old dropdown menu. */
.noti-hub-list{ display:flex; flex-direction:column; gap:10px; }
.noti-hub-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px; border-radius:16px; border:1px solid var(--border,rgba(43,38,30,.12));
  background:var(--surface,#fffdf8); cursor:pointer; text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
}
.noti-hub-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm,0 4px 14px rgba(43,35,20,.08)); }
.noti-hub-icon{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:12px; color:#7c3aed;
  background:rgba(124,58,237,.10);
}
.noti-hub-icon svg{ width:19px; height:19px; }
.noti-hub-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.noti-hub-text strong{ font-size:14px; font-weight:850; color:var(--ink,#2b2621); }
.noti-hub-text small{ font-size:11.5px; font-weight:600; color:var(--muted,#786f63); }
.noti-hub-row .notif-badge{ position:static; flex:0 0 auto; }
.noti-hub-chevron{ width:16px; height:16px; color:var(--muted,#786f63); flex:0 0 auto; }

/* Small "you got a code" popup, shown instead of navigating straight to the
   full Notice list -- body-reparented (see the JS) so it isn't clipped by
   .compact-header's overflow:hidden. */
.notice-code-popup{ position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-start; justify-content:center; padding-top:78px; background:rgba(8,6,18,.45); backdrop-filter:blur(2px); }
.notice-code-popup.hidden{ display:none; }
.notice-code-card{
  position:relative; overflow:hidden;
  width:min(320px,calc(100vw - 32px)); padding:16px; border-radius:16px;
  background:rgba(18,14,38,.98); border:1px solid rgba(199,125,255,.35);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  animation:noticeCodeIn .28s cubic-bezier(.23,1,.32,1) both;
}
/* Confetti burst for a coupon-code notice -- empty/no pieces for a plain
   announcement, so it costs nothing when there's nothing to celebrate. */
.confetti-burst{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.confetti-piece{
  position:absolute; top:-12px; width:7px; height:13px; opacity:.95; border-radius:1px;
  animation:confettiFall 1.6s cubic-bezier(.36,.66,.64,1) forwards;
}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(280px) rotate(var(--rot,220deg)); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .confetti-piece{ animation:none; display:none; } }
@keyframes noticeCodeIn{ from{ opacity:0; transform:translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } }
.notice-code-title{ font-size:14px; font-weight:900; color:#fff; margin-bottom:6px; }
.notice-code-body{ font-size:12.5px; line-height:1.6; color:#d6c9ff; word-break:break-word; white-space:pre-wrap; max-height:46vh; overflow-y:auto; }
.notice-code-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.notice-code-btn{
  flex:1 1 auto; padding:9px 10px; border-radius:10px; border:none; cursor:pointer;
  font-size:11.5px; font-weight:800; background:linear-gradient(135deg,#7b2cff,#c24dff); color:#fff;
}
.notice-code-btn.ghost{ background:rgba(255,255,255,.08); color:#d6c9ff; }
body.light-mode .notice-code-card{ background:#fff; border-color:var(--border,rgba(31,41,55,.16)); box-shadow:0 20px 44px rgba(20,20,43,.18); }
body.light-mode .notice-code-title{ color:var(--ink,#1f2937); }
body.light-mode .notice-code-body{ color:var(--muted,#4b5563); }
body.light-mode .notice-code-btn.ghost{ background:rgba(124,58,237,.08); color:var(--ink,#1f2937); }

/* ===== coupon-apply-ui ===== */
/* A soft gold trim around the order summary -- makes it read as a real
   receipt card instead of a loose stack of rows. */
.summary{
  border:1px solid rgba(212,168,67,.42) !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  background:linear-gradient(180deg,rgba(212,168,67,.07),transparent 60%) !important;
  box-shadow:0 0 0 1px rgba(212,168,67,.12), 0 10px 24px rgba(0,0,0,.28) !important;
}
body.light-mode .summary{
  background:linear-gradient(180deg,rgba(212,168,67,.06),transparent 60%) !important;
  box-shadow:0 0 0 1px rgba(212,168,67,.14), 0 8px 18px rgba(80,60,10,.08) !important;
}
.checkout-hint{
  display:none; font-size:11.5px; font-weight:800; margin-top:7px;
  color:#ff9fc9;
}
.checkout-hint.show{ display:block; }
body.light-mode .checkout-hint{ color:#c81e4d; }
.coupon-discount-line span:last-child{ color:#7de8b3; font-weight:800; }
.coupon-apply-row{ display:flex; gap:8px; }
.coupon-apply-row input{ flex:1; }
.coupon-apply-btn{
  flex:0 0 auto; padding:0 18px; border-radius:12px; border:1px solid rgba(199,125,255,.32);
  background:rgba(255,255,255,.08); color:#fff; font-weight:800; font-size:12.5px; cursor:pointer; transition:.15s;
}
.coupon-apply-btn:hover{ background:rgba(255,255,255,.16); }
.coupon-apply-btn:disabled{ opacity:.5; cursor:not-allowed; }
.coupon-msg{ font-size:11.5px; margin-top:6px; min-height:14px; }
.coupon-msg.success{ color:#7de8b3; }
.coupon-msg.error{ color:#ff9fc9; }
body.light-mode .coupon-apply-btn{ background:var(--surface,#fff); color:var(--ink,#1f2937); border-color:var(--border,rgba(31,41,55,.18)); }

/* ===== News feed (editorial: featured story + article grid, read-only) ===== */
body.news-feed-open{ overflow:hidden; }
/* Outer layer is a plain, non-scrolling fixed backdrop -- forcing its own
   overflow:auto scroll on a position:fixed element is what let page
   content underneath show through during scroll on some mobile browsers.
   translateZ(0) forces its own compositing layer as extra insurance
   against the same class of bug. Only the inner .news-feed-list scrolls. */
.news-feed-overlay{
  position:fixed; inset:0; z-index:6000;
  background:var(--page-bg,#f6efe2);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateZ(0); -webkit-transform:translateZ(0);
}
.news-feed-overlay.hidden{ display:none; }
.news-feed-header{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:var(--surface,#fffdf8);
  border-bottom:1px solid var(--border,rgba(43,38,30,.12));
  box-shadow:var(--shadow-sm,0 2px 10px rgba(43,35,20,.07));
}
.news-feed-back{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; border:1px solid var(--border-strong,rgba(43,38,30,.20));
  background:var(--surface-2,#fbf6ec); color:var(--ink,#2b2621); cursor:pointer; flex:0 0 auto;
  transition:background .15s;
}
.news-feed-back:hover{ background:var(--border,rgba(43,38,30,.12)); }
.news-feed-back svg{ width:18px; height:18px; }
/* Masthead: the site's own logo + a two-tone wordmark + a one-line
   tagline -- reads as a branded news outlet header (CNN/NBC-style)
   rather than a generic "News" label, while staying compact (single
   row, small type) so it doesn't eat into reading space. */
.news-feed-brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.news-feed-logo{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; }
.news-feed-wordmark{
  font-size:15.5px; font-weight:900; color:var(--ink,#2b2621); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.news-feed-wordmark span{
  background:linear-gradient(135deg,#7650b8,#9470d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.news-feed-tagline{
  font-size:10px; font-weight:700; color:var(--muted,#786f63);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.news-feed-list, .news-detail{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  width:100%; padding:16px 16px 60px;
}
.news-detail.hidden{ display:none; }
.news-feed-empty{ text-align:center; color:var(--muted,#786f63); font-size:13.5px; padding:60px 16px; }
/* ===== News: Figma "User greeting" newsroom ("Gamepay Hub NEWS") =====
   Classic newsroom front page. Sharp corners everywhere (only the
   Positive/Negative reaction buttons get an 8px radius). Hairline
   dividers instead of cards. Roboto Condensed headlines, Source Sans 3
   body (Noto Sans Myanmar fallback covers Burmese text). Scoped .np-* so
   the shared .news-feed-overlay shell (also used by the noti hub) is
   untouched. */
.np-topbar{ flex:0 0 auto; background:#fff; border-top:3px solid #bf2430; }
.np-masthead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:1200px; margin:0 auto; padding:14px 16px 12px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
}
.np-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.np-wordmark{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:800;
  font-size:40px; line-height:1; color:#202127; letter-spacing:-.01em;
  white-space:nowrap;
}
.np-news-badge{
  background:#bf2430; color:#fff; font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif;
  font-weight:800; font-size:12px; letter-spacing:.12em; padding:6px 8px; line-height:1;
}
.np-news-badge.sm{ font-size:11px; padding:4px 6px; }
.np-masthead-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.np-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:none;
  background:none; color:#202127; cursor:pointer;
}
.np-icon-btn svg{ width:24px; height:24px; }
/* Beautiful Back pill (News -> Main) */
.np-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:8px 18px 8px 14px;
  background:#fff; color:#202127;
  border:1px solid #e2ded6; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.np-back-btn svg{ width:17px; height:17px; transition:transform .18s ease; }
.np-back-btn:hover{
  transform:translateY(-1px);
  border-color:#bf2430; color:#bf2430;
  box-shadow:0 6px 16px rgba(191,36,48,.14);
}
.np-back-btn:hover svg{ transform:translateX(-3px); }
.np-back-btn:active{ transform:translateY(0) scale(.97); }
.np-searchbar{
  display:flex; gap:8px; max-width:1200px; margin:0 auto; padding:0 16px 12px;
}
.np-searchbar.hidden{ display:none; }
.np-searchbar input{
  flex:1; min-height:44px; padding:0 14px; font-size:15px;
  border:1px solid #d5d1db; background:#fff; color:#202127; font-family:inherit;
}
.np-searchbar button{
  min-height:44px; padding:0 16px; border:1px solid #d5d1db; background:#f7f7f8;
  font-size:14px; font-weight:600; color:#202127; cursor:pointer;
}
.np-tabs{
  display:flex; gap:16px; align-items:stretch; overflow-x:auto;
  background:#18191d; padding:0 16px; scrollbar-width:none;
}
.np-tabs::-webkit-scrollbar{ display:none; }
.np-tab{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  min-height:48px; padding:0 4px; background:none; border:none;
  border-bottom:3px solid transparent; color:#fff;
  font-size:16px; font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
}
.np-tab svg{ width:16px; height:16px; }
.np-tab:hover{ color:#fff; }
.np-tab.active{ color:#fff; border-bottom-color:#ed3e4c; }
/* The theme forces `body.light-mode button{color:#173d5b!important}` (dark
   navy) on EVERY button -- that turns the tab labels, footer links and red
   accents dark-on-black / wrong. Restore the newsroom colors explicitly. */
body.light-mode .np-tab{ color:#fff !important; }
body.light-mode .np-tab:hover{ color:#fff !important; }
body.light-mode .np-icon-btn{ color:#202127 !important; }
body.light-mode .np-searchbar button{ color:#202127 !important; }
body.light-mode .np-footer-links button{ color:#e8e8ea !important; }
body.light-mode .np-detail-back{ color:#b72131 !important; }
body.light-mode .np-byline-actions button{ color:#b72131 !important; }
body.light-mode .np-save-btn{ color:#59606d !important; }
body.light-mode .np-save-btn.saved{ color:#b72131 !important; }
body.light-mode .np-empty-cta{ color:#b72131 !important; }
body.light-mode .np-headlines-more{ color:#b72131 !important; }
body.light-mode .np-reaction-btn{ color:#353840 !important; }
body.light-mode .np-reaction-btn.selected{ color:#b72131 !important; }
/* Scrollable list area (keeps .news-feed-list flex/scroll behavior). */
.np-list{ background:#fff; }
.np-section-head{
  max-width:1200px; margin:0 auto; padding:20px 16px 12px;
  border-bottom:2px solid #222329;
}
.np-section-head h1, .np-more-head h2{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  color:#202127; margin:0; line-height:1.15;
}
.np-section-head h1{
  font-size:32px; border-left:4px solid #bf2430; padding-left:10px;
}
.np-section-sub{ font-size:13px; color:#505560; white-space:nowrap; }
.np-more-head{
  max-width:1200px; margin:0 auto; padding:24px 16px 0;
  display:flex; align-items:center; gap:16px;
}
.np-more-head h2{ font-size:26px; white-space:nowrap; }
.np-more-rule{ flex:1; height:1px; background:#d8d5dc; min-width:24px; }
.np-top{ max-width:1200px; margin:0 auto; padding:0 16px; }
.np-top-main{ padding:28px 0; border-bottom:1px solid #cfcbd6; }
/* Featured hero: stacked -- headline block first, full-width image below. */
.np-hero{ cursor:pointer; }
.np-hero-title{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:36px; line-height:1.15; color:#202127; margin:0 0 12px; max-width:800px;
}
.np-hero-excerpt{ font-size:18px; line-height:1.55; color:#404550; margin:0 0 14px; max-width:800px; }
.np-meta{
  display:flex; align-items:center; gap:8px;
  font-size:15px; color:#505560;
}
.np-meta-sep{ opacity:.5; }
.np-read-link{
  display:inline-flex; align-items:center; min-height:44px; margin:12px 0 20px;
  font-size:16px; font-weight:700; color:#b72131;
}
.np-hero-imgwrap{ position:relative; background:#f5f5f6; }
.np-hero-img{ display:block; width:100%; max-height:520px; object-fit:contain; }
.np-hero-expand{
  position:absolute; right:12px; bottom:12px;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:#fff; border:1px solid #e2e3e7; color:#202127;
}
.np-hero-expand svg{ width:20px; height:20px; }
/* Headlines sidebar: desktop only. */
.np-headlines{ display:none; }
.np-grid{
  max-width:1200px; margin:0 auto; padding:8px 16px 0;
  display:grid; gap:28px; grid-template-columns:1fr;
}
/* Flat cards: no box, no shadow, no radius -- hairline separated. */
.np-card{ border-bottom:1px solid #dedee3; padding-bottom:20px; cursor:pointer; }
.np-card-imgwrap{ background:#f5f4f1; margin-bottom:12px; }
.np-card-img{ display:block; width:100%; aspect-ratio:16/10; object-fit:contain; }
.np-card-title{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:28px; line-height:1.2; color:#202127; margin:0 0 4px;
}
.np-card:hover .np-card-title{ text-decoration:underline; text-decoration-color:#d75059; text-underline-offset:4px; }
.np-card-excerpt{ font-size:17px; line-height:1.75; color:#404550; margin:12px 0 0; }
.np-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:16px; }
.np-save-btn{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; border:none; background:none; color:#59606d; cursor:pointer;
}
.np-save-btn svg{ width:20px; height:20px; }
.np-save-btn:hover{ background:#f4f4f5; }
.np-save-btn.saved{ color:#b72131; }
/* Empty states. */
.np-empty{ max-width:1200px; margin:0 auto; padding:48px 16px 64px; text-align:center; }
.np-empty-title{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:28px; color:#202127; margin:0 0 10px;
}
.np-empty-text{ font-size:16px; color:#505560; margin:0 0 18px; }
.np-empty-cta{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  font-size:14px; font-weight:700; color:#b72131; background:none;
  border:1px solid #e2c4c7; cursor:pointer;
}
/* Footer. */
.np-footer{
  margin-top:40px; background:#18191d; border-top:3px solid #bf2430;
  padding:28px 16px 40px; color:#c2c3cb;
}
.np-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.np-footer-logo{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif;
  font-weight:800; font-size:28px; color:#fff;
}
.np-footer-links{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px; }
.np-footer-links button, .np-footer-links a{
  background:none; border:none; padding:0; color:#e8e8ea; font-size:14px;
  font-weight:600; cursor:pointer; text-decoration:none; min-height:44px;
  font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
}
.np-footer-note{ font-size:13px; line-height:1.7; color:#c2c3cb; margin:0; }
/* ---- Detail view ---- */
.np-detail{ background:#fff; }
.np-detail-back{
  display:flex; align-items:center; gap:6px; min-height:44px;
  max-width:850px; margin:0 auto; padding:12px 16px 0; width:100%;
  background:none; border:none; color:#b72131; font-size:14px; font-weight:600; cursor:pointer;
  font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
}
.np-detail-back-bottom{ padding-bottom:48px; }
.np-article{ max-width:850px; margin:0 auto; padding:8px 16px 0; }
.np-article-title{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:36px; line-height:1.15; color:#202127; margin:8px 0 12px;
}
.np-standfirst{ font-size:18px; line-height:1.75; color:#404550; margin:0 0 18px; max-width:760px; }
.np-byline{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid #dedde3; border-bottom:1px solid #dedde3; padding:12px 0; margin-bottom:20px;
}
.np-byline-who{ display:flex; flex-direction:column; gap:3px; }
.np-byline-who strong{ font-size:16px; color:#202127; }
.np-byline-who span{ font-size:13px; color:#505560; }
.np-byline-actions{ display:flex; gap:8px; }
.np-byline-actions button{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px;
  background:none; border:1px solid #e2e3e7; color:#b72131;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
}
.np-byline-actions button svg{ width:16px; height:16px; }
.np-byline-actions button.saved{ color:#b72131; border-color:#eec3c6; background:#fdf3f3; }
.np-figure{ margin:0 0 8px; }
.np-figure-imgwrap{ background:#f5f5f6; padding:12px; }
.np-figure-img{ display:block; width:100%; max-height:320px; object-fit:contain; }
.np-figcaption{ font-size:13px; color:#505560; padding:8px 2px 0; }
.np-extra-images{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; }
.np-extra-img{ height:92px; width:auto; max-width:150px; object-fit:contain; background:#f5f5f6; flex:0 0 auto; }
.np-article-body{
  font-size:18px; line-height:1.8; color:#30323a; white-space:pre-wrap; word-break:break-word;
  max-width:700px; margin:16px 0 0;
}
.np-note-callout{
  border-left:2px solid #c83342; background:#faf6f6; color:#695b60;
  font-size:13px; line-height:1.85; padding:12px 14px; margin:20px 0 0; max-width:700px;
}
.np-source{ border-top:1px solid #dedde3; margin-top:28px; padding-top:18px; max-width:700px; }
.np-source h2{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:16px; color:#202127; margin:0 0 10px;
}
.np-source-text{ font-size:16px; color:#404550; margin:0 0 10px; }
.np-source-link{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:15px; font-weight:700; color:#b72131; text-decoration:underline;
  text-underline-offset:3px;
}
.np-source-link svg{ width:15px; height:15px; }
.np-reactions{ border-top:1px solid #dedde3; border-bottom:1px solid #dedde3; margin-top:28px; padding:24px 0; max-width:700px; }
.np-reactions h2{
  font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-weight:700;
  font-size:28px; color:#202127; margin:0 0 6px;
}
.np-reactions-sub{ font-size:16px; color:#505560; margin:0 0 16px; }
.np-reaction-btns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.np-reaction-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:76px; padding:12px; background:#fff; border:2px solid #e2e3e7; border-radius:8px;
  font-size:16px; font-weight:700; color:#353840; cursor:pointer;
  font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
}
.np-reaction-btn svg{ width:22px; height:22px; }
.np-reaction-btn:hover{ border-color:#9398a2; background:#f7f7f8; }
.np-reaction-btn.selected{ border-color:#b72131; background:#fdf3f3; color:#b72131; }
.np-reaction-status{ font-size:14px; font-weight:600; color:#30323a; margin:14px 0 6px; }
.np-reaction-note{ font-size:13px; color:#505560; margin:0; }
/* ---- Responsive: sm+ ---- */
@media(min-width:640px){
  .np-masthead{ padding-left:24px; padding-right:24px; }
  .np-wordmark{ font-size:44px; }
  .np-news-badge{ font-size:13px; }
  .np-tabs{ gap:32px; padding:0 24px; }
  .np-section-head, .np-more-head, .np-top, .np-grid, .np-empty{ padding-left:24px; padding-right:24px; }
  .np-hero-title{ font-size:40px; }
  .np-grid{ grid-template-columns:1fr 1fr; }
  .np-article-title{ font-size:50px; }
  .np-figure-img{ max-height:420px; }
  .np-footer{ padding-left:24px; padding-right:24px; }
}
@media(min-width:1024px){
  .np-top{ display:grid; grid-template-columns:1fr 260px; gap:32px; }
  .np-top-main{ border-bottom:none; }
  .np-headlines{
    display:block; border-left:1px solid #dedbe4; padding:12px 0 0 24px; margin:28px 0;
  }
  .np-headlines-title{ font-size:16px; font-weight:700; color:#202127; margin:0 0 6px; }
  .np-headline-row{
    display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
    background:none; border:none; border-bottom:1px solid #e8e4ec;
    padding:16px 0; cursor:pointer; font-family:inherit;
  }
  .np-headline-num{
    font-family:"Roboto Condensed","Noto Sans Myanmar",sans-serif; font-size:20px;
    color:#a4a5ad; flex:0 0 auto; line-height:1.25;
  }
  .np-headline-title{ font-size:19px; font-weight:700; line-height:1.25; color:#202127; }
  .np-headline-row:hover .np-headline-title{ text-decoration:underline; text-decoration-color:#d75059; text-underline-offset:3px; }
  .np-headlines-more{
    display:inline-flex; align-items:center; gap:7px; margin-top:14px; min-height:44px;
    background:none; border:none; color:#b72131; font-size:14px; font-weight:600; cursor:pointer;
    font-family:"Source Sans 3","Noto Sans Myanmar",sans-serif;
  }
  .np-headlines-more svg{ width:15px; height:15px; }
  .np-grid{ grid-template-columns:1fr 1fr 1fr; }
  .np-hero-title{ font-size:44px; }
}
/* Mobile compactness: single column, tight rhythm, hairlines do the work. */
@media(max-width:480px){
  .np-masthead{ padding:10px 12px 10px; padding-top:calc(10px + env(safe-area-inset-top,0px)); gap:8px; }
  .np-wordmark{ font-size:30px; }
  .np-icon-btn{ width:40px; height:40px; }
  .np-icon-btn svg{ width:22px; height:22px; }
  .np-section-head h1{ font-size:26px; }
  .np-section-head{ padding:16px 12px 10px; }
  .np-top, .np-grid, .np-empty{ padding-left:12px; padding-right:12px; }
  .np-more-head{ padding:20px 12px 0; }
  .np-more-head h2{ font-size:22px; }
  .np-top-main{ padding:20px 0; }
  .np-hero-title{ font-size:28px; }
  .np-hero-excerpt{ font-size:16px; }
  .np-card-title{ font-size:22px; }
  .np-card-excerpt{ font-size:15px; }
  .np-grid{ gap:20px; }
  .np-article-title{ font-size:30px; }
  .np-article{ padding-left:12px; padding-right:12px; }
  .np-detail-back{ padding-left:12px; }
  .np-standfirst{ font-size:16px; }
  .np-article-body{ font-size:16px; }
  .np-searchbar{ padding:0 12px 10px; }
  .np-footer{ padding:24px 12px 36px; }
}
body.light-mode .coupon-discount-line span:last-child{ color:#0f7a3f; }

/* ===== professional-polish: payment trust bar + why-choose icons ===== */
/* Real icon glyphs instead of tiny text-badge abbreviations ("EDU",
   "PAY", "LIVE"), sized up so they read as actual feature icons. */
.store-info-icon{ flex:0 0 46px !important; height:46px !important; border-radius:14px !important; }
.store-info-icon svg{ width:22px; height:22px; }
.store-info-card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.store-info-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(58,40,110,.12);
}

/* A small trust caption above the payment badges, and the two badge
   groups sit side by side on desktop instead of stacking in a narrow
   right-hand column with lots of empty space next to it. */
.lp-paybar-heading{
  display:flex; align-items:center; gap:6px;
  width:100%; margin:0 0 2px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em;
  color:#4B3B78;
}
.lp-paybar-heading svg{ width:14px; height:14px; flex:0 0 14px; }
.lp-paybar .pay-mark{ transition:transform .15s ease, box-shadow .15s ease; }
.lp-paybar .pay-mark:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(58,40,110,.16) !important; }
.lp-paybar .pay-mark.currency-mark:hover{ box-shadow:none !important; }

@media(min-width:981px){
  .lp-brandstrip{ grid-template-columns:auto minmax(0,1fr) !important; }
  .lp-paybar{
    grid-column:1 / -1 !important;
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; gap:10px 28px !important;
    justify-items:initial !important;
    margin-top:14px !important; padding-top:14px !important;
    border-top:1px solid rgba(36,28,60,.08) !important;
  }
  .lp-paybar-heading{ width:auto; flex:1 0 100%; margin-bottom:4px; }
  .lp-paygroup{ display:flex !important; align-items:center !important; gap:10px !important; }
  .lp-paygroup-sell{
    width:auto !important; padding-top:0 !important; border-top:none !important;
    padding-left:24px !important; border-left:1px solid rgba(36,28,60,.09) !important;
  }
  .lp-paybar .lp-brand-label{ white-space:nowrap; }
  .lp-paybar .pay-mark{ width:50px !important; height:36px !important; }
  .lp-paybar .pay-mark.pay-wide{ width:58px !important; }
}

/* The carousel banners already carry the Gamepay Hub logo and "Digital
   Premium Store" branding, so the big "The digital store of GAMEPAY HUB"
   headline underneath just repeats it. Keep the h1 for SEO/screen readers
   but drop it out of the visual layout entirely. */
.lp-hero .lp-wordmark-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* ===== auto-scrolling ticker (Hot Products in the hero, Discount strip on
   the catalog page) -- not scoped to .lp-hero since a second one now lives
   outside it, on the products page. ===== */
.lp-hot-label{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:#6B54A8; text-align:center;
}
.lp-hot-flame{
  display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(232,56,79,.35));
}
.lp-hot-flame svg{ width:100%; height:100%; }
.lp-hot{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* .lp-hot-track also carries the real .products class so every card inside
   gets the exact same catalog styling (HOT flag, stock dot, price, Buy now
   button) for free -- this just overrides the grid it normally lives in
   with a single auto-scrolling row of fixed-width cards. */
.lp-hot-track.products{
  display:flex !important; flex-wrap:nowrap !important;
  gap:14px !important; width:max-content;
  animation:lpHotScroll 52s linear infinite;
}
/* Pause-on-hover only for real pointers -- on touch, tapping a card
   triggers :hover with no matching "leave" event, so the strip would
   pause on the first tap and never resume (this is exactly the "presses
   one, stops, then pressing another doesn't move it again" bug: it
   never restarts because :hover is still "on" from the very first tap). */
@media(hover:hover) and (pointer:fine){
  .lp-hot:hover .lp-hot-track{ animation-play-state:paused; }
}
@keyframes lpHotScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.lp-hot-track .card{
  flex:0 0 190px; width:190px; max-width:190px;
}
@media(prefers-reduced-motion:reduce){
  .lp-hot-track{ animation:none; }
}

/* The scene disables pointer-events for its decorative SVG background, but
   that inherits down into the carousel too -- re-enable it there so the
   dots and the Browse button are actually clickable (they worked in
   automated tests only because those bypass real pointer hit-testing). */
.lp-hero .lp-hero-carousel{ pointer-events:auto; }
.lp-hero .lp-hero-browse{
  position:absolute; left:10px; bottom:10px; z-index:3;
  padding:6px 13px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(23,21,35,.85) !important; color:#fff !important;
  font-size:11px; font-weight:800; letter-spacing:.01em;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .15s ease, transform .15s ease;
}
.lp-hero .lp-hero-browse:hover{ background:#171523 !important; transform:translateY(-1px); }
.lp-hero .lp-hero-browse span{ margin-left:2px; }

/* ===== discount system: badges, struck-through price, hero "On sale" strip ===== */
/* Green "savings" tone, distinct from HOT's orange -- same green already
   used for the discount badge in the plan selector (#orderView), so the
   color means the same thing everywhere it shows up. */
.products .pc-flag.pc-flag-discount{
  background:linear-gradient(140deg,#2FBE8C,#1F9E74);
}
/* A glowing violet-to-blue badge, distinct from HOT's flat orange and the
   discount's flat green -- an animated soft pulse instead of a static
   shadow marks it as a permanent quality tier, not a time-limited flag. */
.products .pc-flag.pc-flag-pro{
  background:linear-gradient(135deg,#8A5CF6,#5B8DF8);
  box-shadow:0 2px 6px rgba(110,80,240,.35), 0 0 0 0 rgba(139,109,246,.55);
  animation:pcFlagProGlow 2.2s ease-in-out infinite;
}
@keyframes pcFlagProGlow{
  0%, 100%{ box-shadow:0 2px 6px rgba(110,80,240,.35), 0 0 0 0 rgba(139,109,246,.45); }
  50%{ box-shadow:0 2px 6px rgba(110,80,240,.35), 0 0 8px 2px rgba(139,109,246,.55); }
}
@media(prefers-reduced-motion:reduce){
  .products .pc-flag.pc-flag-pro{ animation:none; }
}
.products .price-from .price-original{
  font-size:9px; font-weight:800; color:#A29CBA;
  text-decoration:line-through; text-decoration-thickness:1.4px; text-decoration-color:#c9c3de;
}
#orderView .plan-option .plan-price-original{
  display:block; font-size:11px; font-weight:700; color:var(--muted-2,#8a8398);
  text-decoration:line-through; text-decoration-thickness:1.4px;
}
/* Discount panel sits right above "Back to home" now, flush against it
   (no gap -- the two read as one stacked header block) with the search
   bar further below. */
.catalog-discount-section{ margin:0 0 2px; }
.products-head{ margin:0 0 14px; }

/* A soft pastel panel (warm off-white into pale mint) instead of a flat
   white or dark block, so it reads as its own gently-toned showcase
   without clashing with the app's light theme. The label sits plain
   (no badge chip) and is pulled over the strip below it via a negative
   margin, so the rounded strip's own top edge -- not just a bare gap --
   sits behind the label instead of a dead space above the cards. Padding
   is kept minimal throughout (panel, strip, card) since this section
   sits above the fold and every extra pixel here pushes the products
   grid further down the page. */
.catalog-discount-panel{
  position:relative; overflow:hidden;
  width:100%; padding:13px 10px 9px; border-radius:20px;
  background:linear-gradient(160deg,#FAF7F2 0%,#F3EEFB 55%,#EDF8F1 100%);
  border:1px solid rgba(122,53,199,.10);
  box-shadow:0 10px 22px rgba(122,53,199,.09);
}
.catalog-discount-panel::before{
  content:""; position:absolute; top:-55%; right:-12%; width:60%; height:160%;
  background:radial-gradient(circle, rgba(122,53,199,.08), transparent 68%);
  pointer-events:none;
}
.catalog-discount-panel::after{
  content:""; position:absolute; bottom:-60%; left:-10%; width:55%; height:150%;
  background:radial-gradient(circle, rgba(136,214,181,.16), transparent 68%);
  pointer-events:none;
}
.catalog-discount-label{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:6px; margin:0 0 -12px; padding-left:2px;
  font-size:11.5px; font-weight:800; letter-spacing:.03em;
  color:#5B2C97; text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.catalog-discount-icon{
  width:12px; height:12px; flex:0 0 auto; background:#8B5FBF;
  -webkit-mask:url(assets/icon-sale-tag.png) center/contain no-repeat;
  mask:url(assets/icon-sale-tag.png) center/contain no-repeat;
}
.catalog-discount-panel .catalog-discount-strip{ position:relative; z-index:1; }

/* ===== on-sale strip + cards ===== */
/* One continuous pastel "shelf" instead of separate card backgrounds --
   cards float on it side-by-side in an auto-scrolling row (same seamless
   translateX(-50%) ticker as Hot Products, list duplicated once in JS),
   each one an ultra-compact vertical tile so the whole section stays
   short even with a tier pill and a bold discount badge back on it. */
.catalog-discount-strip{
  position:relative; overflow:hidden; padding:16px 0 6px; border-radius:16px;
  background:linear-gradient(165deg,#EEE7FA,#E3F5EC);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 6px rgba(122,53,199,.05);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.catalog-discount-list{
  display:flex; flex-wrap:nowrap; gap:8px; width:max-content; padding:0 6px;
  animation:lpHotScroll 20s linear infinite;
}
@media(hover:hover) and (pointer:fine){
  .catalog-discount-strip:hover .catalog-discount-list{ animation-play-state:paused; }
}
@media(prefers-reduced-motion:reduce){
  .catalog-discount-list{ animation:none; }
}
.sale-card{
  --pc:#4C4BD8; --pc-2:#6E5CE8;
  position:relative; flex:0 0 100px; width:100px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  padding:10px 6px 9px; border-radius:14px; border:0;
  background:linear-gradient(155deg,#FFFFFF,#FBF9FE);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(90,52,150,.08), 0 1px 2px rgba(90,52,150,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sale-card:active{ transform:scale(.97); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(90,52,150,.09); }
.sale-card[data-cat="AI"]       { --pc:#4C4BD8; --pc-2:#7B5BEC; }
.sale-card[data-cat="VPN"]      { --pc:#1E7FC4; --pc-2:#3AA6DE; }
.sale-card[data-cat="Music"]    { --pc:#1F9E74; --pc-2:#2FBE8C; }
.sale-card[data-cat="Video"]    { --pc:#C0356B; --pc-2:#E2568C; }
.sale-card[data-cat="Editing"]  { --pc:#7B3FD1; --pc-2:#9A62E8; }
.sale-card[data-cat="Social"]   { --pc:#2C63D8; --pc-2:#4E86EE; }
.sale-card[data-cat="Services"] { --pc:#B3701A; --pc-2:#D89231; }
.sale-card[data-cat="Streaming"]{ --pc:#B02F5A; --pc-2:#D6527F; }
.sale-card[data-cat="Gift"]     { --pc:#8A3FB8; --pc-2:#AC61D6; }
.sale-card[data-cat="Games"]    { --pc:#6A44C8; --pc-2:#8C63E4; }
.sale-card-icon .icon-wrap{
  width:36px; height:36px; padding:6px; margin:0 0 5px; border-radius:11px;
  background:linear-gradient(152deg,#FFFFFF,#F6F4FD);
  border:1px solid rgba(28,22,60,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 2px 5px rgba(48,32,104,.10);
}
.sale-card-icon .icon-wrap img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }
.sale-card-tier{
  font-size:7px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pc); background:color-mix(in srgb, var(--pc) 12%, #fff);
  padding:2px 7px; border-radius:999px; margin-bottom:3px; white-space:nowrap;
}
.sale-card-name{
  width:100%; font-size:10px; font-weight:800; color:#241B3D; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sale-card-price{
  display:flex; flex-direction:column; align-items:center; gap:0; margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.sale-card-price s{ font-size:7.5px; font-weight:600; color:#A99CC7; text-decoration-thickness:1.1px; }
.sale-card-price strong{ font-size:12px; font-weight:900; color:var(--pc); white-space:nowrap; }
.sale-card-flag{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:9.5px; font-weight:900; letter-spacing:.01em; line-height:1; white-space:nowrap;
  padding:4px 9px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#FF6B6B,#E8384F);
  box-shadow:0 3px 8px rgba(224,50,70,.40), 0 0 0 2px #fff;
}

/* Header wordmark removed -- the account box now sits directly next to the
   logo icon (per user request), so the "GAMEPAY HUB / DIGITAL STORE" text
   and its divider are just extra clutter between them. Kept as elements
   (not deleted from the DOM) rather than removed from HTML/JS since
   nothing else depends on hiding them being reversible. */
.compact-brand .compact-name,
.compact-brand .compact-divider,
.compact-brand .compact-label{ display:none !important; }
/* Order preview summary: product / payment logos */
.order-preview-table td .preview-logo{width:27px;height:27px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;margin-right:10px;vertical-align:-8px;box-shadow:0 0 12px rgba(86,243,255,.28)}
.order-preview-table td .preview-logo-emoji{font-size:21px;line-height:1;margin-right:10px;vertical-align:-4px}
.light-mode .order-preview-table td .preview-logo{box-shadow:0 0 10px rgba(111,81,176,.20)}
@media(max-width:700px){.order-preview-table td .preview-logo{width:23px;height:23px;margin-right:8px}}

/* ============ Figma Make voucher-slip restyle: Order Preview (light mode) ============
   Applies the lavender voucher-slip design to the Order Preview screen.
   Dark mode keeps its existing styling untouched. */
body.light-mode #previewSection.order-preview-view{
  background:linear-gradient(180deg,#F6F3FC 0%,#ECE5F9 58%,#E6DCF8 100%)!important;
  color:#2C2C2C!important;
}
body.light-mode #previewSection .preview-shell{max-width:560px;}
body.light-mode #previewSection .dashboard-back-btn{
  background:#fff!important;border:1px solid rgba(116,87,180,.28)!important;
  color:#5B4A86!important;box-shadow:0 4px 14px rgba(116,87,180,.10)!important;
  text-shadow:none!important;border-radius:999px!important;
}
body.light-mode #previewSection .dashboard-back-btn:hover{background:#F4F0FC!important;transform:translateY(-1px);}
body.light-mode #previewSection .preview-chip{
  color:#7457B4!important;border:1px solid rgba(116,87,180,.30)!important;
  background:rgba(255,255,255,.65)!important;
}
body.light-mode #previewSection .preview-page-title{
  font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;
  color:#2C2C2C!important;letter-spacing:.01em!important;
}
body.light-mode #previewSection .preview-page-sub{color:#8B8499!important;}
body.light-mode #previewSection .preview-final-box{
  background:transparent!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation:none!important;max-width:520px;margin:0 auto;overflow:visible!important;
}
body.light-mode #previewSection .preview-final-box::before{display:none!important;}
body.light-mode #previewSection .slip-card{
  background:#FFFEFC;border:1px solid rgba(116,87,180,.15);border-bottom:0;
  border-radius:22px 22px 0 0;box-shadow:0 18px 45px rgba(116,87,180,.16);overflow:hidden;
}
body.light-mode #previewSection .preview-empty{
  background:#FFFEFC;border:1px solid rgba(116,87,180,.15);border-radius:22px;
  box-shadow:0 18px 45px rgba(116,87,180,.16);color:#8B8499;
}
body.light-mode #previewSection .preview-table-caption{
  background:transparent!important;border-bottom:1px dashed rgba(116,87,180,.25)!important;
  color:#8B8499!important;animation:none!important;padding:16px 20px!important;
}/* Plan row reuses the plan-list tier pill. NOTE: #previewSection is re-parented
   onto <body> at runtime (the order-dashboard-flow script moves it out of
   #orderView so position:fixed overlays anchor to the viewport), so these
   selectors must be scoped under #previewSection, NOT #orderView. */
#previewSection .order-preview-table td .preview-tier{display:inline-flex;margin-left:10px;vertical-align:3px}
#previewSection .order-preview-table td .preview-tier[data-tier="business"]{--tier:#0E5C4A;--tier-2:#1C8F6B;--tier-ink:#FFF8E6}
#previewSection .order-preview-table td .preview-tier[data-tier="premium"]{--tier:#7A5410;--tier-2:#C79A2E;--tier-ink:#FFF8E6}
#previewSection .order-preview-table td .preview-tier[data-tier="vip"]{--tier:#6A4A08;--tier-2:#B98F1E;--tier-ink:#FFF6DF}
#previewSection .order-preview-table td .preview-tier[data-tier="max"]{--tier:#7A1B44;--tier-2:#C2366F;--tier-ink:#FFEDF4}
#previewSection .order-preview-table td .preview-tier[data-tier="pro"]{--tier:#1E3A8A;--tier-2:#3B63C9;--tier-ink:#EDF2FF}
#previewSection .order-preview-table td .preview-tier[data-tier="proplus"]{--tier:#4C2889;--tier-2:#7B4FE0;--tier-ink:#F3EDFF}
#previewSection .order-preview-table td .preview-tier[data-tier="core"]{--tier:#0F6E64;--tier-2:#22A399;--tier-ink:#E7FBF8}
#previewSection .order-preview-table td .preview-tier[data-tier="standard"]{--tier:#3C4A66;--tier-2:#63799E;--tier-ink:#EEF3FB}
#previewSection .order-preview-table td .preview-tier[data-tier="plus"]{--tier:#5B2AA8;--tier-2:#8A55DC;--tier-ink:#F4EDFF}
#previewSection .order-preview-table td .preview-tier[data-tier="team"]{--tier:#0F5F7A;--tier-2:#2A93B5;--tier-ink:#E9F8FC}
#previewSection .order-preview-table td .preview-tier[data-tier="individual"]{--tier:#37307A;--tier-2:#5F55B8;--tier-ink:#EFEDFF}
#previewSection .order-preview-table td .preview-tier[data-tier="education"]{--tier:#155E45;--tier-2:#2E9B72;--tier-ink:#EAFBF3}
#previewSection .order-preview-table td .preview-tier[data-tier="family"]{--tier:#8A4210;--tier-2:#C97A2A;--tier-ink:#FFF2E4}
#previewSection .order-preview-table td .preview-tier[data-tier="go"]{--tier:#D4AF37;--tier-2:#F6DFA0;--tier-ink:#5C4310}
#previewSection .order-preview-table td .preview-tier[data-tier="link"]{--tier:#0E5468;--tier-2:#2B8AA6;--tier-ink:#E9F7FB}
#previewSection .order-preview-table td .preview-tier[data-tier="gift"]{--tier:#A3234F;--tier-2:#DE5A8A;--tier-ink:#FFEEF4}
#previewSection .order-preview-table td .preview-tier[data-tier="basic"]{--tier:#475569;--tier-2:#6B7A90;--tier-ink:#F1F4F9}
#previewSection .order-preview-table td .preview-tier[data-tier="4k"]{--tier:#0B4F6C;--tier-2:#1C9FC6;--tier-ink:#E8FBFF}
#previewSection .order-preview-table td .preview-tier[data-tier="gptpro"]{--tier:#2A1B6B;--tier-2:#5B3FD6;--tier-ink:#F1EDFF}
#previewSection .order-preview-table td .preview-tier[data-tier="ultra"]{--tier:#101018;--tier-2:#4F7DF3;--tier-ink:#EEF4FF}
#previewSection .order-preview-table td .preview-tier[data-tier="hobby"]{--tier:#57534E;--tier-2:#A8A29E;--tier-ink:#FAFAF9}
/* Base pill shape inside the preview (the plan-list .plan-tier-chip lives under
   #orderView, so it is re-declared here for the re-parented preview section). */
#previewSection .order-preview-table td .plan-tier-chip{
  position:relative;
  display:inline-flex; align-items:center;
  padding:4px 12px !important; border-radius:999px !important;
  font-size:9.5px !important; font-weight:900 !important;
  letter-spacing:.06em !important; text-transform:uppercase;
  color:var(--tier-ink) !important;
  background:linear-gradient(135deg,var(--tier),var(--tier-2)) !important;
  border:1px solid color-mix(in srgb, var(--tier) 55%, #000 6%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
    0 2px 7px color-mix(in srgb, var(--tier) 40%, transparent) !important;
  overflow:hidden;
}
/* Metallic sweep for the premium tiers, mirroring the plan list. */
#previewSection .order-preview-table td .preview-tier[data-tier="business"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="premium"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="vip"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="svip"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="go"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="4k"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="gptpro"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="ultra"] .plan-tier-chip::after,
#previewSection .order-preview-table td .preview-tier[data-tier="max"] .plan-tier-chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 64%);
  pointer-events:none;
}

body.light-mode #previewSection .preview-table-caption::after{display:none!important;}
body.light-mode #previewSection .preview-table-caption b{
  color:#2E7D4F!important;border:1px solid rgba(46,125,79,.30)!important;
  background:rgba(46,125,79,.08)!important;
}
body.light-mode #previewSection .order-preview-table th,
body.light-mode #previewSection .order-preview-table td{border-bottom:1px solid #F0EBFA!important;}
body.light-mode #previewSection .order-preview-table th{color:#8B8499!important;}
body.light-mode #previewSection .order-preview-table td{color:#2C2C2C!important;}
body.light-mode #previewSection .order-preview-table tbody tr{animation:none!important;}
body.light-mode #previewSection .order-preview-table tbody tr:hover{background:transparent!important;transform:none!important;}
body.light-mode #previewSection .order-preview-table tr:last-child th,
body.light-mode #previewSection .order-preview-table tr:last-child td{
  background:#EFF1FE!important;border-bottom:0!important;
}
body.light-mode #previewSection .order-preview-table tr:last-child td{
  color:#7457B4!important;font-size:22px!important;font-weight:800!important;
}
body.light-mode #previewSection .order-preview-table tr:last-child th::after{
  content:"All included. No surprises.";display:block;margin-top:5px;
  font-size:9px;font-weight:600;letter-spacing:.05em;color:#8B8499;text-transform:none;
}
body.light-mode #previewSection .order-preview-table tr:last-child td::after{
  content:"MYANMAR KYAT";display:block;margin-top:3px;
  font-size:8.5px;font-weight:700;letter-spacing:.24em;color:#B7ABC3;
}
body.light-mode #previewSection .slip-barcode{padding:20px 20px 4px;text-align:center;}
body.light-mode #previewSection .slip-bars{
  height:46px;margin:0 auto 10px;max-width:240px;
  background:repeating-linear-gradient(90deg,#2C2C2C 0 2px,transparent 2px 5px,#2C2C2C 5px 6px,transparent 6px 11px,#2C2C2C 11px 14px,transparent 14px 18px);
}
body.light-mode #previewSection .slip-barcode span{
  font-size:9px;font-weight:800;letter-spacing:.34em;color:#8B8499;text-indent:.34em;display:inline-block;
}
body.light-mode #previewSection .slip-keep{
  padding:2px 20px 22px;text-align:center;font-size:10.5px;color:#B7ABC3;
}
body.light-mode #previewSection .slip-zigzag{
  height:13px;margin:0 7px;
  background:
    linear-gradient(45deg,transparent 50%,#FFFEFC 50%) 0 0/18px 18px repeat-x,
    linear-gradient(-45deg,transparent 50%,#FFFEFC 50%) 9px 0/18px 18px repeat-x;
  filter:drop-shadow(0 12px 14px rgba(116,87,180,.14));
}
body.light-mode #previewSection #previewOrderBtn{
  max-width:520px;margin:24px auto 0!important;width:100%;
  background:linear-gradient(135deg,#5B50C8,#9154CD)!important;border:0!important;
  color:#fff!important;font-size:15px!important;font-weight:800!important;
  padding:16px!important;border-radius:16px!important;
  box-shadow:0 12px 28px rgba(110,84,200,.35)!important;text-shadow:none!important;
  display:flex!important;align-items:center;justify-content:center;gap:10px;
}
body.light-mode #previewSection #previewOrderBtn:hover{transform:translateY(-1px);}
body.light-mode #previewSection #previewOrderBtn:disabled{
  background:#D9D4E8!important;color:#fff!important;box-shadow:none!important;opacity:.8;
  transform:none!important;
}
body.light-mode #previewSection #previewOrderBtn .btn-icon{width:18px;height:18px;}
body.light-mode #previewSection .checkout-trustline{
  max-width:520px;margin:14px auto 0!important;background:transparent!important;
  border:0!important;color:#8B8499!important;justify-content:center;
}
body.light-mode #previewSection .checkout-trustline b{color:#5B4A86!important;}
@media(max-width:600px){
  body.light-mode #previewSection .order-preview-table tr:last-child td{font-size:19px!important;}
  body.light-mode #previewSection .slip-bars{max-width:200px;height:40px;}
}

/* ============ Figma Make "Order tracking" processing design: Order Status ============
   White/pale Figma-style restyle of the order-status view (v18: "Order
   tracking"). Applies in both color modes (the design itself is light, per
   request). The Figma "Order details" box is intentionally NOT added -- the
   page keeps its existing Order Summary (#statusDetails), shown inside the
   "{Product} Details" collapsible. */
#orderStatusView{
  background:#F6F6F1;
  border-radius:26px;
  padding:26px clamp(16px,4vw,34px) 36px;
  margin-top:14px;
  color:#23281D;
}
#orderStatusView .fig-os-shell{ max-width:640px; margin:0 auto; }

/* Breadcrumb */
#orderStatusView .fig-os-crumb{
  display:flex; align-items:center; gap:8px; margin:2px 2px 0;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif; font-size:13px;
}
#orderStatusView .fig-os-crumb-link{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-weight:600; color:#71716A;
}
#orderStatusView .fig-os-crumb-link:hover{ color:#22271B; text-decoration:underline; }
#orderStatusView .fig-os-crumb-sep{ color:#B4B4A6; }
#orderStatusView .fig-os-crumb-here{ color:#22271B; font-weight:700; }

/* Type system: Archivo headings (tight grotesque, like the Figma),
   Plus Jakarta Sans body, wide-tracked uppercase kickers. */
#orderStatusView .fig-os-kicker{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#8B8B80;
}
#orderStatusView .fig-os-head{ margin:14px 2px 18px; }
#orderStatusView .fig-os-title{
  font-family:Archivo,"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-weight:800; font-size:clamp(28px,6vw,36px); letter-spacing:-.022em;
  color:#22271B; margin:0 0 8px; line-height:1.05;
}
#orderStatusView .fig-os-sub{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13.5px; line-height:1.55; color:#71716A; margin:0; max-width:46ch;
}
#orderStatusView .fig-os-section{
  font-family:Archivo,"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:17px; font-weight:800; letter-spacing:-.01em; color:#22271B;
}
#orderStatusView .fig-os-count{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#8B8B80; white-space:nowrap;
}
#orderStatusView .fig-os-rowhead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:24px 2px 10px;
}

/* Order reference card */
#orderStatusView .fig-os-ref{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid #E9E9DE; border-radius:18px;
  padding:15px 18px; box-shadow:0 8px 24px rgba(70,70,60,.05);
}
#orderStatusView .fig-os-ref-meta{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#orderStatusView .fig-os-code{ display:flex; align-items:center; gap:8px; min-width:0; }
#orderStatusView .fig-os-code b{
  font-family:Archivo,"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:17px; font-weight:800; letter-spacing:.01em; color:#22271B;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#orderStatusView .fig-os-copy{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:10px; border:1px solid #E4E4D6;
  background:#FAFAF6; color:#71716A !important; cursor:pointer; padding:0;
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
#orderStatusView .fig-os-copy:hover{ transform:translateY(-1px); color:#22271B; border-color:#CFCFBE; }
#orderStatusView .fig-os-copy svg{ width:15px; height:15px; }
#orderStatusView .fig-os-copy.copied{ color:#1E7A3C; border-color:#BFE3C6; background:#EFF7F0; }
#orderStatusView .fig-os-refresh{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:12px; padding:11px 18px; cursor:pointer;
  background:#23281D; color:#fff !important;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13px; font-weight:800;
  box-shadow:0 8px 18px rgba(35,40,29,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
#orderStatusView .fig-os-refresh:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(35,40,29,.28); }
#orderStatusView .fig-os-refresh svg{ width:16px; height:16px; }
#orderStatusView .fig-os-refresh.spin svg{ animation:figSpin .7s cubic-bezier(.4,.1,.4,1); }
@keyframes figSpin{ to{ transform:rotate(360deg); } }

/* Status card */
#orderStatusView .fig-os-card{
  position:relative; display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid #E9E9DE; border-radius:20px;
  padding:20px; margin-top:14px; box-shadow:0 12px 32px rgba(70,70,60,.07);
  overflow:hidden;
}
#orderStatusView .fig-os-status-icon{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#F4F4EC; border:1px solid #E5E6DA; color:#3F3F36;
}
#orderStatusView .fig-os-status-icon svg{ width:27px; height:27px; }
#orderStatusView .fig-os-status-icon.flip svg{ animation:hourglassFlip 5s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes hourglassFlip{ 0%,72%{ transform:rotate(0); } 88%,100%{ transform:rotate(180deg); } }
#orderStatusView .fig-os-status-body{
  flex:1 1 auto; min-width:0; padding-top:2px;
  display:flex; flex-direction:column; align-items:flex-start;
}
#orderStatusView .fig-os-status-title{
  font-family:Archivo,"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:19px; font-weight:800; letter-spacing:-.015em; color:#22271B; line-height:1.25;
}
#orderStatusView .fig-os-status-desc{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13px; line-height:1.55; color:#71716A; margin:6px 0 0;
}
#orderStatusView .fig-os-pill{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:12px;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  padding:7px 13px; border-radius:999px;
  background:#F7EECB; color:#7A5E13; border:1px solid #EADFAE;
}
#orderStatusView .fig-os-pill-dot{
  width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto;
}
#orderStatusView .fig-os-pill.done{ background:#DFF2E3; color:#1E7A3C; border-color:#BFE3C6; }
#orderStatusView .fig-os-pill.bad{ background:#FADFDF; color:#B3261E; border-color:#F0BFBF; }

/* Journey stepper (Figma style) -- keeps the .status-step* class contract
   that updateStatusStepper() drives. Equal flex columns keep the dots and
   connector lines aligned at every width (mobile fix). */
#orderStatusView .fig-os-stepper{
  width:100%; max-width:560px; margin:2px auto 4px; display:flex; align-items:flex-start;
}
#orderStatusView .fig-os-stepper .status-step{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
#orderStatusView .fig-os-stepper .status-step-text{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
}
#orderStatusView .fig-os-stepper .status-step-dot{
  position:relative;
  width:54px; height:54px; border-radius:50%;
  background:#F0F0E9; border:2px solid #E2E2D5; color:#B4B4A6;
  font-size:12px; box-shadow:none;
}
#orderStatusView .fig-os-stepper .status-step-dot svg{ width:24px; height:24px; }
#orderStatusView .fig-os-stepper .status-step.done .status-step-dot{
  background:#23281D; border-color:#23281D; color:#fff; box-shadow:0 8px 18px rgba(35,40,29,.25);
}
#orderStatusView .fig-os-stepper .status-step.current .status-step-dot{
  background:#FCFCF8; border-color:#23281D; color:#23281D;
  box-shadow:0 0 0 6px rgba(35,40,29,.07);
  animation:figStepPulse 2.2s ease-in-out infinite;
}
#orderStatusView .fig-os-stepper .status-step.current .status-step-dot::after{
  content:""; position:absolute; top:1px; right:1px; width:11px; height:11px;
  border-radius:50%; background:#23281D; border:2.5px solid #FCFCF8;
}
@keyframes figStepPulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(35,40,29,.06); }
  50%{ box-shadow:0 0 0 9px rgba(35,40,29,.10); }
}
#orderStatusView .fig-os-stepper .status-step.rejected .status-step-dot{
  background:#B3261E; border-color:#B3261E; color:#fff; box-shadow:0 8px 18px rgba(179,38,30,.25);
}
#orderStatusView .fig-os-stepper .status-step-label{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13px; font-weight:800; color:#A3A399; line-height:1.3;
}
#orderStatusView .fig-os-stepper .status-step.done .status-step-label,
#orderStatusView .fig-os-stepper .status-step.current .status-step-label{ color:#23281D; }
#orderStatusView .fig-os-stepper .status-step.rejected .status-step-label{ color:#B3261E; }
#orderStatusView .fig-os-stepper .status-step-sub{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:10.5px; font-weight:600; color:#9A9A90; line-height:1.35;
}
#orderStatusView .fig-os-stepper .status-step.current .status-step-sub{ color:#71716A; }
#orderStatusView .fig-os-stepper .status-step-line{
  flex:0 1 110px; min-width:14px; height:2px; border-radius:2px;
  background:#E2E2D5; margin:26px 4px 0; box-shadow:none; align-self:flex-start;
}
#orderStatusView .fig-os-stepper .status-step-line.done{ background:#23281D; }

/* Notice bar */
#orderStatusView .fig-os-notice{
  display:flex; align-items:center; gap:10px;
  background:#EFF0E8; border:1px solid #E1E3D2; border-radius:14px;
  padding:13px 16px; margin-top:16px;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13px; font-weight:600; color:#4C4C42; line-height:1.45;
}
#orderStatusView .fig-os-notice-icon{ flex:0 0 auto; display:inline-flex; color:#6E6E64; }
#orderStatusView .fig-os-notice-icon svg{ width:18px; height:18px; }
#orderStatusView .fig-os-notice-text{ flex:1 1 auto; }

/* Collapsible cards: "{Product} Details" + "Order activity" */
#orderStatusView .fig-os-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; align-items:start;
}
#orderStatusView .fig-os-collapse{
  background:#fff; border:1px solid #E9E9DE; border-radius:18px;
  box-shadow:0 8px 24px rgba(70,70,60,.05); overflow:hidden; min-width:0;
}
#orderStatusView .fig-os-collapse-head{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:15px 16px; background:#fff; border:0; cursor:pointer; text-align:left;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif; color:#22271B;
}
#orderStatusView .fig-os-collapse-ico{ flex:0 0 auto; display:inline-flex; color:#6E6E64; }
#orderStatusView .fig-os-collapse-ico svg{ width:20px; height:20px; }
#orderStatusView .fig-os-collapse-title{
  flex:1 1 auto; min-width:0; font-size:14px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#orderStatusView .fig-os-collapse-title b{ font-weight:800; }
#orderStatusView .fig-os-collapse-title span{ font-weight:600; color:#8B8B80; margin-left:6px; }
#orderStatusView .fig-os-collapse-chev{
  flex:0 0 auto; display:inline-flex; color:#9A9A90;
  transition:transform .25s ease;
}
#orderStatusView .fig-os-collapse-chev svg{ width:18px; height:18px; }
#orderStatusView .fig-os-collapse.open .fig-os-collapse-chev{ transform:rotate(180deg); }
#orderStatusView .fig-os-collapse-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#orderStatusView .fig-os-collapse.open .fig-os-collapse-body{ max-height:640px; }
#orderStatusView .fig-os-collapse-body .order-status-details{
  margin:0; border:0; border-radius:0; box-shadow:none;
  border-top:1px solid #F1F1E9;
}
#orderStatusView .fig-os-collapse-body .fig-os-timeline{
  padding:4px 16px 10px; border-top:1px solid #F1F1E9;
}

/* Activity timeline */
#orderStatusView .fig-os-timeline{ display:flex; flex-direction:column; }
#orderStatusView .fig-os-tl-item{
  display:flex; align-items:flex-start; gap:14px; padding:11px 4px;
  border-bottom:1px dashed #E7E7DB;
}
#orderStatusView .fig-os-tl-item:last-child{ border-bottom:0; }
#orderStatusView .fig-os-tl-dot{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#EFEFE8; border:1px solid #E4E4D6; color:#9A9A90;
}
#orderStatusView .fig-os-tl-dot svg{ width:17px; height:17px; }
#orderStatusView .fig-os-tl-item.done .fig-os-tl-dot{
  background:#E7EFE4; border-color:#D5E2CF; color:#3F7A44;
}
#orderStatusView .fig-os-tl-item.current .fig-os-tl-dot{
  background:#fff; border:1.5px solid #23281D; color:#23281D;
  box-shadow:0 0 0 4px rgba(35,40,29,.06);
}
#orderStatusView .fig-os-tl-item.bad .fig-os-tl-dot{
  background:#FADFDF; border-color:#F0BFBF; color:#B3261E;
}
#orderStatusView .fig-os-tl-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
#orderStatusView .fig-os-tl-body b{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:13.5px; font-weight:800; color:#23281D;
}
#orderStatusView .fig-os-tl-body span{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:12px; color:#8B8B80; line-height:1.45;
}
#orderStatusView .fig-os-tl-time{
  flex:0 0 auto; font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.06em; color:#9A9A90; white-space:nowrap;
  padding-top:10px;
}
#orderStatusView .fig-os-tl-now{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#71716A;
  border:1px solid #E0E0D2; background:#fff; border-radius:999px; padding:5px 10px;
}

/* Existing Order Summary, re-skinned to the pale Figma card */
#orderStatusView .order-status-details{
  width:100%; margin:0; text-align:left;
  background:#fff; border:1px solid #E9E9DE; border-radius:18px;
  box-shadow:0 8px 24px rgba(70,70,60,.05); overflow:hidden;
}
#orderStatusView .order-status-details .order-preview-table{ width:100%; margin:0; }
#orderStatusView .status-details-caption{ color:#8B8B80; }
#orderStatusView .order-status-details .order-preview-table th{ color:#8B8B80 !important; }
#orderStatusView .order-status-details .order-preview-table td{ color:#23281D !important; }
#orderStatusView .order-status-details .order-preview-table th,
#orderStatusView .order-status-details .order-preview-table td{ border-bottom:1px solid #F1F1E9 !important; }

/* Rejected reason on the pale sheet */
#orderStatusView .status-reason-box{
  width:100%; margin:16px auto 0; background:#FBEFEF; border:1px solid #F0CFCF;
}
#orderStatusView .status-reason-icon{ color:#B3261E; }
#orderStatusView .status-reason-text{ color:#7A2323; }

/* Support row */
#orderStatusView .fig-os-support{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:22px 2px 0; padding:2px;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
}
#orderStatusView .fig-os-support-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:#4C4C42;
}
#orderStatusView .fig-os-support-label svg{ width:18px; height:18px; color:#6E6E64; }
#orderStatusView .fig-os-support-link{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:800; color:#22271B;
}
#orderStatusView .fig-os-support-link:hover{ text-decoration:underline; }
#orderStatusView .fig-os-support-arrow{ font-weight:800; }

/* Footer */
#orderStatusView .fig-os-foot{
  text-align:center; margin:28px 0 4px;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  font-size:12px; color:#9A9A90;
}

/* Staggered entrance for the status page blocks */
@keyframes figRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
#orderStatusView .fig-anim{ animation:figRise .55s cubic-bezier(.22,.8,.3,1) both; animation-delay:var(--d,0s); }

/* ============ Page-to-page transitions ============
   Every top-level view animates in when it becomes visible (the animation
   restarts each time .hidden is removed). */
@keyframes pageEnter{
  from{ opacity:0; transform:translateY(18px) scale(.996); }
  to{ opacity:1; transform:none; }
}
#landingShell:not(.hidden),
#catalogView:not(.hidden),
#cartItem:not(.hidden),
#checkoutSection:not(.hidden),
#previewSection:not(.hidden),
#orderStatusView:not(.hidden),
#chatView:not(.hidden),
#myOrdersView:not(.hidden),
#noticeView:not(.hidden),
#accountView:not(.hidden),
#securityView:not(.hidden),
#inviteFriendsView:not(.hidden){
  animation:pageEnter .45s cubic-bezier(.22,.8,.3,1) both;
}
@media (prefers-reduced-motion:reduce){
  #orderStatusView .fig-anim,
  #orderStatusView .fig-os-status-icon.flip svg,
  #orderStatusView .fig-os-stepper .status-step.current .status-step-dot,
  #landingShell:not(.hidden),
  #catalogView:not(.hidden),
  #cartItem:not(.hidden),
  #checkoutSection:not(.hidden),
  #previewSection:not(.hidden),
  #orderStatusView:not(.hidden),
  #chatView:not(.hidden),
  #myOrdersView:not(.hidden),
  #noticeView:not(.hidden),
  #accountView:not(.hidden),
  #securityView:not(.hidden),
  #inviteFriendsView:not(.hidden){
    animation:none !important;
  }
}
@media(max-width:560px){
  #orderStatusView{ border-radius:20px; padding:20px 14px 28px; }
  #orderStatusView .fig-os-ref{ flex-direction:row; align-items:center; gap:10px; padding:12px 14px; }
  #orderStatusView .fig-os-ref-meta{ flex:1 1 auto; }
  #orderStatusView .fig-os-code b{ font-size:14px; }
  #orderStatusView .fig-os-refresh{ justify-content:center; padding:9px 12px; font-size:12px; border-radius:10px; box-shadow:0 4px 10px rgba(35,40,29,.18); }
  #orderStatusView .fig-os-refresh svg{ width:14px; height:14px; }
  #orderStatusView .fig-os-card{ padding:16px; gap:13px; }
  #orderStatusView .fig-os-status-icon{ width:46px; height:46px; }
  #orderStatusView .fig-os-status-icon svg{ width:23px; height:23px; }
  #orderStatusView .fig-os-cols{ grid-template-columns:1fr; }
  #orderStatusView .fig-os-stepper .status-step-dot{ width:46px; height:46px; }
  #orderStatusView .fig-os-stepper .status-step-dot svg{ width:21px; height:21px; }
  #orderStatusView .fig-os-stepper .status-step-line{ margin-top:22px; flex:0 1 30px; min-width:10px; }
  #orderStatusView .fig-os-stepper .status-step-label{ font-size:11.5px; }
  #orderStatusView .fig-os-stepper .status-step-sub{ font-size:10px; }
  #orderStatusView .fig-os-support{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =====================================================================
   preview-figma-v3 — Order Preview rebuilt to the CURRENT Figma Make
   "User-greeting" design (light receipt printer + zigzag slip, single
   column, no hero, no modal). Scoped to #previewSection.
   ===================================================================== */
#previewSection.order-preview-view{
  position:fixed; inset:0; z-index:60;
  overflow-y:auto; overflow-x:hidden;
  background:#EDF0F7 !important;
  background-image:none !important;
  color:#0F172A;
  padding:0;
  font-family:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#previewSection .pv3-shell{
  width:min(560px,100%);
  margin:0 auto;
  padding:4px clamp(14px,4vw,28px) 30px;
  /* Figma "User greeting" type: the whole preview unit is set in Geist,
     the slip body in IBM Plex Mono. Scoped here so the rest of the site
     keeps its own fonts. */
  font-family:"Geist","Noto Sans Myanmar",sans-serif;
  color:#252a35;
}
/* the legacy section padding used to leave a big empty gap above everything:
   stick the whole preview to the top */
#previewSection.order-preview-view{padding-top:0 !important;}
/* ---- top bar: back link + Print slip pill ---- */
#previewSection .pv3-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
#previewSection .pv3-back{
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px;
  font-family:inherit; font-size:12px; font-weight:400; line-height:16px; color:#596477;
}
#previewSection .pv3-back:hover{color:#252a35;}
#previewSection .pv3-back svg{width:13px; height:13px; flex:none;}
#previewSection .pv3-printslip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e1e5ee; border-radius:8px;
  min-height:36px; padding:0 12px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:500; line-height:16px; color:#4d586b;
}
#previewSection .pv3-printslip:hover{background:#f0f2f7;}
#previewSection .pv3-printslip svg{width:15px; height:15px; flex:none;}
/* ---- printer stage: the card behind the machine, like Figma ---- */
#previewSection .pv3-card{
  background-color:#f0f2f7;
  background-image:radial-gradient(at 50% 45%, #ffffff 0%, #f0f2f7 70%);
  border:1px solid #e3e7ef;
  border-radius:16px;
  padding:12px;
}
@media (min-width:640px){
  #previewSection .pv3-card{padding:16px 20px 12px;}
}
#previewSection .pv3-statusline{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:4px;
}
#previewSection .pv3-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; line-height:16.5px; color:#555e6e;
}
#previewSection .pv3-dot{width:8px; height:8px; border-radius:50%; background:#22c55e; flex:none;
  box-shadow:0 0 8px 2px rgba(34,197,94,.65), 0 0 2px 0 rgba(34,197,94,.9);}
#previewSection .pv3-status:not(.is-done) .pv3-dot{animation:pv3Glow 1.6s ease-in-out infinite;}
@keyframes pv3Glow{0%,100%{box-shadow:0 0 6px 1px rgba(34,197,94,.5), 0 0 2px 0 rgba(34,197,94,.8);}
  50%{box-shadow:0 0 14px 4px rgba(34,197,94,.85), 0 0 3px 1px rgba(34,197,94,1);}}
#previewSection .pv3-status.is-done .pv3-dot{background:#22c55e; animation:none;
  box-shadow:0 0 8px 2px rgba(34,197,94,.55), 0 0 2px 0 rgba(34,197,94,.8);}
#previewSection .pv3-replay{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; border-radius:8px; padding:0 8px; cursor:pointer;
  min-height:44px;
  font-family:inherit; font-size:11px; font-weight:400; color:#555e6e;
}
#previewSection .pv3-replay:hover:not(:disabled){background:rgba(255,255,255,.7);}
#previewSection .pv3-replay:disabled{opacity:.4; cursor:wait;}
#previewSection .pv3-replay svg{width:13px; height:13px; flex:none;}
/* ---- the printer machine, 1:1 from the Figma "User greeting" design ----
   108px metallic body over a back plate; the paper feeds out of the 14px
   slot. (The logo box keeps the site's real Gamepay Hub mark, per the
   standing "website ကဟာတွေပဲထည့်နော်" rule — everything else is Figma.) */
#previewSection .pv3-printer{
  position:relative;
  max-width:340px;
  margin:0 auto;
}
#previewSection .pv3-backplate{
  position:absolute; left:12px; right:12px; top:18px; height:94px;
  border-radius:22px;
  background:#c7cfdb;
  border-bottom:1px solid #aeb8c8;
  box-shadow:0 15px 24px -12px rgba(41,52,74,.27);
}
#previewSection .pv3-machine{
  position:absolute; left:0; right:0; top:0; height:108px; z-index:20;
  border:1px solid #bfc8d6;
  border-radius:22px;
  background:linear-gradient(165deg,#ffffff 0%,#eef1f6 48%,#cdd5e1 100%);
  box-shadow:inset 0 2px 1px #ffffff, inset 0 -3px 2px #b9c3d2, 0 5px 8px rgba(53,64,88,.13);
}
#previewSection .pv3-top-panel{
  position:absolute; left:8px; right:8px; top:8px; height:52px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(155deg,#ffffff 0%,#f5f7fb 58%,#e1e6ef 100%);
  transform:perspective(600px) rotateX(12deg);
  box-shadow:0 2px 2px rgba(115,129,153,.15), inset 0 1px 0 #ffffff;
}
#previewSection .pv3-machine-row{
  position:absolute; top:14px; left:14px; right:14px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#previewSection .pv3-brand{display:flex; align-items:center; gap:8px;}
#previewSection .pv3-plus{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:#232B45;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* the real Gamepay Hub logo, unfiltered, on the navy square */
#previewSection .pv3-logoimg{
  width:18px; height:18px; object-fit:contain; display:block;
  border-radius:4px;
}
#previewSection .pv3-brandtext{font-size:13px; font-weight:600; color:#4c5667; letter-spacing:-.3px; line-height:1.5;}
#previewSection .pv3-brandtext small{
  display:block; font-size:7px; font-weight:500; color:#6c7788;
  letter-spacing:1.6px; margin-top:2px; line-height:1.5;
}
#previewSection .pv3-actions{display:flex; align-items:center; gap:8px;}
#previewSection .pv3-printchip{
  width:48px; height:36px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  background:#eef5ff; border:1px solid #91afd1; border-radius:6px;
  box-shadow:inset 0 1px 2px rgba(59,96,128,.15), 0 1px 0 #ffffff;
  cursor:pointer;
}
#previewSection .pv3-printlabel{
  font-family:"IBM Plex Mono",monospace;
  font-size:8px; font-weight:700; line-height:1; letter-spacing:.5px; color:#1f466e;
}
#previewSection .pv3-eq{display:inline-flex; align-items:flex-end; gap:2px; height:12px;}
#previewSection .pv3-eq i{
  width:5px; border-radius:1px; background:#185b98;
  box-shadow:0 0 3px rgba(68,138,204,.25);
}
#previewSection .pv3-eq i:nth-child(1){height:6px;}
#previewSection .pv3-eq i:nth-child(2){height:9px;}
#previewSection .pv3-eq i:nth-child(3){height:12px;}
#previewSection .pv3-printchip.is-active .pv3-eq i{animation:pv3Eq 1.4s ease-in-out infinite; transform-origin:bottom;}
#previewSection .pv3-printchip.is-active .pv3-eq i:nth-child(2){animation-delay:.15s;}
#previewSection .pv3-printchip.is-active .pv3-eq i:nth-child(3){animation-delay:.3s;}
@keyframes pv3Eq{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
#previewSection .pv3-power{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,#ffffff,#dbe2ed);
  border:1px solid #bdc7d6;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 #ffffff, 0 1px 2px rgba(41,52,73,.19);
}
#previewSection .pv3-power svg{width:11px; height:11px; color:#69768c;}
/* bottom band under the brand row */
#previewSection .pv3-bottom-band{
  position:absolute; left:0; right:0; bottom:0; height:44px;
  border-radius:0 0 21px 21px;
  border-top:1px solid rgba(196,204,217,.5);
  background:linear-gradient(180deg,rgba(223,229,238,.57) 0%,#edf0f6 50%,#c5cedb 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
#previewSection .pv3-led{
  position:absolute; left:50%; top:62px; width:36px; height:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(184,195,210,.7);
  box-shadow:0 1px 0 #ffffff;
}
#previewSection .pv3-screw{
  position:absolute; bottom:10px; width:4px; height:4px; border-radius:50%;
  background:#a5afbf;
}
#previewSection .pv3-screw-l{left:14px;}
#previewSection .pv3-screw-r{right:14px;}
#previewSection .pv3-vents{position:absolute; top:83px; display:flex; gap:3px;}
#previewSection .pv3-vents-l{left:8px;}
#previewSection .pv3-vents-r{right:8px;}
#previewSection .pv3-vents i{width:1px; height:6px; background:#9ba9be; display:block;}
#previewSection .pv3-vent{display:none;}
/* Figma paper slot: 14px dark slit, 20px insets, serrated inner line */
#previewSection .pv3-slot{
  position:absolute; left:20px; right:20px; bottom:14px; height:14px;
  border-radius:5px; border:1px solid #788699;
  background:linear-gradient(180deg,#151e2c,#354255 70%,#718096);
  box-shadow:0 1px 0 #ffffff, inset 0 3px 4px #0f182a;
}
#previewSection .pv3-slot::before{
  content:""; position:absolute; left:8px; right:8px; top:4px; height:1px; opacity:.35;
  background:repeating-linear-gradient(90deg,#d5ddeb 0 2px,transparent 2px 4px);
}
#previewSection .pv3-slot::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:1px;
  background:rgba(141,152,171,.4);
}
#previewSection .pv3-mfoot{
  position:absolute; bottom:-6px; width:28px; height:6px;
  border-radius:0 0 6px 6px;
  background:#b9c2d0;
}
#previewSection .pv3-mfoot-l{left:48px;}
#previewSection .pv3-mfoot-r{right:48px;}
/* soft shadow the slot casts onto the paper as it feeds out */
#previewSection .pv3-slotshadow{
  position:absolute; left:4px; right:4px; top:90px; height:24px; z-index:15;
  background:linear-gradient(180deg,rgba(37,48,68,.145),transparent);
  pointer-events:none;
}
/* Figma's slot is a plain slit — vent marks stay hidden */
#previewSection .pv3-vent{display:none;}
/* ---- paper viewport: the slip feeds out of the slot here ----
   pt-94px tucks the paper's top edge exactly behind the slot (the slot's
   bottom edge sits at 94px of the 108px machine); pb-12px leaves room for
   the zigzag tear edge so it stays visible at the paper's bottom. */
#previewSection .pv3-paperwell{
  position:relative; z-index:10;
  margin:0 20px;
  padding:94px 4px 12px;
  overflow:hidden;
}
/* THE FIX: the paper rests at translateY(0) once .is-done is set. The feed
   animation only exists on .is-printing, so removing that class without
   .is-done used to snap the paper back up and paint a blank slip. */
#previewSection .pv3-paper{
  position:relative; z-index:1;
  transform:translateY(-102%);
  /* Figma voucher shadow: two soft layers, clean white stock */
  box-shadow:0 3px 8px rgba(35,43,62,.04),
             0 15px 30px -16px rgba(35,43,62,.21);
}
#previewSection .pv3-printer.is-printing .pv3-paper{
  /* slow, steady feed like a real receipt printer */
  animation:pv3Feed 6s linear .2s forwards;
}
#previewSection .pv3-printer.is-done .pv3-paper{transform:translateY(0);}
@keyframes pv3Feed{from{transform:translateY(-102%);}to{transform:translateY(0);}}
/* ---- the slip: rebuilt 1:1 from the Figma "User greeting" voucher ----
   Specs pulled from the Figma Make project's own rendered DOM:
   square white stock, dot-grain + diagonal sheen, 1px dashed #cdd2dc
   dividers, mono 10px base, 14px product, 25px total, en-dash rows,
   real bar geometry, 8px zigzag tear edge. No folds, no beige. */
#previewSection .pv3-slip{
  position:relative;
  width:292px; max-width:100%; margin:0 auto;
  background-color:#ffffff;
  background-image:
    radial-gradient(rgba(100,116,139,.04) .5px, transparent .6px),
    linear-gradient(105deg,#ffffff,#fafbfe 50%,#ffffff);
  background-size:3px 3px,100% 100%;
  padding:12px 20px;
  color:#111111;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px; line-height:1.5;
}
#previewSection .pv3-slipbrand{
  text-align:center;
  font-family:"Geist","Noto Sans Myanmar",sans-serif;
  font-size:20px; font-weight:600; line-height:24px; letter-spacing:-.6px;
  color:#111111;
}
#previewSection .pv3-cap{
  margin-top:2px; text-align:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:9px; font-weight:400; letter-spacing:2px; color:#596272;
}
/* dashed section separators, exactly like Figma */
#previewSection .pv3-sect{margin-top:6px; border-top:1px dashed #cdd2dc; padding-top:6px;}
#previewSection .pv3-dt{display:flex; justify-content:space-between; gap:8px; font-size:10px; color:#111111;}
#previewSection .pv3-voucher{margin-top:2px; text-align:center; font-size:9px; color:#596272;}
#previewSection .pv3-itemrow{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
#previewSection .pv3-itemrow b{
  font-family:"Geist","Noto Sans Myanmar",sans-serif;
  font-size:14px; font-weight:600; color:#111111; min-width:0; overflow-wrap:anywhere;
}
#previewSection .pv3-qty{flex:none; padding-top:2px; font-size:10px; color:#596272;}
#previewSection .pv3-plan{margin-top:2px; font-size:10px; color:#596272; overflow-wrap:anywhere;}
#previewSection .pv3-rows{margin-top:8px; display:grid; gap:6px; font-size:11px;}
#previewSection .pv3-row{display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; align-items:baseline;}
#previewSection .pv3-row > span{display:flex; justify-content:space-between; color:#111111;}
#previewSection .pv3-row > span > i{font-style:normal;}
#previewSection .pv3-row > b{font-weight:500; color:#111111; min-width:0; overflow-wrap:anywhere;}
#previewSection .pv3-slip .preview-na{color:#B9BECB;}
#previewSection .pv3-total{
  margin-top:6px; border-top:1px dashed #cdd2dc; border-bottom:1px dashed #cdd2dc;
  padding:8px 0; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#previewSection .pv3-total-l b{display:block; font-size:10px; font-weight:500; letter-spacing:1px; color:#111111;}
#previewSection .pv3-total-l span{display:block; font-size:8px; color:#596272; margin-top:2px;}
#previewSection .pv3-amount{
  font-family:"Geist","Noto Sans Myanmar",sans-serif;
  font-size:25px; font-weight:600; line-height:32px; letter-spacing:-.7px;
  color:#111111; white-space:nowrap;
}
#previewSection .pv3-amount small{font-size:12px; font-weight:500; letter-spacing:normal; margin-left:6px;}
#previewSection .pv3-barcode{margin-top:8px; text-align:center;}
#previewSection .pv3-barcode svg{display:block; width:80%; height:16px; margin:0 auto; color:#111111;}
#previewSection .pv3-barcode svg rect{fill:currentColor;}
#previewSection .pv3-barcode > span{display:block; margin-top:6px; font-size:8px; letter-spacing:.4px; color:#596272;}
/* zigzag tear-off edge: pure white, 10px cycle, 7px deep — like Figma */
#previewSection .pv3-zigzag{
  position:absolute; left:0; right:0; top:100%;
  display:block; width:100%; height:8px; fill:#ffffff;
}
#previewSection .preview-empty{padding:26px 10px; text-align:center; color:#9AA1B8; font-size:13px;}
/* the slip container must stay invisible; the slip owns all visuals */
#previewSection .preview-final-box{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  max-width:none !important; margin:0 !important; padding:0 !important;
  max-height:none !important; overflow:visible !important; min-height:0 !important;
}
/* ---- total card + confirm, like Figma ---- */
#previewSection .pv3-totalrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid #e1e5ee; border-radius:12px;
  padding:8px 12px; margin-top:8px;
  box-shadow:0 2px 6px rgba(37,42,53,.02);
}
#previewSection .pv3-totaltext span{display:block; font-size:10px; color:#596477;}
#previewSection .pv3-totaltext b{display:block; margin-top:2px; white-space:nowrap; font-weight:400;}
#previewSection .pv3-totaltext .pv3-tamt{font-size:20px; font-weight:600; letter-spacing:-.5px; color:#111111;}
#previewSection .pv3-totaltext .pv3-tks{font-size:12px; font-weight:500; margin-left:4px; color:#111111;}
#previewSection .pv3-ctawrap{flex:none;}
#previewSection #previewOrderBtn.pv3-confirm{
  margin-top:0 !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:8px 12px;
  background:#252a35; color:#fff; border:1px solid #252a35; border-radius:8px;
  cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:500;
  white-space:nowrap;
}
#previewSection #previewOrderBtn.pv3-confirm:hover:not(:disabled){background:#3b4251; border-color:#3b4251;}
#previewSection #previewOrderBtn.pv3-confirm:disabled{opacity:.45; cursor:default;}
#previewSection #previewOrderBtn.pv3-confirm .btn-icon{width:14px; height:14px; flex:none;}
#previewSection #previewProgressBar{margin-top:10px;}
/* ---- microcopy / support / footer, like Figma ---- */
#previewSection .pv3-micro{
  display:flex; align-items:flex-start; gap:8px;
  margin:6px 0 0; padding:0 4px; font-size:10px; line-height:16px; color:#596477;
}
#previewSection .pv3-micro svg{width:13px; height:13px; flex:none; margin-top:2px;}
#previewSection .pv3-support{
  display:inline-flex; align-items:center; gap:6px;
  margin:4px 0 0; padding:0 4px; min-height:36px;
  font-size:12px; font-weight:500; color:#4d586b; text-decoration:none;
}
#previewSection .pv3-support:hover{color:#252a35;}
#previewSection .pv3-support svg{width:14px; height:14px; flex:none;}
#previewSection .pv3-support .pv3-arrow{width:12px; height:12px; flex:none;}
#previewSection .pv3-foot{
  margin:16px 0 0; padding:16px 0;
  border-top:1px solid #e1e5ee;
  font-size:11px; color:#596477;
}
/* ---- beat the legacy light-mode button/section rules ---- */
body.light-mode #previewSection.order-preview-view{
  background:#EDF0F7 !important;
  background-image:none !important;
  color:#0F172A !important;
}
body.light-mode #previewSection #previewOrderBtn.pv3-confirm{
  background:#252a35 !important; color:#fff !important; border:1px solid #252a35 !important;
  box-shadow:none !important;
  text-shadow:none !important; filter:none !important; animation:none !important;
}
body.light-mode #previewSection #previewOrderBtn.pv3-confirm:hover:not(:disabled){
  background:#3b4251 !important; border-color:#3b4251 !important;
  box-shadow:none !important; filter:none !important; transform:none !important;
}
body.light-mode #previewSection #previewOrderBtn.pv3-confirm:disabled{
  opacity:.45 !important; box-shadow:none !important; transform:none !important;
}
/* ---- compact on small screens (Figma: single column everywhere) ---- */
@media (max-width:520px){
  #previewSection.order-preview-view{padding-top:0 !important;}
  #previewSection .pv3-shell{padding:4px 12px 28px;}
}
/* ---- reduced motion: no feed animation, slip simply visible ---- */
@media (prefers-reduced-motion: reduce){
  #previewSection .pv3-printer.is-printing .pv3-paper{animation:none !important;}
  #previewSection .pv3-printer.is-printing .pv3-paper,
  #previewSection .pv3-printer.is-done .pv3-paper{transform:none !important;}
  #previewSection .pv3-printchip.is-active .pv3-eq i{animation:none !important;}
}
/* ---- print: the slip only ---- */
@media print{
  body > *:not(#previewSection){display:none !important;}
  #previewSection.order-preview-view{
    position:static !important; inset:auto !important; display:block !important;
    overflow:visible !important; background:#fff !important; min-height:auto !important; padding:0 !important;
  }
  #previewSection .pv3-shell{max-width:480px !important; margin:0 auto !important; padding:0 !important;}
  #previewSection .pv3-topbar,
  #previewSection .pv3-machine,
  #previewSection .pv3-statusline,
  #previewSection .pv3-totalrow,
  #previewSection .pv3-micro,
  #previewSection .pv3-support,
  #previewSection .pv3-foot{display:none !important;}
  #previewSection .pv3-card{background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important;}
  #previewSection .pv3-paperwell{overflow:visible !important; margin:0 !important; padding:0 !important;}
  #previewSection .pv3-paper{transform:none !important; animation:none !important; box-shadow:none !important;}
  #previewSection .pv3-slip{border:1px solid #E2E8F0;}
}

/* v14: order-tracking plan logo + mobile smoothness.
   The lag on phones came from three expensive paint effects:
   (1) body background-attachment:fixed repaints the full-page gradient every
   scroll frame, (2) every product .card is a live backdrop-blur(26px) surface,
   (3) the sticky .categories bar blurs continuously while scrolling.
   On mobile these are replaced with cheap equivalents; desktop is untouched. */
.order-status-details .mo-plan-logo{display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; overflow:hidden; vertical-align:-7px; margin-right:8px;
  background:#f1f4f9; font-size:15px; line-height:1;}
.order-status-details .mo-plan-logo img{width:100%; height:100%; object-fit:cover; display:block;}
@media(max-width:760px){
  body, body.light-mode{background-attachment:scroll !important;}
  .card{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
  body:not(.light-mode) .card{
    background:linear-gradient(135deg,rgba(26,54,104,.96),rgba(10,30,70,.97)) !important;}
  .categories{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
}

/* My Orders -- Figma "User greeting" /orders screen: light app page reusing
   the account appbar + bottom tab bar, soft pastel stat cards with status
   icons, and white order-history cards. Inner order-detail view untouched. */
.mo-headrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.mo-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #E9E9F2; color:#23233A;
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; cursor:pointer;
}
.mo-back-btn:active{ transform:scale(.97); }
.mo-page-title{ font-size:20px; font-weight:800; color:#23233A; letter-spacing:-.01em; margin:0; }
.mo-section-title{ font-size:17px; font-weight:800; color:#23233A; margin:20px 2px 10px; }

/* Stat cards: soft pastel gradients with a 3D bottom edge, status icon on
   top, big colored number, colored label. Tapping filters the list below. */
.mo-fstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.mo-fstat{
  border:none; border-radius:18px; padding:14px 6px 12px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px; user-select:none;
  transition:transform .12s ease; font-family:inherit;
}
.mo-fstat:active{ transform:scale(.95); }
.mo-fstat.active{ outline:2px solid #7C5CFC; outline-offset:2px; }
.mo-fstat-icon{ width:30px; height:30px; }
.mo-fstat-icon svg{ width:100%; height:100%; display:block; }
.mo-fstat-num{ font-size:30px; font-weight:800; line-height:1.25; }
.mo-fstat-label{ font-size:13px; font-weight:600; }
.mo-fstat.total{ background:linear-gradient(180deg,#F5F0FF,#EADFFF); color:#7C3AED; box-shadow:0 3px 0 #D9CBF7; }
.mo-fstat.pending{ background:linear-gradient(180deg,#FDF6DE,#FAEDC2); color:#A16207; box-shadow:0 3px 0 #EBD9A4; }
.mo-fstat.completed{ background:linear-gradient(180deg,#E2F7E9,#CDEFD8); color:#15803D; box-shadow:0 3px 0 #B2E0C0; }
.mo-fstat.failed{ background:linear-gradient(180deg,#FDE9EC,#FAD9DE); color:#DC2645; box-shadow:0 3px 0 #F0BFC6; }
@media(max-width:380px){
  .mo-fstats{ gap:7px; }
  .mo-fstat{ padding:10px 4px 9px; border-radius:14px; }
  .mo-fstat-icon{ width:24px; height:24px; }
  .mo-fstat-num{ font-size:23px; }
  .mo-fstat-label{ font-size:11px; }
}

/* Order history cards: white, code + chevron, plan, date, divider,
   status pill + amount. */
.mo-flist{ display:flex; flex-direction:column; gap:12px; }
.mo-flist .chat-empty{ color:#8A8AA3; }
.mo-fcard{
  background:#fff; border:1px solid #EEF0F6; border-radius:16px; padding:15px 16px;
  box-shadow:0 2px 10px rgba(35,35,58,.05); cursor:pointer; transition:box-shadow .15s ease, transform .15s ease;
}
.mo-fcard:hover{ box-shadow:0 4px 18px rgba(35,35,58,.10); }
.mo-fcard:active{ transform:scale(.995); }
.mo-fcard-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mo-fcard-code{ font-size:14px; font-weight:800; color:#23233A; display:flex; align-items:center; min-width:0; }
.mo-fcard-chev{ width:18px; height:18px; color:#B9B9CC; flex:0 0 auto; }
.mo-fcard-plan{ font-size:13px; color:#6E6E85; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mo-fcard-date{ font-size:12.5px; color:#9AA0B4; margin-top:3px; }
.mo-fcard-div{ height:1px; background:#F1F1F6; margin:12px 0; }
.mo-fcard-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mo-fpill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; }
.mo-fpill svg{ width:14px; height:14px; }
.mo-fpill.pending{ background:#FDF3D7; color:#A16207; }
.mo-fpill.approved,.mo-fpill.completed{ background:#DFF5E8; color:#0F7A3F; }
.mo-fpill.rejected{ background:#FDE7EA; color:#D61E4D; }
.mo-fcard-amount{ font-size:15px; font-weight:800; color:#23233A; white-space:nowrap; }

/* My Orders -- compact pass: logo-only brand, tighter vertical rhythm, and
   shorter stat cards. Scoped to the orders page; the account page keeps its
   own v15 header untouched. */
.mo-appbar{ padding:2px 2px 0; }
.mo-brand-logo{ height:32px; width:auto; display:block; border-radius:9px; }
.mo-headrow{ margin-top:8px; }
.mo-back-btn{ padding:7px 14px; font-size:12.5px; }
.mo-page-title{ font-size:18px; }
.mo-fstats{ gap:8px; margin-top:10px; }
.mo-fstat{ padding:10px 4px 8px; border-radius:14px; gap:1px; }
.mo-fstat-icon{ width:22px; height:22px; }
.mo-fstat-num{ font-size:22px; line-height:1.2; }
.mo-fstat-label{ font-size:11px; }
.mo-fstat.total{ box-shadow:0 2px 0 #D9CBF7; }
.mo-fstat.pending{ box-shadow:0 2px 0 #EBD9A4; }
.mo-fstat.completed{ box-shadow:0 2px 0 #B2E0C0; }
.mo-fstat.failed{ box-shadow:0 2px 0 #F0BFC6; }
.mo-section-title{ margin:14px 2px 8px; font-size:16px; }
.mo-flist{ gap:10px; }
.mo-fcard{ padding:12px 14px; border-radius:14px; }
.mo-fcard-div{ margin:9px 0; }
@media(max-width:380px){
  .mo-brand-logo{ height:28px; }
  .mo-fstats{ gap:6px; }
  .mo-fstat{ padding:8px 3px 7px; border-radius:12px; }
  .mo-fstat-icon{ width:19px; height:19px; }
  .mo-fstat-num{ font-size:19px; }
  .mo-fstat-label{ font-size:10px; }
}

/* ===== My Orders v3: kill dead space above the header ===== */
/* User report 2026-10-02: too much empty space at the top of My Orders.
   Pull the column up and tighten vertical rhythm (orders-only via .mo-*,
   account page untouched). */
.mo-col{ padding-top:2px; gap:10px; }
.mo-appbar{ padding:0 2px; }
.mo-headrow{ margin-top:0; }
/* ===== Account header: real Gamepay Hub logo (replaces "+" placeholder) ===== */
.acct-brand-logo{ height:36px; width:auto; border-radius:10px; display:block; }
/* =====================================================================
   Gamepay Hub main page -- Figma "User-greeting" design (100% faithful).
   All classes are gp- prefixed so the products page, product page, cart,
   orders, news and account UI are completely untouched.
   ===================================================================== */

/* While the Figma landing is showing, hide the legacy store chrome. */
body.lp-mode{
  background:#faf8ff !important;
  background-image:none !important;
  color:#242330 !important;
}
body.lp-mode .compact-header,
body.lp-mode .neon-announcement,
body.lp-mode #particles{
  display:none !important;
}
body.lp-mode .page{
  width:min(1160px,100%) !important;
  padding:16px 16px 0 !important;
}
@media(min-width:640px){
  body.lp-mode .page{ padding:16px 32px 0 !important; }
}

/* The theme forces dark-navy on every button in light mode -- restore the
   Figma colors explicitly for the landing. */
body.light-mode .gp-btn,
body.light-mode .gp-nav-link,
body.light-mode .gp-account,
body.light-mode .gp-service,
body.light-mode .gp-tab,
body.light-mode .gp-card-btn,
body.light-mode .gp-paystrip,
body.light-mode .gp-bottomnav button,
body.light-mode .gp-foot-nav button,
body.light-mode .gp-more,
body.light-mode .gp-dialog-close{
  color:inherit !important;
}
body.light-mode .gp-btn-primary,
body.light-mode .gp-card-btn,
body.light-mode .gp-tab.is-active,
body.light-mode .gp-bottomnav button.is-active{
  color:#fff !important;
}

.gp-sr{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* Scroll progress bar (Figma: 2px purple, scaleX-driven) */
.gp-progress{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:2px;
  background:#6231c8;
  transform-origin:left center;
  transform:scaleX(0);
}
@media (prefers-reduced-motion:reduce){
  .gp-progress{ display:none; }
}

/* Scroll-triggered 3D reveal — bold 3D-website style */
.gp-reveal{ opacity:1; }
.js .gp-reveal{
  opacity:0;
  transform:translateY(48px) perspective(1000px) rotateX(14deg) scale(.96);
  transform-origin:center top;
  transition:opacity .7s ease-out, transform .7s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.gp-reveal.is-visible{
  opacity:1;
  transform:translateY(0) perspective(1000px) rotateX(0deg) scale(1);
  will-change:auto;
}
/* stagger siblings */
.gp-reveal[data-gp-delay="1"]{ transition-delay:.1s; }
.gp-reveal[data-gp-delay="2"]{ transition-delay:.2s; }
.gp-reveal[data-gp-delay="3"]{ transition-delay:.3s; }
.gp-reveal[data-gp-delay="4"]{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){
  .gp-reveal{ opacity:1; transform:none; transition:none; }
}
/* hero parallax drift on scroll */
.gp-banner{ transform:translateZ(0); }
.gp-banner img.gp-slide{
  transform:scale(1.06);
  transition:transform 6s ease-out, opacity .6s ease;
}
.gp-banner img.gp-slide.is-active{ transform:scale(1); }

/* 3D tilt on product cards (Figma: subtle mouse-follow tilt, no shadow change) */
@media (hover:hover) and (min-width:768px){
  .gp-card{
    transition:transform .25s ease;
    transform-style:preserve-3d;
  }
  .gp-card:hover{
    transform:translateY(-5px) perspective(1000px) rotateX(2deg) rotateY(-2deg);
  }
}
/* staggered entrance when carousel cards render */
@keyframes gp-card-in{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.gp-marquee-track .gp-card{ animation:gp-card-in .5s cubic-bezier(.22,.8,.24,1) backwards; }
.gp-marquee-track .gp-card:nth-child(2){ animation-delay:.06s; }
.gp-marquee-track .gp-card:nth-child(3){ animation-delay:.12s; }
.gp-marquee-track .gp-card:nth-child(4){ animation-delay:.18s; }
.gp-marquee-track .gp-card:nth-child(5){ animation-delay:.24s; }
.gp-marquee-track .gp-card:nth-child(n+6){ animation-delay:.3s; }
@media (prefers-reduced-motion:reduce){
  .gp-marquee-track .gp-card{ animation:none; }
}

/* Header */
.gp-header{
  display:flex; align-items:center; gap:16px;
  height:72px; padding:0 8px;
  background:#fff;
  border-bottom:1px solid #eae5f1;
  position:sticky; top:0; z-index:50;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.gp-brand{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:0;
}
.gp-logo{
  width:48px; height:48px; border-radius:12px; object-fit:cover;
  box-shadow:0 4px 14px #6231c824;
}
.gp-wordmark{
  font-size:17px; font-weight:800; color:#242330; white-space:nowrap;
}
.gp-nav{
  display:none; align-items:center; gap:28px; margin-left:40px;
}
@media(min-width:768px){ .gp-nav{ display:flex; } }
/* Mobile: show Store / My orders / News as a compact pill row under the header */
@media(max-width:767px){
  .gp-header{ flex-wrap:wrap; height:auto; padding:10px 12px; row-gap:10px; }
  .gp-nav{
    display:flex; order:3; flex:1 1 100%;
    margin-left:0; margin-top:0; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .gp-nav::-webkit-scrollbar{ display:none; }
  .gp-nav-link{
    font-size:12.5px; padding:8px 14px; white-space:nowrap; flex:0 0 auto;
    background:#f4f0fa; border-radius:999px; color:#51475f;
  }
  .gp-nav-link svg{ width:15px; height:15px; }
  .gp-nav-link.is-active{ background:#6231c8; color:#fff; }
  .gp-nav-link.is-active::after{ display:none; }
}
.gp-nav-link{
  display:flex; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer;
  font-size:14px; font-weight:600; color:#51475f;
  padding:8px 2px; position:relative;
  font-family:inherit;
}
.gp-nav-link svg{ width:17px; height:17px; }
.gp-nav-link:hover{ color:#6231c8; }
.gp-nav-link.is-active{ color:#6231c8; }
.gp-nav-link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:2px; background:#6231c8;
}
.gp-account{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  border:1px solid #eae5f1; background:#fcfbfe; border-radius:999px;
  padding:12px; cursor:pointer;
  font-size:14px; font-weight:600; color:#242330;
  font-family:inherit;
}
.gp-account svg{ width:18px; height:18px; color:#6231c8; }
.gp-account:hover{ border-color:#6231c8; }
@media(min-width:768px){ .gp-account{ padding:12px 18px; } }
@media(max-width:767px){ .gp-account span{ display:none; } }

/* Main */
.gp-main{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#242330;
  display:flex; flex-direction:column; gap:16px;
  padding:16px 0 24px;
}

/* Hero */
.gp-hero{
  background:#fff; border:1px solid #e2d8f2; border-radius:16px; overflow:hidden;
}
.gp-banner{
  position:relative; overflow:hidden; background:#f5f0fb;
  aspect-ratio:16/9;
}
/* Pad (768-1099px): keep 16:9 so the 16:9 artwork fills the frame with
   no empty side gutters and no cropping. Only true desktop goes 3:1. */
@media(min-width:1100px){ .gp-banner{ aspect-ratio:3/1; } }
.gp-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; transition:opacity .6s ease;
}
.gp-slide.is-active{ opacity:1; }
.gp-hero-actions{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  padding:14px 16px;
  border-top:1px solid #eee8f6; background:#faf7ff;
}
.gp-hero-actions .gp-btn{ justify-content:center; padding:11px 8px; font-size:11.5px; white-space:nowrap; }
@media (min-width:560px){
  .gp-hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; }
  .gp-hero-actions .gp-btn{ padding:11px 18px; font-size:12px; }
}
.gp-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #dfd2f3; background:#fff; color:#6231c8;
  border-radius:12px; padding:11px 18px;
  font-size:12px; font-weight:700; cursor:pointer;
  font-family:inherit; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.gp-btn svg{ width:16px; height:16px; }
.gp-btn .gp-arrow{ width:14px; height:14px; }
.gp-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px #6231c822; }
.gp-btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#7d44d8 0%,#6231c8 55%,#5528b0 100%);
  border-color:#4a1f9e; color:#fff;
  /* 3D raised-block depth: solid base + soft ambient shadow */
  box-shadow:0 5px 0 #431a8f, 0 10px 22px rgba(98,49,200,.38),
             inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
/* shine sweep layer */
.gp-btn-primary::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-70%; width:45%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.0) 20%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.0) 80%,transparent 100%);
  transform:skewX(-18deg); pointer-events:none; z-index:1;
}
.gp-btn-primary:hover{
  background:linear-gradient(180deg,#8a52e0 0%,#6d3ad2 55%,#5e2cbc 100%);
  border-color:#4a1f9e;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 7px 0 #431a8f, 0 16px 30px rgba(98,49,200,.45),
             inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.15);
  filter:saturate(1.08);
}
.gp-btn-primary:hover::after{ animation:gp-btn-shine .8s ease; }
.gp-btn-primary:active{
  transform:translateY(3px) scale(.99);
  box-shadow:0 1px 0 #431a8f, 0 4px 10px rgba(98,49,200,.3),
             inset 0 2px 6px rgba(0,0,0,.25);
}
.gp-btn-primary:focus-visible{ outline:3px solid #b794f6; outline-offset:2px; }
@keyframes gp-btn-shine{ from{ left:-70%; } to{ left:140%; } }

/* Services trust bar */
.gp-services{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border:1px solid #e8dff2; border-radius:12px; overflow:hidden;
}
.gp-service{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:72px; padding:14px 8px;
  background:none; border:none; border-left:1px solid #e8dff2; cursor:pointer;
  font-size:11px; font-weight:600; color:#39254e;
  font-family:inherit;
}
.gp-service:first-child{ border-left:none; }
.gp-service svg{ width:22px; height:22px; color:#6231c8; }
.gp-service:hover{ background:#faf7ff; }
@media(min-width:640px){
  .gp-service{ flex-direction:row; font-size:14px; }
}

/* Discount plans */
.gp-discount{ display:flex; flex-direction:column; gap:12px; }
.gp-discount-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gp-discount-head h2{
  display:flex; align-items:center; gap:8px;
  margin:0; font-size:20px; font-weight:700; color:#242330;
}
.gp-discount-head h2 svg{ width:22px; height:22px; color:#6231c8; }
.gp-count{
  background:#eee5fc; color:#6231c8;
  font-size:10px; font-weight:700;
  border-radius:999px; padding:3px 9px;
}
.gp-tabs{
  display:flex; gap:4px; overflow-x:auto;
  background:#f5f1fb; border-radius:8px; padding:4px;
  scrollbar-width:none;
}
.gp-tabs::-webkit-scrollbar{ display:none; }
.gp-tab{
  flex:0 0 auto;
  border:none; background:none; cursor:pointer;
  font-size:10px; font-weight:600; color:#51475f;
  padding:9px 14px; border-radius:6px;
  font-family:inherit; white-space:nowrap;
}
@media(min-width:640px){ .gp-tab{ font-size:12px; } }
.gp-tab:hover{ background:#fff; }
.gp-tab.is-active{
  background:#6231c8; color:#fff;
  box-shadow:0 4px 10px #6231c833;
}
/* Discount marquee: continuous smooth loop */
.gp-marquee-view{
  overflow:hidden;
  margin:0 -2px; padding:4px 2px 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.gp-marquee-track{
  display:flex; gap:12px; width:max-content;
  animation:gp-marquee 28s linear infinite;
  will-change:transform;
}
.gp-marquee-view:hover .gp-marquee-track,
.gp-marquee-view:active .gp-marquee-track{
  animation-play-state:paused;
}
@keyframes gp-marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion:reduce){
  .gp-marquee-track{ animation:none; }
}
/* "Live discounts" badge in the section head */
.gp-marquee-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; color:#6231c8;
  background:#f1e9fd; border-radius:999px; padding:6px 12px;
}
.gp-marquee-dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:gp-dot-pulse 1.8s ease-out infinite;
}
@keyframes gp-dot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion:reduce){
  .gp-marquee-dot{ animation:none; }
}

/* Product card */
.gp-card{
  flex:0 0 auto; width:140px;
  background:#fff; border:1px solid #d8c9eb; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 0 #e7dff0, 0 10px 24px #6231c814;
  display:flex; flex-direction:column;
}
@media(min-width:640px){ .gp-card{ width:160px; } }
.gp-card-band{
  position:relative; height:56px;
  display:flex; align-items:center; justify-content:flex-start;
  padding-left:12px;
  border-bottom:1px solid #eee6f8;
}
.gp-card-logo{
  width:38px; height:38px; border-radius:10px; background:#fff;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.gp-card-logo img{ width:30px; height:30px; object-fit:contain; }
.gp-card-save{
  position:absolute; top:6px; right:6px;
  display:inline-flex; align-items:center; gap:3px;
  background:linear-gradient(180deg,#7d44d8,#5e2cbc);
  color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.02em;
  border-radius:7px; padding:3px 7px;
  border:1.5px solid #fff;
  box-shadow:0 2px 6px rgba(98,49,200,.35);
  transform:rotate(-4deg);
}
.gp-card-save svg{ width:9px; height:9px; }
.gp-card-body{
  padding:10px; display:flex; flex-direction:column; gap:3px; flex:1;
}
.gp-card-cat{
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600; color:#6231c8;
}
.gp-card-cat svg{ width:13px; height:13px; }
.gp-card-name{
  margin:0; font-size:14px; font-weight:700; color:#20182b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:20px;
}
.gp-card-from{
  font-size:11px; color:#51475f; min-height:15px;
}
.gp-card-from s{ color:#8a7f96; margin-left:4px; }
.gp-card-price{
  font-size:19px; font-weight:800; color:#4d229a;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.gp-card-price small{
  font-size:12px; font-weight:500; color:#51475f; margin-left:3px;
}
.gp-card-btn{
  margin:8px 10px 10px;
  min-height:40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:0 12px;
  background:#6231c8; border:none; border-radius:8px;
  color:#fff; font-size:11.5px; font-weight:700; cursor:pointer;
  font-family:inherit;
  transition:background .2s ease;
}
.gp-card-btn svg{ width:15px; height:15px; flex:0 0 auto; }
.gp-card-btn:hover{ background:#4c229f; }
.gp-empty{
  padding:32px 16px; text-align:center; color:#6c5b7d; font-size:13px;
  background:#fff; border:1px dashed #d8c9eb; border-radius:12px;
  flex:1 1 auto;
}
/* loading shimmer while discounts resolve */
.gp-card.gp-skel{ pointer-events:none; }
.gp-card.gp-skel .gp-card-band,
.gp-skel-line{
  background:linear-gradient(90deg,#f1eaf9 25%,#e4d6f5 50%,#f1eaf9 75%);
  background-size:200% 100%;
  animation:gp-skel-shimmer 1.4s ease-in-out infinite;
}
.gp-skel-line{ display:block; height:12px; border-radius:6px; margin:4px 0; }
.gp-skel-line.short{ width:60%; }
@keyframes gp-skel-shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}
@media (prefers-reduced-motion:reduce){
  .gp-card.gp-skel .gp-card-band, .gp-skel-line{ animation:none; }
}

/* Payment strip */
.gp-paystrip{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px; width:100%;
  background:linear-gradient(120deg,#f7f2ff 0%,#f2e9ff 50%,#f7f2ff 100%);
  background-size:200% 100%;
  border:1px solid #ded1ef; border-radius:16px;
  padding:16px; cursor:pointer; text-align:left;
  font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:gp-paystrip-sheen 5s ease-in-out infinite;
}
@keyframes gp-paystrip-sheen{
  0%,100%{ background-position:0% 0; }
  50%{ background-position:100% 0; }
}
.gp-paystrip:hover{
  border-color:#6231c8;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(98,49,200,.16);
  animation-play-state:paused;
}
.gp-paystrip:active{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .gp-paystrip{ animation:none; }
}
.gp-pay-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:#fff; border:1px solid #eee6f8;
  display:grid; place-items:center;
  animation:gp-pay-ico-pulse 2.6s ease-in-out infinite;
}
@keyframes gp-pay-ico-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(98,49,200,.25); }
  50%{ box-shadow:0 0 0 8px rgba(98,49,200,0); }
}
@media (prefers-reduced-motion:reduce){
  .gp-pay-ico{ animation:none; }
}
.gp-pay-ico svg{ width:22px; height:22px; color:#6231c8; }
.gp-pay-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.gp-pay-text strong{ font-size:14px; font-weight:700; color:#342044; }
.gp-pay-text small{ font-size:11px; color:#6c5b7d; }
.gp-pay-logos{ display:flex; align-items:center; }
.gp-pay-logos img{
  width:32px; height:32px; border-radius:8px; object-fit:cover;
  border:2px solid #fff; margin-left:-8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.gp-pay-logos img:first-child{ margin-left:0; }
.gp-pay-chev{ width:20px; height:20px; color:#6231c8; flex:0 0 auto; transition:transform .2s ease; }
.gp-paystrip:hover .gp-pay-chev{ transform:translateX(4px); }

/* Help section */
.gp-help{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media(min-width:900px){ .gp-help{ grid-template-columns:0.8fr 1.2fr; } }
.gp-help-card{
  background:#fff; border:1px solid #ded1ef; border-radius:16px;
  box-shadow:0 8px 24px #6231c810;
  padding:24px; display:flex; flex-direction:column; gap:8px;
}
.gp-help-ico{
  width:48px; height:48px; border-radius:14px; background:#eee4fc;
  display:grid; place-items:center; margin-bottom:4px;
}
.gp-help-ico svg{ width:24px; height:24px; color:#6231c8; }
.gp-help-card h2{ margin:0; font-size:20px; font-weight:700; color:#281b3a; }
.gp-help-card > p{ margin:0; font-size:12px; color:#64536f; }
.gp-help-btns{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.gp-help-btns .gp-btn{ flex:1; justify-content:center; padding:13px 18px; font-size:13px; }
.gp-help-btns .gp-btn:not(.gp-btn-primary){
  background:#faf7ff; border-color:#ded1ef; color:#54299a;
}
.gp-guide-card{
  position:relative;
  background:linear-gradient(180deg,#fcfaff,#efe5fb);
  border:1px solid #dfd3ef; border-radius:16px;
  box-shadow:6px 6px 0 #e3d5ef;
  padding:24px; display:flex; flex-direction:column; gap:6px;
}
.gp-guide-ico{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; border-radius:12px;
  background:#fff; border:1px solid #e8dff2;
  display:grid; place-items:center;
}
.gp-guide-ico svg{ width:20px; height:20px; color:#6231c8; }
.gp-kicker{
  font-size:10px; font-weight:700; letter-spacing:1.5px; color:#7954a4;
}
.gp-guide-card h3{ margin:0; font-size:20px; font-weight:700; color:#281b3a; }
.gp-guide-sub{ margin:0; font-size:12px; color:#6b5b7b; }
.gp-faq{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.gp-faq-item{
  background:#fff; border:1px solid #e1d6ed; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 0 #e5dbf0, 0 8px 18px rgba(98,49,200,.06);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.gp-faq-item.open{
  border-color:#b698df;
  box-shadow:0 4px 0 #d9c6f2, 0 12px 26px rgba(98,49,200,.12);
}
.gp-faq-head{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:64px; padding:12px;
  cursor:pointer; background:none; border:none;
  font-family:inherit; text-align:left;
}
.gp-faq-ico{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(180deg,#f9f5ff,#e8d9fc);
  box-shadow:0 3px 0 #d2bde9;
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.22,.8,.24,1);
}
.gp-faq-item.open .gp-faq-ico{ transform:scale(1.06); }
.gp-faq-ico svg{ width:18px; height:18px; color:#6231c8; }
.gp-faq-q{ flex:1; font-size:13px; font-weight:600; color:#342044; line-height:20px; }
.gp-faq-chev{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:#f4edfc; display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.22,.8,.24,1), background .25s ease;
}
.gp-faq-chev svg{ width:15px; height:15px; color:#7954a4; transition:color .25s ease; }
.gp-faq-item.open .gp-faq-chev{ transform:rotate(180deg); background:#6231c8; }
.gp-faq-item.open .gp-faq-chev svg{ color:#fff; }
/* smooth expand/collapse */
.gp-faq-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,.8,.24,1);
}
.gp-faq-item.open .gp-faq-panel{ grid-template-rows:1fr; }
.gp-faq-panel-in{ overflow:hidden; min-height:0; }
.gp-faq-panel-in::before{
  content:""; display:block; height:1px; margin:0 12px;
  background:#ece2f5;
  opacity:0; transition:opacity .3s ease;
}
.gp-faq-item.open .gp-faq-panel-in::before{ opacity:1; }
.gp-faq-panel p{
  margin:0; padding:12px 14px 14px 60px;
  font-size:13px; line-height:24px; color:#64536f;
}
/* answer text animates in with a soft rise when opened */
.gp-faq-item .gp-faq-panel p{
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease .1s, transform .35s cubic-bezier(.22,.8,.24,1) .1s;
}
.gp-faq-item.open .gp-faq-panel p{
  opacity:1; transform:translateY(0);
}
.gp-faq-panel p a{ color:#6231c8; font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .gp-faq-panel{ transition:none; }
  .gp-faq-chev, .gp-faq-ico{ transition:none; }
}
.gp-more{
  width:100%; margin-top:12px; min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border:1px solid #dfd2ef; border-radius:12px;
  cursor:pointer;
  font-size:12px; font-weight:700; color:#6231c8;
  font-family:inherit;
  transition:background .2s ease;
}
.gp-more svg{ width:16px; height:16px; transition:transform .25s ease; }
.gp-more:hover{ background:#f5effc; }
.gp-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* hidden questions pop in with a bouncy stagger */
#gpFaqMore .gp-faq-item{ opacity:0; }
#gpFaqMore.show .gp-faq-item{
  animation:gp-faq-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}
#gpFaqMore.show .gp-faq-item:nth-child(2){ animation-delay:.09s; }
#gpFaqMore.show .gp-faq-item:nth-child(3){ animation-delay:.18s; }
#gpFaqMore.show .gp-faq-item:nth-child(4){ animation-delay:.27s; }
@keyframes gp-faq-pop{
  from{ opacity:0; transform:translateY(26px) scale(.94); }
  60%{ opacity:1; transform:translateY(-4px) scale(1.01); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* ...and fold away in reverse when "Show fewer questions" is tapped */

#gpFaqMore.closing{ overflow:hidden; transition:height .4s cubic-bezier(.4,0,.2,1) .15s; }
#gpFaqMore.closing .gp-faq-item{
  animation:gp-faq-out .3s cubic-bezier(.4,0,1,1) both;
}
#gpFaqMore.closing .gp-faq-item:nth-child(3){ animation-delay:.07s; }
#gpFaqMore.closing .gp-faq-item:nth-child(2){ animation-delay:.14s; }
#gpFaqMore.closing .gp-faq-item:nth-child(1){ animation-delay:.21s; }
@keyframes gp-faq-out{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(14px) scale(.95); }
}
@media (prefers-reduced-motion:reduce){
  #gpFaqMore .gp-faq-item{ opacity:1; }
  #gpFaqMore.show .gp-faq-item{ animation:none; }
}
.gp-study{
  display:flex; gap:12px; align-items:center;
  background:#eee5fa; border:1px solid #dbccef; border-radius:16px;
  padding:14px 16px; margin-top:12px;
}
.gp-study-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:#fff; display:grid; place-items:center;
}
.gp-study-ico svg{ width:20px; height:20px; color:#6231c8; }
.gp-study strong{ display:block; font-size:13px; color:#342044; }
.gp-study p{ margin:2px 0 0; font-size:12px; color:#64536f; }

/* Community */
.gp-community{
  background:#f2ebfc; border:1px solid #d8c4f0; border-radius:16px;
  padding:18px 20px;
  display:flex; align-items:center; gap:14px; text-align:left;
}
.gp-comm-logo{
  width:48px; height:48px; border-radius:14px; overflow:hidden; flex:none;
  background:#fff; box-shadow:0 4px 12px #6231c822;
}
.gp-comm-logo img{ width:100%; height:100%; object-fit:cover; }
.gp-comm-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gp-community .gp-kicker{ font-size:10px; }
.gp-community h2{ margin:0; font-size:16px; font-weight:700; color:#342044; }
.gp-comm-copy p{ margin:0; font-size:12px; color:#6b5a80; }
.gp-comm-btn{ flex:none; font-size:13px; padding:11px 18px; }
@media (max-width:420px){
  .gp-community{ gap:10px; padding:14px 14px; }
  .gp-comm-logo{ width:40px; height:40px; border-radius:12px; }
  .gp-community h2{ font-size:14px; }
  .gp-comm-copy p{ font-size:11px; }
  .gp-comm-btn{ padding:10px 14px; font-size:12px; }
}

/* Footer */
.gp-footer{
  background:#28143e; color:#fff;
  border-top:1px solid #d8c4f0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.gp-foot-grid{
  max-width:1160px; margin:0 auto; padding:36px 24px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
@media(min-width:640px){ .gp-foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.gp-foot-brand{ grid-column:1 / -1; }
@media(min-width:640px){ .gp-foot-brand{ grid-column:auto; } }
.gp-foot-logo{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:14px; background:#fff;
  box-shadow:4px 4px 0 #120821; overflow:hidden; margin-bottom:12px;
}
.gp-foot-logo img{ width:48px; height:48px; object-fit:contain; }
.gp-foot-brand strong{ display:block; font-size:22px; font-weight:800; }
.gp-foot-brand p{ margin:8px 0 14px; font-size:13px; line-height:1.6; color:#d7c7e5; }
.gp-team{
  display:inline-flex; align-items:center; gap:8px;
  color:#e9d5ff; font-size:14px; font-weight:600; text-decoration:none;
}
.gp-team svg{ width:16px; height:16px; }
.gp-team:hover{ color:#fff; }
.gp-foot-head{
  display:block; font-size:11px; font-weight:700; letter-spacing:1.5px;
  color:#b598cf; margin-bottom:14px;
}
.gp-foot-nav button,
.gp-foot-nav a{
  display:flex; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer;
  color:#fff; font-size:14px; font-weight:500; text-decoration:none;
  padding:7px 0; font-family:inherit;
}
.gp-foot-nav button svg,
.gp-foot-nav a svg{ width:15px; height:15px; color:#b598cf; }
.gp-foot-nav button:hover,
.gp-foot-nav a:hover{ color:#e9d5ff; }
.gp-foot-nav .gp-arrow{ width:13px; height:13px; }
.gp-legal{
  max-width:1160px; margin:0 auto; padding:16px 24px 88px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:11px; color:#c7b4d9; line-height:1.6;
}
@media(min-width:768px){ .gp-legal{ padding-bottom:24px; } }

/* Mobile bottom nav */
.gp-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border-top:1px solid #e6deef;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media(min-width:768px){ .gp-bottomnav{ display:none; } }
.gp-bottomnav button{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:64px; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-size:11px; font-weight:600; color:#6c5b7d;
  font-family:inherit;
}
.gp-bottomnav button svg{ width:20px; height:20px; }
.gp-bottomnav button.is-active{ color:#6231c8; }
@media(max-width:767px){
  body.lp-mode .gp-main{ padding-bottom:96px; }
}

/* Dialog */
.gp-dialog-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(40,20,62,.45);
  display:grid; place-items:center; padding:20px;
}
.gp-dialog-backdrop[hidden]{ display:none; }
.gp-dialog{
  position:relative; width:min(440px,100%); max-height:82vh; overflow:auto;
  background:#fff; border-radius:18px; border:1px solid #e8dff2;
  box-shadow:0 24px 64px rgba(40,20,62,.25);
  padding:26px 24px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  animation:gp-dialog-in .35s cubic-bezier(.22,.8,.24,1);
}
@keyframes gp-dialog-in{
  from{ opacity:0; transform:translateY(24px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .gp-dialog{ animation:none; }
}
.gp-dialog h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:#281b3a; }
.gp-dialog-body{ font-size:13px; line-height:1.65; color:#51475f; }
.gp-dialog-body p{ margin:0 0 10px; }
.gp-dialog-links{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.gp-dialog-links a,
.gp-dialog-links button{
  display:flex; align-items:center; gap:10px;
  border:1px solid #dfd2f3; border-radius:12px; padding:12px 14px;
  font-size:13px; font-weight:600; color:#6231c8; text-decoration:none;
  background:#faf7ff; cursor:pointer; font-family:inherit;
}
.gp-dialog-links a svg,
.gp-dialog-links button svg{ width:16px; height:16px; }
.gp-dialog-links a:hover,
.gp-dialog-links button:hover{ border-color:#6231c8; }
@media(max-width:640px){
  .gp-dialog{ padding:18px 16px; max-height:78vh; border-radius:16px; }
  .gp-dialog h3{ font-size:16px; margin-bottom:4px; }
  .gp-dialog-body{ font-size:12px; line-height:1.55; }
  .gp-dialog-body p{ margin-bottom:8px; }
  .gp-pay-grid{ gap:8px; }
  .gp-pay-pill{ padding:8px; gap:8px; border-radius:10px; }
  .gp-pay-pill img{ width:28px !important; height:28px !important; }
  .gp-pay-pill strong{ font-size:11px; }
  .gp-pay-label{ font-size:11px !important; margin:10px 0 6px !important; }
  .gp-pay-head{ margin-bottom:6px !important; }
  .gp-pay-desc{ font-size:12px !important; margin-bottom:8px !important; }
  .gp-pay-note{ font-size:11px !important; margin-top:8px !important; }
}
.gp-dialog-close{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e8dff2; background:#faf7ff; cursor:pointer;
  display:grid; place-items:center; color:#6231c8;
}
.gp-dialog-close svg{ width:16px; height:16px; }
/* Payment popup (Figma) */
.gp-pay-head{ display:flex; align-items:center; gap:10px; margin:14px 0 8px; }
.gp-pay-kicker-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:#f1e9fd; display:grid; place-items:center; color:#6231c8;
}
.gp-pay-kicker-ico svg{ width:17px; height:17px; }
.gp-pay-kicker{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#6231c8;
}
.gp-pay-desc{ font-size:13px; line-height:1.6; color:#6c5b7d; margin:0 0 4px; }
.gp-pay-label{ font-size:13px; font-weight:700; color:#342044; margin:16px 0 10px; }
.gp-pay-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.gp-pay-pill{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #e3d6f0; border-radius:12px;
  padding:12px;
  animation:gp-card-in .45s cubic-bezier(.22,.8,.24,1) backwards;
}
.gp-pay-grid .gp-pay-pill:nth-child(2){ animation-delay:.05s; }
.gp-pay-grid .gp-pay-pill:nth-child(3){ animation-delay:.1s; }
.gp-pay-grid .gp-pay-pill:nth-child(4){ animation-delay:.15s; }
.gp-pay-grid .gp-pay-pill:nth-child(5){ animation-delay:.2s; }
.gp-pay-grid .gp-pay-pill:nth-child(n+6){ animation-delay:.25s; }
.gp-pay-pill img{ width:34px; height:34px; border-radius:8px; object-fit:contain; flex:0 0 auto; }
.gp-pay-pill strong{ font-size:15px; font-weight:700; color:#2b2140; }
.gp-pay-note{ font-size:12px; line-height:1.6; color:#8a7f96; margin:16px 0 0; }
/* Mobile: compact vertical pills, 3 even columns */
@media(max-width:480px){
  .gp-pay-grid{ gap:8px; }
  .gp-pay-pill{
    flex-direction:column; gap:6px; text-align:center;
    padding:10px 6px; border-radius:10px;
  }
  .gp-pay-pill img{ width:30px; height:30px; }
  .gp-pay-pill strong{ font-size:11px; line-height:1.3; }
}
@media (prefers-reduced-motion:reduce){
  .gp-pay-pill{ animation:none; }
}

/* ===== Figma "User greeting" Plans page — plan cards (v56) ===== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

.font-plan-heading{ font-family:'Sora','Noto Sans Myanmar',sans-serif; }
.font-plans{ font-family:'Manrope','Noto Sans Myanmar',sans-serif; }

/* Tier badge with diamond dot */
.plan-tier-badge{
  display:inline-flex; align-items:center; gap:8px;
  min-height:28px; padding:0 10px;
  border-radius:7px; border:1px solid;
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:10px; font-weight:600; line-height:16px;
  letter-spacing:0.08em; text-transform:uppercase;
  box-shadow:0 1px 2px rgba(48,40,55,0.05);
  white-space:nowrap;
}
.plan-tier-badge::before{
  content:""; width:6px; height:6px;
  transform:rotate(45deg); border-radius:1px;
  background:currentColor; opacity:0.75; flex-shrink:0;
}
/* Badge color tokens — same plan name = same color */
.plan-tier-badge[data-tier="go"]{ border-color:#e9c16f; background:#ffe391; color:#75510e; }
.plan-tier-badge[data-tier="plus"]{ border-color:#a8c9f5; background:#d4e7ff; color:#255b9e; }
.plan-tier-badge[data-tier="pro"],
.plan-tier-badge[data-tier="proplus"]{ border-color:#c7acf1; background:#e4d5ff; color:#693a9d; }
/* Figma: PRO 5X = lavender, PRO 20X = pink */
.plan-tier-badge[data-tier="pro5x"]{ border-color:#c7acf1; background:#e4d5ff; color:#693a9d; }
.plan-tier-badge[data-tier="pro20x"]{ border-color:#efaacf; background:#ffd6ea; color:#96326d; }
/* Fallbacks: every data tier must have a color -- never render a white badge */
.plan-tier-badge[data-tier="gptpro"]{ border-color:#c7acf1; background:#e4d5ff; color:#693a9d; }
.plan-tier-badge[data-tier="4k"]{ border-color:#a8c9f5; background:#d4e7ff; color:#255b9e; }
.plan-tier-badge[data-tier="team"]{ border-color:#98d5e4; background:#c6edf5; color:#246376; }
.plan-tier-badge[data-tier="individual"]{ border-color:#98d4b5; background:#c9efdb; color:#2e694b; }
.plan-tier-badge[data-tier="family"]{ border-color:#98d5e4; background:#c6edf5; color:#246376; }
.plan-tier-badge[data-tier="education"]{ border-color:#a8c9f5; background:#d4e7ff; color:#255b9e; }
.plan-tier-badge[data-tier="business"]{ border-color:#edb791; background:#ffdcc2; color:#914b25; }
.plan-tier-badge[data-tier="premium"]{ border-color:#efaacf; background:#ffd6ea; color:#96326d; }
.plan-tier-badge[data-tier="vip"]{ border-color:#e9c16f; background:#ffe391; color:#75510e; }
.plan-tier-badge[data-tier="max"]{ border-color:#c7acf1; background:#e4d5ff; color:#693a9d; }
.plan-tier-badge[data-tier="ultra"]{ border-color:#efaacf; background:#ffd6ea; color:#96326d; }
.plan-tier-badge[data-tier="gift"]{ border-color:#f1a7c2; background:#ffdbe8; color:#a3234f; }
.plan-tier-badge[data-tier="basic"],
.plan-tier-badge[data-tier="core"],
.plan-tier-badge[data-tier="standard"],
.plan-tier-badge[data-tier="link"],
.plan-tier-badge[data-tier="hobby"]{ border-color:#d8cfe4; background:#f4f0f9; color:#6b5a7d; }

/* Icon chips (24px) */
.plan-icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  border:1px solid #e4d7f3; background:#f4edff; color:#7343a5;
}
.plan-icon-chip svg{ width:14px; height:14px; }
.plan-icon-chip.clock{
  border-color:#ddcef0;
  background:linear-gradient(135deg,#ffffff 0%,#ece2fb 100%);
  box-shadow:0 2px 0 #e3d6f1;
}
.plan-icon-chip.clock svg{ width:17px; height:17px; }

/* Figma plan card */
.plan-option.figma-card{
  /* Figma card frame — !important on layout props to beat legacy
     .plan-option rules (which use !important) wherever the card renders. */
  position:relative !important; overflow:visible !important;
  display:flex !important; flex-direction:column !important;
  align-items:stretch !important; justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important; height:auto !important; min-height:0 !important;
  box-sizing:border-box !important;
  padding:12px !important;
  border-radius:12px !important; border:1px solid #e2d8eb !important; background:#ffffff !important;
  box-shadow:0 2px 8px rgba(80,50,120,0.06) !important;
  font-family:'Manrope','Noto Sans Myanmar',sans-serif !important;
  font-size:13px !important; font-weight:400 !important; line-height:1.4 !important;
  cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:left !important; color:#2d223c !important;
}
.plan-option.figma-card:before{ content:none !important; display:none !important; }
.plan-option.figma-card:hover{ border-color:#bb9bdb !important; transform:none !important; box-shadow:0 2px 8px rgba(80,50,120,0.06) !important; }
.plan-option.figma-card.active{
  border-color:#8351ce; background:#faf7ff;
  box-shadow:0 0 0 1px #8351ce, 0 5px 16px rgba(98,49,200,0.06);
}
.plan-option.figma-card.out-stock{
  border:1px dashed #dfaab4; background:#fff8fa; color:#68505b;
  cursor:not-allowed;
}
.plan-card-top{
  display:flex; align-items:center; justify-content:space-between;
  min-height:28px; margin-bottom:8px;
}
.plan-card-radio{
  width:16px; height:16px; accent-color:#6231c8; cursor:pointer; flex-shrink:0;
}
.plan-card-name{
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:15px; font-weight:600; line-height:20px; color:#31213f;
  margin:0 0 8px 0;
}
.plan-card-offer{
  margin-bottom:8px;
  display:flex; align-items:center;
}
.plan-card-offer .special-offer{
  font-size:10px; font-weight:600; color:#537969;
}
/* Figma discount badge: light mint green pill with percent icon */
.plan-discount-badge{
  display:inline-flex; align-items:center; gap:4px;
  background:#d4f0e2; border:1px solid #b8e0c8; color:#2e7d4f;
  border-radius:6px; padding:3px 8px;
  font-size:10px; font-weight:700; line-height:14px;
  white-space:nowrap;
}
.plan-discount-badge svg{ width:11px; height:11px; flex-shrink:0; }
/* Realistic sale sticker: overlaps the card's top-left corner like a
   physical sticker slapped on. Replaces the inline badge. */
.plan-option.figma-card.has-discount{ padding-top:20px !important; }
.plan-discount-sticker{
  position:absolute; top:-12px; left:10px; z-index:5;
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,#ff8a5c 0%,#f43f5e 100%);
  border:1px solid rgba(255,255,255,.55);
  color:#ffffff; font-size:11px; font-weight:800; letter-spacing:.3px;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  transform:rotate(-6deg);
  box-shadow:0 3px 10px rgba(244,63,94,.35), inset 0 1px 0 rgba(255,255,255,.4);
  font-family:'Manrope','Noto Sans Myanmar',sans-serif;
}
.plan-discount-sticker svg{ width:11px; height:11px; flex-shrink:0; }
.plan-card-offer .unavailable-pill{
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid #f0c3cc; background:#ffe7ed; color:#a72948;
  border-radius:6px; padding:6px 4px;
  font-size:10px; font-weight:700; line-height:12px;
}
.plan-card-offer .unavailable-pill svg{ width:11px; height:11px; }
.plan-card-footer{
  /* Figma: content flows naturally from the top — no bottom-pinning.
     margin-top:auto pushed the price to the card bottom, opening a gap
     in the middle on mixed-height rows. Fixed spacing like Figma. */
  margin-top:0; border-top:1px solid #eee6f4; padding-top:8px;
}
.plan-card-duration{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; line-height:20px; color:#4d365e;
  margin-bottom:4px;
}
.plan-card-price-original{
  display:block;
  font-size:11px; line-height:16px; color:#a08bac;
}
.plan-card-price-original s{ text-decoration:line-through; }
.plan-card-price{
  font-size:24px; font-weight:800; line-height:32px; color:#542697;
  font-variant-numeric:tabular-nums;
}
.plan-card-price .ks{
  font-size:11px; font-weight:500; margin-left:4px;
}
.plan-option.figma-card.out-stock .plan-card-price{ color:#9a8ba5; }

/* Vertical stack card: badge, name, account, duration, then price pinned to bottom */
.plan-card-row{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; line-height:18px; color:#6b5a7d;
  margin:5px 0;
}
.plan-card-row .plan-icon-chip{ width:18px; height:18px; border-radius:5px; flex-shrink:0; }
.plan-card-row .plan-icon-chip svg{ width:10px; height:10px; }
.plan-card-prices{
  margin-top:auto; /* pin price to card bottom */
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  border-top:1px solid #eee6f4; padding-top:6px;
}
.plan-card-prices .plan-card-price-original{ font-size:10px; line-height:14px; }
.plan-card-prices .plan-card-price{ font-size:19px; line-height:24px; }
@media (max-width:640px){
  .plan-card-row{ font-size:10px !important; line-height:16px !important; margin:4px 0 !important; gap:5px !important; }
  .plan-card-prices{ padding-top:5px !important; gap:5px !important; }
  .plan-card-prices .plan-card-price{ font-size:17px !important; line-height:22px !important; }
}

/* Figma cards inside #orderView: restore Figma tokens over legacy
   #orderView .plan-option rules (higher specificity). Without this the
   cards render with mixed old/new styles (wrong font, padding, radius,
   and indigo active state). */
#orderView .plan-option.figma-card{
  min-height:0 !important;
  padding:12px !important;
  border-radius:12px !important;
  background:#ffffff !important;
  border:1px solid #e2d8eb !important;
  box-shadow:none !important;
  font-family:'Manrope','Noto Sans Myanmar',sans-serif !important;
  text-align:left !important;
  color:#2d223c !important;
  overflow:visible !important;
}
#orderView .plan-option.figma-card:hover{
  border-color:#bb9bdb !important;
  box-shadow:none !important;
  transform:none !important;
}
#orderView .plan-option.figma-card.active{
  border-color:#8351ce !important;
  background:#faf7ff !important;
  box-shadow:0 0 0 1px #8351ce, 0 5px 16px rgba(98,49,200,0.06) !important;
}
#orderView .plan-option.figma-card.out-stock{
  border:1px dashed #dfaab4 !important;
  background:#fff8fa !important;
  color:#68505b !important;
}
/* Mobile: Figma 2-col frame */
@media (max-width:640px){
  #orderView .plan-option.figma-card{ min-height:0 !important; padding:12px 10px !important; }
}
/* Phone: ultra-compact cards — mobile-framework fit */
@media (max-width:640px){
  .plan-list{ gap:8px !important; }
  .plan-option.figma-card{ padding:8px 6px !important; border-radius:9px !important; }
  .plan-option.figma-card.has-discount{ padding-top:14px !important; }
  .plan-card-top{ min-height:22px !important; margin-bottom:5px !important; }
  .plan-tier-badge{ min-height:22px !important; padding:0 7px !important; font-size:9px !important; gap:5px !important; }
  .plan-tier-badge .tier-dot{ width:6px !important; height:6px !important; }
  .plan-card-radio{ width:15px !important; height:15px !important; }
  .plan-card-name{ font-size:12px !important; line-height:16px !important; margin:0 0 5px 0 !important; }
  .plan-card-row{ font-size:10px !important; line-height:16px !important; margin:4px 0 !important; gap:5px !important; }
  .plan-icon-chip{ width:18px !important; height:18px !important; border-radius:5px !important; }
  .plan-icon-chip svg{ width:10px !important; height:10px !important; }
  .plan-card-offer{ margin-bottom:5px !important; }
  .plan-card-footer{ padding-top:5px !important; }
  .plan-card-duration{ font-size:10px !important; line-height:16px !important; margin-bottom:2px !important; gap:5px !important; }
  .plan-card-price-original{ font-size:9px !important; line-height:13px !important; }
  .plan-card-price{ font-size:17px !important; line-height:22px !important; }
  .plan-card-price .ks{ font-size:10px !important; }
  .plan-discount-sticker{ font-size:9px !important; padding:3px 8px !important; top:-9px !important; left:7px !important; }
}

/* ===== Figma plans header: product box above categories ===== */
.plans-header{ margin:6px 0 12px; }
.plans-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:#8b6fb0; margin-bottom:4px;
}
.plans-title{
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:24px; font-weight:700; color:#2d1b42; margin:0 0 4px 0; line-height:1.2;
}
.plans-sub{ font-size:13px; color:#8a7a99; margin:0; }
.plans-product-box{
  display:flex; align-items:center; gap:12px;
  background:#ffffff; border:1px solid #e8e2f2; border-radius:14px;
  padding:12px 14px; margin-bottom:12px;
  box-shadow:0 2px 8px rgba(80,50,120,0.05);
}
.ppb-logo{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  border:1px solid #e7dfee; background:#faf8ff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:22px;
}
.ppb-logo img{ width:34px; height:34px; object-fit:contain; }
.ppb-info{ flex:1; min-width:0; }
.ppb-name{
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:16px; font-weight:700; color:#2d1b42; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ppb-meta{ font-size:12px; color:#8a7a99; margin-top:2px; }
@media (max-width:640px){
  .plans-title{ font-size:20px !important; }
  .plans-product-box{ padding:10px 12px !important; gap:10px !important; }
  .ppb-logo{ width:38px !important; height:38px !important; }
  .ppb-logo img{ width:28px !important; height:28px !important; }
  .ppb-name{ font-size:14px !important; }
}

/* ===== Clean plans header: hide redundant order-cart chrome ===== */
#orderView .panel-title,
#orderView .panel-sub{ display:none !important; }
#cartItem .section-title,
#cartItem .cart-head{ display:none !important; }
/* Subtle plan toggle instead of huge gradient button */
#togglePlansBtn.plan-toggle{
  display:inline-flex !important; align-items:center; gap:6px;
  width:auto !important; min-height:0 !important;
  margin:0 0 10px auto !important; padding:6px 12px !important;
  background:#f4efff !important; border:1px solid #e2d8f0 !important;
  border-radius:999px !important; color:#6b4d8f !important;
  font-size:11px !important; font-weight:600 !important;
  box-shadow:none !important; cursor:pointer;
}
#togglePlansBtn.plan-toggle:hover{ background:#ece2fa !important; }

/* ===== Figma filter tabs: segmented control with sliding indicator ===== */
.plan-filters.figma-tabs{
  position:relative;
  display:flex; gap:4px; flex-wrap:nowrap;
  background:#f4f0f9; border-radius:12px; padding:4px;
  overflow-x:auto; scrollbar-width:none;
  margin:10px 0 12px;
}
.plan-filters.figma-tabs::-webkit-scrollbar{ display:none; }
.plan-filter-tab{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px;
  border:none; background:transparent; border-radius:8px;
  font-family:'Manrope','Noto Sans Myanmar',sans-serif;
  font-size:12px; font-weight:600; color:#7b698a;
  cursor:pointer; white-space:nowrap;
  transition:color .2s ease;
}
.plan-filter-tab svg{ width:14px; height:14px; flex-shrink:0; }
.plan-filter-tab .tab-count{
  font-size:10px; font-weight:600; opacity:0.6;
}
.plan-filter-tab.active{ color:#6231c8; }
.plan-filter-tab:hover:not(.active){ color:#4d365e; }
/* Sliding indicator — glides smoothly between tabs */
.plan-tab-indicator{
  position:absolute; top:4px; bottom:4px; left:0;
  background:#ffffff; border-radius:8px;
  box-shadow:0 2px 6px rgba(67,33,120,0.06);
  transition:left .38s cubic-bezier(0.22, 0.8, 0.24, 1), width .38s cubic-bezier(0.22, 0.8, 0.24, 1);
  z-index:0; pointer-events:none;
}

/* ===== Figma "Your selection" receipt panel ===== */
.your-selection-panel{
  border-radius:18px; border:1px solid #ded0eb; background:#ffffff;
  box-shadow:0 4px 0 #e8ddf1, 0 12px 30px rgba(67,33,120,0.04);
  overflow:hidden; position:relative;
  font-family:'Manrope','Noto Sans Myanmar',sans-serif;
}
.your-selection-panel::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg,#b398d5 0%,#7751b0 50%,#d5bde9 100%);
}
.ys-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
}
.ys-title{
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:14px; font-weight:600; color:#39224f; margin:0;
}
.ys-count{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; color:#957eaa;
}
.ys-count svg{ width:13px; height:13px; }
.ys-item{
  margin:0 12px; padding:12px;
  border-radius:12px; border:1px solid #eee4f6; background:#faf7ff;
}
.ys-product-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ys-logo{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  border:1px solid #e7dfee; background:#faf8ff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ys-logo img{ width:32px; height:32px; object-fit:contain; }
.ys-product-name{
  font-family:'Sora','Noto Sans Myanmar',sans-serif;
  font-size:15px; font-weight:600; color:#342044; margin:0;
}
.ys-tier{ font-size:12px; font-weight:600; color:#805b9d; }
.ys-details{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  border-top:1px solid #e6d9f0; padding-top:10px;
}
.ys-detail dt{
  display:flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; color:#88699e; margin:0 0 2px 0;
}
.ys-detail dt svg{ width:14px; height:14px; }
.ys-detail dd{
  font-size:13px; font-weight:700; color:#503064; margin:0;
}
.ys-qty-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.ys-qty-label{ font-size:10px; color:#947ca5; }
.ys-qty-price{ font-size:13px; font-weight:700; color:#5b426c; font-variant-numeric:tabular-nums; }
.ys-stepper{
  display:inline-flex; align-items:center; gap:2px;
  border-radius:8px; border:1px solid #e1d3ec; background:#faf7ff; padding:2px;
}
.ys-stepper button{
  width:44px; height:36px; border:none; background:transparent;
  color:#7543a4; font-size:18px; font-weight:700; cursor:pointer;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.ys-stepper button:hover{ background:#f0e8f8; }
.ys-stepper .ys-qty{
  font-size:14px; font-weight:800; color:#43245b;
  font-variant-numeric:tabular-nums; min-width:32px; text-align:center;
}
.ys-total{
  position:relative;
  border-top:1px dashed #ddcce9;
  background:linear-gradient(180deg,#faf5ff 0%,#ffffff 100%);
  padding:16px 16px 20px; margin-top:4px;
}
.ys-total::before, .ys-total::after{
  content:""; position:absolute; top:-9px;
  width:16px; height:16px; border-radius:50%;
  background:#f8f7fc; border:1px solid #ded0eb;
}
.ys-total::before{ left:-9px; }
.ys-total::after{ right:-9px; }
.ys-total-label{ font-size:12px; font-weight:700; color:#6b487f; }
.ys-total-sub{ font-size:10px; color:#a087b1; margin-top:2px; }
.ys-total-amount{
  font-size:26px; font-weight:800; color:#60368c;
  font-variant-numeric:tabular-nums; margin-top:6px;
}
.ys-total-amount .ks{ font-size:11px; font-weight:600; margin-left:4px; }
.ys-continue{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:calc(100% - 32px); margin:0 16px 12px;
  min-height:48px; border-radius:12px; border:none;
  background:#6231c8; color:#ffffff;
  font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px rgba(98,49,200,0.13);
  transition:background .18s ease;
}
.ys-continue:hover{ background:#5123b1; }
.ys-continue svg{ width:16px; height:16px; }
.ys-help{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; border-top:1px solid #eee6f4; background:#fcfaff;
  font-size:11px; font-weight:600; color:#836497; text-decoration:none;
}
.ys-help svg{ width:14px; height:14px; }

/* ===== Mobile navigation (Figma): bottom tab bar, no top tabs/account ===== */
@media(max-width:767px){
  /* top Store / My orders / News pills and account icon move to the bottom bar */
  .gp-header .gp-nav,
  .gp-header .gp-account{ display:none; }
  .gp-header{ flex-wrap:nowrap; height:72px; padding:0 12px; row-gap:0; }
  /* bar is now a sibling of the page shells so it persists on catalog pages */
  body.order-mode .gp-bottomnav{ display:none; }
  body.products-mode .catalog-shell{ padding-bottom:96px; }
  /* light-mode rule above forces active tab white -> make it purple */
  body.light-mode .gp-bottomnav button.is-active{ color:#6231c8 !important; }
  .gp-bottomnav button{ border-radius:12px; }
  .gp-bottomnav button.is-active{ background:#f4f0fa; }
}
/* Products / News / Help: one row, identical width and height */
@media(max-width:559px){
  .gp-hero-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch; gap:8px;
  }
  .gp-hero-actions .gp-btn{
    min-width:0; min-height:48px; justify-content:center;
    gap:6px; padding:10px 6px; font-size:12px; text-align:center;
  }
  .gp-hero-actions .gp-btn .gp-arrow,
  .gp-hero-actions .gp-news-more{ display:none; }
}

/* ===== "Your selection" box (Figma): summary above the checkout button ===== */
#cartItem .sel-box{
  margin-top:16px; padding:16px;
  background:#fff; border:1px solid #eae5f1; border-radius:20px;
  box-shadow:0 6px 20px rgba(98,49,200,.07);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#242330; text-align:left;
}
#cartItem .sel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#cartItem .sel-title{ font-size:15px; font-weight:800; color:#242330; }
#cartItem .sel-chip{
  font-size:11px; font-weight:700; color:#6231c8;
  background:#f4f0fa; border-radius:999px; padding:4px 10px;
}
#cartItem .sel-plan{ margin-top:12px; }
#cartItem .sel-plan-name{ font-size:16px; font-weight:800; line-height:1.3; color:#242330; overflow-wrap:anywhere; }
#cartItem .sel-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#cartItem .sel-meta span{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:#51475f;
  background:#fcfbfe; border:1px solid #eae5f1; border-radius:999px; padding:4px 10px;
}
#cartItem .sel-meta svg{ width:13px; height:13px; color:#6231c8; }
#cartItem .sel-box .sel-line{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
#cartItem .sel-unit small{ display:block; font-size:11px; font-weight:600; color:#7d7390; }
#cartItem .sel-unit b{ font-size:15px; font-weight:800; color:#242330; }
#cartItem .sel-box .qty-box{ gap:10px; }
#cartItem .sel-box .qty-btn{
  width:34px; height:34px; border-radius:50%; font-size:18px; line-height:1;
  color:#6231c8 !important; background:#f4f0fa !important; border:1px solid #dfd2f3 !important;
}
#cartItem .sel-box .qty-num{ min-width:28px; font-size:16px; font-weight:800; color:#242330 !important; }
#cartItem .sel-divider{ margin:14px 0; border-top:1px dashed #d9cdee; }
#cartItem .sel-total{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
#cartItem .sel-total-label span{ display:block; font-size:12px; font-weight:700; color:#51475f; }
#cartItem .sel-total-label small{ display:block; margin-top:2px; font-size:11px; font-weight:600; color:#7d7390; }
#cartItem .sel-total .amount{ font-size:22px; font-weight:900; color:#6231c8 !important; }
#cartItem .sel-box #continueBtn.telegram-btn{
  width:100% !important; margin:14px 0 0 !important;
  padding:14px 20px; font-size:14.5px; border-radius:14px;
}
#cartItem .sel-help{
  display:block; width:100%; margin-top:10px; padding:6px;
  background:none !important; border:none !important; box-shadow:none !important;
  font-family:inherit; font-size:12.5px; font-weight:700;
  color:#6231c8 !important; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}

/* ===== Facebook Service plan cards (Figma): category badge + emoji sub-row ===== */
.plan-tier-badge.fb-cat{ text-transform:uppercase; letter-spacing:.06em; }
.plan-tier-badge.fb-cat::before{ display:none; }
.plan-tier-badge.fb-cat[data-fb="norefill"],
.plan-tier-badge.fb-cat[data-fb="refill"]{ border-color:#a8c9f5; background:#d4e7ff; color:#255b9e; }
.plan-tier-badge.fb-cat[data-fb="reactions"]{ border-color:#f3b6c8; background:#ffdce7; color:#a3214f; }
.plan-tier-badge.fb-cat[data-fb="views"]{ border-color:#b9e0c6; background:#dcf5e4; color:#1f7a45; }
.plan-tier-badge.fb-cat[data-fb="ads"]{ border-color:#e9c16f; background:#ffe391; color:#75510e; }
.plan-card-row .plan-icon-chip.fb-emoji{
  width:auto !important; height:auto !important; min-width:18px;
  background:none !important; border:none !important; box-shadow:none !important;
  font-size:14px; line-height:1;
}
.fb-emoji-row{ margin:-2px 0 4px; font-size:13px; line-height:1.2; letter-spacing:1px; white-space:nowrap; }

/* ---- "Your selection": product logo beside the plan name ---- */
#cartItem .sel-plan{ display:flex; align-items:flex-start; gap:12px; }
#cartItem .sel-plan-text{ flex:1; min-width:0; }
#cartItem .sel-logo{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  border:1px solid #e7dfee; background:#faf8ff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:22px;
}
#cartItem .sel-logo img{ width:34px; height:34px; object-fit:contain; }

/* ---- Account / My orders: drop the empty cart panel that sat above them ---- */
#orderView.hide-cart-header:has(> #accountView:not(.hidden)) > .panel,
#orderView.hide-cart-header:has(> #myOrdersView:not(.hidden)) > .panel{ display:none; }

/* A finished `both` fill leaves an identity transform on these views, which
   makes them the containing block of their position:fixed bottom tab bar --
   so the bar sat at the end of the page instead of the screen bottom. */
#myOrdersView:not(.hidden),
#noticeView:not(.hidden),
#accountView:not(.hidden),
#securityView:not(.hidden),
#inviteFriendsView:not(.hidden){
  animation-fill-mode:backwards;
}

/* ===== Order tracking (Figma Make, light-purple compact mobile) ===== */
/* the empty cart panel above any order status page is just a blank pill */
#orderView:has(> #orderStatusView:not(.hidden)) > .panel{ display:none; }
#orderStatusView .fig-os-appbar,
#orderStatusView .fig-os-eyebrow,
#orderStatusView .fig-os-secure,
#orderStatusView .fig-os-collapse-more{ display:none; }
#orderStatusView .fig-os-support-text small{ display:none; }
#orderStatusView .fig-os-support-text b{ font-weight:inherit; }

@keyframes osPop{ 0%{ transform:scale(.55); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@keyframes osFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes osDraw{ to{ stroke-dashoffset:0; } }
@keyframes osRingLoop{ 0%{ box-shadow:0 0 0 0 rgba(98,49,200,.30); } 100%{ box-shadow:0 0 0 14px rgba(98,49,200,0); } }
@keyframes osRingOnce{ 0%{ box-shadow:0 0 0 0 rgba(98,49,200,.38); } 100%{ box-shadow:0 0 0 22px rgba(98,49,200,0); } }
@keyframes osFlow{ to{ background-position:14px 0; } }
@keyframes osBlink{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.65); } }
@keyframes osStepPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(98,49,200,.10); } 50%{ box-shadow:0 0 0 10px rgba(98,49,200,.04); } }
@keyframes osSweep{ from{ transform:translateX(-120%) skewX(-18deg); } to{ transform:translateX(320%) skewX(-18deg); } }
@keyframes osRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media all{
  #orderStatusView{
    background:#f6f3fd; color:#242330; border-radius:20px;
    padding:10px 12px 22px; margin-top:6px;
  }
  #orderStatusView .fig-os-shell{ max-width:none; }

  /* app bar (same pattern as Account / My orders) */
  #orderStatusView .fig-os-appbar{ display:flex; margin:0 0 8px; }

  /* breadcrumb + heading, compact */
  #orderStatusView .fig-os-crumb{ margin:4px 2px 0; font-size:12px; }
  #orderStatusView .fig-os-crumb-link{ color:#7d7390; }
  #orderStatusView .fig-os-crumb-here{ color:#242330; }
  #orderStatusView .fig-os-head{ margin:10px 2px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:0; }
  #orderStatusView .fig-os-eyebrow{ display:block; color:#7d5bd0; font-size:10px; letter-spacing:.2em; margin-bottom:6px; }
  #orderStatusView .fig-os-title{ font-size:25px; line-height:1.12; color:#2a1a55; margin:0 0 6px; }
  #orderStatusView .fig-os-sub{ font-size:12.5px; color:#7d7390; line-height:1.5; }
  #orderStatusView .fig-os-secure{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-size:11.5px; font-weight:600; color:#7d7390;
  }
  #orderStatusView .fig-os-secure svg{ width:13px; height:13px; }

  /* order reference card */
  #orderStatusView .fig-os-ref{
    flex-direction:column; align-items:flex-start; gap:10px; padding:14px;
    background:linear-gradient(135deg,#efe8fc 0%,#f8f5ff 100%);
    border:1px solid #e3d9f6; border-radius:16px; box-shadow:none;
  }
  #orderStatusView .fig-os-ref-meta{ width:100%; gap:5px; }
  #orderStatusView .fig-os-kicker{ color:#8c7cb0; font-size:10px; }
  #orderStatusView .fig-os-code b{ font-size:15px; color:#2a1a55; letter-spacing:.02em; }
  #orderStatusView .fig-os-copy{ background:#fff; border-color:#e3d9f6; color:#6231c8 !important; }
  #orderStatusView .fig-os-refresh{
    background:#6231c8; box-shadow:0 6px 14px rgba(98,49,200,.28);
    padding:9px 14px; border-radius:10px; font-size:12.5px;
  }

  /* status card */
  #orderStatusView .fig-os-card{
    position:relative; padding:14px; gap:12px; margin-top:10px;
    background:#fff; border:1px solid #eae5f1; border-radius:16px; box-shadow:0 4px 14px rgba(98,49,200,.06);
  }
  #orderStatusView .fig-os-status-icon{
    width:46px; height:46px; border-radius:14px;
    background:#f4f0fa; border:1px solid #e3d9f6; color:#6231c8;
  }
  #orderStatusView .fig-os-status-icon svg{ width:24px; height:24px; }
  #orderStatusView .fig-os-status-title{ font-size:17px; color:#2a1a55; }
  #orderStatusView .fig-os-status-desc{ font-size:12.5px; color:#7d7390; margin-top:4px; }
  #orderStatusView .fig-os-pill{
    margin-top:10px; padding:5px 11px; font-size:11px;
    background:#f4f0fa; color:#6231c8; border:1px solid #e3d9f6;
  }
  #orderStatusView .fig-os-pill.done{ background:#efe7ff; color:#5524b8; border-color:#d6c4f7; }
  #orderStatusView .fig-os-pill.bad{ background:#fdeaea; color:#b3261e; border-color:#f3c4c4; }

  /* journey */
  #orderStatusView .fig-os-rowhead{ margin:16px 2px 8px; }
  #orderStatusView .fig-os-section{ font-size:14px; color:#2a1a55; }
  #orderStatusView .fig-os-count{ color:#8c7cb0; font-size:10px; }
  #orderStatusView .fig-os-stepper{ margin:0 auto; padding:2px 0 4px; }
  #orderStatusView .fig-os-stepper .status-step{ gap:7px; }
  #orderStatusView .fig-os-stepper .status-step-dot{
    width:46px; height:46px; background:#faf8ff; border:1.5px solid #e5def2; color:#b6a8d0;
  }
  #orderStatusView .fig-os-stepper .status-step-dot svg{ width:20px; height:20px; }
  #orderStatusView .fig-os-stepper .status-step.done .status-step-dot{
    background:#efe7ff; border-color:#6231c8; color:#6231c8; box-shadow:none;
  }
  #orderStatusView .fig-os-stepper .status-step.current .status-step-dot{
    background:#fff; border-color:#6231c8; color:#6231c8; box-shadow:0 0 0 5px rgba(98,49,200,.08);
    animation:osStepPulse 2s ease-in-out infinite;
  }
  #orderStatusView .fig-os-stepper .status-step.current .status-step-dot::after{
    background:#6231c8; border-color:#fff; animation:osBlink 1.2s ease-in-out infinite;
  }
  #orderStatusView .fig-os-stepper .status-step.rejected .status-step-dot{ background:#b3261e; border-color:#b3261e; color:#fff; }
  #orderStatusView .fig-os-stepper .status-step-label{ font-size:11.5px; color:#b6a8d0; }
  #orderStatusView .fig-os-stepper .status-step.done .status-step-label,
  #orderStatusView .fig-os-stepper .status-step.current .status-step-label{ color:#2a1a55; }
  #orderStatusView .fig-os-stepper .status-step-sub{ font-size:10px; color:#9a8fb4; }
  #orderStatusView .fig-os-stepper .status-step.current .status-step-sub{ color:#7d7390; }
  #orderStatusView .fig-os-stepper .status-step-line{
    position:relative; overflow:hidden; background:#e5def2; margin-top:22px; flex:0 1 34px; min-width:10px;
  }
  #orderStatusView .fig-os-stepper .status-step-line.done{ background:#e5def2; }
  #orderStatusView .fig-os-stepper .status-step-line::after{
    content:""; position:absolute; inset:0; background:#6231c8;
    transform:scaleX(0); transform-origin:left center;
  }
  #orderStatusView .fig-os-stepper .status-step-line.done::after{ transform:scaleX(1); }
  /* tracking: the line leaving the current step flows forward */
  #orderStatusView .fig-os-stepper .status-step.current + .status-step-line{
    background:repeating-linear-gradient(90deg,#b99cf0 0 7px,transparent 7px 14px);
    background-size:14px 100%; animation:osFlow .9s linear infinite;
  }

  /* notice */
  #orderStatusView .fig-os-notice{
    background:#fff; border:1px solid #eae5f1; border-radius:14px; padding:11px 13px;
    margin-top:12px; font-size:12.5px; color:#51475f;
  }
  #orderStatusView .fig-os-notice-icon{ color:#6231c8; }

  /* Order details / Order activity cards */
  #orderStatusView .fig-os-cols{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
  #orderStatusView .fig-os-collapse{
    background:#fff; border:1px solid #eae5f1; border-radius:16px; box-shadow:0 4px 14px rgba(98,49,200,.05);
  }
  #orderStatusView .fig-os-collapse-head{ padding:12px 14px; gap:10px; background:none; color:#2a1a55; }
  #orderStatusView .fig-os-collapse-ico{
    width:36px; height:36px; border-radius:11px; background:#f4f0fa; color:#6231c8;
    align-items:center; justify-content:center;
  }
  #orderStatusView .fig-os-collapse-ico svg{ width:18px; height:18px; }
  #orderStatusView .fig-os-collapse-title{ display:flex; flex-direction:column; white-space:normal; gap:1px; }
  #orderStatusView .fig-os-collapse-title b{ font-size:14.5px; color:#2a1a55; }
  #orderStatusView .fig-os-collapse-title span{ margin:0; font-size:12px; color:#7d7390; font-weight:600; }
  #orderStatusView #activityCollapse .fig-os-collapse-title span{ display:none; }
  #orderStatusView .fig-os-collapse-more{ display:inline; font-size:12.5px; font-weight:700; color:#6231c8; white-space:nowrap; }
  #orderStatusView .fig-os-collapse-chev{ color:#6231c8; transition:transform .35s cubic-bezier(.4,0,.2,1); }
  #orderStatusView #detailsCollapse .fig-os-collapse-chev{ transform:rotate(-90deg); }
  #orderStatusView #detailsCollapse.open .fig-os-collapse-chev{ transform:rotate(0); }
  #orderStatusView #activityCollapse .fig-os-collapse-chev{ display:none; }

  /* smooth height (0fr -> 1fr) + content fade/slide instead of a max-height guess */
  #orderStatusView .fig-os-collapse-body{
    display:grid; grid-template-rows:0fr; max-height:none; overflow:visible;
    transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
  }
  #orderStatusView .fig-os-collapse.open .fig-os-collapse-body{ grid-template-rows:1fr; max-height:none; }
  #orderStatusView .fig-os-collapse-body > *{
    min-height:0; overflow:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .3s ease, transform .4s cubic-bezier(.4,0,.2,1);
  }
  #orderStatusView .fig-os-collapse.open .fig-os-collapse-body > *{ opacity:1; transform:none; transition-delay:.08s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr{ animation:osRise .4s both; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(2){ animation-delay:.06s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(3){ animation-delay:.12s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(4){ animation-delay:.18s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(5){ animation-delay:.24s; }
  #orderStatusView .status-details-caption{ display:none; }
  #orderStatusView .order-status-details{ background:none; border:0; border-top:1px solid #f0ebf8; border-radius:0; box-shadow:none; }
  #orderStatusView .order-status-details .order-preview-table th{ color:#7d7390 !important; font-size:12px; text-align:left; padding:10px 14px; }
  #orderStatusView .order-status-details .order-preview-table td{ color:#2a1a55 !important; font-size:12.5px; font-weight:700; text-align:right; padding:10px 14px; }
  #orderStatusView .order-status-details .order-preview-table th,
  #orderStatusView .order-status-details .order-preview-table td{ border-bottom:1px solid #f4f0fa !important; }

  /* activity timeline */
  #orderStatusView .fig-os-collapse-body .fig-os-timeline{ padding:2px 14px 8px; border-top:1px solid #f0ebf8; }
  #orderStatusView .fig-os-tl-item{ padding:10px 0; gap:11px; border-bottom:1px dashed #ece6f7; }
  #orderStatusView .fig-os-tl-dot{ width:32px; height:32px; background:#f4f0fa; border-color:#e3d9f6; color:#9a8fb4; }
  #orderStatusView .fig-os-tl-item.done .fig-os-tl-dot{ background:#efe7ff; border-color:#d6c4f7; color:#6231c8; }
  #orderStatusView .fig-os-tl-item.current .fig-os-tl-dot{
    background:#fff; border-color:#6231c8; color:#6231c8; animation:osRingLoop 1.8s ease-out infinite;
  }
  #orderStatusView .fig-os-tl-body b{ font-size:13px; color:#2a1a55; }
  #orderStatusView .fig-os-tl-body span{ font-size:11.5px; color:#7d7390; }
  #orderStatusView .fig-os-tl-time{ font-size:10.5px; padding-top:8px; color:#9a8fb4; }
  #orderStatusView .fig-os-tl-now{ color:#6231c8; border-color:#e3d9f6; background:#f4f0fa; }

  /* support */
  #orderStatusView .fig-os-support{
    flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
    margin:14px 0 0; padding:12px 4px 0; border-top:1px solid #eae5f1;
  }
  #orderStatusView .fig-os-support-label{ align-items:center; gap:10px; color:#2a1a55; min-width:0; }
  #orderStatusView .fig-os-support-label svg{ color:#6231c8; flex:0 0 auto; }
  #orderStatusView .fig-os-support-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #orderStatusView .fig-os-support-label{ flex:1 1 auto; }
  #orderStatusView .fig-os-support-text b{ font-size:12.5px; font-weight:700; }
  #orderStatusView .fig-os-support-text small{ display:block; font-size:11px; font-weight:500; color:#7d7390; }
  #orderStatusView .fig-os-support-link{ color:#6231c8; font-size:12px; white-space:nowrap; flex:0 0 auto; }
  #orderStatusView .fig-os-support-link .fig-os-support-arrow{ margin-left:2px; }
  #orderStatusView .fig-os-foot{ margin:16px 0 0; font-size:11px; color:#9a8fb4; }

  /* ---- status animations (replayed by playOrderStatusAnimation) ---- */
  /* tracking: dots pop in order, the journey line fills left to right */
  #orderStatusView.os-play .fig-os-stepper .status-step.done .status-step-dot{
    animation:osPop .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  #orderStatusView.os-play .fig-os-stepper .status-step:nth-of-type(1) .status-step-dot{ animation-delay:.10s; }
  #orderStatusView.os-play .fig-os-stepper .status-step:nth-of-type(2).done .status-step-dot{ animation-delay:.70s; }
  #orderStatusView.os-play .fig-os-stepper .status-step:nth-of-type(3).done .status-step-dot{ animation-delay:1.30s; }
  #orderStatusView.os-play .fig-os-stepper .status-step-line.done::after{ animation:osFill .55s cubic-bezier(.4,0,.2,1) both; }
  #orderStatusView.os-play .fig-os-stepper .status-step-line[data-line="1"].done::after{ animation-delay:.30s; }
  #orderStatusView.os-play .fig-os-stepper .status-step-line[data-line="2"].done::after{ animation-delay:.95s; }
  #orderStatusView.os-play .fig-os-tl-item{ animation:osRise .45s both; }
  #orderStatusView.os-play .fig-os-tl-item:nth-child(2){ animation-delay:.15s; }

  /* waiting: breathing ring + blinking dot while the review is in progress */
  #orderStatusView[data-state="wait"] .fig-os-status-icon{ animation:osRingLoop 1.9s ease-out infinite; }
  #orderStatusView[data-state="wait"] .fig-os-pill-dot{ animation:osBlink 1.1s ease-in-out infinite; }

  /* completed: icon pops, check draws itself, ring bursts once, card shines */
  #orderStatusView[data-state="done"].os-play .fig-os-status-icon{
    animation:osPop .6s cubic-bezier(.34,1.56,.64,1) both, osRingOnce 1.1s ease-out .35s 1 both;
  }
  #orderStatusView[data-state="done"].os-play .fig-os-status-icon svg path{
    stroke-dasharray:64; stroke-dashoffset:64; animation:osDraw .8s ease .25s forwards;
  }
  #orderStatusView[data-state="done"].os-play .fig-os-status-icon svg polyline{
    stroke-dasharray:24; stroke-dashoffset:24; animation:osDraw .5s ease .85s forwards;
  }
  #orderStatusView[data-state="done"].os-play .fig-os-pill{ animation:osPop .5s cubic-bezier(.34,1.56,.64,1) .5s both; }
  #orderStatusView[data-state="done"].os-play .fig-os-card::after{
    content:""; position:absolute; top:0; bottom:0; left:0; width:30%;
    background:linear-gradient(105deg,transparent,rgba(98,49,200,.12),transparent);
    animation:osSweep 1.1s ease .5s 1 both; pointer-events:none;
  }
}
@media (prefers-reduced-motion:reduce){
  #orderStatusView *, #orderStatusView *::after{ animation:none !important; transition:none !important; }
  #orderStatusView .fig-os-stepper .status-step-line.done::after{ transform:scaleX(1); }
  #orderStatusView .fig-os-collapse-body > *{ opacity:1; transform:none; }
}

/* ===== Order tracking (mobile): less clutter, journey visible without scrolling ===== */
@media all{
  /* the global store header / ticker sit above the page and only add noise here */
  body:has(#orderStatusView:not(.hidden)) .compact-header,
  body:has(#orderStatusView:not(.hidden)) .neon-announcement{ display:none !important; }

  #orderStatusView{ padding:8px 12px 16px; margin-top:4px; }
  #orderStatusView .fig-os-crumb{ margin:2px 2px 0; }
  #orderStatusView .fig-os-head{ margin:6px 2px 10px; }
  #orderStatusView .fig-os-title{ font-size:22px; margin:0; }

  /* reference + refresh on one row */
  #orderStatusView .fig-os-ref{ flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; }
  #orderStatusView .fig-os-ref-meta{ width:auto; flex:1 1 auto; min-width:0; gap:3px; }
  #orderStatusView .fig-os-code b{ font-size:14px; }
  #orderStatusView .fig-os-refresh{ flex:0 0 auto; padding:8px 11px; font-size:12px; }

  /* tighter status card */
  #orderStatusView .fig-os-card{ padding:11px 12px; gap:10px; margin-top:8px; }
  #orderStatusView .fig-os-status-icon{ width:40px; height:40px; border-radius:12px; }
  #orderStatusView .fig-os-status-icon svg{ width:21px; height:21px; }
  #orderStatusView .fig-os-status-title{ font-size:15px; }
  #orderStatusView .fig-os-status-desc{ font-size:12px; margin-top:2px; line-height:1.45; }
  #orderStatusView .fig-os-pill{ margin-top:7px; padding:3px 10px; font-size:10.5px; }

  /* Order journey: its own bordered card */
  #orderStatusView .fig-os-journey{
    margin-top:8px; padding:10px 8px 8px;
    background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#cdb6f7 0%,#efe7ff 55%,#d9c8fb 100%) border-box;
    border:1.5px solid transparent; border-radius:18px;
    box-shadow:0 8px 22px rgba(98,49,200,.10);
  }
  #orderStatusView .fig-os-journey .fig-os-rowhead{ margin:0 6px 8px; align-items:center; }
  #orderStatusView .fig-os-journey .fig-os-stepper{ padding:0 0 2px; }
  #orderStatusView .fig-os-journey .status-step-dot{ width:42px; height:42px; }
  #orderStatusView .fig-os-journey .status-step-line{ margin-top:20px; }
}
@media all{ #orderStatusView .fig-os-refresh-more{ display:none; } }

/* Order tracking keeps the same compact card column on tablets / desktop */
#orderStatusView{ max-width:560px; margin-left:auto; margin-right:auto; }

/* ===== Login-required popup: cutie pastel + glass + line animation ===== */
@property --lg-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.login-gate-backdrop{
  position:fixed; inset:0; z-index:260; padding:20px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(160deg,rgba(236,226,255,.62),rgba(255,226,242,.46) 55%,rgba(226,236,255,.55));
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  opacity:0; transition:opacity .25s ease;
}
.login-gate-backdrop.hidden{ display:none; }
.login-gate-backdrop.show{ opacity:1; }
/* soft pastel blobs behind the glass so it has something to frost */
.lg-blob{ position:absolute; border-radius:50%; filter:blur(6px); pointer-events:none; z-index:0; }
.lg-blob-a{ width:230px; height:230px; left:-50px; top:12%; background:radial-gradient(circle at 35% 35%,#ffc4e3,#e7b9ff 70%); animation:lgBlob 9s ease-in-out infinite; }
.lg-blob-b{ width:200px; height:200px; right:-40px; bottom:14%; background:radial-gradient(circle at 60% 40%,#bfe0ff,#c9b6ff 72%); animation:lgBlob 11s ease-in-out -3s infinite reverse; }
.lg-blob-c{ width:120px; height:120px; right:14%; top:9%; background:radial-gradient(circle at 40% 40%,#ffe0c2,#ffc0dd 75%); animation:lgBlob 8s ease-in-out -5s infinite; }
@keyframes lgBlob{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-22px) scale(1.1); } }

.login-gate{
  position:relative; z-index:1; width:min(344px,100%); text-align:center;
  padding:30px 22px 20px; border-radius:32px; isolation:isolate;
  background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(246,238,255,.52) 60%,rgba(255,240,248,.5));
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:0 30px 70px rgba(120,70,210,.26), 0 4px 14px rgba(255,150,210,.16), inset 0 1.5px rgba(255,255,255,.95), inset 0 -10px 26px rgba(200,170,255,.14);
  transform:translateY(22px) scale(.9); opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.login-gate-backdrop.show .login-gate{ transform:none; opacity:1; }
/* a thin light that keeps tracing the card's edge */
.login-gate::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--lg-angle),rgba(185,156,255,0) 0%,rgba(185,156,255,0) 52%,#b99cff 70%,#ff9ed2 84%,#ffd0a8 92%,rgba(255,208,168,0) 100%);
  -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);
  animation:lgSpin 5s linear infinite;
}
@keyframes lgSpin{ to{ --lg-angle:360deg; } }

.login-gate .login-gate-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.55); color:#8a63d8 !important;
  font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:transform .2s ease, background .2s ease;
}
.login-gate .login-gate-close:hover{ background:#fff; transform:rotate(90deg); }

.login-gate-art{ position:relative; width:120px; height:100px; margin:0 auto 8px; }
.lg-ring{
  position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%;
  border:1.5px dashed rgba(150,110,235,.45); animation:lgSpinRing 14s linear infinite;
}
@keyframes lgSpinRing{ to{ transform:rotate(360deg); } }
.login-gate-bubble{
  position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
  border-radius:26px; display:grid; place-items:center;
  background:linear-gradient(145deg,#d6c2ff 0%,#b494f7 48%,#ff9fd2 130%);
  box-shadow:0 12px 26px rgba(150,100,235,.4), inset 0 2px rgba(255,255,255,.6), inset 0 -6px 12px rgba(120,70,210,.18);
  animation:lgFloat 3.2s ease-in-out infinite;
}
.login-gate-bubble > svg{ width:58px; height:58px; }
.login-gate-plus{
  position:absolute; right:-7px; bottom:-7px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#ff8fc8,#ff6fb0); border:2.5px solid #fff; box-shadow:0 5px 12px rgba(255,111,176,.45);
  animation:lgPlusPop 2.4s ease-in-out infinite;
}
.login-gate-plus svg{ width:13px; height:13px; }
@keyframes lgFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-6px) rotate(3deg); } }
@keyframes lgPlusPop{ 0%,70%,100%{ transform:scale(1); } 80%{ transform:scale(1.22); } 90%{ transform:scale(.96); } }

/* line-art that draws itself, then twinkles */
.lg-sparkle{ position:absolute; fill:none; stroke:#b394f5; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; overflow:visible; }
.lg-sparkle path, .lg-face-ring, .lg-smile, .login-gate-squiggle path{ stroke-dasharray:1; stroke-dashoffset:1; }
.lg-sparkle.s1{ width:20px; height:20px; left:2px; top:6px; }
.lg-sparkle.s2{ width:15px; height:15px; right:2px; top:14px; stroke:#ff8cc6; animation:lgTwinkle 2.6s ease-in-out .5s infinite; }
.lg-sparkle.s3{ width:15px; height:15px; right:14px; bottom:0; stroke:#ffa8d5; animation:lgTwinkle 3s ease-in-out 1s infinite; }
.lg-sparkle.s1{ animation:lgTwinkle 2.8s ease-in-out infinite; }
@keyframes lgTwinkle{ 0%,100%{ transform:scale(.8) rotate(0); opacity:.55; } 50%{ transform:scale(1.15) rotate(14deg); opacity:1; } }
.login-gate-backdrop.show .lg-sparkle path{ animation:lgDraw 1s ease forwards .35s; }
.login-gate-backdrop.show .lg-face-ring{ animation:lgDraw 1.1s ease forwards .3s; }
.login-gate-backdrop.show .lg-smile{ animation:lgDraw .6s ease forwards .9s; }
.login-gate-backdrop.show .login-gate-squiggle path{ animation:lgDraw .9s cubic-bezier(.4,0,.2,1) forwards .6s; }
@keyframes lgDraw{ to{ stroke-dashoffset:0; } }

.login-gate h3{ margin:0; font-size:21px; font-weight:800; color:#2c1a57; letter-spacing:-.01em; }
.login-gate-squiggle{ display:block; width:92px; height:9px; margin:5px auto 9px; overflow:visible; }
.login-gate-squiggle path{ fill:none; stroke:url(#none); stroke:#c9a6ff; stroke-width:2.4; stroke-linecap:round; }
.login-gate-sub{ margin:0 0 6px; font-size:14px; font-weight:600; color:#5b3fa8; line-height:1.5; }
.login-gate-note{ margin:0 0 17px; font-size:12px; line-height:1.55; color:#8a7ba8; }
.login-gate-primary,
.login-gate-secondary{
  display:block; width:100%; cursor:pointer; font:inherit; font-weight:700; position:relative; overflow:hidden;
  border-radius:18px; transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.login-gate-primary{
  padding:13px 16px; font-size:15px; color:#fff !important; margin-bottom:9px; border:none;
  background:linear-gradient(135deg,#a37bf5 0%,#7a4be0 55%,#ff86c1 140%);
  box-shadow:0 12px 24px rgba(122,75,224,.36), inset 0 1.5px rgba(255,255,255,.4);
}
.login-gate-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:42%; left:-60%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:lgShine 3.2s ease-in-out 1.2s infinite;
}
@keyframes lgShine{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
.login-gate-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 28px rgba(122,75,224,.42), inset 0 1.5px rgba(255,255,255,.4); }
.login-gate-primary:active{ transform:scale(.97); }
.login-gate-secondary{
  padding:11px 12px; font-size:12.5px; color:#6c3fd0 !important;
  background:rgba(255,255,255,.5); border:1.5px solid rgba(160,120,240,.35);
}
.login-gate-secondary:hover{ background:rgba(255,255,255,.85); border-color:rgba(160,120,240,.6); }
@media (prefers-reduced-motion:reduce){
  .login-gate, .login-gate-backdrop{ transition:none; }
  .login-gate::before, .lg-blob, .lg-ring, .login-gate-bubble, .login-gate-plus, .lg-sparkle, .login-gate-primary::after{ animation:none; }
  .lg-sparkle path, .lg-face-ring, .lg-smile, .login-gate-squiggle path{ stroke-dashoffset:0 !important; animation:none !important; }
}
.login-gate .login-gate-primary,
.login-gate .login-gate-primary span{ color:#fff !important; }
.login-gate .login-gate-primary span{ position:relative; z-index:1; }
.login-gate .login-gate-secondary{ color:#6c3fd0 !important; }


/* ===== Credit / Lite plan badges ===== */
.plan-tier-badge[data-tier="credit"]{ border-color:#f4b896; background:#ffe0cf; color:#98441c; }
.plan-tier-badge[data-tier="lite"]{ border-color:#c9bdea; background:#ece5fb; color:#5d4a96; }
#orderView .plan-option[data-tier="credit"]{ --tier:#B4521F; --tier-2:#F08A4B; --tier-ink:#FFF1E8; }
#orderView .plan-option[data-tier="lite"]{ --tier:#5D4A96; --tier-2:#8A76C8; --tier-ink:#F3EFFD; }
#previewSection .order-preview-table td .preview-tier[data-tier="credit"]{--tier:#B4521F;--tier-2:#F08A4B;--tier-ink:#FFF1E8}
#previewSection .order-preview-table td .preview-tier[data-tier="lite"]{--tier:#5D4A96;--tier-2:#8A76C8;--tier-ink:#F3EFFD}

/* ===== Mobile store: one nav row (glass bottom bar), no duplicate top row ===== */
@media(max-width:767px){
  /* Login / Get Started / News / bell at the top duplicate the bottom bar */
  .compact-header{ display:none !important; }

  .gp-bottomnav{
    left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
    padding:6px; gap:2px; border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(243,235,255,.42));
    border:1px solid rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(22px) saturate(1.9); backdrop-filter:blur(22px) saturate(1.9);
    box-shadow:0 16px 38px rgba(98,49,200,.22), 0 2px 8px rgba(120,80,210,.10), inset 0 1.5px rgba(255,255,255,.95), inset 0 -8px 18px rgba(190,165,255,.12);
  }
  .gp-bottomnav button{ min-height:56px; border-radius:22px; transition:background .25s ease, transform .2s ease, color .2s ease; }
  .gp-bottomnav button:active{ transform:scale(.94); }
  .gp-bottomnav button.is-active,
  body.light-mode .gp-bottomnav button.is-active{
    background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(236,226,255,.7));
    box-shadow:0 6px 14px rgba(98,49,200,.16), inset 0 1px #fff;
  }
}


/* ===== SVIP tier (Wink SVIP): a deeper, rosier gold than VIP ===== */
.plan-tier-badge[data-tier="svip"]{ border-color:#e5a35f; background:#ffd08f; color:#6b3a06; }
#orderView .plan-option[data-tier="svip"]{ --tier:#8A3F10; --tier-2:#E08A2E; --tier-ink:#FFF1DC; }
#previewSection .order-preview-table td .preview-tier[data-tier="svip"]{--tier:#8A3F10;--tier-2:#E08A2E;--tier-ink:#FFF1DC}

/* Mobile: guest Login / Get Started buttons are not shown in the header
   (the Account tab and the "create an account" popup cover signing in) */
@media(max-width:767px){
  .compact-header #loginBtn,
  .compact-header #getStartedBtn{ display:none !important; }
}

/* ===== Supabase / Notion catalog card colours ===== */
.products .card[data-cat="Developer"]   { --pc:#16875A; --pc-2:#34C58A; }
.products .card[data-cat="Productivity"]{ --pc:#2F2F36; --pc-2:#5E5E6B; }

/* Sign up / log in button while the request is running */
#authSubmitBtn.is-busy{ position:relative; opacity:.92; cursor:progress; }
#authSubmitBtn.is-busy::before{
  content:""; display:inline-block; width:15px; height:15px; margin-right:9px; vertical-align:-2px;
  border:2.2px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%;
  animation:authSpin .7s linear infinite;
}
@keyframes authSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #authSubmitBtn.is-busy::before{ animation-duration:2s; } }
#authSubmitBtn.is-busy:disabled{
  opacity:1 !important; color:#fff !important;
  background:linear-gradient(135deg,#6a7cf7,#8a5cf2) !important;
  box-shadow:0 10px 22px rgba(106,92,240,.32) !important;
}


/* ===== Mobile plan page: no top bar, plans start higher ===== */
@media(max-width:767px){
  /* the top bar (logo / account / News / bell) is gone on mobile everywhere --
     Back buttons and the bottom tab bar cover navigation */
  body.products-mode .catalog-shell{ padding-top:10px; }
  #orderView .panel{ padding-top:12px; }
  #orderView .top-actions{ margin-bottom:8px; }
  #orderView .top-actions .back-btn{ padding:9px 15px; font-size:13px; }
  /* "Hide Plan Selection" and the intro lines only push the plans down */
  #orderView #togglePlansBtn{ display:none !important; }
  #orderView .plans-eyebrow,
  #orderView .plans-sub{ display:none !important; }
  #orderView .plans-header{ margin:2px 0 8px; }
  #orderView .plans-title{ font-size:22px; margin:0; }
  #orderView .plans-product-box{ margin-bottom:10px; }
  #orderView .plan-filters{ margin-bottom:10px; }
}

/* ===== Order journey: completed -> 30s digital countdown -> "open order chat" ===== */
/* Three panes share one box; the active one grows (0fr -> 1fr) while the others fold away. */
#orderStatusView .jy-pane{
  display:grid; grid-template-rows:0fr; opacity:0; pointer-events:none;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
#orderStatusView .jy-pane-in{ min-height:0; overflow:hidden; padding:0 2px; }
#orderStatusView .jy-steps .jy-pane-in{ padding:6px 2px 4px; }
#orderStatusView .fig-os-journey[data-phase="track"] .jy-steps,
#orderStatusView .fig-os-journey[data-phase="count"] .jy-steps,
#orderStatusView .fig-os-journey[data-phase="count"] .jy-wait,
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-chat{
  grid-template-rows:1fr; opacity:1; pointer-events:auto;
}
#orderStatusView .fig-os-journey[data-phase="count"] .jy-wait{ transition-delay:.12s; }
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-chat{ transition-delay:.18s; }
#orderStatusView .fig-os-journey{ position:relative; }
#orderStatusView .fig-os-journey::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; opacity:0;
  box-shadow:0 10px 30px rgba(124,77,230,.32); transition:opacity .5s ease;
}
#orderStatusView .fig-os-journey[data-phase="chat"]::after{ opacity:1; animation:jyGlow 3.2s ease-in-out .8s infinite; }
@keyframes jyGlow{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* countdown card */
#orderStatusView .jy-wait-card{
  margin-top:10px; padding:14px 12px 12px; text-align:center;
  background:linear-gradient(160deg,#f4eeff 0%,#fbf9ff 60%,#efe7ff 100%);
  border:1px solid #e3d9f6; border-radius:14px;
}
#orderStatusView .jy-wait-top{ display:flex; align-items:center; justify-content:center; gap:10px; text-align:left; }
#orderStatusView .jy-wait-ico{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:#fff; border:1px solid #e3d9f6; color:#6231c8; animation:osRingLoop 1.8s ease-out infinite;
}
#orderStatusView .jy-wait-ico svg{ width:18px; height:18px; }
#orderStatusView .jy-wait-label{ display:flex; flex-direction:column; gap:1px; }
#orderStatusView .jy-wait-label b{ font-size:13.5px; color:#2a1a55; }
#orderStatusView .jy-wait-label small{ font-size:11.5px; color:#7d7390; font-weight:600; }

#orderStatusView .jy-clock{ display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 10px; }
#orderStatusView .jy-digit{
  position:relative; width:42px; height:58px; display:grid; place-items:center; overflow:hidden;
  font:800 36px/1 ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace; font-variant-numeric:tabular-nums;
  color:#fff; border-radius:11px;
  background:linear-gradient(180deg,#7a45e6 0%,#6231c8 50%,#5426b3 50%,#6a38d4 100%);
  box-shadow:0 8px 16px rgba(98,49,200,.30), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 2px 6px rgba(30,10,80,.35);
}
/* the thin "flip clock" seam */
#orderStatusView .jy-digit::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
  background:rgba(25,8,70,.38);
}
#orderStatusView .jy-digit.tick{ animation:jyFlip .45s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes jyFlip{
  0%{ transform:perspective(300px) rotateX(-80deg); filter:brightness(1.5); }
  100%{ transform:perspective(300px) rotateX(0); filter:none; }
}
#orderStatusView .jy-colon{ display:flex; flex-direction:column; gap:9px; padding:0 1px; }
#orderStatusView .jy-colon i{ width:7px; height:7px; border-radius:50%; background:#6231c8; animation:osBlink 1s ease-in-out infinite; }
#orderStatusView .jy-bar{ height:5px; border-radius:5px; background:#e5def2; overflow:hidden; margin:0 6px; }
#orderStatusView .jy-bar i{
  display:block; height:100%; width:100%; transform-origin:left center; transform:scaleX(1);
  background:linear-gradient(90deg,#9b6cf2,#6231c8); border-radius:5px; transition:transform .26s linear;
}
#orderStatusView .jy-wait-note{ margin-top:9px; font-size:11px; color:#9a8fb4; font-weight:600; }

/* chat hand-off card */
#orderStatusView .jy-chat-card{
  position:relative; margin-top:8px; padding:16px 14px 14px; text-align:center; overflow:hidden;
  background:linear-gradient(160deg,#f4eeff 0%,#fff 55%,#f1e9ff 100%);
  border:1px solid #e3d9f6; border-radius:14px;
}
#orderStatusView .jy-transfer{ display:flex; align-items:center; justify-content:center; gap:0; margin:2px auto 12px; max-width:250px; }
#orderStatusView .jy-node{
  position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1.5px solid #d6c4f7; color:#6231c8; z-index:1;
  box-shadow:0 6px 14px rgba(98,49,200,.14);
}
#orderStatusView .jy-node svg{ width:24px; height:24px; }
#orderStatusView .jy-node img{ width:34px; height:34px; border-radius:10px; object-fit:cover; }
#orderStatusView .jy-node-hub::after{
  content:""; position:absolute; inset:-1.5px; border-radius:50%; border:2px solid rgba(98,49,200,.45);
  animation:jyPing 2s ease-out infinite;
}
@keyframes jyPing{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.55); opacity:0; } }
#orderStatusView .jy-flow{
  position:relative; flex:1 1 auto; height:2px; min-width:60px; margin:0 -2px;
  background:repeating-linear-gradient(90deg,#cdb6f7 0 6px,transparent 6px 12px);
}
#orderStatusView .jy-flow i{
  position:absolute; top:50%; left:0; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:linear-gradient(135deg,#a77bf5,#6231c8); box-shadow:0 0 10px rgba(124,77,230,.7);
  animation:jyDot 2s cubic-bezier(.45,0,.25,1) infinite; opacity:0;
}
#orderStatusView .jy-flow i:nth-child(2){ animation-delay:.5s; }
#orderStatusView .jy-flow i:nth-child(3){ animation-delay:1s; }
#orderStatusView .jy-flow i:nth-child(4){ animation-delay:1.5s; }
@keyframes jyDot{
  0%{ left:0; opacity:0; transform:scale(.5); }
  15%{ opacity:1; transform:scale(1); }
  85%{ opacity:1; transform:scale(1); }
  100%{ left:calc(100% - 9px); opacity:0; transform:scale(.5); }
}
#orderStatusView .jy-chat-title{ font-size:16px; font-weight:800; color:#2a1a55; }
#orderStatusView .jy-chat-desc{ margin:5px auto 13px; max-width:290px; font-size:12px; line-height:1.5; color:#7d7390; }
#orderStatusView .jy-open{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; max-width:320px; padding:13px 18px; border:0; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:800; line-height:1; color:#fff !important;
  background:linear-gradient(135deg,#7c4de6 0%,#6231c8 60%,#5426b3 100%);
  box-shadow:0 10px 22px rgba(98,49,200,.38), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
#orderStatusView .jy-open:active{ transform:scale(.97); box-shadow:0 5px 12px rgba(98,49,200,.34); }
#orderStatusView .jy-open::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  animation:osSweep 2.6s ease-in-out 1s infinite; pointer-events:none;
}
#orderStatusView .jy-open svg{ width:19px; height:19px; display:block; }
#orderStatusView .jy-open span{ color:#fff !important; }
#orderStatusView .jy-open-arrow{ display:inline-flex; animation:jyNudge 1.4s ease-in-out infinite; }
@keyframes jyNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
/* when the chat phase appears, its pieces pop in one after another */
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-node-you{ animation:osPop .55s cubic-bezier(.34,1.56,.64,1) .35s both; }
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-node-hub{ animation:osPop .55s cubic-bezier(.34,1.56,.64,1) .5s both; }
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-chat-title,
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-chat-desc{ animation:osRise .5s ease .65s both; }
#orderStatusView .fig-os-journey[data-phase="chat"] .jy-open{ animation:osPop .55s cubic-bezier(.34,1.56,.64,1) .8s both; }
@media (max-width:380px){
  #orderStatusView .jy-digit{ width:38px; height:54px; font-size:32px; }
}

/* ===== Order details / activity: open and close as one smooth motion =====
   The box used to reach full height in .4s while its rows were still fading
   in one by one until ~.7s, so it opened as an empty white box first. Now the
   height, the fade and the rows all run on the same short clock. */
@media all{
  #orderStatusView .fig-os-collapse-body{ transition:grid-template-rows .45s cubic-bezier(.32,.72,0,1); }
  #orderStatusView .fig-os-collapse-body > *{
    transform:none; transition:opacity .28s ease;
  }
  #orderStatusView .fig-os-collapse.open .fig-os-collapse-body > *{ transition-delay:.05s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr{ animation:osRiseSoft .32s ease both; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(2){ animation-delay:.03s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(3){ animation-delay:.06s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(4){ animation-delay:.09s; }
  #orderStatusView .fig-os-collapse.open .order-status-details .order-preview-table tr:nth-child(5){ animation-delay:.12s; }
  #orderStatusView .fig-os-collapse-chev{ transition:transform .45s cubic-bezier(.32,.72,0,1); }
  #orderStatusView .fig-os-collapse-head{ -webkit-tap-highlight-color:transparent; }
}
@keyframes osRiseSoft{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* ===== Order chat: the team's "Account details" card (copy button per line) ===== */
.chat-bubble.cred{ background:none !important; border:0 !important; box-shadow:none !important; padding:0; max-width:min(320px,88%); white-space:normal; }
.cred-card{
  min-width:min(262px,100%); overflow:hidden; text-align:left; color:#2a1a55; background:#fff;
  border:1px solid rgba(168,124,224,.5); border-radius:16px; box-shadow:0 8px 20px rgba(93,72,137,.2);
}
.cred-head{
  display:flex; align-items:center; gap:7px; padding:9px 12px; font-size:11.5px; font-weight:800; color:#4b2a8a;
  background:linear-gradient(135deg,#f3ebff,#fbf6e8); border-bottom:1px solid #eee5fb;
}
.cred-head svg{ width:14px; height:14px; color:#7a35c7; flex:0 0 auto; }
.cred-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label btn" "value btn"; column-gap:10px; row-gap:2px; align-items:center; padding:8px 9px 8px 12px; }
.cred-row + .cred-row{ border-top:1px dashed #ece6f7; }
.cred-label{ grid-area:label; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8c7cb0; }
.cred-value{ grid-area:value; min-width:0; overflow-wrap:anywhere; font-weight:700; font-size:12.5px; line-height:1.35; color:#2a1a55 !important; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; user-select:text; }
.cred-card .cred-copy{
  grid-area:btn; width:32px; height:32px; padding:0; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f4f0fa !important; border:1px solid #e3d9f6 !important; color:#6231c8 !important; box-shadow:none;
  transition:background .15s, color .15s, transform .15s;
}
.cred-card .cred-copy:active{ transform:scale(.9); }
.cred-card .cred-copy svg{ width:16px; height:16px; display:block; }
.cred-card .cred-copy.copied{ background:#dcfce7 !important; border-color:#a7e9c0 !important; color:#16a34a !important; }
.chat-row .chat-bubble.cred{ animation:osPop .45s cubic-bezier(.34,1.56,.64,1) both; }


/* ===== Intro: Figma-style purple-glass line-art logo on plain white (see the script under #introSplash) ===== */
/* Timeline (s): strokes draw 0.4 to 4.9, d-pad pops 4.4 to 6.4, finish ring 6.4, title in 6.0 to 7.2,
   then everything holds until the script lifts the splash at ~9.2 (title visible for about 2s). */
.intro-splash{
  position:fixed; inset:0; z-index:99999; display:grid; place-items:center; background:#fff;
  cursor:pointer; touch-action:manipulation; transition:opacity .9s ease;
}
.intro-splash.leave{ opacity:0; pointer-events:none; }
.intro-stack{ display:flex; flex-direction:column; align-items:center; margin-top:-3vh; perspective:900px; transition:transform .9s cubic-bezier(.4,0,.2,1), filter .8s ease; }
.intro-splash.leave .intro-stack{ transform:scale(1.07); filter:blur(3px); }
.intro-logo-wrap{ animation:ilFloat 4.6s ease-in-out 6.4s infinite; }
.intro-logo{
  display:block; width:clamp(132px,38vw,236px); height:auto; overflow:visible;
  filter:drop-shadow(0 10px 12px rgba(98,49,200,.28)) drop-shadow(0 0 18px rgba(168,124,224,.3));
  animation:ilTilt 5.6s cubic-bezier(.22,.8,.25,1) .1s both;
}
.intro-logo *{ transform-box:fill-box; transform-origin:center; }
@keyframes ilTilt{
  0%{ transform:rotateY(-26deg) rotateX(10deg) scale(.95); }
  100%{ transform:none; }
}
@keyframes ilFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* each stroked piece = seven stacked layers: depth, rim, glass body, inner light, core, broad + crisp highlights */
.il-piece{
  stroke-dasharray:1 2; stroke-dashoffset:1.03; opacity:0;
  animation:ilDraw var(--dur,1s) cubic-bezier(.55,0,.25,1) var(--dl,0s) forwards,
            ilSettle calc(var(--dur,1s) + .8s) cubic-bezier(.22,.95,.3,1) var(--dl,0s) both;
}
.il-piece path{ fill:none; }
.l-sh   { stroke:#5a2fc4; stroke-opacity:.2; stroke-width:calc(var(--w)*1.55px); transform:translate(2px,3.4px); }
.l-rim  { stroke:#8456ee; stroke-opacity:.9; stroke-width:calc(var(--w)*1.4px + 1.1px); }
.l-glass{ stroke:url(#ilGlass); stroke-width:calc(var(--w)*1.4px); }
.l-inner{ stroke:#f1e6ff; stroke-opacity:.72; stroke-width:calc(var(--w)*.98px); }
.l-core { stroke:url(#ilCore);  stroke-width:calc(var(--w)*.7px); }
.l-hib  { stroke:#fff; stroke-opacity:.3; stroke-width:calc(var(--w)*.5px); transform:translate(-1px,-1.2px); }
.l-hi   { stroke:#fff; stroke-opacity:.95; stroke-width:calc(var(--w)*.15px); transform:translate(-1.4px,-1.7px); }
.il-g { --dl:.4s;  --dur:2.2s; --dx:-14px; --dy:12px;  --rot:-7deg; }
.il-g2{ --dl:1.3s; --dur:1.8s; --dx:-9px;  --dy:7px;   --rot:-5deg; }
.il-a { --dl:2.5s; --dur:1.2s; --dx:8px;   --dy:-12px; --rot:7deg; }
.il-h1{ --dl:3s;   --dur:1.1s; --dx:10px;  --dy:14px;  --rot:5deg; }
.il-h2{ --dl:3.4s; --dur:1.1s; --dx:12px;  --dy:12px;  --rot:-5deg; }
.il-h3{ --dl:4s;   --dur:.9s;  --dx:0px;   --dy:9px;   --rot:0deg; }
@keyframes ilDraw{ 0%{ stroke-dashoffset:1.03; opacity:0; } 3%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }
@keyframes ilSettle{
  0%{ transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg)) scale(.92); }
  70%{ transform:translate(calc(var(--dx,0)*-.07),calc(var(--dy,0)*-.07)) rotate(calc(var(--rot,0deg)*-.05)) scale(1.02); }
  100%{ transform:none; }
}
/* the arrow head gets a faint glass fill once its outline is drawn */
.il-fill{ fill:url(#ilGlass); stroke:none; opacity:0; animation:ilFade .9s ease 3.7s forwards; }
@keyframes ilFade{ to{ opacity:.6; } }

/* d-pad: four glossy glass buttons (rim, bevel, gloss arc, specular dot, arrow) and a centre hub */
.il-d{ transform:scale(0); animation:ilPop .85s cubic-bezier(.34,1.8,.5,1) var(--dl,0s) forwards; }
.il-d1{ --dl:4.4s; } .il-d3{ --dl:4.65s; } .il-d4{ --dl:4.9s; } .il-d2{ --dl:5.15s; } .il-d5{ --dl:5.6s; }
@keyframes ilPop{ from{ transform:scale(0) rotate(-40deg); } to{ transform:scale(1) rotate(0); } }
.b-sh{ fill:#5a2fc4; opacity:.25; }
.b-rim{ fill:#8363ec; opacity:.9; }
.b-body{ fill:url(#ilBtn); stroke:#fff; stroke-opacity:.55; stroke-width:.7; }
.b-bevel{ fill:none; stroke:#fff; stroke-opacity:.4; stroke-width:.8; }
.b-gloss{ fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:round; opacity:.95; }
.b-spec{ fill:#fff; opacity:.95; }
.b-arrow{ fill:#fff; opacity:.94; }

/* finish: one soft ring, a small breath, a floor shadow that grounds the mark */
.il-all{ animation:ilBreath 1s cubic-bezier(.3,0,.3,1) 6.4s both; }
@keyframes ilBreath{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.04); } }
.il-ring{ fill:none; stroke:#a87ce0; stroke-width:1.4; opacity:0; animation:ilRing 1.6s cubic-bezier(.2,.7,.3,1) 6.4s both; }
@keyframes ilRing{ 0%{ opacity:.5; transform:scale(.6); } 100%{ opacity:0; transform:scale(1.7); } }
.il-floor{ fill:#7a35c7; opacity:0; transform-origin:center; animation:ilFloor 1.6s ease 4.8s forwards; }
@keyframes ilFloor{ from{ opacity:0; transform:scale(.4); } to{ opacity:.22; transform:scale(1); } }

.intro-title{
  display:flex; gap:.6em; margin-top:clamp(20px,4.4vh,34px); padding-left:.32em;
  font-weight:700; letter-spacing:.32em; font-size:clamp(13px,3.6vw,18px); line-height:1; color:#3d2a8f;
  text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased;
  opacity:0; transform:translateY(8px); animation:ilText 1.2s ease 6s forwards;
}
.intro-title .acc{ background:linear-gradient(115deg,#a87ce0,#6231c8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes ilText{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .intro-splash{ display:none !important; } }

/* ===== Order slip: a more realistic paper stock (same layout as before) ===== */
/* Warm thermal paper built from layers: shade where it leaves the slot, faint
   feed-roller banding, mottled tone, long fibres, fine grain and a soft sheen. */
#previewSection .pv3-slip{
  background-color:#fdfcf8;
  background-image:
    linear-gradient(to bottom, rgba(70,58,34,.1), rgba(70,58,34,0) 40px),
    repeating-linear-gradient(to bottom, rgba(120,108,84,.022) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='m' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .38  0 0 0 .2 -.085'/></filter><rect width='320' height='320' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.55 .018' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .36  0 0 0 .2 -.07'/></filter><rect width='220' height='220' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .33  0 0 0 0 .27  0 0 0 .34 -.115'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>"),
    linear-gradient(105deg,#ffffff,#f9f7f1 52%,#fffefb);
  background-size:100% 100%, 100% 3px, 320px 320px, 220px 220px, 140px 140px, 100% 100%;
  box-shadow:inset 0 0 22px rgba(128,112,80,.07), inset 1px 0 0 rgba(255,255,255,.9), inset -1px 0 0 rgba(140,124,92,.1);
  color:#1c1b18;
}
#previewSection .pv3-paper{
  filter:drop-shadow(0 1px 1px rgba(60,50,30,.16)) drop-shadow(0 12px 14px rgba(60,50,30,.13));
  box-shadow:none;
}
/* thermal ink: very slightly soft edges, warm grey rules */
#previewSection .pv3-slip *{ text-shadow:0 0 .4px rgba(28,27,24,.22); }
#previewSection .pv3-sect,
#previewSection .pv3-total{ border-color:#cfc8b8; }
#previewSection .pv3-slip .pv3-slipbrand,
#previewSection .pv3-slip .pv3-itemrow b,
#previewSection .pv3-slip .pv3-amount,
#previewSection .pv3-slip .pv3-dt,
#previewSection .pv3-slip .pv3-row > span,
#previewSection .pv3-slip .pv3-row > b,
#previewSection .pv3-slip .pv3-total-l b{ color:#1c1b18; }
#previewSection .pv3-barcode svg{ color:#1c1b18; }
/* the torn edge matches the paper and casts its own little shadow */
#previewSection .pv3-zigzag{ fill:#f4f2ec; filter:drop-shadow(0 2px 1px rgba(60,50,30,.16)); }

/* ===== Slip page: less scrolling ===== */
#previewSection .pv3-topbar{ margin-bottom:4px; }
#previewSection .pv3-back, #previewSection .pv3-printslip{ min-height:32px; }
#previewSection .pv3-shell{ padding-top:0; padding-bottom:18px; }
@media (min-width:640px){ #previewSection .pv3-card{ padding:10px 20px 8px; } }
#previewSection .pv3-card{ padding-top:6px; padding-bottom:8px; }
#previewSection .pv3-statusline{ margin-bottom:0; }
#previewSection .pv3-slip{ padding:10px 20px; }
#previewSection .pv3-sect{ margin-top:5px; padding-top:5px; }
#previewSection .pv3-rows{ margin-top:6px; gap:4px; }
#previewSection .pv3-total{ margin-top:5px; padding:6px 0; }
#previewSection .pv3-barcode{ margin-top:6px; }
#previewSection .pv3-totalrow{ margin-top:6px; padding:6px 12px; }
#previewSection .pv3-foot{ margin-top:10px; padding:12px 0; }

/* ===== printer sound toggle ===== */
#previewSection .pv3-statusbtns{ display:inline-flex; align-items:center; gap:2px; }
#previewSection .pv3-sound{
  display:inline-flex; align-items:center; justify-content:center; width:34px; min-height:34px; padding:0;
  background:none; border:0; border-radius:8px; cursor:pointer; color:#555e6e;
}
#previewSection .pv3-sound:hover{ background:rgba(255,255,255,.7); }
#previewSection .pv3-sound svg{ width:16px; height:16px; }
#previewSection .pv3-sound .pv3-sound-off{ display:none; }
#previewSection .pv3-sound.is-off{ color:#9aa3b2; }
#previewSection .pv3-sound.is-off .pv3-sound-on{ display:none; }
#previewSection .pv3-sound.is-off .pv3-sound-off{ display:inline; }
@media print{ #previewSection .pv3-sound{ display:none !important; } }


/* ===== Orders / Account / Security: the same glass look as the Store page ===== */
/* These pages used a flat #F4F4FA sheet and a solid white tab bar. Now the page
   background shows through (like the Store), the tab bar floats as frosted glass
   with the News tab, and the cards are translucent white. */
.acct-screen{ background:transparent; }
.acct-tabbar{
  left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto; padding:6px; border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(243,235,255,.42));
  border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.9); backdrop-filter:blur(22px) saturate(1.9);
  box-shadow:0 16px 38px rgba(98,49,200,.22), 0 2px 8px rgba(120,80,210,.10), inset 0 1.5px rgba(255,255,255,.95), inset 0 -8px 18px rgba(190,165,255,.12);
}
.acct-tabbar-inner{ width:100%; gap:2px; }
.acct-tab{
  min-height:56px; justify-content:center; border-radius:22px; color:#2a1a55;
  transition:background .25s ease, transform .2s ease, color .2s ease;
}
.acct-tab:active{ transform:scale(.94); }
.acct-tab.active{
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(236,226,255,.7));
  box-shadow:0 6px 14px rgba(98,49,200,.16), inset 0 1px #fff;
  color:#6231c8;
}
.acct-card,
.mo-fcard{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 10px 26px rgba(98,49,200,.10), inset 0 1px rgba(255,255,255,.95);
}
.acct-profile-card{
  background:linear-gradient(135deg,rgba(247,243,255,.82),rgba(222,210,255,.7));
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 12px 30px rgba(98,49,200,.14), inset 0 1px rgba(255,255,255,.95);
}
.acct-icon-btn,
.mo-back-btn{
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 4px 12px rgba(98,49,200,.10);
}

/* Account page: pull the details up (smaller header, tighter card and rows) */
#accountView .acct-col{ padding-top:4px; gap:10px; }
#accountView .acct-appbar{ padding:0 2px; }
#accountView .acct-brand-logo{ height:30px; }
#accountView .acct-appbar-word{ font-size:19px; }
#accountView .acct-icon-btn,
#accountView .acct-appbar-avatar{ width:38px; height:38px; }
#accountView .acct-icon-btn svg{ width:18px; height:18px; }
#accountView .mo-headrow{ margin-top:0; }
#accountView .acct-profile-card{ padding:14px 16px; border-radius:22px; }
#accountView .acct-profile-top{ gap:14px; }
#accountView .acct-avatar-wrap,
#accountView .acct-avatar{ width:62px; height:62px; }
#accountView .acct-avatar{ border-radius:20px; font-size:24px; }
#accountView .acct-profile-name{ font-size:20px; }
#accountView .acct-verified{ margin-top:6px; padding:4px 10px; }
#accountView .acct-stats{ margin-top:12px; }
#accountView .acct-stat{ padding:10px 16px; }
#accountView .acct-stat-value{ font-size:22px; }
#accountView .avatar-popover{ top:84px; }
#accountView .acct-card-title{ padding:11px 0 2px; }
#accountView .acct-row{ padding:10px 0; }

/* Discount cards: the whole card opens the product's plan choice */
.gp-card{ cursor:pointer; }