/* Satisfy.bz bundle: css/storefront.bundle.css | built 2026-03-26T19:51:44.262Z */
/* >>> assets:css/app.css >>> */
/* Satisfy.bz build: 2026-02-04 (assets: public/assets) */
:root{
  color-scheme: dark;
  --bg0:#0b1310;
  --bg1:#0f1913;
  --card:#152219;
  --card2:#18261d;
  --text:#f4f7f5;
  --muted:#93a79a;
  --muted2:#7f9487;
  --green:#7bc47f;
  --green2:#6bb36f;
  --line:rgba(255,255,255,.08);
  --shadow: 0 18px 40px rgba(0,0,0,.55);
  --radius:22px;
  --radius2:16px;
  --blur: 14px;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* =====================================================================
   FIX: Checkout/Invoice UX (fit + actions + txids + spinner check)
   ===================================================================== */

.checkoutModal .modal__panel{display:flex;flex-direction:column;height:100%;overflow-x:hidden}
.checkoutModal .modal__top{flex:0 0 auto}
.checkoutModal .checkoutFlow{flex:0 0 auto}
.checkoutModal .modal__body.checkoutBody{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.checkoutModal .checkoutNav{position:relative;bottom:auto;left:auto;right:auto;width:100%;margin-top:auto;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.checkoutModal .invoiceHead{position:sticky;top:0;z-index:3;backdrop-filter:blur(10px)}
.checkoutModal .invoiceItems__list{max-height:none;overflow:visible;-webkit-overflow-scrolling:touch}

.invoiceDetailsModal .modal__panel{overflow-x:hidden}


.invoiceItems__list{max-height:320px;overflow:auto;-webkit-overflow-scrolling:touch}

.invoiceTx{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.invoiceTx__label{font-size:12px;opacity:.72;margin-bottom:8px}
.invoiceTx__list{display:grid;gap:8px}
.invoiceTxRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.invoiceTxRow__id{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.invoiceAfterPaid{margin-top:12px;padding:12px;border-radius:14px;background:rgba(123,196,127,.14);border:1px solid rgba(123,196,127,.22)}
.invoiceAfterPaid__title{font-weight:600;margin-bottom:4px}
.invoiceAfterPaid__text{font-size:13px;line-height:1.35;opacity:.92}


.invoicePayCard{position:relative}
.invoiceSpinner{max-height:56px;overflow:hidden;transition:opacity .22s ease,max-height .22s ease,margin .22s ease,transform .22s ease}
.invoicePayCard.is-postpaid .invoiceSpinner{opacity:0;max-height:0;margin-top:0;transform:translateY(-6px) scale(.98);pointer-events:none}

.invoiceNext{margin-top:12px;padding:12px;border-radius:18px;background:rgba(123,196,127,.10);border:1px solid rgba(123,196,127,.22);color:rgba(255,255,255,.90);overflow:hidden;max-height:0;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease,max-height .26s ease}
.invoicePayCard.is-postpaid .invoiceNext{max-height:420px;opacity:1;transform:none}
.invoiceNext__title{font-weight:600;margin-bottom:8px}
.invoiceNext__steps{display:grid;gap:8px;font-size:13px;line-height:1.35}
.invoiceNext__step{display:flex;gap:8px;align-items:flex-start}
.invoiceNext__dot{width:8px;height:8px;border-radius:999px;margin-top:6px;background:rgba(123,196,127,.95);box-shadow:0 0 0 4px rgba(123,196,127,.10);flex:0 0 auto}
.invoiceNext__note{margin-top:10px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.80)}

.invoiceGuestKey__hint{margin-top:8px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}
.invoiceGuestKey__row--secondary{margin-top:10px}

.invoiceSpinner{position:relative}
.invoiceSpinner__check{position:absolute;width:22px;height:22px;left:10px;top:10px;border-radius:999px;border:2px solid rgba(123,196,127,0);opacity:0;transform:scale(.8)}
.invoiceSpinner.is-complete .spinner{opacity:0;transform:scale(.8);transition:opacity .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1)}
.invoiceSpinner.is-complete .invoiceSpinner__check{opacity:1;transform:scale(1);border-color:rgba(123,196,127,.95);box-shadow:0 0 0 6px rgba(123,196,127,.10);transition:opacity .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),border-color .18s ease}
.invoiceSpinner.is-complete .invoiceSpinner__check:before{content:"";position:absolute;left:6px;top:9px;width:6px;height:3px;border-left:2px solid rgba(123,196,127,.95);border-bottom:2px solid rgba(123,196,127,.95);transform:rotate(-45deg)}

.checkoutForm select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.72) 50%),linear-gradient(135deg,rgba(255,255,255,.72) 50%,transparent 50%);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 14px) calc(1em + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}


html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* Native <select>/<option> dropdown colors (Windows/Chrome default is white without this). */
select{ color-scheme: inherit; }
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) option,
html:not([data-theme="light"]) optgroup{ background-color: var(--bg1); color: var(--text); }
html[data-theme="light"] select,
html[data-theme="light"] option,
html[data-theme="light"] optgroup{ background-color: #fff; color: #0B0F16; }

/* Ensure the HTML `hidden` attribute always wins over component styles */
[hidden]{ display:none !important; }

/* =====================================================================
   Stage 9: Cart/Checkout stock revalidation notice
   ===================================================================== */

.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.notice--warn{border-color:rgba(255,193,7,.22);background:rgba(255,193,7,.10)}
.notice__icon{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;background:rgba(255,193,7,.16);border:1px solid rgba(255,193,7,.22)}
.notice__main{min-width:0;flex:1 1 auto}
.notice__title{font-weight:700;letter-spacing:.2px;margin-bottom:3px}
.notice__text{font-size:13px;line-height:1.35;color:rgba(255,255,255,.88)}
.notice__list{margin:8px 0 0 18px;padding:0;display:grid;gap:4px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.80)}
.notice__close{flex:0 0 auto;border:0;background:transparent;color:rgba(255,255,255,.72);font-size:18px;line-height:18px;width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease}
.notice__close:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.92)}

.cartNotice{margin:0 0 12px 0}
.checkoutNotice{margin:0 0 12px 0}

/* Never render "dot" badges: if there is no text, the badge must be hidden */
.iconBadge:empty,
.supportTab__badge:empty,
.badge:empty,
.threadRow__badge:empty{ display:none !important; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color:var(--text);
  background: radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
}

/* Typography: mono */
.price__fiat,
.price__crypto,
.threadRow__time,
.bubble__time,
.badge{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.shell{min-height:100%;padding-bottom:92px}
.sitebar{
  display:none;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 18px;
  background:
  radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 32px rgba(0,0,0,.38);
  backdrop-filter: blur(var(--blur));
}
.sitebar__inner{
  display:flex;
  gap: 14px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: center;
}
.sitebar__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-right: 6px;
  user-select:none;
}
.sitebar__logo{height:28px;display:block;}
.sitebar__logo--light{display:none;}
html[data-theme="light"] .sitebar__logo--dark{display:none;}
html[data-theme="light"] .sitebar__logo--light{display:block;}

.sitebar__brandIcon{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}
.sitebar__brandName{ font-weight: 600; letter-spacing:.2px; }
.sitebar__brandTld{ opacity:.88; }

.sitebar__search{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 25px;
  margin-bottom: 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 420px;
  max-width: 620px;
}
.sitebar__searchIcon{ opacity:.72; }
.sitebar__searchInput{
  flex:1;
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: var(--text);
  font-size: 14px;
}
.sitebar__searchInput::placeholder{ color: rgba(255,255,255,.46); }
.sitebar__searchBtn{
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: rgba(255,255,255,.86);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
}

.topnav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.topnav__item{
  position: relative;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.74);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  transition: background .16s ease, border-color .16s ease, transform .12s ease, color .16s ease, box-shadow .16s ease;
}

/* Desktop top nav icon-only buttons (match mobile icon style) */
.topnav__item--icon{
  width: 38px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topnav__icon{display:inline-flex;align-items:center;justify-content:center;opacity:.96}
.topnav__item--icon .badge--top{ right:-6px; top:-8px; }

/* Desktop top nav auth button (icon + label, becomes Login for guests) */
.topnav__item--auth{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.topnav__authLabel{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.86);
}
.topnav__item--auth:hover .topnav__authLabel{ color: rgba(255,255,255,.92); }
html[data-theme="light"] .topnav__authLabel{ color: rgba(15,27,20,.86); }

@media (max-width: 720px){
  /* Keep top bar compact on small widths */
  .topnav__item--auth{ width: 38px; padding: 0; gap: 0; }
  .topnav__item--auth .topnav__authLabel{ display:none; }
}

@keyframes navPulse{
  0%{ transform: translateY(0) scale(1); }
  40%{ transform: translateY(-1px) scale(1.06); }
  100%{ transform: translateY(0) scale(1); }
}
.topnav__item.is-pulse{ animation: navPulse .42s ease; }
.badge.is-pulse{ animation: navPulse .42s ease; }
.topnav__item:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}
.topnav__item:active{ transform: translateY(1px); }
.topnav__item.is-active{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.badge--top{
  position:absolute;
  right: -4px;
  top: -6px;
}

.sitebar__deliver{
  display:flex;
  align-items:center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  white-space: nowrap;
}
.sitebar__deliverIcon{ opacity:.78; }
.sitebar__deliverText{ font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }

@media (min-width: 1180px){
  .sitebar__search{ max-width: 700px; }
}
.iconbtn{
  position:relative; display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  color:var(--text); cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
/* ===== Header chat badge ===== */
.iconbtn{ position: relative; }
.iconbtn--badge .iconBadge{
  position:absolute;
  top: 6px; right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  color: rgba(10,14,12,.92);
  background: radial-gradient(circle at 30% 30%, rgba(255,196,92,1), rgba(255,84,84,1));
  box-shadow: 0 0 0 3px rgba(255,120,60,.14), 0 10px 26px rgba(255,90,60,.30);
}
/* Hide header chat button when any modal/sheet is open */
/* support quick icon next to menu must stay visible even when menus/modals are open */
body[data-modal-open="1"] #supportQuickBtn{ display:inline-flex !important; }
body[data-modal-open="1"] #ordersQuickBtn{ display:inline-flex !important; }

.iconbtn:active{transform: scale(.97)}
.iconbtn:focus-visible{ outline: 2px solid rgba(123,196,127,.55); outline-offset: 2px; }
.iconbtn--ghost{border-color: rgba(255,255,255,.06); background: rgba(0,0,0,.18)}
.iconbtn__glyph{font-size:18px;line-height:1}
.discountPercentGlyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
}
.iconbtn--discounts{
  position:relative;
  overflow:hidden;
  border-color:rgba(244,201,112,.48);
  color:#fff5cf;
  background:
    linear-gradient(180deg, rgba(255,214,120,.18), rgba(255,191,73,.08)),
    rgba(10,12,11,.32);
  box-shadow:
    0 0 0 1px rgba(255,214,120,.18) inset,
    0 10px 24px rgba(0,0,0,.20),
    0 0 20px rgba(244,201,112,.14);
  animation:discountGoldPulse 3.2s ease-in-out infinite;
}
.iconbtn--discounts .discountPercentGlyph{
  color:#fff1bf;
  text-shadow:0 0 10px rgba(244,201,112,.32), 0 0 18px rgba(244,201,112,.16);
}
.iconbtn--discounts::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg, rgba(255,232,168,.95), rgba(244,201,112,.72), rgba(255,240,199,.95));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.92;
  pointer-events:none;
}
.iconbtn--discounts::after{
  content:"";
  position:absolute;
  inset:-35% auto -35% -55%;
  width:60%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,245,207,.42), rgba(255,255,255,0));
  animation:discountIconSweep 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes discountGoldPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,214,120,.18) inset, 0 10px 24px rgba(0,0,0,.20), 0 0 20px rgba(244,201,112,.14); }
  50%{ box-shadow:0 0 0 1px rgba(255,233,174,.24) inset, 0 12px 28px rgba(0,0,0,.24), 0 0 28px rgba(244,201,112,.24); }
}
.badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px;height:18px;padding:0 6px;border-radius:999px;
  background: var(--green); color:#072112;
  font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 18px rgba(123,196,127,.25);
}

.page{max-width:1100px;margin:0 auto}
.hero{
  position:relative;
  margin:16px 14px 10px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72)),
    url("../img/embedded/5bcbeb9b5235e4fa.png") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.hero__top{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px;
}
.hero__metaLine{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 12px;border-radius:999px;background: rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);backdrop-filter: blur(var(--blur));max-width: calc(100vw - 140px);white-space:nowrap;overflow:hidden;}
.metaText{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.metaDot{width:8px;height:8px;border-radius:50%;background:rgba(123,196,127,.9);box-shadow:0 0 18px rgba(123,196,127,.45)}
.hero__actions{display:flex;gap:8px}
.hero__content{position:relative;padding:12px 16px 0}
.hero__title{margin:6px 0 6px;font-size:32px;line-height:1.05;letter-spacing:-0.6px}
.hero__titleBrand{
  background: linear-gradient(90deg, #ffffff, rgba(123,196,127,.95));
  -webkit-background-clip:text;background-clip:text;color: transparent;
}
.hero__subtitle{margin:0;color:rgba(255,255,255,.78);font-size:14px}

.chips{
  position:relative;
  padding:26px 14px 16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.chip{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  user-select:none;
}
.chip:hover{border-color: rgba(123,196,127,.30)}
.chip:active{transform: scale(.99)}
.chip:focus-visible{ outline: 2px solid rgba(123,196,127,.45); outline-offset: 2px; }
.chip__icon{width:18px;height:18px;display:block;filter: drop-shadow(0 0 6px rgba(123,196,127,.15))}
.chip__icon svg{width:18px;height:18px;display:block}
.chip__label{font-weight:600;font-size:14px;letter-spacing:.1px}
.chip__dir{width:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;line-height:1;opacity:.78;transform: translateY(-.5px)}
.chip.is-active{
  background: rgba(123,196,127,.18);
  border-color: rgba(123,196,127,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(123,196,127,.12) inset;
}

.section{padding:10px 14px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 2px 10px}
.section__title{margin:0;font-size:18px;letter-spacing:-.2px}
.linkbtn{
  background:none;border:0;color:rgba(255,255,255,.78);
  font-weight:600;font-size:13px;cursor:pointer;
  padding:8px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
}
.linkbtn:active{transform: scale(.99)}

.rail{
  display:flex;gap:14px;
  overflow-x:auto;
  padding:6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar{height:0}

.railEmpty{
  flex: 1 0 auto;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  font-weight: 600;
}

.card {
    position: relative;
    flex: 0 0 78vw;
    max-width: 340px;
    min-width: 240px;
    scroll-snap-align: start;
    border-radius: 18px;
    background:
      radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
      radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
      linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));

    box-shadow: 0 26px 70px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
    margin: 5px;
    border: 1px solid rgba(123,196,127,.14);
}
.card:hover{
  border-color: rgba(123,196,127,.28);
  box-shadow: 0 30px 76px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
}
.card:active{transform: scale(.99)}
.card__imgWrap{position:relative;height:160px;overflow:hidden}
.card__ratingOverlay{position:absolute;top:10px;right:10px;z-index:4;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;max-width:calc(100% - 20px)}
.card__ratingOverlay .card__rating{pointer-events:auto;margin:0;padding:7px 10px;min-height:34px;box-shadow:0 14px 28px rgba(0,0,0,.28);background:rgba(10,14,18,.56);border-color:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card__ratingOverlay .card__rating .rating__stars{font-size:12px}
.card__ratingOverlay .card__rating .rating__value{font-weight:800}
.card__ratingOverlay .card__rating .rating__count{color:rgba(245,247,250,.72)}
.card__img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.05);transform: scale(1.02)}
.card__shade{position:absolute;inset:0;background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62))}
.card__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.card__playIcon{
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  font-size:22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.card__body{padding:12px 12px 14px}
.card__titleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__title{margin:0;font-size:16px;letter-spacing:-.2px;font-weight:600}
.tag{
  font-size:11px;color:rgba(255,255,255,.78);
  padding:6px 8px;border-radius:999px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.11);
  white-space:nowrap;
}
.card__meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.weightRow{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
}
.wbtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-weight: 550;
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.wbtn:active{ transform: scale(.98); }
.wbtn:hover{ border-color: rgba(123,196,127,.22); }
.wbtn.is-active{
  border-color: rgba(123,196,127,.40);
  background: rgba(123,196,127,.18);
  box-shadow: 0 8px 18px rgba(123,196,127,.18);
  color:#eaffea;
}
.weightPicker{
  margin-top: 12px;
  padding: 10px 10px 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.bulkInfo{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -.1px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.bulkInfo__muted{ color: rgba(255,255,255,.70); font-weight: 600; }
.bulkInfo__save{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(123,196,127,.28);
  background: rgba(123,196,127,.14);
  color: #eaffea;
  font-weight: 600;
  white-space: nowrap;
}

.bulkInfo strong{ color: rgba(255,255,255,.92); font-weight: 600; }

/* Fly-to-cart animation */
.flyItem{
  position: fixed;
  z-index: 120;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transform: translate(0,0) scale(1);
  opacity: 1;
  transition: transform .58s cubic-bezier(.2,.9,.2,1), opacity .58s ease, filter .58s ease;
  filter: saturate(1.1) contrast(1.02);
}
.flyItem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.weightPicker__label{
  font-size: 12px;
  color: rgba(255,255,255,.78);
  font-weight: 550;
  letter-spacing: -.1px;
  margin-bottom: 8px;
}
.weightSeg{ display:flex; flex-wrap:wrap; gap: 8px; }
.pill{font-size:12px;padding:6px 10px;border-radius:999px;background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color: rgba(255,255,255,.82)}
.pill--muted{color: rgba(255,255,255,.72)}
.pill--ok{color:#c9f2cc;background:rgba(123,196,127,.16);border-color:rgba(123,196,127,.32)}
html[data-theme="light"] .pill--ok{color:rgba(24,99,53,.96);background:rgba(123,196,127,.16);border-color:rgba(24,99,53,.18)}
.okDot{display:inline-block;width:7px;height:7px;border-radius:50%;background: rgba(123,196,127,.95);box-shadow:0 0 12px rgba(123,196,127,.35);margin-right:6px}
.priceRow{margin-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price{display:flex;flex-direction:column;gap:2px}
.price__fiat{font-size:16px;font-weight:600;letter-spacing:-0.2px}
.price__crypto{font-size:12px;color: rgba(255,255,255,.70)}
.card__stockMeta{margin-top:4px;font-size:12px;color: var(--muted);font-weight:550;letter-spacing:-.1px}
.card__stockMeta strong{color: rgba(255,255,255,.92);font-weight:600}
.card__stockMeta--low{color: rgba(240,177,120,.92)}
.card__stockMeta--out{color: rgba(255,255,255,.62)}
.addBtn{
  width:38px;height:38px;border-radius:14px;
  border:1px solid rgba(123,196,127,.35);
  background: rgba(123,196,127,.16);
  color:#eaffea;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
}
.addBtn:active{transform: scale(.97)}
.addBtn:hover{ background: rgba(123,196,127,.20); border-color: rgba(123,196,127,.48); }
.addBtn:disabled,
.addBtn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.64);
  transform:none;
}
.addBtn:disabled:hover,
.addBtn.is-disabled:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.addBtn__plus{font-size:18px;line-height:1}

.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 10px 18px;
    background: rgba(7, 11, 9, .92);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(var(--blur));
  display:flex;justify-content:space-around;align-items:flex-end;
  box-shadow: 0 -12px 28px rgba(0,0,0,.42);
}

.bottomnav__item{
  position:relative;width:84px;border:0;background:none;
  color: rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
  transition: color .2s ease, transform .2s ease;
}
.bottomnav__icon{font-size:20px;line-height:1}
.bottomnav__label{font-size:11px;font-weight:600;letter-spacing:.1px}
.bottomnav__item.is-active{color:#fff}
.bottomnav__item.is-active .bottomnav__icon{
  filter: drop-shadow(0 0 10px rgba(123,196,127,.55));
  transform: scale(1.10);
}
.bottomnav__item.is-active::after{
  content:""; position:absolute; bottom:-6px;
  width:18px;height:3px;border-radius:99px;
  background: var(--green);
  box-shadow:0 8px 18px rgba(123,196,127,.25);
}
.bottomnav__glow{
  position:absolute;left:50%;transform: translateX(-50%);
  bottom:0;width:220px;height:70px;
  background: radial-gradient(closest-side, rgba(123,196,127,.26), transparent 70%);
  filter: blur(12px); pointer-events:none;
}

.modal{position:fixed;inset:0;display:none;z-index:80}
.modal.is-open{display:block}
.modal__scrim{position:absolute;inset:0;background: rgba(0,0,0,.58);backdrop-filter: blur(6px)}
.modal__panel{
  position:absolute;left:10px;right:10px;bottom:10px;
  border-radius:24px;
  background: rgba(18, 28, 21, .92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.60);
  overflow:hidden;
}
.modal__top{display:flex;align-items:center;gap:10px;}
.backbtn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: none;
    background: rgb(255 255 255 / 0%);
    color: rgb(255 255 255 / 72%);
    cursor: pointer;
}
.backbtn__icon{font-size:20px}

/* Generic icon button (used in fullscreen viewer) */
.iconBtn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-size: 22px;
  line-height: 1;
  border-radius: 12px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease;
}
@media (hover:hover) and (pointer:fine){
  .iconBtn:hover{ background: rgba(255,255,255,.06); }
}
.iconBtn:active{ background: rgba(255,255,255,.10); transform: scale(.98); }
.iconBtn:focus-visible{ outline: 2px solid rgba(123,196,127,.55); outline-offset: 2px; }
.modal__topTitle{font-weight:600;letter-spacing:-.2px}
.modal__topSpacer{flex:1}
.modal__body{max-height:79dvh;overflow:auto}
.modal__media{padding:10px 12px 0}
.modal__img{width:100%;height:220px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.10)}
.modal__content{padding:12px 14px 16px}
.modal__titleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal__title{margin:0;font-size:20px;letter-spacing:-.3px}
.rating{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color: rgba(255,255,255,.88);font-size:12px}
.rating__stars{letter-spacing:1px;opacity:.95}
.rating__value{font-weight:600}
.metaRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.priceBlock{margin-top:12px;padding:12px 12px;border-radius:18px;background: rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.priceBlock__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.priceBlock__row--sub{padding-top:10px;border-top:1px dashed rgba(255,255,255,.12);margin-top:6px}
.priceBlock__label{color: rgba(255,255,255,.70);font-size:12px}
.priceBlock__value{font-weight:600;letter-spacing:-.2px}
.stockNote{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-weight: 650;
  letter-spacing: -.12px;
}
.stockNote::before{ content:"●"; margin-right:8px; color: rgba(240,177,120,.92); }
.desc{margin:12px 2px 0;color: rgba(255,255,255,.78);font-size:13px;line-height:1.45}
.ctaRow{margin-top:14px;display:flex;gap:10px}
.btn{border:0;border-radius:16px;padding:12px 14px;font-weight:600;cursor:pointer;transition: transform .14s ease, background .14s ease, border-color .14s ease}
.btn:active{transform: scale(.99)}
.btn--primary{flex:1;background: linear-gradient(180deg, rgba(123,196,127,1), rgba(107,179,111,1));color:#000000}
.btn--ghost{background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color: rgba(255,255,255,.90)}
.btn:disabled,
.btn.is-oos{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.08);
}
.btn:disabled:active,
.btn.is-oos:active{ transform:none; }
.toast{
  position:fixed;left:50%;transform: translateX(-50%);
  bottom:96px;z-index:90;
  padding:10px 12px;border-radius:14px;
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, rgba(10,18,14,.96), rgba(15,25,19,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-weight:600;font-size:13px;
  opacity:0;pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast.is-show{opacity:1;transform: translateX(-50%) translateY(-6px)}
.toast--action{pointer-events:auto; width:min(460px, calc(100vw - 24px)); padding:12px 14px; border-radius:18px}
.toast__content{display:flex; flex-direction:column; gap:10px}
.toast__text{font-weight:700; line-height:1.35; color:rgba(255,255,255,.94)}
.toast__actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.toast__btn{appearance:none; border:1px solid rgba(255,255,255,.12); border-radius:12px; min-height:36px; padding:8px 12px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; color:rgba(255,255,255,.92); background:rgba(255,255,255,.06)}
.toast__btn:active{transform:scale(.98)}
.toast__btn--primary{color:#041007; border-color:rgba(123,196,127,.22); background:linear-gradient(180deg, rgba(123,196,127,1), rgba(107,179,111,1))}
@media (min-width: 960px){
  .shell{padding-bottom:22px}
  .sitebar{display:block}
  .hero{margin:18px auto 12px;max-width:1100px}
  .chips{grid-template-columns:repeat(4,1fr);padding-top:34px}
  .bottomnav{display:none}
  .section{max-width:1100px;margin:0 auto;padding-left:18px;padding-right:18px}
  .card{flex-basis:320px}
  .modal__panel{left:50%;top:50%;bottom:auto;right:auto;width:520px;transform: translate(-50%,-50%)}
  .toast{bottom:28px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* Theme: smooth switch */
body, .hero, .card, .chip, .sitebar, .bottomnav, .modal__panel, .menu__panel, .search, .mobileSearch, .priceBlock, .toast {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Mobile search (shown on mobile only) */
.mobileSearch{
  position: relative;
  margin: 14px 14px 0;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.mobileSearch__icon{opacity:.95}
.mobileSearch__input{
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: var(--text);
  font-size: 14px;
}
.mobileSearch__input::placeholder{ color: rgba(255,255,255,.45); }

/* Hide mobile search on desktop (desktop has top search) */
@media (min-width: 960px){
  .mobileSearch{display:none}
}

/* Modal animations (smooth open/close) */
.modal{opacity:0; pointer-events:none;}
.modal.is-open{opacity:1; pointer-events:auto;}
.modal__scrim{opacity:0; transition: opacity .22s ease;}
.modal.is-open .modal__scrim{opacity:1;}
.modal__panel{
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.modal.is-open .modal__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal.is-closing .modal__scrim{opacity:0;}
.modal.is-closing .modal__panel{transform: translateY(12px) scale(.98); opacity:0;}

/* More menu popover */
.menu{
  position: fixed;
  inset: 0;
  z-index: 85;
  display:none;
}
.menu.is-open{display:block}
.menu__scrim{
  position:absolute; inset:0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .18s ease;
}
.menu.is-open .menu__scrim{opacity:1}
.menu__panel{
  position:absolute;
  top: 76px;
  right: 12px;
  width: 240px;
  border-radius: 18px;
  background: rgba(18, 28, 21, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding: 10px;
  transform: translateY(-6px) scale(.98);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
.menu.is-open .menu__panel{
  transform: translateY(0) scale(1);
  opacity:1;
}
.menu__title{
  padding: 8px 10px 6px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: rgba(255,255,255,.86);
}
.menu__item{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight: 600;
}
.menu__item:active{transform: scale(.99)}
.menu__itemIcon{width:22px;display:inline-flex;justify-content:center}
.menu__itemText{flex:1;text-align:left}
.menu__item--danger{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
}

/* Prevent background scroll when modal is open */
body[data-modal-open="1"]{ overflow: hidden; }

/* ===== Search visibility upgrades (both themes) ===== */
.search, .mobileSearch{
  box-shadow: 0 14px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.search__icon, .mobileSearch__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(123,196,127,.18);
  color: rgba(255,255,255,.92);
  font-weight: 600;
}
.search__input, .mobileSearch__input{ font-weight: 600; }
.search__input::placeholder, .mobileSearch__input::placeholder{ color: rgba(255,255,255,.55); }

/* ===== Modal system (native, consistent) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.modal.is-open,
.modal.is-closing{ display: block; }
.modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.modal__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.44);
  opacity: 0;
  transition: opacity .20s ease;
}
.modal.is-open .modal__scrim{ opacity: 1; }
.modal.is-closing .modal__scrim{ opacity: 0; }

.modal__panel{
  position: absolute;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .20s ease;
}
.modal.is-open .modal__panel{ opacity: 1; }
.modal.is-closing .modal__panel{ opacity: 0; }

/* Center modal */
.modal--center .modal__panel{
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(560px, calc(100vw - 24px));
  max-height: 84vh;
  transform: translate(-50%, calc(-50% + 10px)) scale(.985);
}
.modal--center.is-open .modal__panel{ transform: translate(-50%, -50%) scale(1); }
.modal--center.is-closing .modal__panel{ transform: translate(-50%, calc(-50% + 10px)) scale(.985); }

/* Bottom sheet (content sized) */
.modal--sheet .modal__panel{
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 100dvh;
  border-radius: 26px 26px 0 0;
  transform: translateY(16px) scale(.995);
}
.modal--sheet.is-open .modal__panel{ transform: translateY(0) scale(1); }
.modal--sheet.is-closing .modal__panel{ transform: translateY(16px) scale(.995); }

@media (min-width: 960px){
  .modal--sheet .modal__panel{
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: 520px;
    height: 84vh;
    border-radius: 24px;
    transform: translate(-50%, calc(-50% + 10px)) scale(.985);
  }
  .modal--sheet.is-open .modal__panel{ transform: translate(-50%, -50%) scale(1); }
  .modal--sheet.is-closing .modal__panel{ transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
}

/* Checkout is a "desktop module" too: it must fit the invoice two-column layout without horizontal scroll. */
@media (min-width: 960px){
  #checkoutModal.modal--sheet .modal__panel{
    width: min(1240px, calc(100vw - 40px));
    height: min(88vh, 880px);
    max-height: 88vh;
    overflow-x: hidden;
  }
  /* Details needs more room for long addresses/txids. */
  #invoiceDetailsModal.modal--sheet .modal__panel{
    width: min(920px, calc(100vw - 40px));
    height: min(84vh, 840px);
    max-height: 84vh;
    overflow-x: hidden;
  }
}

/* Support modal: fixed size on desktop, native sheet on mobile */
.modal--support .modal__panel{
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  max-height: 92dvh;
  border-radius: 26px 26px 0 0;
  transform: translateY(16px) scale(.995);
}
.modal--support.is-open .modal__panel{ transform: translateY(0) scale(1); }
.modal--support.is-closing .modal__panel{ transform: translateY(16px) scale(.995); }
@media (min-width: 960px){
  .modal--support .modal__panel{
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: 420px;
    height: 70vh;
    min-height: 70vh;
    max-height: 70vh;
    border-radius: 24px;
    transform: translate(-50%, calc(-50% + 10px)) scale(.985);
  }
  .modal--support.is-open .modal__panel{ transform: translate(-50%, -50%) scale(1); }
  .modal--support.is-closing .modal__panel{ transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
}

/* ===== Support modal UI ===== */
.supportModal__panel{ border-radius: 26px 26px 0 0; }
.supportModal__body{ padding: 0; }
.supportCard{
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
}
.supportCard__title{ font-weight: 600; letter-spacing: -.1px; font-size: 16px; }
.supportCard__sub{ margin-top: 6px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; }
.field{ display:block; margin-top: 12px; }
.field__label{ display:block; font-weight: 600; font-size: 12px; color: rgba(255,255,255,.82); margin-bottom: 6px; }
.field__input, .field__textarea{
  width: 100%;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
  font-weight: 600;
}
.field.is-invalid .field__input,
.field.is-invalid .field__textarea{
  border-color: rgba(255, 92, 92, .55);
  box-shadow: 0 0 0 2px rgba(255, 92, 92, .14);
}
.field.is-invalid .field__label{ color: rgba(255, 180, 180, .92); }
.field.is-invalid .passRow__btn{ filter: saturate(1.1); }
.field.is-invalid .field__input:focus,
.field.is-invalid .field__textarea:focus{
  border-color: rgba(255, 92, 92, .65);
  box-shadow: 0 0 0 3px rgba(255, 92, 92, .14);
}
html[data-theme="light"] .field.is-invalid .field__input,
html[data-theme="light"] .field.is-invalid .field__textarea{
  border-color: rgba(220, 66, 66, .52);
  box-shadow: 0 0 0 2px rgba(220, 66, 66, .10);
}
html[data-theme="light"] .field.is-invalid .field__label{ color: rgba(220, 66, 66, .92); }
html[data-theme="light"] .field.is-invalid .field__input:focus,
html[data-theme="light"] .field.is-invalid .field__textarea:focus{
  border-color: rgba(220, 66, 66, .62);
  box-shadow: 0 0 0 3px rgba(220, 66, 66, .10);
}
.field__textarea{ resize: none; line-height: 1.35; }
.field__input::placeholder, .field__textarea::placeholder{ color: rgba(255,255,255,.42); }
.supportActions{ display:flex; gap: 10px; margin-top: 12px; }

/* ===== Global: make search stand out more (both themes) ===== */
.search, .mobileSearch{
  border-color: rgba(123,196,127,.28) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.22), 0 0 0 1px rgba(123,196,127,.10) inset !important;
}
.search__icon, .mobileSearch__icon{
  background: rgba(123,196,127,.24) !important;
  border: 1px solid rgba(123,196,127,.22) !important;
}
.search__input::placeholder, .mobileSearch__input::placeholder{ color: rgba(255,255,255,.62) !important; }
.search__input:focus, .mobileSearch__input:focus{ outline: none; }

/* Focus ring */
.search:has(.search__input:focus),
.mobileSearch:has(.mobileSearch__input:focus){
  box-shadow: 0 22px 46px rgba(0,0,0,.26), 0 0 0 2px rgba(123,196,127,.28) inset !important;
}

/* ===== Menu redesign ===== */
.menu__panel{
  width: 282px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,28,21,.94), rgba(12,20,15,.92)) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.menu__title{display:none !important;}
.menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 8px 10px;
}
.menu__brand{display:flex;align-items:center;gap:10px}
.menu__brandDot{
  width: 10px; height: 10px; border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 22px rgba(123,196,127,.45);
}
.menu__brandName{font-weight: 600; letter-spacing:-.2px}
.menu__brandSub{font-size: 12px; color: rgba(255,255,255,.68); margin-top: 2px}
.menu__divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 8px 6px 10px;
}
.menu__groupTitle{
  padding: 0 10px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .35px;
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
}
.menu__item{
  border-radius: 16px !important;
  padding: 12px 12px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
}
.menu__item:hover{ border-color: rgba(123,196,127,.22) !important; }
.menu__item:active{ transform: scale(.992) !important; }
.menu__itemIcon{
  width: 30px !important;
  height: 30px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(123,196,127,.14);
  border: 1px solid rgba(123,196,127,.14);
}
.menu__item--danger .menu__itemIcon{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.menu__hint{ font-size: 11px; color: rgba(255,255,255,.62); margin-top: 2px; font-weight: 600; }
.menu__iconClose{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.menu__iconClose:active{ transform: scale(.98); }

/* ===== Animations: soften fade-in/out and avoid abrupt modal disappearance ===== */
.modal{ transition: opacity .22s ease !important; }
.modal.is-closing{ opacity:0 !important; pointer-events:none !important; }
.modal__scrim{ transition: opacity .22s ease !important; }
.modal__panel{ transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important; }
.modal.is-closing .modal__panel{ opacity:0 !important; }

/* Disable transitions while measuring FLIP */
.no-anim *{ transition: none !important; }

/* ===== Anti-flicker / performance ===== */
.hero__bg{ transform:none !important; }
.card__img{ filter:none !important; transform:none !important; }
.sitebar, .bottomnav, .menu__panel, .modal__panel, .hero, .card{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rail{ contain: paint; }

/* Avoid expensive :has() focus selector on some browsers */
.search:has(.search__input:focus),
.mobileSearch:has(.mobileSearch__input:focus){
  box-shadow: inherit !important;
}

/* Solid backgrounds on mobile to avoid backdrop-filter flicker */
@media (max-width: 959px){
  .bottomnav{ backdrop-filter: none !important; }
  .sitebar{ backdrop-filter: none !important; }
}

/* ===== Native edge-to-edge mobile layout ===== */
.page{ max-width: none !important; margin: 0 !important; }
.hero{
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 28px 28px !important;
  padding: 10px;
  min-height: 230px;
}
.section{ padding-left: 14px !important; padding-right: 14px !important; }
@media (min-width: 960px){
  .page{ max-width: 1100px !important; margin: 0 auto !important; }
  .hero{ margin: 18px auto 12px !important; border-radius: 28px !important; border:1px solid rgba(255,255,255,.08) !important; }
}

/* ===== Modal: softer appear/disappear while moving ===== */
.modal__panel{
  opacity: 0;
  filter: blur(0px);
  transition: transform .30s cubic-bezier(.2,.8,.2,1), opacity .26s ease !important;
}
.modal.is-open .modal__panel{
  opacity: 1;
}
.modal.is-closing .modal__panel{
  opacity: 0;
}

/* ===== Native menu sheet ===== */
.menu{ position: fixed; inset: 0; z-index: 85; display:none; }
.menu.is-open{ display:block; }
.menu__scrim{
  position:absolute; inset:0;
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity .22s ease;
}
.menu.is-open .menu__scrim{ opacity:1; }

.menuSheet{
  position:absolute;
  left: 50%;
  top: 50%;
  right:auto; bottom:auto;
  width: min(420px, calc(100vw - 24px));
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18,28,21,.94), rgba(18,28,21,.86));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 84px rgba(0,0,0,.62);
  padding: 12px;
  transform: translate(-50%, -50%) scale(.985);
  opacity:0;
  will-change: transform, opacity;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.menu.is-open .menuSheet{
  transform: translate(-50%, -50%) scale(1);
  opacity:1;
}

.menuSheet__handle{
  width: 44px; height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 6px auto 10px;
}
.menuSheet__handle{display:none}

.menuSheet__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 2px 4px 10px;
}
.menuSheet__brand{ display:flex; align-items:center; gap:10px; }
.menuSheet__dot{
  display:none !important; /* badges use numbers only */
}
.menuSheet__title{ font-weight: 600; letter-spacing:-.2px; }
.menuSheet__subtitle{ font-size: 12px; color: rgba(255,255,255,.68); margin-top: 2px; font-weight: 550; }
.menuSheet__close{
  width: 42px; height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.menuSheet__close:active{ transform: scale(.98); }

.menuSheet__section{ padding: 8px 0 0; }
.menuSheet__sectionTitle{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .38px;
  color: rgba(255,255,255,.60);
  text-transform: uppercase;
  padding: 0 6px 8px;
}
.menuSheet__row{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.menuSheet__row:active{ transform: scale(.992); }
.menuSheet__row[disabled],
.menuSheet__row.is-disabled{ opacity:.58; filter:saturate(.84); pointer-events:none; }
.menuSheet__row[disabled] .menuSheet__chev,
.menuSheet__row.is-disabled .menuSheet__chev{ opacity:.34; }
.menuSheet__rowLeft{ display:flex; align-items:center; gap: 12px; }
.menuSheet__icon{
  width: 38px; height: 38px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123,196,127,.14);
  border: 1px solid rgba(123,196,127,.14);
  font-size: 18px;
}
.menuSheet__icon--discounts{
  position:relative;
  overflow:hidden;
  color:#fff1bf;
  border-color:rgba(244,201,112,.54);
  background:
    linear-gradient(180deg, rgba(255,219,128,.22), rgba(255,188,68,.10)),
    rgba(22,18,10,.64);
  background-size:220% 220%;
  box-shadow:0 10px 24px rgba(61,47,19,.34), inset 0 1px 0 rgba(255,245,210,.22), 0 0 24px rgba(244,201,112,.16);
  animation:discountIconShimmer 5.2s linear infinite, discountGoldPulse 3.2s ease-in-out infinite;
}
.menuSheet__icon--discounts::after{
  content:"";
  position:absolute;
  inset:-35% auto -35% -55%;
  width:62%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,245,207,.40), rgba(255,255,255,0));
  animation:discountIconSweep 3.4s ease-in-out infinite;
  pointer-events:none;
}
.menuSheet__icon--discounts .discountPercentGlyph{
  font-size:21px;
  color:#fff1bf;
  text-shadow:0 0 10px rgba(244,201,112,.34), 0 0 18px rgba(244,201,112,.16);
}
@keyframes discountIconShimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}
@keyframes discountIconSweep{
  0%, 100%{ transform:translateX(0) rotate(18deg); opacity:.08; }
  45%{ opacity:.48; }
  60%{ transform:translateX(240%) rotate(18deg); opacity:.1; }
}
.menuSheet__rowText{ text-align:left; }
.menuSheet__rowTitle{ font-weight: 600; letter-spacing:-.15px; }
.menuSheet__rowSub{ font-size: 12px; color: rgba(255,255,255,.66); font-weight: 550; margin-top: 2px; }
.menuSheet__chev{ font-size: 20px; opacity:.7; }
.menuSheet__row.is-progressing{ align-items:flex-start; }
.menuSheet__row.is-progressing .menuSheet__chev{
  min-width:44px;
  align-self:flex-start;
  padding-top:2px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  opacity:.9;
  text-align:right;
}
.menuInstallProgress{ margin-top:8px; width:min(220px, calc(100vw - 180px)); }
.menuInstallProgress[hidden]{ display:none !important; }
.menuInstallProgress__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.72);
}
.menuInstallProgress__track{
  position:relative;
  width:100%;
  height:6px;
  margin-top:6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.18);
}
.menuInstallProgress__fill{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(123,196,127,.68) 0%, rgba(164,228,173,.94) 100%);
  transition:width .28s ease;
}

/* Switch */
/* Used as a visual toggle inside rows, sometimes rendered as <button>. Reset UA button styles. */
.switch{
  position: relative;
  width: 46px;
  height: 28px;
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.switch:focus-visible{ outline: 2px solid rgba(123,196,127,.35); outline-offset: 2px; border-radius: 999px; }
.switch__track{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.12);
}
.switch__thumb{
  position:absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.switch.is-disabled{ opacity: .55; filter: saturate(.75); pointer-events: none; }

/* Search focus (no :has) */
.search.is-focus, .mobileSearch.is-focus{
  box-shadow: 0 22px 46px rgba(0,0,0,.26), 0 0 0 2px rgba(123,196,127,.28) inset !important;
}

/* ===== Flicker fix: native app scroll container + no fixed/backdrop-filter ===== */
html, body{ height: 100%; }
body{ overflow: hidden !important; }

/* Scroll inside shell (app viewport) */
.shell{
  height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0 !important;
}

/* Lock scroll when modal open */
body[data-modal-open="1"] .shell{ overflow: hidden !important; }

/* Convert fixed bars to sticky to avoid compositor flicker */
.bottomnav{
  position: sticky !important;
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  backdrop-filter: none !important;
}
.sitebar{
  position: sticky !important;
  top: 0 !important;
  backdrop-filter: none !important;
}

/* Remove blur/backdrop-filter in scrims that can flicker */
.modal__scrim{ backdrop-filter: none !important; }
.menu__scrim{ backdrop-filter: none !important; }

/* Menu sheet also no blur */
.menuSheet{ backdrop-filter: none !important; }

/* Disable any unnecessary 3D transforms that can cause shimmer */
.hero, .card, .sitebar, .bottomnav{
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Make hero background lighter to render */
.hero__bg{
  filter: none !important;
  will-change: auto !important;
}

/* Ensure content not hidden behind sticky bottom nav */
.page{ padding-bottom: 18px; }
@media (max-width: 959px){
  .page{ padding-bottom: 18px; }
}

/* Toast position with sticky nav */
.toast{ bottom: 26px !important; }
@media (min-width: 960px){
  .toast{ bottom: 28px !important; }
}

/* ===== Source card illusion while modal opens ===== */
.card.is-source{
  position: relative;
  z-index: 5;
}
.card.is-sinking{
  transform: scale(.985);
  opacity: .78;
  border-color: rgba(123,196,127,.18);
}

/* ===== Bottom tab bar: always visible (fixed), with scroll container padding ===== */
:root{ --bottomnav-h: 92px; }

.bottomnav{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  z-index: 70 !important;
  backdrop-filter: none !important;
}
@supports(padding: env(safe-area-inset-bottom)){
  .bottomnav{
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* Space for fixed bottom bar */
.shell{
  padding-bottom: calc(var(--bottomnav-h) + 18px) !important;
}
@supports(padding: env(safe-area-inset-bottom)){
  .shell{
    padding-bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom)) !important;
  }
}

/* Toast above bottom bar */
.toast{
  bottom: calc(var(--bottomnav-h) - 18px) !important;
}
@supports(padding: env(safe-area-inset-bottom)){
  .toast{
    bottom: calc(var(--bottomnav-h) - 18px + env(safe-area-inset-bottom)) !important;
  }
}

/* ===== Cart modal UI ===== */
.cartView{ padding: 12px 14px 18px; }
.cartList{ display:flex; flex-direction:column; gap: 10px; }
.cartEmpty{
  padding: 16px 14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-weight: 600;
}
.cartRow{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.cartRow__imgBtn,
.cartRow__titleBtn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.cartRow__imgBtn{
  flex:0 0 auto;
  border-radius:16px;
}
.cartRow__imgBtn:focus-visible,
.cartRow__titleBtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(132,214,98,.22);
  border-radius:16px;
}
.cartRow__img{
  width: 58px; height: 58px;
  display:block;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
}
.cartRow__main{ flex:1 1 auto; min-width: 0; }
.cartRow__title{
  font-weight: 600;
  display:flex; align-items:center; gap: 8px;
  letter-spacing: -.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartRow__titleBtn{
  flex:1 1 auto;
  min-width:0;
}
.cartRow__titleText{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.16;
}
.cartRow__sub {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    flex-direction: column;
}
.cartRow__fiat{ font-weight: 600; }
.cartRow__crypto{ color: rgba(255,255,255,.68); font-weight: 600; font-size: 12px; }
.cartRow__stock{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.12px;
}
.cartRow__stock--out{ color: rgba(240,177,120,.92); }
.cartWeight{
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(123,196,127,.22);
  background: rgba(123,196,127,.12);
  color: rgba(234,255,234,.92);
  white-space: nowrap;
}

.cartRow__right{ display:flex; flex:0 0 auto; min-width:132px; flex-direction:column; align-items:flex-end; gap: 8px; }
.stepper{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.stepper__btn{
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  cursor:pointer;
}
.stepper__btn:disabled{ opacity:.42; cursor:not-allowed; }
.stepper__btn:active{ transform: scale(.98); }
.stepper__qty{ min-width: 26px; text-align:center; font-weight: 700; font-variant-numeric: tabular-nums; }
.trashBtn{
  width: 34px; height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.trashBtn:active{ transform: scale(.98); }

.cartSummary{
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px 12px 12px;
}
.cartSummary__row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 7px 6px;
  font-weight: 550;
}
.cartSummary__row--muted{
  color: rgba(255,255,255,.70);
  font-weight: 600;
}
.cartSummary__divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 6px 6px 8px;
}
.cartSummary__row--total{ font-size: 15px; }
.cartSummary__row--total2{ padding-top: 2px; }
.cartActions{ display:flex; gap: 10px; margin-top: 12px; }

/* ===== Support center UI ===== */
.supportThreads{ margin-top: 12px; }
.supportThreads__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 2px 4px 8px;
}
.supportThreads__title{ font-weight: 600; letter-spacing:-.05px; }
.supportThreads__hint{ font-size: 11px; color: rgba(255,255,255,.62); font-weight: 500; }
.supportThreads__list {
    display: flex;
    flex-direction: column;
}
.threadRow{
  display:flex; gap: 12px; align-items:center;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.threadRow:active{ transform: scale(.992); }
.threadRow__icon{
  width: 38px; height: 38px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123,196,127,.14);
  border: 1px solid rgba(123,196,127,.14);
  font-size: 18px;
}
.threadRow__main{ flex:1; min-width:0; }
.threadRow__title{
  display:flex; align-items:center; gap: 8px;
  font-weight: 600; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.threadRow__sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.threadRow__right{ display:flex; flex-direction:column; align-items:flex-end; gap: 6px; }
.threadRow__time{ font-size: 11px; color: rgba(255,255,255,.56); font-weight: 500; }
.liveBadge{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(123,196,127,.26);
  background: rgba(123,196,127,.14);
  font-size: 11px;
  font-weight: 600;
}
.liveBadge::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(123,196,127,.92);
  box-shadow: 0 0 12px rgba(123,196,127,.55);
}

/* Live row toggle */
.supportLiveRow{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.supportLiveRow__title{ font-weight: 600; letter-spacing:-.05px; }
.supportLiveRow__sub{ font-size: 12px; color: rgba(255,255,255,.66); font-weight: 500; margin-top: 2px; }
.miniSwitch{ position: relative; width: 48px; height: 30px; border: 0; background: none; padding: 0; cursor:pointer; }
.miniSwitch__track{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
}
.miniSwitch__thumb{
  position:absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.miniSwitch.is-on .miniSwitch__track{
  background: rgba(123,196,127,.22);
  border-color: rgba(123,196,127,.18);
}
.miniSwitch.is-on .miniSwitch__thumb{ transform: translateX(18px); }

/* Support chat */
.supportChatHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 4px 8px;
}
.supportChatHead__title{ font-weight: 600; letter-spacing:-.05px; }
.supportChat{
  height: 48vh;
  overflow-y: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.bubble{
  max-width: 84%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 500;
  line-height: 1.25;
  width: fit-content;
}
.bubble--me{
  margin-left: auto;
  border-color: rgba(123,196,127,.18);
  background: rgba(123,196,127,.12);
}
.bubble__time{ margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.56); font-weight: 500; }

/* Typing indicator */
.supportTypingBar{
  padding: 8px 2px 0;
  display:flex;
  align-items:center;
}
.supportTypingBar[hidden]{ display:none !important; }
.supportTypingBar__pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 600;
}
.supportTypingBar__label{ letter-spacing:-.02px; }

.typingDots{
  display:inline-flex;
  align-items:center;
  gap: 4px;
  color: rgba(123,196,127,.92);
}
.typingDots i{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .32;
  display:block;
  transform: translateY(0);
  animation: typingDot 1.15s infinite ease-in-out;
}
.typingDots i:nth-child(2){ animation-delay: .12s; }
.typingDots i:nth-child(3){ animation-delay: .24s; }
@keyframes typingDot{
  0%, 80%, 100%{ transform: translateY(0); opacity: .28; }
  40%{ transform: translateY(-3px); opacity: .78; }
}

.threadRow.is-typing{
  border-color: rgba(123,196,127,.22);
  background: rgba(123,196,127,.08);
}
.threadRow.is-typing .threadRow__sub{ color: rgba(255,255,255,.82); }

.supportComposer{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  align-items:center;
}
.supportComposer__input{
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 16px;
  height: 44px;
  padding: 0 12px;
  outline: none;
  font-weight: 550;
  font-size: 14px;
}
.supportComposer__input::placeholder{ color: rgba(255,255,255,.48); }
.supportComposer__send{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(123,196,127,.18);
  background: rgba(123,196,127,.14);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  cursor:pointer;
}
.supportComposer__send:active{ transform: scale(.98); }

/* ===== Confirm modal (native sheet) ===== */
.confirmModal__panel{
  border-radius: 26px;
  padding: 14px 14px 12px;
}
.confirmModal__handle{
  width: 46px; height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 12px;
}
.confirmModal__icon{ font-size: 22px; text-align:center; }
.confirmModal__title{ margin-top: 10px; font-weight: 600; text-align:center; }
.confirmModal__text{ margin-top: 6px; color: rgba(255,255,255,.72); text-align:center; font-weight: 500; line-height: 1.35; font-size:14px;}
.confirmModal__actions{ display:flex; gap: 10px; margin-top: 12px; }
.confirmModal__actions .btn{ flex:1; }

/* ===== Category sections ===== */
.section--cats{ padding-top: 4px; }
.catSections{ display:flex; flex-direction:column; gap: 18px; }
.catSection {
    scroll-margin-top: 90px;
    padding: 10px;
    background: #00000008;
    border-radius: 15px;
}

.catSection--featured{
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.rail--featured{
  scroll-snap-type: x mandatory;
}

.rail--featured .pCard{
  scroll-snap-align: start;
}
.catSection__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding: 0 2px 10px;
}
.catSection__title{
  font-weight: 600;
  letter-spacing: -.22px;
  font-size: 16px;
}
.catSection__meta{
  font-weight: 600;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.rail--category{
  gap: 12px;
  padding-bottom: 6px;
}

/* ===== Floating chat dock ===== */
.chatDock{
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottomnav-h) + 18px);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(123,196,127,.22), rgba(0,0,0,.28));
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chatDock:active{ transform: scale(.98); }
.chatDock__icon{ font-size: 22px; }
.chatDock__badge{
  position:absolute;
  top: 8px;
  right: 8px;
  min-width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,84,84,.96);
  box-shadow: 0 0 0 3px rgba(0,0,0,.22);
}

/* ===== Support modal sizing ===== */
/* Mobile: full-height sheet */
@media (max-width: 959px){
  .supportModal__panel{
    width: 100%;
    max-width: 920px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 26px 26px 0 0;
  }

  .minbtn{
    width: 40px;
    height: 40px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor:pointer;
  }
  .minbtn:active{ transform: scale(.98); }
}

/* Chat screen takes full remaining height */
.supportScreen--chat{
  display:flex;
  flex-direction:column;
  height: 100%;
  min-height: 0;
}
.supportView--chat .supportChat{ flex: 1; height: auto; }

/* ===== Attachments strip ===== */

.supportAttachStrip{
  display:flex;
  gap: 10px;
  padding: 8px 0 0;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.attachThumb{
  position: relative;
  width: 86px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.attachThumb img,
.attachThumb__video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  background:#000;
}
.attachThumb__videoStub{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(9,14,13,.92), rgba(18,27,24,.98));
}
.attachThumb__videoLabel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.attachThumb__play{
  position:absolute;
  right:8px;
  bottom:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(6,10,9,.74);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.attachThumb__playIcon{ color:#fff; font-size:12px; line-height:1; transform:translateX(1px); }
.attachThumb__x{
  position:absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-weight: 600;
}
.attachThumb__upload{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  gap:8px;
  padding:10px;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.56));
  color:#fff;
  text-align:center;
}
.attachThumb__uploadSpinner{
  width:24px;
  height:24px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.20);
  border-top-color:rgba(255,255,255,.95);
  animation:supportUploadSpin .8s linear infinite;
}
.attachThumb__uploadPct{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.attachThumb.is-uploading .attachThumb__x{ display:none; }
.supportComposer{
  padding-bottom: 0;
}
.supportComposer__attach{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  cursor:pointer;
}
.supportComposer__attach:active{ transform: scale(.98); }

/* Image bubble */
.bubble__img{
  width: 100%;
  max-width: 260px;
  border-radius: 14px;
  display:block;
  border: 1px solid rgba(255,255,255,.10);
}

/* ===== Support modal: mobile full-height sheet, desktop centered (mobile parity) ===== */
@media (max-width: 959px){
  .supportModal .modal__panel{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    /* Keep top+bottom pinning authoritative (avoid viewport-height drift on mobile). */
    height: auto;
    max-height: none;
    border-radius: 26px 26px 0 0;
  }
  .supportModal .modal__body{
    height: calc(100% - 52px);
    max-height: none;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@media (min-width: 960px){
  .supportModal .modal__panel{
    width: 420px;
    height: 70vh;
    max-height: 70vh;
    border-radius: 24px;
  }
  .supportModal .modal__body{
    height: calc(100% - 52px);
    max-height: none;
    overflow: hidden;
    padding-bottom: 0;
  }
}
.supportModal__body{
  height: 100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* ===== Support: native app navigation (tickets / new / chat) ===== */
.supportShell{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
.supportViews{
  flex: 1;
  min-height: 0;
}
.supportView{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 12px;
}
.supportView--chat{ padding: 0; overflow: hidden; }
.supportView[hidden]{ display:none !important; }

/* Support: form side padding (no top padding) */
.supportView[data-view="new"]{ padding: 0 14px 12px; }
@media (min-width: 880px){
  .supportView[data-view="new"]{ padding: 0 22px 18px; }
}

/* Support: ticket actions sheet (chat) */
.supportActionSheet{
  position: absolute;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}
.supportActionSheet.is-open{ display:flex; }
.supportActionSheet__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.supportActionSheet__panel{
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(28,32,28,.96), rgba(14,16,14,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  padding: 10px 12px 14px;
  transform: translateY(16px);
  animation: supportSheetIn .16s ease-out forwards;
}
.supportActionSheet__handle{
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 10px;
}
.supportActionSheet__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@keyframes supportSheetIn{
  from{ transform: translateY(20px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Support: soften thread icon block to match native lists */
.threadRow__icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: .9;
}
.threadRow__icon svg{ width: 22px; height: 22px; }

/* ===== Support pager (list -> new) ===== */
.supportPager{
  position: relative;
  height: 100%;
  overflow: hidden;
}
.supportPager__track{
  height: 100%;
  display:flex;
  width: 200%;
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.supportPager.is-new .supportPage{
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.supportPage--tickets{
  padding-top: 2px;
}
.supportPage--new{
  padding-top: 10px;
}

.supportNewTop{
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.00));
}
.supportNewTop__title{
  font-weight: 600;
  letter-spacing: .1px;
  font-size: 16px;
}
.supportNewTop__sub {
    margin-top: 6px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.35;
    font-weight: 300;
}
.supportNewNote{
  margin: 12px 6px 0;
  color: rgba(255,255,255,.46);
  font-weight: 550;
  font-size: 12px;
}

/* New ticket row as native list cell */
.supportNewRow{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  margin: 2px 2px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
  cursor:pointer;
  user-select:none;
  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}
.supportNewRow:active{ transform: scale(.992); }
.supportNewRow:hover{ filter: brightness(1.03); }
.supportNewRow__icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(123,196,127,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(123,196,127,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  font-weight: 600;
}
.supportNewRow__txt{ font-weight: 600; letter-spacing:.1px; }
.supportNewRow__chev{
  margin-left:auto;
  color: rgba(255,255,255,.42);
  font-size: 22px;
  transform: translateY(-1px);
}

/* Thread icon: replace emoji with brand svg */
.threadRow__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(123,196,127,.18);
}
.threadRow__icon svg{
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.88);
  filter: drop-shadow(0 0 10px rgba(123,196,127,.12));
}

.supportScreen--list{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.supportScreen--chat{
  height: 100%;
}
.supportChat{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.supportComposer{
  flex: 0 0 auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}
.supportAttachStrip{
  flex: 0 0 auto;
  padding-bottom: 6px;
}

/* ===== Chips (v12 restore) ===== */
.chips{
  position:relative;
  padding:26px 14px 16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    user-select: none;
}
.chip__icon{width:18px;height:18px;display:block;filter: drop-shadow(0 0 6px rgba(123,196,127,.15))}
.chip__label{font-weight:600;font-size:14px;letter-spacing:.1px}
.chip__dir{width:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;line-height:1;opacity:.78;transform: translateY(-.5px)}
.chip.is-active{
  background: rgba(123,196,127,.18);
  border-color: rgba(123,196,127,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(123,196,127,.12) inset;
}
.chip:active{transform: scale(.99)}
.chip:focus-visible{ outline: 2px solid rgba(123,196,127,.45); outline-offset: 2px; }
.chip__icon svg{width:18px;height:18px;display:block}

/* ===== Support ticket actions ===== */
.pillBtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--pill-btn-border, transparent);
  background: var(--pill-btn-bg, rgba(255,255,255,0));
  color: var(--pill-btn-text, var(--text));
  box-shadow: var(--pill-btn-shadow, none);
  font-weight: 600;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pillBtn:active{ transform: scale(.98); }
.pillBtn--danger{
  border-color: rgba(255,84,84,.22);
  background: rgba(255,84,84,.14);
}

/* Support: theme-aware action buttons (Reopen / Resolved / Cancel) */
.supportModal .pillBtn{
  border-color: var(--sup-line);
  background: var(--sup-surface2);
  color: var(--sup-text);
  font-weight: 600;
  letter-spacing: .08px;
}
.supportModal .pillBtn:hover{ background: var(--sup-surface); border-color: var(--sup-line2); }
.supportModal .pillBtn--danger{
  background: transparent;
  border-color: rgba(255,84,84,.40);
  color: rgba(255,84,84,1);
}
.supportModal .pillBtn--danger:hover{ background: rgba(255,84,84,.08); border-color: rgba(255,84,84,.48); }

.supportModal .pillBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.supportModal .pillBtn__icon{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  flex:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:currentColor;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.supportModal .pillBtn__icon svg{
  width:12px;
  height:12px;
  display:block;
}
.supportModal .supportActionSheet__actions .pillBtn{
  min-height:36px;
  padding:0 12px;
}
.supportModal #supportReopenBtn{
  border-color:rgba(88,174,255,.28);
  background:linear-gradient(180deg, rgba(88,174,255,.16), rgba(88,174,255,.09));
  color:rgba(219,238,255,.98);
}
.supportModal #supportReopenBtn:hover{
  border-color:rgba(88,174,255,.40);
  background:linear-gradient(180deg, rgba(88,174,255,.22), rgba(88,174,255,.12));
}
.supportModal #supportReopenBtn .pillBtn__icon{
  border-color:rgba(88,174,255,.22);
  background:rgba(88,174,255,.14);
}
.supportModal #supportResolveBtn{
  border-color:rgba(123,196,127,.30);
  background:linear-gradient(180deg, rgba(123,196,127,.18), rgba(123,196,127,.10));
  color:rgba(229,247,232,.98);
}
.supportModal #supportResolveBtn:hover{
  border-color:rgba(123,196,127,.42);
  background:linear-gradient(180deg, rgba(123,196,127,.24), rgba(123,196,127,.14));
}
.supportModal #supportResolveBtn .pillBtn__icon{
  border-color:rgba(123,196,127,.24);
  background:rgba(123,196,127,.14);
}
.supportModal #supportCancelBtn{
  border-color:rgba(255,84,84,.34);
  background:linear-gradient(180deg, rgba(255,84,84,.16), rgba(255,84,84,.08));
  color:rgba(255,222,222,.98);
}
.supportModal #supportCancelBtn:hover{
  border-color:rgba(255,84,84,.48);
  background:linear-gradient(180deg, rgba(255,84,84,.22), rgba(255,84,84,.12));
}
.supportModal #supportCancelBtn .pillBtn__icon{
  border-color:rgba(255,84,84,.24);
  background:rgba(255,84,84,.12);
}
.supportModal #supportAttachOrderBtn{
  border-color:rgba(234,191,108,.24);
  background:linear-gradient(180deg, rgba(234,191,108,.12), rgba(234,191,108,.06));
  color:rgba(255,237,201,.96);
}
.supportModal #supportAttachOrderBtn:hover{
  border-color:rgba(234,191,108,.36);
  background:linear-gradient(180deg, rgba(234,191,108,.16), rgba(234,191,108,.08));
}
.supportModal #supportAttachOrderBtn .pillBtn__icon{
  border-color:rgba(234,191,108,.22);
  background:rgba(234,191,108,.11);
}
.supportModal #supportActionSheetBackBtn{
  color:var(--sup-muted);
}
html[data-theme="light"] .supportModal .pillBtn__icon{
  border-color:rgba(15,27,20,.10);
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .supportModal #supportReopenBtn{
  border-color:rgba(52,123,210,.22);
  background:linear-gradient(180deg, rgba(88,174,255,.16), rgba(88,174,255,.08));
  color:rgba(16,46,84,.92);
}
html[data-theme="light"] .supportModal #supportReopenBtn .pillBtn__icon{
  border-color:rgba(52,123,210,.16);
  background:rgba(88,174,255,.14);
}
html[data-theme="light"] .supportModal #supportResolveBtn{
  border-color:rgba(49,136,73,.20);
  background:linear-gradient(180deg, rgba(123,196,127,.18), rgba(123,196,127,.10));
  color:rgba(18,68,31,.92);
}
html[data-theme="light"] .supportModal #supportResolveBtn .pillBtn__icon{
  border-color:rgba(49,136,73,.16);
  background:rgba(123,196,127,.14);
}
html[data-theme="light"] .supportModal #supportCancelBtn{
  border-color:rgba(204,78,78,.18);
  background:linear-gradient(180deg, rgba(255,84,84,.14), rgba(255,84,84,.07));
  color:rgba(124,28,28,.92);
}
html[data-theme="light"] .supportModal #supportCancelBtn .pillBtn__icon{
  border-color:rgba(204,78,78,.14);
  background:rgba(255,84,84,.12);
}
html[data-theme="light"] .supportModal #supportAttachOrderBtn{
  border-color:rgba(175,126,37,.18);
  background:linear-gradient(180deg, rgba(234,191,108,.16), rgba(234,191,108,.08));
  color:rgba(91,63,12,.92);
}
html[data-theme="light"] .supportModal #supportAttachOrderBtn .pillBtn__icon{
  border-color:rgba(175,126,37,.14);
  background:rgba(234,191,108,.14);
}

/* Support: locked composer state */
.supportModal .supportComposer__send.is-locked,
.supportModal .supportComposer__attach.is-locked{
  opacity: .44;
  filter: grayscale(.15);
}
.supportModal .supportComposer__send.is-locked:active,
.supportModal .supportComposer__attach.is-locked:active{ transform: none; }

/* Support: ticket locked banner */
.supportLockNote{
  margin: 10px 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sup-line2);
  background: var(--sup-surface2);
  color: var(--sup-text);
  font-size: 13px;
  line-height: 1.25;
}

/* ===== Support: single-screen mode (no split) ===== */
.supportModal__body{ display:block; }
.supportScreen{ width:100%; }
.supportScreen[hidden]{ display:none !important; }

/* ===== Chat dock: never above modals ===== */
body[data-modal-open="1"] #chatDock{ display:none !important; }
body[data-modal-open="1"] .chatDock{ display:none !important; }

/* ===== Support visual upgrade v21 ===== */
.supportThreads{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(123,196,127,.08), rgba(0,0,0,.10));
  box-shadow: 0 18px 48px rgba(0,0,0,.30);
}
.supportThreads__list{
  background: rgba(0,0,0,.10);
  border-radius: 18px;
}
.threadRow{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}
.threadRow:hover{ filter: brightness(1.05); }

.threadRow__title {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.statusPill{
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
}
.statusPill--open{ border-color: rgba(123,196,127,.24); background: rgba(123,196,127,.14); color: rgba(255,255,255,.92); }
.statusPill--resolved{ border-color: rgba(122,181,255,.26); background: rgba(122,181,255,.14); }
.statusPill--cancelled{ border-color: rgba(255,84,84,.28); background: rgba(255,84,84,.14); }

.dot{ width:10px;height:10px;border-radius:999px; display:inline-block; }
.dot--unread{ background: rgba(123,196,127,.92); box-shadow: 0 0 0 6px rgba(123,196,127,.14); }

.supportChat{
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.06));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
}
.supportChatHead{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.bubble{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.bubble--me{
  border-color: rgba(123,196,127,.22);
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.05));
}

/* Menu modal polish */
.menuSheet__header{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  padding: 10px 10px 10px;
  margin-bottom: 10px;
}

/* ===== Kill chatDock (header icon only) ===== */
.chatDock{ display:none !important; }

/* ===== Support Native List v25 (iOS-like grouped list) ===== */
.supportModal__panel{
  background: rgba(16, 26, 20, .88);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 120px rgba(0,0,0,.62);
  backdrop-filter: blur(var(--blur));
}
.supportModal .modal__top{
  position: sticky;
  top:0;
  z-index: 2;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(var(--blur));
}
.supportModal .modal__topTitle{
  font-weight: 600;
  letter-spacing: .1px;
}
.supportModal .supportModal__body{
  display:flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

/* New request card */
.supportCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
}
.supportCard__title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}
.supportCard__title::before{
  content:"✦";
  width: 22px; height: 22px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(123,196,127,.16);
  border: 1px solid rgba(123,196,127,.18);
  color: rgba(255,255,255,.92);
  font-size: 12px;
}
.supportCard__sub{
  color: rgba(255,255,255,.62);
}

/* ===== Profile + Password modals (design skeleton) — Support style + mobile full-screen ===== */
.profileModal,
.passwordModal{
  /* Reuse Support tokens for consistent module look */
  --sup-bg: rgba(10,14,12,.94);
  --sup-surface: rgba(255,255,255,.06);
  --sup-surface2: rgba(255,255,255,.04);
  --sup-line: rgba(255,255,255,.10);
  --sup-line2: rgba(255,255,255,.07);
  --sup-text: rgba(255,255,255,.92);
  --sup-muted: rgba(255,255,255,.62);
  --sup-muted2: rgba(255,255,255,.46);
  --sup-accent: rgba(123,196,127,1);
}

html[data-theme="light"] .profileModal,
html[data-theme="light"] .passwordModal{
  --sup-bg: rgba(247,246,242,.96);
  --sup-surface: rgba(255,255,255,.94);
  --sup-surface2: rgba(255,255,255,.88);
  --sup-line: rgba(15,27,20,.10);
  --sup-line2: rgba(15,27,20,.08);
  --sup-text: rgba(15,27,20,.92);
  --sup-muted: rgba(15,27,20,.62);
  --sup-muted2: rgba(15,27,20,.48);
  --sup-accent: rgba(47,163,106,1);
}

/* Panel + header */
.profileModal .modal__panel,
.passwordModal .modal__panel{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sup-bg), var(--sup-bg));
  border: 1px solid var(--sup-line2);
  box-shadow: 0 40px 120px rgba(0,0,0,.62);
  backdrop-filter: blur(var(--blur));
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.profileModal .modal__top,
.passwordModal .modal__top{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--sup-line2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(var(--blur));
}

/* Header title */
.profileModal .modal__topTitle,
.passwordModal .modal__topTitle{
  color: var(--sup-text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1px;
}

/* Light theme: match Support modal depth */
html[data-theme="light"] .profileModal .modal__panel,
html[data-theme="light"] .passwordModal .modal__panel{
  background:
    radial-gradient(780px 260px at 14% -18%, rgba(47,163,106,.14), transparent 60%),
    radial-gradient(980px 340px at 92% 6%, rgba(198,161,91,.10), transparent 64%),
    linear-gradient(180deg, var(--sup-bg), var(--sup-bg));
  box-shadow: 0 18px 54px rgba(15,27,20,.18);
}
html[data-theme="light"] .profileModal .modal__top,
html[data-theme="light"] .passwordModal .modal__top{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--sup-line2);
  box-shadow: 0 1px 0 rgba(15,27,20,.06) inset, 0 12px 30px rgba(0,0,0,.10);
}

/* Body sizing: keep header + bottom tabs pinned, scroll only inside section content */
.profileModal .modal__body{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  padding: 0;
}
.passwordModal .modal__body{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
}

/* Full-screen on mobile (both modals) */
@media (max-width: 959px){
  .profileModal .modal__panel,
  .passwordModal .modal__panel{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 0;
  }
}

/* Desktop sizing */
@media (min-width: 960px){
  .profileModal .modal__panel{
    width: 520px;
    height: 70vh;
    max-height: 70vh;
    border-radius: 24px;
  }
  .passwordModal .modal__panel{
    width: 520px;
    max-height: 84vh;
    border-radius: 24px;
  }
}

/* Header actions — use Support pill buttons */
.pillBtn--accent{
  background: linear-gradient(180deg, rgba(123,196,127,1), rgba(107,179,111,1));
  border-color: rgba(123,196,127,.22);
  color: rgba(0,0,0,.92);
}
html[data-theme="light"] .pillBtn--accent{
  background: linear-gradient(180deg, rgba(47,163,106,1), rgba(25,132,84,1));
  border-color: rgba(47,163,106,.26);
  color: rgba(255,255,255,.94);
}

/* Profile header actions: match Support module (neutral, native) */
.profileModal .pillBtn{
  border-color:none;
  background: none;
  color: var(--sup-text);
  font-weight: 600;
  letter-spacing: .08px;
  border: none;
}
.profileModal .pillBtn:hover{ background: var(--sup-surface); border-color: var(--sup-line2); }
.profileModal .pillBtn:hover {
    background: none;
    border-color: none;
}
.profileModal .pillBtn--solid {
    background: none;
    border-color: transparent;
    color: rgb(57 210 133 / 94%);
    /* box-shadow: 0 12px 30px rgba(0, 0, 0, .24); */
}
html[data-theme="light"] .profileModal .pillBtn--solid {
    color: rgb(0 155 77 / 94%);
}

/* ===== Profile modal content ===== */
.profileModal__body{
  height: 100%;
  display:flex;
  flex-direction: column;
  min-height: 0;
}
.profileShell{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
}

/* Summary card (stays above section content) */
.profileTop{ flex: 0 0 auto; padding: 0; }

.profileHero{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 25px;
  margin-bottom: 3px;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
}
.profileHero__avatar{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-weight: 600;
  letter-spacing: -.2px;
  color: rgba(0,0,0,.86);
  background: linear-gradient(180deg, rgba(123,196,127,1), rgba(255, 205, 92, .92));
}
.profileHero__name{ font-weight: 600; letter-spacing: -.2px; font-size: 16px; color: var(--sup-text); }
.profileHero__sub{ margin-top: 2px; color: var(--sup-muted); font-size: 12px; }
.profileBadges{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Make the form participate in flex sizing so bottom tabs never fall outside */
.profileForm{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
  margin: 0;
}
.profileViews{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
.profileView{
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.profileView[hidden]{ display:none !important; }

.profileSection{
  border-radius: 0;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
  padding: 12px;
}
.profileSection__title{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sup-muted);
  margin-bottom: 10px;
}

.profileGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.profileGrid .field{ margin-top: 0; }
.field--full{ grid-column: 1 / -1; }
.field--half{ grid-column: auto; }
@media (min-width: 720px){
  .profileGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field__hint{ font-size: 11px; font-weight: 600; color: var(--sup-muted2); margin-left: 6px; }

/* Toggles — align with Support */
.toggleRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
}
.toggleRow__title{ font-weight: 600; font-size: 13px; letter-spacing: -.1px; color: var(--sup-text); }
.toggleRow__sub{ margin-top: 4px; font-size: 12px; color: var(--sup-muted2); }

.profileNote{
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
  color: var(--sup-muted);
  font-size: 12px;
  line-height: 1.35;
}
.btn--wide{ width: 100%; }

/* Read-only appearance in view mode */
.profileModal:not(.is-editing) .field__input,
.profileModal:not(.is-editing) .field__textarea{
  background: var(--sup-surface2);
}
.profileModal .field__input:disabled{
  opacity: .90;
  cursor: default;
}

/* Profile navigation tabs (mobile bottom) — match Support */
.profileNav{
  margin-top: auto;
  flex: 0 0 auto;
  display:flex;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sup-line2);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34));
  backdrop-filter: blur(18px);
}
.profileTab{
  position: relative;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--sup-muted);
  border-radius: 16px;
  padding: 10px 8px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.profileTab:active{ transform: scale(.99); }
.profileTab.is-active{
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.03));
  color: var(--sup-text);
}
.profileTab__icon{ width: 20px; height: 20px; display:inline-grid; place-items:center; }
.profileTab__icon svg{ width: 20px; height: 20px; }
/* Light theme: bottom tabs readable + active accent (match Support) */
html[data-theme="light"] .profileNav{
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.94));
  border-top-color: rgba(15,27,20,.08);
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .profileTab{ color: rgba(15,27,20,.58); }
html[data-theme="light"] .profileTab.is-active{
  color: rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(47,163,106,.14), rgba(255,255,255,.00));
}
html[data-theme="light"] .profileTab.is-active::after{
  content:"";
  position:absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(47,163,106,1);
  box-shadow: 0 0 0 5px rgba(47,163,106,.16);
  pointer-events:none;
}
html[data-theme="light"] .profileHero,
html[data-theme="light"] .profileSection,
html[data-theme="light"] .passwordCard{
  box-shadow: 0 18px 54px rgba(15,27,20,.12);
}

.profileTab__label{ font-size: 11px; font-weight: 600; letter-spacing: .2px; }

/* Profile bottom tabs: edge-to-edge segments like Support (no rounding / no gaps / no dot) */
.profileModal .profileNav{ padding: 0; gap: 0; }
.profileModal .profileTab{
  border-radius: 0;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
}
.profileModal .profileTab + .profileTab{ border-left: 1px solid var(--sup-line2); }
.profileModal .profileTab.is-active{
  border-radius: 0;
  background: linear-gradient(180deg, rgba(123,196,127,.12), rgba(255,255,255,.02));
}
html[data-theme="light"] .profileModal .profileTab.is-active{
  background: linear-gradient(180deg, rgba(47,163,106,.10), rgba(255,255,255,.00));
}
html[data-theme="light"] .profileTab.is-active::after{ content:none; display:none; }

/* ===== Password modal content ===== */
.passwordModal__body{ padding: 0; } /* padding handled by .passwordModal .modal__body */

.passwordCard{
  border-radius: 0;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
  padding: 12px;
}
.passwordCard__title{ font-weight: 600; letter-spacing: -.2px; color: var(--sup-text); }
.passwordCard__sub{ margin-top: 6px; color: var(--sup-muted); font-size: 12px; line-height: 1.35; }
.authAuxRow{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.authAuxRow--login{justify-content:flex-end}
.authAuxLink{appearance:none;border:0;background:transparent;color:var(--sup-accent);font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;padding:0;cursor:pointer;transition:opacity .18s ease,color .18s ease}
.authAuxLink:hover,.authAuxLink:focus-visible{opacity:.86;color:var(--sup-accent-2);outline:none}
.authAuxLink[disabled],.authAuxLink.is-disabled{opacity:.52;cursor:default;pointer-events:none}
.authAuxStatus{font-size:12px;line-height:1.4;color:var(--sup-muted)}
.passwordForceHint{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,205,92,.12);border:1px solid rgba(255,205,92,.22);color:var(--sup-text);font-size:12px;line-height:1.45}
html[data-theme="light"] .passwordForceHint{background:rgba(255,205,92,.18);border-color:rgba(132,99,24,.18);color:rgba(50,43,18,.9)}


.passRow{ position: relative; display:flex; align-items:center; }
.passRow__input{ padding-right: 44px; }
.passRow__btn{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--sup-line);
  background: var(--sup-surface2);
  color: var(--sup-text);
  cursor:pointer;
}
.passRow__btn:active{ transform: translateY(-50%) scale(.99); }

.passMeter{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line);
  overflow:hidden;
}
.passMeter__bar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 92, 92, .95), rgba(255, 205, 92, .95), rgba(123,196,127,1));
  transition: width .18s ease;
}
.passHint{ margin-top: 8px; font-size: 12px; color: var(--sup-muted); }

/* Make password actions visible on small viewports */
.passwordActions{
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding-top: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}

/* ===== Support Hub v32 (native-like list + inline composer) ===== */
.supportHub{ display:flex; flex-direction:column; gap: 12px; }
.supportNewRow{
  width:100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 48px rgba(0,0,0,.30);
  color: var(--text);
}
.supportNewRow__icon{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(123,196,127,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(123,196,127,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  font-size: 18px;
  font-weight: 600;
}
.supportNewRow__txt{
  font-weight: 600;
  letter-spacing: .2px;
}
.supportNewRow__chev{
  margin-left:auto;
  opacity:.55;
  font-size: 22px;
  transform: translateY(-1px);
}
.supportNewRow:active{ transform: scale(.992); }

.supportNewPanel{
  border-radius: 24px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  box-shadow: 0 18px 56px rgba(0,0,0,.32);
}
.supportNewPanel__title{
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: .2px;
}
.field--native .field__label{
  color: rgba(255,255,255,.62);
}
.field--native .field__input,
.field--native .field__textarea{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.field--native .field__input:focus,
.field--native .field__textarea:focus{
  border-color: rgba(123,196,127,.28);
}

/* Mobile bottom tabbar: darker + professional shadow */
.bottomnav{
  box-shadow: 0 -12px 30px rgba(0,0,0,.30);
}

/* ===== Support (v33 fixes) ===== */
.supportScreen--list{ overflow: hidden; }
.threadRow{
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.threadRow:focus-visible{
  outline: 2px solid rgba(123,196,127,.45);
  outline-offset: 3px;
}
.threadRow__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(123,196,127,.18);
}
.threadRow__icon svg{
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.90);
  filter: drop-shadow(0 0 10px rgba(123,196,127,.14));
}

/* ===== Support layout hard-fixes (mobile) ===== */
.supportModal__body > .supportScreen{
  flex: 1;
  min-height: 0;
}
.supportModal__body > .supportScreen--list,
.supportModal__body > .supportScreen--chat{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.supportPager{ flex: 1; min-height: 0; }
.supportPage{ height: 100%; }

/* Support: guarantee full-height body so chat/composer never slip outside viewport */
.supportModal__body > .supportScreen{
  flex: 1 !important;
  min-height: 0 !important;
}
.supportModal__body > .supportScreen--list,
.supportModal__body > .supportScreen--chat{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.supportPager{ flex: 1 !important; min-height: 0 !important; }

/* Support: ensure chat area fills available height (no blank body) */
.supportView--chat .supportChat{ flex: 1; height: auto; }
.supportView--chat .supportChat__messages{ flex: 1; min-height: 0; }
.supportComposer{
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
/* ===== Support Native v26 (typography + hierarchy + desktop polish) ===== */
.supportModal{
  --sup-bg: rgba(10,14,12,.94);
  --sup-surface: rgba(255,255,255,.06);
  --sup-surface2: rgba(255,255,255,.04);
  --sup-line: rgba(255,255,255,.10);
  --sup-line2: rgba(255,255,255,.07);
  --sup-text: rgba(255,255,255,.92);
  --sup-muted: rgba(255,255,255,.62);
  --sup-muted2: rgba(255,255,255,.46);
  --sup-accent: rgba(123,196,127,1);
  --sup-warn-a: rgba(255,196,92,1);
  --sup-warn-b: rgba(255,84,84,1);
}

/* Panel + header */
.supportModal__panel{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sup-bg), var(--sup-bg));
  border: 1px solid var(--sup-line2);
}
.supportModal .modal__top{
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--sup-line2);
}
.supportModal .modal__topTitle{
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1px;
}

/* Layout: mobile = stacked, desktop = sidebar + content */
.supportShell{
  display:flex;
  flex-direction: column;
}
.supportViews{ min-height: 0; }

@media (min-width: 980px){
  .supportModal .modal__panel{
    width: 420px;
    height: 70vh;
    max-height: 70vh;
    border-radius: 24px;
  }
  .supportModal .modal__body{
    height: calc(100% - 52px);
    max-height: none;
    overflow: hidden;
  }
  .supportModal__body{ height: 100%; padding: 0; }

  .supportModal .supportShell{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .supportModal .supportViews{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .supportModal .supportView{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .supportModal .supportView--chat{
    overflow: hidden;
    padding-right: 0;
  }

  .supportModal .supportNav{
    margin-top: auto;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--sup-line2);
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34));
    backdrop-filter: blur(18px);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .supportModal .supportTab{
    flex: 1 1 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .supportModal .supportTab__label{ font-size: 11px; }
  .supportModal .supportTab__badge{
    position: absolute;
    top: 6px;
    right: 8px;
  }
}

/* Support navigation tabs (mobile bottom) */
.supportNav{
  flex: 0 0 auto;
  display:flex;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sup-line2);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34));
  backdrop-filter: blur(18px);
}
.supportTab{
  position: relative;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--sup-muted);
  border-radius: 16px;
  padding: 10px 8px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.supportTab:active{ transform: scale(.99); }
.supportTab.is-active{
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.03));
  color: var(--sup-text);
}
.supportTab[disabled]{
  opacity: .55;
}
.supportTab__icon{ width: 20px; height: 20px; display:inline-grid; place-items:center; }
.supportTab__icon svg{ width: 20px; height: 20px; }
.supportTab__label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Hide bottom support navigation while inside chat view */
#supportScreenList[data-view="chat"] .supportNav{ display:none !important; }

/* Badges: count pill + hot glow */
.supportTab__badge{
  position: absolute;
  top: 8px;
  right: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(10,14,12,.92);
  background: radial-gradient(circle at 30% 30%, var(--sup-warn-a), var(--sup-warn-b));
  box-shadow: 0 0 0 3px rgba(255,120,60,.14), 0 10px 26px rgba(255,90,60,.30);
}

/* Tickets list hierarchy */
.supportThreads__head{ padding: 0 2px; margin: 0 4px; }
.supportThreads__title{
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sup-muted);
}
.supportThreads__hint{ font-size: 12px; color: var(--sup-muted2); }

.supportNewRow{
  border-radius: 18px;
  border: 1px solid var(--sup-line2);
  background: linear-gradient(180deg, var(--sup-surface), rgba(0,0,0,0));
}
.supportNewRow__txt{ font-weight: 600; }
.supportNewRow__chev{ opacity: .55; }

.supportThreads__list{
  border-radius: 18px;
  padding: 0;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
}
.threadRow{
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 14px;
}
.threadRow:hover{ background: rgba(255,255,255,.04) !important; filter:none !important; }
.threadRow:active{ background: rgba(255,255,255,.06) !important; }
.threadRow + .threadRow{ border-top: 1px solid var(--sup-line2) !important; }

.threadRow__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(123,196,127,.14), rgba(255,255,255,.02));
  border: 1px solid rgba(123,196,127,.18);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  position: relative;
  display: grid;
  place-items: center;
}

.threadRow__badge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(10,14,12,.92);
  background: radial-gradient(circle at 30% 30%, var(--sup-warn-a), var(--sup-warn-b));
  box-shadow: 0 0 0 3px rgba(255,120,60,.14), 0 10px 26px rgba(255,90,60,.30);
}


.threadRow__subject{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1px;
  max-width: 56vw;
}
.threadRow__sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--sup-muted2);
}
.threadRow__time{
  font-weight: 550;
  font-size: 12px;
  color: var(--sup-muted2);
}

.statusPill{
  font-weight: 600;
  letter-spacing: .06px;
}

.threadRow__icon .dot--unread{
  position:absolute;
  right:-4px;
  bottom:-4px;
}

/* Unread dot = "hot" */
.dot--unread{
  width: 7px;
  height: 7px;
  background: radial-gradient(circle at 30% 30%, var(--sup-warn-a), var(--sup-warn-b));
  box-shadow: 0 0 0 4px rgba(255,120,60,.14), 0 0 18px rgba(255,90,60,.34);
  animation: supHotPulse 1.6s ease-in-out infinite;
}
@keyframes supHotPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 4px rgba(255,120,60,.14), 0 0 18px rgba(255,90,60,.32); }
  50%{ transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255,120,60,.16), 0 0 24px rgba(255,90,60,.44); }
}

/* Chat head + composer typography */
.supportChatHead__title{ font-weight: 600; }
.supportModal .pillBtn{ font-weight: 600; }
.supportModal .field__label{ font-weight: 600; }
.supportModal .field__input,
.supportModal .field__textarea{ font-weight: 450; }

/* Desktop button polish inside support */
.supportModal .btn{
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: .12px;
}
.supportModal .btn--ghost{
  background: var(--sup-surface2);
  border-color: var(--sup-line);
}

/* Native-like controls */
.supportModal button,
.supportModal .btn,
.supportModal .pillBtn,
.supportModal .supportTab,
.supportModal .supportComposer__attach,
.supportModal .supportComposer__send{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.supportModal button:focus-visible{
  outline: 2px solid rgba(123,196,127,.32);
  outline-offset: 2px;
}

/* ===== Support: desktop keeps mobile layout (no sidebar), centered phone-like sheet ===== */
@media (min-width: 960px){
  .supportModal__panel{ border-radius: 24px; }
}

/* ===== Support Native v28 (desktop stability + truly native controls) ===== */

/* Prevent layout jumps: enforce a single internal flex layout for all views */
.supportModal .modal__panel{ position: relative; }
.supportModal .modal__body{ display:flex; flex-direction:column; overflow:hidden; }
.supportModal__body{ flex: 1 1 auto; min-height: 0; display:flex; flex-direction:column; }
.supportModal .supportShell{ flex: 1 1 auto; min-height: 0; display:flex; flex-direction:column; }
.supportModal .supportViews{ flex: 1 1 auto; min-height: 0; display:flex; flex-direction:column; }
.supportModal .supportView{ flex: 1 1 auto; min-height: 0; }
.supportModal .supportView--chat{ overflow:hidden; display:flex; flex-direction:column; }
.supportModal .supportScreen--chat{ flex: 1 1 auto; min-height: 0; display:flex; flex-direction:column; }
.supportModal .supportChat{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 12px;
}

@media (min-width: 960px){
  .supportModal .modal__panel{ height: 70vh; max-height: 70vh; }
}

/* Top-right button: SVG icons (chevron vs more) */
.supportModal .minbtn{ display:inline-flex; align-items:center; justify-content:center; gap: 0; }
.supportModal .minbtn__icon{ display:inline-grid; place-items:center; line-height: 0; }
.supportModal .minbtn__icon--more{ display:none; }
.supportModal .minbtn.is-more .minbtn__icon--chev{ display:none; }
.supportModal .minbtn.is-more .minbtn__icon--more{ display:inline-grid; }

/* Action menu: drop under header (not bottom) */
.supportModal .supportActionSheet{
  inset: 52px 0 0 0;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 12px;
}
.supportModal .supportActionSheet__panel{
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  border: 1px solid var(--sup-line2);
  background:
    radial-gradient(520px 220px at 18% -30%, rgba(123,196,127,.14), transparent 60%),
    linear-gradient(180deg, var(--sup-bg), var(--sup-bg));
  box-shadow: 0 18px 54px rgba(0,0,0,.55);
  padding: 10px 12px 12px;
  transform: translateY(-10px);
  animation: supportSheetInTop .16s ease-out forwards;
}
.supportModal .supportActionSheet__handle{ display:none; }
.supportModal .supportActionSheet__actions{ justify-content: space-between; }
@keyframes supportSheetInTop{
  from{ transform: translateY(-14px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Composer: no extra outer padding, never exceeds module bounds */
.supportModal .supportAttachStrip{ padding: 6px 12px 0; margin: 0; }
.supportModal .supportComposer{
  margin: 0;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sup-line2);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.20));
  box-sizing: border-box;
}
@media (min-width: 960px){
  .supportModal .supportComposer{ padding-bottom: 10px; }
}
.supportModal .supportComposer__input{ box-sizing: border-box; }

/* Bottom tabs: active segment fills area edge-to-edge (no rounding / no gaps) */
.supportModal .supportNav{ padding: 0; gap: 0; }
.supportModal .supportTab{
  border-radius: 0;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
}
.supportModal .supportTab + .supportTab{ border-left: 1px solid var(--sup-line2); }
.supportModal .supportTab.is-active{
  border-radius: 0;
  background: linear-gradient(180deg, rgba(123,196,127,.12), rgba(255,255,255,.02));
}

/* Unread dot: smaller + cleaner (no heavy glow/pulse) */
.supportModal .dot--unread,
.supportModal .supportTab__badge{
  animation: none;
}
.supportModal .dot--unread{
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 2px rgba(255,120,60,.10);
}

/* Tab badge: smaller + no heavy glow */
.supportModal .supportTab__badge{
  min-width: 12px;
  height: 12px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255,120,60,.92);
  color: rgba(10,14,12,.94);
  box-shadow: 0 0 0 2px rgba(255,120,60,.10);
}

/* Typography: reduce boldness to match native app feel */
.supportModal .modal__topTitle{ font-weight: 600; letter-spacing: -.06px; }
.supportModal .supportThreads__title,
.supportModal .threadRow__subject,
.supportModal .supportNewTop__title,
.supportModal .supportChatHead__title{ font-weight: 600; }
.supportModal .statusPill,
.supportModal .pillBtn,
.supportModal .btn{ font-weight: 600; }
.supportModal .bubble{ font-weight: 450; }

/* ===== Global modal look: match Support sheet theme ===== */
:root{
  --sheet-bg0: rgba(10,14,12,.94);
  --sheet-bg1: rgba(10,14,12,.94);
  --sheet-line: rgba(255,255,255,.10);
  --sheet-line2: rgba(255,255,255,.08);
  --sheet-surface: rgba(255,255,255,.06);
  --sheet-text: rgba(255,255,255,.92);
  --sheet-muted: rgba(255,255,255,.70);
}

.modal__panel{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
  border-color: var(--sheet-line);
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
}

.modal__top{
  background: rgba(0,0,0,.12);
  border-bottom-color: var(--sheet-line2);
}

.modal__topTitle{ font-weight: 600; letter-spacing: -.06px; }
.desc{ color: var(--sheet-muted); }
.priceBlock,
.rating{
  background: var(--sheet-surface);
  border-color: var(--sheet-line2);
}
.priceBlock__label{ color: var(--sheet-muted); }
.priceBlock__value{ color: var(--sheet-text); }

.menu__panel,
.menuSheet{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
  border-color: var(--sheet-line);
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
}

/* ===== Support modal: fixed desktop size (prevent height jumps between views) ===== */
@media (min-width: 960px){
  .modal.supportModal .modal__panel.supportModal__panel{
    width: 420px !important;
    height: 70vh !important;
    min-height: 85dvh !important;
    max-height: 85dvh !important;
    min-width: 75dvw;
  }
  .modal.supportModal .modal__body.supportModal__body{
    max-height: none !important;
  }
}

/* Ensure chat composer never escapes the support panel */
.modal.supportModal .supportViews{ overflow: hidden; }
.modal.supportModal .supportView{ height: auto; }
.modal.supportModal .supportView--chat{ height: auto; }
.modal.supportModal .supportScreen--chat{ flex: 1 1 auto; min-height: 0; }
.modal.supportModal .supportChat{ flex: 1 1 auto; min-height: 0; overflow: auto; }
.modal.supportModal .supportComposer{ flex: 0 0 auto; max-width: 100%; }

/* Support: desktop min button must not fallback to browser default */
.supportModal .minbtn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 16px;
    border: none;
    background: rgb(255 255 255 / 0%);
    color: rgb(255 255 255 / 72%);
    cursor: pointer;
}

.supportModal .minbtn:active{ transform: scale(.98); }
.supportModal .minbtn svg{ width: 18px; height: 18px; }

/* ===== Support Native v29: full-width ticket list + desktop tabbar fit ===== */
.supportModal .supportView[data-view="tickets"]{
  padding: 0 !important;
  padding-right: 0 !important;
}
.supportModal .supportThreads--native{
  margin: 0;
  padding: 0;
}
.supportModal .supportThreads--native .supportThreads__list{
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sup-line2) !important;
  border-bottom: 1px solid var(--sup-line2) !important;
  background: var(--sup-surface2) !important;
}
.supportModal .supportThreads--native .threadRow{
  margin: 0;
  padding: 14px 16px;
}
.supportModal .supportThreads--native .threadRow:hover{
  background: rgba(255,255,255,.04) !important;
}

@media (min-width: 960px){
  .supportModal .supportTab{ padding: 10px 8px !important; }
}

/* Action sheet bar: keep same palette as support panel */
.supportModal .supportActionSheet__panel{
  background:
    radial-gradient(560px 220px at 18% -40%, rgba(123,196,127,.12), transparent 62%),
    radial-gradient(700px 260px at 90% 0%, rgba(255,196,92,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
  border-color: var(--sup-line2);
}

/* ===== Desktop hero chips: 1x4 grid (fix cascade overrides) ===== */
@media (min-width: 960px){
  .chips{ grid-template-columns: repeat(4, 1fr); }
}

/* ===== Global modal typography + palette (non-support) ===== */
.modal:not(.supportModal){
  --mod-bg: rgba(18, 28, 21, .92);
  --mod-line: rgba(255,255,255,.10);
  --mod-line2: rgba(255,255,255,.08);
  --mod-surface: rgba(255,255,255,.06);
  --mod-surface2: rgba(255,255,255,.04);
  --mod-text: rgba(255,255,255,.92);
  --mod-muted: rgba(255,255,255,.62);
}



.modal:not(.supportModal) .modal__topTitle{ font-weight: 600; letter-spacing: -.06px; }
.modal:not(.supportModal) .rating__value{ font-weight: 600; }
.modal:not(.supportModal) .priceBlock__value{ font-weight: 600; }
.modal:not(.supportModal) .btn{ font-weight: 600; }

/* ===== Cart: native hierarchy + compact controls ===== */
.cartView{ padding: 10px 12px 14px; }
.cartEmpty{
  background: var(--mod-surface);
  border-color: var(--mod-line);
  color: var(--mod-text);
  font-weight: 400;
    border-radius: 15px;
    border: 1px solid #2b2e2c;
}
.cartRow{
  width: 100%;
  border-radius: 18px;
  background: var(--mod-surface);
  border-color: var(--mod-line);
}
.cartRow__title{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.08px;
  color: var(--mod-text);
}
.cartRow__fiat{ font-weight: 600; }
.cartRow__crypto{
  color: var(--mod-muted);
  font-weight: 550;
  font-size: 12px;
}
.cartRow__right{
  display:flex;
  flex:0 0 auto;
  min-width:132px;
  flex-direction: row;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}
.stepper{
  gap: 6px;
  padding: 5px 6px;
  border-color: var(--mod-line2);
  background: rgba(0,0,0,.14);
}
.stepper__btn{
  width: 26px;
  height: 26px;
  font-weight: 600;
  border-color: var(--mod-line2);
  background: var(--mod-surface);
  color: var(--mod-text);
}
.stepper__qty{
  min-width: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mod-text);
}
.trashBtn{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border-color: var(--mod-line2);
  background: var(--mod-surface);
  color: var(--mod-muted);
  display:grid;
  place-items:center;
}
.trashBtn svg{ width: 16px; height: 16px; }
.trashBtn:active{ transform: scale(.98); }

.cartSummary{
  border-radius: 18px;
  border-color: var(--mod-line);
  background: var(--mod-surface2);
}
.cartSummary__row{
  font-weight: 600;
  font-size: 13px;
  color: var(--mod-text);
}
.cartSummary__row--muted{
  color: var(--mod-muted);
  font-weight: 550;
}
.cartSummary__row--total{ font-size: 14px; font-weight: 600; }
.cartSummary__divider{ background: var(--mod-line2); }
.cartModal .cartView{ padding-bottom: 0; }

/* ===== Support: desktop bottom tabbar vertical fit ===== */
@media (min-width: 960px){
  .supportModal .supportNav{ height: 64px; }
  .supportModal .supportTab{ padding: 8px 8px 6px; }
  .supportModal .supportTab__label{ line-height: 1.05; }
}

/* ===== Support: stable viewport sizing + chat layout (mobile & desktop) ===== */

/* Support panel must be a flex column so views can reliably fill remaining height */
.supportModal .modal__panel{
  display:flex;
  flex-direction:column;
}
.supportModal .modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Mobile: true full-screen (no over-constraints, no drift) */
@media (max-width: 959px){
  .modal--support .modal__panel,
  .supportModal .modal__panel{
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Neutralize older mobile sizing rules that can fight with top-based 100dvh */
  .supportModal__panel{
    height: auto;
    max-height: none;
  }

  .supportModal .modal__body{
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Desktop: fixed app-window height (no jumps between views) */
@media (min-width: 960px){
  .modal--support .modal__panel,
  .supportModal .modal__panel{
    height: 70vh;
    min-height: 70vh;
    max-height: 70vh;
  }
}

/* Chat must flex-fill between header and bottom tabs */
.supportView--chat .supportScreen--chat{
  height: 100%;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
.supportModal .supportChat{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
}


/* =========================================================
   Theme toggle + Light theme (premium, readable)
   ========================================================= */

/* Switch state */
.switch.is-on .switch__thumb{ transform: translateX(18px); }
.switch.is-on .switch__track{
  background: rgba(123,196,127,.22);
  border-color: rgba(123,196,127,.18);
}

/* Light theme tokens */
html[data-theme="light"]{
  color-scheme: light;

  /* Core */
  --bg0: #F8F7F3;
  --bg1: #ECE9E0;
  --card: #FFFFFF;
  --card2: #F7F4ED;

  /* Ink */
  --text: #0F1713;
  --muted: #2C3A33;
  --muted2: #46564D;

  /* Accent */
  --green: #278B5B;
  --green2:#1F724B;

  /* Lines + shadows */
  --line: rgba(15,27,20,.16);
  --shadow: 0 20px 52px rgba(15,27,20,.16);

  /* Sheets / modals */
  --sheet-bg0: #FFFFFF;
  --sheet-bg1: #F3F0E8;
  --sheet-line: rgba(15,27,20,.14);
  --sheet-line2: rgba(15,27,20,.11);
  --sheet-surface: rgba(15,27,20,.055);
  --sheet-text: rgba(15,27,20,.95);
  --sheet-muted: rgba(15,27,20,.72);
}

html[data-theme="light"] body{
  color: var(--text);
  background:
    radial-gradient(980px 560px at 12% 8%, rgba(39,139,91,.12), transparent 58%),
    radial-gradient(720px 280px at 16% -18%, rgba(39,139,91,.08), transparent 61%),
    radial-gradient(960px 360px at 92% 8%, rgba(196,159,96,.12), transparent 64%),
    radial-gradient(1260px 760px at 74% -12%, rgba(39,139,91,.08), transparent 62%),
    linear-gradient(180deg, #FCFBF8 0%, #F4F0E8 56%, var(--bg1) 100%);
}

/* Top bar: separated, expensive */
html[data-theme="light"] .sitebar{
  background:
    radial-gradient(900px 340px at 92% 8%, rgba(196,159,96,.12), transparent 62%),
    radial-gradient(700px 240px at 14% -20%, rgba(39,139,91,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,243,236,.95));
  border-bottom-color: rgba(15,27,20,.11);
  box-shadow: 0 1px 0 rgba(255,255,255,.82) inset, 0 18px 42px rgba(15,27,20,.12);
}

html[data-theme="light"] .sitebar__brandIcon{
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.08);
  color: rgba(15,27,20,.78);
}

html[data-theme="light"] .sitebar__search{
  background: rgba(255,255,255,.88);
  border-color: rgba(15,27,20,.10);
  box-shadow: 0 12px 26px rgba(15,27,20,.06);
}
html[data-theme="light"] .sitebar__searchIcon{ opacity:.62; }
html[data-theme="light"] .sitebar__searchInput{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .sitebar__searchInput::placeholder{ color: rgba(15,27,20,.42); }
html[data-theme="light"] .sitebar__searchBtn{
  border-color: rgba(15,27,20,.12);
  background: rgba(15,27,20,.04);
  color: rgba(15,27,20,.84);
}

html[data-theme="light"] .topnav__item{
  border-color: rgba(15,27,20,.10);
  background: rgba(15,27,20,.03);
  color: rgba(15,27,20,.70);
}
html[data-theme="light"] .topnav__item:hover{
  background: rgba(15,27,20,.04);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .topnav__item.is-active{
  background: rgba(255,255,255,.88);
  border-color: rgba(47,163,106,.22);
  color: rgba(15,27,20,.92);
  box-shadow: 0 10px 18px rgba(15,27,20,.10);
}

html[data-theme="light"] .sitebar__deliver{
  background: rgba(15,27,20,.03);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.84);
}
html[data-theme="light"] .sitebar__deliverText{ color: rgba(15,27,20,.82); }

/* Hero stays photo-first: keep white typography */
html[data-theme="light"] .hero{
  border-color: rgba(255,255,255,.18);
}
html[data-theme="light"] .hero__top{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
html[data-theme="light"] .hero__title,
html[data-theme="light"] .hero__subtitle{ color: rgba(255,255,255,.92); }
html[data-theme="light"] .hero__subtitle{ color: rgba(255,255,255,.76); }

/* Mobile search on hero: light surface + dark text */
html[data-theme="light"] .mobileSearch{
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(15,27,20,.10) !important;
  box-shadow: 0 18px 40px rgba(15,27,20,.10);
}
html[data-theme="light"] .mobileSearch__icon{
  background: rgba(47,163,106,.12) !important;
  border-color: rgba(47,163,106,.18) !important;
  color: rgba(15,27,20,.72) !important;
}
html[data-theme="light"] .mobileSearch__input{
  color: rgba(15,27,20,.92) !important;
}
html[data-theme="light"] .mobileSearch__input::placeholder{
  color: rgba(15,27,20,.42) !important;
}

/* Section + links */
html[data-theme="light"] .linkbtn{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.84);
  color: rgba(15,27,20,.74);
}
html[data-theme="light"] .catSection__meta{ color: rgba(15,27,20,.56); }

/* Cards */
html[data-theme="light"] .card{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(47,163,106,.12), transparent 60%),
    radial-gradient(900px 340px at 92% 8%, rgba(198,161,91,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,242,236,.96));
  box-shadow: 0 20px 44px rgba(15,27,20,.12);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .card__shade{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(15,27,20,.10));
}
html[data-theme="light"] .tag{
  color: rgba(15,27,20,.74);
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .pill{
  background: rgba(15,27,20,.03);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.82);
}
html[data-theme="light"] .pill--muted{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .price__crypto{ color: rgba(15,27,20,.58); }
html[data-theme="light"] .addBtn{
  background: rgba(47,163,106,.12);
  border-color: rgba(47,163,106,.28);
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .addBtn:disabled,
html[data-theme="light"] .addBtn.is-disabled{
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.50);
}
html[data-theme="light"] .stockNote{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.72);
}
html[data-theme="light"] .stockNote::before{ color: rgba(214,130,60,.90); }
html[data-theme="light"] .cartRow__stock--out{ color: rgba(214,130,60,.90); }
html[data-theme="light"] .priceBlock, .rating {
    background: var(--sheet-surface);
    border-color: var(--sheet-line2);
}
html[data-theme="light"] .bulkInfo__save {
border: 1px solid rgb(29 144 36);
    background: rgb(123 196 127);
    color: #eaffea;
    font-weight: 600;
}
html[data-theme="light"] .bulkInfo strong {
    color: rgb(0 0 0 / 92%);
}

html[data-theme="light"] .bulkInfo__muted {
    color: rgb(0 0 0 / 70%);
 }
html[data-theme="light"] .rating {
    color: var(--text);
}
/* Bottom navigation */
html[data-theme="light"] .bottomnav{
  background: rgba(247,246,242,.92);
  border-top-color: rgba(15,27,20,.10);
  box-shadow: 0 -12px 28px rgba(15,27,20,.12);
}
html[data-theme="light"] .bottomnav__item{ color: rgba(15,27,20,.56); }
html[data-theme="light"] .bottomnav__item.is-active{ color: rgba(15,27,20,.92); }

/* Buttons */
html[data-theme="light"] .btn--ghost{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .railEmpty{
  background: rgba(255,255,255,.72);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.72);
}
html[data-theme="light"] .backbtn{
  border-color: transparent;
  background: transparent;
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .backbtn:active{ background: rgba(15,27,20,.06); }

/* Categories modal (native list) */
.categoriesModal .modal__body{ padding: 10px 12px 14px; }
.categoriesModal__listWrap{ margin-top: 4px; }
.categoriesModal__list{ padding: 6px; }
.categoriesModal .threadRow{ width:100%; }
.categoriesModal .threadRow__icon svg{ width:22px; height:22px; display:block; }
.categoriesModal .threadRow__subject{ max-width: 60vw; }
.categoriesRow[aria-current="true"]{
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .categoriesRow[aria-current="true"]{
  background: rgba(47,163,106,.06);
}

/* Hide hero chips when a single category filter is active */
body[data-category-filter="1"] .chips{ display:none !important; }

/* Modals / menus readability */
html[data-theme="light"] .modal__top{
  background: rgba(255,255,255,.70);
  border-bottom-color: rgba(15,27,20,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 10px 28px rgba(15,27,20,.10);
}
html[data-theme="light"] .desc{ color: rgba(15,27,20,.66); }
html[data-theme="light"] .priceBlock__label{ color: rgba(15,27,20,.60); }

html[data-theme="light"] .menuSheet__title{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .menuSheet__subtitle{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .menuSheet__rowSub{ color: rgba(15,27,20,.56); }
html[data-theme="light"] .menuInstallProgress__meta{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .menuInstallProgress__track{ background: rgba(15,27,20,.12); }
html[data-theme="light"] .menuInstallProgress__fill{ background: linear-gradient(90deg, rgba(73,142,92,.82) 0%, rgba(111,177,128,.92) 100%); }


.iosInstallGuide .modal__scrim{ backdrop-filter: blur(8px); }
.iosInstallGuide .modal__panel{
  width: min(540px, calc(100vw - 28px));
  max-height: min(84dvh, 760px);
}
.iosInstallGuide__panel{
  border-radius: 26px;
}
.iosInstallGuide__top{
  background: rgba(0,0,0,.12);
}
.iosInstallGuide__body{
  padding: 16px 16px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.iosInstallGuide__hero{
  display:grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.iosInstallGuide__heroIcon{
  width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  color:rgba(246,251,246,.96);
  background: linear-gradient(180deg, rgba(123,196,127,.20), rgba(123,196,127,.10));
  border:1px solid rgba(123,196,127,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.20);
}
.iosInstallGuide__heroIcon svg{ width:26px;height:26px;display:block; }
.iosInstallGuide__eyebrow{ font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(123,196,127,.92); }
.iosInstallGuide__title{ margin:6px 0 0;font-size:22px;line-height:1.1;letter-spacing:-.03em; }
.iosInstallGuide__lead{ margin:8px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.74); }
.iosInstallGuide__steps{ display:grid;gap:12px;margin-top:16px; }
.iosInstallGuide__step{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:flex-start;
  padding:13px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.iosInstallGuide__stepNo{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:900;
  color:rgba(12,20,15,.92);background:linear-gradient(180deg, rgba(123,196,127,.98), rgba(107,179,111,.96));
  box-shadow:0 10px 22px rgba(123,196,127,.24);
}
.iosInstallGuide__stepTitle{ font-size:15px;font-weight:700;letter-spacing:-.01em; }
.iosInstallGuide__stepText{ margin-top:4px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72); }
.iosInstallGuide__inlineShare{ display:inline-flex;width:18px;height:18px;margin:0 2px;vertical-align:-3px;color:rgba(246,251,246,.95); }
.iosInstallGuide__inlineShare svg{ width:18px;height:18px;display:block; }
.iosInstallGuide__note{
  margin-top:16px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);font-size:12px;line-height:1.5;color:rgba(255,255,255,.70);
}
.iosInstallGuide__actions{ display:flex;justify-content:flex-end;margin-top:16px; }
@media (max-width: 680px){
  .iosInstallGuide .modal__panel{ width:min(100vw - 20px, 520px); max-height:min(88dvh, 760px); }
  .iosInstallGuide__body{ padding:14px 14px 16px; }
  .iosInstallGuide__hero{ grid-template-columns:56px minmax(0,1fr); gap:12px; padding:13px; }
  .iosInstallGuide__heroIcon{ width:56px;height:56px;border-radius:16px; }
  .iosInstallGuide__title{ font-size:20px; }
}
html[data-theme="light"] .iosInstallGuide__top{ background: rgba(255,255,255,.88); }
html[data-theme="light"] .iosInstallGuide__hero,
html[data-theme="light"] .iosInstallGuide__step,
html[data-theme="light"] .iosInstallGuide__note{
  background: rgba(255,255,255,.68);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .iosInstallGuide__lead,
html[data-theme="light"] .iosInstallGuide__stepText,
html[data-theme="light"] .iosInstallGuide__note{ color: rgba(15,27,20,.68); }
html[data-theme="light"] .iosInstallGuide__heroIcon{
  color:rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(39,139,91,.16), rgba(39,139,91,.08));
  border-color: rgba(39,139,91,.14);
}
html[data-theme="light"] .menuSheet__close{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .menuSheet__icon{
  background: rgba(47,163,106,.10);
  border-color: rgba(47,163,106,.14);
  color: rgba(15,27,20,.82);
}


/* Light theme: extra contrast + native surfaces */
html[data-theme="light"] .modal__panel{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,244,239,.98));
  border-color: rgba(15,27,20,.12);
  box-shadow: 0 28px 70px rgba(15,27,20,.18);
}
html[data-theme="light"] .modal__top{
  background: rgba(255,255,255,.88);
  border-bottom-color: rgba(15,27,20,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 10px 28px rgba(15,27,20,.10);
}
html[data-theme="light"] .modal__topTitle{ color: rgba(15,27,20,.94); }

html[data-theme="light"] .topnav__item{
  background: rgba(15,27,20,.035);
  color: rgba(15,27,20,.78);
}

html[data-theme="light"] .chip{
  border-color: rgba(15,27,20,.12);
  background: rgba(255,255,255,.88);
  color: rgba(15,27,20,.90);
  box-shadow: 0 10px 18px rgba(15,27,20,.08);
}
html[data-theme="light"] .chip:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(47,163,106,.28);
  box-shadow: 0 14px 22px rgba(15,27,20,.10);
}
html[data-theme="light"] .chip__icon{ filter: none; opacity: .95; }

html[data-theme="light"] .linkbtn{
  color: rgba(15,27,20,.84);
  border-color: rgba(15,27,20,.12);
  background: rgba(255,255,255,.72);
}
html[data-theme="light"] .linkbtn:hover{ background: rgba(255,255,255,.86); }

html[data-theme="light"] .catSection__meta{ color: rgba(15,27,20,.68); }

/* Cart */
html[data-theme="light"] .cartEmpty{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,27,20,.10);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .cartRow{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 20px rgba(15,27,20,.06);
}
html[data-theme="light"] .cartRow__img{ border-color: rgba(15,27,20,.10); }
html[data-theme="light"] .cartRow__crypto{ color: rgba(15,27,20,.60); }

html[data-theme="light"] .stepper{
  border-color: rgba(15,27,20,.10);
  background: rgba(15,27,20,.03);
}
html[data-theme="light"] .stepper__btn{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.90);
  color: rgba(15,27,20,.92);
}

html[data-theme="light"] .cartSummary{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 30px rgba(15,27,20,.08);
}
html[data-theme="light"] .cartSummary__row{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .cartSummary__row--muted{ color: rgba(15,27,20,.72); }
html[data-theme="light"] .cartSummary__divider{ background: rgba(15,27,20,.10); }

/* Support list */
html[data-theme="light"] .supportThreads__hint{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .threadRow{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 22px rgba(15,27,20,.06);
}
html[data-theme="light"] .threadRow__sub{ color: rgba(15,27,20,.66); }
html[data-theme="light"] .threadRow__time{ color: rgba(15,27,20,.58); }
html[data-theme="light"] .supportModal .minbtn { color: #393939; }

/* Switch polish for light */
html[data-theme="light"] .switch__track{
  background: rgba(15,27,20,.08);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .switch__thumb{
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 22px rgba(15,27,20,.16);
}
html[data-theme="light"] .switch.is-on .switch__track{
  background: rgba(47,163,106,.18);
  border-color: rgba(47,163,106,.22);
}

/* Forms */
html[data-theme="light"] .field__label{ color: rgba(15,27,20,.66); }
html[data-theme="light"] .field__input,
html[data-theme="light"] .field__textarea{
  background: rgba(255,255,255,.88);
  border-color: rgba(15,27,20,.12);
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .field__input::placeholder,
html[data-theme="light"] .field__textarea::placeholder{
  color: rgba(15,27,20,.42);
}

/* Support composer */
html[data-theme="light"] .supportComposer{
  border-top-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.90);
}
html[data-theme="light"] .supportComposer__input{
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .supportComposer__input::placeholder{
  color: rgba(15,27,20,.42);
}
html[data-theme="light"] .supportComposer__attach{
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .supportComposer__send{
  background: rgba(47,163,106,.12);
  border-color: rgba(47,163,106,.22);
  color: rgba(15,27,20,.92);
}

/* Support: text fixes */
html[data-theme="light"] .supportNewTop__sub,
html[data-theme="light"] .supportNewNote,
html[data-theme="light"] .threadRow__sub,
html[data-theme="light"] .threadRow__time,
html[data-theme="light"] .supportThreads__hint{
  color: rgba(15,27,20,.56);
}
html[data-theme="light"] .threadRow__right::after{ color: rgba(15,27,20,.34); }
html[data-theme="light"] .supportNewTop {
    padding: 14px 14px;
    background: linear-gradient(180deg, rgb(254 254 253), rgba(0, 0, 0, .00));
}
html[data-theme="light"] .statusPill{
  border-color: rgba(15,27,20,.12);
  background: rgba(15,27,20,.04);
  color: rgba(15,27,20,.78);
}
html[data-theme="light"] .statusPill--open{
  background: rgba(47,163,106,.12);
  border-color: rgba(47,163,106,.20);
  color: rgba(15,27,20,.86);
}
html[data-theme="light"] .statusPill--resolved{
  background: rgba(58,112,182,.12);
  border-color: rgba(58,112,182,.18);
}
html[data-theme="light"] .statusPill--cancelled{
  background: rgba(255,84,84,.10);
  border-color: rgba(255,84,84,.18);
}

/* Cart */
html[data-theme="light"] .cartRow,
html[data-theme="light"] .cartSummary,
html[data-theme="light"] .stepper{
  background: rgba(255,255,255,.90);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .cartRow__sub,
html[data-theme="light"] .cartSummary__row--muted,
html[data-theme="light"] .cartEmpty,
html[data-theme="light"] .stepper__val{
  color: rgba(15,27,20,.62);
}
html[data-theme="light"] .trashBtn{
  border-color: rgba(255,84,84,.18);
  background: rgba(255,84,84,.08);
  color: rgba(15,27,20,.84);
}

/* Confirm modal handle */
html[data-theme="light"] .confirmModal__handle{ background: rgba(15,27,20,.16); }
html[data-theme="light"] .confirmModal__text{ color: rgba(15,27,20,.66); }


/* Light theme: menu rows */
html[data-theme="light"] .menuSheet__sectionTitle{ color: rgba(15,27,20,.48); }
html[data-theme="light"] .menuSheet__row{
  background: rgba(15,27,20,.03);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .menuSheet__row:hover{ background: rgba(15,27,20,.04); }

/* ===== Light theme v3: hero overlay contrast + native support hierarchy ===== */

/* Hero overlay (photo) must always be legible (light/dark themes) */
.hero__metaLine{
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}
.hero .iconbtn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.hero .iconbtn--ghost:hover{
  background: rgba(0,0,0,.30);
  border-color: rgba(255,255,255,.24);
}
.hero .iconbtn--ghost:active{ transform: scale(.99); }
.hero .iconbtn--discounts:hover{
  border-color:rgba(255,226,147,.62);
  background:
    linear-gradient(180deg, rgba(255,220,130,.22), rgba(255,191,73,.10)),
    rgba(0,0,0,.34);
}

/* Light theme: hero category chips should be "glass", not solid white */
html[data-theme="light"] .hero .chip{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  box-shadow: none;
}
html[data-theme="light"] .hero .chip:hover{
  border-color: rgba(123,196,127,.32);
  background: rgba(0,0,0,.24);
}
html[data-theme="light"] .hero .chip.is-active{
  background: linear-gradient(180deg, rgba(47,163,106,.26), rgba(0,0,0,.18));
  border-color: rgba(123,196,127,.42);
  box-shadow: 0 0 0 1px rgba(123,196,127,.10) inset, 0 12px 26px rgba(0,0,0,.18);
}

/* Support: light theme variables + clean iOS-like surfaces */
html[data-theme="light"] .supportModal{
  --sup-bg: rgba(247,246,242,.96);
  --sup-surface: rgba(255,255,255,.94);
  --sup-surface2: rgba(255,255,255,.88);
  --sup-line: rgba(15,27,20,.10);
  --sup-line2: rgba(15,27,20,.08);
  --sup-text: rgba(15,27,20,.92);
  --sup-muted: rgba(15,27,20,.62);
  --sup-muted2: rgba(15,27,20,.48);
  --sup-accent: rgba(47,163,106,1);
}

/* Ensure support panel overrides generic .modal__panel in light theme */
html[data-theme="light"] .supportModal__panel{
  background:
    radial-gradient(780px 260px at 14% -18%, rgba(47,163,106,.14), transparent 60%),
    radial-gradient(980px 340px at 92% 6%, rgba(198,161,91,.10), transparent 64%),
    linear-gradient(180deg, var(--sup-bg), var(--sup-bg));
  border-color: var(--sup-line2);
  box-shadow: 0 18px 54px rgba(15,27,20,.18);
}
html[data-theme="light"] .supportModal .modal__top{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--sup-line2);
}

/* Threads list: hierarchy + accents */
html[data-theme="light"] .threadRow{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 18px rgba(15,27,20,.06);
}
html[data-theme="light"] .threadRow:hover{
  background: linear-gradient(180deg, rgba(39,139,91,.08), rgba(15,27,20,.02)) !important;
  border-color: rgba(39,139,91,.18);
}
html[data-theme="light"] .threadRow__icon{
  background: linear-gradient(180deg, rgba(39,139,91,.18), rgba(31,114,75,.14));
  border-color: rgba(39,139,91,.18);
  color: rgba(18,57,40,.96);
}
html[data-theme="light"] .threadRow__icon svg{ stroke: currentColor; }
html[data-theme="light"] .threadRow__sub{ color: rgba(15,27,20,.66); }
html[data-theme="light"] .threadRow__time{ color: rgba(15,27,20,.58); }

/* Bottom tabs: readable + active accent */
html[data-theme="light"] .supportNav{
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.94));
  border-top-color: rgba(15,27,20,.08);
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .supportTab{
  color: rgba(15,27,20,.58);
}
html[data-theme="light"] .supportTab.is-active{
  color: rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(47,163,106,.14), rgba(255,255,255,.00));
}
html[data-theme="light"] .supportTab.is-active::after{
  content:"";
  position:absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(47,163,106,1);
  box-shadow: 0 0 0 5px rgba(47,163,106,.16);
  pointer-events:none;
}

/* ===== Light theme v4: more depth + cleaner Support list ===== */

/* Hero + cards: add real depth in light theme */
html[data-theme="light"] .hero{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 28px 72px rgba(15,27,20,.16);
}
@media (min-width: 960px){
  html[data-theme="light"] .hero{ box-shadow: 0 34px 92px rgba(15,27,20,.16); }
}

html[data-theme="light"] .card{
  box-shadow: 0 26px 68px rgba(15,27,20,.16);
}
html[data-theme="light"] .card:hover{
  box-shadow: 0 32px 84px rgba(15,27,20,.18);
}

/* Support: remove visual gaps between rows (native grouped list) */
html[data-theme="light"] .supportThreads__list{
  padding: 0;
  background: rgba(255,255,255,.94);
  border-color: rgba(15,27,20,.10);
  box-shadow: 0 18px 54px rgba(15,27,20,.12);
}
html[data-theme="light"] .threadRow{
  border: 0;
  background: #ffffff;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 14px;
}
html[data-theme="light"] .stepper__qty{
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .threadRow:active{ background: rgba(47,163,106,.06); }
html[data-theme="light"] .threadRow + .threadRow{
  border-top: 1px solid rgba(15,27,20,.08);
}

/* Support: stronger icon + hierarchy */
html[data-theme="light"] .threadRow__icon {
    background: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
    border-color: rgba(31,114,75,.88);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(39,139,91,.18), 0 16px 34px rgba(15, 27, 20, .10);
}
html[data-theme="light"] .threadRow__subject{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .threadRow__sub{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .threadRow__time{ color: rgba(15,27,20,.52); }

/* Support bottom tabs: remove green dot indicator (keep only color/underline) */
html[data-theme="light"] .supportTab.is-active::after{ content:none; display:none; }


/* ===== Light theme v5: visible chat bubbles + stronger depth + accented top bar ===== */

/* Top bar: more separation from page */
html[data-theme="light"] .sitebar{
  border-bottom-color: rgba(15,27,20,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.86) inset, 0 26px 74px rgba(15,27,20,.16);
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .sitebar{ position: sticky; }
html[data-theme="light"] .sitebar::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(47,163,106,0),
    rgba(47,163,106,.42),
    rgba(198,161,91,.22),
    rgba(47,163,106,.18),
    rgba(47,163,106,0)
  );
  opacity: .55;
  pointer-events:none;
}

/* Hero + cards: stronger, more visible depth */
html[data-theme="light"] .hero{
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 42px 140px rgba(15,27,20,.22);
}
@media (min-width: 960px){
  html[data-theme="light"] .hero{
    box-shadow:
      0 1px 0 rgba(255,255,255,.16) inset,
      0 52px 160px rgba(15,27,20,.24);
  }
}
html[data-theme="light"] .card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 34px 120px rgba(15,27,20,.18);
}
html[data-theme="light"] .card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 44px 150px rgba(15,27,20,.22);
}

/* Support chat: make bubbles and chat surface visible in light theme */
html[data-theme="light"] .supportView--chat .supportChat{
  background:
    radial-gradient(820px 260px at 14% -18%, rgba(47,163,106,.10), transparent 60%),
    radial-gradient(980px 340px at 92% 6%, rgba(198,161,91,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,246,242,.92));
  border-color: rgba(15,27,20,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.78) inset, 0 18px 56px rgba(15,27,20,.10);
}
html[data-theme="light"] .supportView--chat .bubble{
  background: rgba(255,255,255,.96);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.92);
  box-shadow: 0 12px 26px rgba(15,27,20,.06);
}
html[data-theme="light"] .supportView--chat .bubble--me{
  background: linear-gradient(180deg, rgba(47,163,106,.24), rgba(47,163,106,.14));
  border-color: rgba(47,163,106,.26);
  color: rgba(15,27,20,.92);
  box-shadow: 0 14px 28px rgba(47,163,106,.12), 0 12px 26px rgba(15,27,20,.06);
}
html[data-theme="light"] .supportView--chat .bubble__time{
  color: rgba(15,27,20,.46);
}
html[data-theme="light"] .supportView--chat .bubble__img{
  border-radius: 12px;
  border: 1px solid rgba(15,27,20,.10);
}

/* Support chat (compat): apply same light theme styles even if wrapper class differs */
html[data-theme="light"] .supportChat{
  background:
    radial-gradient(820px 260px at 14% -18%, rgba(47,163,106,.10), transparent 60%),
    radial-gradient(980px 340px at 92% 6%, rgba(198,161,91,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,246,242,.92));
  border-color: rgba(15,27,20,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.78) inset, 0 18px 56px rgba(15,27,20,.10);
}
html[data-theme="light"] .supportChat .bubble{
  background: rgba(255,255,255,.96);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.92);
  box-shadow: 0 12px 26px rgba(15,27,20,.06);
}
html[data-theme="light"] .supportChat .bubble--me{
  background: linear-gradient(180deg, rgba(47,163,106,.24), rgba(47,163,106,.14));
  border-color: rgba(47,163,106,.26);
  color: rgba(15,27,20,.92);
  box-shadow: 0 14px 28px rgba(47,163,106,.12), 0 12px 26px rgba(15,27,20,.06);
}
html[data-theme="light"] .supportChat .bubble__time{ color: rgba(15,27,20,.46); }
html[data-theme="light"] .supportChat .bubble__status{ color: rgba(15,27,20,.78); }
html[data-theme="light"] .supportChat .bubble__status.is-muted{ color: rgba(15,27,20,.42); }
html[data-theme="light"] .supportChat .bubble__media .mediaThumb{
  border-color: rgba(15,27,20,.10);
  background: rgba(15,27,20,.04);
}



/* ===== Light theme v6: visible depth + native hovers + hero saturation ===== */

/* Ticket hover: no extra lift shadow, only subtle color shift */
html[data-theme="light"] .threadRow:hover{
    background: rgb(198 198 198 / 21%) !important;
}

/* Make global shadows visible on cream background (professional, not heavy) */
html[data-theme="light"] .sitebar{
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(47,163,106,.10), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(198,161,91,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,243,237,.92));
  border-bottom-color: rgba(15,27,20,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 8px 18px rgba(15,27,20,.12),
    0 22px 60px rgba(15,27,20,.10);
}

/* Top bar accent line: more present, premium gradient */
html[data-theme="light"] .sitebar::after {
    height: 3px;
    opacity: 1;
    background: linear-gradient(90deg, rgba(47, 163, 106, .85), rgba(198, 161, 91, .38), rgba(47, 163, 106, .08), rgb(18 148 39));
    left: 0;
    width: 100vw;
}

/* Hero: visible depth */
html[data-theme="light"] .hero {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 26px rgba(15, 27, 20, .18), 0px 4px 20px rgb(15 27 20 / 47%);
}
/* Hero background: more natural color treatment in light theme */
html[data-theme="light"] .hero__bg{
  background-blend-mode: saturation;
  filter: saturate(1.12) contrast(1.06);
}

/* Cards: add crisp shadow so they separate from page */
html[data-theme="light"] .card {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset, 0 10px 22px rgba(15, 27, 20, .14), 4px 0px 7px rgb(15 27 20 / 22%);
}
/* Optional: slightly stronger hover on cards (still subtle) */
html[data-theme="light"] .card:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset, 0 12px 26px rgba(15, 27, 20, .16), 1px 1px 9px rgb(15 27 20 / 33%);
}

html[data-theme="light"] .wbtn{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(19,31,23,.88);
}
html[data-theme="light"] .wbtn:hover{
  border-color: rgba(46,121,75,.22);
}
html[data-theme="light"] .wbtn.is-active{
  border-color: rgba(46,121,75,.38);
  background: rgba(46,121,75,.12);
  color: rgba(14,22,16,.92);
}
html[data-theme="light"] .weightPicker{
  border-color: rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}
html[data-theme="light"] .weightPicker__label{
  color: rgba(14,22,16,.72);
}
html[data-theme="light"] .cartWeight{
  border-color: rgba(46,121,75,.22);
  background: rgba(46,121,75,.10);
  color: rgba(14,22,16,.84);
}
/* ===== PATCH (2026-01-29): Navbar logo + full-screen product modal on mobile ===== */
.sitebar__logo{
  height: 45px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.sitebar__brand{ gap: 0; }

@media (max-width: 420px){
  .sitebar__logo{ height: 26px; }
}

@media (max-width: 959px){
  /* Product cards modal: full-screen on mobile */
  #productModal.modal--sheet .modal__panel{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  #productModal.modal--sheet .modal__panel{
    display: flex;
    flex-direction: column;
  }
  #productModal .modal__top{
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 12px;
  }
  #productModal .modal__body{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }
}

/* ---- Media carousel (product modal + fullscreen viewer) ---- */
.mediaCarousel{ position:relative; width:100%; }
.mediaCarousel__track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-radius:18px;
  background: rgba(0,0,0,.10);
}
.mediaCarousel__track::-webkit-scrollbar{ display:none; }
.mediaCarousel__slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; }
.mediaCarousel__img{
  width:100%;
  height:264px;
  object-fit:cover;
  display:block;
  border-radius:18px;
  user-select:none;
  -webkit-user-drag:none;
}

/* Video thumb inside carousel (modal) */
.mediaCarousel__videoThumb{
  width:100%;
  display:block;
  position:relative;
  border:0;
  padding:0;
  background: transparent;
  cursor:pointer;
}
.mediaCarousel__videoThumb:focus-visible{ outline: 2px solid rgba(123,196,127,.55); outline-offset: 2px; }
.mediaCarousel__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.mediaCarousel__playIcon{
  width:60px;
  height:60px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  font-size: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* Video element inside fullscreen viewer */
.mediaCarousel__video{
  width:100%;
  height:264px;
  display:block;
  border-radius:18px;
  background: rgba(0,0,0,.65);
}

.mediaCarousel__arrow{
  position:absolute;
  top:50%;
  width:56px;
  height:56px;
  border:0;
  border-radius: 0;
  background: transparent;
  color:#fff;
  font-size: 42px;
  line-height: 1;
  font-weight: 600;
  display:grid;
  place-items:center;
  cursor:pointer;
  transform: translateY(-50%) scale(1);
  transition: transform .15s ease, opacity .15s ease;
  -webkit-text-stroke: 2px rgba(0,0,0,.95);
  text-shadow:
    0 2px 0 rgba(0,0,0,.95),
    0 0 14px rgba(0,0,0,.55);
}
.mediaCarousel__arrow:hover{ opacity: .95; }
.mediaCarousel__arrow:active{ transform: translateY(-50%) scale(.92); opacity: .78; }
.mediaCarousel__arrow:focus-visible{ outline: 2px solid rgba(255,255,255,.75); outline-offset: 3px; border-radius: 10px; }
.mediaCarousel__arrow--prev{ left:10px; }
.mediaCarousel__arrow--next{ right:10px; }

@media (hover:none), (pointer:coarse){
  .mediaCarousel__arrow{ display:none; }
}

.mediaCarousel__hud{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.mediaCarousel__dots{ display:flex; gap:6px; align-items:center; pointer-events:auto; }
.mediaCarousel__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  border:0;
  background: rgba(255,255,255,.36);
  padding:0;
  cursor:pointer;
  transition: width .18s ease, background .18s ease, transform .18s ease;
}
.mediaCarousel__dot.is-active{ width:18px; background: rgba(255,255,255,.92); }
.mediaCarousel__dot:active{ transform: scale(.92); }

.mediaCarousel__count{
  pointer-events:none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,12,.55);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Viewer overlay */
.viewer{ position:fixed; inset:0; z-index:1000; display:none; }
.viewer.is-open{ display:block; }
.viewer__scrim{ position:absolute; inset:0; background: rgba(0,0,0,.78); }
.viewer__panel{
  position:relative;
  height:100%;
  width:100%;
}
.viewer__top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  pointer-events:none;
}
.viewer__top::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.viewer__top > *{ position:relative; pointer-events:auto; }
.viewer__spacer{ flex:1; }
.viewer__count{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,12,.55);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.viewer__close{ width:44px; height:44px; border-radius: 14px; }

.mediaCarousel--viewer{ position:absolute; inset:0; }
.mediaCarousel--viewer .mediaCarousel__track{ height:100%; border-radius: 0; background: transparent; }
.mediaCarousel--viewer .mediaCarousel__slide{ height:100%; background: transparent; }
.mediaCarousel--viewer .mediaCarousel__img{
  height:100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.mediaCarousel--viewer .mediaCarousel__video{
  height:100%;
  border-radius: 0;
  background:#000;
}
 .mediaCarousel--viewer .mediaCarousel__hud{ justify-content:center; }
.mediaCarousel--viewer .mediaCarousel__count{ display:none; }

.viewer[data-mode="support"] .viewer__panel{
  position:absolute;
  inset:0;
}
.viewer[data-mode="support"] .mediaCarousel--viewer{
  inset:78px 18px 78px;
}
.viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__track{
  height:100%;
  border-radius:26px;
  background:transparent;
}
.viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__slide{
  height:100%;
  display:grid;
  place-items:center;
  padding:10px;
}
.viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__img,
.viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__video{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  border-radius:22px;
  background:#000;
}
.viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__video{
  width:min(100%, 960px);
}
.viewer[data-mode="support"] .mediaCarousel__hud{
  bottom:16px;
}
@media (max-width: 720px){
  .viewer[data-mode="support"] .mediaCarousel--viewer{
    inset:74px 10px 72px;
  }
  .viewer[data-mode="support"] .mediaCarousel--viewer .mediaCarousel__slide{
    padding:6px;
  }
}

html.is-locked, body.is-locked{ overflow:hidden; }


@media (max-width: 959px){
  /* Show chips only on "All products" (no active category filter) */
  body[data-category-filter="1"] .chips{ display:none !important; }

  /* When viewing All products on mobile, show chips as a native horizontal rail */
  body:not([data-category-filter="1"]) .chips{
    display:grid !important;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 6px;
    margin: 0;
    scroll-snap-type: x mandatory;
  }
  body:not([data-category-filter="1"]) .chips::-webkit-scrollbar{ height: 0; }
  body:not([data-category-filter="1"]) .chip{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Mobile: chips should not be shown inside hero */
  /* NOTE: body:not([data-category-filter="1"]) .chips has higher specificity; use #heroChips to override reliably */
  #heroChips{ display:none !important; }
  .hero #heroChips{ display:none !important; }
  .hero .chips--hero{ display:none !important; }
}

/* Safety net: if a device reports a larger CSS viewport but still uses the mobile hero layout,
   hide hero chips up to tablet widths. */
@media (max-width: 1024px){
  #heroChips{ display:none !important; }
}

/* ===== PATCH (2026-01-30): Theme-aware logo visibility (fix cascade) ===== */
.sitebar__logo--dark{ display:block; }
.sitebar__logo--light{ display:none; }
html[data-theme="light"] .sitebar__logo--dark{ display:none; }
html[data-theme="light"] .sitebar__logo--light{ display:block; }

/* Desktop: chips visible only on All products (no category filter) */
@media (min-width: 960px){
  body[data-category-filter="1"] .chips{ display:none !important; }
  body:not([data-category-filter="1"]) .chips{ display:grid !important; }
}

/* ===== PATCH (2026-01-31): Hero sort chips + header icons ===== */
.section__head{ align-items:center; }
.section__headLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.section__icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; opacity:.92; flex:0 0 auto; }
.section__icon svg{ width:20px; height:20px; display:block; }

.catSection__head{ align-items:center; }
.catSection__titleWrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.catSection__icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; opacity:.92; flex:0 0 auto; }
.catSection__icon svg{ width:20px; height:20px; display:block; }

/* Hero sort chips must be visible on mobile + desktop (override old category-chip rules). */
#heroChips,
.hero #heroChips,
.hero .chips--hero{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  scroll-snap-type: none;
  padding: 26px 14px 16px;
  margin: 0;
}

body[data-category-filter="1"] #heroChips{ display:grid !important; }

@media (min-width: 960px){
  #heroChips,
  .hero #heroChips,
  .hero .chips--hero{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 34px;
  }
}


/* ===== Auth (Profile modal) ===== */
.profileView--auth{ padding: 0; }
.profileAuth{ padding: 12px; }

.securityActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.securityActions > .btn{flex:1 1 220px;min-width:0}
.securityActions--authPgp > .btn{flex:1 1 180px}
.profileSection--nested{padding:14px;border-radius:0;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);box-shadow:none}
.pgp2faCard,.authPgpCard{display:flex;flex-direction:column;gap:12px}
.pgp2faHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pgp2faSub,.authPgpLead{font-size:12px;line-height:1.5;color:rgba(245,247,250,.68)}
.pgp2faFingerprint{font-size:12px;line-height:1.45;color:rgba(245,247,250,.86);word-break:break-all}
.pgp2faSetup,.pgp2faEnabled,.pgp2faChallenge{display:flex;flex-direction:column;gap:12px}
.pgp2faStage{display:flex;flex-direction:column;gap:12px}
.pgp2faStage__title{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--sup-text)}
.pgp2faKey,.pgp2faCipher,.authPgpCipher{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap}
.authLoginStage{display:flex;flex-direction:column;gap:14px}
.authPgpStep{padding-top:4px}
.authPasswordStep{padding-top:4px}
.authPanePassword .passwordCard{margin:0}
.authPasswordActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.authPasswordActions > .btn{flex:1 1 220px;min-width:0}
.pgpConfirmModal__panel{max-width:min(92vw,420px)}
.pgpConfirmModal__icon{width:54px;height:54px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(123,196,127,.18), rgba(123,196,127,.08));border:1px solid rgba(123,196,127,.26);color:rgba(214,255,216,.96);box-shadow:0 16px 32px rgba(46,72,45,.18)}
.pgpConfirmModal__icon svg{width:26px;height:26px}
.pgpConfirmModal__field{margin-top:4px}

html[data-theme="light"] .profileSection--nested{background:rgba(255,255,255,.74);border-color:rgba(15,23,42,.10)}
html[data-theme="light"] .pgp2faSub,
html[data-theme="light"] .authPgpLead,
html[data-theme="light"] .authAuxStatus{color:rgba(15,23,42,.66)}
html[data-theme="light"] .pgp2faFingerprint{color:rgba(15,23,42,.82)}
html[data-theme="light"] .pgpConfirmModal__icon{background:linear-gradient(180deg, rgba(223,243,227,.96), rgba(236,247,239,.96));border-color:rgba(80,140,93,.22);color:#2f6a39;box-shadow:0 16px 32px rgba(79,130,88,.10)}
.ordersFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ordersFilterChip{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(245,247,250,.92);padding:8px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;letter-spacing:-.01em;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease}
.ordersFilterChip:hover{transform:translateY(-1px)}
.ordersFilterChip.is-active{border-color:rgba(123,196,127,.34);background:rgba(123,196,127,.14);color:rgba(245,247,250,.98);box-shadow:0 10px 24px rgba(123,196,127,.08)}
.ordersFilterChip:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,210,121,.12);border-color:rgba(255,210,121,.42)}
html[data-theme="light"] .ordersFilterChip{border-color:rgba(17,24,39,.10);background:rgba(255,255,255,.90);color:#223041}
html[data-theme="light"] .ordersFilterChip.is-active{border-color:rgba(93,158,103,.28);background:linear-gradient(180deg, rgba(228,247,232,.98), rgba(215,239,221,.96));color:#2f6a39;box-shadow:0 10px 24px rgba(79,130,88,.07)}
html[data-theme="light"] .ordersFilterChip:focus-visible{box-shadow:0 0 0 4px rgba(245,158,11,.14);border-color:rgba(217,119,6,.26)}

.profileAuthNav{
  margin-top: auto;
  flex: 0 0 auto;
  display:flex;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--sup-line2);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34));
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .profileAuthNav{
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.94));
  border-top-color: rgba(15,27,20,.08);
}
.profileAuthTab{
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--sup-muted);
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  font-weight: 550;
  letter-spacing: .08px;
  font-size: 13px;
  transition: background .16s ease, color .16s ease;
}
.profileAuthTab.is-active{
  color: var(--sup-text);
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.03));
}
.profileAuthTab.is-cta,
.profileAuthTab.is-active[data-auth="register"]{
  color: var(--sup-text);
  background: linear-gradient(180deg, rgba(123,196,127,.18), rgba(255,255,255,.03));
  box-shadow: none;
}
.profileAuthTab.is-cta:hover,
.profileAuthTab.is-active[data-auth="register"]:hover{
  filter: none;
}
html[data-theme="light"] .profileAuthTab{ color: rgba(15,27,20,.58); }
html[data-theme="light"] .profileAuthTab.is-active{
  color: rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(47,163,106,.14), rgba(255,255,255,.00));
}
html[data-theme="light"] .profileAuthTab.is-cta,
html[data-theme="light"] .profileAuthTab.is-active[data-auth="register"]{
  color: rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(47,163,106,.14), rgba(255,255,255,.00));
  box-shadow: none;
}

.toggleRow--compact{
  padding: 10px 12px;
}

.field__error{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 92, 92, .10);
  border: 1px solid rgba(255, 92, 92, .18);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.35;
}
html[data-theme="light"] .field__error{
  background: rgba(220, 66, 66, .08);
  border-color: rgba(220, 66, 66, .16);
  color: rgba(15,27,20,.90);
}

.authError{
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 92, 92, .10);
  border: 1px solid rgba(255, 92, 92, .18);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  line-height: 1.35;
}
html[data-theme="light"] .authError{
  background: rgba(220, 66, 66, .08);
  border-color: rgba(220, 66, 66, .16);
  color: rgba(15,27,20,.90);
}

.authRegisterActions{display:flex;align-items:center;justify-content:stretch;margin-top:4px}
.authRegisterActions > .btn{width:100%}

.authFineprint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sup-surface2);
  border: 1px solid var(--sup-line2);
  color: var(--sup-muted);
  font-size: 12px;
  line-height: 1.35;
}

.btnSpinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: rgba(255,255,255,.02);
  animation: satisfySpin .9s linear infinite;
}
html[data-theme="light"] .btnSpinner{
  border-color: rgba(15,27,20,.22);
  border-top-color: rgba(15,27,20,.02);
}
@keyframes satisfySpin{
  to{ transform: rotate(360deg); }
}

.btn.is-busy{
  pointer-events: none;
  opacity: .92;
}


/* Support: per-ticket unread badge */
.threadRow__unread{min-width:18px;height:18px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:550;letter-spacing:.2px;background:rgba(123,196,127,.16);border:1px solid rgba(123,196,127,.35);color:rgba(255,255,255,.95);}
.threadRow__unread[hidden]{display:none!important;}
.threadRow__right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}

/* Support: bubble meta (time + read status) */
.bubble__meta{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:6px;}
.bubble__time{margin-top:0;}
.bubble__status{display:inline-flex;align-items:center;gap:6px;font-size:11px;line-height:1;color:rgba(235,244,255,.74);}
.bubble__status svg{width:18px;height:18px;opacity:1}
.bubble__status.is-read{color: rgba(169,217,167,.95)}
.bubble__status.is-muted{color:rgba(235,244,255,.52);}
.bubble__delivery{display:inline-flex;align-items:center;gap:6px;max-width:min(220px, 58vw);padding:0;font-size:11px;line-height:1.2;color:rgba(235,244,255,.74);}
.bubble__deliveryIcon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;font-size:12px;font-weight:800;color:inherit;}
.bubble__deliveryLabel{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bubble__delivery--pending{color:rgba(235,244,255,.74);}
.bubble__delivery--failed{color:#ffd1d1;}
.bubble__deliverySpinner{display:inline-block;width:12px;height:12px;border-radius:999px;border:2px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.92);animation:supportUploadSpin .8s linear infinite;}
.bubble__retry{border:0;appearance:none;-webkit-appearance:none;padding:0;background:transparent;color:#fff;font:inherit;font-size:11px;font-weight:800;letter-spacing:.01em;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.bubble__retry:hover{opacity:.92;}
.bubble__retry:active{transform:translateY(1px);}
.bubble.is-unread{box-shadow:0 0 0 1px rgba(123,196,127,.25) inset;}

html[data-theme="light"] .bubble__status{color: rgba(15,27,20,.56)}
html[data-theme="light"] .bubble__status.is-read{color: rgba(15,27,20,.92)}
html[data-theme="light"] .bubble__delivery--pending{color:rgba(15,27,20,.62)}
html[data-theme="light"] .bubble__delivery--failed{color:#9b2e2e}
html[data-theme="light"] .bubble__retry{color:#123225}

/* Support: attachments inside bubble */
.supportChat .bubble__text{ white-space:pre-wrap; }
.supportChat .bubble__media{ margin-top:10px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.supportChat .bubble__media:first-child{ margin-top:0; }
.supportChat .bubble__media--single{ grid-template-columns: 1fr; }
.supportChat .bubble__media .mediaThumb{ display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); contain:layout paint; }
.supportChat .bubble__media .mediaThumb--button{ position:relative; display:block; width:100%; padding:0; cursor:pointer; appearance:none; -webkit-appearance:none; line-height:0; aspect-ratio:1 / 1; }
.supportChat .bubble__media .mediaThumb--button.mediaThumb--single{ aspect-ratio:4 / 3; }
.supportChat .bubble__media img,
.supportChat .bubble__media .mediaThumb__video{ display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.supportChat .bubble__media .mediaThumb--single img,
.supportChat .bubble__media .mediaThumb--single .mediaThumb__video{ object-fit:cover; }
.supportChat .bubble__media .mediaThumb__play{ position:absolute; inset:auto 10px 10px auto; display:grid; place-items:center; width:34px; height:34px; border-radius:999px; background:rgba(6,10,9,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.supportChat .bubble__media .mediaThumb__playIcon{ color:#fff; font-size:13px; line-height:1; transform:translateX(1px); }
.supportChat .bubble.is-pending{ opacity:.9; }
.supportChat .bubble.is-failed{ opacity:1; }
.supportChat .bubble__media .mediaThumb__upload{ position:absolute; inset:0; display:grid; place-items:center; gap:8px; padding:12px; background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.48)); color:#fff; text-align:center; }
.supportChat .bubble__media .mediaThumb__upload.is-failed{ background:linear-gradient(180deg, rgba(70,10,10,.34), rgba(70,10,10,.60)); }
.supportChat .bubble__media .mediaThumb__uploadSpinner{ width:28px; height:28px; border-radius:999px; border:2px solid rgba(255,255,255,.20); border-top-color:rgba(255,255,255,.95); animation:supportUploadSpin .8s linear infinite; }
.supportChat .bubble__media .mediaThumb__upload.is-failed .mediaThumb__uploadSpinner{ display:none; }
.supportChat .bubble__media .mediaThumb__uploadPct{ display:inline-flex; align-items:center; justify-content:center; min-width:96px; font-weight:800; font-size:13px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
@media (max-width: 480px){
  .supportChat .bubble__media{ grid-template-columns: 1fr; }
  .supportChat .bubble__media .mediaThumb--button{ aspect-ratio: 4 / 3; }
  .supportChat .bubble__media .mediaThumb--button.mediaThumb--single{ aspect-ratio: 4 / 3; }
}

/* Support: day separators */
.supportChat .chatDaySep{
  display:flex;
  justify-content:center;
  margin: 10px 0 6px;
}
.supportChat .chatDaySep__pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .2px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(var(--blur));
}
html[data-theme="light"] .supportChat .chatDaySep__pill{
  color: rgba(15,27,20,.62);
  background: rgba(15,27,20,.04);
  border-color: rgba(15,27,20,.10);
}

/* ===== Home: Marketing blocks (Why order / What is / Offer / How it works) ===== */
.section--marketing{ padding-top: 18px; padding-bottom: 18px; }
.marketingBlock{ max-width: 1100px; margin: 0 auto; }
.marketingBlock__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin: 2px 2px 12px; }
.marketingBlock__title{ margin:0; font-size: 22px; letter-spacing: -.4px; font-weight: 600; }
.marketingBlock__sub{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.35; max-width: 520px; }

.section--why{ padding-top: 12px; padding-bottom: 6px; }

.whyIcons{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.whyIcon{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.050);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(var(--blur));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.whyIcon:before{
  content:\"\";
  position:absolute; inset:-2px;
  background: radial-gradient(360px 180px at 20% 0%, rgba(123,196,127,.14), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.whyIcon > *{ position:relative; }
.whyIcon:hover{
  transform: translateY(-1px);
  border-color: rgba(123,196,127,.22);
  background: rgba(255,255,255,.060);
}
.whyIcon__glyph{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(123,196,127,.12);
  border: 1px solid rgba(123,196,127,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  color: rgba(214,255,228,.95);
}
.whyIcon__glyph svg{ width: 22px; height: 22px; display:block; }
.whyIcon__text{ min-width:0; }
.whyIcon__label{ font-weight: 550; letter-spacing: -.2px; }
.whyIcon__sub{ color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.25; }
.whatRow{ margin-top: 14px; display:grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }

.whatCard,
.offerCard,
.howBlock{
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.46), 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(var(--blur));
}

.whatCard{ position:relative; overflow:hidden; padding: 18px 18px 16px; min-height: 176px; }
.whatCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 20% 20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(520px 260px at 90% 20%, rgba(255,205,92,.10), transparent 62%);
  pointer-events:none;
}
.whatCard > *{ position:relative; }
.whatCard__badge{ position:absolute; left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 16px; display:grid; place-items:center; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 16px 34px rgba(0,0,0,.40); }
.whatCard__badgeIcon{ font-size: 18px; }
.whatCard__main{ padding-left: 58px; }
.whatCard__kicker{ color: rgba(255,255,255,.70); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.whatCard__title{ margin: 4px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.whatCard__copy{ margin:0; color: rgba(255,255,255,.86); font-size: 13px; line-height: 1.45; max-width: 64ch; }

.pillRow{ margin-top: 12px; display:flex; gap: 8px; flex-wrap: wrap; }
.miniPill{
  display:inline-flex; align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size: 12px;
}

.offerCard{ padding: 16px 16px 14px; }
.offerCard__title{ margin:0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.offerList{ margin:0; padding:0; list-style:none; display:grid; gap: 10px; }
.offerItem{ display:flex; gap: 10px; align-items:flex-start; }
.offerItem__dot{ width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: rgba(123,196,127,.60); box-shadow: 0 0 0 4px rgba(123,196,127,.12); }
.offerItem__text{ color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.38; }
.offerItem__text strong{ color: rgba(255,255,255,.94); }

.howBlock{ margin-top: 12px; padding: 16px 16px 14px; }
.howBlock__title{ margin:0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.howSteps{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.howStep{ display:flex; gap: 10px; padding: 12px 12px; border-radius: 18px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.08); }
.howStep__num{ width: 28px; height: 28px; border-radius: 10px; display:grid; place-items:center; font-family: var(--font-mono); font-weight: 600; background: rgba(123,196,127,.10); border: 1px solid rgba(123,196,127,.18); color: rgba(255,255,255,.92); }
.howStep__title{ font-weight: 550; letter-spacing: -.2px; }
.howStep__sub{ margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.25; }

@media (max-width: 980px){
  .whyIcons{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whatRow{ grid-template-columns: 1fr; }
  .howSteps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .marketingBlock__head{ flex-direction: column; align-items:flex-start; }
  .whyIcons{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whyIcon{ align-items:center; gap: 10px; padding: 12px 12px; }
  .whyIcon__sub{ display:block; }
  .whyIcon__glyph{ width: 40px; height: 40px; border-radius: 13px; }
  .howSteps{ grid-template-columns: 1fr; }
}

/*test*/

/* ===== RailFX v4.4: swipe-like rails + scrub dots (desktop) ===== */
.railFX{ position: relative; }
.railFX--fine{ cursor: grab; }
.railFX--fine.is-grabbing{ cursor: grabbing; }

.railFX--touch{ touch-action: pan-y; }

.railDots{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0 2px 12px;
  margin-top: -2px;
}

.railDots__track{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 4px 2px;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

.railDots .mediaCarousel__dot{
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.28);
}
.railDots .mediaCarousel__dot.is-active{
  width: 20px;
  background: rgba(255,255,255,.90);
}

@media (max-width: 520px){
  .railDots{ padding-bottom: 10px; }
}


/* ===== Checkout / Invoice modal UI ===== */
.checkoutBody{ padding: 12px 14px 14px; }
.checkoutFlow{
  display:flex;
  gap: 8px;
  padding: 10px 12px 0;
  overflow:auto;
  scrollbar-width: none;
}
.checkoutFlow::-webkit-scrollbar{ display:none; }
.flowStep{
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 600;
  cursor:pointer;
  letter-spacing: -.1px;
}
.flowStep.is-active{
  border-color: rgba(123,196,127,.28);
  background: rgba(123,196,127,.14);
  color: rgba(234,255,234,.92);
}
.flowStep.is-done{ opacity: .92; }
.flowStep:active{ transform: scale(.99); }

.checkoutCard{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.checkoutCard__title{ font-weight: 600; letter-spacing: -.15px; margin-bottom: 10px; }

.checkoutCartList{ display:flex; flex-direction:column; gap: 10px; }
.checkoutCartRow{
  display:flex; gap: 10px; align-items:center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.checkoutCartRow__img{ width: 44px; height:44px; border-radius: 14px; object-fit:cover; border:1px solid rgba(255,255,255,.10); }
.checkoutCartRow__main{ flex:1; min-width:0; }
.checkoutCartRow__title{ font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkoutCartRow__sub{ margin-top: 2px; color: rgba(255,255,255,.74); font-weight: 600; font-size: 12px; }
.checkoutCartRow__price{ font-weight: 600; white-space:nowrap; }

.checkoutTotals{ margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.10); }
.checkoutTotals__row{ display:flex; justify-content:space-between; padding: 7px 4px; font-weight: 600; }

.shipVal{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.shipVal__price{font-weight:600;white-space:nowrap}
.shipVal__meta{font-size:12px;font-weight:550;color:rgba(255,255,255,.72);text-align:right;max-width:40ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme="light"] .shipVal__meta{color:rgba(0,0,0,.55)}
@media (max-width:520px){.shipVal__meta{white-space:normal;overflow:visible;text-overflow:clip;max-width:none}}


.checkoutHint{ margin-top: 10px; font-weight: 550; color: rgba(255,255,255,.75); }

.checkoutGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkoutGrid .field--full{ grid-column: 1 / -1; }

.shipPick{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 8px;
}
.shipPick.is-disabled{ opacity:.6; pointer-events:none; filter:saturate(.9); }

.shipOpt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .16s ease, background .16s ease;
}
.shipOpt:active{ transform: scale(.99); }
.shipOpt.is-selected{
  border-color: rgba(123,196,127,.30);
  background: rgba(123,196,127,.14);
}
.shipOpt__left{ display:flex; flex-direction:column; gap: 4px; min-width:0; }
.shipOpt__title{ font-weight: 600; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shipOpt__meta{ font-size: 12px; color: rgba(255,255,255,.72); font-weight: 600; }
.shipOpt__right{ display:flex; align-items:center; gap: 10px; flex-shrink:0; }
.shipOpt__price{ font-weight: 600; white-space:nowrap; }
.shipOpt__check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
}
.shipOpt.is-selected .shipOpt__check{ border-color: rgba(123,196,127,.45); background: rgba(123,196,127,.22); }
.shipOpt__check svg{ width: 14px; height: 14px; opacity:.0; transform: scale(.85); transition: opacity .16s ease, transform .16s ease; }
.shipOpt.is-selected .shipOpt__check svg{ opacity:1; transform: scale(1); }

.shipPick--profile .shipOpt{ border-radius: 16px; }

.coinPick{ display:flex; gap: 10px; }
.coinPick--compact{ gap: 8px; }
.coinBtn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-weight: 600;
  cursor:pointer;
}
.coinBtn__icon{ width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); }
.coinBtn.is-active{ border-color: rgba(123,196,127,.28); background: rgba(123,196,127,.14); color: rgba(234,255,234,.92); }
.coinBtn:active{ transform: scale(.99); }

.checkoutPaySummary{ margin-top: 12px; }
.checkoutPaySummary__row{ display:flex; justify-content:space-between; padding: 7px 4px; font-weight: 600; }
.checkoutPaySummary__row--muted{ color: rgba(255,255,255,.70); font-weight: 600; }
/* Checkout: Payment breakdown (Stage 3) */
.checkoutSection{ margin-top: 2px; }
.checkoutSection__title{ font-weight: 600; letter-spacing: -.15px; margin-bottom: 10px; }

.checkoutBreakdown{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.checkoutBreakdown__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.checkoutBreakdown__title{ font-weight: 600; letter-spacing: -.15px; }

.btn--xs{ padding: 8px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; }

.checkoutPayItems{ display:flex; flex-direction:column; gap: 8px; }
.checkoutPayItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.checkoutPayItem__img{ width: 40px; height: 40px; border-radius: 14px; object-fit:cover; border:1px solid rgba(255,255,255,.10); }
.checkoutPayItem__main{ flex:1; min-width:0; }
.checkoutPayItem__title{ font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkoutPayItem__sub{ margin-top: 2px; color: rgba(255,255,255,.74); font-weight: 550; font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkoutPayItem__price{ font-weight: 600; white-space:nowrap; }

.checkoutPayTotals{ margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.10); }
.checkoutPayTotals__row{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; padding: 7px 4px; font-weight: 600; }
.checkoutPayTotals__row--total{ padding-top: 10px; margin-top: 4px; border-top: 1px dashed rgba(255,255,255,.12); }

.checkoutShipTo{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.checkoutShipTo__label{ font-size: 12px; font-weight: 550; color: rgba(255,255,255,.68); margin-bottom: 6px; }
.checkoutShipTo__val{ font-weight: 550; color: rgba(255,255,255,.90); line-height: 1.35; overflow-wrap:anywhere; }

@media (max-width:520px){
  .checkoutPayItem__sub{ white-space:normal; }
}

.checkoutActions{ margin-top: 12px; }
.checkoutErr{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,90,90,.25);
  background: rgba(255,90,90,.10);
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

.checkoutNav{
  position: absolute;
  bottom: 0;
  z-index: 2;
  display:flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  width: 100%;
  justify-content: space-between;
}

/* Invoice */
.invoiceShell{ display:flex; flex-direction:column; gap: 12px; }
.invoiceHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.invoiceOrder,.invoiceStatus{ display:flex; gap: 14px; align-items:baseline; }
.invoiceOrder__label,.invoiceStatus__label{ color: rgba(255,255,255,.68); font-weight: 550; font-size: 12px; }
.invoiceOrder,.invoiceStatus{ min-width: 0; flex: 1 1 auto; }
.invoiceOrder__no{ font-weight: 600; letter-spacing: -.2px; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invoiceStatus__val{ font-weight: 600; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Paid-state checkmark that "morphs" into the header status line */
.invoiceStatus__icon{
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items:center; justify-content:center;
  border: 1px solid rgba(123,196,127,.34);
  background: rgba(123,196,127,.12);
  box-shadow: 0 0 0 6px rgba(123,196,127,.08);
  margin-left: 10px;
  opacity: 0; transform: scale(.72);
  transition: opacity .22s ease, transform .34s cubic-bezier(.2,.9,.2,1);
  flex: 0 0 auto;
}
.invoiceStatus__icon:before{
  content:"";
  width: 7px; height: 4px;
  border-left: 2px solid rgba(123,196,127,.98);
  border-bottom: 2px solid rgba(123,196,127,.98);
  transform: rotate(-45deg);
  margin-top: -1px;
}
.invoiceStatus__icon.is-on{ opacity: 1; transform: scale(1); }

/* Floating morph element (created in JS) */
.invMorphCheck{
  position: fixed;
  left: 0; top: 0;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(123,196,127,.98);
  background: rgba(10,18,14,.38);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 0 12px rgba(123,196,127,.10);
  display: flex; align-items: center; justify-content:center;
  z-index: 2147483646;
  pointer-events: none;
  will-change: transform, opacity;
}
.invMorphCheck:before{
  content:"";
  width: 10px; height: 6px;
  border-left: 3px solid rgba(123,196,127,.98);
  border-bottom: 3px solid rgba(123,196,127,.98);
  transform: rotate(-45deg);
  margin-top: -2px;
}
.invoiceTimer{ font-weight: 600; letter-spacing: -.2px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); transition: opacity .22s ease, transform .22s ease; }
.invoiceTimer.is-hidden{ opacity: 0; transform: translateY(-4px); pointer-events:none; }

@media (max-width: 520px){
  .invoiceTimer{ margin-left: auto; }
}

.invoiceGrid{ display:grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
.invoicePayCard{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.invoicePayCard__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.invoicePayCard__title{ font-weight: 600; margin-bottom: 10px; }
.invoicePayCard__top .invoicePayCard__title{ margin-bottom: 0; }

.invoiceCoinPill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); font-weight: 600; }
.invoiceCoinPill__icon{ width: 18px; height: 18px; display:grid; place-items:center; border-radius: 8px; background: rgba(0,0,0,.18); }
.invoiceCoinPill__text{ letter-spacing: -.2px; }
.invoiceAmount{ margin-top: 12px; }
.invoiceAmount__main{ font-weight: 600; font-size: 18px; letter-spacing: -.2px; }
.invoiceAmount__sub{ margin-top: 4px; color: rgba(255,255,255,.70); font-weight: 600; font-size: 12px; }

.invoiceAmount__main--click{ cursor:pointer; user-select: none; }
.invoiceAmount__main--click:active{ transform: scale(.995); }
.invoiceAddress__val--click{ cursor:pointer; user-select: text; }
.invoiceAddress__val--click:active{ transform: scale(.995); }

.invoiceAddress{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; align-items:stretch; }
.invoiceAddress__val{
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Invoice: visual left, KPIs right (no horizontal scroll) */
.invoicePaySplit{ margin-top: 12px; display:grid; grid-template-columns: 1fr; gap: 12px; align-items:start; }
.invoicePaySplit__left{ min-width: 0; }
.invoicePaySplit__right{ min-width: 0; display:flex; flex-direction:column; gap: 10px; }
.invoicePaySplit__actions{ display:flex; justify-content:flex-end; }
.invDetailsCount{ margin-left: 8px; display:inline-flex; align-items:center; justify-content:center; min-width: 22px; height: 18px; padding: 0 7px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: -.1px; color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); }
.invoicePaySplit__kpis{ display:grid; gap: 10px; }

/* Keep invoice columns from forcing horizontal scroll (grid/flex min-width fix) */
.invoiceGrid, .invoicePayCard, .invoiceItems, .invoiceDeliver{ min-width: 0; }
.invoicePaySplit__actions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* Remaining is copyable */
.invoiceRemain--click{ cursor:pointer; user-select:none; }
.invoiceRemain--click:active{ transform: scale(.995); }

/* Paid state: focus on next steps + actions (hide payment input chrome) */
.invoicePayCard.is-paid .invoicePayCard__top{ display:none; }
.invoicePayCard.is-paid .invoiceAmount{ display:none; }
.invoicePayCard.is-paid .invoiceAddress{ display:none; }
.invoicePayCard.is-paid .invoiceProgress{ display:none; }
.invoicePayCard.is-paid .invoicePaySplit__kpis{ display:none; }
.invoicePayCard.is-paid #invVisualStatus{ display:none !important; }
.invoicePayCard.is-paid #invVisualLabel{ display:none !important; }
.invoicePayCard.is-paid #invVisualHelp{ display:none !important; }

/* After the paid check morphs into the header, collapse the big visual so content lifts up */
.invoicePayCard.is-check-morphed .invoicePaySplit{ grid-template-columns: 1fr !important; }
.invoicePayCard.is-check-morphed .invoicePaySplit__left{ display:none !important; }
.invoicePayCard.is-check-morphed #invVisualWrap{
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  max-height: 0;
  overflow: hidden;
  transition: opacity .22s ease, transform .48s cubic-bezier(.2,.9,.2,1), max-height .28s ease;
}

/* Access quick row (Order + Guest key) */
.invoiceAccessQuick{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.invoiceAccessQuick__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.invoiceAccessQuick__title{ font-weight: 800; letter-spacing: -.2px; }
.invoiceAccessQuick__badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(255,170,70,.28);
  background: rgba(255,170,70,.12);
  color: rgba(255,225,190,.95);
}
.invoiceAccessQuick__row{ display:grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px){
  .invoiceAccessQuick__row{ grid-template-columns: 1fr 1fr; }
}
.invoiceAccessQuick__note{
  margin-top: 10px;
  color: rgba(255,255,255,.74);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.35;
}
.invoiceAccessQuick__actions{ margin-top: 10px; display:flex; gap: 8px; justify-content:flex-end; }

.copyChip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.copyChip:active{ transform: scale(.995); }
.copyChip__k{ font-weight: 750; color: rgba(255,255,255,.74); }
.copyChip__v{ font-weight: 850; letter-spacing: -.2px; min-width: 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copyChip__icon{ opacity: .85; }
.copyChip--mono .copyChip__v{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Invoice details: prevent address/tx overflow */
.invDetailsMeta__v{ min-width: 0; }
.invDetailsMeta__v--mono{ overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#invoiceDetailsModal .modal__body{ overflow-x:hidden; }

.invoicePaySplit__kpis .invoiceReceived,
.invoicePaySplit__kpis .invoiceRemain,
.invoicePaySplit__kpis .invoiceConfirm{ margin-top: 0; }
.invoicePaySplit .invoiceVisual{ margin-top: 0; }

@media (min-width: 560px){
  .invoicePaySplit{ grid-template-columns: minmax(0, 276px) minmax(0, 1fr); }
  .invoicePaySplit__actions{ justify-content:flex-start; }
}

@media (min-width: 980px){
  .invoiceGrid{ grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items:start; }
  .invoicePayCard{ grid-column: 1; grid-row: 1 / span 2; }
  .invoiceItems{ grid-column: 2; grid-row: 1; }
  .invoiceDeliver{ grid-column: 2; grid-row: 2; }
}

.invoiceReceived{ margin-top: 12px; display:flex; justify-content:space-between; align-items:baseline; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(123,196,127,.22); background: rgba(123,196,127,.10); }
.invoiceReceived__label{ font-weight: 550; color: rgba(234,255,234,.82); }
.invoiceReceived__val{ font-weight: 600; }

.invoiceRemain{ margin-top: 10px; display:flex; justify-content:space-between; align-items:baseline; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.invoiceRemain.is-over{ border-color: rgba(123,196,127,.22); background: rgba(123,196,127,.08); }
.invoiceRemain.is-over .invoiceRemain__label{ color: rgba(234,255,234,.82); }
.invoiceRemain.is-under{ border-color: rgba(255,116,116,.26); background: rgba(255,116,116,.08); }
.invoiceRemain.is-under .invoiceRemain__label{ color: rgba(255,200,200,.85); }
.invoiceRemain__label{ font-weight: 550; color: rgba(255,255,255,.78); }
.invoiceRemain__val{ font-weight: 600; }

.invoiceConfirm{ margin-top: 10px; display:flex; justify-content:space-between; align-items:baseline; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.invoiceConfirm__label{ font-weight: 550; color: rgba(255,255,255,.78); }
.invoiceConfirm__val{ font-weight: 600; }

.invoiceSpinner{ margin-top: 12px; display:flex; gap: 10px; align-items:center; color: rgba(255,255,255,.74); font-weight: 550; }

/* Invoice QR → Awaiting → Confirmed visual state (same size box) */
.invoiceVisual{ margin-top: 12px; display:flex; flex-direction:column; align-items:center; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); transition:opacity .18s ease,transform .18s ease,max-height .18s ease,margin .18s ease,padding .18s ease,border-width .18s ease; }
.invoiceVisual.is-hidden{ opacity:0; transform:scale(.985); max-height:0; margin-top:0; padding-top:0; padding-bottom:0; border-width:0; }
.invoiceVisual__box{ position:relative; display:grid; place-items:center; }
.invoiceVisual__state{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.992);
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  border-radius: 16px;
  background: radial-gradient(110% 110% at 50% 20%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 52%),
              radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 55%);
}
.invoiceVisual__state.is-on{ opacity:1; transform:scale(1); }

/* Full-square ring spinner → green progress ring → centered check (no bottom shift) */
.invStateSvg{ width: 100%; height: 100%; padding: 18px; overflow: visible; backface-visibility: hidden; transform: translateZ(0); }
.invStateRing{ transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); will-change: transform; backface-visibility: hidden; }
.invStateBg{ fill:none; stroke: rgba(255,255,255,.10); stroke-width: 8; }
.invStateFg{ fill:none; stroke: rgba(123,196,127,.92); stroke-width: 8; stroke-linecap: round;
  /* stable spinner: fixed dash + ring rotation (no dash animation jump) */
  stroke-dasharray: 96 289;
  stroke-dashoffset: 0;
}
.invoiceVisual__state.is-on:not(.is-complete) .invStateRing{ animation: invArcSpin .86s linear infinite; }
.invoiceVisual__state.is-on:not(.is-complete) .invStateFg{ animation: none; }

.invoiceVisual__state.is-complete .invStateRing{ animation:none; }
.invoiceVisual__state.is-complete .invStateFg{
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  animation: invRingFill .92s cubic-bezier(.2,.8,.2,1) forwards;
}

.invStateCheck{ fill:none; stroke: rgba(123,196,127,.96); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  transform-origin: 60px 60px;
  transform: scale(.96);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.28));
}
.invoiceVisual__state.is-complete .invStateCheck{ animation: invCheckDraw .46s .68s cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes invArcSpin{ from{ transform: rotate(-90deg); } to{ transform: rotate(270deg); } }
@keyframes invRingFill{ to{ stroke-dashoffset: 0; } }
@keyframes invCheckDraw{ 0%{ opacity:0; stroke-dashoffset: 76; transform: scale(.96);} 100%{ opacity:1; stroke-dashoffset:0; transform: scale(1);} }

/* YouTube-style arc spinner (transparent background, brand accent) */
.invSpin{ width: 66px; height: 66px; border-radius: 999px; position:relative; will-change: transform; filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.invSpin::before{ content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: inset 0 0 0 5px rgba(255,255,255,.10); }
.invSpin::after{ content:""; position:absolute; inset:0; border-radius: inherit;
  background: conic-gradient(from 0deg,
    rgba(123,196,127,0) 0deg,
    rgba(123,196,127,.92) 48deg,
    rgba(123,196,127,.20) 78deg,
    rgba(123,196,127,0) 142deg,
    rgba(123,196,127,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: invYt 0.86s linear infinite;
}
.invSpin--lg{ width: 74px; height: 74px; }
.invSpin--lg::before{ box-shadow: inset 0 0 0 6px rgba(255,255,255,.10); }
.invSpin--lg::after{
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}
@keyframes invYt{ to{ transform: rotate(360deg); } }


.invoiceVisual__status{ display:flex; align-items:center; justify-content:center; gap: 10px; color: rgba(255,255,255,.74); font-weight: 650; font-size: 12px; letter-spacing: -.1px; }
.invoiceVisual__statusText{ color: rgba(255,255,255,.74); }
.invoiceVisual__statusCheck{ width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(123,196,127,.45); background: rgba(123,196,127,.14); display:none; position:relative; }
.invoiceVisual__statusCheck::before{ content:""; position:absolute; left: 4px; top: 6px; width: 6px; height: 3px; border-left: 2px solid rgba(123,196,127,.96); border-bottom: 2px solid rgba(123,196,127,.96); transform: rotate(-45deg); }
.invoiceVisual__statusCheck.is-on{ display:block; animation: invPop .28s cubic-bezier(.2,.8,.2,1); }
.invoiceVisual__label{ font-weight: 650; color: rgba(255,255,255,.86); text-align:center; }
.invoiceVisual__help{ max-width: 360px; text-align:center; color: rgba(255,255,255,.68); font-weight: 600; font-size: 12px; line-height: 1.35; }

/* Smooth cross-fade between QR and state (keep white surface visible) */
#invQrBox{ transition:transform .46s cubic-bezier(.2,.8,.2,1); }
#invQrBox canvas,#invQrBox img{ transition:opacity .46s cubic-bezier(.2,.8,.2,1),transform .46s cubic-bezier(.2,.8,.2,1),filter .46s cubic-bezier(.2,.8,.2,1); }
#invQrBox.is-off{ transform:scale(.996); }
#invQrBox.is-off canvas,#invQrBox.is-off img{ opacity:0; transform:scale(.985); filter: blur(10px) saturate(.86) brightness(1.02); }
#invQrBox.is-off::after{ content:""; position:absolute; inset:-10px; border-radius: inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 100%);
  mix-blend-mode: overlay; opacity:.75; animation: invQrScan .62s cubic-bezier(.2,.8,.2,1) 1;
}

/* When showing state (confirming/paid/restoring) remove the white QR surface entirely */
.invoiceQr__box.is-state{ background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.10); box-shadow: 0 18px 60px rgba(0,0,0,.32); }
.invoiceQr__box.is-state::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 18px 44px rgba(0,0,0,.16); }
#invQrBox.is-state.is-off::after{ display:none; }

/* Invoice details modal */
.invoiceDetailsModal .modal__panel{ max-width: 860px; }
.invDetailsCard{ padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.invDetailsMeta{ display:grid; gap: 8px; }
.invDetailsMeta__row{ display:grid; grid-template-columns: 112px minmax(0, 1fr); align-items:flex-start; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.invDetailsMeta__row:last-child{ border-bottom: 0; }
.invDetailsMeta__k{ font-weight: 650; font-size: 12px; color: rgba(255,255,255,.70); }
.invDetailsMeta__v{ font-weight: 650; font-size: 12px; color: rgba(255,255,255,.92); text-align:right; justify-self:end; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break: break-word; }
.invDetailsMeta__v--mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; }

.invDetailsTx{ margin-top: 12px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.invDetailsTx__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.invDetailsTx__title{ font-weight: 700; letter-spacing: -.2px; }
.invDetailsTx__empty{ font-size: 12px; color: rgba(255,255,255,.70); padding: 8px 2px; }
.invDetailsTx__list{ display:grid; gap: 10px; }
.invDetailsTxRow{ display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:flex-start; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.invDetailsTxRow__left{ min-width:0; display:flex; flex-direction:column; gap: 6px; }
.invDetailsTxRow__id{ min-width:0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; word-break:break-all; }
.invDetailsTxRow__meta{ font-size: 12px; line-height: 1.2; color: rgba(255,255,255,.70); font-weight: 650; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; word-break: break-word; }

/* (legacy morph rules removed; invoice state uses the new full-square ring + check above) */
@media (prefers-reduced-motion: reduce){
  .invoiceVisual,.invoiceVisual__state,#invQrBox,.invStateRing,.invStateFg,.invStateCheck,.invSpin{ transition:none!important; animation:none!important; }
  .invSpin::before,.invSpin::after,#invQrBox.is-off::after{ animation:none!important; }
}

.invoiceQr{ margin-top: 12px; display:grid; place-items:center; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.invoiceQr{transition:opacity .18s ease,transform .18s ease,max-height .18s ease,margin .18s ease,padding .18s ease,border-width .18s ease}
.invoiceQr.is-hidden{opacity:0;transform:scale(.98);max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0}

/* Larger + quiet-zone friendly QR for better wallet scanning (Cake Wallet etc.) */
.invoiceQr__box{ width: 240px; height: 240px; padding: 12px; border-radius: 16px; overflow:hidden; position:relative;
  /* Pure white QR surface so it never looks "dirty" on dark UI */
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(17,18,20,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.invoiceQr__box::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), inset 0 -24px 44px rgba(250,244,234,.22);
}
.invoiceQr__box canvas,.invoiceQr__box img{ width: 100%; height: 100%; display:block; position:relative; z-index:1; }
@media (max-width: 420px){ .invoiceQr__box{ width: 216px; height: 216px; padding: 10px; } }
.invoiceProgress.passMeter{ margin-top: 12px; }

.spinner{ width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.82); animation: spin 0.9s linear infinite; }
.spinner--sm{ width: 14px; height: 14px; border-width: 2px; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes invPop{ from{ transform: scale(.85); opacity:.0; } to{ transform: scale(1); opacity:1; } }
@keyframes invQrScan{ 0%{ opacity:0; transform: translateY(18px); } 20%{ opacity:.9; } 80%{ opacity:.9; } 100%{ opacity:0; transform: translateY(-18px); } }

.invoiceActions{ margin-top: 12px; display:flex; gap: 10px; }

.invoiceWindowNote{ margin-top: 8px; color: rgba(255,255,255,.66); font-weight: 600; font-size: 12px; }

.invoiceGuestKey{ margin-top: 12px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.invoiceGuestKey.is-attn{ border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.invoiceGuestKey__label{ font-weight: 550; color: rgba(255,255,255,.78); font-size: 12px; }
.invoiceGuestKey__meta{ margin-top: 8px; display:flex; gap: 10px; flex-wrap: wrap; }
.invoiceGuestKey__metaItem{ display:flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); max-width: 100%; }
.invoiceGuestKey__metaK{ font-size: 12px; color: rgba(255,255,255,.70); font-weight: 600; }
.invoiceGuestKey__metaV{ font-size: 12px; color: rgba(255,255,255,.92); font-weight: 700; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoiceGuestKey__row{ margin-top: 8px; display:flex; gap: 10px; align-items:center; }
.invoiceGuestKey__val{ flex:1; min-width:0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; overflow:hidden; text-overflow: ellipsis; }

.invoiceDeliver{ margin-top: 12px; padding: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.invoiceDeliver__title{ font-weight: 600; margin-bottom: 8px; }
.invoiceDeliver__val{ color: rgba(255,255,255,.84); font-weight: 550; line-height: 1.35; white-space: pre-line; overflow-wrap:anywhere; word-break:break-word; }
.invoiceDeliver__meta{ margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); display: grid; gap: 6px; }
.invoiceDeliver__metaRow{ font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.78); }
.invoiceDeliver__metaRow--eta{ color: rgba(255,255,255,.88); font-weight: 550; }
.invoiceDeliver__notes{ margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.invoiceDeliver__notesLabel{ font-weight: 600; color: rgba(255,255,255,.72); margin-bottom: 4px; }

.invoiceItems{ border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); padding: 12px; }
.invoiceItems__title{ font-weight: 600; margin-bottom: 10px; }
.invoiceItems__list{ display:flex; flex-direction:column; gap: 10px; }
.invoiceItemRow{ display:flex; justify-content:space-between; gap: 10px; padding: 10px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.invoiceItemRow__left{ min-width:0; }
.invoiceItemRow__title{ font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invoiceItemRow__sub{ margin-top: 2px; color: rgba(255,255,255,.72); font-weight: 600; font-size: 12px; }
.invoiceItemRow__right{ font-weight: 600; white-space:nowrap; }

.invoiceItems__list{ display:flex; flex-direction:column; gap: 10px; }

.invoiceItemCard{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.invoiceItemCard__thumb{
  width: 56px; height: 56px;
  border-radius: 16px;
  overflow:hidden;
  position:relative;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.22), rgba(255,255,255,.06));
}
.invoiceItemCard__img{ width:100%; height:100%; object-fit:cover; display:block; }
.invoiceItemCard__thumbFallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity: 0;
  transition: opacity .18s ease;
  color: rgba(255,255,255,.86);
}
.invoiceItemCard__thumbFallback.is-on{ opacity: 1; }
.invoiceItemCard__thumbFallback svg{ width: 26px; height: 26px; opacity: .85; }
.invoiceItemCard__meta{ min-width:0; flex: 1; }
.invoiceItemCard__title{
  font-weight: 800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.invoiceItemCard__subRow{
  margin-top: 4px;
  display:flex;
  align-items:center;
  gap: 8px;
  min-width:0;
  flex-wrap:wrap;
}
.invoiceItemCard__variant{
  min-width:0;
  max-width: 100%;
  color: rgba(255,255,255,.72);
  font-weight: 650;
  font-size: 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.invoiceItemCard__qtyChip{
  display:inline-flex;
  align-items:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  font-weight: 850;
  font-size: 12px;
  white-space:nowrap;
}
.invoiceItemCard__price{
  font-weight: 900;
  white-space:nowrap;
  margin-left: 6px;
}

@media (max-width: 420px){
  .invoiceItemCard{ align-items:flex-start; }
  .invoiceItemCard__price{ padding-top: 1px; }
}

.invoiceTotals{ margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.10); }
.invoiceTotals__row{ display:flex; justify-content:space-between; padding: 7px 4px; font-weight: 600; }


/* ===== Profile > More: Invoices ===== */
.profileSection__titleRow{ display:flex; align-items:center; gap:10px; margin: 2px 0 10px; }
.profileSection__titleIcon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color: var(--sup-muted); }
.profileSection__titleIcon svg{ width:18px; height:18px; display:block; }

.invoiceTableWrap{ width:100%; border:1px solid var(--sup-line); border-radius:14px; overflow:hidden; background: var(--sup-surface2); }
.invoiceTable{ width:100%; border-collapse:separate; border-spacing:0; }
.invoiceTh{ text-align:left; font-size:12px; letter-spacing:.02em; color: var(--sup-muted); padding: 10px 12px; background: rgba(255,255,255,.03); border-bottom:1px solid var(--sup-line); }
html[data-theme="light"] .invoiceTh{ background: rgba(0,0,0,.03); }
.invoiceTh--total{ text-align:right; }

.invoiceSortBtn{ appearance:none; border:0; background:transparent; color: var(--sup-muted); font: inherit; padding: 0; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.invoiceSortBtn:hover{ color: var(--sup-text); }
.invoiceSortBtn.is-active{ color: var(--sup-text); }
.invoiceSortBtn__dir{ width: 10px; height: 10px; display:inline-block; position:relative; opacity:.8; }
.invoiceSortBtn.is-active[data-dir="asc"] .invoiceSortBtn__dir::before{ content:"↑"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; }
.invoiceSortBtn.is-active[data-dir="desc"] .invoiceSortBtn__dir::before{ content:"↓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; }

.invoiceCell{ padding: 10px 12px; border-bottom:1px solid var(--sup-line); vertical-align:top; }
.invoiceCell--total{ text-align:right; white-space:nowrap; }
.invoiceRow{ cursor:pointer; outline:none; }
.invoiceRow:hover .invoiceCell{ background: rgba(255,255,255,.04); }
html[data-theme="light"] .invoiceRow:hover .invoiceCell{ background: rgba(0,0,0,.03); }
.invoiceRow:focus-visible .invoiceCell{ box-shadow: inset 0 0 0 2px rgba(123,196,127,.35); }
.invoiceRow:last-child .invoiceCell{ border-bottom:none; }

.invoiceNo{ font-weight: 600; letter-spacing: -.2px; color: var(--sup-text); }
.invoiceItemsPreview{ margin-top: 3px; font-size: 12px; color: var(--sup-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }

.statusPill{ display:inline-flex; align-items:center; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--sup-line); background: rgba(255,255,255,.03); color: var(--sup-text); white-space: nowrap; }
html[data-theme="light"] .statusPill{ background: rgba(0,0,0,.03); }
.statusPill--ok{ border-color: rgba(123,196,127,.35); background: rgba(123,196,127,.10); }
.statusPill--warn{ border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.10); }
.statusPill--bad{ border-color: rgba(244,67,54,.35); background: rgba(244,67,54,.10); }
.statusPill--info{ border-color: rgba(150,150,150,.28); }

.invoiceEmpty{ color: var(--sup-muted); padding: 10px 2px 0; font-size: 13px; }

/* Invoice detail view */
.profileSection--invoiceDetail{ padding-top: 8px; }
.invoiceDetailTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.invoiceDetailTop__title{ font-weight: 600; letter-spacing: -.3px; color: var(--sup-text); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.backbtn--mini{ width: 36px; height: 36px; border-radius: 12px; }

.invoiceDetailCard{ border:1px solid var(--sup-line); border-radius: 16px; background: var(--sup-surface2); padding: 12px; }
.invoiceMeta{ display:flex; flex-direction:column; gap: 6px; }
.invoiceMeta__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; }
.invoiceMeta__label{ font-size: 12px; color: var(--sup-muted); }
.invoiceMeta__value{ font-size: 13px; color: var(--sup-text); font-weight: 600; text-align:right; }

.invoiceBlock{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.10); }
html[data-theme="light"] .invoiceBlock{ border-top-color: rgba(0,0,0,.10); }
.invoiceBlock__title{ font-size: 12px; color: var(--sup-muted); letter-spacing: .02em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }

.invoiceItem{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
html[data-theme="light"] .invoiceItem{ border-bottom-color: rgba(0,0,0,.08); }
.invoiceItem:last-child{ border-bottom: none; padding-bottom: 0; }
.invoiceItem__title{ font-weight: 600; color: var(--sup-text); }
.invoiceItem__sub{ margin-top: 2px; font-size: 12px; color: var(--sup-muted); }
.invoiceItem__right{ white-space: nowrap; font-weight: 600; color: var(--sup-text); }

.invoiceDelivery{ color: var(--sup-text); font-size: 13px; line-height: 1.35; }

.shipSummary{display:flex;flex-direction:column;gap:6px}
.shipSummary__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.shipSummary__method{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shipSummary__price{font-weight:600;white-space:nowrap}
.shipSummary__to{font-size:12px;color:var(--sup-muted);font-weight:550;line-height:1.25}
.shipSummary__addr{display:flex;flex-direction:column;gap:2px}
.shipSummary__line{font-size:13px;color:var(--sup-text);line-height:1.35;word-break:break-word}
@media (max-width:520px){.shipSummary__method{white-space:normal}}

.invoiceNotes{ color: var(--sup-text); font-size: 13px; line-height: 1.35; white-space: pre-wrap; }

@media (max-width: 520px){
  .invoiceTable thead{ display:none; }
  .invoiceTable, .invoiceTable tbody, .invoiceTable tr, .invoiceTable td{ display:block; width:100%; }
  .invoiceRow{ padding: 10px 12px; }
  .invoiceCell{ border: none; padding: 0; }
  .invoiceCell--main{ margin-bottom: 10px; }
  .invoiceCell--date, .invoiceCell--status, .invoiceCell--total{ display:flex; justify-content:space-between; align-items:center; padding: 6px 0; }
  .invoiceCell--date::before{ content: "Date"; font-size: 12px; color: var(--sup-muted); }
  .invoiceCell--status::before{ content: "Status"; font-size: 12px; color: var(--sup-muted); }
  .invoiceCell--total::before{ content: "Total"; font-size: 12px; color: var(--sup-muted); }
  .invoiceItemsPreview{ white-space: normal; max-width: none; }
}

/* ---------- Profile > More tabs (Updates / Orders) ---------- */
.profileSection--more{padding-top:6px}
.moreHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.moreHead__title{font-size:18px;font-weight:600;letter-spacing:-.02em}
.moreTabs{display:flex;gap:8px;flex-wrap:wrap}
.moreTab{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(245,247,250,.92);padding:8px 10px;border-radius:999px;font-weight:550;font-size:12.5px;letter-spacing:-.01em;line-height:1;transition:transform .12s ease, background .12s ease, border-color .12s ease}
.moreTab:hover{transform:translateY(-1px)}
.moreTab.is-active{background:rgba(123,196,127,.18);border-color:rgba(123,196,127,.35)}
.morePane[hidden]{display:none !important}

.updatesList,.ordersList{display:flex;flex-direction:column;gap:10px}
.notificationsEntryCard{
  display:grid;gap:12px;padding:16px 18px;border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 18px 36px rgba(0,0,0,.14);
}
.notificationsEntryCard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.notificationsEntryCard__copy{display:grid;gap:6px;min-width:0}
.notificationsEntryCard__eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,233,192,.92)}
.notificationsEntryCard__title{font-size:18px;font-weight:760;letter-spacing:-.02em;color:rgba(245,247,250,.96)}
.notificationsEntryCard__sub{font-size:12.75px;line-height:1.6;color:rgba(245,247,250,.72);max-width:62ch}
.notificationsEntryCard__pills{display:flex;flex-wrap:wrap;gap:8px}
.notificationsEntryCard .btn{align-self:flex-start;white-space:nowrap}

.notificationsInlineMain[hidden],
#notificationsInlineWrap[hidden]{display:none !important}
.notificationsInlineView{
  display:grid;gap:16px;padding:16px;border-radius:26px;
  background:
    radial-gradient(720px 260px at 8% -10%, rgba(123,196,127,.18), transparent 55%),
    radial-gradient(920px 340px at 100% 0%, rgba(255,219,143,.12), transparent 62%),
    linear-gradient(180deg, rgba(8,14,11,.985), rgba(13,22,17,.975));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 96px rgba(0,0,0,.26);
  backdrop-filter:blur(18px);
}
.notificationsInlineView__top{display:flex;align-items:center;gap:12px}
.notificationsInlineView__title{font-size:18px;font-weight:780;letter-spacing:-.02em;color:rgba(245,247,250,.96)}
.notificationsInlineView__body{display:grid;gap:16px}
html[data-theme="light"] .notificationsInlineView{
  background:
    radial-gradient(720px 260px at 8% -10%, rgba(123,196,127,.17), transparent 55%),
    radial-gradient(920px 340px at 100% 0%, rgba(255,219,143,.14), transparent 62%),
    linear-gradient(180deg, rgba(252,248,242,.99), rgba(244,239,231,.985));
  border-color:rgba(15,23,42,.08);
  box-shadow:0 28px 72px rgba(15,23,42,.10);
}
html[data-theme="light"] .notificationsInlineView__title{color:rgba(15,27,20,.94)}
.ordersSectionTitle{margin:6px 2px -2px;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,247,250,.60)}
html[data-theme="light"] .ordersSectionTitle{color:rgba(0,0,0,.50)}
.orderQuickRow{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.profileSection--orderDetail .invoiceBlock.is-flash{position:relative;animation:pfBlockFlash .9s ease}
@keyframes pfBlockFlash{0%{filter:drop-shadow(0 0 0 rgba(123,196,127,0));}35%{filter:drop-shadow(0 0 8px rgba(123,196,127,.22));}100%{filter:drop-shadow(0 0 0 rgba(123,196,127,0));}}
.updateCard,.orderCard{border:1px solid var(--sup-line);background:var(--sup-surface2);border-radius:16px;padding:12px 12px 10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch;cursor:pointer;transition:transform .12s ease, border-color .12s ease, background .12s ease}
.updateCard:hover,.orderCard:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.updateCard__row,.orderCard__row{display:flex;gap:10px;align-items:flex-start;min-width:0;width:100%}
.updateDot,.orderDot{width:10px;height:10px;border-radius:999px;background:rgba(123,196,127,.9);margin-top:6px;flex:0 0 auto;box-shadow:0 0 0 4px rgba(123,196,127,.12)}
.updateDot.is-read,.orderDot.is-read{background:rgba(255,255,255,.26);box-shadow:none}
.updateMain,.orderMain{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.updateTop,.orderTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.updateTitle,.orderTitle{font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.updateMeta,.orderMeta{font-size:12px;color:rgba(245,247,250,.55);white-space:nowrap}
.updateBody{font-size:13px;color:rgba(245,247,250,.82);line-height:1.35;white-space:pre-line;word-break:break-word}
.updateBody--preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.updateExpand,.orderExpand{display:flex;flex-direction:column;gap:10px;margin-left:20px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.10)}
.updateExpand[hidden],.orderExpand[hidden]{display:none !important}
.updateExpand__body,.orderExpand__body{font-size:13px;line-height:1.6;color:rgba(245,247,250,.84);white-space:pre-line;word-break:break-word}
.updateExpand__meta,.orderExpand__meta{font-size:12px;line-height:1.5;color:rgba(245,247,250,.62)}
.updateExpand__actions,.orderExpand__actions{display:flex;gap:8px;flex-wrap:wrap}
.updateCaret,.orderCaret{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(245,247,250,.74);font-size:12px;line-height:1;transition:transform .12s ease, border-color .12s ease, background .12s ease}
.updateCard.is-expanded .updateCaret,.orderCard.is-expanded .orderCaret{transform:rotate(180deg);border-color:rgba(123,196,127,.24);background:rgba(123,196,127,.10);color:rgba(245,247,250,.92)}
.orderBadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.orderBadge{font-size:11.5px;font-weight:550;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(245,247,250,.88)}
.orderBadge--warn{background:rgba(255,183,77,.12);border-color:rgba(255,183,77,.22)}
.orderBadge--ok{background:rgba(123,196,127,.14);border-color:rgba(123,196,127,.24)}
.orderBadge--bad{background:rgba(244,67,54,.12);border-color:rgba(244,67,54,.22)}

.orderItemsPreview{margin-top:2px;font-size:13px;color:rgba(245,247,250,.78);line-height:1.25;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.orderShipBrief{margin-top:4px;font-size:12px;color:rgba(245,247,250,.68);font-weight:550;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[data-theme="light"] .orderShipBrief{color:rgba(0,0,0,.55)}
html[data-theme="light"] .notificationsEntryCard{
  border-color:rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.82));
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}
html[data-theme="light"] .notificationsEntryCard__eyebrow{color:rgba(112,79,0,.92)}
html[data-theme="light"] .notificationsEntryCard__title{color:rgba(15,27,20,.94)}
html[data-theme="light"] .notificationsEntryCard__sub{color:rgba(15,27,20,.68)}

.orderConfirmMini{margin-top:8px;border-top:1px dashed rgba(255,255,255,.10);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.orderConfirmMini__actions{display:flex;gap:8px;flex-wrap:wrap}
.orderConfirmMini__hint{font-size:12px;color:rgba(245,247,250,.62);line-height:1.25}

.profileModal .orderConfirmMini .pillBtn{padding:6px 10px;font-size:12px;line-height:1}
.profileModal .orderConfirmMini .pillBtn--solid{background:rgba(123,196,127,.18);border-color:rgba(123,196,127,.35)}

.orderConfirmBox{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04);padding:12px;display:flex;flex-direction:column;gap:10px}
.orderConfirmBox__lead{font-weight:600;letter-spacing:-.01em}
.orderConfirmBox__meta{font-size:12px;color:rgba(245,247,250,.60);line-height:1.3}
.orderConfirmBox__actions{display:flex;gap:10px;flex-wrap:wrap}
.orderConfirmBox__hint{font-size:12px;color:rgba(245,247,250,.70);line-height:1.35}

@media (max-width: 560px){
  .orderConfirmBox__actions{gap:8px}
}


.orderInvoices{display:flex;flex-direction:column;gap:8px}
.orderInvoiceRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04);cursor:pointer}
.orderInvoiceRow:hover{border-color:rgba(255,255,255,.18)}
.orderInvoiceRow__l{display:flex;flex-direction:column;gap:2px;min-width:0}
.orderInvoiceRow__t{font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderInvoiceRow__s{font-size:12px;color:rgba(245,247,250,.55)}
.orderInvoiceRow__r{font-weight:600;color:rgba(245,247,250,.92);white-space:nowrap}

/* Order detail info box */
.orderInfo{margin:10px 0 0;border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);color:rgba(245,247,250,.86);font-size:13px;line-height:1.35}

.updateCard--static{cursor:default}
.updateCard--static .updateExpand,.updateCard--static .orderExpand{margin-left:0;padding-top:0;border-top:0}

html[data-theme="light"] .updateExpand,
html[data-theme="light"] .orderExpand{border-top-color:rgba(0,0,0,.08)}
html[data-theme="light"] .updateExpand__body,
html[data-theme="light"] .orderExpand__body{color:rgba(0,0,0,.76)}
html[data-theme="light"] .updateExpand__meta,
html[data-theme="light"] .orderExpand__meta{color:rgba(0,0,0,.52)}
html[data-theme="light"] .updateCaret,
html[data-theme="light"] .orderCaret{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.03);color:rgba(0,0,0,.64)}

@media (max-width: 560px){
  .updateCard__row,.orderCard__row{gap:8px}
  .updateExpand,.orderExpand{margin-left:0}
  .updateCaret,.orderCaret{width:28px;height:28px}
}

/* Order payment block */
.orderPayment{min-width:0}
.orderPay{display:flex;flex-direction:column;gap:10px}
.orderPayTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.orderPayTitle{font-weight:600;letter-spacing:-.015em}
.orderPayAddr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.orderPayAddr__label{font-size:12px;color:rgba(245,247,250,.55)}
.orderPayAddr__val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;cursor:pointer;padding:6px 10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.04)}
.orderPayGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.orderPayStat{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04);padding:10px 10px 9px;min-width:0}
.orderPayStat__k{font-size:11.5px;color:rgba(245,247,250,.55)}
.orderPayStat__v{margin-top:2px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderPayMeta{font-size:12.5px;color:rgba(245,247,250,.72)}
.orderPayTxs{margin-top:2px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.10);display:flex;flex-direction:column;gap:8px}
.orderPayTxTitle{font-weight:600;opacity:.9}
.orderPayTx{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.orderPayTx__coin{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.orderPayTx__id{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;cursor:pointer}
.orderPayTx__amt{font-size:12px;color:rgba(245,247,250,.86)}
.orderPayTx__conf{font-size:12px;color:rgba(245,247,250,.70)}

@media (max-width: 560px){
  .orderPayGrid{grid-template-columns:1fr;}
}

/* Order timeline */
.orderTimeline{margin-top:6px}
.otl{display:flex;flex-direction:column;gap:10px}
.otl__step{display:flex;gap:10px;align-items:flex-start}
.otl__dot{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);flex:0 0 24px}
.otl__main{flex:1;min-width:0}
.otl__label{font-weight:600;letter-spacing:.2px}
.otl__note{margin-top:2px;color:rgba(255,255,255,.72);font-size:12px}
.otl__step.is-done .otl__dot{border-color:rgba(123,198,143,.35);background:rgba(123,198,143,.14)}
.otl__step.is-cur .otl__dot{border-color:rgba(255,216,153,.35);background:rgba(255,216,153,.14)}
.otl__check{color:rgba(123,198,143,.95);font-weight:600;transform:translateY(-1px)}
.otl__bullet{opacity:.75}
.otl__txs{margin-top:6px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.10);display:flex;flex-direction:column;gap:8px}
.otl__txTitle{font-weight:600;opacity:.9}
.otlTx{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.otlTx__coin{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.otlTx__id{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;cursor:pointer}
.otlTx__conf{font-size:12px;color:rgba(255,255,255,.70)}

/* --- Stage 8: Support guest attach panel (unified support) --- */
.supportGuest{ margin: 12px 8px 0; padding: 10px; border-radius: 16px; border: 1px solid var(--sup-line2, rgba(255,255,255,.12)); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); backdrop-filter: blur(10px); }
.supportGuest__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.supportGuest__pill{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; border:1px solid var(--sup-line2, rgba(255,255,255,.14)); background: rgba(0,0,0,.14); color: var(--sup-muted, rgba(234,240,255,.78)); }
.supportGuest__barRight{ display:flex; gap:8px; align-items:center; }

.supportGuest__snap{ margin-top:10px; padding:10px; border-radius:14px; border:1px solid var(--sup-line, rgba(255,255,255,.10)); background: rgba(0,0,0,.18); }
.supportGuest__snapGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.supportGuest__k{ font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.62)); }
.supportGuest__v{ margin-top:2px; font-size:13px; font-weight:600; letter-spacing:-.01em; color: var(--sup-text, rgba(234,240,255,.96)); }
.supportGuest__snapMeta{ margin-top:8px; font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.62)); }

.supportGuest__attach{ margin-top:10px; padding:10px; border-radius:14px; border:1px dashed var(--sup-line2, rgba(255,255,255,.14)); background: rgba(0,0,0,.12); }
.supportGuest__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.supportGuest__grid--otp{ grid-template-columns: 1fr auto; align-items:end; }
.supportGuest__otpBtn{ display:flex; align-items:flex-end; }
.supportGuest__otpBtn .btn{ width:100%; }
.supportGuest__actions{ display:flex; gap:10px; margin-top:10px; }
.supportGuest__actions .btn{ flex: 1; }
.supportGuest__msg{ margin-top:10px; font-size:12px; color: var(--sup-muted2, rgba(234,240,255,.62)); min-height: 18px; }
.supportGuest__msg.is-error{ color: rgba(255,84,84,.92); }
.supportGuest__msg.is-ok{ color: rgba(57,217,138,.92); }
.supportGuest__hint{ margin-top:8px; font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.58)); line-height:1.35; }
.supportGuest__recover{ margin-top:10px; }
.supportGuest__recoverToggle{ width:100%; text-align:left; padding:10px 10px; border-radius:12px; border:1px solid var(--sup-line2, rgba(255,255,255,.14)); background: rgba(0,0,0,.10); color: var(--sup-text, rgba(234,240,255,.92)); font-size:12px; font-weight:600; cursor:pointer; }
.supportGuest__recoverToggle:hover{ background: rgba(0,0,0,.14); }
.supportGuest__recoverBox{ margin-top:10px; display:grid; grid-template-columns: 1fr; gap:10px; }


.supportChatEmpty{ padding:18px 14px; margin: 10px 8px; border-radius:16px; border:1px dashed rgba(255,255,255,.14); background: rgba(0,0,0,.12); text-align:center; }
.supportChatEmpty__title{ font-weight:600; letter-spacing:-.02em; color: rgba(234,240,255,.92); }
.supportChatEmpty__sub{ margin-top:6px; font-size:12px; line-height:1.35; color: rgba(234,240,255,.64); }

.supportAttachOrderSheet{ position:absolute; inset:0; display:none; z-index: 30; }
.supportAttachOrderSheet.is-open{ display:block; }
.supportAttachOrderSheet__scrim{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.supportAttachOrderSheet__panel{ position:absolute; left:10px; right:10px; bottom:10px; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(16,26,51,.98), rgba(10,14,28,.98)); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.supportAttachOrderSheet__handle{ width:46px; height:5px; border-radius:999px; background: rgba(255,255,255,.22); margin: 0 auto 10px; }
.supportAttachOrderSheet__title{ font-size:13px; font-weight:600; letter-spacing:-.01em; color: rgba(234,240,255,.92); margin-bottom:10px; }
.supportAttachOrderSheet__actions{ display:flex; gap:10px; margin-top:10px; }
.supportAttachOrderSheet__actions .btn{ flex:1; }
.supportAttachOrderSheet__msg{ margin-top:10px; font-size:12px; color: rgba(234,240,255,.64); min-height:18px; }
.supportAttachOrderSheet__msg.is-error{ color: rgba(255,84,84,.92); }
.supportAttachOrderSheet__msg.is-ok{ color: rgba(57,217,138,.92); }

.supportAttachOrderPicker{ margin-top: 12px; }
.supportAttachOrderPicker__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.supportAttachOrderPicker__title{ font-size:12px; font-weight:700; letter-spacing:-.01em; color: rgba(234,240,255,.92); }
.supportAttachOrderPicker__hint{ font-size:11px; color: rgba(234,240,255,.62); text-align:right; }
.supportAttachOrderSuggest{ margin-top:0; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); overflow:hidden; max-height: 220px; overflow:auto; }
.supportAttachOrderSuggest__row{ width:100%; border:0; background: transparent; color: rgba(234,240,255,.92); padding:10px 12px; display:flex; gap:10px; align-items:flex-start; justify-content:space-between; cursor:pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.supportAttachOrderSuggest__row + .supportAttachOrderSuggest__row{ border-top:1px solid rgba(255,255,255,.10); }
.supportAttachOrderSuggest__row:hover{ background: rgba(255,255,255,.06); }
.supportAttachOrderSuggest__left{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.supportAttachOrderSuggest__oid{ font-weight:600; font-size:12px; letter-spacing:-.01em; }
.supportAttachOrderSuggest__meta{ font-size:11px; color: rgba(234,240,255,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 360px; }
.supportAttachOrderSuggest__right{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.supportAttachOrderSuggest__amt{ font-weight:600; font-size:12px; }
.supportAttachOrderSuggest__st{ font-size:11px; color: rgba(234,240,255,.62); }
.supportAttachOrderSuggest__pick{ margin-top:4px; padding:4px 10px; border-radius:999px; border:1px solid rgba(123,196,127,.22); background: rgba(123,196,127,.10); color: rgba(234,255,234,.92); font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.supportAttachOrderSuggest__row.is-selected{ background: rgba(123,196,127,.12); box-shadow: inset 0 0 0 1px rgba(123,196,127,.22); }
.supportAttachOrderSuggest__empty{ padding:10px 12px; font-size:12px; color: rgba(234,240,255,.62); }


/* Support: order snapshot (chat) */
.supportOrderSnap{
  margin: 10px 12px 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--sup-line2, rgba(255,255,255,.12));
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
}
.supportOrderSnap__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.supportOrderSnap__title{ font-size:12px; font-weight:600; letter-spacing:-.01em; color: var(--sup-text, rgba(234,240,255,.96)); }
.supportOrderSnap__chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.supportOrderSnap__sub{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.supportOrderSnap__btns{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex:0 0 auto; }
.supportOrderSnap__btns .pillBtn{ padding:6px 10px; font-size:12px; line-height:1; }
.supportOrderSnap__pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:550;
  padding:5px 9px; border-radius:999px;
  border:1px solid var(--sup-line2, rgba(255,255,255,.14));
  background: rgba(0,0,0,.14);
  color: var(--sup-muted, rgba(234,240,255,.82));
}
.supportOrderSnap__pill--accent{ background: rgba(123,196,127,.12); border-color: rgba(123,196,127,.32); color: rgba(234,255,242,.92); }
.supportOrderSnap__grid{ margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.supportOrderSnap__k{ font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.62)); }
.supportOrderSnap__v{ margin-top:2px; font-size:13px; font-weight:600; letter-spacing:-.01em; color: var(--sup-text, rgba(234,240,255,.96)); }
.supportOrderSnap__items{ margin-top:8px; font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.62)); }

.supportOrderSnap__more{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.supportOrderSnap__row{ display:grid; grid-template-columns: 110px 1fr; gap:10px; align-items:flex-start; }
.supportOrderSnap__row .supportOrderSnap__k{ padding-top:2px; }
.supportOrderSnap__row .supportOrderSnap__v{ margin-top:0; font-size:12px; font-weight:500; color: var(--sup-text, rgba(234,240,255,.92)); display:flex; flex-direction:column; gap:8px; min-width:0; }
.supportOrderSnap__line{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0; }
.supportOrderSnap .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; cursor:pointer; }
.supportOrderSnap .tag{ font-size:11px; font-weight:550; padding:3px 8px; border-radius:999px; border:1px solid var(--sup-line2, rgba(255,255,255,.14)); background: rgba(0,0,0,.14); color: var(--sup-muted, rgba(234,240,255,.82)); }
.supportOrderSnap .muted2{ font-size:11px; color: var(--sup-muted2, rgba(234,240,255,.62)); }

.supportOrderSnap--embed{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; backdrop-filter:none !important; }

@media(max-width:540px){
  .supportOrderSnap__row{ grid-template-columns: 1fr; }
}

@media(max-width:520px){
  .supportGuest__grid{ grid-template-columns: 1fr; }
  .supportGuest__grid--otp{ grid-template-columns: 1fr; }
  .supportGuest__snapGrid{ grid-template-columns: 1fr; }
  .supportGuest__actions{ flex-direction: column; }
}

html[data-theme="light"] .supportGuest{ border-color: rgba(15,27,20,.10); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); }
html[data-theme="light"] .supportGuest__pill{ border-color: rgba(15,27,20,.10); background: rgba(255,255,255,.72); color: rgba(15,27,20,.72); }
html[data-theme="light"] .supportGuest__snap{ border-color: rgba(15,27,20,.10); background: rgba(255,255,255,.74); }
html[data-theme="light"] .supportGuest__attach{ border-color: rgba(15,27,20,.12); background: rgba(255,255,255,.62); }
html[data-theme="light"] .supportGuest__k{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .supportGuest__v{ color: rgba(15,27,20,.90); }
html[data-theme="light"] .supportGuest__hint{ color: rgba(15,27,20,.58); }
html[data-theme="light"] .supportGuest__recoverToggle{ border-color: rgba(15,27,20,.12); background: rgba(255,255,255,.70); color: rgba(15,27,20,.78); }
html[data-theme="light"] .supportChatEmpty{ border-color: rgba(15,27,20,.12); background: rgba(255,255,255,.72); }
html[data-theme="light"] .supportChatEmpty__title{ color: rgba(15,27,20,.90); }
html[data-theme="light"] .supportChatEmpty__sub{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .supportAttachOrderSheet__scrim{ background: rgba(0,0,0,.35); }
html[data-theme="light"] .supportAttachOrderSheet__panel{ border-color: rgba(15,27,20,.12); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)); }
html[data-theme="light"] .supportAttachOrderSheet__title{ color: rgba(15,27,20,.90); }
html[data-theme="light"] .supportAttachOrderPicker__title{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .supportAttachOrderPicker__hint{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .supportAttachOrderSuggest{ border-color: rgba(15,27,20,.12); background: rgba(15,27,20,.03); }
html[data-theme="light"] .supportAttachOrderSuggest__row{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .supportAttachOrderSuggest__row + .supportAttachOrderSuggest__row{ border-top-color: rgba(15,27,20,.10); }
html[data-theme="light"] .supportAttachOrderSuggest__row:hover{ background: rgba(15,27,20,.04); }
html[data-theme="light"] .supportAttachOrderSuggest__meta,
html[data-theme="light"] .supportAttachOrderSuggest__st,
html[data-theme="light"] .supportAttachOrderSuggest__empty{ color: rgba(15,27,20,.62); }
html[data-theme="light"] .supportAttachOrderSuggest__pick{ border-color: rgba(84,140,94,.18); background: rgba(84,140,94,.10); color: rgba(15,27,20,.92); }
html[data-theme="light"] .supportAttachOrderSuggest__row.is-selected{ background: rgba(84,140,94,.08); box-shadow: inset 0 0 0 1px rgba(84,140,94,.20); }

.supportModal .supportAttachOrderSheet__panel{
  border-color: var(--sup-line2);
  background:
    radial-gradient(560px 220px at 18% -40%, rgba(123,196,127,.12), transparent 62%),
    radial-gradient(700px 260px at 90% 0%, rgba(255,196,92,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.18));
  box-shadow: 0 24px 70px rgba(0,0,0,.50);
}
.supportModal .supportAttachOrderSheet__title{
  color: var(--sup-text);
  font-size: 14px;
  letter-spacing: -.015em;
}
.supportModal .supportAttachOrderSheet .field__input{
  border-color: var(--sup-line2);
  background: rgba(255,255,255,.035);
  color: var(--sup-text);
}
.supportModal .supportAttachOrderSheet .field__input::placeholder{
  color: var(--sup-muted2);
}
.supportModal .supportAttachOrderSheet__actions .btn{
  min-height: 40px;
  border-radius: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.supportModal .supportAttachOrderSheet__actions .btn--primary{
  border: 1px solid rgba(123,196,127,.32);
  background: linear-gradient(180deg, rgba(123,196,127,.20), rgba(123,196,127,.12));
  color: var(--sup-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.supportModal .supportAttachOrderSheet__actions .btn--primary:hover{
  background: linear-gradient(180deg, rgba(123,196,127,.24), rgba(123,196,127,.15));
  border-color: rgba(123,196,127,.40);
}
.supportModal .supportAttachOrderSheet__actions .btn--ghost{
  border-color: var(--sup-line2);
  background: rgba(255,255,255,.03);
  color: var(--sup-text);
}
.supportModal .supportAttachOrderSheet__actions .btn--ghost:hover{
  background: rgba(255,255,255,.06);
}
.supportModal .supportAttachOrderSuggest{
  border-color: var(--sup-line2);
  background: rgba(255,255,255,.03);
}
.supportModal .supportAttachOrderSuggest__row:hover{
  background: rgba(255,255,255,.05);
}
html[data-theme="light"] .supportModal .supportAttachOrderSheet__panel{
  border-color: rgba(15,27,20,.12);
  background:
    radial-gradient(560px 220px at 18% -40%, rgba(123,196,127,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.96));
}
html[data-theme="light"] .supportModal .supportAttachOrderSheet .field__input{
  background: rgba(15,27,20,.03);
  color: rgba(15,27,20,.92);
}
html[data-theme="light"] .supportModal .supportAttachOrderSheet__actions .btn--primary{
  color: rgba(15,27,20,.92);
  border-color: rgba(96,166,112,.32);
  background: linear-gradient(180deg, rgba(123,196,127,.20), rgba(123,196,127,.12));
}
html[data-theme="light"] .supportModal .supportAttachOrderSheet__actions .btn--ghost{
  color: rgba(15,27,20,.84);
  background: rgba(255,255,255,.85);
}



/* ===== Client light theme final audit: stronger contrast, icons, gradients, orders/support/profile ===== */
html[data-theme="light"]{
  --ui-light-panel: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,240,232,.96));
  --ui-light-panel-2: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,240,.94));
  --ui-light-line: rgba(15,27,20,.11);
  --ui-light-line-strong: rgba(15,27,20,.16);
  --ui-light-shadow: 0 16px 44px rgba(15,27,20,.12);
  --ui-light-shadow-lg: 0 28px 72px rgba(15,27,20,.16);
  --ui-light-icon: rgba(15,27,20,.88);
  --ui-light-icon-muted: rgba(15,27,20,.64);
  --ui-light-subtle: rgba(15,27,20,.56);
  --ui-light-accent: #278B5B;
  --ui-light-accent-2: #1F724B;
}

html[data-theme="light"] .sitebar__brandIcon,
html[data-theme="light"] .topnav__item,
html[data-theme="light"] .sitebar__deliver,
html[data-theme="light"] .sitebar__search,
html[data-theme="light"] .card,
html[data-theme="light"] .cartRow,
html[data-theme="light"] .cartSummary,
html[data-theme="light"] .supportCard,
html[data-theme="light"] .supportGuest,
html[data-theme="light"] .supportGuest__snap,
html[data-theme="light"] .supportGuest__attach,
html[data-theme="light"] .supportChatEmpty,
html[data-theme="light"] .profileHero,
html[data-theme="light"] .profileSection,
html[data-theme="light"] .passwordCard,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceBox,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .checkoutNotice,
html[data-theme="light"] .notice,
html[data-theme="light"] .menuSheet__row,
html[data-theme="light"] .modal__panel,
html[data-theme="light"] .supportModal__panel,
html[data-theme="light"] .supportAttachOrderSheet__panel{
  border-color: var(--ui-light-line);
  box-shadow: var(--ui-light-shadow);
}

html[data-theme="light"] .card,
html[data-theme="light"] .cartRow,
html[data-theme="light"] .cartSummary,
html[data-theme="light"] .supportCard,
html[data-theme="light"] .profileHero,
html[data-theme="light"] .profileSection,
html[data-theme="light"] .passwordCard,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceBox,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .supportThreads__list,
html[data-theme="light"] .supportChat,
html[data-theme="light"] .supportChatEmpty,
html[data-theme="light"] .supportGuest,
html[data-theme="light"] .supportGuest__snap,
html[data-theme="light"] .supportGuest__attach,
html[data-theme="light"] .menuSheet__row,
html[data-theme="light"] .modal__panel,
html[data-theme="light"] .supportModal__panel,
html[data-theme="light"] .supportAttachOrderSheet__panel{
  background: var(--ui-light-panel);
}

html[data-theme="light"] .modal__panel,
html[data-theme="light"] .supportModal__panel,
html[data-theme="light"] .supportAttachOrderSheet__panel,
html[data-theme="light"] .confirmModal__panel,
html[data-theme="light"] .menuSheet{
  box-shadow: var(--ui-light-shadow-lg);
}

html[data-theme="light"] .modal__scrim,
html[data-theme="light"] .menu__scrim,
html[data-theme="light"] .supportAttachOrderSheet__scrim,
html[data-theme="light"] .viewer__scrim{
  background: rgba(0,0,0,.72);
}

html[data-theme="light"] .topnav__item,
html[data-theme="light"] .sitebar__deliver,
html[data-theme="light"] .sitebar__searchBtn,
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .backbtn,
html[data-theme="light"] .menuSheet__close,
html[data-theme="light"] .supportGuest__recoverToggle,
html[data-theme="light"] .supportComposer__attach,
html[data-theme="light"] .coinBtn,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .moreTab,
html[data-theme="light"] .supportAttachOrderSuggest,
html[data-theme="light"] .supportGuest__pill,
html[data-theme="light"] .supportTab,
html[data-theme="light"] .profileTab,
html[data-theme="light"] .profileAuthTab{
  border-color: var(--ui-light-line);
  background: rgba(255,255,255,.78);
  color: rgba(15,27,20,.88);
}

html[data-theme="light"] .topnav__item:hover,
html[data-theme="light"] .sitebar__deliver:hover,
html[data-theme="light"] .sitebar__searchBtn:hover,
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .backbtn:hover,
html[data-theme="light"] .menuSheet__close:hover,
html[data-theme="light"] .supportGuest__recoverToggle:hover,
html[data-theme="light"] .supportComposer__attach:hover,
html[data-theme="light"] .coinBtn:hover,
html[data-theme="light"] .copyChip:hover,
html[data-theme="light"] .moreTab:hover,
html[data-theme="light"] .supportAttachOrderSuggest__row:hover,
html[data-theme="light"] .threadRow:hover{
  border-color: rgba(39,139,91,.18);
  background: linear-gradient(180deg, rgba(39,139,91,.08), rgba(15,27,20,.02));
}

html[data-theme="light"] .topnav__item.is-active,
html[data-theme="light"] .bottomnav__item.is-active,
html[data-theme="light"] .supportTab.is-active,
html[data-theme="light"] .profileTab.is-active,
html[data-theme="light"] .profileAuthTab.is-active,
html[data-theme="light"] .coinBtn.is-active,
html[data-theme="light"] .moreTab.is-active,
html[data-theme="light"] .categoriesRow[aria-current="true"]{
  background: linear-gradient(180deg, rgba(39,139,91,.16), rgba(31,114,75,.12));
  border-color: rgba(39,139,91,.24);
  color: rgba(15,27,20,.96);
  box-shadow: 0 10px 24px rgba(39,139,91,.12);
}

html[data-theme="light"] .sitebar__searchIcon,
html[data-theme="light"] .topnav__icon,
html[data-theme="light"] .bottomnav__icon,
html[data-theme="light"] .menuSheet__icon,
html[data-theme="light"] .supportTab__icon,
html[data-theme="light"] .profileTab__icon,
html[data-theme="light"] .profileAuthTab__icon,
html[data-theme="light"] .threadRow__icon,
html[data-theme="light"] .coinBtn__icon,
html[data-theme="light"] .copyChip__icon,
html[data-theme="light"] .backbtn__icon,
html[data-theme="light"] .invoiceCoinPill__icon,
html[data-theme="light"] .invoiceStatus__icon,
html[data-theme="light"] .confirmModal__icon,
html[data-theme="light"] .supportComposer__send,
html[data-theme="light"] .supportComposer__attach,
html[data-theme="light"] .minbtn,
html[data-theme="light"] .menuSheet__chev,
html[data-theme="light"] .switch{
  color: var(--ui-light-icon);
}

html[data-theme="light"] .menuSheet__icon,
html[data-theme="light"] .supportTab__icon,
html[data-theme="light"] .profileTab__icon,
html[data-theme="light"] .profileAuthTab__icon,
html[data-theme="light"] .coinBtn__icon,
html[data-theme="light"] .confirmModal__icon{
  background: linear-gradient(180deg, rgba(39,139,91,.14), rgba(31,114,75,.10));
  border: 1px solid rgba(39,139,91,.16);
  box-shadow: 0 10px 24px rgba(39,139,91,.12);
}

html[data-theme="light"] .menuSheet__icon svg,
html[data-theme="light"] .supportTab__icon svg,
html[data-theme="light"] .profileTab__icon svg,
html[data-theme="light"] .profileAuthTab__icon svg,
html[data-theme="light"] .threadRow__icon svg,
html[data-theme="light"] .coinBtn__icon svg,
html[data-theme="light"] .confirmModal__icon svg,
html[data-theme="light"] .minbtn svg,
html[data-theme="light"] .menuSheet__close svg{
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
}

html[data-theme="light"] .threadRow__icon,
html[data-theme="light"] .supportComposer__send,
html[data-theme="light"] .invoiceStatus__icon.is-on,
html[data-theme="light"] .bottomnav__item.is-active .bottomnav__icon,
html[data-theme="light"] .topnav__item.is-active .topnav__icon{
  color: #ffffff;
  background: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
  border-color: rgba(31,114,75,.9);
}

html[data-theme="light"] .supportComposer__send,
html[data-theme="light"] .btn--primary,
html[data-theme="light"] .pillBtn--accent,
html[data-theme="light"] .pillBtn--solid{
  background: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
  border-color: rgba(31,114,75,.9);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(39,139,91,.18);
}

html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .pillBtn--accent:hover,
html[data-theme="light"] .pillBtn--solid:hover,
html[data-theme="light"] .supportComposer__send:hover{
  filter: brightness(.98);
}

html[data-theme="light"] .hero{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 30px 78px rgba(15,27,20,.18);
}
html[data-theme="light"] .hero__top{
  background: linear-gradient(180deg, rgba(8,14,11,.26), rgba(8,14,11,.04));
}
html[data-theme="light"] .hero__metaLine,
html[data-theme="light"] .chip,
html[data-theme="light"] .wbtn{
  background: rgba(10,16,13,.22);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.96);
}
html[data-theme="light"] .hero__title,
html[data-theme="light"] .hero__subtitle,
html[data-theme="light"] .hero__metaLine,
html[data-theme="light"] .chip,
html[data-theme="light"] .wbtn,
html[data-theme="light"] .quickAction__label,
html[data-theme="light"] .quickAction__sub{
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

html[data-theme="light"] .card__shade{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(11,18,14,.08) 38%, rgba(11,18,14,.18) 100%);
}
html[data-theme="light"] .tag,
html[data-theme="light"] .pill,
html[data-theme="light"] .rating,
html[data-theme="light"] .priceBlock,
html[data-theme="light"] .stockNote,
html[data-theme="light"] .bulkInfo{
  border-color: var(--ui-light-line);
  background: rgba(15,27,20,.035);
  color: rgba(15,27,20,.88);
}
html[data-theme="light"] .desc,
html[data-theme="light"] .catSection__meta,
html[data-theme="light"] .price__crypto,
html[data-theme="light"] .bulkInfo__muted,
html[data-theme="light"] .checkoutPaySummary__row--muted,
html[data-theme="light"] .checkoutPayItem__sub,
html[data-theme="light"] .checkoutShipTo__label,
html[data-theme="light"] .invoiceOrder__label,
html[data-theme="light"] .invoiceStatus__label,
html[data-theme="light"] .supportThreads__hint,
html[data-theme="light"] .supportNewTop__sub,
html[data-theme="light"] .supportNewNote,
html[data-theme="light"] .threadRow__sub,
html[data-theme="light"] .threadRow__time,
html[data-theme="light"] .bubble__time,
html[data-theme="light"] .bubble__status,
html[data-theme="light"] .chatDaySep__pill,
html[data-theme="light"] .profileSub,
html[data-theme="light"] .ordersSectionTitle,
html[data-theme="light"] .orderShipBrief,
html[data-theme="light"] .shipVal__meta,
html[data-theme="light"] .field__label,
html[data-theme="light"] .field__error,
html[data-theme="light"] .supportGuest__hint,
html[data-theme="light"] .supportAttachOrderSuggest__meta,
html[data-theme="light"] .supportAttachOrderSuggest__st,
html[data-theme="light"] .supportAttachOrderSuggest__empty,
html[data-theme="light"] .supportChatEmpty__sub{
  color: var(--ui-light-subtle);
}

html[data-theme="light"] .field__input,
html[data-theme="light"] .field__textarea,
html[data-theme="light"] .supportComposer__input,
html[data-theme="light"] .checkoutForm input,
html[data-theme="light"] .checkoutForm select,
html[data-theme="light"] .checkoutForm textarea{
  border-color: var(--ui-light-line);
  background: rgba(255,255,255,.92);
  color: rgba(15,27,20,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .field__input::placeholder,
html[data-theme="light"] .field__textarea::placeholder,
html[data-theme="light"] .supportComposer__input::placeholder,
html[data-theme="light"] .checkoutForm input::placeholder,
html[data-theme="light"] .checkoutForm textarea::placeholder{
  color: rgba(15,27,20,.42);
}
html[data-theme="light"] .field__input:focus,
html[data-theme="light"] .field__textarea:focus,
html[data-theme="light"] .supportComposer__input:focus,
html[data-theme="light"] .checkoutForm input:focus,
html[data-theme="light"] .checkoutForm select:focus,
html[data-theme="light"] .checkoutForm textarea:focus{
  border-color: rgba(39,139,91,.34);
  box-shadow: 0 0 0 4px rgba(39,139,91,.10);
}

html[data-theme="light"] .supportChat,
html[data-theme="light"] .supportView--chat .supportChat{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,243,237,.96));
}
html[data-theme="light"] .supportChat .bubble,
html[data-theme="light"] .supportView--chat .bubble{
  background: rgba(255,255,255,.98);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.92);
  box-shadow: 0 12px 28px rgba(15,27,20,.08);
}
html[data-theme="light"] .supportChat .bubble--me,
html[data-theme="light"] .supportView--chat .bubble--me{
  background: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
  border-color: rgba(31,114,75,.9);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(39,139,91,.18);
}
html[data-theme="light"] .supportChat .bubble--me .bubble__time,
html[data-theme="light"] .supportView--chat .bubble--me .bubble__time,
html[data-theme="light"] .supportChat .bubble--me .bubble__status,
html[data-theme="light"] .supportView--chat .bubble--me .bubble__status{
  color: rgba(255,255,255,.82);
}
html[data-theme="light"] .supportChat .chatDaySep__pill{
  background: rgba(15,27,20,.06);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.66);
}

html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoiceBox,
html[data-theme="light"] .invoiceBlock,
html[data-theme="light"] .invoiceItem,
html[data-theme="light"] .invoiceTxRow,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutNav,
html[data-theme="light"] .checkoutBreakdown,
html[data-theme="light"] .checkoutPayTotals,
html[data-theme="light"] .checkoutPaySummary,
html[data-theme="light"] .checkoutNotice,
html[data-theme="light"] .notice,
html[data-theme="light"] .notice__icon,
html[data-theme="light"] .checkoutErr{
  border-color: var(--ui-light-line);
}
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoiceBox,
html[data-theme="light"] .invoiceTxRow,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .notice,
html[data-theme="light"] .notice__icon,
html[data-theme="light"] .checkoutErr{
  background: rgba(255,255,255,.86);
}
html[data-theme="light"] .checkoutNav{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,240,232,.96));
}
html[data-theme="light"] .invoiceOrder__no,
html[data-theme="light"] .invoiceStatus__val,
html[data-theme="light"] .copyChip__v,
html[data-theme="light"] .checkoutPayItem__title,
html[data-theme="light"] .checkoutPayItem__price,
html[data-theme="light"] .checkoutShipTo__val,
html[data-theme="light"] .invoiceCoinPill__text,
html[data-theme="light"] .invoiceAmt__crypto,
html[data-theme="light"] .invoiceAmt__fiat,
html[data-theme="light"] .invoiceKeyValue__v,
html[data-theme="light"] .supportGuest__v,
html[data-theme="light"] .supportChatEmpty__title,
html[data-theme="light"] .threadRow__subject,
html[data-theme="light"] .menuSheet__title,
html[data-theme="light"] .menuSheet__rowTitle,
html[data-theme="light"] .modal__topTitle,
html[data-theme="light"] .confirmModal__title,
html[data-theme="light"] .confirmModal__text,
html[data-theme="light"] .profileTab.is-active,
html[data-theme="light"] .profileAuthTab.is-active,
html[data-theme="light"] .supportTab.is-active,
html[data-theme="light"] .supportAttachOrderSheet__title,
html[data-theme="light"] .supportAttachOrderSuggest__row,
html[data-theme="light"] .field__input,
html[data-theme="light"] .field__textarea,
html[data-theme="light"] .supportComposer__input{
  color: rgba(15,27,20,.94);
}

html[data-theme="light"] .invoiceCoinPill,
html[data-theme="light"] .invoiceStateCard,
html[data-theme="light"] .invoiceDetailsCard,
html[data-theme="light"] .invoiceSummaryCard,
html[data-theme="light"] .invoiceQrWrap,
html[data-theme="light"] .invState,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .coinBtn__icon{
  box-shadow: 0 12px 28px rgba(15,27,20,.08);
}
html[data-theme="light"] .invoiceQrWrap,
html[data-theme="light"] .invoiceQr,
html[data-theme="light"] .invQr,
html[data-theme="light"] .qrWrap,
html[data-theme="light"] .qrBox{
  background: #ffffff !important;
}

html[data-theme="light"] .profileNav,
html[data-theme="light"] .supportNav,
html[data-theme="light"] .profileAuthNav,
html[data-theme="light"] .bottomnav{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,239,232,.96));
  border-color: var(--ui-light-line);
  box-shadow: 0 -10px 28px rgba(15,27,20,.08), 0 12px 34px rgba(15,27,20,.10);
}
html[data-theme="light"] .bottomnav__item{ color: rgba(15,27,20,.60); }
html[data-theme="light"] .bottomnav__item.is-active{ color: rgba(15,27,20,.94); }
html[data-theme="light"] .bottomnav__item.is-active::after{
  background: linear-gradient(90deg, rgba(39,139,91,.92), rgba(31,114,75,.92));
}

html[data-theme="light"] .confirmModal__icon,
html[data-theme="light"] .menuSheet__icon,
html[data-theme="light"] .coinBtn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="light"] .confirmModal__icon{
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 18px;
}
html[data-theme="light"] .confirmModal__text{ line-height: 1.45; }

html[data-theme="light"] .supportGuestMsg.is-error,
html[data-theme="light"] .supportAttachOrderMsg.is-error,
html[data-theme="light"] .authError,
html[data-theme="light"] .checkoutErr{
  background: rgba(214,63,63,.08);
  border-color: rgba(214,63,63,.18);
  color: rgba(149,25,25,.96);
}
html[data-theme="light"] .supportGuestMsg.is-ok,
html[data-theme="light"] .supportAttachOrderMsg.is-ok,
html[data-theme="light"] .notice--warn{
  background: rgba(191,141,52,.10);
  border-color: rgba(191,141,52,.18);
}

html[data-theme="light"] .switch__track{
  background: rgba(15,27,20,.14);
  border-color: rgba(15,27,20,.10);
}
html[data-theme="light"] .switch.is-on .switch__track{
  background: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
  border-color: rgba(31,114,75,.9);
}

html[data-theme="light"] .supportQuickBtn,
html[data-theme="light"] #ordersQuickBtn,
html[data-theme="light"] #supportQuickBtn,
html[data-theme="light"] .iconbtn--ghost{
  border-color: rgba(15,27,20,.10);
  background: rgba(255,255,255,.80);
  color: rgba(15,27,20,.88);
  box-shadow: 0 14px 26px rgba(15,27,20,.08);
}
html[data-theme="light"] .iconbtn--discounts{
  border-color:rgba(223,176,74,.62);
  color:#7a5200;
  background:
    linear-gradient(180deg, rgba(255,233,174,.92), rgba(255,209,108,.78)),
    rgba(255,255,255,.88);
  box-shadow:0 14px 26px rgba(145,104,18,.16), 0 0 24px rgba(223,176,74,.18);
}
html[data-theme="light"] .iconbtn--discounts .discountPercentGlyph{
  color:#7a5200;
  text-shadow:0 0 8px rgba(255,245,210,.42);
}

html[data-theme="light"] .otl__dot,
html[data-theme="light"] .otl__bullet,
html[data-theme="light"] .otl__check,
html[data-theme="light"] .stepper__qty,
html[data-theme="light"] .statusPill,
html[data-theme="light"] .shipMethodChip,
html[data-theme="light"] .shipVal{
  border-color: var(--ui-light-line);
  background: rgba(255,255,255,.84);
  color: rgba(15,27,20,.90);
}



/* ===== Light theme v7: tokenized text/surfaces audit + unified shadows ===== */
html[data-theme="light"]{
  --client-ink: rgba(15,27,20,.96);
  --client-ink-soft: rgba(15,27,20,.78);
  --client-ink-muted: rgba(15,27,20,.60);
  --client-ink-faint: rgba(15,27,20,.48);

  --client-panel-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,240,232,.94));
  --client-panel-bg-alt: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.95));
  --client-panel-bg-soft: linear-gradient(180deg, rgba(247,251,248,.96), rgba(238,245,240,.92));
  --client-panel-line: rgba(15,27,20,.10);

  --client-shadow-sm: 0 10px 24px rgba(15,27,20,.08);
  --client-shadow-md: 0 16px 36px rgba(15,27,20,.10);
  --client-shadow-lg: 0 22px 48px rgba(15,27,20,.12);

  --client-icon-bg: linear-gradient(180deg, rgba(39,139,91,.96), rgba(31,114,75,.96));
  --client-icon-bg-soft: linear-gradient(180deg, rgba(39,139,91,.14), rgba(31,114,75,.10));
  --client-icon-fg: #ffffff;
  --client-icon-shadow: 0 10px 24px rgba(39,139,91,.14), 0 10px 24px rgba(15,27,20,.08);
}

/* Unified elevation for light theme hero + marketing surfaces */
html[data-theme="light"] .hero{
  border-color: rgba(255,255,255,.36);
  box-shadow: var(--client-shadow-lg);
}
html[data-theme="light"] .whyIcon,
html[data-theme="light"] .whatCard,
html[data-theme="light"] .offerCard,
html[data-theme="light"] .howBlock{
  background: var(--client-panel-bg);
  border-color: var(--client-panel-line);
  box-shadow: var(--client-shadow-md);
}
html[data-theme="light"] .whyIcon:hover{
  box-shadow: var(--client-shadow-lg);
}
html[data-theme="light"] .whyIcon::before,
html[data-theme="light"] .whatCard::before{
  opacity: .78;
}

/* Marketing typography must follow vars, not hardcoded white */
html[data-theme="light"] .marketingBlock__title,
html[data-theme="light"] .whatCard__title,
html[data-theme="light"] .offerCard__title,
html[data-theme="light"] .howBlock__title,
html[data-theme="light"] .howStep__title,
html[data-theme="light"] .whyIcon__label{
  color: var(--client-ink);
}
html[data-theme="light"] .marketingBlock__sub,
html[data-theme="light"] .whatCard__kicker,
html[data-theme="light"] .whatCard__copy,
html[data-theme="light"] .offerItem__text,
html[data-theme="light"] .offerItem__text strong,
html[data-theme="light"] .whyIcon__sub,
html[data-theme="light"] .howStep__sub,
html[data-theme="light"] .menuSheet__rowSub,
html[data-theme="light"] .threadRow__sub,
html[data-theme="light"] .threadRow__time,
html[data-theme="light"] .cartRow__crypto{
  color: var(--client-ink-soft);
}
html[data-theme="light"] .threadRow__sub,
html[data-theme="light"] .menuSheet__rowSub,
html[data-theme="light"] .howStep__sub,
html[data-theme="light"] .whyIcon__sub{
  color: var(--client-ink-muted);
}
html[data-theme="light"] .cartRow__title,
html[data-theme="light"] .threadRow__subject,
html[data-theme="light"] .menuSheet__rowTitle{
  color: var(--client-ink);
}

/* Marketing chips / pills / steps */
html[data-theme="light"] .whyIcon__glyph,
html[data-theme="light"] .whatCard__badge{
  background: var(--client-panel-bg-soft);
  border-color: rgba(39,139,91,.18);
  color: var(--client-icon-fg);
  box-shadow: var(--client-icon-shadow);
}
html[data-theme="light"] .whyIcon__glyph{
  background: linear-gradient(180deg, rgba(232,246,238,.98), rgba(216,237,224,.94));
}
html[data-theme="light"] .whyIcon__glyph svg{
  color: rgba(39,139,91,.98);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
html[data-theme="light"] .whatCard__badge{
  background: var(--client-icon-bg);
  color: var(--client-icon-fg);
}
html[data-theme="light"] .miniPill,
html[data-theme="light"] .howStep{
  background: rgba(15,27,20,.06);
  border-color: rgba(15,27,20,.08);
  color: var(--client-ink-soft);
}
html[data-theme="light"] .howStep__num{
  background: var(--client-icon-bg-soft);
  border-color: rgba(39,139,91,.20);
  color: rgba(24,79,54,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .offerItem__dot{
  background: rgba(39,139,91,.88);
  box-shadow: 0 0 0 4px rgba(39,139,91,.12);
}

/* Categories/support rows: stronger icon visibility in light theme */
html[data-theme="light"] .threadRow__icon,
html[data-theme="light"] .menuSheet__icon{
  background: var(--client-icon-bg);
  border-color: rgba(31,114,75,.90);
  color: var(--client-icon-fg);
  box-shadow: var(--client-icon-shadow);
}
html[data-theme="light"] .menuSheet__icon--discounts{
  background:
    linear-gradient(180deg, rgba(255,233,174,.96), rgba(255,208,106,.84)),
    rgba(255,255,255,.94);
  background-size:220% 220%;
  border-color:rgba(255,245,218,.92);
  color:#7a5200;
  box-shadow:0 14px 26px rgba(145,104,18,.16), inset 0 1px 0 rgba(255,255,255,.46), 0 0 26px rgba(223,176,74,.20);
}
html[data-theme="light"] .menuSheet__icon--discounts .discountPercentGlyph{
  color:#7a5200;
}
html[data-theme="light"] .threadRow__icon svg,
html[data-theme="light"] .menuSheet__icon svg,
html[data-theme="light"] .categoriesModal .threadRow__icon svg{
  width: 22px;
  height: 22px;
  display: block;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  opacity: 1;
}
html[data-theme="light"] .threadRow__icon svg *,
html[data-theme="light"] .menuSheet__icon svg *,
html[data-theme="light"] .categoriesModal .threadRow__icon svg *{
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Light theme cards / rows readable by vars */
html[data-theme="light"] .cartRow,
html[data-theme="light"] .cartSummary,
html[data-theme="light"] .supportCard,
html[data-theme="light"] .supportGuest,
html[data-theme="light"] .supportGuest__snap,
html[data-theme="light"] .supportGuest__attach,
html[data-theme="light"] .supportChatEmpty,
html[data-theme="light"] .profileHero,
html[data-theme="light"] .profileSection,
html[data-theme="light"] .passwordCard,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceBox,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .checkoutNotice,
html[data-theme="light"] .notice,
html[data-theme="light"] .menuSheet__row,
html[data-theme="light"] .modal__panel,
html[data-theme="light"] .supportModal__panel,
html[data-theme="light"] .supportAttachOrderSheet__panel{
  box-shadow: var(--client-shadow-md);
}

/* Slightly calmer Why-order row shadow on light theme */
html[data-theme="light"] .whyIcon{
  padding: 14px 16px;
}
html[data-theme="light"] .whyIcon__sub{
  margin-top: 3px;
}

/* Hero support chips remain readable but not overly dark */
html[data-theme="light"] .hero__metaLine,
html[data-theme="light"] .chip,
html[data-theme="light"] .wbtn{
  background: rgba(13,20,16,.18);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.96);
}

/* Small text defaults tied to vars */
html[data-theme="light"] .desc,
html[data-theme="light"] .catSection__meta,
html[data-theme="light"] .price__crypto,
html[data-theme="light"] .bulkInfo__muted,
html[data-theme="light"] .checkoutPaySummary__row--muted,
html[data-theme="light"] .checkoutPayItem__sub,
html[data-theme="light"] .checkoutShipTo__label,
html[data-theme="light"] .invoiceOrder__label,
html[data-theme="light"] .invoiceStatus__label,
html[data-theme="light"] .supportThreads__hint,
html[data-theme="light"] .supportNewTop__sub,
html[data-theme="light"] .supportNewNote,
html[data-theme="light"] .bubble__time,
html[data-theme="light"] .bubble__status,
html[data-theme="light"] .chatDaySep__pill,
html[data-theme="light"] .profileSub,
html[data-theme="light"] .ordersSectionTitle,
html[data-theme="light"] .orderShipBrief,
html[data-theme="light"] .shipVal__meta,
html[data-theme="light"] .field__label,
html[data-theme="light"] .field__error,
html[data-theme="light"] .supportGuest__hint,
html[data-theme="light"] .supportAttachOrderSuggest__meta,
html[data-theme="light"] .supportAttachOrderSuggest__st,
html[data-theme="light"] .supportAttachOrderSuggest__empty,
html[data-theme="light"] .supportChatEmpty__sub{
  color: var(--client-ink-muted);
}



/* ===== Light theme v8: checkout / invoice polish + client rail dots ===== */
html[data-theme="light"]{
  --client-modal-bg: linear-gradient(180deg, rgba(255,255,255,.988), rgba(246,242,235,.978));
  --client-modal-bg-strong: linear-gradient(180deg, rgba(255,255,255,.985), rgba(243,239,232,.975));
  --client-surface-bg: linear-gradient(180deg, rgba(255,255,255,.975), rgba(247,243,236,.952));
  --client-surface-bg-soft: linear-gradient(180deg, rgba(245,250,247,.97), rgba(239,246,241,.93));
  --client-surface-bg-alt: linear-gradient(180deg, rgba(252,253,252,.965), rgba(243,247,244,.938));
  --client-line-soft: rgba(15,27,20,.08);
  --client-line-mid: rgba(15,27,20,.12);
  --client-line-strong: rgba(15,27,20,.16);
  --client-shadow-unified: 0 16px 34px rgba(15,27,20,.10);
  --client-shadow-pill: 0 8px 18px rgba(15,27,20,.07);
  --client-shadow-float: 0 24px 56px rgba(15,27,20,.13);
  --client-accent-soft: rgba(39,139,91,.10);
  --client-accent-soft-2: rgba(39,139,91,.16);
  --client-danger-soft: rgba(214,63,63,.08);
  --client-danger-line: rgba(214,63,63,.18);
}

html[data-theme="light"] .checkoutModal .modal__panel,
html[data-theme="light"] .invoiceDetailsModal .modal__panel{
  background:
    radial-gradient(620px 220px at 14% -18%, rgba(39,139,91,.085), transparent 62%),
    radial-gradient(520px 180px at 100% 0%, rgba(198,168,106,.055), transparent 64%),
    var(--client-modal-bg);
  border-color: rgba(255,255,255,.68);
  box-shadow: var(--client-shadow-float);
}

html[data-theme="light"] .checkoutModal .modal__top,
html[data-theme="light"] .invoiceDetailsModal .modal__top{
  border-bottom-color: var(--client-line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
}

html[data-theme="light"] .checkoutModal .modal__body,
html[data-theme="light"] .invoiceDetailsModal .modal__body,
html[data-theme="light"] .checkoutModal .modal__panel,
html[data-theme="light"] .invoiceDetailsModal .modal__panel{
  color: var(--client-ink);
}

html[data-theme="light"] .checkoutFlow{
  padding: 10px 12px 2px;
  gap: 10px;
}

html[data-theme="light"] .flowStep{
  border-color: var(--client-line-mid);
  background: rgba(255,255,255,.82);
  color: var(--client-ink-muted);
  box-shadow: var(--client-shadow-pill);
}
html[data-theme="light"] .flowStep.is-active{
  border-color: rgba(39,139,91,.24);
  background: linear-gradient(180deg, rgba(225,244,232,.98), rgba(213,237,222,.94));
  color: rgba(24,79,54,.98);
  box-shadow: 0 10px 24px rgba(39,139,91,.14);
}
html[data-theme="light"] .flowStep.is-done{
  border-color: rgba(39,139,91,.18);
  background: linear-gradient(180deg, rgba(242,249,244,.96), rgba(236,245,239,.92));
  color: var(--client-ink-soft);
  opacity: 1;
}

html[data-theme="light"] .checkoutCard,
html[data-theme="light"] .checkoutBreakdown,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutCartRow,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .shipOpt,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceItems,
html[data-theme="light"] .invoiceDeliver,
html[data-theme="light"] .invoiceVisual,
html[data-theme="light"] .invoiceReceived,
html[data-theme="light"] .invoiceRemain,
html[data-theme="light"] .invoiceConfirm,
html[data-theme="light"] .invoiceAccessQuick,
html[data-theme="light"] .invoiceGuestKey,
html[data-theme="light"] .invDetailsCard,
html[data-theme="light"] .invDetailsTx,
html[data-theme="light"] .invDetailsTxRow,
html[data-theme="light"] .invoiceItemRow,
html[data-theme="light"] .invoiceTimer,
html[data-theme="light"] .invoiceCoinPill,
html[data-theme="light"] .copyChip{
  border-color: var(--client-line-mid);
  box-shadow: var(--client-shadow-unified);
}

html[data-theme="light"] .checkoutCard,
html[data-theme="light"] .invoicePayCard{
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(39,139,91,.07), transparent 64%),
    var(--client-surface-bg);
}
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoiceItems,
html[data-theme="light"] .invoiceDeliver,
html[data-theme="light"] .invoiceAccessQuick,
html[data-theme="light"] .invoiceGuestKey,
html[data-theme="light"] .invDetailsCard,
html[data-theme="light"] .invDetailsTx,
html[data-theme="light"] .invDetailsTxRow,
html[data-theme="light"] .invoiceItemRow,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutCartRow,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .shipOpt,
html[data-theme="light"] .invoiceTimer,
html[data-theme="light"] .invoiceCoinPill,
html[data-theme="light"] .copyChip{
  background: var(--client-surface-bg);
}
html[data-theme="light"] .checkoutBreakdown,
html[data-theme="light"] .invoiceVisual{
  background: var(--client-surface-bg-soft);
}

html[data-theme="light"] .checkoutBreakdown{
  margin-top: 16px;
  padding: 14px;
  border-top: 1px solid var(--client-line-soft);
  border-radius: 18px;
}

html[data-theme="light"] .checkoutNav{
  border-top-color: var(--client-line-mid);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72) 16%, rgba(244,240,232,.98));
  box-shadow: 0 -10px 28px rgba(15,27,20,.08);
}

html[data-theme="light"] .checkoutCard__title,
html[data-theme="light"] .checkoutSection__title,
html[data-theme="light"] .checkoutBreakdown__title,
html[data-theme="light"] .invoicePayCard__title,
html[data-theme="light"] .invoiceItems__title,
html[data-theme="light"] .invoiceDeliver__title,
html[data-theme="light"] .invDetailsTx__title,
html[data-theme="light"] .invoiceAccessQuick__title,
html[data-theme="light"] .invoiceNext__title,
html[data-theme="light"] .invoiceAfterPaid__title,
html[data-theme="light"] .invoiceTotals__row,
html[data-theme="light"] .checkoutPayTotals__row,
html[data-theme="light"] .checkoutPaySummary__row,
html[data-theme="light"] .checkoutPayItem__title,
html[data-theme="light"] .checkoutCartRow__title,
html[data-theme="light"] .checkoutCartRow__price,
html[data-theme="light"] .checkoutPayItem__price,
html[data-theme="light"] .invoiceOrder__no,
html[data-theme="light"] .invoiceStatus__val,
html[data-theme="light"] .invoiceAmount__main,
html[data-theme="light"] .invoiceAddress__val,
html[data-theme="light"] .invoiceReceived__val,
html[data-theme="light"] .invoiceRemain__val,
html[data-theme="light"] .invoiceConfirm__val,
html[data-theme="light"] .invoiceItemRow__title,
html[data-theme="light"] .invoiceItemRow__right,
html[data-theme="light"] .invDetailsMeta__v,
html[data-theme="light"] .invDetailsTxRow__id,
html[data-theme="light"] .copyChip__v,
html[data-theme="light"] .invoiceCoinPill__text,
html[data-theme="light"] .invoiceTimer,
html[data-theme="light"] .shipOpt__title,
html[data-theme="light"] .shipOpt__price,
html[data-theme="light"] .checkoutShipTo__val{
  color: var(--client-ink);
}

html[data-theme="light"] .invoiceOrder__label,
html[data-theme="light"] .invoiceStatus__label,
html[data-theme="light"] .invoiceAmount__sub,
html[data-theme="light"] .invoiceVisual__status,
html[data-theme="light"] .invoiceVisual__statusText,
html[data-theme="light"] .invoiceVisual__help,
html[data-theme="light"] .invoiceVisual__label,
html[data-theme="light"] .invoiceGuestKey__label,
html[data-theme="light"] .invoiceGuestKey__metaK,
html[data-theme="light"] .invoiceGuestKey__hint,
html[data-theme="light"] .invoiceDeliver__metaRow,
html[data-theme="light"] .invoiceDeliver__notes,
html[data-theme="light"] .invoiceDeliver__notesLabel,
html[data-theme="light"] .invoiceItemRow__sub,
html[data-theme="light"] .invDetailsMeta__k,
html[data-theme="light"] .invDetailsTx__empty,
html[data-theme="light"] .invDetailsTxRow__meta,
html[data-theme="light"] .copyChip__k,
html[data-theme="light"] .checkoutHint,
html[data-theme="light"] .shipOpt__meta,
html[data-theme="light"] .checkoutPayItem__sub,
html[data-theme="light"] .checkoutCartRow__sub,
html[data-theme="light"] .checkoutShipTo__label,
html[data-theme="light"] .invoiceNext__note,
html[data-theme="light"] .invoiceAfterPaid__text{
  color: var(--client-ink-muted);
}
html[data-theme="light"] .invoiceDeliver__metaRow--eta,
html[data-theme="light"] .invoiceVisual__label,
html[data-theme="light"] .invoiceGuestKey__metaV,
html[data-theme="light"] .invoiceAfterPaid__title,
html[data-theme="light"] .invoiceNext__title{
  color: var(--client-ink-soft);
}

html[data-theme="light"] .checkoutForm select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,27,20,.56) 50%),
    linear-gradient(135deg, rgba(15,27,20,.56) 50%, transparent 50%);
}

html[data-theme="light"] .shipOpt__check{
  border-color: var(--client-line-mid);
  background: rgba(255,255,255,.88);
}
html[data-theme="light"] .shipOpt.is-selected{
  border-color: rgba(39,139,91,.24);
  background: linear-gradient(180deg, rgba(230,245,235,.98), rgba(218,238,226,.94));
}
html[data-theme="light"] .shipOpt.is-selected .shipOpt__check{
  border-color: rgba(39,139,91,.28);
  background: linear-gradient(180deg, rgba(39,139,91,.18), rgba(39,139,91,.12));
}

html[data-theme="light"] .coinBtn{
  border-color: var(--client-line-mid);
  background: rgba(255,255,255,.90);
  color: var(--client-ink-soft);
  box-shadow: var(--client-shadow-pill);
}
html[data-theme="light"] .coinBtn__icon,
html[data-theme="light"] .invoiceCoinPill__icon{
  background: linear-gradient(180deg, rgba(232,246,238,.98), rgba(216,237,224,.94));
  border: 1px solid rgba(39,139,91,.18);
  color: rgba(24,79,54,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
html[data-theme="light"] .coinBtn.is-active{
  border-color: rgba(39,139,91,.24);
  background: linear-gradient(180deg, rgba(230,245,235,.98), rgba(219,238,226,.94));
  color: var(--client-ink);
  box-shadow: 0 12px 24px rgba(39,139,91,.12);
}

html[data-theme="light"] .checkoutPayTotals,
html[data-theme="light"] .checkoutTotals,
html[data-theme="light"] .invoiceTotals,
html[data-theme="light"] .invoiceDeliver__meta,
html[data-theme="light"] .invoiceDeliver__notes,
html[data-theme="light"] .invDetailsMeta__row,
html[data-theme="light"] .checkoutPayTotals__row--total{
  border-top-color: var(--client-line-soft);
}
html[data-theme="light"] .invoiceItemRow,
html[data-theme="light"] .invDetailsTxRow{
  background: var(--client-surface-bg-alt);
}

html[data-theme="light"] .invoiceAddress__val,
html[data-theme="light"] .invoiceGuestKey__val{
  border-color: var(--client-line-mid);
  background: rgba(255,255,255,.94);
  color: var(--client-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

html[data-theme="light"] .invoiceVisual{
  border-color: rgba(39,139,91,.14);
}
html[data-theme="light"] .invoiceVisual__statusCheck,
html[data-theme="light"] .invoiceStatus__icon,
html[data-theme="light"] .invoiceVisual__statusCheck.is-on{
  box-shadow: 0 0 0 6px rgba(39,139,91,.08);
}
html[data-theme="light"] .invStateBg{
  stroke: rgba(15,27,20,.10);
}

html[data-theme="light"] .invoiceReceived{
  border-color: rgba(39,139,91,.18);
  background: linear-gradient(180deg, rgba(230,245,235,.98), rgba(219,238,226,.94));
}
html[data-theme="light"] .invoiceReceived__label{
  color: rgba(24,79,54,.78);
}
html[data-theme="light"] .invoiceRemain,
html[data-theme="light"] .invoiceConfirm{
  background: rgba(255,255,255,.88);
}
html[data-theme="light"] .invoiceRemain__label,
html[data-theme="light"] .invoiceConfirm__label{
  color: var(--client-ink-soft);
}
html[data-theme="light"] .invoiceRemain.is-under{
  border-color: var(--client-danger-line);
  background: var(--client-danger-soft);
}
html[data-theme="light"] .invoiceRemain.is-under .invoiceRemain__label{
  color: rgba(149,25,25,.86);
}
html[data-theme="light"] .invoiceRemain.is-over{
  border-color: rgba(39,139,91,.18);
  background: rgba(39,139,91,.08);
}
html[data-theme="light"] .invoiceRemain.is-over .invoiceRemain__label{
  color: rgba(24,79,54,.82);
}

html[data-theme="light"] .invoiceNext{
  background: linear-gradient(180deg, rgba(240,248,243,.98), rgba(232,244,236,.94));
  border-color: rgba(39,139,91,.18);
  color: var(--client-ink);
}
html[data-theme="light"] .invoiceAfterPaid{
  background: linear-gradient(180deg, rgba(231,245,236,.98), rgba(221,239,229,.94));
  border-color: rgba(39,139,91,.18);
  color: var(--client-ink);
}

html[data-theme="light"] .invoiceQr__box{
  border-color: rgba(15,27,20,.12);
  box-shadow: 0 20px 46px rgba(15,27,20,.14);
}

html[data-theme="light"] .checkoutErr{
  background: var(--client-danger-soft);
  border-color: var(--client-danger-line);
  color: rgba(149,25,25,.96);
}

html[data-theme="light"] .railDots .mediaCarousel__dot{
  background: rgba(15,27,20,.20);
  box-shadow: inset 0 0 0 1px rgba(15,27,20,.08);
}
html[data-theme="light"] .railDots .mediaCarousel__dot.is-active{
  background: linear-gradient(90deg, rgba(39,139,91,.88), rgba(31,114,75,.88));
  box-shadow: 0 8px 18px rgba(39,139,91,.16);
}

/* Keep media viewer / product media dots white on top of images in light theme. */
html[data-theme="light"] .mediaCarousel__hud .mediaCarousel__dot,
html[data-theme="light"] .viewer .mediaCarousel__dot,
html[data-theme="light"] .mediaModal .mediaCarousel__dot{
  box-shadow: none;
}

html[data-theme="light"] .threadRow__icon svg [fill]:not([fill="none"]),
html[data-theme="light"] .menuSheet__icon svg [fill]:not([fill="none"]),
html[data-theme="light"] .categoriesModal .threadRow__icon svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}
html[data-theme="light"] .threadRow__icon svg [stroke]:not([stroke="none"]),
html[data-theme="light"] .menuSheet__icon svg [stroke]:not([stroke="none"]),
html[data-theme="light"] .categoriesModal .threadRow__icon svg [stroke]:not([stroke="none"]){
  stroke: currentColor !important;
}

/* ===== Light theme v9: stronger checkout chips + order surfaces contrast ===== */
html[data-theme="light"]{
  --client-chip-bg: rgba(255,255,255,.92);
  --client-chip-bg-hover: linear-gradient(180deg, rgba(245,250,247,.98), rgba(235,243,238,.94));
  --client-chip-bg-active: linear-gradient(180deg, rgba(39,139,91,.98), rgba(24,112,71,.98));
  --client-chip-line: rgba(15,27,20,.12);
  --client-chip-line-active: rgba(24,112,71,.92);
  --client-chip-text: rgba(15,27,20,.88);
  --client-chip-text-muted: rgba(15,27,20,.68);
  --client-chip-text-active: rgba(255,255,255,.98);
  --client-chip-shadow: 0 8px 18px rgba(15,27,20,.07);
  --client-chip-shadow-active: 0 14px 28px rgba(39,139,91,.18), 0 8px 18px rgba(15,27,20,.10);
  --client-status-red-bg: linear-gradient(180deg, rgba(255,238,238,.98), rgba(252,227,227,.94));
  --client-status-red-line: rgba(214,63,63,.28);
  --client-status-red-text: rgba(157,32,32,.96);
  --client-status-amber-bg: linear-gradient(180deg, rgba(255,248,235,.98), rgba(251,241,220,.94));
  --client-status-amber-line: rgba(196,146,55,.28);
  --client-status-amber-text: rgba(121,88,28,.96);
}

/* Active chips/buttons in checkout and profile should not look washed out */
html[data-theme="light"] .flowStep,
html[data-theme="light"] .coinBtn,
html[data-theme="light"] .moreTab,
html[data-theme="light"] .profileModal .pillBtn,
html[data-theme="light"] .profileModal .pillBtn--solid,
html[data-theme="light"] .profileModal .pillBtn--accent,
html[data-theme="light"] .shipMethodChip,
html[data-theme="light"] .statusPill,
html[data-theme="light"] .orderBadge,
html[data-theme="light"] .invoiceCoinPill,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .shipVal{
  border-color: var(--client-chip-line);
  background: var(--client-chip-bg);
  color: var(--client-chip-text);
  box-shadow: var(--client-chip-shadow);
}

html[data-theme="light"] .flowStep:hover,
html[data-theme="light"] .coinBtn:hover,
html[data-theme="light"] .moreTab:hover,
html[data-theme="light"] .profileModal .pillBtn:hover,
html[data-theme="light"] .shipMethodChip:hover,
html[data-theme="light"] .copyChip:hover{
  background: var(--client-chip-bg-hover);
  border-color: rgba(39,139,91,.18);
  color: var(--client-ink);
}

html[data-theme="light"] .flowStep.is-active,
html[data-theme="light"] .coinBtn.is-active,
html[data-theme="light"] .moreTab.is-active,
html[data-theme="light"] .profileModal .pillBtn--solid,
html[data-theme="light"] .profileModal .pillBtn--accent,
html[data-theme="light"] .shipMethodChip.is-active,
html[data-theme="light"] .invoiceCoinPill.is-active,
html[data-theme="light"] .copyChip.is-active{
  background: var(--client-chip-bg-active);
  border-color: var(--client-chip-line-active);
  color: var(--client-chip-text-active);
  box-shadow: var(--client-chip-shadow-active);
}

html[data-theme="light"] .flowStep.is-active *,
html[data-theme="light"] .coinBtn.is-active *,
html[data-theme="light"] .moreTab.is-active *,
html[data-theme="light"] .profileModal .pillBtn--solid *,
html[data-theme="light"] .profileModal .pillBtn--accent *,
html[data-theme="light"] .shipMethodChip.is-active *,
html[data-theme="light"] .invoiceCoinPill.is-active *,
html[data-theme="light"] .copyChip.is-active *{
  color: inherit;
}

html[data-theme="light"] .flowStep.is-active,
html[data-theme="light"] .flowStep.is-active .flowStep__title,
html[data-theme="light"] .flowStep.is-active .flowStep__label,
html[data-theme="light"] .flowStep.is-active .flowStep__sub,
html[data-theme="light"] .flowStep.is-active .flowStep__num,
html[data-theme="light"] .coinBtn.is-active,
html[data-theme="light"] .coinBtn.is-active .coinBtn__label,
html[data-theme="light"] .coinBtn.is-active .coinBtn__sub,
html[data-theme="light"] .moreTab.is-active,
html[data-theme="light"] .profileModal .pillBtn--solid,
html[data-theme="light"] .profileModal .pillBtn--accent{
  color: rgba(255,255,255,.98) !important;
}

html[data-theme="light"] .flowStep.is-active .flowStep__num,
html[data-theme="light"] .coinBtn.is-active .coinBtn__icon,
html[data-theme="light"] .profileModal .pillBtn--solid .pillBtn__icon,
html[data-theme="light"] .profileModal .pillBtn--accent .pillBtn__icon,
html[data-theme="light"] .invoiceCoinPill.is-active .invoiceCoinPill__icon{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

html[data-theme="light"] .flowStep.is-done{
  background: linear-gradient(180deg, rgba(238,248,242,.98), rgba(229,241,234,.94));
  border-color: rgba(39,139,91,.18);
  color: rgba(24,79,54,.90);
  box-shadow: var(--client-chip-shadow);
}
html[data-theme="light"] .flowStep.is-done .flowStep__sub,
html[data-theme="light"] .flowStep.is-done .flowStep__meta{
  color: rgba(24,79,54,.72) !important;
}

/* Currency selector cards in Payment step */
html[data-theme="light"] .coinBtn{
  min-height: 52px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,238,.94));
}
html[data-theme="light"] .coinBtn__icon,
html[data-theme="light"] .invoiceCoinPill__icon{
  background: linear-gradient(180deg, rgba(241,248,243,.98), rgba(227,240,232,.94));
  border: 1px solid rgba(39,139,91,.16);
  color: rgba(24,79,54,.96);
}
html[data-theme="light"] .coinBtn.is-active .coinBtn__icon{
  color: rgba(255,255,255,.98);
}

/* Profile -> More tabs */
html[data-theme="light"] .moreTab{
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,238,.94));
}
html[data-theme="light"] .moreTab.is-active{
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}

/* Order list readability */
html[data-theme="light"] .orderCard,
html[data-theme="light"] .updateCard,
html[data-theme="light"] .orderInvoiceRow,
html[data-theme="light"] .orderConfirmBox,
html[data-theme="light"] .orderPayStat,
html[data-theme="light"] .orderPayAddr__val,
html[data-theme="light"] .orderPayTx__coin,
html[data-theme="light"] .otlTx__coin,
html[data-theme="light"] .orderInfo{
  border-color: var(--client-line-mid);
  background: var(--client-surface-bg);
  box-shadow: var(--client-shadow-unified);
}
html[data-theme="light"] .orderCard:hover,
html[data-theme="light"] .updateCard:hover,
html[data-theme="light"] .orderInvoiceRow:hover{
  border-color: rgba(39,139,91,.18);
  background: linear-gradient(180deg, rgba(248,252,249,.98), rgba(240,246,242,.94));
}
html[data-theme="light"] .orderTitle,
html[data-theme="light"] .updateTitle,
html[data-theme="light"] .orderInvoiceRow__t,
html[data-theme="light"] .orderPayTitle,
html[data-theme="light"] .orderPayStat__v,
html[data-theme="light"] .orderPayAddr__val,
html[data-theme="light"] .orderInfo,
html[data-theme="light"] .otl__label,
html[data-theme="light"] .invoiceMeta__value,
html[data-theme="light"] .invoiceMeta__value *{
  color: var(--client-ink);
}
html[data-theme="light"] .orderMeta,
html[data-theme="light"] .updateMeta,
html[data-theme="light"] .orderItemsPreview,
html[data-theme="light"] .orderShipBrief,
html[data-theme="light"] .orderConfirmBox__meta,
html[data-theme="light"] .orderConfirmBox__hint,
html[data-theme="light"] .orderPayAddr__label,
html[data-theme="light"] .orderPayMeta,
html[data-theme="light"] .orderPayStat__k,
html[data-theme="light"] .orderPayTx__conf,
html[data-theme="light"] .otl__note,
html[data-theme="light"] .otlTx__conf,
html[data-theme="light"] .invoiceMeta__label{
  color: var(--client-ink-muted);
}

html[data-theme="light"] .orderDot,
html[data-theme="light"] .updateDot{
  background: linear-gradient(180deg, rgba(39,139,91,.98), rgba(24,112,71,.98));
  box-shadow: 0 0 0 5px rgba(39,139,91,.12);
}
html[data-theme="light"] .orderDot.is-read,
html[data-theme="light"] .updateDot.is-read{
  background: rgba(15,27,20,.22);
  box-shadow: 0 0 0 4px rgba(15,27,20,.06);
}

/* Status / badges in orders */
html[data-theme="light"] .orderBadge,
html[data-theme="light"] .statusPill,
html[data-theme="light"] .profileModal .orderConfirmMini .pillBtn{
  font-weight: 700;
}
html[data-theme="light"] .orderBadge--ok,
html[data-theme="light"] .statusPill--ok,
html[data-theme="light"] .statusPill--open{
  background: linear-gradient(180deg, rgba(233,246,238,.98), rgba(222,240,229,.94));
  border-color: rgba(39,139,91,.24);
  color: rgba(24,79,54,.96);
}
html[data-theme="light"] .orderBadge--warn,
html[data-theme="light"] .statusPill--warn{
  background: var(--client-status-amber-bg);
  border-color: var(--client-status-amber-line);
  color: var(--client-status-amber-text);
}
html[data-theme="light"] .orderBadge--bad,
html[data-theme="light"] .statusPill--bad,
html[data-theme="light"] .statusPill--cancelled{
  background: var(--client-status-red-bg);
  border-color: var(--client-status-red-line);
  color: var(--client-status-red-text);
}
html[data-theme="light"] .statusPill--resolved{
  background: linear-gradient(180deg, rgba(236,243,255,.98), rgba(226,236,251,.94));
  border-color: rgba(88,132,210,.24);
  color: rgba(41,76,140,.96);
}

/* Order detail progress needs stronger circles/text */
html[data-theme="light"] .otl__dot{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: rgba(15,27,20,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,242,236,.94));
  box-shadow: var(--client-chip-shadow);
}
html[data-theme="light"] .otl__bullet{
  color: rgba(15,27,20,.64);
  opacity: 1;
}
html[data-theme="light"] .otl__step.is-done .otl__dot{
  border-color: rgba(39,139,91,.24);
  background: linear-gradient(180deg, rgba(233,246,238,.98), rgba(222,240,229,.94));
}
html[data-theme="light"] .otl__step.is-cur .otl__dot{
  border-color: rgba(196,146,55,.28);
  background: var(--client-status-amber-bg);
  box-shadow: 0 0 0 6px rgba(196,146,55,.10);
}
html[data-theme="light"] .otl__check{
  color: rgba(24,79,54,.98);
}
html[data-theme="light"] .otl__step.is-cur .otl__label,
html[data-theme="light"] .otl__step.is-cur .otl__note{
  color: rgba(121,88,28,.96);
}

/* Top action button in order details (Support / etc.) */
html[data-theme="light"] .profileModal .pillBtn--solid,
html[data-theme="light"] .profileModal .pillBtn--accent{
  padding-left: 14px;
  padding-right: 14px;
  min-width: 92px;
  justify-content: center;
}
html[data-theme="light"] .profileModal .pillBtn:not(.pillBtn--solid):not(.pillBtn--accent):not(.pillBtn--danger){
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,238,.94));
  border: 1px solid var(--client-chip-line);
  color: var(--client-chip-text);
}
html[data-theme="light"] .profileModal .pillBtn--danger{
  border: 1px solid var(--client-status-red-line);
  background: var(--client-status-red-bg);
  color: var(--client-status-red-text);
}

/* Checkout sections on light theme should have crisp titles and dividers */
html[data-theme="light"] .checkoutCard,
html[data-theme="light"] .checkoutBreakdown,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceItems,
html[data-theme="light"] .invoiceDeliver,
html[data-theme="light"] .invDetailsCard{
  box-shadow: var(--client-shadow-unified);
}
html[data-theme="light"] .checkoutCard__title,
html[data-theme="light"] .checkoutSection__title,
html[data-theme="light"] .checkoutBreakdown__title,
html[data-theme="light"] .invoicePayCard__title,
html[data-theme="light"] .invoiceItems__title,
html[data-theme="light"] .invoiceDeliver__title,
html[data-theme="light"] .invDetailsTx__title,
html[data-theme="light"] .invoiceAccessQuick__title{
  letter-spacing: -.015em;
}
html[data-theme="light"] .checkoutPayTotals,
html[data-theme="light"] .checkoutTotals,
html[data-theme="light"] .invoiceTotals,
html[data-theme="light"] .invoiceBlock,
html[data-theme="light"] .orderConfirmMini,
html[data-theme="light"] .orderPayTxs,
html[data-theme="light"] .otl__txs{
  border-top-color: var(--client-line-mid);
}

/* ===== Light theme v10: hierarchy tuning for checkout + cards ===== */
html[data-theme="light"]{
  --client-step-bg: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,242,236,.94));
  --client-step-line: rgba(15,27,20,.12);
  --client-step-active-bg: linear-gradient(180deg, rgba(227,243,233,.98), rgba(212,234,221,.95));
  --client-step-active-line: rgba(46,134,91,.28);
  --client-step-active-text: rgba(24,79,54,.98);
  --client-step-shadow: 0 8px 18px rgba(15,27,20,.06);
  --client-step-shadow-active: 0 10px 22px rgba(39,139,91,.10);

  --client-choice-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,238,.95));
  --client-choice-line: rgba(15,27,20,.11);
  --client-choice-text: rgba(15,27,20,.90);
  --client-choice-active-bg: linear-gradient(180deg, rgba(233,246,238,.99), rgba(222,241,230,.96));
  --client-choice-active-line: rgba(52,136,95,.24);
  --client-choice-active-text: rgba(25,82,56,.98);
  --client-choice-shadow: 0 8px 18px rgba(15,27,20,.06);
  --client-choice-shadow-active: 0 10px 22px rgba(39,139,91,.09);

  --client-save-bg: linear-gradient(180deg, rgba(255,247,231,.98), rgba(248,238,213,.96));
  --client-save-line: rgba(196,146,55,.24);
  --client-save-text: rgba(116,84,25,.98);
}

/* Top checkout steps: softer and clearly secondary to bottom CTA */
html[data-theme="light"] .checkoutFlow{
  gap: 12px;
}
html[data-theme="light"] .flowStep{
  background: var(--client-step-bg) !important;
  border-color: var(--client-step-line) !important;
  color: rgba(15,27,20,.62) !important;
  box-shadow: var(--client-step-shadow) !important;
  transform: none;
}
html[data-theme="light"] .flowStep:hover{
  border-color: rgba(39,139,91,.16) !important;
  background: linear-gradient(180deg, rgba(251,253,252,.98), rgba(244,248,245,.95)) !important;
  color: rgba(15,27,20,.82) !important;
}
html[data-theme="light"] .flowStep.is-active{
  background: var(--client-step-active-bg) !important;
  border-color: var(--client-step-active-line) !important;
  color: var(--client-step-active-text) !important;
  box-shadow: var(--client-step-shadow-active) !important;
}
html[data-theme="light"] .flowStep.is-active .flowStep__title,
html[data-theme="light"] .flowStep.is-active .flowStep__label,
html[data-theme="light"] .flowStep.is-active .flowStep__sub,
html[data-theme="light"] .flowStep.is-active .flowStep__meta{
  color: var(--client-step-active-text) !important;
}
html[data-theme="light"] .flowStep.is-active .flowStep__num{
  background: rgba(255,255,255,.68) !important;
  border-color: rgba(52,136,95,.20) !important;
  color: var(--client-step-active-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .flowStep.is-done{
  background: linear-gradient(180deg, rgba(245,249,246,.98), rgba(236,243,238,.95)) !important;
  border-color: rgba(39,139,91,.16) !important;
  color: rgba(24,79,54,.82) !important;
  box-shadow: var(--client-step-shadow) !important;
}

/* BTC / LTC selector: gentler than primary actions */
html[data-theme="light"] .coinBtn{
  background: var(--client-choice-bg) !important;
  border-color: var(--client-choice-line) !important;
  color: var(--client-choice-text) !important;
  box-shadow: var(--client-choice-shadow) !important;
}
html[data-theme="light"] .coinBtn:hover{
  background: linear-gradient(180deg, rgba(252,253,252,.98), rgba(244,248,245,.95)) !important;
  border-color: rgba(39,139,91,.15) !important;
  color: rgba(15,27,20,.94) !important;
}
html[data-theme="light"] .coinBtn__icon,
html[data-theme="light"] .invoiceCoinPill__icon{
  background: linear-gradient(180deg, rgba(241,248,243,.98), rgba(229,240,233,.95)) !important;
  border-color: rgba(39,139,91,.14) !important;
  color: rgba(25,82,56,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .coinBtn.is-active{
  background: var(--client-choice-active-bg) !important;
  border-color: var(--client-choice-active-line) !important;
  color: var(--client-choice-active-text) !important;
  box-shadow: var(--client-choice-shadow-active) !important;
}
html[data-theme="light"] .coinBtn.is-active .coinBtn__label,
html[data-theme="light"] .coinBtn.is-active .coinBtn__sub{
  color: var(--client-choice-active-text) !important;
}
html[data-theme="light"] .coinBtn.is-active .coinBtn__icon{
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(52,136,95,.18) !important;
  color: var(--client-choice-active-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

/* Preserve stronger hierarchy for main action buttons */
html[data-theme="light"] .checkoutNav .btn--primary,
html[data-theme="light"] .checkoutNav .pillBtn--solid,
html[data-theme="light"] .checkoutNav .pillBtn--accent,
html[data-theme="light"] .checkoutNav .supportComposer__send,
html[data-theme="light"] .checkoutModal .btn--primary,
html[data-theme="light"] .invoiceDetailsModal .btn--primary{
  background: linear-gradient(180deg, rgba(39,139,91,.98), rgba(28,120,77,.98)) !important;
  border-color: rgba(26,107,69,.92) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(39,139,91,.18) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
html[data-theme="light"] .checkoutNav .btn:not(.btn--primary):not(.pillBtn--solid):not(.pillBtn--accent),
html[data-theme="light"] .invoiceDetailsModal .btn:not(.btn--primary):not(.pillBtn--solid):not(.pillBtn--accent){
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.95)) !important;
  border-color: rgba(15,27,20,.12) !important;
  color: rgba(15,27,20,.78) !important;
  box-shadow: 0 8px 18px rgba(15,27,20,.06) !important;
}

/* Savings pill on cards: less neon, better contrast */
html[data-theme="light"] .bulkInfo__save,
html[data-theme="light"] .savePill,
html[data-theme="light"] .cardSave,
html[data-theme="light"] .productCard__save{
  background: var(--client-save-bg) !important;
  border: 1px solid var(--client-save-line) !important;
  color: var(--client-save-text) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(196,146,55,.10), inset 0 1px 0 rgba(255,255,255,.58);
}

/* Order list / order detail chips with better hierarchy */
html[data-theme="light"] .moreTab{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.95)) !important;
  border-color: rgba(15,27,20,.12) !important;
  color: rgba(15,27,20,.84) !important;
  box-shadow: 0 8px 18px rgba(15,27,20,.06) !important;
}
html[data-theme="light"] .moreTab.is-active{
  background: linear-gradient(180deg, rgba(233,246,238,.99), rgba(222,241,230,.96)) !important;
  border-color: rgba(52,136,95,.24) !important;
  color: rgba(25,82,56,.98) !important;
  box-shadow: 0 10px 22px rgba(39,139,91,.09) !important;
  text-shadow: none;
}
html[data-theme="light"] .profileModal .pillBtn--solid,
html[data-theme="light"] .profileModal .pillBtn--accent,
html[data-theme="light"] .profileModal .supportQuickBtn,
html[data-theme="light"] .profileModal #ordersQuickBtn,
html[data-theme="light"] .profileModal #supportQuickBtn{
  background: linear-gradient(180deg, rgba(39,139,91,.98), rgba(28,120,77,.98)) !important;
  border-color: rgba(26,107,69,.92) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(39,139,91,.18) !important;
}

/* Slightly calmer but clearer order surfaces */
html[data-theme="light"] .orderCard,
html[data-theme="light"] .updateCard,
html[data-theme="light"] .profileSection--orderDetail .profileSection,
html[data-theme="light"] .profileSection--orderDetail .invoiceBlock,
html[data-theme="light"] .orderInvoiceRow,
html[data-theme="light"] .orderConfirmBox,
html[data-theme="light"] .orderPayStat,
html[data-theme="light"] .orderPayAddr__val,
html[data-theme="light"] .orderInfo{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,242,236,.95)) !important;
  border-color: rgba(15,27,20,.11) !important;
  box-shadow: 0 14px 30px rgba(15,27,20,.08) !important;
}


/* ===== Light theme v11: checkout / invoice final readability pass ===== */
html[data-theme="light"]{
  --client-step-bg-soft: linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,243,237,.955));
  --client-step-bg-active-soft: linear-gradient(180deg, rgba(233,245,238,.99), rgba(223,240,230,.965));
  --client-choice-bg-soft: linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,244,238,.955));
  --client-choice-bg-active-soft: linear-gradient(180deg, rgba(238,248,242,.99), rgba(228,243,234,.965));
  --client-checkout-surface: linear-gradient(180deg, rgba(255,255,255,.992), rgba(247,243,237,.968));
  --client-checkout-surface-soft: linear-gradient(180deg, rgba(255,255,255,.988), rgba(250,247,242,.965));
  --client-checkout-surface-white: linear-gradient(180deg, rgba(255,255,255,.998), rgba(252,250,246,.975));
  --client-checkout-shadow-soft: 0 12px 26px rgba(15,27,20,.065);
  --client-checkout-shadow-step: 0 7px 15px rgba(15,27,20,.05);
  --client-choice-shadow-soft: 0 8px 18px rgba(15,27,20,.055);
  --client-choice-shadow-active-soft: 0 10px 20px rgba(39,139,91,.08);
  --client-required-bg: linear-gradient(180deg, rgba(255,246,228,.99), rgba(248,235,205,.965));
  --client-required-line: rgba(191,142,49,.30);
  --client-required-text: rgba(127,88,21,.98);
  --client-save-bg: linear-gradient(180deg, rgba(255,244,222,.99), rgba(246,232,196,.965));
  --client-save-line: rgba(186,136,42,.28);
  --client-save-text: rgba(112,76,16,.98);
}

html[data-theme="light"] .checkoutCard,
html[data-theme="light"] .invoicePayCard,
html[data-theme="light"] .invoiceItems,
html[data-theme="light"] .invoiceDeliver,
html[data-theme="light"] .invoiceHead,
html[data-theme="light"] .invoiceAccessQuick,
html[data-theme="light"] .checkoutShipTo,
html[data-theme="light"] .checkoutPayItem,
html[data-theme="light"] .checkoutCartRow,
html[data-theme="light"] .invoiceItemCard,
html[data-theme="light"] .copyChip,
html[data-theme="light"] .invoiceCoinPill,
html[data-theme="light"] .invoiceTimer{
  background: var(--client-checkout-surface) !important;
  box-shadow: var(--client-checkout-shadow-soft) !important;
}

html[data-theme="light"] .checkoutBreakdown,
html[data-theme="light"] .invoiceVisual,
html[data-theme="light"] .invoiceRemain,
html[data-theme="light"] .invoiceConfirm,
html[data-theme="light"] .invDetailsCard,
html[data-theme="light"] .invDetailsTx,
html[data-theme="light"] .invDetailsTxRow{
  background: var(--client-checkout-surface-soft) !important;
}

html[data-theme="light"] .checkoutCard,
html[data-theme="light"] .invoicePayCard{
  background: var(--client-checkout-surface) !important;
}

html[data-theme="light"] .flowStep{
  background: var(--client-step-bg-soft) !important;
  box-shadow: var(--client-checkout-shadow-step) !important;
  color: rgba(15,27,20,.68) !important;
}
html[data-theme="light"] .flowStep.is-active{
  background: var(--client-step-bg-active-soft) !important;
  border-color: rgba(52,136,95,.22) !important;
  box-shadow: 0 8px 16px rgba(39,139,91,.07) !important;
  color: rgba(24,79,54,.96) !important;
}
html[data-theme="light"] .flowStep.is-done{
  box-shadow: var(--client-checkout-shadow-step) !important;
}

html[data-theme="light"] .coinBtn,
html[data-theme="light"] .invoiceCoinPill{
  background: var(--client-choice-bg-soft) !important;
  box-shadow: var(--client-choice-shadow-soft) !important;
}
html[data-theme="light"] .coinBtn.is-active,
html[data-theme="light"] .invoiceCoinPill.is-active{
  background: var(--client-choice-bg-active-soft) !important;
  border-color: rgba(52,136,95,.22) !important;
  box-shadow: var(--client-choice-shadow-active-soft) !important;
  color: rgba(24,79,54,.97) !important;
}
html[data-theme="light"] .coinBtn.is-active .coinBtn__text,
html[data-theme="light"] .coinBtn.is-active .coinBtn__label,
html[data-theme="light"] .invoiceCoinPill.is-active .invoiceCoinPill__text{
  color: rgba(24,79,54,.97) !important;
}
html[data-theme="light"] .coinBtn.is-active .coinBtn__icon,
html[data-theme="light"] .invoiceCoinPill.is-active .invoiceCoinPill__icon{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(52,136,95,.16) !important;
  color: rgba(24,79,54,.98) !important;
}

html[data-theme="light"] .invoiceVisual{
  background: var(--client-checkout-surface-white) !important;
  border-color: rgba(15,27,20,.08) !important;
}
html[data-theme="light"] .invoiceVisual__box,
html[data-theme="light"] .invoiceVisual__state{
  background: var(--client-checkout-surface-white) !important;
}
html[data-theme="light"] .invoiceVisual__state{
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
html[data-theme="light"] .invoiceVisual__status{
  display: none !important;
}
html[data-theme="light"] .invoiceQr__box{
  background: #ffffff !important;
  border-color: rgba(15,27,20,.10) !important;
  box-shadow: 0 16px 32px rgba(15,27,20,.10) !important;
}
html[data-theme="light"] .invStateBg{
  stroke: rgba(15,27,20,.12) !important;
}
html[data-theme="light"] .invStateFg{
  stroke: rgba(111,208,123,.92) !important;
}
html[data-theme="light"] .invStateCheck{
  stroke: rgba(37,137,82,.96) !important;
  filter: drop-shadow(0 10px 18px rgba(39,139,91,.10));
}

html[data-theme="light"] .invoiceVisual__label,
html[data-theme="light"] .invoiceVisual__help,
html[data-theme="light"] .invoiceAmount__sub,
html[data-theme="light"] .checkoutHint,
html[data-theme="light"] .shipVal__meta,
html[data-theme="light"] .invoiceDeliver__metaRow,
html[data-theme="light"] .invoiceDeliver__notes,
html[data-theme="light"] .invoiceItemCard__variant,
html[data-theme="light"] .invoiceItemCard__subRow,
html[data-theme="light"] .invoiceBlock__title,
html[data-theme="light"] .invoiceMeta__label,
html[data-theme="light"] .orderMeta,
html[data-theme="light"] .orderShipBrief,
html[data-theme="light"] .orderItemsPreview{
  color: var(--client-ink-muted) !important;
}

html[data-theme="light"] .invoiceDeliver__val,
html[data-theme="light"] .invoiceDelivery,
html[data-theme="light"] .invoiceDelivery *,
html[data-theme="light"] .invoiceItemCard__title,
html[data-theme="light"] .invoiceItemCard__price,
html[data-theme="light"] .invoiceItemCard__qtyChip,
html[data-theme="light"] .invoiceBlock .invoiceMeta__value,
html[data-theme="light"] .invoiceBlock .invoiceMeta__value *,
html[data-theme="light"] #checkoutStep1,
html[data-theme="light"] #checkoutStep2,
html[data-theme="light"] #checkoutStep3{
  color: var(--client-ink) !important;
}
html[data-theme="light"] .invoiceItemCard__qtyChip{
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(15,27,20,.10) !important;
}
html[data-theme="light"] .invoiceBlock__title{
  letter-spacing: .02em;
}

html[data-theme="light"] .invoiceAccessQuick__badge,
html[data-theme="light"] .requiredChip,
html[data-theme="light"] .pillBtn--required{
  background: var(--client-required-bg) !important;
  border-color: var(--client-required-line) !important;
  color: var(--client-required-text) !important;
  box-shadow: 0 8px 18px rgba(191,142,49,.10), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

html[data-theme="light"] .bulkInfo__save,
html[data-theme="light"] .savePill,
html[data-theme="light"] .cardSave,
html[data-theme="light"] .productCard__save{
  background: var(--client-save-bg) !important;
  border-color: var(--client-save-line) !important;
  color: var(--client-save-text) !important;
  box-shadow: 0 8px 16px rgba(186,136,42,.09), inset 0 1px 0 rgba(255,255,255,.58) !important;
}

html[data-theme="light"] .checkoutNav{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,244,238,.985)) !important;
}
html[data-theme="light"] .checkoutNav .btn:not(.btn--primary):not(.pillBtn--solid):not(.pillBtn--accent),
html[data-theme="light"] .invoiceDetailsModal .btn:not(.btn--primary):not(.pillBtn--solid):not(.pillBtn--accent){
  color: rgba(15,27,20,.84) !important;
}

html[data-theme="light"] .checkoutCard .field__label,
html[data-theme="light"] .checkoutCard .field__hint,
html[data-theme="light"] .checkoutPayTotals__row > div:first-child,
html[data-theme="light"] .checkoutTotals__row > div:first-child,
html[data-theme="light"] .checkoutShipTo__label,
html[data-theme="light"] .invoiceOrder__label,
html[data-theme="light"] .invoiceStatus__label{
  color: var(--client-ink-muted) !important;
}
html[data-theme="light"] .checkoutCard .field__input,
html[data-theme="light"] .checkoutCard .field__textarea,
html[data-theme="light"] .checkoutCard select,
html[data-theme="light"] .checkoutCard input{
  color: var(--client-ink) !important;
}
html[data-theme="light"] .checkoutCard input::placeholder,
html[data-theme="light"] .checkoutCard textarea::placeholder{
  color: rgba(15,27,20,.44) !important;
}


/* ===== Theme hierarchy fix: generic pill buttons + age gate dark-only ===== */
html[data-theme="dark"]{
  --pill-btn-text: rgba(244,247,245,.92);
  --pill-btn-bg: rgba(255,255,255,0);
  --pill-btn-border: rgba(255,255,255,0);
  --pill-btn-shadow: none;
}
html[data-theme="light"]{
  --pill-btn-text: rgba(28,37,33,.88);
  --pill-btn-bg: rgba(255,255,255,.92);
  --pill-btn-border: rgba(26,38,31,.12);
  --pill-btn-shadow: 0 8px 18px rgba(17,25,20,.06);
}
html[data-theme="light"] .pillBtn:not(.pillBtn--danger):not(.pillBtn--solid):not(.pillBtn--accent):not(.pillBtn--required){
  color: var(--pill-btn-text) !important;
  background: var(--pill-btn-bg) !important;
  border-color: var(--pill-btn-border) !important;
  box-shadow: var(--pill-btn-shadow) !important;
}
html[data-theme="light"] .pillBtn:not(.pillBtn--danger):not(.pillBtn--solid):not(.pillBtn--accent):not(.pillBtn--required) *{
  color: inherit !important;
}

/* Age gate must always render in dark theme regardless of saved client preference. */
html[data-age-gate="1"],
html[data-age-gate="1"] body{
  color-scheme: dark !important;
}
html[data-age-gate="1"] body{
  color: var(--text) !important;
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0, #0b1310), var(--sheet-bg1, #0f1913)) !important;
}


/* v8: keep Why order icons/subtext visible on mobile exactly like desktop */
@media (max-width: 520px){
  .whyIcon,
  .whyIcons .whyIcon{
    flex-direction: row;
    align-items: center;
  }
  .whyIcon__text,
  .whyIcons .whyIcon__text{
    display: block;
    min-width: 0;
  }
  .whyIcon__label,
  .whyIcon__sub{
    display: block;
  }
}


/* ===== Support action confirm modal refinements ===== */
.confirmModal{
  --confirm-icon-bg: linear-gradient(180deg, rgba(123,196,127,.14), rgba(107,179,111,.06));
  --confirm-icon-border: rgba(123,196,127,.18);
  --confirm-icon-color: rgba(236,243,238,.96);
  --confirm-primary-bg: linear-gradient(180deg, rgba(123,196,127,.98), rgba(107,179,111,.98));
  --confirm-primary-color: #08110b;
  --confirm-primary-shadow: 0 16px 34px rgba(79,143,95,.22);
}
.confirmModal[data-variant="cancel"]{
  --confirm-icon-bg: linear-gradient(180deg, rgba(231,113,103,.16), rgba(176,70,61,.08));
  --confirm-icon-border: rgba(231,113,103,.20);
  --confirm-icon-color: rgba(255,240,238,.98);
  --confirm-primary-bg: linear-gradient(180deg, rgba(226,111,101,.98), rgba(198,79,69,.98));
  --confirm-primary-color: #ffffff;
  --confirm-primary-shadow: 0 16px 34px rgba(176,70,61,.22);
}
.confirmModal[data-variant="reopen"],
.confirmModal[data-variant="resolve"]{
  --confirm-icon-bg: linear-gradient(180deg, rgba(123,196,127,.16), rgba(88,154,100,.08));
  --confirm-icon-border: rgba(123,196,127,.20);
  --confirm-icon-color: rgba(236,243,238,.98);
  --confirm-primary-bg: linear-gradient(180deg, rgba(123,196,127,.98), rgba(107,179,111,.98));
  --confirm-primary-color: #08110b;
  --confirm-primary-shadow: 0 16px 34px rgba(79,143,95,.22);
}
.confirmModal__panel{
  width: min(430px, calc(100vw - 18px));
  border-radius: 28px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.16), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.08), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0, #0b1310), var(--sheet-bg1, #0f1913));
  box-shadow: 0 24px 72px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.confirmModal__handle{
  margin: 2px auto 14px;
  background: rgba(255,255,255,.14);
}
.confirmModal__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--confirm-icon-bg);
  border: 1px solid var(--confirm-icon-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.18);
  color: var(--confirm-icon-color);
}
.confirmModal__icon svg{
  width: 30px;
  height: 30px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}
.confirmModal__title{
  margin-top: 0;
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 800;
  text-align: center;
  color: rgba(245,247,250,.98);
}
.confirmModal__text{
  margin-top: 8px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(221,227,234,.76);
  text-align: center;
  font-weight: 650;
  line-height: 1.46;
  font-size: 14px;
}
.confirmModal__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.confirmModal__actions .btn{
  min-height: 52px;
  border-radius: 17px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.confirmModal__actions .btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(243,246,249,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.confirmModal__actions .btn--primary,
.confirmModal__actions #confirmOkBtn{
  background: var(--confirm-primary-bg);
  color: var(--confirm-primary-color);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--confirm-primary-shadow);
}
.confirmModal__actions .btn--ghost:hover,
.confirmModal__actions .btn--primary:hover,
.confirmModal__actions #confirmOkBtn:hover{
  transform: translateY(-1px);
}
.confirmModal__actions .btn:active{ transform: translateY(1px); }
html[data-theme="light"] .confirmModal{
  --confirm-icon-bg: linear-gradient(180deg, rgba(44,133,87,.11), rgba(44,133,87,.05));
  --confirm-icon-border: rgba(44,133,87,.14);
  --confirm-icon-color: rgba(28,65,46,.92);
  --confirm-primary-bg: linear-gradient(180deg, rgba(52,155,101,.98), rgba(38,136,88,.98));
  --confirm-primary-color: #ffffff;
  --confirm-primary-shadow: 0 16px 32px rgba(38,136,88,.16);
}
html[data-theme="light"] .confirmModal[data-variant="cancel"]{
  --confirm-icon-bg: linear-gradient(180deg, rgba(221,113,103,.12), rgba(221,113,103,.05));
  --confirm-icon-border: rgba(221,113,103,.16);
  --confirm-icon-color: rgba(135,43,37,.92);
  --confirm-primary-bg: linear-gradient(180deg, rgba(223,106,96,.98), rgba(201,78,68,.98));
  --confirm-primary-color: #ffffff;
  --confirm-primary-shadow: 0 16px 32px rgba(201,78,68,.16);
}
html[data-theme="light"] .confirmModal[data-variant="reopen"],
html[data-theme="light"] .confirmModal[data-variant="resolve"]{
  --confirm-icon-bg: linear-gradient(180deg, rgba(44,133,87,.11), rgba(44,133,87,.05));
  --confirm-icon-border: rgba(44,133,87,.14);
  --confirm-icon-color: rgba(28,65,46,.92);
}
html[data-theme="light"] .confirmModal__panel{
  border-color: rgba(15,27,20,.08);
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.12), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.06), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0, #ffffff), var(--sheet-bg1, #f3f0e8));
  box-shadow: 0 24px 72px rgba(15,27,20,.14), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .confirmModal__handle{ background: rgba(15,27,20,.14); }
html[data-theme="light"] .confirmModal__title{ color: rgba(15,27,20,.92); }
html[data-theme="light"] .confirmModal__text{ color: rgba(15,27,20,.68); }
html[data-theme="light"] .confirmModal__actions .btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,240,234,.96));
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(15,27,20,.05);
}
html[data-theme="light"] .confirmModal__icon svg{ stroke: currentColor; }
@media (max-width: 560px){
  .confirmModal__panel{ width: min(420px, calc(100vw - 14px)); border-radius: 28px; }
  .confirmModal__icon{ width: 64px; height: 64px; border-radius: 20px; }
  .confirmModal__icon svg{ width: 30px; height: 30px; }
  .confirmModal__title{ font-size: 26px; }
  .confirmModal__text{ max-width: 290px; font-size: 14px; }
  .confirmModal__actions .btn{ min-height: 52px; font-size: 15px; }
}


/* Stage 16: support confirm modal retone + centered icon */
.confirmModal__panel{
  border-radius: 28px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(123,196,127,.14);
  background:
    radial-gradient(680px 260px at 50% -24%, rgba(123,196,127,.14), rgba(123,196,127,0) 58%),
    radial-gradient(560px 220px at 88% 0%, rgba(255,196,92,.08), rgba(255,196,92,0) 62%),
    linear-gradient(180deg, rgba(8,14,11,.96), rgba(4,9,7,.985));
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
}
.confirmModal__handle{
  width: 50px;
  height: 5px;
  margin: 2px auto 14px;
  background: rgba(255,255,255,.16);
}
.confirmModal__icon{
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  display:grid;
  place-items:center;
  border-radius: 22px;
  color: rgba(244,248,245,.96);
  background: linear-gradient(180deg, rgba(123,196,127,.16), rgba(123,196,127,.08));
  border: 1px solid rgba(123,196,127,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.22);
}
.confirmModal__icon svg{
  width: 30px;
  height: 30px;
  display:block;
}
.confirmModal__title{
  margin-top: 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 900;
  text-align:center;
  color: rgba(244,248,245,.98);
}
.confirmModal__text{
  margin-top: 10px;
  color: rgba(232,240,235,.76);
  text-align:center;
  font-weight: 650;
  line-height: 1.45;
  font-size: 15px;
  max-width: 34ch;
  margin-left:auto;
  margin-right:auto;
}
.confirmModal__actions{
  display:flex;
  gap: 12px;
  margin-top: 18px;
}
.confirmModal__actions .btn{
  min-height: 54px;
  border-radius: 18px;
  font-weight: 850;
}
.confirmModal__actions .btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  color: rgba(242,246,243,.92);
}
.confirmModal__actions .btn--ghost:hover{
  background: rgba(255,255,255,.06);
}
.confirmModal[data-variant="reopen"] #confirmOkBtn,
.confirmModal[data-variant="resolve"] #confirmOkBtn{
  background: linear-gradient(180deg, rgba(123,196,127,.98), rgba(78,164,104,.94));
  border-color: rgba(94,177,119,.92);
  color: rgba(10,18,13,.94);
  box-shadow: 0 18px 34px rgba(83,170,109,.22);
}
.confirmModal[data-variant="cancel"] #confirmOkBtn{
  background: linear-gradient(180deg, rgba(226,119,107,.98), rgba(208,96,85,.95));
  border-color: rgba(218,112,100,.94);
  color: #fff;
  box-shadow: 0 18px 34px rgba(226,119,107,.20);
}
.confirmModal[data-variant="cancel"] .confirmModal__icon{
  background: linear-gradient(180deg, rgba(226,119,107,.16), rgba(226,119,107,.08));
  border-color: rgba(226,119,107,.24);
}
html[data-theme="light"] .confirmModal__panel{
  border-color: rgba(15,27,20,.10);
  background:
    radial-gradient(680px 260px at 50% -24%, rgba(123,196,127,.10), rgba(123,196,127,0) 58%),
    radial-gradient(560px 220px at 88% 0%, rgba(224,181,106,.09), rgba(224,181,106,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(244,240,232,.97));
  box-shadow: 0 28px 72px rgba(15,27,20,.16);
}
html[data-theme="light"] .confirmModal__handle{ background: rgba(15,27,20,.14); }
html[data-theme="light"] .confirmModal__icon{
  color: rgba(15,27,20,.92);
  background: linear-gradient(180deg, rgba(123,196,127,.14), rgba(123,196,127,.08));
  border-color: rgba(94,177,119,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 16px 30px rgba(15,27,20,.10);
}
html[data-theme="light"] .confirmModal__title{ color: rgba(15,27,20,.94); }
html[data-theme="light"] .confirmModal__text{ color: rgba(15,27,20,.68); }
html[data-theme="light"] .confirmModal__actions .btn--ghost{
  background: rgba(255,255,255,.82);
  border-color: rgba(15,27,20,.10);
  color: rgba(15,27,20,.84);
}
@media (max-width: 520px){
  .confirmModal__panel{
    padding: 14px 14px 14px;
    border-radius: 24px;
  }
  .confirmModal__icon{
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }
  .confirmModal__title{
    font-size: 18px;
  }
  .confirmModal__text{
    font-size: 14px;
  }
  .confirmModal__actions .btn{
    min-height: 50px;
  }
}

@keyframes supportUploadSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===== Discounts visuals: cards / modal / cart / checkout ===== */
.saleRibbon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 12px 3px 3px 12px;
  background: linear-gradient(135deg, #2e8a3f 0%, #5db526 100%);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 14px 28px rgba(32,74,28,.28);
  isolation: isolate;
}
.saleRibbon::after{
  content:"";
  position:absolute;
  top:0;
  right:-14px;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 14px solid #5db526;
  filter: brightness(.98);
}
.saleRibbon::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 7px;
  border-radius: 12px 3px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events:none;
}
.saleRibbon--card{
  position:absolute;
  top:12px;
  left:12px;
  z-index:4;
  min-height:32px;
  font-size:11px;
  padding:0 12px;
}
.saleRibbon--cardPrimary{
  max-width:calc(100% - 24px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.saleRibbon--inline{
  min-height:36px;
  font-size:12px;
  padding:0 16px;
}
.saleChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(68,166,53,.98), rgba(116,196,54,.98));
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 10px 20px rgba(44,102,33,.18);
}
.saleChip--checkout{ min-height:22px; padding:0 9px; font-size:10px; }

.price__compare,
.cartRow__compare,
.checkoutPayItem__compare,
.dealStrip__compare{
  color: rgba(255,255,255,.48);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(126,255,140,.44);
}
.price__compare{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.price__fiat--deal,
.checkoutPayItem__price--deal,
.dealStrip__current{
  color: #f4fff1;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.price__dealHint,
.cartRow__dealNote{
  font-size: 11px;
  color: rgba(171,236,177,.92);
}

.cartRow__discounts,
.checkoutPayItem__discounts,
.checkoutCartRow__discounts,
.invoiceItemCard__discounts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.invoiceItemCard__compare{
  margin-top:6px;
  color: rgba(255,255,255,.46);
  font-size:12px;
  font-weight:700;
  text-decoration: line-through;
}
.invoiceTotals__row--discount > div:last-child{
  color: rgba(161,231,158,.92);
}
.card__titleRow{ align-items:flex-start; }
.card__title{ flex:1; min-width:0; }

.dealStrip{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin:14px 0 4px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(108,188,72,.26);
  background:
    linear-gradient(180deg, rgba(42,73,34,.82), rgba(27,50,26,.88)),
    radial-gradient(circle at top left, rgba(120,214,91,.22), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 32px rgba(12,24,11,.26);
}
.dealStrip__eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(186,236,171,.92);
  margin-bottom:4px;
}
.dealStrip__prices{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.dealStrip__compare{ font-size:15px; font-weight:700; }
.dealStrip__current{ font-size:26px; font-weight:900; letter-spacing:-.03em; }
.dealStrip__hint{
  margin-top:4px;
  color: rgba(215,239,211,.78);
  font-size:12px;
  line-height:1.45;
}

.cartRow__titleWrap,
.checkoutCartRow__titleWrap,
.checkoutPayItem__titleWrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.cartRow__titleWrap{ row-gap:6px; }
.saleChip--cart{ flex:0 0 auto; }
.cartRow__sub,
.checkoutCartRow__sub,
.checkoutPayItem__sub{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.cartSummary__row--discount .cartSummary__label,
.checkoutPayTotals__row--discount > div:first-child{
  color: rgba(161,231,158,.92);
}
.cartSummary__row--discount .cartSummary__label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.cartDiscountChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(123,196,127,.16);
  border:1px solid rgba(123,196,127,.26);
  color:rgba(241,255,241,.96);
  font-size:12px;
  font-weight:800;
  letter-spacing:-.02em;
}
.cartDiscountChip__code{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.cartSummary__val--discount,
#checkoutPayDiscount{
  color: #9ef0a4;
  font-weight: 800;
}
.checkoutPayTotals__row--discount{ color: rgba(161,231,158,.92); }
.invoiceItemCard__priceCol{
  margin-left: 6px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.invoiceTotals__valueStack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.invoiceTotals__meta,
.invoiceTotals__metaChips{
  font-size:11px;
  line-height:1.35;
  color:rgba(255,255,255,.68);
}
.invoiceTotals__metaChips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.invoiceTotals__compare{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  color:rgba(255,255,255,.52);
}

html[data-theme="light"] .saleRibbon{
  background: linear-gradient(135deg, #4da43c 0%, #77c62a 100%);
  color:#ffffff;
  box-shadow: 0 14px 28px rgba(89,147,44,.22);
}
html[data-theme="light"] .saleRibbon::after{ border-left-color:#77c62a; }
html[data-theme="light"] .saleChip{
  background: linear-gradient(135deg, #5cad42 0%, #84cb37 100%);
  color:#fff;
  box-shadow: 0 10px 20px rgba(89,147,44,.18);
}
html[data-theme="light"] .price__compare,
html[data-theme="light"] .cartRow__compare,
html[data-theme="light"] .checkoutPayItem__compare,
html[data-theme="light"] .dealStrip__compare{
  color: rgba(15,27,20,.46);
  text-decoration-color: rgba(96,172,67,.4);
}
html[data-theme="light"] .price__fiat--deal,
html[data-theme="light"] .checkoutPayItem__price--deal,
html[data-theme="light"] .dealStrip__current{
  color: rgba(25,82,56,.98);
  text-shadow:none;
}
html[data-theme="light"] .price__dealHint,
html[data-theme="light"] .cartRow__dealNote,
html[data-theme="light"] .checkoutPayTotals__row--discount,
html[data-theme="light"] .cartSummary__row--discount .cartSummary__label,
html[data-theme="light"] #checkoutPayDiscount,
html[data-theme="light"] .cartSummary__val--discount{
  color: rgba(49,121,61,.96);
}
html[data-theme="light"] .cartDiscountChip{
  background:rgba(100,184,104,.12);
  border-color:rgba(100,184,104,.22);
  color:rgba(29,89,47,.96);
}
html[data-theme="light"] .cartDiscountChip__code{
  background:rgba(15,27,20,.08);
  color:rgba(15,27,20,.74);
}
html[data-theme="light"] .invoiceTotals__meta,
html[data-theme="light"] .invoiceTotals__metaChips,
html[data-theme="light"] .invoiceTotals__compare{
  color:rgba(15,27,20,.56);
}
html[data-theme="light"] .dealStrip{
  border-color: rgba(104,176,73,.22);
  background:
    linear-gradient(180deg, rgba(245,251,241,.98), rgba(232,245,226,.97)),
    radial-gradient(circle at top left, rgba(132,204,98,.18), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 16px 28px rgba(89,147,44,.10);
}
html[data-theme="light"] .dealStrip__eyebrow{ color: rgba(63,130,64,.88); }
html[data-theme="light"] .dealStrip__hint{ color: rgba(58,95,56,.72); }

@media (max-width: 700px){
  .cartRow{
    gap:10px;
  }
  .cartRow__right{
    min-width:116px;
  }
  .stepper{
    gap:6px;
    padding:5px 7px;
  }
  .stepper__btn{
    width:26px;
    height:26px;
  }
  .stepper__qty{
    min-width:22px;
    font-size:17px;
  }
  .cartRow__titleText{
    font-size:15px;
  }
}

@media (max-width: 700px){
  .dealStrip{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
  }
  .saleRibbon--inline{ width:max-content; }
  .dealStrip__current{ font-size:22px; }
}



/* ===== Feedback / Reviews ===== */
.rating--button{appearance:none;-webkit-appearance:none;cursor:pointer}
.rating__stars{display:inline-flex;align-items:center;gap:2px;letter-spacing:0}
.rating__star{display:inline-block;line-height:1;color:rgba(255,255,255,.18);transition:color .12s ease,filter .12s ease,transform .12s ease}
.rating__star.is-on{color:#ffd279;filter:drop-shadow(0 0 10px rgba(255,210,121,.16))}
.rating__star.is-off{color:rgba(255,255,255,.18)}
.rating__count{font-size:11px;color:rgba(245,247,250,.62)}
.card__ratingRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.card__rating{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:999px;padding:7px 10px;display:inline-flex;align-items:center;gap:8px;color:rgba(248,249,251,.92);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.card__rating:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.07)}
.card__rating .rating__stars{font-size:12px}
.card__rating .rating__value{font-weight:700}
.card__rating .rating__count{font-size:11px}
.orderFeedbackChip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,210,138,.30);background:linear-gradient(180deg, rgba(255,197,92,.18), rgba(255,168,61,.10));color:#ffe4b0;font-weight:700;cursor:pointer;transition:transform .12s ease,border-color .12s ease,filter .12s ease}
.orderFeedbackChip:hover{transform:translateY(-1px);filter:brightness(1.05)}
.orderFeedbackChip__count{font-size:11px;color:rgba(255,236,201,.76)}
.orderFeedbackBox{border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.045);padding:14px;display:flex;flex-direction:column;gap:12px}
.orderFeedbackBox__lead{font-weight:700;letter-spacing:-.01em}
.orderFeedbackBox__sub{font-size:12px;color:rgba(245,247,250,.64);line-height:1.4}
.orderFeedbackBox__actions{display:flex;gap:10px;flex-wrap:wrap}
.orderFeedback.is-editor{display:flex;flex-direction:column;gap:14px}
.feedbackInlineTop{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:2;padding:2px 0 6px;background:linear-gradient(180deg, rgba(15,26,20,.98), rgba(15,26,20,.90) 72%, rgba(15,26,20,0));border-bottom:1px solid rgba(255,255,255,.05)}
.feedbackInlineTop__title{flex:1;min-width:0;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.01em}
.feedbackActions--inline{justify-content:space-between}
.feedbackModal .modal__panel{max-width:760px}
.feedbackModal__body{display:flex;flex-direction:column;gap:14px}
.feedbackHero{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));padding:15px 16px}
.modalReviewBody{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.modalReviewBody[hidden]{display:none!important}
.modalReviewTop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.modalReviewTop__copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.modalReviewTop__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.modalReviewTop__eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,247,250,.52)}
.feedbackLinkBtn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:rgba(248,249,251,.94);font-size:12px;font-weight:700;line-height:1.1;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;outline:none}
.feedbackLinkBtn:hover{transform:translateY(-1px);border-color:rgba(255,220,160,.28);background:rgba(255,255,255,.075)}
.feedbackLinkBtn--ghost{margin-top:0;background:rgba(11,16,24,.38)}
.rating--button,.card__rating,.orderFeedbackChip,.feedbackStar,.feedbackLinkBtn{outline:none}
.rating--button:focus-visible,.card__rating:focus-visible,.orderFeedbackChip:focus-visible,.feedbackStar:focus-visible,.feedbackLinkBtn:focus-visible{box-shadow:0 0 0 4px rgba(255,210,121,.14);border-color:rgba(255,210,121,.42)}
.feedbackStar:focus-visible{border-radius:10px}
@media (max-width: 640px){
  .modalReviewTop{flex-direction:column;align-items:stretch}
  .modalReviewTop__actions{flex-direction:column;align-items:stretch}
  .feedbackLinkBtn--ghost{width:100%}
}
.feedbackHero__title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.feedbackHero__sub{margin-top:6px;font-size:12px;color:rgba(245,247,250,.66);line-height:1.45}
.feedbackGrid{display:flex;flex-direction:column;gap:12px}
.feedbackItem{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);padding:14px;display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start}
.feedbackItem__thumb{width:74px;height:74px;border-radius:16px;border:1px solid rgba(255,255,255,.12);overflow:hidden;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.feedbackItem__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.feedbackItem__thumbFallback{font-size:11px;color:rgba(245,247,250,.56);padding:10px;text-align:center;line-height:1.25}
.feedbackItem__main{display:flex;flex-direction:column;gap:10px;min-width:0}
.feedbackItem__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.feedbackItem__title{font-size:14px;font-weight:700;line-height:1.3}
.feedbackItem__meta{font-size:12px;color:rgba(245,247,250,.62);line-height:1.35}
.feedbackItem__state{font-size:11px;font-weight:700;padding:5px 8px;border-radius:999px;border:1px solid rgba(123,196,127,.24);background:rgba(123,196,127,.12);color:#c7f1ca}
.feedbackItem__state.is-pending{border-color:rgba(255,193,102,.30);background:rgba(255,193,102,.12);color:#ffddb4}
.feedbackStars{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.feedbackStar{appearance:none;-webkit-appearance:none;background:none;border:none;padding:0;margin:0;font-size:24px;line-height:1;color:rgba(255,255,255,.24);cursor:pointer;transition:transform .12s ease,color .12s ease,filter .12s ease}
.feedbackStar:hover,.feedbackStar:focus-visible{transform:translateY(-1px) scale(1.04);color:#ffd279;filter:drop-shadow(0 0 10px rgba(255,210,121,.18))}
.feedbackStar.is-on{color:#ffd279}
.feedbackStars__hint{font-size:12px;color:rgba(245,247,250,.58);margin-left:4px}
.feedbackTextarea{width:100%;min-height:110px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(11,16,24,.56);color:rgba(248,249,251,.96);padding:12px 13px;resize:vertical;font:inherit;line-height:1.5;outline:none;transition:border-color .12s ease,box-shadow .12s ease}
.feedbackTextarea:focus{border-color:rgba(255,220,160,.44);box-shadow:0 0 0 4px rgba(255,210,121,.10)}
.feedbackTextarea::placeholder{color:rgba(245,247,250,.36)}
.feedbackActions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.feedbackSubmitNote{font-size:12px;color:rgba(245,247,250,.62)}
.feedbackSummary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.feedbackSummary__value{font-size:28px;font-weight:800;letter-spacing:-.03em}
.feedbackSummary__meta{display:flex;flex-direction:column;gap:4px}
.feedbackSummary__sub{font-size:12px;color:rgba(245,247,250,.62)}
.feedbackReviewList{display:flex;flex-direction:column;gap:12px}
.feedbackReviewRow{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);padding:14px}
.feedbackReviewRow__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feedbackReviewRow__date{font-size:12px;color:rgba(245,247,250,.58)}
.feedbackReviewRow__text{margin-top:10px;font-size:13px;line-height:1.6;color:rgba(248,249,251,.94);white-space:pre-wrap;word-break:break-word}
.feedbackEmpty{border:1px dashed rgba(255,255,255,.12);border-radius:18px;padding:18px;font-size:13px;color:rgba(245,247,250,.62);text-align:center}
.feedbackInlineStars{display:inline-flex;align-items:center;gap:6px;color:#ffd279;flex-wrap:wrap}
.feedbackInlineStars .rating__stars{letter-spacing:0}
.orderReviewList{display:flex;flex-direction:column;gap:10px}
.orderReviewList__head{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:rgba(245,247,250,.56)}
.orderReviewRow{border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.035);padding:12px}
.orderReviewRow__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.orderReviewRow__title{font-size:13px;font-weight:700;line-height:1.35}
.orderReviewRow__meta{margin-top:4px;font-size:12px;color:rgba(245,247,250,.56);line-height:1.35}
.orderReviewRow__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.orderReviewRow__date{font-size:11px;color:rgba(245,247,250,.52)}
.orderReviewRow__text{margin-top:10px;font-size:13px;line-height:1.55;color:rgba(248,249,251,.92);white-space:pre-wrap;word-break:break-word}
.orderFeedbackChip--done{cursor:default;border-color:rgba(123,196,127,.24);background:linear-gradient(180deg, rgba(123,196,127,.16), rgba(123,196,127,.09));color:#c7f1ca}
.orderFeedbackChip--done:hover{transform:none;filter:none}
.invoiceItem__review{grid-column:1 / -1;margin-top:8px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}
.invoiceItem__reviewTop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.invoiceItem__reviewBadge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(123,196,127,.24);background:rgba(123,196,127,.12);color:#c7f1ca;font-size:11px;font-weight:700}
.invoiceItem__reviewDate{font-size:11px;color:rgba(245,247,250,.56)}
.invoiceItem__reviewText{font-size:12px;line-height:1.55;color:rgba(248,249,251,.88);white-space:pre-wrap;word-break:break-word}
.sr-only{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}
.orderCard__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.orderCard__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width: 640px){
  .feedbackItem{grid-template-columns:1fr}
  .feedbackItem__thumb{width:100%;height:170px}
  .feedbackActions{align-items:flex-start}
  .orderCard__footer{align-items:flex-start}
}
html[data-theme="light"] .card__rating,
html[data-theme="light"] .feedbackItem,
html[data-theme="light"] .feedbackReviewRow,
html[data-theme="light"] .orderFeedbackBox,
html[data-theme="light"] .feedbackHero{
  background:rgba(255,255,255,.84);
  border-color:rgba(17,24,39,.10);
  color:#0f172a;
}
html[data-theme="light"] .feedbackTextarea{
  background:#fff;
  color:#0f172a;
  border-color:rgba(17,24,39,.12);
}
html[data-theme="light"] .feedbackTextarea::placeholder,
html[data-theme="light"] .feedbackReviewRow__date,
html[data-theme="light"] .feedbackSummary__sub,
html[data-theme="light"] .feedbackItem__meta,
html[data-theme="light"] .orderFeedbackBox__sub,
html[data-theme="light"] .feedbackSubmitNote,
html[data-theme="light"] .feedbackStars__hint,
html[data-theme="light"] .rating__count,
html[data-theme="light"] .orderReviewRow__meta,
html[data-theme="light"] .orderReviewRow__date,
html[data-theme="light"] .invoiceItem__reviewDate{
  color:rgba(15,23,42,.56);
}
html[data-theme="light"] .rating__star.is-off{color:rgba(15,23,42,.18)}
html[data-theme="light"] .orderReviewRow,
html[data-theme="light"] .invoiceItem__review{
  border-color:rgba(17,24,39,.10);
}
html[data-theme="light"] .orderReviewList__head{color:rgba(15,23,42,.50)}
html[data-theme="light"] .invoiceItem__reviewText,
html[data-theme="light"] .orderReviewRow__text{
  color:#0f172a;
}
html[data-theme="light"] .feedbackInlineTop{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90) 70%, rgba(255,255,255,0));}
html[data-theme="light"] .modalReviewTop,
html[data-theme="light"] .feedbackLinkBtn{
  background:rgba(255,255,255,.88);
  border-color:rgba(17,24,39,.10);
  color:#0f172a;
}
html[data-theme="light"] .modalReviewTop__eyebrow{color:rgba(15,23,42,.48)}
html[data-theme="light"] .feedbackLinkBtn:hover{border-color:rgba(217,119,6,.28);background:rgba(255,255,255,.98)}
html[data-theme="light"] .rating--button:focus-visible,
html[data-theme="light"] .card__rating:focus-visible,
html[data-theme="light"] .orderFeedbackChip:focus-visible,
html[data-theme="light"] .feedbackStar:focus-visible,
html[data-theme="light"] .feedbackLinkBtn:focus-visible{box-shadow:0 0 0 4px rgba(245,158,11,.14);border-color:rgba(217,119,6,.26)}

.modalReviewBody,.feedbackModal__body{transition:opacity .18s ease,transform .18s ease}
.modalReviewBody.is-soft-refresh,.feedbackModal__body.is-soft-refresh{opacity:.66;transform:translateY(1px)}
html[data-theme="light"] .orderFeedbackChip{border-color:rgba(191,146,44,.22);background:linear-gradient(180deg, rgba(255,245,214,.98), rgba(253,238,197,.95));color:#8a5a0a;box-shadow:0 10px 24px rgba(191,146,44,.08)}
html[data-theme="light"] .orderFeedbackChip:hover{border-color:rgba(191,146,44,.30);background:linear-gradient(180deg, rgba(255,248,224,.99), rgba(253,242,207,.97))}
html[data-theme="light"] .orderFeedbackChip__count{color:rgba(138,90,10,.74)}
html[data-theme="light"] .orderFeedbackChip--done{border-color:rgba(93,158,103,.24);background:linear-gradient(180deg, rgba(228,247,232,.98), rgba(215,239,221,.96));color:#2f6a39;box-shadow:0 10px 24px rgba(79,130,88,.07)}
html[data-theme="light"] .feedbackInlineTop{background:linear-gradient(180deg, rgba(252,248,239,.98), rgba(249,243,231,.95) 72%, rgba(249,243,231,0));border-bottom:1px solid rgba(120,101,65,.10)}
html[data-theme="light"] .feedbackInlineTop__title,
html[data-theme="light"] .feedbackHero__title,
html[data-theme="light"] .feedbackSummary__value,
html[data-theme="light"] .feedbackItem__title,
html[data-theme="light"] .feedbackReviewRow__text,
html[data-theme="light"] .feedbackEmpty,
html[data-theme="light"] .feedbackReviewRow,
html[data-theme="light"] .feedbackHero,
html[data-theme="light"] .modalReviewTop,
html[data-theme="light"] .orderFeedbackBox__lead{color:#17212f}
html[data-theme="light"] .feedbackHero__sub,
html[data-theme="light"] .feedbackSubmitNote,
html[data-theme="light"] .feedbackItem__meta,
html[data-theme="light"] .feedbackReviewRow__date,
html[data-theme="light"] .feedbackSummary__sub,
html[data-theme="light"] .feedbackStars__hint,
html[data-theme="light"] .feedbackEmpty,
html[data-theme="light"] .orderFeedbackBox__sub{color:rgba(55,65,81,.72)}
html[data-theme="light"] .feedbackEmpty{background:rgba(255,255,255,.84);border-color:rgba(17,24,39,.10)}
html[data-theme="light"] .feedbackInlineTop{background:linear-gradient(180deg, rgba(252,248,239,.99), rgba(247,241,228,.96) 72%, rgba(247,241,228,0));border-bottom:1px solid rgba(141,116,68,.12)}
html[data-theme="light"] .feedbackInlineTop .backbtn,
html[data-theme="light"] .feedbackInlineTop .pillBtn{background:rgba(255,255,255,.92);border-color:rgba(17,24,39,.10);color:#17212f}
html[data-theme="light"] .feedbackInlineTop .pillBtn--ghost:hover,
html[data-theme="light"] .feedbackInlineTop .backbtn:hover{border-color:rgba(191,146,44,.24);background:rgba(255,251,243,.98)}
html[data-theme="light"] .feedbackItem__thumb{background:rgba(248,242,229,.88);border-color:rgba(160,138,92,.18)}
html[data-theme="light"] .feedbackItem__thumbFallback{color:rgba(71,85,105,.72)}
html[data-theme="light"] .feedbackItem__state{border-color:rgba(93,158,103,.22);background:rgba(223,243,228,.92);color:#2f6a39}
html[data-theme="light"] .feedbackItem__state.is-pending{border-color:rgba(191,146,44,.22);background:rgba(255,245,214,.94);color:#8a5a0a}
html[data-theme="light"] .feedbackLinkBtn--ghost{background:rgba(249,243,231,.92)}
html[data-theme="light"] .feedbackInlineStars{color:#d98a05}
html[data-theme="light"] .modalReviewTop__eyebrow{color:rgba(71,85,105,.60)}
html[data-theme="light"] .pillBtn--ghost{border-color:rgba(17,24,39,.10)}


/* ===== v23 auth/security/session refinements ===== */
.profileModal .profileSection,
.profileModal .profileSection--nested{ border-width:0; border-radius:0 !important; }
.profileModal .profileAuth .profileGrid,
.profileModal .authPanePassword .profileGrid{ grid-template-columns:minmax(0,1fr) !important; column-gap:14px !important; row-gap:14px !important; }
.profileModal #authPaneRegister .authRegisterGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; column-gap:12px !important; row-gap:12px !important; }
.profileModal #authPaneRegister .authRegisterActions,
.profileModal #authPaneRegister .authError,
.profileModal #authPaneRegister .toggleRow,
.profileModal #authPaneRegister .field--full{ grid-column:1 / -1; }
.profileModal .profileAuth .field,
.profileModal .authPanePassword .field{ margin:0; }
.profileModal .profileAuth .field__label,
.profileModal .authPanePassword .field__label{ display:block; margin-bottom:6px; }
.search,
.mobileSearch,
.sitebar__search{ border-radius:25px; }
.sitebar__searchBtn{ border-radius:999px; }
.passRow{ position:relative; display:flex; align-items:center; }
.passRow__input{ padding-right:46px; }
.passRow__btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(245,247,250,.58);
  font-size:0;
  line-height:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .12s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
  box-shadow:none;
}
.passRow__btn::before{
  content:"";
  width:18px;
  height:18px;
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:18px 18px;
  mask-size:18px 18px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c6.6 0 10 7 10 7s-3.4 7-10 7S2 12 2 12s3.4-7 10-7Zm0 2.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2Zm0 2A2.8 2.8 0 1 1 12 14.8 2.8 2.8 0 0 1 12 9.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c6.6 0 10 7 10 7s-3.4 7-10 7S2 12 2 12s3.4-7 10-7Zm0 2.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2Zm0 2A2.8 2.8 0 1 1 12 14.8 2.8 2.8 0 0 1 12 9.2Z'/%3E%3C/svg%3E");
}
.passRow__btn[data-reveal-state='shown']{
  color:rgba(255,112,112,.94);
  border-color:rgba(255,112,112,.28);
  background:rgba(255,112,112,.10);
  box-shadow:0 10px 24px rgba(255,112,112,.12);
}
.passRow__btn[data-reveal-state='shown']::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.28 2 18.72 18.72-1.41 1.41-3.05-3.04A12.88 12.88 0 0 1 12 20c-6.6 0-10-8-10-8a18.54 18.54 0 0 1 4.57-5.22L1.87 3.4 3.28 2Zm4.8 6.21A4.8 4.8 0 0 0 14.79 14.9L12.9 13a2.8 2.8 0 0 1-3.88-3.88L8.08 8.2Zm3.79-3.2A10.8 10.8 0 0 1 12 5c6.6 0 10 7 10 7a18.44 18.44 0 0 1-2.95 4.13l-1.44-1.44A14.37 14.37 0 0 0 19.75 12c-.93-1.39-3.74-5-7.75-5-.2 0-.4.01-.59.02l.46-2.01Zm-3.58.63-.46 2A4.75 4.75 0 0 0 7.2 12c0 2.65 2.15 4.8 4.8 4.8.14 0 .28-.01.42-.02l.94.94A6.94 6.94 0 0 1 12 18.2 10.45 10.45 0 0 1 4.26 12a16.2 16.2 0 0 1 4.03-4.36Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.28 2 18.72 18.72-1.41 1.41-3.05-3.04A12.88 12.88 0 0 1 12 20c-6.6 0-10-8-10-8a18.54 18.54 0 0 1 4.57-5.22L1.87 3.4 3.28 2Zm4.8 6.21A4.8 4.8 0 0 0 14.79 14.9L12.9 13a2.8 2.8 0 0 1-3.88-3.88L8.08 8.2Zm3.79-3.2A10.8 10.8 0 0 1 12 5c6.6 0 10 7 10 7a18.44 18.44 0 0 1-2.95 4.13l-1.44-1.44A14.37 14.37 0 0 0 19.75 12c-.93-1.39-3.74-5-7.75-5-.2 0-.4.01-.59.02l.46-2.01Zm-3.58.63-.46 2A4.75 4.75 0 0 0 7.2 12c0 2.65 2.15 4.8 4.8 4.8.14 0 .28-.01.42-.02l.94.94A6.94 6.94 0 0 1 12 18.2 10.45 10.45 0 0 1 4.26 12a16.2 16.2 0 0 1 4.03-4.36Z'/%3E%3C/svg%3E");
}
.passRow__btn:hover{ color:rgba(255,130,130,.96); border-color:rgba(255,130,130,.30); background:rgba(255,130,130,.10); box-shadow:0 10px 24px rgba(255,130,130,.10); }
.passRow__btn:focus-visible{ outline:none; color:rgba(255,128,128,.98); border-color:rgba(255,128,128,.36); box-shadow:0 0 0 4px rgba(255,128,128,.14); }
html[data-theme='light'] .passRow__btn{ background:rgba(255,255,255,.96); border-color:rgba(148,163,184,.20); color:rgba(148,58,58,.72); }
html[data-theme='light'] .passRow__btn:hover{ background:rgba(255,248,248,.98); border-color:rgba(220,76,76,.22); color:rgba(207,53,53,.88); box-shadow:0 10px 24px rgba(207,53,53,.08); }
html[data-theme='light'] .passRow__btn[data-reveal-state='shown']{ background:rgba(255,242,242,.98); border-color:rgba(207,53,53,.24); color:#cf3535; box-shadow:0 10px 24px rgba(207,53,53,.10); }
.devicesCard{display:flex;flex-direction:column;gap:12px}
.devicesHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.devicesSub{font-size:12px;line-height:1.5;color:rgba(245,247,250,.68);max-width:560px}
.devicesKillAllChip{white-space:nowrap}
.devicesList{display:flex;flex-direction:column;gap:10px}
.deviceRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.deviceRow__main{min-width:0;display:flex;flex-direction:column;gap:4px}
.deviceRow__title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--sup-text)}
.deviceRow__meta,.deviceRow__time{font-size:12px;line-height:1.45;color:var(--sup-muted)}
.deviceRow__time--subtle{opacity:.88}
.deviceRow__id{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sup-muted2);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.deviceRow__action{flex:0 0 auto}
.deviceRow__action .btn{min-width:132px}
.securityDecisionHost{position:fixed;right:18px;bottom:92px;z-index:140;display:flex;flex-direction:column;gap:12px;pointer-events:none;align-items:flex-end}
.securityDecisionToast{pointer-events:auto;display:flex;flex-direction:column;gap:10px;min-width:min(420px,calc(100vw - 28px));max-width:min(420px,calc(100vw - 28px));padding:16px;border-radius:24px;background:radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),linear-gradient(180deg, rgba(10,18,14,.96), rgba(15,25,19,.94));border:1px solid rgba(255,255,255,.10);box-shadow:0 28px 72px rgba(0,0,0,.36);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.securityDecisionToast__eyebrow{font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(166,213,255,.88)}
.securityDecisionToast__title{font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--sup-text)}
.securityDecisionToast__text{font-size:13px;line-height:1.55;color:rgba(245,247,250,.80)}
.securityDecisionToast__id{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,247,250,.72);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.securityDecisionToast__actions{display:flex;gap:10px;flex-wrap:wrap}
.securityDecisionToast__actions .btn{flex:1 1 164px}
html[data-theme='light'] .devicesSub{color:rgba(15,23,42,.66)}
html[data-theme='light'] .deviceRow{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.08)}
html[data-theme='light'] .deviceRow__meta,html[data-theme='light'] .deviceRow__time{color:rgba(15,23,42,.62)}
html[data-theme='light'] .deviceRow__id{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.08);color:rgba(15,23,42,.68)}
html[data-theme='light'] .securityDecisionToast{background:radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.16), transparent 58%),radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.12), transparent 62%),linear-gradient(180deg, rgba(252,248,242,.96), rgba(244,239,231,.94));border-color:rgba(15,23,42,.08);box-shadow:0 24px 60px rgba(15,23,42,.14)}
html[data-theme='light'] .securityDecisionToast__title{color:rgba(15,23,42,.96)}
html[data-theme='light'] .securityDecisionToast__text{color:rgba(15,23,42,.72)}
html[data-theme='light'] .securityDecisionToast__id{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.08);color:rgba(15,23,42,.68)}
@media (max-width: 640px){
  .devicesHead{align-items:stretch}
  .devicesKillAllChip{width:100%}
  .deviceRow{flex-direction:column;align-items:stretch}
  .deviceRow__action .btn{width:100%}
  .securityDecisionHost{left:14px;right:14px;bottom:88px;align-items:stretch}
  .securityDecisionToast{min-width:0;max-width:none}
  .securityDecisionToast__actions .btn{flex:1 1 calc(50% - 5px)}
}


/* =====================================================================
   Stage 32: PWA cold-launch splash refinement
   ===================================================================== */
html.pwa-launch-pending,
html.pwa-launch-pending body{
  overflow:hidden;
  overscroll-behavior:none;
}

.pwaLaunchSplash{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:#000000;
  transition: opacity .56s cubic-bezier(.22,.86,.24,1), visibility .56s ease;
  isolation:isolate;
}
html.pwa-launch-pending .pwaLaunchSplash{
  opacity:1;
  visibility:visible;
}
.pwaLaunchSplash.is-hiding{
  opacity:0;
  visibility:hidden;
}
.pwaLaunchSplash.is-hidden{ display:none; }
.pwaLaunchSplash__bg,
.pwaLaunchSplash__poster,
.pwaLaunchSplash__veil,
.pwaLaunchSplash__video{
  position:absolute;
  inset:0;
}
.pwaLaunchSplash__bg{
  background:linear-gradient(180deg, rgba(0,0,0,.995), rgba(0,0,0,.995));
}
.pwaLaunchSplash__poster{
  background:center center / cover no-repeat;
  opacity:.90;
  filter:saturate(.84) brightness(.36) contrast(1.06) blur(.8px);
  transform:scale(1.035);
  transform-origin:center center;
  will-change:transform, opacity, filter;
  transition:opacity .52s ease, transform 1.1s ease, filter .52s ease;
}
.pwaLaunchSplash__video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.02;
  filter:saturate(.96) brightness(.52) contrast(1.05) blur(.25px);
  transform:scale(1.04);
  transform-origin:center center;
  will-change:transform, opacity, filter;
  animation:pwaLaunchVideoDrift 7.2s ease-in-out infinite alternate;
  transition:opacity .42s ease, filter .42s ease;
}
.pwaLaunchSplash.is-video-ready .pwaLaunchSplash__poster{
  opacity:.16;
  filter:saturate(.88) brightness(.24) contrast(1.05) blur(.35px);
  transform:scale(1.045);
}
.pwaLaunchSplash.is-video-ready .pwaLaunchSplash__video{
  opacity:.56;
}
.pwaLaunchSplash__veil{
  background:
    radial-gradient(78% 54% at 50% 46%, rgba(77,166,108,.12), rgba(8,14,11,0) 42%, rgba(2,5,4,0) 64%),
    linear-gradient(180deg, rgba(0,0,0,.54) 0%, rgba(3,6,5,.50) 22%, rgba(3,7,5,.62) 52%, rgba(5,10,7,.82) 100%),
    radial-gradient(120% 105% at 50% 52%, rgba(0,0,0,0) 42%, rgba(0,0,0,.36) 100%);
}
.pwaLaunchSplash__core{
  position:relative;
  z-index:2;
  width:min(100vw, 560px);
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:14vh 24px 11vh;
}
.pwaLaunchSplash__brand{
  display:grid;
  justify-items:center;
  gap:14px;
}
.pwaLaunchSplash__logoWrap{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(97,194,131,.08), rgba(97,194,131,.02) 42%, rgba(255,255,255,.015) 100%),
    linear-gradient(180deg, rgba(7,14,10,.52), rgba(4,8,6,.22));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 0 1px rgba(115,205,145,.035),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:pwaLaunchLogoBreathe 2.2s ease-in-out infinite;
}
.pwaLaunchSplash__logo{
  width:min(64px, 70%);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.28));
}
.pwaLaunchSplash__wordmark{
  color:rgba(255,255,255,.96);
  font-weight:800;
  font-size:clamp(20px, 2vw, 26px);
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:
    0 0 24px rgba(116,211,147,.14),
    0 14px 32px rgba(0,0,0,.46);
}
.pwaLaunchSplash__line{
  width:min(154px, 52vw);
  height:3px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(75,143,101,0), rgba(118,205,147,.98) 50%, rgba(75,143,101,0));
  box-shadow:0 0 20px rgba(101,190,131,.24);
  animation:pwaLaunchGlow 1.8s ease-in-out infinite;
}
@keyframes pwaLaunchGlow{
  0%,100%{ transform:scaleX(.74); opacity:.58; }
  50%{ transform:scaleX(1); opacity:1; }
}
@keyframes pwaLaunchVideoDrift{
  0%{ transform:scale(1.045) translate3d(0, 0, 0); }
  100%{ transform:scale(1.075) translate3d(0, -10px, 0); }
}
@keyframes pwaLaunchLogoBreathe{
  0%,100%{ transform:translateY(0); box-shadow:0 24px 56px rgba(0,0,0,.42), 0 0 0 1px rgba(115,205,145,.04), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -16px 36px rgba(0,0,0,.18); }
  50%{ transform:translateY(-2px); box-shadow:0 28px 62px rgba(0,0,0,.46), 0 0 0 1px rgba(115,205,145,.06), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -16px 36px rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce){
  .pwaLaunchSplash,
  .pwaLaunchSplash__line,
  .pwaLaunchSplash__logoWrap,
  .pwaLaunchSplash__poster,
  .pwaLaunchSplash__video{
    transition:none !important;
    animation:none !important;
  }
  .pwaLaunchSplash__poster{
    opacity:.54;
    filter:saturate(.76) brightness(.30) contrast(1.03);
  }
  .pwaLaunchSplash__video{
    opacity:.34;
    filter:saturate(.84) brightness(.42) contrast(1.03);
  }
}
@media (max-width: 640px){
  .pwaLaunchSplash__core{
    width:min(100vw, 100%);
    padding:16vh 22px 12vh;
  }
  .pwaLaunchSplash__logoWrap{
    width:82px;
    height:82px;
    border-radius:28px;
  }
  .pwaLaunchSplash__wordmark{
    font-size:18px;
    letter-spacing:.12em;
  }
  .pwaLaunchSplash__line{
    width:min(148px, 54vw);
  }
}


html.pwa-standalone,
html.pwa-standalone body{
  background:#000000 !important;
}
html.pwa-standalone .shell,
html.pwa-standalone .sitebar{
  background:#000000 !important;
}

/* ===== Support chat reliability v2026-03-15 ===== */
.supportChatTools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 0;}
.supportChatTools__left{min-width:0;}
.supportChatTools__count{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.94);}
.supportChatTools__actions{display:flex;align-items:center;gap:8px;}
.supportChatTools__btn{appearance:none;-webkit-appearance:none;border:0;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#fff;font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;cursor:pointer;}
.supportChatTools__btn--danger{background:rgba(109,18,18,.42);border-color:rgba(255,118,118,.24);color:#ffe3e3;}
.supportReplyBar{display:flex;align-items:flex-start;gap:10px;margin:8px 12px 0;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);}
.supportReplyBar__copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.supportReplyBar__label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(150,226,171,.92);}
.supportReplyBar__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:rgba(255,255,255,.78);}
.supportReplyBar__cancel{appearance:none;-webkit-appearance:none;border:0;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#fff;font:inherit;font-size:18px;line-height:1;cursor:pointer;}
.supportChat .bubble{position:relative;}
.supportChat .bubble.is-selected{outline:2px solid rgba(150,226,171,.46);outline-offset:2px;}
.supportChat.is-selecting .bubble[data-can-select="1"]{cursor:pointer;}
.supportChat .bubble__reply{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border-left:3px solid rgba(150,226,171,.9);min-width:0;}
.supportChat .bubble__reply.is-deleted{border-left-color:rgba(255,183,183,.82);}
.supportChat .bubble__replyCopy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.supportChat .bubble__replyLabel{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:rgba(150,226,171,.92);}
.supportChat .bubble__reply.is-deleted .bubble__replyLabel{color:rgba(255,197,197,.92);}
.supportChat .bubble__replyText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgba(255,255,255,.78);}
.supportChat .bubble__replyStub{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:800;color:rgba(255,255,255,.88);}
.supportChat .bubble__meta{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;}
.supportChat .bubble__actions{display:inline-flex;align-items:center;gap:6px;margin-right:auto;}
.supportChat .bubble__action{appearance:none;-webkit-appearance:none;border:0;min-width:28px;height:28px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#fff;font:inherit;font-size:11px;font-weight:800;cursor:pointer;}
.supportChat .bubble__action:hover{filter:brightness(1.06);}
.supportChat .bubble__action:active{transform:translateY(1px);}
.supportChat .bubble__action--reply{padding:0 10px;}
.supportChat .bubble__cancel{appearance:none;-webkit-appearance:none;border:0;padding:0;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:11px;font-weight:800;letter-spacing:.01em;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.supportChat .bubble__cancel:hover{opacity:.92;}
.supportChat .bubble__deletedText{font-style:italic;color:rgba(255,255,255,.72);}
.supportChat .bubble.is-deleted .bubble__media{display:none;}
.supportChat .bubble__selectMark{position:absolute;top:-7px;left:-7px;display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:rgba(9,19,15,.95);border:1px solid rgba(150,226,171,.42);box-shadow:0 8px 20px rgba(0,0,0,.20);font-size:12px;font-weight:900;color:#fff;z-index:2;}
.supportChat.is-selecting .bubble[data-can-select="1"] .bubble__selectMark{display:flex;}
.supportChat .bubble.is-selected .bubble__selectMark{background:rgba(47,163,106,.96);border-color:rgba(171,242,189,.66);}
html[data-theme="light"] .supportChatTools__count,
html[data-theme="light"] .supportReplyBar,
html[data-theme="light"] .supportChat .bubble__reply,
html[data-theme="light"] .supportChat .bubble__action,
html[data-theme="light"] .supportReplyBar__cancel{background:rgba(15,27,20,.05);border-color:rgba(15,27,20,.10);color:#13241b;}
html[data-theme="light"] .supportReplyBar__text,
html[data-theme="light"] .supportChat .bubble__replyText,
html[data-theme="light"] .supportChat .bubble__deletedText,
html[data-theme="light"] .supportChat .bubble__cancel{color:rgba(15,27,20,.70);}
html[data-theme="light"] .supportChatTools__btn{background:rgba(15,27,20,.05);border-color:rgba(15,27,20,.10);color:#13241b;}
html[data-theme="light"] .supportChatTools__btn--danger{background:rgba(182,59,59,.10);border-color:rgba(182,59,59,.20);color:#7a1f1f;}
@media (max-width: 640px){
  .supportChatTools{padding:8px 10px 0;gap:10px;}
  .supportReplyBar{margin:8px 10px 0;padding:9px 10px;}
  .supportChat .bubble__action{min-width:26px;height:26px;padding:0 8px;}
}


/* === Support chat stability: media bubbles === */
.supportChat .bubble.bubble--has-media{
  width:min(100%, 360px);
  min-width:min(220px, 100%);
}
.supportChat .bubble__media,
.supportChat .bubble__media .mediaThumb,
.supportChat .bubble__media .mediaThumb--button{
  min-width:0;
}
.supportChat .bubble__media .mediaThumb__uploadPct{
  max-width:100%;
  line-height:1.2;
  white-space:normal;
}
@media (min-width: 560px){
  .supportChat .bubble.bubble--has-media{ width:min(100%, 420px); }
}
.discountsHero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 18px 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(242,207,143,.22), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.discountsHero--withMedia{
  padding:0;
  background:rgba(16,19,24,.74);
}
.discountsHero__media{
  aspect-ratio: 2.2 / 1;
  background: rgba(255,255,255,.03);
}
.discountsHero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.discountsHero--withMedia .discountsHero__badge,
.discountsHero--withMedia .discountsHero__title,
.discountsHero--withMedia .discountsHero__sub,
.discountsHero--withMedia .btn{
  position:relative;
  z-index:2;
}
.discountsHero--withMedia .discountsHero__badge,
.discountsHero--withMedia .discountsHero__title,
.discountsHero--withMedia .discountsHero__sub,
.discountsHero--withMedia .btn{
  margin-left:18px;
  margin-right:18px;
}
.discountsHero--withMedia .discountsHero__badge{ margin-top:18px; }
.discountsHero--withMedia .btn{ margin-bottom:18px; }
.discountsHero__badge,
.discountCard__badge,
.promoModal__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(242,207,143,.32);
  background:rgba(242,207,143,.12);
  color:rgba(255,239,210,.96);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.discountsHero__title,
.discountCard__title,
.promoModal__title{
  font-size:20px;
  font-weight:700;
  line-height:1.18;
  color:var(--text);
}
.discountsHero__title{ margin-top:12px; }
.discountsHero__sub,
.discountCard__sub,
.promoModal__sub,
.promoCouponMeta{
  color:var(--muted);
  line-height:1.55;
}
.discountsHero__sub{ margin-top:8px; }
.discountsHero .btn{ margin-top:16px; }
.discountsSectionTitle{
  margin:0 0 12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.discountsList{
  display:grid;
  gap:14px;
}
.discountCard{
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.discountCard__banner{ aspect-ratio: 2.1 / 1; background: rgba(255,255,255,.02); }
.discountCard__banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.discountCard__body{ padding:16px; display:grid; gap:10px; }
.discountCard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.discountCard__value{ font-size:13px; font-weight:700; color:var(--text); }
.discountCard__code,
.promoCouponCode{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:10px 14px;
  border-radius:16px;
  border:1px dashed rgba(242,207,143,.4);
  background:rgba(242,207,143,.08);
  color:var(--text);
  font-size:20px;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}
.discountCard__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.discountCard__targetsWrap{
  display:grid;
  gap:10px;
}
.discountCard__targetsLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.discountCard__targets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.discountTarget{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border-radius:16px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.discountTarget:hover{
  transform:translateY(-1px);
  border-color:rgba(242,207,143,.26);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.discountTarget__kind{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(242,207,143,.14);
  color:rgba(255,244,220,.92);
  border:1px solid rgba(242,207,143,.22);
}
.discountTarget--category .discountTarget__kind{
  background:rgba(123,196,127,.12);
  color:rgba(224,255,226,.92);
  border-color:rgba(123,196,127,.2);
}
.discountTarget__name{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.cartDiscountsApplied{display:grid;gap:10px;margin-top:10px}
.appliedDiscountList{display:grid;gap:10px}
.appliedDiscountCard{
  display:grid;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}
.appliedDiscountCard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.appliedDiscountCard__title{font-size:13px;font-weight:800;color:var(--text)}
.appliedDiscountCard__amount{font-size:13px;font-weight:800;color:rgba(214,255,216,.96);white-space:nowrap}
.appliedDiscountCard__badges{display:flex;flex-wrap:wrap;gap:8px}
.appliedDiscountBadge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.appliedDiscountBadge--auto{background:rgba(123,196,127,.14);border-color:rgba(123,196,127,.22);color:rgba(232,255,233,.96)}
.appliedDiscountBadge--code{background:rgba(242,207,143,.14);border-color:rgba(242,207,143,.22);color:rgba(255,243,214,.96)}
.appliedDiscountBadge--scope{background:rgba(97,174,255,.12);border-color:rgba(97,174,255,.18);color:rgba(228,242,255,.94)}
.appliedDiscountCard__meta{font-size:12px;line-height:1.45;color:var(--muted)}
.appliedDiscountCard__actions{display:flex;justify-content:flex-start}
.appliedDiscountCard__actions .btn{min-height:38px}
html[data-theme="light"] .appliedDiscountCard{border-color:rgba(15,27,20,.08);background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,239,.92));box-shadow:0 14px 32px rgba(15,27,20,.08)}
html[data-theme="light"] .appliedDiscountBadge{border-color:rgba(15,27,20,.08);background:rgba(15,27,20,.04);color:rgba(15,27,20,.70)}
html[data-theme="light"] .appliedDiscountBadge--auto{background:rgba(39,139,91,.12);border-color:rgba(39,139,91,.18);color:#2e6e41}
html[data-theme="light"] .appliedDiscountBadge--code{background:rgba(245,158,11,.13);border-color:rgba(217,119,6,.18);color:#8b5a12}
html[data-theme="light"] .appliedDiscountBadge--scope{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.16);color:#274690}
.discountChip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
}
.discountCard__meta{ font-size:12px; color:var(--muted); }
.discountCard__actions{ margin-top:2px; }
.promoModal{
  width:min(560px, calc(100vw - 28px));
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(242,207,143,.22), transparent 36%),
    linear-gradient(180deg, rgba(21,21,21,.96), rgba(14,14,14,.98));
  box-shadow:0 28px 60px rgba(0,0,0,.42);
}
.promoModal__media{ aspect-ratio: 2.2 / 1; background: rgba(255,255,255,.03); }
.promoModal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.promoModal__body{ display:grid; gap:14px; padding:22px; }
.promoModal__actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.promoModal__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:var(--text);
  font-size:26px;
  line-height:1;
}
.promoModal--reward .promoModal__body{ padding-top:26px; }
.modal--poster .modal__panel{
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:min(1180px,calc(100vw - 32px));
  max-width:1180px;
  max-height:92vh;
  border-radius:28px;
  overflow:hidden;
  transform:translate(-50%, calc(-50% + 10px)) scale(.985);
}
.modal--poster.is-open .modal__panel{ transform:translate(-50%, -50%) scale(1); }
.modal--poster.is-closing .modal__panel{ transform:translate(-50%, calc(-50% + 10px)) scale(.985); }
.promoPoster{
  position:relative;
  min-height:min(84vh,860px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  background:
    radial-gradient(700px 240px at 14% -20%, rgba(123,196,127,.18), transparent 58%),
    radial-gradient(900px 340px at 92% 8%, rgba(255,196,92,.10), transparent 62%),
    linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 42px 110px rgba(0,0,0,.46);
}
.promoPoster__media,
.promoPoster__media img,
.promoPoster__media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.promoPoster__media img,
.promoPoster__media video{ object-fit:cover; display:block; }
.promoPoster__media video{
  pointer-events:none;
  background:linear-gradient(180deg, var(--sheet-bg0), var(--sheet-bg1));
}
.promoPoster__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,18,.12), rgba(7,11,18,.06)),
    radial-gradient(900px 340px at 88% 8%, rgba(255,196,92,.08), transparent 62%);
  pointer-events:none;
}
.promoPoster__body{
  position:relative;
  z-index:2;
  display:grid;
  align-content:end;
  gap:16px;
  min-height:min(84vh,860px);
  padding:clamp(24px,4vw,40px);
  max-width:min(540px,100%);
}
.promoPoster__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}
.promoPoster__title{
  margin:0;
  color:#fff;
  font-size:clamp(34px,5vw,58px);
  line-height:.94;
  letter-spacing:-.04em;
  max-width:12ch;
}
.promoPoster__sub{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.5;
  max-width:46ch;
}
.promoPoster__field{
  margin-top:4px;
  max-width:420px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,11,18,.42);
  backdrop-filter:blur(16px);
}
.promoPoster__field .field__label{ color:rgba(255,255,255,.72); }
.promoPoster__field .field__input{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.promoPoster__field .field__input::placeholder{ color:rgba(255,255,255,.46); }
.promoPoster__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.promoPoster__actions .btn{ min-width:168px; }
.promoPoster__close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,11,18,.44);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(14px);
}
.card__promoNote{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:grid;
  gap:4px;
}
.card__promoNoteTitle{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
}
.card__promoNoteSub{
  font-size:11px;
  line-height:1.42;
  color:var(--muted);
}
.card__promoNote--personal{
  border-color:rgba(255,219,143,.24);
  background:linear-gradient(180deg,rgba(255,219,143,.12),rgba(255,255,255,.03));
}
.card__promoNote--guest{
  border-color:rgba(123,196,127,.24);
  background:linear-gradient(180deg,rgba(123,196,127,.12),rgba(255,255,255,.03));
}
.card__promoNote--auto{
  border-color:rgba(255,219,143,.20);
  background:linear-gradient(180deg,rgba(255,219,143,.14),rgba(255,255,255,.03));
}
.dealStrip--customerPromo,
.dealStrip--singleOffer{
  margin-top:12px;
  background:linear-gradient(180deg,rgba(255,219,143,.14),rgba(255,255,255,.03));
  border-color:rgba(255,219,143,.18);
}
.dealStrip--customerPromo .dealStrip__eyebrow,
.dealStrip--singleOffer .dealStrip__eyebrow{ color:rgba(255,232,184,.88); }
.dealStrip--customerPromo .dealStrip__current,
.dealStrip--singleOffer .dealStrip__current{ font-size:26px; }
html[data-theme="light"] .card__promoNote{
  background:rgba(255,255,255,.86);
  border-color:rgba(15,27,20,.08);
  box-shadow:0 18px 44px rgba(15,27,20,.08);
}
html[data-theme="light"] .card__promoNote--personal{
  background:linear-gradient(180deg,rgba(255,219,143,.18),rgba(255,255,255,.92));
  border-color:rgba(170,124,31,.18);
}
html[data-theme="light"] .card__promoNote--guest{
  background:linear-gradient(180deg,rgba(123,196,127,.16),rgba(255,255,255,.92));
  border-color:rgba(61,124,74,.16);
}
html[data-theme="light"] .card__promoNote--auto{
  background:linear-gradient(180deg,rgba(255,219,143,.18),rgba(255,255,255,.92));
  border-color:rgba(170,124,31,.16);
}
html[data-theme="light"] .dealStrip--customerPromo,
html[data-theme="light"] .dealStrip--singleOffer{
  background:linear-gradient(180deg,rgba(255,219,143,.22),rgba(255,255,255,.95));
  border-color:rgba(170,124,31,.16);
}
html[data-theme="light"] .promoPoster{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,240,233,.98));
}
html[data-theme="light"] .promoPoster__overlay{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
}
html[data-theme="light"] .promoPoster__badge,
html[data-theme="light"] .promoPoster__title,
html[data-theme="light"] .promoPoster__sub{ color:rgba(15,27,20,.92); }
html[data-theme="light"] .promoPoster__badge{
  background:rgba(255,255,255,.76);
  border-color:rgba(15,27,20,.08);
}
html[data-theme="light"] .promoPoster__field{
  background:rgba(255,255,255,.76);
  border-color:rgba(15,27,20,.08);
}
html[data-theme="light"] .promoPoster__field .field__label{ color:rgba(15,27,20,.64); }
html[data-theme="light"] .promoPoster__field .field__input{
  background:rgba(255,255,255,.92);
  color:rgba(15,27,20,.92);
  border-color:rgba(15,27,20,.10);
}
html[data-theme="light"] .promoPoster__field .field__input::placeholder{ color:rgba(15,27,20,.42); }
html[data-theme="light"] .promoPoster__close{
  background:rgba(255,255,255,.86);
  border-color:rgba(15,27,20,.08);
  color:rgba(15,27,20,.92);
}
html[data-theme="light"] .discountsHero,
html[data-theme="light"] .discountCard,
html[data-theme="light"] .promoModal{
  border-color: rgba(20,20,20,.08);
  box-shadow: 0 16px 36px rgba(14,22,40,.1);
}
html[data-theme="light"] .discountCard__badge{
  border-color: rgba(184,137,37,.18);
  background: linear-gradient(180deg, rgba(255,241,212,.96), rgba(249,238,215,.84));
  color: #8b5a12;
  box-shadow: 0 10px 24px rgba(170,124,31,.10);
}
html[data-theme="light"] .discountChip,
html[data-theme="light"] .discountCard__code,
html[data-theme="light"] .promoCouponCode{
  border-color: rgba(20,20,20,.08);
}
html[data-theme="light"] .discountChip{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,240,233,.96));
  color: rgba(34,45,38,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px rgba(15,27,20,.06);
}
html[data-theme="light"] .discountCard__targetsLabel{
  color: rgba(70,84,74,.58);
}
html[data-theme="light"] .discountTarget{
  border-color: rgba(15,27,20,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,240,233,.94));
  color: rgba(19,31,24,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px rgba(15,27,20,.07);
}
html[data-theme="light"] .discountTarget:hover{
  border-color: rgba(184,137,37,.18);
  background: linear-gradient(180deg, rgba(255,252,245,.98), rgba(247,239,221,.96));
  box-shadow: 0 18px 34px rgba(170,124,31,.10);
}
html[data-theme="light"] .discountTarget__kind{
  background: rgba(245,158,11,.11);
  color: #8b5a12;
  border-color: rgba(184,137,37,.16);
}
html[data-theme="light"] .discountTarget--category .discountTarget__kind{
  background: rgba(39,139,91,.12);
  color: #2e6e41;
  border-color: rgba(39,139,91,.18);
}
@media (max-width: 720px){
  .promoModal__actions{ grid-template-columns:1fr; }
  .discountCard__body,
  .promoModal__body,
  .discountsHero{ padding:16px; }
  .promoCouponCode,
  .discountCard__code{ font-size:18px; }
  .modal--poster .modal__panel{ width:calc(100vw - 18px); border-radius:24px; }
  .promoPoster,
  .promoPoster__body{ min-height:min(78vh,760px); }
  .promoPoster__body{ padding:18px; max-width:100%; }
}

.checkoutPromo{
  display:grid;
  gap:14px;
  margin:16px 0 0;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.checkoutPromo__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.checkoutPromo__title{font-size:15px;font-weight:700;color:var(--text)}
.checkoutPromo__sub{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.5}
.checkoutPromo__form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.checkoutPromo__input{
  min-height:50px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(7,11,18,.22);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.checkoutPromo__input::placeholder{color:rgba(255,255,255,.38)}
.checkoutPromo__input:focus{outline:none;border-color:rgba(242,207,143,.34);box-shadow:0 0 0 4px rgba(242,207,143,.09)}
.checkoutPromo__status{padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.checkoutPromo__status.is-error{background:rgba(234,68,75,.12);border:1px solid rgba(234,68,75,.26);color:#ffd9dc}
.checkoutPromo__status.is-success{background:rgba(116,216,132,.11);border:1px solid rgba(116,216,132,.24);color:#e4ffe7}
.checkoutPromo__status.is-note{background:rgba(242,207,143,.10);border:1px solid rgba(242,207,143,.22);color:#fff1cf}
.checkoutPromo__applied,.checkoutPromo__available{display:grid;gap:10px}
.checkoutPromo__appliedList{display:grid;gap:10px}
.checkoutPromo__chipUsage{display:grid;gap:4px;margin-top:2px}
.checkoutPromo__chipUsageLine{font-size:11px;color:var(--muted);line-height:1.35}
.checkoutPromo__availableTitle{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.checkoutPromo__availableList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checkoutPromo__chip{
  display:grid;
  gap:4px;
  padding:12px 14px;
  text-align:left;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:inherit;
  transition:border-color .18s ease, transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.checkoutPromo__chip:hover{
  border-color:rgba(242,207,143,.22);
  background:linear-gradient(180deg, rgba(255,219,143,.12), rgba(255,255,255,.04));
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  transform:translateY(-1px);
}
.checkoutPromo__chipTitle{font-weight:700;color:var(--text)}
.checkoutPromo__chipMeta{font-size:12px;color:var(--muted)}
.checkoutPromo__chipCode{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--text)}
html[data-theme="light"] .checkoutPromo{
  border-color:rgba(15,27,20,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,239,.92));
  box-shadow:0 18px 42px rgba(15,27,20,.10);
}
html[data-theme="light"] .checkoutPromo__input{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,27,20,.10);
  color:rgba(15,27,20,.92);
}
html[data-theme="light"] .checkoutPromo__input::placeholder{color:rgba(15,27,20,.36)}
html[data-theme="light"] .checkoutPromo__chip{
  border-color:rgba(15,27,20,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,244,238,.96));
}
html[data-theme="light"] .checkoutPromo__chip:hover{
  border-color:rgba(170,124,31,.22);
  background:linear-gradient(180deg, rgba(255,232,184,.28), rgba(255,255,255,.96));
}
html[data-theme="light"] .checkoutPromo__chipUsageLine{color:rgba(15,27,20,.56)}
@media (max-width: 720px){
  .checkoutPromo__form{grid-template-columns:1fr}
  .checkoutPromo__availableList{grid-template-columns:1fr}
}


/* ===== Age gate overlay (SEO-friendly shell rendering) ===== */
body[data-age-gate-overlay-open="1"]{
  overflow:hidden;
  overscroll-behavior:none;
}

.siteAgeGate{
  --ag-bg0:#08100d;
  --ag-bg1:#0d1713;
  --ag-ink:#f2f6f3;
  --ag-muted:rgba(242,246,243,.74);
  --ag-muted2:rgba(242,246,243,.56);
  --ag-stroke:rgba(255,255,255,.10);
  --ag-stroke2:rgba(255,255,255,.06);
  --ag-accent:#6bcf8c;
  --ag-gold:rgba(212,169,98,.92);
  --ag-sheet-top:rgba(12,19,15,.74);
  --ag-sheet-bottom:rgba(8,13,10,.68);
  --ag-panel-soft:rgba(255,255,255,.04);
  --ag-panel-strong:rgba(255,255,255,.08);
  --ag-btn-text:rgba(245,249,246,.96);
  --ag-btn-bg-top:rgba(33,53,43,.96);
  --ag-btn-bg-bottom:rgba(16,27,21,.98);
  --ag-glow:0 28px 90px rgba(0,0,0,.42);
  --ag-glow-soft:0 16px 36px rgba(0,0,0,.24);
  --ag-hold-ring-bg:rgba(107,207,140,.18);
  --ag-hold-ring-fg:rgba(107,207,140,.96);
  position:fixed;
  inset:0;
  z-index:3000;
  color:var(--ag-ink);
}
.siteAgeGate *{ box-sizing:border-box; }
.siteAgeGate [hidden]{ display:none !important; }
.siteAgeGate .ag-bg{ position:absolute; inset:0; overflow:hidden; background:#000; }
.siteAgeGate .ag-bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:translateZ(0); }
.siteAgeGate .ag-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,6,.18), rgba(4,7,6,.34)),
    radial-gradient(760px 520px at 50% 18%, rgba(107,207,140,.12), rgba(8,16,13,0) 56%),
    radial-gradient(900px 700px at 50% 20%, rgba(255,255,255,.04), rgba(4,7,6,.58) 74%),
    linear-gradient(180deg, rgba(3,7,5,.06), rgba(3,7,5,.64));
}
.siteAgeGate .ag-gate{
  position:absolute; inset:0; display:flex; justify-content:center; align-items:center;
  padding:max(env(safe-area-inset-top),18px) 18px max(env(safe-area-inset-bottom),20px);
  overflow:auto;
}
.siteAgeGate .ag-sheet{
  width:min(560px,100%);
  max-height:min(780px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px));
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  border-radius:34px;
  background:linear-gradient(180deg, var(--ag-sheet-top), var(--ag-sheet-bottom));
  border:1px solid var(--ag-stroke);
  box-shadow:var(--ag-glow);
  backdrop-filter:blur(20px) saturate(124%);
  -webkit-backdrop-filter:blur(20px) saturate(124%);
}
.siteAgeGate .ag-sheet::before{
  content:""; position:absolute; left:24px; right:24px; top:14px; height:2px;
  background:linear-gradient(90deg, rgba(107,207,140,0), rgba(107,207,140,.58), rgba(212,169,98,.44), rgba(107,207,140,0));
  opacity:.9; pointer-events:none;
}
.siteAgeGate .ag-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:22px 22px 10px; }
.siteAgeGate .ag-headActions{ display:flex; align-items:center; gap:10px; }
.siteAgeGate .ag-brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; font-size:18px; }
.siteAgeGate .ag-brandLogo{ display:block; width:120px; height:auto; object-fit:contain; }
.siteAgeGate .ag-pill{
  display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px;
  background:var(--ag-panel-soft); border:1px solid var(--ag-stroke2); color:var(--ag-muted); font-size:13px; user-select:none;
}
.siteAgeGate .ag-pill i{ width:8px; height:8px; border-radius:999px; background:rgba(123,196,127,.72); box-shadow:0 0 0 5px rgba(123,196,127,.12); display:block; }
.siteAgeGate .ag-body{ padding:8px 22px 18px; flex:1 1 auto; overflow:hidden; }
.siteAgeGate .ag-body h1,
.siteAgeGate .ag-policyTitle{ margin:0; font-size:30px; line-height:1.05; letter-spacing:-.5px; color:var(--ag-ink); }
.siteAgeGate .ag-sub{ margin:10px 0 0; color:var(--ag-muted); font-size:14px; line-height:1.45; }
.siteAgeGate .ag-panel{ display:block; }
.siteAgeGate .ag-panel--policy{ padding-bottom:4px; max-height:100%; overflow:auto; overscroll-behavior:contain; }
.siteAgeGate .ag-policyLead{ margin-top:16px; color:var(--ag-ink); font-weight:700; }
.siteAgeGate .ag-policyEnd{ margin-top:16px; }
.siteAgeGate .ag-policyList{ margin:12px 0 0; padding-left:18px; color:var(--ag-muted); font-size:13px; line-height:1.55; }
.siteAgeGate .ag-policyList li{ margin:8px 0; }
.siteAgeGate .ag-err{
  margin:12px 0 0; padding:10px 12px; border-radius:14px;
  background:rgba(246,195,106,.10); border:1px solid rgba(246,195,106,.22); color:rgba(246,195,106,.95); font-size:13px; line-height:1.35;
}
.siteAgeGate .ag-meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:16px; border-top:1px solid rgba(107,207,140,.16);
}
.siteAgeGate .ag-link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:38px; min-width:96px; padding:10px 14px; border-radius:999px;
  border:1px solid rgba(107,207,140,.14); background:var(--ag-panel-soft); color:var(--ag-muted);
  text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.02em;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
  white-space:nowrap; cursor:pointer;
}
.siteAgeGate .ag-link:hover{ transform:translateY(-1px); border-color:rgba(107,207,140,.26); color:var(--ag-ink); background:var(--ag-panel-strong); }
.siteAgeGate .ag-link--back{ min-width:74px; }
.siteAgeGate .ag-holdRow{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.siteAgeGate .ag-k{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:var(--ag-panel-soft); border:1px solid var(--ag-stroke); color:var(--ag-muted); font-size:12px; user-select:none; }
.siteAgeGate .ag-k i{ width:8px; height:8px; border-radius:999px; background:rgba(123,196,127,.60); box-shadow:0 0 0 6px rgba(123,196,127,.10); display:block; }
.siteAgeGate .ag-hold{ position:relative; width:116px; height:116px; flex:none; }
.siteAgeGate .ag-ring{ position:absolute; inset:0; transform:rotate(-90deg); filter:drop-shadow(0 8px 14px rgba(0,0,0,.20)); }
.siteAgeGate .ag-ring circle{ fill:none; stroke-width:6.5; stroke-linecap:round; }
.siteAgeGate .ag-bgc{ stroke:var(--ag-hold-ring-bg); }
.siteAgeGate .ag-fgc{ stroke:var(--ag-hold-ring-fg); stroke-dasharray:1 999; transition:stroke .18s ease; }
.siteAgeGate .ag-holdBtn{
  position:absolute; inset:10px; border-radius:999px; border:1px solid rgba(107,207,140,.28);
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 38%),
    radial-gradient(90% 90% at 70% 75%, rgba(107,207,140,.22), rgba(107,207,140,0) 60%),
    linear-gradient(180deg, var(--ag-btn-bg-top), var(--ag-btn-bg-bottom));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 26px rgba(212,169,98,.05), var(--ag-glow-soft);
  color:var(--ag-btn-text); font-weight:900; letter-spacing:.20em; font-size:12px; text-transform:uppercase;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; outline:none;
}
.siteAgeGate .ag-hold::before{
  content:""; position:absolute; inset:-26px; border-radius:999px;
  background:radial-gradient(circle at 50% 55%, rgba(107,207,140,.45), rgba(107,207,140,0) 64%);
  opacity:0; transform:scale(.94); transition:opacity .16s ease, transform .16s ease; pointer-events:none;
}
.siteAgeGate.is-holding .ag-hold::before,
html.ag-isHolding .siteAgeGate .ag-hold::before{ opacity:1; transform:scale(1); }
.siteAgeGate.is-holding .ag-holdBtn,
html.ag-isHolding .siteAgeGate .ag-holdBtn{ border-color:rgba(107,207,140,.60); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -12px 26px rgba(212,169,98,.08), 0 0 0 12px rgba(107,207,140,.10), 0 20px 42px rgba(0,0,0,.30); }
.siteAgeGate .ag-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 22px 18px; border-top:1px solid rgba(107,207,140,.14);
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04));
}
.siteAgeGate .ag-ghost{
  border:1px solid var(--ag-stroke); background:var(--ag-panel-soft); color:var(--ag-muted);
  padding:10px 12px; border-radius:14px; font-size:13px; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.siteAgeGate .ag-ghost:hover{ transform:translateY(-1px); border-color:rgba(107,207,140,.24); color:var(--ag-ink); background:var(--ag-panel-strong); }
.siteAgeGate .ag-legal{ font-size:12px; color:rgba(242,246,243,.50); line-height:1.35; text-align:right; }
.siteAgeGate.is-resolving .ag-sheet{ opacity:.96; }
.siteAgeGate.is-resolving .ag-holdBtn{ pointer-events:none; }

@media (max-width: 520px){
  .siteAgeGate .ag-sheet{ border-radius:28px; }
  .siteAgeGate .ag-head{ padding:20px 18px 10px; }
  .siteAgeGate .ag-body{ padding:8px 18px 16px; }
  .siteAgeGate .ag-foot{ padding:12px 18px 16px; }
  .siteAgeGate .ag-body h1,
  .siteAgeGate .ag-policyTitle{ font-size:26px; }
  .siteAgeGate .ag-brandLogo{ width:106px; }
  .siteAgeGate .ag-foot{ align-items:flex-start; flex-direction:column; }
  .siteAgeGate .ag-legal{ text-align:left; }
}


/* ===== PATCH (2026-03-26): Notifications modal clarity + stronger surfaces ===== */
.notificationsModal .modal__panel{
  width:min(680px,calc(100vw - 24px));
  max-width:680px;
  border-radius:30px;
  overflow:hidden;
}
.notificationsPanel{
  background:
    radial-gradient(720px 260px at 8% -10%, rgba(123,196,127,.18), transparent 55%),
    radial-gradient(920px 340px at 100% 0%, rgba(255,219,143,.12), transparent 62%),
    linear-gradient(180deg, rgba(8,14,11,.985), rgba(13,22,17,.975));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 96px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}
.notificationsPanel__top{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.notificationsPanel__body{display:grid;gap:16px;padding:18px}
.notificationsHero{
  display:grid;gap:12px;padding:18px;border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 18px 42px rgba(0,0,0,.20);
}
.notificationsHero__badge{
  display:inline-flex;align-items:center;justify-content:center;width:max-content;
  min-height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,244,210,.18);
  background:linear-gradient(180deg, rgba(255,221,145,.16), rgba(255,221,145,.07));
  color:rgba(255,240,205,.96);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.notificationsHero__title{font-size:24px;line-height:1.02;font-weight:800;letter-spacing:-.03em;color:rgba(245,247,250,.96)}
.notificationsHero__sub{font-size:13px;line-height:1.55;color:rgba(245,247,250,.74);max-width:62ch}
.notificationsHero__pills{display:flex;flex-wrap:wrap;gap:8px}
.notificationsGuide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.notificationsGuide__step{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:flex-start;
  padding:12px 13px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.notificationsGuide__num{
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(123,196,127,.96), rgba(98,177,118,.92));
  color:rgba(10,18,14,.96);font-size:12px;font-weight:900;
  box-shadow:0 10px 22px rgba(123,196,127,.24);
}
.notificationsGuide__copy{display:grid;gap:4px}
.notificationsGuide__title{font-size:13px;font-weight:780;letter-spacing:-.01em;color:rgba(245,247,250,.95)}
.notificationsGuide__text{font-size:12px;line-height:1.5;color:rgba(245,247,250,.66)}
.notificationsStateText{margin:0;font-size:12.5px;line-height:1.55;color:rgba(245,247,250,.72)}
.notificationsSection{
  display:grid;gap:12px;padding:16px;border-radius:22px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}
.notificationsSection .profileSection__title{margin:0;color:rgba(245,247,250,.94)}
.notificationsSection__lead,
.notificationsSection__sub{margin:0;font-size:12.5px;line-height:1.55;color:rgba(245,247,250,.68)}
.notificationsSection__micro{margin:-2px 0 0;font-size:11.5px;line-height:1.45;color:rgba(245,247,250,.54)}
.notificationsList,.notificationsStack{display:grid;gap:12px}
.notificationsRow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:16px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);
  cursor:pointer;transition:border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease
}
.notificationsRow:hover{transform:translateY(-1px);border-color:rgba(123,196,127,.18);background:rgba(255,255,255,.06);box-shadow:0 16px 28px rgba(0,0,0,.14)}
.notificationsRow:focus-visible{outline:none;border-color:rgba(255,219,143,.28);box-shadow:0 0 0 4px rgba(255,219,143,.12),0 16px 28px rgba(0,0,0,.14)}
.notificationsRow.is-on{border-color:rgba(123,196,127,.22);background:linear-gradient(180deg, rgba(123,196,127,.10), rgba(255,255,255,.04))}
.notificationsRow__copy{display:grid;gap:6px}
.notificationsRow__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.notificationsRow__title{font-size:15px;font-weight:780;letter-spacing:-.02em;color:rgba(245,247,250,.96)}
.notificationsRow__sub{font-size:12.75px;line-height:1.55;color:rgba(245,247,250,.74)}
.notificationsRow__hint{font-size:11.75px;line-height:1.45;color:rgba(245,247,250,.56)}
.notificationsRow__switchCol{display:grid;justify-items:end;gap:8px;align-items:center}
.notificationsRow__switchState{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,247,250,.62)}
.notificationsRow__switch{justify-self:end;align-self:center;flex:0 0 auto;transform:scale(1.06);transform-origin:center}
.notificationsTopicState{
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 11px;border-radius:999px;
  border:1px solid rgba(123,196,127,.18);background:rgba(123,196,127,.12);
  color:rgba(208,247,215,.96);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.notificationsTopicState.is-off{
  border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(245,247,250,.72);
}
.notificationsTopicState.is-pending{
  border-color:rgba(255,219,143,.18);background:rgba(255,219,143,.10);color:rgba(255,233,192,.96);
}
.notificationsActions{display:flex;flex-wrap:wrap;gap:10px;justify-content:stretch}
.notificationsActions > .btn{flex:1 1 0;min-width:0}
.notificationsFooter{
  position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;
  padding:12px 0 0;margin-top:-2px;
  background:linear-gradient(180deg, rgba(13,22,17,0), rgba(13,22,17,.78) 24%, rgba(13,22,17,.96));
}
.notificationsFooter .btn{width:100%}
.notificationsPanel .switch[disabled],.notificationsInlineView .switch[disabled]{opacity:.55;pointer-events:none}
.notificationsPanel.is-denied .notificationsRow,.notificationsInlineView.is-denied .notificationsRow{opacity:.9}
html[data-theme="light"] .notificationsPanel{
  background:
    radial-gradient(720px 260px at 8% -10%, rgba(123,196,127,.17), transparent 55%),
    radial-gradient(920px 340px at 100% 0%, rgba(255,219,143,.14), transparent 62%),
    linear-gradient(180deg, rgba(252,248,242,.99), rgba(244,239,231,.985));
  border-color:rgba(15,23,42,.08);
  box-shadow:0 28px 72px rgba(15,23,42,.14);
}
html[data-theme="light"] .notificationsPanel__top{
  border-bottom-color:rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
}
html[data-theme="light"] .notificationsHero,
html[data-theme="light"] .notificationsSection,
html[data-theme="light"] .notificationsRow,
html[data-theme="light"] .notificationsGuide__step{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.08);
  box-shadow:0 18px 44px rgba(15,23,42,.08)
}
html[data-theme="light"] .notificationsHero__badge{
  border-color:rgba(199,147,19,.20);
  background:linear-gradient(180deg, rgba(255,223,142,.28), rgba(255,223,142,.14));
  color:rgba(92,61,0,.92);
}
html[data-theme="light"] .notificationsGuide__num{
  color:rgba(10,18,14,.96);
  box-shadow:0 10px 22px rgba(71,155,93,.18);
}
html[data-theme="light"] .notificationsHero__title,
html[data-theme="light"] .notificationsGuide__title,
html[data-theme="light"] .notificationsSection .profileSection__title,
html[data-theme="light"] .notificationsRow__title{color:rgba(15,27,20,.94)}
html[data-theme="light"] .notificationsHero__sub,
html[data-theme="light"] .notificationsGuide__text,
html[data-theme="light"] .notificationsSection__lead,
html[data-theme="light"] .notificationsSection__sub,
html[data-theme="light"] .notificationsRow__sub,
html[data-theme="light"] .notificationsStateText{color:rgba(15,27,20,.72)}
html[data-theme="light"] .notificationsSection__micro,
html[data-theme="light"] .notificationsRow__hint{color:rgba(15,27,20,.58)}
html[data-theme="light"] .notificationsRow__switchState{color:rgba(15,27,20,.56)}
html[data-theme="light"] .notificationsRow:hover{border-color:rgba(54,143,83,.18);background:rgba(255,255,255,.90);box-shadow:0 18px 34px rgba(15,23,42,.08)}
html[data-theme="light"] .notificationsRow:focus-visible{box-shadow:0 0 0 4px rgba(199,147,19,.12),0 18px 34px rgba(15,23,42,.08);border-color:rgba(199,147,19,.20)}
html[data-theme="light"] .notificationsRow.is-on{border-color:rgba(54,143,83,.16);background:linear-gradient(180deg, rgba(230,246,233,.98), rgba(255,255,255,.88))}
html[data-theme="light"] .notificationsTopicState{
  border-color:rgba(54,143,83,.16);background:rgba(54,143,83,.10);color:rgba(25,104,50,.94);
}
html[data-theme="light"] .notificationsTopicState.is-off{
  border-color:rgba(15,27,20,.10);background:rgba(15,27,20,.04);color:rgba(15,27,20,.68);
}
html[data-theme="light"] .notificationsTopicState.is-pending{
  border-color:rgba(199,147,19,.18);background:rgba(199,147,19,.10);color:rgba(112,79,0,.92);
}
html[data-theme="light"] .notificationsFooter{
  background:linear-gradient(180deg, rgba(244,239,231,0), rgba(244,239,231,.78) 24%, rgba(244,239,231,.98));
}
@media (max-width: 640px){
  .notificationsPanel__body,.notificationsInlineView__body{padding:16px}
  .notificationsGuide{grid-template-columns:1fr}
  .notificationsEntryCard__top{flex-direction:column;align-items:stretch}
  .notificationsEntryCard .btn{width:100%}
  .notificationsRow{grid-template-columns:1fr;align-items:start}
  .notificationsRow__switchCol{justify-items:start;margin-top:2px}
  .notificationsRow__switch{justify-self:start;margin-top:0}
  .notificationsActions > .btn{flex:1 1 calc(50% - 5px);min-width:0}
  .notificationsFooter{grid-template-columns:1fr;gap:8px}
}

/* --- Notifications inline in Updates: full-width stack, no outer shell --- */
.morePane[data-more-pane="updates"] > .profileGrid{
  grid-template-columns:minmax(0,1fr) !important;
  gap:14px !important;
}
.notificationsInlineMain,
#notificationsInlineWrap{
  grid-column:1 / -1;
  width:100%;
  display:grid;
  gap:14px;
}
.notificationsEntryCard,
.toggleRow,
.updatesList,
.invoiceEmpty,
.notificationsInlineBody{
  width:100%;
}
#notificationsInlineView{
  display:grid;
  gap:14px;
}
.notificationsInlineTop{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:2px;
}
.notificationsInlineTitle{
  font-size:18px;
  font-weight:780;
  letter-spacing:-.02em;
  color:rgba(245,247,250,.96);
}
.notificationsInlineBody{
  display:grid;
  gap:14px;
}
html[data-theme="light"] .notificationsInlineTitle{ color:rgba(15,27,20,.94); }
.notificationsInlineView{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.notificationsEntryCard__top{ align-items:flex-start; }
.notificationsEntryCard .btn{ min-height:44px; }
@media (max-width: 720px){
  .notificationsEntryCard{ padding:16px; }
}


/* >>> assets:css/home_order_fix.css >>> */