/* 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__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 sheet ---------- */
.dlg--cart {
  /* side sheet on the right */
  margin: 0 0 0 auto;
  width: min(440px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 26px 0 0 26px;
}
.dlg--cart[open] { display: flex; flex-direction: column; animation: sheetIn .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
.cart__head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.cart__head h2 small { color: var(--ink-dim); font-size: 14px; font-weight: 400; }
.cart__head form { margin: 0; }
.cart__items { flex: 1; overflow: auto; margin: 0; padding: 6px 16px; 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__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: 50px 0; color: var(--ink-dim); text-align: center; }
.cempty img { border-radius: 50%; opacity: .9; }
.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; padding: 16px 20px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(42, 45, 92, .08); }
.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) {
  .dlg--cart[open], .tb-badge.is-bump { animation: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .tb-btn { height: 36px; min-width: 36px; padding: 0 8px; }
  .tb-user span { display: none; }
  .tb-user.is-in { padding: 0 3px; }
  .tb-user img { margin: 0; }
  .topbar__right { gap: 8px !important; }
  .umenu { top: 70px; right: 12px; }
  /* cart = bottom sheet */
  .dlg--cart {
    margin: auto 0 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 88dvh;
    border-radius: 26px 26px 0 0;
  }
  .dlg--cart[open] { animation-name: sheetUp; }
  @keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
  .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 {
  width: min(460px, calc(100vw - 24px));
  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);
  margin: -22px -22px 4px;
  max-height: 46vh;
  object-fit: cover;
  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; 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] { display: 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; }