/* Dialogs/popovers render in the top layer (outside .atv) -> colour tokens must exist at root */
:root {
  --ink: #2a2d5c;
  --ink-dim: rgba(42, 45, 92, .8);
}

/* ---------- Top bar: cart + account ---------- */
.tb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(42, 45, 92, .07);
  color: var(--ink);
  font: 500 14px "Prompt", sans-serif;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.tb-btn:hover, .tb-btn:focus-visible { background: var(--ink); color: #fff; outline: none; }
.tb-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-left: -5px; }
.tb-user.is-in { padding-left: 6px; }
.tb-user span { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font: 600 11.5px/1 "Prompt", sans-serif;
  box-shadow: 0 0 0 2px #fff;
}
.tb-badge[hidden] { display: none; }
.tb-badge.is-bump { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- My account page (dashboard) ---------- */
.acct { width: min(100%, 1040px); align-self: center; display: grid; gap: 16px; font-size: clamp(14px, 1vw, 16px); }
.acard { display: grid; align-content: start; gap: 12px; padding: clamp(18px, 2vw, 26px); border-radius: calc(var(--radius) * 1.3); background: var(--surface); box-shadow: var(--shadow-soft); min-width: 0; }
.acard h2 { margin: 0; font-size: 1.1em; font-weight: 600; }
.acard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amuted { margin: 0; color: var(--ink-dim); font-size: .9em; }
.amuted a { color: var(--ink); }
/* every tab: 2 equal columns, cards in a row share the same height; a stack's last card takes the spare height */
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.astack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.astack > :last-child { flex: 1 1 auto; }
.alink { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .9em; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Header */
.ahero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: clamp(20px, 2.6vw, 34px); border-radius: calc(var(--radius) * 1.5); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #fff 0%, #f3ecff 45%, #ffe6f2 100%); box-shadow: var(--shadow-soft); }
.ahero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 140, 255, .28), transparent 70%); pointer-events: none; }
.ahero__who { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); min-width: 0; }
.ahero__avatar { flex: none; width: clamp(68px, 7vw, 92px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 10px 26px rgba(90, 70, 150, .28); }
.ahero__avatar--blank { display: grid; place-items: center; background: linear-gradient(135deg, #b98cff, #ff9ccc); color: #fff; font-size: 34px; font-weight: 700; }
.ahero__txt { display: grid; min-width: 0; }
.ahero__txt small { color: var(--ink-dim); }
.ahero__txt h1 { margin: 0; font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ahero__txt p { margin: 2px 0 0; color: var(--ink-dim); font-size: .92em; }
.ahero__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 132px); gap: 10px; }
.astat { display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 0; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .75); box-shadow: 0 4px 14px rgba(90, 70, 150, .1); }
.astat i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 10px; background: #efe8ff; color: #6b4fd8; }
.astat:nth-child(2) i { background: #e3f8eb; color: #05873b; }
.astat:nth-child(3) i { background: #ffe8f2; color: #c43b7c; }
.astat b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3em; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.astat span { color: var(--ink-dim); font-size: .82em; }

/* Tabs */
.atabs { position: sticky; top: 8px; z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-soft); overflow-x: auto; scrollbar-width: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.atab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-dim); font: 500 15px "Prompt", sans-serif; white-space: nowrap; cursor: pointer; }
.atab:hover { color: var(--ink); background: rgba(42, 45, 92, .06); }
.atab[aria-selected="true"] { background: var(--ink); color: #fff; }
.atab em { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #ff5c8a; color: #fff; font-size: 12px; font-style: normal; line-height: 20px; }
.apanel { display: grid; gap: 16px; }

/* Overview */
.atodo { display: grid; gap: 8px; }
.atodo__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff4e0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.atodo__item--review, .atodo__item--paid { background: #e8f0fe; }
.atodo__item span { display: grid; }
.atodo__item small { color: var(--ink-dim); }
.atodo__item em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-weight: 600; white-space: nowrap; }
.atodo__item:hover { box-shadow: 0 0 0 2px var(--ink); }
.awelcome { grid-template-columns: 1fr auto; align-items: center; align-content: center; background: linear-gradient(120deg, rgba(255, 255, 255, .85), rgba(232, 240, 254, .85)); }
.awelcome p { margin: 4px 0 0; color: var(--ink-dim); font-size: .92em; }
.acart .abtn { align-self: end; }
.acart__row { display: flex; align-items: baseline; justify-content: space-between; }
.acart__row b { font-size: 1.4em; font-weight: 600; }
.acart__row span { color: var(--ink-dim); font-weight: 500; }
.aquick { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.aquick a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.aquick a:hover { background: rgba(42, 45, 92, .06); }
.aquick svg { opacity: .5; }

/* Order rows */
.olist { display: grid; gap: 8px; }
.orow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .7); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.orow:hover, .orow:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.orow img { border-radius: 12px; object-fit: cover; }
.orow__main { display: grid; min-width: 0; }
.orow__main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__main b small { color: var(--ink-dim); font-weight: 400; }
.orow__main > small { color: var(--ink-dim); font-size: .82em; }
.orow__side { display: grid; justify-items: end; gap: 4px; }
.orow__side b { font-variant-numeric: tabular-nums; }
.orow__cta { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-dim); font-size: .85em; white-space: nowrap; }
.orow--pending .orow__cta { color: #b25e00; font-weight: 600; }
.orow--cancelled { opacity: .6; }
.agrid .orow { grid-template-columns: 44px minmax(0, 1fr) auto; }
.agrid .orow img { width: 44px; height: 44px; }
.agrid .orow__cta { display: none; }
.opill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.opill--warn { background: #fff0d6; color: #a35400; }
.opill--info { background: #e3ecff; color: #2a55c4; }
.opill--ok { background: #ddf6e6; color: #05803a; }
.opill--off { background: rgba(42, 45, 92, .08); color: var(--ink-dim); }
.achips { display: flex; flex-wrap: wrap; gap: 6px; }
.achip { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(42, 45, 92, .06); color: var(--ink-dim); font: 500 14px "Prompt", sans-serif; cursor: pointer; }
.achip small { opacity: .7; }
.achip[aria-checked="true"] { background: var(--ink); color: #fff; }
.aempty { display: grid; justify-items: center; gap: 6px; padding: 26px 10px; text-align: center; color: var(--ink-dim); }
.aempty svg { width: 40px; height: 40px; opacity: .45; }
.aempty b { color: var(--ink); font-weight: 600; }
.aempty span { font-size: .9em; max-width: 36ch; }

/* Packages */
.apkg-note { padding: 10px 14px; border-radius: 12px; background: rgba(255, 244, 224, .9); }
.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pkg { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.pkg header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pkg header img { border-radius: 12px; }
.pkg header span { display: grid; min-width: 0; }
.pkg header b { font-weight: 600; }
.pkg header small { color: var(--ink-dim); font-size: .8em; }
.pkg pre, .secret pre { margin: 0; padding: 12px 14px; border-radius: 12px; background: #1f2147; color: #e9ecff; font: 14px/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.pkg footer { display: flex; justify-content: flex-end; }
.pkg__copy, .secret__copy { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 500 13px "Prompt", sans-serif; cursor: pointer; white-space: nowrap; }

/* Settings */
.alabel { font-size: .85em; color: var(--ink-dim); }
.aname { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aname b { font-size: 1.15em; font-weight: 600; overflow-wrap: anywhere; }
.arename { display: flex; flex-wrap: wrap; gap: 8px; }
.arename input { flex: 1 1 200px; min-width: 0; padding: 9px 14px; border: 1.5px solid rgba(42, 45, 92, .18); border-radius: 12px; background: #fff; color: var(--ink); font: 16px "Prompt", sans-serif; }
.arename input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(42, 45, 92, .12); }
.aprofile { display: grid; gap: 10px; margin: 0; }
.aprofile div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.aprofile dt { color: var(--ink-dim); font-size: .88em; }
.aprofile dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.aprofile + .abtn { justify-self: start; }
.aprofile-form { display: grid; gap: 6px; }
.aprofile-form input { width: 100%; min-width: 0; padding: 9px 14px; margin-bottom: 6px; border: 1.5px solid rgba(42, 45, 92, .18); border-radius: 12px; background: #fff; color: var(--ink); font: 16px "Prompt", sans-serif; }
.aprofile-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(42, 45, 92, .12); }
.aactions { display: flex; flex-wrap: wrap; gap: 8px; }
.aguest { justify-items: center; text-align: center; padding-block: clamp(28px, 4vw, 48px); }
.aguest img { border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(90, 70, 150, .25); }
.aguest h1 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); }
.aguest p { margin: 0; color: var(--ink-dim); max-width: 40ch; }

/* ---------- Order dialog ---------- */
.dlg--order { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border-radius: 26px; overflow: hidden auto; }
.dlg--order[open] { display: block; }
.ohead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 22px 56px 12px 22px; }
.ohead h2 { margin: 0; font-size: 18px; font-weight: 600; }
.obody { display: grid; gap: 14px; padding: 0 22px 22px; }
.oitems { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: 16px; background: rgba(42, 45, 92, .04); list-style: none; }
.oitems li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; }
.oitems img { border-radius: 10px; }
.oitems span { display: grid; min-width: 0; }
.oitems small { color: var(--ink-dim); font-size: 12.5px; }
.oitems em { font-style: normal; font-weight: 500; }
.oitems__total { grid-template-columns: 1fr auto !important; padding-top: 8px; border-top: 1px dashed rgba(42, 45, 92, .2); }
.oitems__total b { font-size: 18px; }
.omuted { margin: 0; color: var(--ink-dim); font-size: 13px; text-align: center; }
.onote { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(42, 45, 92, .06); font-size: 14px; }
.onote--bad { background: #fde8eb; color: #b3203a; }
.osteps { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; font-size: 14px; }
.osteps b { font-weight: 600; }
.oqr { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(42, 45, 92, .1); }
.oqr img { width: min(240px, 70vw); height: auto; }
.oqr__amt { display: grid; justify-items: center; }
.oqr__amt small { color: var(--ink-dim); font-size: 12.5px; }
.oqr__amt b { font-size: 26px; font-weight: 700; }
.oslip { display: grid; justify-items: center; gap: 8px; padding: 16px; border: 2px dashed rgba(42, 45, 92, .22); border-radius: 16px; color: var(--ink); font-weight: 500; text-align: center; cursor: pointer; }
.oslip:hover { border-color: var(--ink); background: rgba(42, 45, 92, .03); }
.oslip img { max-width: 100%; max-height: 220px; border-radius: 10px; }
.oslip img[hidden] { display: none; }
.obtn { width: 100%; padding: 12px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 600 15px "Prompt", sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(42, 45, 92, .16); }
.obtn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.obtn--primary:disabled { opacity: .4; cursor: default; }
.obtn--ghost { width: auto; padding: 7px 16px; font-size: 13.5px; font-weight: 500; }
.obtn--link { width: auto; justify-self: center; padding: 4px; background: none; box-shadow: none; color: #b3203a; font-weight: 500; font-size: 14px; }
.owait, .odone { display: grid; justify-items: center; gap: 6px; padding: 18px; border-radius: 16px; background: #e8f0fe; text-align: center; }
.owait span:not(.spin), .odone span { color: var(--ink-dim); font-size: 13.5px; }
.odone { background: #ddf6e6; }
.odone b { color: #05803a; }
.spin { width: 28px; height: 28px; border: 3px solid rgba(42, 85, 196, .2); border-top-color: #2a55c4; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.oresend summary { color: var(--ink-dim); font-size: 13.5px; text-align: center; cursor: pointer; }
.oresend[open] { display: grid; gap: 12px; }
.secret { display: grid; gap: 6px; }
.secret__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

@media (max-width: 860px) {
  .ahero { grid-template-columns: 1fr; }
  .ahero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .astat { padding: 10px; }
  .astat i { display: none; }
  .astat b { font-size: 1.05em; }
  .orow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .orow img { width: 44px; height: 44px; }
  .orow__cta { display: none; }
  .awelcome { grid-template-columns: 1fr; }
  .atab { padding: 8px 12px; font-size: 14px; }
}

.mlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mrow2 { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .6); }
.mrow2__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(42, 45, 92, .07); color: var(--ink-dim); }
.mrow2.is-on .mrow2__ic--line { background: #06c755; color: #fff; }
.mrow2.is-on .mrow2__ic--google { background: #fff; box-shadow: inset 0 0 0 1px rgba(42, 45, 92, .12); }
.mrow2.is-on .mrow2__ic--discord { background: #5865f2; color: #fff; }
.mrow2.is-on .mrow2__ic--password { background: var(--ink); color: #fff; }
.mrow2__txt { display: grid; min-width: 0; }
.mrow2__txt b { font-weight: 500; }
.mrow2__txt small { color: var(--ink-dim); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow2.is-on .mrow2__txt small { color: #05873b; }

.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; padding: 10px 20px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 500 15px "Prompt", sans-serif; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(42, 45, 92, .14); transition: background-color .2s, color .2s, box-shadow .2s; }
.abtn:hover, .abtn:focus-visible { background: var(--ink); color: #fff; box-shadow: none; outline: none; }
.abtn:disabled { opacity: .5; cursor: default; }
.abtn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.abtn--primary:hover, .abtn--primary:focus-visible { background: #3a3e7a; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.abtn--sm { padding: 7px 14px; font-size: 13.5px; }
.abtn--quiet { background: transparent; box-shadow: none; color: var(--ink-dim); }
.abtn--danger { color: #d12a43; box-shadow: inset 0 0 0 1.5px rgba(209, 42, 67, .3); }
.abtn--danger:hover, .abtn--danger:focus-visible { background: #d12a43; color: #fff; }
.lform__submit--danger { background: #d12a43 !important; }

@media (max-width: 380px) {
  .mrow2 { grid-template-columns: 36px 1fr; }
  .mrow2 > .abtn { grid-column: 2; justify-self: start; }
}

/* ---------- User menu (popover, unused: profile button opens /account) ---------- */
.umenu {
  inset: auto;
  top: 84px;
  right: max(16px, calc((100vw - 1400px) / 2));
  margin: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(90, 70, 150, .25);
  font-family: "Prompt", sans-serif;
}
.umenu:popover-open { display: grid; gap: 8px; }
.umenu__head { display: grid; }
.umenu__head b { font-size: 17px; }
.umenu__head small { color: var(--ink-dim); }
.umenu__providers { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 1px 10px; border-radius: 999px; background: rgba(42, 45, 92, .07); font-size: 12.5px; }
.chip--google { background: #e8f0fe; color: #1a56c4; }
.chip--discord { background: #eceefe; color: #4752c4; }
.chip--line { background: #e3f8eb; color: #05873b; }
.umenu__link { color: var(--ink-dim); font-size: 14px; text-decoration: none; padding: 4px 0; }
.umenu__link:hover { color: var(--ink); }
.umenu__out { margin-top: 4px; padding: 9px; border: 0; border-radius: 12px; background: #fde8eb; color: #d12a43; font: 500 14px "Prompt", sans-serif; cursor: pointer; }

/* ---------- Dialogs (shared) ---------- */
.dlg {
  border: 0;
  padding: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Prompt", sans-serif;
  box-shadow: 0 30px 80px rgba(42, 30, 90, .35);
}
/* MANDATORY (dialog guide): no scroll chaining to the page behind */
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { overflow: hidden; overscroll-behavior: contain; background: rgba(30, 20, 60, .35); backdrop-filter: blur(4px); }
.linkbtn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- Login ---------- */
.dlg--login {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 26px;
  overflow: auto;
}
.dlg--login[open] { display: grid; justify-items: center; gap: 12px; padding: 26px 26px 22px; }
.dlg__x { position: absolute; top: 12px; right: 12px; margin: 0; }
.dlg__x button, .dlg__close {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(42, 45, 92, .07); color: var(--ink); font-size: 15px; cursor: pointer;
}
.dlg__x button:hover, .dlg__close:hover { background: rgba(42, 45, 92, .14); }
.dlg__logo { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(90, 70, 150, .25); }
.dlg--login h2 { margin: 0; font-size: 24px; font-weight: 600; }
.dlg__reason { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff4e0; color: #8a5300; font-size: 14px; text-align: center; }
.dlg__reason[hidden] { display: none; }

.oauths { display: grid; gap: 8px; width: 100%; }
.oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px; border-radius: 14px; border: 1.5px solid rgba(42, 45, 92, .14);
  color: var(--ink); text-decoration: none; font-weight: 500; transition: background-color .15s, border-color .15s;
}
.oauth:hover { background: rgba(42, 45, 92, .04); border-color: rgba(42, 45, 92, .3); }
.oauth--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.oauth--discord:hover { background: #4752c4; border-color: #4752c4; }
.oauth--line { background: #06c755; border-color: #06c755; color: #fff; }
.oauth--line:hover { background: #05b04b; border-color: #05b04b; }
.oauth.is-off { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--ink-dim); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(42, 45, 92, .14); }

.oauth-note { margin: -2px 0 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; text-align: center; }
.oauth-note b { color: var(--ink); font-weight: 500; }
.oauth-note a { color: var(--ink); }
.lform { display: grid; gap: 12px; width: 100%; }
.lform__row { display: grid; gap: 5px; }
.lform__row[hidden] { display: none; }
.lform label { font-size: 14px; font-weight: 500; }
.lform label small { color: var(--ink-dim); font-weight: 400; }
.lform input[type="text"], .lform input[type="password"] {
  width: 100%; padding: 11px 14px; border: 1.5px solid rgba(42, 45, 92, .18); border-radius: 12px;
  background: #fff; color: var(--ink); font: 16px "Prompt", sans-serif; /* 16px: no iOS zoom on focus */
}
.lform input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(42, 45, 92, .12); }
.lform input:user-invalid { border-color: #e0354b; }
.lform__hint { color: var(--ink-dim); font-size: 12.5px; }
.lform__hint[hidden] { display: none; }
.lform__show { display: inline-flex; align-items: center; gap: 6px; font-weight: 400 !important; color: var(--ink-dim); cursor: pointer; width: fit-content; }
.lform__err { margin: 0; min-height: 1.4em; color: #d12a43; font-size: 14px; text-align: center; }
.lform__ts:empty { display: none; }
.lform__ts { display: flex; justify-content: center; }
.lform__submit { width: 100%; padding: 12px; font-size: 16px; background: var(--ink) !important; color: #fff !important; }
.lform__switch { margin: 0; text-align: center; color: var(--ink-dim); font-size: 14px; }

/* ---------- Cart page (/cart): list left, sticky summary right; stacked on phone ---------- */
.cpage { width: min(100%, 1100px); align-self: center; display: grid; gap: clamp(12px, 1.4vw, 20px); }
.cpage__count { color: var(--ink-dim); font-size: .5em; font-weight: 500; vertical-align: middle; }
.cpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.cpage__list { display: grid; gap: 10px; padding: clamp(12px, 1.2vw, 18px); border-radius: calc(var(--radius) * 1.3); background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-soft); }
.cpage__more { justify-self: start; padding: 8px 14px; border-radius: 999px; color: var(--ink); font-weight: 500; text-decoration: none; }
.cpage__more:hover, .cpage__more:focus-visible { background: var(--ink); color: #fff; outline: none; }
.cpage__more[hidden] { display: none; }
.cpage__sum { position: sticky; top: 90px; border-top: 0 !important; border-radius: calc(var(--radius) * 1.3); background: #fff; box-shadow: var(--shadow-soft); padding: 20px !important; }
.cpage__sumh { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.cpage__howto { justify-self: center; margin-top: 10px; color: #5b47c9; font-size: 14px; font-weight: 500; }
.cpage__howto[hidden] { display: none; }
.cpage.is-empty .cpage__sum, .cpage.is-empty .cpage__more { display: none; }
.cpage.is-empty .cpage__grid { grid-template-columns: minmax(0, 1fr); }
.cart__items { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 10px; }
.cline {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: 18px; background: #f7f5fc;
}
.cline img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.cline__main { display: grid; min-width: 0; }
.cline__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cline__main small { color: var(--ink-dim); font-size: 12.5px; }
.cline__price { font-weight: 600; font-size: 15px; }
.cline.is-off { opacity: .6; }
.cline .bad { color: #d12a43; }
.cline__over { display: block; margin-top: 2px; color: #d12a43; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.cline__over .linkbtn { color: #d12a43; font-size: 12.5px; }
.cline__qty output.bad { color: #d12a43; }
.cline__qty { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(42, 45, 92, .1); }
.cline__qty output { min-width: 22px; text-align: center; font-weight: 600; }
.qbtn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 18px; cursor: pointer; }
.qbtn:hover:not(:disabled) { background: rgba(42, 45, 92, .08); }
.qbtn:disabled { opacity: .3; cursor: default; }
.cline__del { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; }
.cline__del:hover { background: #fde8eb; color: #d12a43; }
.cempty { display: grid; justify-items: center; gap: 6px; padding: clamp(30px, 5vw, 60px) 0; color: var(--ink-dim); text-align: center; }
.cempty img { width: 120px; height: 120px; border-radius: 50%; opacity: .9; }
.cempty img.is-art { width: clamp(220px, 26vw, 340px); height: auto; border-radius: 0; opacity: 1; }
.cempty .btn { margin-top: 12px; padding: 11px 26px; text-decoration: none; background: var(--ink); color: #fff; }
.cempty b { color: var(--ink); font-size: 17px; }
.cart__warn { margin: 0 16px; padding: 8px 12px; border-radius: 12px; background: #fff4e0; color: #8a5300; font-size: 13.5px; }
.cart__warn[hidden] { display: none; }
.cart__foot { display: grid; gap: 4px; }
.cart__sum { display: flex; align-items: baseline; justify-content: space-between; }
.cart__sum span { color: var(--ink-dim); }
.cart__sum b { font-size: 28px; font-weight: 600; }
.cart__saved { color: #1aa76a; font-size: 13.5px; min-height: 1.2em; }
.cart__checkout { margin-top: 8px; padding: 13px; font-size: 16px; background: var(--ink) !important; color: #fff !important; }
.cart__checkout:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .tb-badge.is-bump { animation: none; }
}
a.tb-btn { text-decoration: none; }

.ohowpay { display: block; margin: -4px 0 12px; color: #5b47c9; font-size: 14px; font-weight: 500; }
/* ---------- How to order / how to pay pages ---------- */
.howto { width: min(100%, 1100px); align-self: center; display: grid; gap: clamp(14px, 1.6vw, 24px); }
.howto__headtext h1 { margin: 0; font-size: clamp(24px, 2.6vw, 42px); font-weight: 700; line-height: 1.2; }
.howto__headtext p { margin: 8px 0 0; color: var(--ink-dim); font-size: clamp(14px, 1.1vw, 18px); }
/* hero picture with the title on its empty left side */
.howto__head.has-hero { position: relative; overflow: hidden; border-radius: calc(var(--radius) * 1.3); box-shadow: var(--shadow-soft); background: #ece4fb; }
.howto__hero { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 20%; }
.has-hero .howto__headtext { position: absolute; left: clamp(20px, 5%, 64px); top: 50%; transform: translateY(-50%); max-width: 46%; }
.has-hero .howto__headtext h1 { font-size: clamp(28px, 3.6vw, 52px); }
.has-hero .howto__headtext p { padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .7); color: var(--ink); width: fit-content; }
.howto__steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.hstep { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: calc(var(--radius) * 1.3); background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.hstep__art { display: block; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #f1e9ff, #e7f1ff); }
.hstep__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hstep__art--blank { display: grid; place-items: center; }
.hstep__art--blank img { width: 34%; height: auto; border-radius: 50%; opacity: .55; }
.hstep__body { position: relative; padding: 18px 20px 20px; }
.hstep__no { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 0 0 4px #fff; }
.hstep.has-img .hstep__no { position: absolute; top: -22px; left: 18px; }
.hstep.has-img .hstep__body { padding-top: 30px; }
.hstep h2 { margin: 0 0 6px; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; }
.hstep p { margin: 0; color: var(--ink-dim); line-height: 1.6; }
.hstep a, .howto__end a:not(.btn) { color: #5b47c9; }
.howto__end { display: grid; justify-items: center; gap: 12px; padding: clamp(18px, 2vw, 28px); border-radius: calc(var(--radius) * 1.3); background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-soft); text-align: center; }
.howto__end p { margin: 0; }
.howto__cta { padding: 12px 28px; font-size: 16px; text-decoration: none; background: var(--ink) !important; color: #fff !important; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .tb-btn { height: 36px; min-width: 36px; padding: 0 8px; }
  /* phone: picture only; no picture (logged out / no avatar) = short text instead */
  .tb-user:has(img:not([hidden])) span { display: none; }
  .tb-user span { max-width: 9ch; font-size: 13px; }
  .tb-user.is-in { padding: 0 3px; }
  .tb-user img { margin: 0; }
  .topbar__right { gap: 8px !important; }
  .umenu { top: 70px; right: 12px; }
  .cpage__grid { grid-template-columns: minmax(0, 1fr); }
  .cpage__sum { position: static; }
  /* hero: picture on top (character side), title under it */
  .howto__hero { aspect-ratio: 16 / 10; object-position: 78% 30%; }
  .has-hero .howto__headtext { position: static; transform: none; max-width: none; padding: 16px 18px 18px; background: #fff; }
  .has-hero .howto__headtext h1 { font-size: 26px; }
  .has-hero .howto__headtext p { padding: 0; background: none; color: var(--ink-dim); }
  .cline { grid-template-columns: 52px 1fr auto; }
  .cline img { width: 52px; height: 52px; }
  .cline__qty { grid-column: 2; justify-self: start; }
  .cline__del { grid-column: 3; grid-row: 1; }
}

/* ---------- News popup (pages inside, set in admin) ---------- */
.dlg--news {
  /* --news-w / --news-img-h: set from the picture's shape (news.js fit) */
  width: var(--news-w, min(460px, calc(100vw - 24px)));
  transition: width .25s ease;
  max-height: calc(100dvh - 24px);
  border-radius: 26px;
  overflow: hidden auto; /* page slide-in must not show a sideways scrollbar */
}
.dlg--news[open] { display: grid; gap: 14px; padding: 22px 22px 18px; }
.dlg--news .dlg__x { z-index: 1; }
.news__body { display: grid; gap: 10px; animation: newsIn .25s ease-out; }
@keyframes newsIn { from { opacity: 0; transform: translateX(10px); } }
.news__img {
  display: block;
  width: calc(100% + 44px);
  height: auto;
  margin: -22px -22px 4px;
  max-height: var(--news-img-h, 60vh);
  object-fit: contain; /* whole picture, never cropped */
  background: #f4f0fa;
  border-radius: 26px 26px 0 0;
}
.news__title { margin: 0; padding-right: 40px; font-size: 21px; font-weight: 600; line-height: 1.35; }
.news__img + .news__title { padding-right: 0; }
.news__text { margin: 0; white-space: pre-line; line-height: 1.7; color: rgba(42, 45, 92, .85); }
.news__link {
  justify-self: start;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(42, 45, 92, .08);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.news__link:hover, .news__link:focus-visible { background: var(--ink); color: #fff; outline: none; }

.news__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.news__dots { display: flex; gap: 6px; }
.news__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(42, 45, 92, .22); cursor: pointer; transition: width .25s, background-color .25s; }
.news__dot[aria-current] { width: 20px; background: var(--ink); }
.news__count { margin-right: auto; color: rgba(42, 45, 92, .6); font-size: 13px; font-variant-numeric: tabular-nums; }
.news__btn {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(42, 45, 92, .07);
  color: var(--ink);
  font: 500 15px "Prompt", sans-serif;
  cursor: pointer;
}
.news__btn:hover, .news__btn:focus-visible { background: rgba(42, 45, 92, .14); outline: none; }
.news__btn--primary { background: var(--ink); color: #fff; }
.news__btn--primary:hover, .news__btn--primary:focus-visible { background: #3a3e7a; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.news__btn[hidden], .news__hide[hidden] { display: none; }
.news__hide { order: 10; flex-basis: 100%; margin-top: 2px; padding: 4px 0; border: 0; background: none; color: rgba(42, 45, 92, .6); font: 13px "Prompt", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.news__hide:hover, .news__hide:focus-visible { color: var(--ink); outline: none; }
@media (prefers-reduced-motion: reduce) { .news__body { animation: none; } }

/* ---------- Forgot / change password ---------- */
.lform[hidden], .forgot[hidden] { display: none; }
.lform__agree { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; line-height: 1.5; }
.lform__agree[hidden] { display: none; }
.lform__agree input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.lform__agree a { color: var(--ink); font-weight: 500; }
.lform input[type="email"] { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(42, 45, 92, .18); border-radius: 12px; background: #fff; color: var(--ink); font: 16px "Prompt", sans-serif; }
.lform__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lform__forgot { font-size: 14px; font-weight: 500; }
.forgot { display: grid; gap: 10px; width: 100%; }
.forgot__way { padding: 12px 14px; border-radius: 14px; background: rgba(42, 45, 92, .05); }
.forgot__way b { font-weight: 600; }
.forgot__way p { margin: 4px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
.forgot__contact {
  margin-top: 10px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font: 500 14px "Prompt", sans-serif; cursor: pointer;
}
.forgot__contact:hover, .forgot__contact:focus-visible { background: #3a3e7a; outline: none; }
.umenu__btn { padding: 4px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.umenu__btn[hidden] { display: none; }
#dlg-pass .lform { margin-top: 4px; }
#p-cur-row[hidden] { display: none; }


/* ---------- Rewards page (/rewards) ---------- */
.rw { width: min(100%, 1040px); align-self: center; display: grid; gap: 16px; font-size: clamp(14px, 1vw, 16px); }
.rw-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: clamp(20px, 2.6vw, 34px); border-radius: calc(var(--radius) * 1.5); overflow: hidden;
  background: linear-gradient(135deg, #fff6d9, #ffe8f2 55%, #efe8ff); box-shadow: var(--shadow-soft); }
.rw-hero::after { content: ""; position: absolute; right: -50px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 80, .35), transparent 70%); pointer-events: none; }
.rw-hero__txt h1 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; }
.rw-hero__txt p { margin: 4px 0 0; color: var(--ink-dim); max-width: 52ch; }
.rw-bal { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-width: 180px; padding: 16px 22px; border-radius: 20px; background: rgba(255, 255, 255, .85); box-shadow: 0 6px 20px rgba(90, 70, 150, .14); text-align: center; }
.rw-bal small, .rw-bal span { color: var(--ink-dim); font-size: .85em; }
.rw-bal b { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #e08a00, #c43b7c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rw-bal--guest { gap: 10px; }
.rw-ways, .rw-coupons, .rw-prizes, .rw-log, .rw-odds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw-ways li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(42, 45, 92, .04); }
.rw-ways i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff3d1; color: #b36b00; }
.rw-ways span, .rw-coupon span, .rw-prizes li > span:first-child, .rw-log span { display: grid; min-width: 0; }
.rw-ways small, .rw-coupon small, .rw-prizes small, .rw-log small { color: var(--ink-dim); font-size: .85em; }
.rw-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px dashed rgba(196, 59, 124, .35); border-radius: 14px; background: #fff7fb; }
.rw-coupon code, .rw-ref__code b { font: 600 15px ui-monospace, Consolas, monospace; letter-spacing: 1px; }
.rw-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.rw-item { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px rgba(90, 70, 150, .1); }
/* picture fills a fixed box (absolute: a big upload never pushes the card open), whole picture visible */
.rw-item__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #fff3d1, #ffe8f2); color: #c43b7c; }
.rw-item__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.rw-item__img svg { width: 44px; height: 44px; }
.rw-item__body { display: grid; align-content: start; gap: 2px; padding: 12px 14px 4px; }
.rw-item__body small { color: var(--ink-dim); font-size: .85em; }
.rw-left { color: #b36b00 !important; }
.rw-item footer, .rw-box footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; }
.rw-box footer { padding: 0; }
.rw-cost { font-weight: 700; color: #b36b00; }
/* wheel */
.rw-wheel-card { justify-items: center; text-align: center; }
.rw-wheel { position: relative; width: min(86vw, 380px); aspect-ratio: 1; margin: 6px 0; }
.rw-wheel__svg { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 8px #fff, 0 0 0 10px rgba(255, 190, 60, .6), 0 18px 40px rgba(90, 70, 150, .25); will-change: transform; }
.rw-wheel__svg text { fill: #2a2d5c; font-family: "Prompt", sans-serif; font-weight: 600; }
.rw-wheel__pin { position: absolute; z-index: 2; top: -14px; left: 50%; width: 30px; height: 38px; transform: translateX(-50%); background: #ff4d6d; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.rw-spin { min-width: 220px; }
.rw-odds { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); width: 100%; text-align: left; font-size: .88em; }
.rw-odds li { display: flex; align-items: center; gap: 8px; }
.rw-odds i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.rw-odds b, .rw-box__list b { margin-left: auto; color: var(--ink-dim); font-weight: 500; }
/* boxes */
.rw-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.rw-box { justify-items: center; text-align: center; }
.rw-box footer { width: 100%; }
.rw-box__art { position: relative; display: grid; place-items: center; width: 130px; aspect-ratio: 1; overflow: hidden; }
.rw-box__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rw-box__gift { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 28px; background: var(--box, #b98cff); color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--box, #b98cff) 45%, transparent); }
.rw-box__gift svg { width: 64px; height: 64px; }
.rw-box.is-opening .rw-box__art { animation: rwShake .5s ease-in-out infinite; }
@keyframes rwShake { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
.rw-box__list { width: 100%; text-align: left; font-size: .9em; }
.rw-box__list summary { color: var(--ink-dim); cursor: pointer; text-align: center; }
.rw-box__list ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.rw-box__list li { display: flex; gap: 8px; }
/* friends + code */
.rw-ref__code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff3d1; }
.rw-ref__code b { font-size: 24px; letter-spacing: 3px; }
.rw-ref__link { display: flex; gap: 8px; }
.rw-ref__link input, .rw-form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid rgba(42, 45, 92, .14); border-radius: 999px; background: #fff; color: var(--ink); font: 15px "Prompt", sans-serif; }
.rw-form input { text-transform: uppercase; letter-spacing: 1px; }
.rw-ref__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.rw-ref__stats div { display: grid; padding: 10px 6px; border-radius: 14px; background: rgba(42, 45, 92, .04); }
.rw-ref__stats b { font-size: 1.4em; }
.rw-ref__stats span { color: var(--ink-dim); font-size: .8em; }
.rw-steps { display: grid; gap: 6px; margin: 0; padding-left: 1.3em; }
.rw-form { display: flex; gap: 8px; }
.rw-codebox { max-width: 560px; }
/* history */
.rw-prizes li, .rw-log li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(42, 45, 92, .07); }
.rw-prizes__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.rw-log em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.rw-log em.is-up { color: #05873b; }
.rw-log em.is-down { color: #d12a43; }
/* result dialog */
.dlg--rw { width: min(400px, calc(100vw - 24px)); border-radius: 26px; }
.dlg--rw[open] { display: block; padding: 26px; }
.dlg--rw .dlg__close { position: absolute; top: 12px; right: 12px; }
.rw-res { display: grid; justify-items: center; gap: 8px; text-align: center; }
.rw-res h2 { margin: 0; font-size: 26px; }
.rw-res p { margin: 0; }
.rw-res small { color: var(--ink-dim); }
.rw-res__burst { font-size: 64px; line-height: 1; }
.rw-res.is-won .rw-res__burst { animation: rwPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rwPop { from { transform: scale(.3) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
.rw-res .rw-ref__code { width: 100%; }
/* cart code */
.cart__code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; margin-bottom: 8px; }
.cart__code[hidden] { display: none; }
.cart__code input { min-width: 0; padding: 9px 14px; border: 1.5px solid rgba(42, 45, 92, .14); border-radius: 999px; font: 15px "Prompt", sans-serif; text-transform: uppercase; }
.cart__code small { grid-column: 1 / -1; font-size: 13px; }
.cart__code small.bad { color: #d12a43; }
.cart__code small.good { color: #05873b; }
.cart__sum--off[hidden] { display: none; }
.cart__sum--off b { font-size: 18px; color: #05873b; }
.oitems__off { grid-template-columns: 1fr auto !important; }
.oitems__off em { color: #05873b; }
.arw { background: linear-gradient(135deg, #fff6d9, #fff); }
@media (max-width: 720px) {
  .rw-hero { grid-template-columns: 1fr; }
  .rw-bal { justify-self: stretch; }
  .rw-coupon { grid-template-columns: minmax(0, 1fr) auto; }
  .rw-coupon code { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-box.is-opening .rw-box__art, .rw-res.is-won .rw-res__burst { animation: none; }
}

/* rewards: uploaded pictures */
.rw-wheel__spin { position: relative; overflow: hidden; }
.rw-wheel__face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rw-wheel__labels { position: absolute; inset: 0; width: 100%; height: 100%; }
.rw-wheel__labels text { fill: #2a2d5c; font-family: "Prompt", sans-serif; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 2.6px; stroke-linejoin: round; }
.rw-wheel__pinimg { position: absolute; z-index: 2; top: -22px; left: 50%; width: 22%; max-height: 30%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); pointer-events: none; }
.rw-wheel__center { position: absolute; z-index: 2; top: 50%; left: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; }
/* wheel card background: PC / tablet / phone picture from admin, missing one falls back to the closest size */
.rw-wheel-card.has-bg { background: var(--surface) var(--wbg-pc, var(--wbg-tablet, var(--wbg-phone))) center / cover no-repeat; }
[data-device="tablet"] .rw-wheel-card.has-bg { background-image: var(--wbg-tablet, var(--wbg-pc, var(--wbg-phone))); }
[data-device="phone"] .rw-wheel-card.has-bg { background-image: var(--wbg-phone, var(--wbg-tablet, var(--wbg-pc))); }
.rw-box.has-img { padding: 0; overflow: hidden; gap: 0; }
.rw-box.has-img .rw-box__art { width: 100%; aspect-ratio: 1; }
.rw-box.has-img .rw-box__art img { object-fit: cover; }
/* text under the picture: same inset left + right, full width between them */
.rw-box.has-img > :not(.rw-box__art) { box-sizing: border-box; width: auto; justify-self: stretch; margin-inline: clamp(18px, 2.2vw, 24px); }
.rw-box.has-img > h2 { margin-top: 14px; }
.rw-box.has-img > :last-child { margin-bottom: clamp(16px, 2vw, 22px); }
.rw-box.has-img footer { margin-top: 10px; }
.rw-box.has-img.is-opening .rw-box__art { animation: none; }
.rw-box.has-img.is-opening .rw-box__art img { animation: rwShake .5s ease-in-out infinite; }
.rw-res__img { width: min(100%, 220px); aspect-ratio: 1; object-fit: cover; border-radius: 20px; }
.rw-res__img + .rw-res__burst { margin-top: -40px; font-size: 48px; }
@media (prefers-reduced-motion: reduce) { .rw-box.has-img.is-opening .rw-box__art img { animation: none; } }

/* ลูมี่ coin */
.lc { width: 1.25em; height: 1.25em; margin-right: .25em; vertical-align: -.28em; object-fit: contain; }
.lc--md { width: 28px; height: 28px; }
.lc-amt { display: inline-flex; align-items: center; white-space: nowrap; }
.lc-amt .lc { vertical-align: 0; }
.rw-bal b.rw-bal__num { display: inline-flex; align-items: center; gap: 8px; background: none; color: inherit; }
.rw-bal__num span { background: linear-gradient(135deg, #e08a00, #c43b7c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rw-bal__coin { width: clamp(38px, 4vw, 52px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 4px 8px rgba(180, 120, 0, .3)); }
.rw-log em .lc { width: 1.1em; height: 1.1em; }
.rw-res__coin { width: 120px; border-radius: 0; object-fit: contain; animation: rwCoin 1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rwCoin { from { transform: rotateY(540deg) scale(.4); } to { transform: rotateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .rw-res__coin { animation: none; } }

/* prize list inside a box: soft panel with inner padding */
.rw-box__list ul { padding: 10px 14px; border-radius: 12px; background: rgba(42, 45, 92, .04); }
.rw-box__list li { justify-content: space-between; }

/* member number "lmp123456" in the account header (click = copy) */
.amember { padding: 1px 8px; border: 0; border-radius: 999px; background: rgba(107, 79, 216, .1); color: inherit; font: inherit; cursor: pointer; }
.amember b { color: #6b4fd8; font-weight: 600; letter-spacing: .3px; }
.amember:hover, .amember:focus-visible { background: rgba(107, 79, 216, .2); outline: none; }

/* ---------- Order page (/order/LP...) ---------- */
.opage { width: min(100%, 640px); align-self: center; display: grid; gap: 12px; font-size: clamp(14px, 1vw, 16px); }
.opage__back { justify-self: start; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--ink); font-weight: 500; text-decoration: none; box-shadow: var(--shadow-soft); }
.opage__back:hover, .opage__back:focus-visible { background: var(--ink); color: #fff; outline: none; }
.opage__card { border-radius: calc(var(--radius) * 1.3); background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); overflow: hidden; }
.opage .ohead { padding: 22px 22px 12px; }
.opage .ohead h1 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }

.rw-form input.rw-form__ref { text-transform: none; }
.rw-ref__code b { text-transform: none; }

/* account: LINE OA chat link */
.aline__code { display: grid; gap: 4px; justify-items: start; padding: 12px 16px; border-radius: 14px; background: #e9fbe9; }
.aline__code span, .aline__code small { color: var(--ink-dim); font-size: .85em; }
.aline__code b { font-size: 1.5em; letter-spacing: 1px; color: #05873b; }

/* ---------- Log in / sign up page (/login, /register) ---------- */
.lpage { width: min(100%, 460px); align-self: center; }
.lpage__card { position: relative; padding: 26px 26px 22px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); font-family: "Prompt", sans-serif; }
.lpage__card .login-box, .dlg--login .login-box { display: grid; justify-items: center; gap: 12px; }
.lpage__card h2 { margin: 0; font-size: 24px; font-weight: 600; text-align: center; }
.lpage__card .dlg__logo { width: 72px; justify-self: center; }

/* ---------- Log in / sign up page v2 ---------- */
.lpage { width: min(100%, 940px); align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px rgba(90, 70, 150, .22); background: #fff; }
.lpage.is-solo { grid-template-columns: minmax(0, 440px); width: min(100%, 440px); }
.lpage.is-solo .lpage__side { display: none; }
.lpage__side { position: relative; display: grid; align-content: center; justify-items: start; gap: 14px; padding: 44px 40px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 80% at 0% 0%, #c9a8ff 0%, transparent 60%), radial-gradient(120% 90% at 100% 100%, #ff9ccc 0%, transparent 55%), linear-gradient(135deg, #8f6bff, #c86fd8); }
.lpage__side::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.lpage__art { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(60, 20, 120, .35)); animation: lpFloat 4s ease-in-out infinite; }
@keyframes lpFloat { 50% { transform: translateY(-8px); } }
.lpage__side h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.25; }
.lpage__side p { margin: 0; opacity: .92; line-height: 1.6; }
.lpage__perks { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.lpage__perks li { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.lpage__perks li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 13px; font-weight: 700; }
.lpage .lpage__card { border-radius: 0; box-shadow: none; padding: 32px 32px 26px; }
.lpage .login-box { justify-items: stretch; gap: 14px; }
.lpage .dlg__logo { justify-self: center; width: 56px; height: 56px; }
.lpage h2#login-title { margin: 0; text-align: center; font-size: 24px; font-weight: 700; }
.lseg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(42, 45, 92, .07); }
.lseg[hidden] { display: none; }
.lseg__btn { padding: 9px 0; border: 0; border-radius: 999px; background: none; color: var(--ink-dim); font: 600 14.5px "Prompt", sans-serif; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.lseg__btn.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(42, 45, 92, .14); }
.lpage .oauths { grid-template-columns: 1fr 1fr; gap: 8px; }
.lpage .oauth--line { grid-column: 1 / -1; }
.lpage .oauth { min-height: 46px; border-radius: 14px; }
.lpage .oauth-note { font-size: 12px; }
.lpage .lform input[type="text"], .lpage .lform input[type="password"], .lpage .lform input[type="email"] { min-height: 48px; padding: 0 16px; border-radius: 14px; background: #f7f6fc; border: 1.5px solid transparent; font-size: 15px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lpage .lform input:focus { background: #fff; border-color: #8f6bff; box-shadow: 0 0 0 4px rgba(143, 107, 255, .16); }
.lpage .lform__submit { min-height: 50px; border-radius: 14px; font-size: 16px; background: linear-gradient(135deg, #2a2d5c, #5a4fb0); }
.lpage #f-switch { display: none; } /* the tabs on top do this */
.lform__keep { display: none; }
@media (max-width: 820px) {
  .lpage { grid-template-columns: 1fr; width: min(100%, 460px); }
  .lpage__side { padding: 22px 24px; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; }
  .lpage__art { width: 64px; height: 64px; grid-row: span 2; }
  .lpage__side h2 { font-size: 20px; }
  .lpage__side p { font-size: 14px; }
  .lpage__perks { display: none; }
  .lpage .lpage__card { padding: 24px 20px 20px; }
  .lpage .dlg__logo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lpage__art { animation: none; } }

/* social login: round icons under the form, with the "or" line above */
.lpage .oauths { display: flex; justify-content: center; gap: 16px; }
.lpage .oauth { position: relative; width: 54px; height: 54px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; box-shadow: 0 4px 12px rgba(42, 45, 92, .12); transition: transform .15s, box-shadow .15s; }
.lpage .oauth:hover, .lpage .oauth:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(42, 45, 92, .2); outline: none; }
.lpage .oauth svg { width: 26px; height: 26px; }
.lpage .oauth span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* name kept for screen readers */
.lpage .oauth--google { background: #fff; border: 1.5px solid rgba(42, 45, 92, .14); }
.lpage .oauth-note { margin-top: -4px; }
.lpage .or { margin-top: 4px; }
.cart__email { display: grid; gap: 6px; margin-bottom: 10px; font-size: 13.5px; }
.cart__email[hidden] { display: none; }
.cart__email small { display: block; color: #6b6f9a; font-size: 12px; }
.cart__email input { padding: 10px 14px; border: 1.5px solid rgba(42, 45, 92, .14); border-radius: 999px; font: 15px "Prompt", sans-serif; }
.cart__email input:focus { outline: none; border-color: #7c5cff; }
.cart__email.is-bad input { border-color: #e0475b; }
.cline__how { display: block; color: #5b47c9; font-size: 12px; }

/* devices an account works on (order page + my packages) */
.devs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.devs span { color: var(--ink-dim); }
.devs i { padding: 2px 9px; border-radius: 999px; font-style: normal; font-weight: 500; }
.devs i.is-on { background: #e3f8eb; color: #05873b; }
.devs i.is-off { background: rgba(42, 45, 92, .06); color: rgba(42, 45, 92, .45); text-decoration: line-through; }

/* bought on / usable until */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(42, 45, 92, .05); font-size: 14px; }
.period span { display: grid; line-height: 1.3; }
.period small { color: var(--ink-dim); font-size: 12px; }
.period em { margin-left: auto; padding: 3px 12px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 13px; white-space: nowrap; }
.period em.is-ok { background: #e3f8eb; color: #05873b; }
.period em.is-soon { background: #fff1d6; color: #9a5b00; }
.period em.is-end { background: #ffe3e8; color: #c0233c; }

/* ID the shop took back */
.secret--gone { padding: 10px 14px; border-radius: 14px; background: #fff0f2; }
.secret--gone b small { color: #c0233c; }
.secret--gone p { margin: 0; }

/* merge two accounts */
.merge { display: grid; gap: 6px; }
.merge__card { display: grid; gap: 1px; padding: 12px 14px; border-radius: 16px; background: rgba(42, 45, 92, .05); }
.merge__card small { color: var(--ink-dim); font-size: 12px; }
.merge__card b { font-size: 16px; }
.merge__card span { color: var(--ink-dim); font-size: 13px; }
.merge__arrow { justify-self: center; font-style: normal; font-weight: 700; color: var(--ink-dim); }
.merge__note { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; line-height: 1.6; }
.merge__btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.merge__btns form { margin: 0; }
.merge__btns .lform__submit { width: auto; padding-inline: 22px; }
.merge__warn { padding: 8px 12px; border-radius: 12px; background: #fff1d6; color: #7a4a00 !important; }

/* news popup footer: "don't show today" on the left, main button on the right; stacked on phones */
.news__foot { gap: 10px 12px; padding-top: 14px; border-top: 1px solid rgba(42, 45, 92, .08); }
.news__count { margin-right: 0; }
.news__hide { order: 0; flex-basis: auto; margin: 0; padding: 8px 2px; }
#news-prev:not([hidden]), #news-prev[hidden] + #news-next { margin-left: auto; }
.news__btn { padding: 10px 20px; }
.news__btn--primary { min-width: 128px; padding: 11px 28px; font-weight: 600; }
@media (max-width: 520px) {
  .news__foot { flex-wrap: wrap; }
  .news__dots, .news__count { order: 0; }
  #news-prev, #news-next { flex: 1 1 40%; margin-left: 0; }
  .news__hide { order: 5; flex-basis: 100%; text-align: center; }
}
.news__dots:empty, .news__count:empty { display: none; }
@media (max-width: 520px) {
  .news__count { flex: 1 1 60%; }
}