/* account.css — the customer account area (sign-up, login, verification, password reset, dashboard, orders, wallet).
   Layered on home.css (tokens, buttons, reveals) and flow.css (fields, glass cards, chips) and scoped to
   .hx-main.hx-acc so it never touches site.css, the navbar or the footer.
   Behaviour lives in public/js/accountInteractions.js. */

.hx-main.hx-acc {
  min-height: calc(100vh - var(--promo-h, 0px) - var(--nav-h, 56px));
  padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 84px);
}
.hx-main.hx-acc .hx-wrap { position: relative; z-index: 1; }

/* ============================================================
   shared ▸ eyebrow, flash, errors, links, fine print
   ============================================================ */
.hx-main.hx-acc .hx-acc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--hx-glass-solid);
  border: 1px solid var(--hx-glass-line);
  box-shadow: 0 8px 20px -16px rgba(23, 18, 14, 0.3);
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-ink);
}
.hx-main.hx-acc .hx-acc-eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2));
  animation: hx-blink 2.2s ease-in-out infinite;
}
.hx-main.hx-acc .hx-acc-flash {
  padding: 12px 14px;
  border-radius: 14px;
  background: #e8f8ee;
  border: 1px solid #bfe9cf;
  color: #157a3d;
  font-weight: 600;
  font-size: 0.92rem;
}
.hx-main.hx-acc .hx-acc-errors {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff0ee;
  border: 1px solid #ffd2cc;
  color: #b42318;
  font-weight: 600;
  font-size: 0.92rem;
}
.hx-main.hx-acc .hx-acc-errors p { margin: 0; }
.hx-main.hx-acc .hx-acc-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--hx-cta-b);
  text-decoration: none;
  cursor: pointer;
}
.hx-main.hx-acc .hx-acc-link:hover { text-decoration: underline; }
.hx-main.hx-acc .hx-acc-link:disabled { color: var(--hx-muted); cursor: default; text-decoration: none; }
.hx-main.hx-acc .hx-acc-fine { margin: 0; font-size: 0.84rem; color: var(--hx-muted); line-height: 1.55; }
.hx-main.hx-acc .hx-acc-fine--split { display: flex; justify-content: center; }
.hx-main.hx-acc .hx-acc-form-head h2 + p a,
.hx-main.hx-acc .hx-acc-form-head p a { font-weight: 700; color: var(--hx-cta-b); text-decoration: none; }
.hx-main.hx-acc .hx-acc-form-head p a:hover { text-decoration: underline; }

/* ============================================================
   auth ▸ the two-panel shell
   ============================================================ */
.hx-main.hx-acc .hx-auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
  padding-block: clamp(12px, 3vw, 40px);
}
.hx-main.hx-acc .hx-auth-brand { display: grid; gap: 18px; justify-items: start; }
.hx-main.hx-acc .hx-auth-title { font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.02; max-width: 12ch; }
.hx-main.hx-acc .hx-auth-sub { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.08rem); color: var(--hx-body); }
.hx-main.hx-acc .hx-auth-perks { margin-top: 6px; }
.hx-main.hx-acc .hx-auth-perks li { font-size: 0.96rem; color: var(--hx-ink); }
.hx-main.hx-acc .hx-auth-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 9px 14px 9px 9px;
  border-radius: 999px;
  background: var(--hx-glass-solid);
  border: 1px solid var(--hx-glass-line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hx-body);
}
.hx-main.hx-acc .hx-auth-trust-ic {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(31, 171, 85, 0.14);
  color: var(--hx-green);
}
.hx-main.hx-acc .hx-auth-card {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 36px);
}
.hx-main.hx-acc .hx-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--hx-radius-card) var(--hx-radius-card) 0 0;
  background: linear-gradient(90deg, var(--hx-g1), var(--hx-g2));
}

/* ============================================================
   forms ▸ fields, password reveal, checkbox, the code field, buttons
   ============================================================ */
.hx-main.hx-acc .hx-acc-form { display: grid; gap: 16px; }
.hx-main.hx-acc .hx-acc-form-head { display: grid; gap: 4px; }
.hx-main.hx-acc .hx-acc-form-head h2 { font-size: 1.55rem; letter-spacing: -0.02em; }
.hx-main.hx-acc .hx-acc-form-head p { margin: 0; font-size: 0.92rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-field > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-field-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.hx-main.hx-acc .hx-acc-field-row > span { display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-field-row .hx-acc-link { font-size: 0.8rem; font-weight: 700; }
.hx-main.hx-acc .hx-acc-field.is-invalid .hx-flow-input { border-color: #e2695b; box-shadow: 0 0 0 4px rgba(226, 105, 91, 0.16); }
.hx-main.hx-acc .hx-acc-pw { position: relative; display: block; }
.hx-main.hx-acc .hx-acc-pw .hx-flow-input { padding-right: 46px; }
.hx-main.hx-acc .hx-acc-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hx-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.hx-main.hx-acc .hx-acc-pw-toggle::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hx-main.hx-acc .hx-acc-pw-toggle.is-on::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.2A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4.2M6.6 6.6C4 8.5 2 12 2 12s3.5 7 10 7c1.6 0 3-.4 4.3-1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.2A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4.2M6.6 6.6C4 8.5 2 12 2 12s3.5 7 10 7c1.6 0 3-.4 4.3-1'/%3E%3C/svg%3E");
}
.hx-main.hx-acc .hx-acc-pw-toggle:hover { background: #fdf1ec; color: var(--hx-g2); }
.hx-main.hx-acc .hx-acc-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hx-body);
}
.hx-main.hx-acc .hx-acc-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hx-main.hx-acc .hx-acc-check-box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid rgba(23, 18, 14, 0.2);
  background: #fff;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hx-main.hx-acc .hx-acc-check-box::after {
  content: "";
  width: 6px;
  height: 11px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hx-main.hx-acc .hx-acc-check input:checked + .hx-acc-check-box { border-color: transparent; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); box-shadow: 0 8px 18px -10px rgba(232, 71, 79, 0.7); }
.hx-main.hx-acc .hx-acc-check input:checked + .hx-acc-check-box::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.hx-main.hx-acc .hx-acc-check input:focus-visible + .hx-acc-check-box { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-g2) 20%, transparent); }
.hx-main.hx-acc .hx-acc-check.is-invalid .hx-acc-check-box { border-color: #e2695b; }
.hx-main.hx-acc .hx-acc-check-text a { display: inline-block; padding: 9px 2px; margin: -9px -2px; color: var(--hx-cta-b); font-weight: 700; text-decoration: none; }  /* a 36px tap target that keeps the sentence flowing */
.hx-main.hx-acc .hx-acc-check-text a:hover { text-decoration: underline; }
.hx-main.hx-acc .hx-acc-code {
  font-family: var(--hx-font-mono), monospace;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-align: center;
  padding-left: calc(14px + 0.42em);
  min-height: 66px;
}
.hx-main.hx-acc .hx-acc-code::placeholder { letter-spacing: 0.42em; color: #d5c6c0; }
.hx-main.hx-acc .hx-acc-email { color: var(--hx-ink); word-break: break-all; }
.hx-main.hx-acc .hx-acc-btn { width: 100%; }
.hx-main.hx-acc .hx-acc-btn.is-busy { opacity: 0.7; pointer-events: none; }
.hx-main.hx-acc .hx-acc-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.hx-main.hx-acc .hx-acc-resend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: -4px; font-size: 0.88rem; color: var(--hx-muted); text-align: center; }
.hx-main.hx-acc .hx-acc-resend-btn { display: inline-flex; gap: 4px; }
.hx-main.hx-acc .hx-acc-resend-timer { font-family: var(--hx-font-mono), monospace; font-size: 0.8rem; }

/* ============================================================
   dashboard ▸ the rail + content shell
   ============================================================ */
.hx-main.hx-acc .hx-acc-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.hx-main.hx-acc .hx-acc-rail {
  position: sticky;
  top: calc(var(--promo-h, 0px) + var(--nav-h, 56px) + 18px);
  display: grid;
  gap: 14px;
}
.hx-main.hx-acc .hx-acc-rail-card { padding: 16px; display: grid; gap: 6px; }
.hx-main.hx-acc .hx-acc-who {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(23, 18, 14, 0.08);
  margin-bottom: 6px;
}
.hx-main.hx-acc .hx-acc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2));
  color: #fff;
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 10px 22px -10px rgba(232, 71, 79, 0.6);
}
.hx-main.hx-acc .hx-acc-who strong { display: block; font-size: 0.98rem; line-height: 1.2; color: var(--hx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-who small { display: block; font-size: 0.78rem; color: var(--hx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-nav { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hx-main.hx-acc .hx-acc-nav a,
.hx-main.hx-acc .hx-acc-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--hx-body);
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hx-main.hx-acc .hx-acc-nav a:hover,
.hx-main.hx-acc .hx-acc-nav button:hover { background: #fff; color: var(--hx-ink); transform: translateX(2px); }
.hx-main.hx-acc .hx-acc-nav a.is-active { background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); color: #fff; box-shadow: var(--hx-shadow-pop); }
.hx-main.hx-acc .hx-acc-nav a.is-active .hx-acc-nav-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }
.hx-main.hx-acc .hx-acc-nav-ic {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #fdf1ec;
  color: var(--hx-g2);
  transition: background 0.2s ease, color 0.2s ease;
}
.hx-main.hx-acc .hx-acc-nav a.is-active .hx-acc-nav-ic svg,
.hx-main.hx-acc .hx-acc-nav-ic svg { width: 16px; height: 16px; }
.hx-main.hx-acc .hx-acc-nav .hx-acc-nav-sep { height: 1px; margin: 6px 4px; background: rgba(23, 18, 14, 0.08); }
.hx-main.hx-acc .hx-acc-nav-badge {
  margin-left: auto;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hx-muted);
}
.hx-main.hx-acc .hx-acc-nav a.is-active .hx-acc-nav-badge { color: rgba(255, 255, 255, 0.85); }
.hx-main.hx-acc .hx-acc-rail-help { padding: 14px 16px; display: grid; gap: 6px; font-size: 0.86rem; color: var(--hx-body); }
.hx-main.hx-acc .hx-acc-rail-help strong { color: var(--hx-ink); font-size: 0.9rem; }
.hx-main.hx-acc .hx-acc-rail-help a { color: var(--hx-cta-b); font-weight: 700; text-decoration: none; }
.hx-main.hx-acc .hx-acc-content { display: grid; gap: clamp(18px, 2.4vw, 28px); min-width: 0; }
.hx-main.hx-acc .hx-acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.hx-main.hx-acc .hx-acc-head > div { display: grid; gap: 8px; }
.hx-main.hx-acc .hx-acc-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; }
.hx-main.hx-acc .hx-acc-sub { margin: 0; color: var(--hx-body); font-size: 0.98rem; max-width: 56ch; }
.hx-main.hx-acc .hx-acc-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-main.hx-acc .hx-acc-mobile-nav { display: none; }

/* ============================================================
   dashboard ▸ cards, stat tiles, the balance card
   ============================================================ */
.hx-main.hx-acc .hx-acc-card { padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 14px; align-content: start; }
.hx-main.hx-acc .hx-acc-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.hx-main.hx-acc .hx-acc-card-head h2 { font-size: 1.2rem; letter-spacing: -0.015em; }
.hx-main.hx-acc .hx-acc-card-head a { font-size: 0.86rem; font-weight: 700; color: var(--hx-cta-b); text-decoration: none; }
.hx-main.hx-acc .hx-acc-card-head a:hover { text-decoration: underline; }
.hx-main.hx-acc .hx-acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.hx-main.hx-acc .hx-acc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-main.hx-acc .hx-acc-grid--wallet { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
.hx-main.hx-acc .hx-acc-stat { padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.hx-main.hx-acc .hx-acc-stat .hx-flow-label { display: flex; align-items: center; gap: 8px; }
.hx-main.hx-acc .hx-acc-stat-value {
  font-family: var(--hx-font-display), sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hx-ink);
}
.hx-main.hx-acc .hx-acc-stat small { font-size: 0.82rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-stats { display: grid; gap: 12px; align-content: stretch; }
.hx-main.hx-acc .hx-acc-stat--row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; }
.hx-main.hx-acc .hx-acc-stat--row > span:first-child { display: grid; gap: 3px; }
.hx-main.hx-acc .hx-acc-stat--row .hx-acc-stat-value { font-size: clamp(1.4rem, 2vw, 1.8rem); white-space: nowrap; }
.hx-main.hx-acc .hx-acc-table td:first-child, .hx-main.hx-acc .hx-acc-table .is-mono { white-space: nowrap; }
.hx-main.hx-acc .hx-acc-table--orders { min-width: 640px; }
.hx-main.hx-acc .hx-acc-table--orders td, .hx-main.hx-acc .hx-acc-table--orders th { padding-inline: 8px; }
.hx-main.hx-acc .hx-acc-table--orders .hx-acc-items { min-width: 150px; }
.hx-main.hx-acc .hx-acc-table--orders td:first-child { font-size: 0.84rem; }
.hx-main.hx-acc .hx-acc-table--orders td:last-child, .hx-main.hx-acc .hx-acc-table--orders th:last-child { padding-right: 4px; }
.hx-main.hx-acc .hx-acc-table .hx-acc-pill { white-space: nowrap; }
.hx-main.hx-acc .hx-acc-balance {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--hx-radius-card);
  color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 205, 160, 0.35), transparent 60%),
    linear-gradient(125deg, var(--hx-g1), var(--hx-g2) 60%, #c8323b);
  box-shadow: var(--hx-shadow-pop);
  display: grid;
  gap: 18px;
  min-height: 190px;
}
.hx-main.hx-acc .hx-acc-balance::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, 0.16) 0.8px, transparent 0.9px) 0 0 / 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}
.hx-main.hx-acc .hx-acc-balance-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-main.hx-acc .hx-acc-balance .hx-flow-label { color: rgba(255, 255, 255, 0.82); }
.hx-main.hx-acc .hx-acc-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hx-main.hx-acc .hx-acc-balance-value {
  font-family: var(--hx-font-display), sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.hx-main.hx-acc .hx-acc-balance-value small { font-size: 0.42em; font-weight: 700; letter-spacing: 0; opacity: 0.85; margin-left: 4px; }
.hx-main.hx-acc .hx-acc-balance-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.hx-main.hx-acc .hx-acc-balance-foot p { margin: 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
.hx-main.hx-acc .hx-acc-balance .hx-btn { --hx-g1: #fff; --hx-g2: #fff; color: var(--hx-g2); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45); }
.hx-main.hx-acc .hx-acc-balance .hx-btn { color: #d33c42; }
.hx-main.hx-acc .hx-acc-perks { display: grid; gap: 10px; }
.hx-main.hx-acc .hx-acc-perk {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(23, 18, 14, 0.07);
}
.hx-main.hx-acc .hx-acc-perk-ic {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fdf1ec;
  color: var(--hx-g2);
}
.hx-main.hx-acc .hx-acc-perk strong { display: block; font-size: 0.92rem; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-perk span { display: block; font-size: 0.82rem; color: var(--hx-muted); }

/* ============================================================
   dashboard ▸ tables (orders, ledger)
   ============================================================ */
.hx-main.hx-acc .hx-acc-table-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.hx-main.hx-acc .hx-acc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.hx-main.hx-acc .hx-acc-table th {
  padding: 8px 12px;
  text-align: left;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-muted);
  border-bottom: 1px solid rgba(23, 18, 14, 0.1);
  white-space: nowrap;
}
.hx-main.hx-acc .hx-acc-table td { padding: 13px 12px; border-bottom: 1px solid rgba(23, 18, 14, 0.06); vertical-align: middle; color: var(--hx-body); }
.hx-main.hx-acc .hx-acc-table tr:last-child td { border-bottom: 0; }
.hx-main.hx-acc .hx-acc-table tbody tr { transition: background 0.2s ease; }
.hx-main.hx-acc .hx-acc-table tbody tr:hover { background: rgba(255, 255, 255, 0.7); }
.hx-main.hx-acc .hx-acc-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-main.hx-acc .hx-acc-table .is-strong { font-weight: 700; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-table .is-mono { font-family: var(--hx-font-mono), monospace; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-table .is-muted { color: var(--hx-muted); font-size: 0.84rem; }
.hx-main.hx-acc .hx-acc-table a.is-mono { text-decoration: none; }
.hx-main.hx-acc .hx-acc-table a.is-mono:hover { color: var(--hx-cta-b); }
.hx-main.hx-acc .hx-acc-items { display: grid; gap: 2px; }
.hx-main.hx-acc .hx-acc-items span { display: block; }
.hx-main.hx-acc .hx-acc-items small { color: var(--hx-muted); font-size: 0.8rem; }
.hx-main.hx-acc .hx-acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  background: #f4e6df;
  color: var(--hx-body);
}
.hx-main.hx-acc .hx-acc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.hx-main.hx-acc .hx-acc-pill--ok { background: #e3f6ea; color: #157a3d; }
.hx-main.hx-acc .hx-acc-pill--wait { background: #fff4e0; color: #9a5b00; }
.hx-main.hx-acc .hx-acc-pill--bad { background: #fff0ee; color: #b42318; }
.hx-main.hx-acc .hx-acc-pill--info { background: #e9f3fd; color: #1a5fb4; }
.hx-main.hx-acc .hx-acc-amount { font-family: var(--hx-font-display), sans-serif; font-weight: 800; color: var(--hx-ink); white-space: nowrap; }
.hx-main.hx-acc .hx-acc-amount.is-credit { color: #157a3d; }
.hx-main.hx-acc .hx-acc-amount.is-debit { color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(24px, 4vw, 44px) 20px;
  text-align: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(23, 18, 14, 0.14);
}
.hx-main.hx-acc .hx-acc-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fdf1ec; color: var(--hx-g2); }
.hx-main.hx-acc .hx-acc-empty strong { font-size: 1.05rem; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-empty p { margin: 0; max-width: 40ch; font-size: 0.9rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-pager-links { display: flex; gap: 8px; }
.hx-main.hx-acc .hx-acc-pager-links a,
.hx-main.hx-acc .hx-acc-pager-links span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.1); color: var(--hx-ink); font-weight: 700; text-decoration: none; }
.hx-main.hx-acc .hx-acc-pager-links span { opacity: 0.4; }
.hx-main.hx-acc .hx-acc-pager-links a:hover { border-color: var(--hx-g2); color: var(--hx-g2); }

/* ============================================================
   order detail ▸ items + totals
   ============================================================ */
.hx-main.hx-acc .hx-acc-order-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hx-main.hx-acc .hx-acc-order-items { display: grid; gap: 10px; }
.hx-main.hx-acc .hx-acc-order-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(23, 18, 14, 0.07);
}
.hx-main.hx-acc .hx-acc-order-item-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); color: #fff; }
.hx-main.hx-acc .hx-acc-order-item strong { display: block; color: var(--hx-ink); font-size: 0.95rem; }
.hx-main.hx-acc .hx-acc-order-item small { display: block; color: var(--hx-muted); font-size: 0.82rem; word-break: break-all; }
.hx-main.hx-acc .hx-acc-totals { display: grid; gap: 8px; }
.hx-main.hx-acc .hx-acc-totals-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; color: var(--hx-body); }
.hx-main.hx-acc .hx-acc-totals-row.is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(23, 18, 14, 0.1); font-weight: 800; color: var(--hx-ink); font-size: 1.05rem; }
.hx-main.hx-acc .hx-acc-totals-row.is-saving { color: #157a3d; }
.hx-main.hx-acc .hx-acc-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-main.hx-acc .hx-acc-timeline li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9rem; color: var(--hx-body); }
.hx-main.hx-acc .hx-acc-timeline li i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f4e6df; color: var(--hx-body); font-style: normal; font-size: 0.7rem; margin-top: 1px; }
.hx-main.hx-acc .hx-acc-timeline li.is-done i { background: #e3f6ea; color: #157a3d; }
.hx-main.hx-acc .hx-acc-timeline li strong { display: block; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-timeline li small { color: var(--hx-muted); }

/* ============================================================
   wallet ▸ top-up form and pay page
   ============================================================ */
.hx-main.hx-acc .hx-acc-topup { display: grid; gap: 14px; }
.hx-main.hx-acc .hx-acc-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-main.hx-acc .hx-acc-pick {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(23, 18, 14, 0.12);
  background: #fff;
  color: var(--hx-ink);
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hx-main.hx-acc .hx-acc-pick:hover { border-color: var(--hx-g2); transform: translateY(-1px); }
.hx-main.hx-acc .hx-acc-pick.is-on { border-color: transparent; background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); color: #fff; box-shadow: 0 10px 22px -12px rgba(232, 71, 79, 0.7); }
.hx-main.hx-acc .hx-acc-amount-field { position: relative; }
.hx-main.hx-acc .hx-acc-amount-field .hx-acc-currency {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--hx-muted);
  pointer-events: none;
}
.hx-main.hx-acc .hx-acc-amount-field .hx-flow-input {
  padding-left: 38px;
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  min-height: 58px;
}
.hx-main.hx-acc .hx-acc-amount-field .hx-flow-input::-webkit-outer-spin-button,
.hx-main.hx-acc .hx-acc-amount-field .hx-flow-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hx-main.hx-acc .hx-acc-amount-field .hx-flow-input { -moz-appearance: textfield; appearance: textfield; }
.hx-main.hx-acc .hx-acc-topup-hint { margin: 0; font-size: 0.86rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-topup-hint.is-error { color: #b42318; font-weight: 600; }
.hx-main.hx-acc .hx-acc-preview { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.07); }
.hx-main.hx-acc .hx-acc-preview[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-pay { display: grid; gap: 16px; }
.hx-main.hx-acc .hx-acc-pay-frame { width: 100%; min-height: 520px; border: 0; border-radius: 18px; background: #fff; }
.hx-main.hx-acc .hx-acc-pay-frame[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-pay-placeholder {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(23, 18, 14, 0.14);
  color: var(--hx-body);
  font-weight: 600;
  text-align: center;
}
.hx-main.hx-acc .hx-acc-pay-placeholder[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-spinner { display: inline-grid; place-items: center; color: var(--hx-g2); }
.hx-main.hx-acc .hx-acc-spinner svg { width: 28px; height: 28px; animation: hx-spin 0.9s linear infinite; }
.hx-main.hx-acc .hx-acc-pay-success { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; border-radius: 18px; background: #e8f8ee; border: 1px solid #bfe9cf; color: #157a3d; text-align: center; }
.hx-main.hx-acc .hx-acc-pay-success[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-pay-success strong { font-size: 1.15rem; }
.hx-main.hx-acc .hx-acc-pay-success-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #157a3d; color: #fff; }
.hx-main.hx-acc .hx-acc-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--hx-green); }
.hx-main.hx-acc .hx-acc-pay-summary { display: grid; gap: 10px; }
.hx-main.hx-acc .hx-acc-pay-summary .hx-acc-totals-row.is-total { font-size: 1.3rem; }

/* settings */
.hx-main.hx-acc .hx-acc-form--settings { max-width: 560px; }
.hx-main.hx-acc .hx-acc-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hx-main.hx-acc .hx-acc-form-actions .hx-btn { width: auto; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hx-main.hx-acc .hx-acc-shell { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hx-main.hx-acc .hx-auth { grid-template-columns: 1fr; gap: 26px; max-width: 560px; }
  .hx-main.hx-acc .hx-auth-brand { justify-items: center; text-align: center; }
  .hx-main.hx-acc .hx-auth-title { max-width: none; }
  .hx-main.hx-acc .hx-auth-perks { display: none; }
  .hx-main.hx-acc .hx-auth-trust { display: none; }
  .hx-main.hx-acc .hx-acc-shell { grid-template-columns: 1fr; }
  .hx-main.hx-acc .hx-acc-rail { display: none; }
  .hx-main.hx-acc .hx-acc-mobile-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    margin: 0 0 4px;
    list-style: none;
    scrollbar-width: none;
  }
  .hx-main.hx-acc .hx-acc-mobile-nav::-webkit-scrollbar { display: none; }
  .hx-main.hx-acc .hx-acc-mobile-nav a,
  .hx-main.hx-acc .hx-acc-mobile-nav button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(23, 18, 14, 0.1);
    background: var(--hx-glass-solid);
    color: var(--hx-body);
    font-family: var(--hx-font-display), sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .hx-main.hx-acc .hx-acc-mobile-nav a.is-active { border-color: transparent; background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); color: #fff; box-shadow: var(--hx-shadow-pop); }
  .hx-main.hx-acc .hx-acc-mobile-nav svg { width: 15px; height: 15px; }
  .hx-main.hx-acc .hx-acc-grid,
  .hx-main.hx-acc .hx-acc-grid--wallet { grid-template-columns: 1fr; }
  .hx-main.hx-acc .hx-acc-grid:not(.hx-acc-grid--wallet):not(.hx-acc-grid--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hx-main.hx-acc { padding-top: 18px; }
  .hx-main.hx-acc .hx-auth-card { padding: 20px 18px; }
  .hx-main.hx-acc .hx-co-field-row { grid-template-columns: 1fr; }
  .hx-main.hx-acc .hx-acc-grid:not(.hx-acc-grid--wallet):not(.hx-acc-grid--2) { grid-template-columns: 1fr; }
  .hx-main.hx-acc .hx-acc-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
  .hx-main.hx-acc .hx-acc-stat-value { font-size: 1.4rem; }
  .hx-main.hx-acc .hx-acc-table { font-size: 0.86rem; }
  .hx-main.hx-acc .hx-acc-table td, .hx-main.hx-acc .hx-acc-table th { padding-inline: 8px; }
  .hx-main.hx-acc .hx-acc-order-item { grid-template-columns: 38px minmax(0, 1fr); }
  .hx-main.hx-acc .hx-acc-order-item > :last-child { grid-column: 2; }
  .hx-main.hx-acc .hx-acc-balance { min-height: 0; }
}

/* the QA freeze hook */
html.hx-noanim .hx-main.hx-acc *, html.hx-noanim .hx-main.hx-acc *::before, html.hx-noanim .hx-main.hx-acc *::after { animation: none !important; transition: none !important; }

/* ============================================================
   symmetry ▸ equal-height cards in every two-up grid
   ============================================================ */
.hx-main.hx-acc .hx-acc-grid--wallet,
.hx-main.hx-acc .hx-acc-grid--2 { align-items: stretch; }
.hx-main.hx-acc .hx-acc-grid--wallet > *,
.hx-main.hx-acc .hx-acc-grid--2 > * { min-width: 0; }
.hx-main.hx-acc .hx-acc-balance { grid-template-rows: auto 1fr auto; align-content: stretch; }
.hx-main.hx-acc .hx-acc-balance-value { align-self: center; }
.hx-main.hx-acc .hx-acc-card--span { grid-column: 1 / -1; }
.hx-main.hx-acc .hx-acc-card--span .hx-acc-form { max-width: 720px; }
.hx-main.hx-acc .hx-acc-card > .hx-acc-form-actions:last-child { margin-top: auto; }
.hx-main.hx-acc .hx-acc-mobile-nav { position: relative; }

/* ============================================================
   phones ▸ tables become stacked cards, nav pills fade at the edge
   ============================================================ */
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-mobile-nav { margin-inline: -4px; padding-inline: 4px 32px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .hx-main.hx-acc .hx-acc-head { gap: 12px; }
  .hx-main.hx-acc .hx-acc-head-actions { width: 100%; }
  .hx-main.hx-acc .hx-acc-head-actions > * { flex: 1 1 auto; justify-content: center; }
  .hx-main.hx-acc .hx-acc-card { padding: 16px; }
  .hx-main.hx-acc .hx-acc-table-wrap { overflow: visible; margin: 0; padding: 0; }
  .hx-main.hx-acc .hx-acc-table--stack { min-width: 0; display: block; }
  .hx-main.hx-acc .hx-acc-table--stack thead { display: none; }
  .hx-main.hx-acc .hx-acc-table--stack tbody { display: grid; gap: 10px; }
  .hx-main.hx-acc .hx-acc-table--stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(23, 18, 14, 0.07);
  }
  .hx-main.hx-acc .hx-acc-table--stack tbody tr:hover { background: #fff; }
  .hx-main.hx-acc .hx-acc-table--stack td { display: block; padding: 2px 0 !important; border: 0; font-size: 0.9rem; }
  .hx-main.hx-acc .hx-acc-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--hx-font-mono), monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hx-muted);
    margin-bottom: 1px;
  }
  .hx-main.hx-acc .hx-acc-table--stack td.is-num { text-align: right; }
  .hx-main.hx-acc .hx-acc-table--stack td.is-full { grid-column: 1 / -1; }
  .hx-main.hx-acc .hx-acc-table--stack td:first-child { white-space: normal; }
  .hx-main.hx-acc .hx-acc-table--stack td:first-child br { display: none; }
  .hx-main.hx-acc .hx-acc-table--stack td:first-child small::before { content: " · "; }
  .hx-main.hx-acc .hx-acc-order-item { grid-template-columns: 38px minmax(0, 1fr); }
  .hx-main.hx-acc .hx-acc-order-item > .hx-flow-btn-ghost { grid-column: 1 / -1; justify-content: center; }
  .hx-main.hx-acc .hx-acc-picks { gap: 6px; }
  .hx-main.hx-acc .hx-acc-pick { flex: 1 1 auto; text-align: center; padding-inline: 8px; }
}

/* ============================================================
   tables ▸ one line per cell; the two status columns centred, payment stacks pill over method
   ============================================================ */
.hx-main.hx-acc .hx-acc-table .is-date { white-space: nowrap; }
.hx-main.hx-acc .hx-acc-table .is-date small { color: var(--hx-muted); font-size: 0.78rem; }
.hx-main.hx-acc .hx-acc-items { gap: 4px; }
.hx-main.hx-acc .hx-acc-items .hx-acc-item-line { white-space: nowrap; }
.hx-main.hx-acc .hx-acc-item-line small { font-weight: 500; color: var(--hx-muted); font-size: 0.8rem; }
.hx-main.hx-acc .hx-acc-table th.is-center, .hx-main.hx-acc .hx-acc-table td.is-center { text-align: center; }
.hx-main.hx-acc .hx-acc-table td.is-center .hx-acc-pill { display: inline-flex; }
.hx-main.hx-acc .hx-acc-table td.is-center .hx-acc-method { display: block; margin-top: 5px; font-size: 0.76rem; }
.hx-main.hx-acc .hx-acc-table--orders { font-size: 0.88rem; min-width: 0; }
.hx-main.hx-acc .hx-acc-table--orders td, .hx-main.hx-acc .hx-acc-table--orders th { padding-inline: 6px; }
.hx-main.hx-acc .hx-acc-table--orders .hx-acc-pill { font-size: 0.72rem; padding: 3px 9px; }
.hx-main.hx-acc .hx-acc-table--orders .is-mono { font-size: 0.76rem; }
.hx-main.hx-acc .hx-acc-table--orders .hx-acc-items { min-width: 0; }
.hx-main.hx-acc .hx-acc-pay-now { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); color: #fff; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.78rem; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(232, 71, 79, 0.7); }
.hx-main.hx-acc .hx-acc-pay-now:hover { filter: brightness(1.05); }
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-table--stack td.is-center { text-align: left; }
  .hx-main.hx-acc .hx-acc-table--stack td.is-center .hx-acc-method { display: inline; margin: 0 0 0 8px; }
  .hx-main.hx-acc .hx-acc-table--stack td:first-child small::before { content: none; }
  .hx-main.hx-acc .hx-acc-items .hx-acc-item-line { white-space: normal; }
}
.hx-main.hx-acc .hx-acc-table--orders .hx-acc-items { max-width: 250px; }
.hx-main.hx-acc .hx-acc-table--orders .hx-acc-item-line { overflow: hidden; text-overflow: ellipsis; }
.hx-main.hx-acc .hx-acc-qty { font-style: normal; font-weight: 800; color: var(--hx-g2); }
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-table--orders .hx-acc-items { max-width: none; }
}

/* ---- inline field checks (accountInteractions.js form guard) ---- */
.hx-main.hx-acc .hx-acc-field-msg { display: none; margin: 0; font-size: 0.78rem; font-weight: 600; line-height: 1.4; color: #b42318; }
.hx-main.hx-acc .hx-acc-field.is-invalid .hx-acc-field-msg,
.hx-main.hx-acc .hx-acc-check.is-invalid .hx-acc-field-msg { display: block; }
.hx-main.hx-acc .hx-acc-check .hx-acc-field-msg { grid-column: 1 / -1; margin-top: -4px; }
.hx-main.hx-acc .hx-acc-field.is-valid .hx-flow-input { border-color: rgba(18, 183, 106, 0.55); }
.hx-main.hx-acc .hx-acc-btn[data-acc-guarded]:disabled { opacity: 0.5; filter: saturate(0.6); pointer-events: none; }

/* ============================================================
   2026-09-15 ▸ phones get an app-style bottom tab bar, receipt-style order cards,
   a compact ledger and a three-up stat strip; desktop rows get a hover lift.
   ============================================================ */
.hx-main.hx-acc .hx-acc-table tbody tr { transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.hx-main.hx-acc .hx-acc-rail-help { position: relative; padding-left: 48px; }
.hx-main.hx-acc .hx-acc-rail-help::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fdf1ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8474f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v8a2.5 2.5 0 01-2.5 2.5H9l-5 4v-4A2.5 2.5 0 014 14.5v-8z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

@media (max-width: 900px) {
  /* ---- bottom tab bar: the four sections + log out, always one thumb away ---- */
  .hx-main.hx-acc.hx-acc--dash { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .hx-main.hx-acc .hx-acc-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(23, 18, 14, 0.08);
    box-shadow: 0 -12px 30px -22px rgba(23, 18, 14, 0.35);
  }
  .hx-main.hx-acc .hx-acc-mobile-nav li { min-width: 0; }
  .hx-main.hx-acc .hx-acc-mobile-nav form { display: block; }
  .hx-main.hx-acc .hx-acc-mobile-nav a,
  .hx-main.hx-acc .hx-acc-mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 54px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    color: var(--hx-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .hx-main.hx-acc .hx-acc-mobile-nav svg { width: 20px; height: 20px; }
  .hx-main.hx-acc .hx-acc-mobile-nav a.is-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--hx-g1) 14%, #fff), color-mix(in srgb, var(--hx-g2) 14%, #fff));
    color: var(--hx-g2);
    box-shadow: none;
  }
  .hx-main.hx-acc .hx-acc-mobile-nav button { color: var(--hx-muted); }
  .hx-main.hx-acc .hx-acc-mobile-nav button:active,
  .hx-main.hx-acc .hx-acc-mobile-nav a:active { background: #fdf1ec; }
  body.page-hxa .whatsapp-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  /* ---- overview: three-up stat strip instead of three stacked rows ---- */
  .hx-main.hx-acc .hx-acc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hx-main.hx-acc .hx-acc-stat--row { display: grid; gap: 6px; padding: 12px 10px; align-content: start; }
  .hx-main.hx-acc .hx-acc-stat--row > span:first-child { gap: 2px; }
  .hx-main.hx-acc .hx-acc-stat--row .hx-flow-label { font-size: 0.58rem; letter-spacing: 0.1em; }
  .hx-main.hx-acc .hx-acc-stat--row .hx-flow-label svg { display: none; }
  .hx-main.hx-acc .hx-acc-stat--row small { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-main.hx-acc .hx-acc-stat--row .hx-acc-stat-value { font-size: 1.25rem; }

  /* ---- order cards read like receipts: service + amount, date + number, then the two statuses ---- */
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "service amount"
      "date order"
      "payment delivery";
    gap: 6px 12px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 24px -22px rgba(23, 18, 14, 0.35);
  }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td::before { display: none; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td { padding: 0 !important; min-width: 0; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(1) { grid-area: date; font-size: 0.78rem; align-self: center; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(2) { grid-area: order; text-align: right; align-self: center; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(2) .is-mono { font-size: 0.72rem; color: var(--hx-muted); }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(3) { grid-area: service; font-size: 0.95rem; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(3) .hx-acc-items { gap: 2px; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(4) { grid-area: amount; text-align: right; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(4) .hx-acc-amount { font-size: 1.05rem; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(5),
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(6) {
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(23, 18, 14, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
  }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(5) { grid-area: payment; justify-content: flex-start; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(6) { grid-area: delivery; justify-content: flex-end; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack td:nth-child(5) .hx-acc-method { display: inline; margin: 0; font-size: 0.74rem; }
  .hx-main.hx-acc .hx-acc-table--orders.hx-acc-table--stack .hx-acc-pay-now { padding: 8px 14px; font-size: 0.82rem; }

  /* ---- wallet ledger: activity + signed amount, then date and reference, balance last ---- */
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "activity amount"
      "date reference"
      "balance balance";
    gap: 4px 12px;
    padding: 12px 14px;
  }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td::before { display: none; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td { padding: 0 !important; min-width: 0; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(1) { grid-area: date; font-size: 0.78rem; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(2) { grid-area: activity; text-align: left; white-space: normal; font-size: 0.95rem; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(3) { grid-area: reference; text-align: right; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(3) .is-mono { font-size: 0.72rem; color: var(--hx-muted); }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(4) { grid-area: amount; text-align: right; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(4) .hx-acc-amount { font-size: 1.05rem; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(5) { grid-area: balance; margin-top: 4px; padding-top: 8px !important; border-top: 1px dashed rgba(23, 18, 14, 0.1); font-size: 0.78rem; }
  .hx-main.hx-acc .hx-acc-table--ledger.hx-acc-table--stack td:nth-child(5)::before { content: "Balance after "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--hx-muted); margin: 0; }

  /* ---- headings breathe a little less, buttons fill the row ---- */
  .hx-main.hx-acc .hx-acc-title { font-size: 1.7rem; }
  .hx-main.hx-acc .hx-acc-sub { font-size: 0.92rem; }
  .hx-main.hx-acc .hx-acc-order-meta { gap: 6px 8px; }
  .hx-main.hx-acc .hx-acc-pager-links a, .hx-main.hx-acc .hx-acc-pager-links span { flex: 1 1 auto; justify-content: center; }
  .hx-main.hx-acc .hx-acc-pager { flex-direction: column; align-items: stretch; text-align: center; }
  .hx-main.hx-acc .hx-acc-pager-links { width: 100%; }
}

@media (hover: hover) and (min-width: 641px) {
  .hx-main.hx-acc .hx-acc-table--orders tbody tr:hover { background: #fff; box-shadow: inset 3px 0 0 var(--hx-g2); }
}

/* ── 2026-09-22 Twicsy Points (account/rewards, overview strip, wallet preview) ──────────────
   The points surfaces borrow the wallet's shapes and swap coral for gold, so credit and points
   never read as the same thing. */
.hx-main.hx-acc .hx-acc-points-coin {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd66b, #ff9f1c);
  color: #3b2a00;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 2px 6px rgba(255, 159, 28, 0.35);
  flex: none;
}
.hx-main.hx-acc .hx-acc-points-coin--xs { width: 16px; height: 16px; font-size: 0.6rem; vertical-align: -3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14); }

.hx-main.hx-acc .hx-acc-points-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: var(--hx-radius-card);
  background: linear-gradient(90deg, rgba(255, 214, 107, 0.28), rgba(255, 159, 28, 0.08) 55%, transparent);
  border: 1px solid rgba(255, 159, 28, 0.35);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms var(--hx-ease, ease), box-shadow 220ms var(--hx-ease, ease);
}
.hx-main.hx-acc .hx-acc-points-strip:hover { transform: translateY(-1px); box-shadow: var(--hx-shadow-pop); }
.hx-main.hx-acc .hx-acc-points-copy { display: grid; gap: 2px; min-width: 0; }
.hx-main.hx-acc .hx-acc-points-copy strong { font-size: 1rem; }
.hx-main.hx-acc .hx-acc-points-copy small { color: var(--hx-muted); font-size: 0.86rem; }
.hx-main.hx-acc .hx-acc-points-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.9rem; white-space: nowrap; }

.hx-main.hx-acc .hx-acc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-main.hx-acc .hx-flow-chip--points { background: rgba(255, 214, 107, 0.35); color: #6b4300; }
.hx-main.hx-acc .hx-flow-chip--points i { background: #ff9f1c; }

.hx-main.hx-acc .hx-acc-totals-row--points { padding-top: 8px; border-top: 1px dashed rgba(23, 18, 14, 0.12); }
.hx-main.hx-acc .hx-acc-totals-row--points > span:first-child { display: inline-flex; align-items: center; gap: 6px; }

.hx-main.hx-acc .hx-acc-points-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 214, 107, 0.4);
  color: #6b4300;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* the gold balance hero */
.hx-main.hx-acc .hx-acc-balance--points {
  color: #2a1a00;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 120, 40, 0.28), transparent 60%),
    linear-gradient(125deg, #ffe08a, #ffb545 60%, #ff8f2a);
}
.hx-main.hx-acc .hx-acc-balance--points::after { background: radial-gradient(rgba(120, 70, 0, 0.16) 0.8px, transparent 0.9px) 0 0 / 18px 18px; }
.hx-main.hx-acc .hx-acc-balance--points .hx-flow-label { color: rgba(60, 35, 0, 0.75); }
.hx-main.hx-acc .hx-acc-balance--points .hx-acc-balance-chip { background: rgba(255, 255, 255, 0.55); color: #4a2e00; }
.hx-main.hx-acc .hx-acc-balance--points .hx-acc-balance-foot p { color: rgba(50, 30, 0, 0.85); }
.hx-main.hx-acc .hx-acc-balance--points .hx-btn { background: #2a1a00; color: #ffe08a; }

/* how it works + next up */
.hx-main.hx-acc .hx-acc-grid--rewards { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.hx-main.hx-acc .hx-acc-rw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hx-main.hx-acc .hx-acc-rw-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.hx-main.hx-acc .hx-acc-rw-steps li > span:last-child { display: grid; gap: 3px; }
.hx-main.hx-acc .hx-acc-rw-steps strong { font-size: 0.98rem; }
.hx-main.hx-acc .hx-acc-rw-steps small { color: var(--hx-muted); font-size: 0.88rem; line-height: 1.5; }
.hx-main.hx-acc .hx-acc-rw-step {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 214, 107, 0.4);
  color: #6b4300;
  font-weight: 900;
  font-size: 0.85rem;
}
.hx-main.hx-acc .hx-acc-rw-next { display: grid; align-content: start; gap: 12px; }
.hx-main.hx-acc .hx-acc-rw-next .hx-acc-card-head { margin-bottom: 0; }
.hx-main.hx-acc .hx-acc-rw-next-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.hx-main.hx-acc .hx-acc-rw-next-body > span:last-child { display: grid; gap: 2px; min-width: 0; }
.hx-main.hx-acc .hx-acc-rw-next-body small { color: var(--hx-muted); font-size: 0.86rem; }
.hx-main.hx-acc .hx-acc-rw-meter { height: 10px; border-radius: 999px; background: rgba(23, 18, 14, 0.08); overflow: hidden; }
.hx-main.hx-acc .hx-acc-rw-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd66b, #ff8f2a); }
.hx-main.hx-acc .hx-acc-rw-need { margin: 0; font-size: 0.9rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-rw-need b { color: inherit; color: var(--hx-ink, #17120e); }
.hx-main.hx-acc .hx-acc-rw-next .hx-flow-btn-ghost { justify-self: start; }
.hx-main.hx-acc .hx-acc-empty--tight { padding: 18px 12px; }

/* redeem-now grid */
.hx-main.hx-acc .hx-acc-rw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx-main.hx-acc .hx-acc-rw-pkg {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(23, 18, 14, 0.08);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 200ms var(--hx-ease, ease), border-color 200ms var(--hx-ease, ease), box-shadow 200ms var(--hx-ease, ease);
}
.hx-main.hx-acc .hx-acc-rw-pkg:hover { transform: translateY(-1px); border-color: rgba(255, 159, 28, 0.55); box-shadow: 0 10px 24px rgba(255, 159, 28, 0.18); }
.hx-main.hx-acc .hx-acc-rw-pkg-copy { display: grid; gap: 2px; min-width: 0; }
.hx-main.hx-acc .hx-acc-rw-pkg-copy strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-rw-pkg-copy small { color: var(--hx-muted); font-size: 0.84rem; }
.hx-main.hx-acc .hx-acc-rw-pkg-pts { font-weight: 900; font-size: 1rem; white-space: nowrap; color: #6b4300; }
.hx-main.hx-acc .hx-acc-rw-pkg-pts em { font-style: normal; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }

@media (max-width: 900px) {
  .hx-main.hx-acc .hx-acc-grid--rewards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-points-strip { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .hx-main.hx-acc .hx-acc-points-cta { grid-column: 2; justify-self: start; }
  .hx-main.hx-acc .hx-acc-rw-grid { grid-template-columns: 1fr; }
}

/* ── 2026-09-22b: one header, one first screen, one coin ───────────────────────────────────────
   Every tab opens the same way: eyebrow, title, one line, an action on the right, then the tab's
   hero row. The first screen is sized to the viewport so the block underneath never peeks in
   half; on tall monitors it simply ends and the next block follows. */
.hx-main.hx-acc .hx-acc-content { --hx-acc-top: 150px; }
.hx-main.hx-acc .hx-acc-screen {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  align-content: start;
  min-height: min(calc(100svh - var(--hx-acc-top)), 760px);
  box-sizing: border-box;
  scroll-margin-top: 110px;
}
.hx-main.hx-acc .hx-acc-head { align-items: center; }
.hx-main.hx-acc .hx-acc-head > div { gap: 6px; }
.hx-main.hx-acc .hx-acc-title { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.hx-main.hx-acc .hx-acc-sub { font-size: 0.94rem; max-width: 62ch; }

/* the hero row: the coloured card and the column beside it end on the same line */
.hx-main.hx-acc .hx-acc-grid--wallet { align-items: stretch; }
.hx-main.hx-acc .hx-acc-balance { min-height: 0; padding: clamp(20px, 2.4vw, 26px); gap: 14px; align-content: space-between; }
.hx-main.hx-acc .hx-acc-balance-value { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.hx-main.hx-acc .hx-acc-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-main.hx-acc .hx-acc-balance-mark { flex: none; filter: drop-shadow(0 10px 18px rgba(120, 50, 0, 0.28)); }
.hx-main.hx-acc .hx-acc-balance-chip { display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-stats { gap: 10px; }
.hx-main.hx-acc .hx-acc-stat--row { padding: 12px 16px; }

/* the coin */
.hx-main.hx-acc .tp-mark { flex: none; vertical-align: -3px; }
.hx-main.hx-acc .hx-acc-points-strip { margin: 0; padding: 12px 16px; }
.hx-main.hx-acc .hx-acc-points-strip .tp-mark { filter: drop-shadow(0 4px 8px rgba(217, 58, 68, 0.25)); }
.hx-main.hx-acc .hx-acc-nav-badge .tp-mark { margin-right: 3px; }
.hx-main.hx-acc .hx-flow-chip--points { display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-rw-pkg-pts { display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-rw-need span { color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-rw-need span::before { content: "· "; }
.hx-main.hx-acc .hx-acc-empty-ic .tp-mark { filter: drop-shadow(0 6px 12px rgba(217, 58, 68, 0.25)); }

/* wallet: the top-up card fits the first screen */
.hx-main.hx-acc .hx-acc-topup { gap: 10px; }
.hx-main.hx-acc .hx-acc-chip-row { margin-left: auto; }
.hx-main.hx-acc .hx-acc-topup .hx-acc-fine { margin: 0; }
.hx-main.hx-acc .hx-acc-preview { padding: 10px 14px; gap: 6px; }

/* motion that answers arrival: the balance counts up once, the progress bar fills once */
@media (prefers-reduced-motion: no-preference) {
  .hx-main.hx-acc:not(.hx-noanim) .hx-acc-rw-meter span[data-meter-fill] { animation: hx-acc-fill 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes hx-acc-fill { from { width: 0; } }
  .hx-main.hx-acc .hx-acc-balance-mark { animation: hx-acc-coin 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes hx-acc-coin { from { transform: rotateY(-70deg) scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }
}
.hx-noanim .hx-acc-balance-mark, .hx-noanim .hx-acc-rw-meter span { animation: none !important; }

@media (max-width: 900px) {
  .hx-main.hx-acc .hx-acc-screen { min-height: 0; }
  .hx-main.hx-acc .hx-acc-grid--wallet { align-items: start; }
}
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-balance-mark { width: 52px; height: 52px; }
  .hx-main.hx-acc .hx-acc-chip-row { margin-left: 0; }
}

/* ── Rewards: activity timeline ─────────────────────────────────────────────────────────────── */
.hx-main.hx-acc .hx-acc-ledger { display: grid; gap: 14px; }
.hx-main.hx-acc .hx-acc-ledger-filter { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(23, 18, 14, 0.05); }
.hx-main.hx-acc .hx-acc-ledger-filter a,
.hx-main.hx-acc .hx-acc-ledger-filter span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--hx-muted); text-decoration: none; transition: color 160ms var(--hx-ease, ease), background 160ms var(--hx-ease, ease); }
.hx-main.hx-acc .hx-acc-ledger-filter a:hover { color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-ledger-filter span { background: #fff; color: var(--hx-ink); box-shadow: 0 1px 2px rgba(23, 18, 14, 0.08); }
.hx-main.hx-acc .hx-acc-ledger-days,
.hx-main.hx-acc .hx-acc-ledger-rows { list-style: none; margin: 0; padding: 0; }
.hx-main.hx-acc .hx-acc-ledger-days { display: grid; gap: 18px; }
.hx-main.hx-acc .hx-acc-ledger-day { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-ledger-day::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(23, 18, 14, 0.08); }
.hx-main.hx-acc .hx-acc-ledger-rows { position: relative; display: grid; gap: 4px; }
.hx-main.hx-acc .hx-acc-ledger-rows::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: rgba(23, 18, 14, 0.06); }
.hx-main.hx-acc .hx-acc-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 52px 112px 128px;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 10px 10px 0;
  border-radius: 14px;
  transition: background 160ms var(--hx-ease, ease);
}
.hx-main.hx-acc .hx-acc-ledger-row:hover { background: rgba(255, 214, 107, 0.12); }
.hx-main.hx-acc .hx-acc-ledger-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(23, 18, 14, 0.06); color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-ledger-row.is-spend .hx-acc-ledger-ic { background: #fdf1ec; color: var(--hx-cta-b, #e0522b); }
.hx-main.hx-acc .hx-acc-ledger-row.is-adjust .hx-acc-ledger-ic { background: rgba(255, 214, 107, 0.35); color: #6b4300; }
.hx-main.hx-acc .hx-acc-ledger-what { display: grid; gap: 2px; min-width: 0; }
.hx-main.hx-acc .hx-acc-ledger-what strong { font-size: 0.95rem; }
.hx-main.hx-acc .hx-acc-ledger-what small { color: var(--hx-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-ledger-what small i { font-style: normal; opacity: 0.5; margin: 0 2px; }
.hx-main.hx-acc .hx-acc-ledger-what .is-mono { font-family: var(--hx-font-mono), monospace; font-size: 0.76rem; letter-spacing: 0.02em; color: var(--hx-ink); text-decoration: none; }
.hx-main.hx-acc .hx-acc-ledger-what a.is-mono:hover { color: var(--hx-cta-b, #e0522b); text-decoration: underline; }
.hx-main.hx-acc .hx-acc-ledger-time { font-size: 0.78rem; color: var(--hx-muted); font-variant-numeric: tabular-nums; text-align: right; }
.hx-main.hx-acc .hx-acc-ledger-delta { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-ledger-delta .hx-acc-amount { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hx-main.hx-acc .hx-acc-ledger-delta small { font-size: 0.72rem; font-weight: 800; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-ledger-after { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.hx-main.hx-acc .hx-acc-ledger-after small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-ledger-after b { font-size: 0.88rem; font-variant-numeric: tabular-nums; text-align: right; }
.hx-main.hx-acc .hx-acc-ledger-after i { grid-column: 1 / -1; display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: rgba(23, 18, 14, 0.07); overflow: hidden; }
.hx-main.hx-acc .hx-acc-ledger-after i::before { content: ""; display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd66b, #ff8f2a); transition: width 600ms var(--hx-ease, ease); }
@media (max-width: 760px) {
  .hx-main.hx-acc .hx-acc-ledger-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic what delta" "ic after after"; gap: 6px 10px; padding-right: 4px; }
  .hx-main.hx-acc .hx-acc-ledger-rows::before { left: 17px; }
  .hx-main.hx-acc .hx-acc-ledger-ic { width: 36px; height: 36px; }
  .hx-main.hx-acc .hx-acc-ledger-what { grid-area: what; }
  .hx-main.hx-acc .hx-acc-ledger-what small { white-space: normal; }
  .hx-main.hx-acc .hx-acc-ledger-time { display: none; }
  .hx-main.hx-acc .hx-acc-ledger-delta { grid-area: delta; align-self: start; }
  .hx-main.hx-acc .hx-acc-ledger-after { grid-area: after; grid-template-columns: auto auto 1fr; align-items: center; }
  .hx-main.hx-acc .hx-acc-ledger-after i { grid-column: auto; margin: 0; }
  .hx-main.hx-acc .hx-acc-ledger-filter { width: 100%; }
  .hx-main.hx-acc .hx-acc-ledger-filter a, .hx-main.hx-acc .hx-acc-ledger-filter span { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hx-main.hx-acc .hx-acc-ledger-after i::before { transition: none; } }

/* ── phone tap targets: chips and inline links at least 40px tall ─────────────────────────── */
@media (max-width: 760px) {
  .hx-main.hx-acc .hx-acc-ledger-filter a, .hx-main.hx-acc .hx-acc-ledger-filter span { min-height: 38px; }
  .hx-main.hx-acc .hx-acc-card-head a { display: inline-flex; align-items: center; min-height: 40px; }
  .hx-main.hx-acc .hx-acc-link { display: inline-flex; align-items: center; min-height: 40px; }
  .hx-main.hx-acc .hx-acc-pw-toggle { width: 40px; height: 40px; }
}

@property --omega { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --z { syntax: "<length>"; inherits: false; initial-value: 8px; }

/* the account area keeps the mesh backdrop but not its 46-second drift: it fought every other animation for frames */
.hx-main.hx-acc::before { animation: none !important; }
/* on the board page the eyebrow dot holds still too: one blinking pixel kept the whole 3D scene compositing */
.hx-main.hx-acc .hx-acc-eyebrow--still i { animation: none; }

/* ── 2026-09-25d: Invite & Spin — the Twicsy board ────────────────────────────────────────────
   The one bold element of the account area, after a game-UI reference: a thick slab tilted
   towards you, gold-framed hexagonal prize cells round an octagonal SPIN button, neon slots
   along the chassis and gems at the corners. Press SPIN and a light races round the cells,
   slows, and settles on the prize. Built by initSpin() from the JSON the page carries; the
   markup here only styles what it makes. Everything else on the tab stays quiet glass. */
.hx-main.hx-acc .hx-acc-grid--spin { align-items: stretch; }
.hx-main.hx-acc .hx-acc-wh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: var(--hx-radius-card);
  color: #fff;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(250, 107, 109, 0.26), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(255, 214, 107, 0.14), transparent 60%),
    linear-gradient(160deg, #1a2238, var(--hx-navy) 55%, #0b1020);
  box-shadow: 0 30px 70px -28px rgba(16, 23, 39, 0.7);
}
.hx-main.hx-acc .hx-acc-wh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-main.hx-acc .hx-acc-wh-hero .hx-flow-label { color: rgba(255, 255, 255, 0.72); }
.hx-main.hx-acc .hx-acc-wh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); font-family: var(--hx-font-mono), monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

/* ── the stage and the slab ── */
.hx-main.hx-acc .hx-acc-wh-stage {
  --tilt: 26deg;
  --sway: 0deg;
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --oct: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  --gold-a: #ffe8a3;
  --gold-b: #e9a323;
  --gold-c: #b57610;
  --gold-d: #7a4c08;
  position: relative;
  height: clamp(300px, 30vw, 372px);
  border-radius: 20px;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 30%;
  background:
    radial-gradient(55% 55% at 50% 55%, rgba(250, 107, 109, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 18px 40px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.hx-main.hx-acc .hx-acc-wh-stage.is-grabbing { cursor: grabbing; }
.hx-main.hx-acc .hx-acc-hx-pointer { position: absolute; left: 50%; top: 54%; z-index: 6; width: 30px; height: 34px; margin: 0 0 0 -15px; transform: translateY(calc(var(--r, 150px) * -1 * 0.86 - 4px)); transform-origin: 50% 0; clip-path: polygon(50% 100%, 100% 30%, 78% 0, 22% 0, 0 30%); background: linear-gradient(180deg, #fff3c4, #ffd66b 45%, #d9931f); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); pointer-events: none; }
.hx-main.hx-acc .hx-acc-hx-pointer::after { content: ""; position: absolute; left: 30%; top: 12%; width: 40%; height: 26%; background: rgba(255, 255, 255, 0.55); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hx-main.hx-acc .hx-acc-hx-pointer.is-tick { animation: hx-hx-tick 110ms ease-out; }
@keyframes hx-hx-tick { 35% { transform: translateY(calc(var(--r, 150px) * -1 * 0.86 - 4px)) rotate(-12deg); } }
.hx-main.hx-acc .hx-acc-wh-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 60%;
  width: 80%;
  height: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}
.hx-main.hx-acc .hx-acc-wh-scene {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateY(var(--sway));
  transition: transform 260ms ease;
}
.hx-main.hx-acc .hx-acc-wh-stage.is-spinning .hx-acc-wh-scene { transform: rotateX(calc(var(--tilt) + 3deg)) rotateY(var(--sway)) translateZ(-10px); }
.hx-main.hx-acc .hx-acc-wh-stage.is-spinning::before { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); }
.hx-main.hx-acc .hx-acc-wh-stage.is-spinning .hx-acc-hx-slot { opacity: 1; }
.hx-main.hx-acc .hx-acc-wh-hero.is-done .hx-acc-hx-pointer { animation: hx-hx-tap 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hx-hx-tap { 40% { transform: translateY(calc(var(--r, 150px) * -1 * 0.86 + 8px)); } }
.hx-main.hx-acc .hx-acc-wh-board { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
/* the slab: one SVG (thickness, gold rim, top, neon slots, gems), one compositor layer */
.hx-main.hx-acc .hx-acc-hx-slab { position: absolute; left: 50%; top: 50%; width: var(--d) !important; height: var(--d) !important; max-width: none !important; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); transform: translateZ(0); overflow: visible; }
.hx-main.hx-acc .hx-acc-wh-stage.is-spinning .hx-acc-hx-slab rect { opacity: 1; }
/* (kept for older builds of the board) */
.hx-main.hx-acc .hx-acc-hx-chassis { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); clip-path: var(--poly); background: var(--fill); }
.hx-main.hx-acc .hx-acc-hx-chassis.is-top { background: radial-gradient(60% 60% at 50% 35%, #364570, #1a2340 68%, #10172c); }
.hx-main.hx-acc .hx-acc-hx-chassis.is-rim { background: linear-gradient(180deg, var(--gold-a), var(--gold-b) 45%, var(--gold-c)); }
.hx-main.hx-acc .hx-acc-hx-chassis.is-inner { background: radial-gradient(circle at 50% 40%, #0f1730, #080c18 75%); }
.hx-main.hx-acc .hx-acc-hx-slot { position: absolute; left: 50%; top: 50%; width: var(--w); height: 6px; margin: -3px 0 0 calc(var(--w) / -2); border-radius: 4px; transform: rotate(var(--a)) translateY(var(--r)) translateZ(4px); background: linear-gradient(90deg, rgba(255, 107, 109, 0.2), #ff8a7a, rgba(255, 107, 109, 0.2)); box-shadow: 0 0 10px rgba(250, 107, 109, 0.9), 0 0 22px rgba(250, 107, 109, 0.45); opacity: 0.85; }
.hx-main.hx-acc .hx-acc-hx-slot.is-gold { background: linear-gradient(90deg, rgba(255, 214, 107, 0.2), #ffe08a, rgba(255, 214, 107, 0.2)); box-shadow: 0 0 10px rgba(255, 214, 107, 0.9), 0 0 22px rgba(255, 214, 107, 0.4); }
.hx-main.hx-acc .hx-acc-hx-gem { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; transform: rotate(var(--a)) translateY(var(--r)) translateZ(6px); clip-path: polygon(50% 0, 100% 70%, 50% 100%, 0 70%); background: linear-gradient(180deg, #ffd0c2, #fa6b6d 45%, #b3222f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.hx-main.hx-acc .hx-acc-hx-gem::after { content: ""; position: absolute; left: 30%; top: 12%; width: 40%; height: 30%; background: rgba(255, 255, 255, 0.6); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ── a cell: gold bevelled hex with a lit face ── */
.hx-main.hx-acc .hx-acc-hx-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; --omega: 0deg; }
.hx-main.hx-acc .hx-acc-hx-ring.is-orbit { transition: --omega var(--dur, 12000ms) linear; }
.hx-main.hx-acc .hx-acc-hx-ring.is-ease { transition: --omega var(--dur, 5000ms) cubic-bezier(0.18, 0.72, 0.16, 1.01); }
.hx-main.hx-acc .hx-acc-hx-ring.is-settle { transition: --omega 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.hx-main.hx-acc .hx-acc-hx-ring.is-drag { transition: none; }
.hx-main.hx-acc .hx-acc-hx-cell { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--w) * 1.1547); margin: calc(var(--w) * -0.5774) 0 0 calc(var(--w) / -2); transform: rotate(calc(var(--a) + var(--omega))) translateY(calc(var(--ring) * -1)) rotate(calc((var(--a) + var(--omega)) * -1)) translateZ(var(--z)); transform-style: preserve-3d; transition: --z 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.hx-main.hx-acc .hx-acc-hx-cell > span { position: absolute; inset: 0; clip-path: var(--hex); }
.hx-main.hx-acc .hx-acc-hx-side { background: #b57610; top: 3px !important; bottom: -3px !important; }
.hx-main.hx-acc .hx-acc-hx-side--deep { background: var(--gold-d); top: 7px !important; bottom: -7px !important; }
.hx-main.hx-acc .hx-acc-hx-frame { background: linear-gradient(160deg, var(--gold-a) 0%, var(--gold-b) 40%, var(--gold-c) 75%, var(--gold-a) 100%); }
.hx-main.hx-acc .hx-acc-hx-edge { inset: 6px !important; background: #2a1a00; opacity: 0.9; }
.hx-main.hx-acc .hx-acc-hx-face { inset: 8px !important; background: radial-gradient(70% 70% at 50% 30%, #ff9a72, #f75d4f 55%, #c22f3b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.hx-main.hx-acc .hx-acc-hx-cell.is-service .hx-acc-hx-face { background: radial-gradient(70% 70% at 50% 30%, #3a4d7c, #223058 55%, #0f1526 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-nothing .hx-acc-hx-face { background: radial-gradient(70% 70% at 50% 30%, #5f6a84, #3a4356 55%, #232a3a 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-instagram .hx-acc-hx-face { background: radial-gradient(75% 75% at 50% 28%, #ffb35c, #f0426a 46%, #7a2a8f 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-tiktok .hx-acc-hx-face { background: radial-gradient(75% 75% at 50% 28%, #3a3f4a, #15171d 55%, #050608 100%); box-shadow: inset 0 0 0 1px rgba(41, 204, 211, 0.75), inset -8px -14px 26px rgba(226, 27, 96, 0.5), inset 8px 12px 26px rgba(41, 204, 211, 0.35); }
.hx-main.hx-acc .hx-acc-hx-cell.is-facebook .hx-acc-hx-face { background: radial-gradient(75% 75% at 50% 28%, #6fb0ff, #1878f4 50%, #0b48a8 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-youtube .hx-acc-hx-face { background: radial-gradient(75% 75% at 50% 28%, #ff7b73, #e62117 50%, #8c0f0a 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-instagram .hx-acc-hx-body b, .hx-main.hx-acc .hx-acc-hx-cell.is-facebook .hx-acc-hx-body b, .hx-main.hx-acc .hx-acc-hx-cell.is-youtube .hx-acc-hx-body b { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.5); }
.hx-main.hx-acc .hx-acc-hx-cell.is-instagram .hx-acc-hx-body small, .hx-main.hx-acc .hx-acc-hx-cell.is-facebook .hx-acc-hx-body small, .hx-main.hx-acc .hx-acc-hx-cell.is-youtube .hx-acc-hx-body small { color: #fff; }
.hx-main.hx-acc .hx-acc-hx-cell.is-instagram .hx-acc-hx-body svg, .hx-main.hx-acc .hx-acc-hx-cell.is-facebook .hx-acc-hx-body svg, .hx-main.hx-acc .hx-acc-hx-cell.is-youtube .hx-acc-hx-body svg { color: #fff; }
.hx-main.hx-acc .hx-acc-hx-cell.is-tiktok .hx-acc-hx-body b { color: #fff; text-shadow: 2px 0 0 #29ccd3, -2px 0 0 #e21b60, 0 4px 6px rgba(0, 0, 0, 0.6); }
.hx-main.hx-acc .hx-acc-hx-cell.is-tiktok .hx-acc-hx-body small, .hx-main.hx-acc .hx-acc-hx-cell.is-tiktok .hx-acc-hx-body svg { color: #fff; }
.hx-main.hx-acc .hx-acc-hx-gloss { inset: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 42%, transparent 50%); pointer-events: none; }
.hx-main.hx-acc .hx-acc-hx-glow { display: none; position: absolute; left: -38%; top: -38%; width: 176%; height: 176%; border-radius: 50%; background: radial-gradient(closest-side, transparent 58%, rgba(255, 214, 107, 0.95) 62%, rgba(255, 214, 107, 0.6) 70%, rgba(250, 107, 109, 0.35) 80%, transparent 92%); pointer-events: none; }
.hx-main.hx-acc .hx-acc-hx-body { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px 6px 0; text-align: center; color: #fff; pointer-events: none; }
.hx-main.hx-acc .hx-acc-hx-body .tp-mark { width: calc(var(--w) * 0.4); height: calc(var(--w) * 0.4); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.hx-main.hx-acc .hx-acc-hx-body svg:not(.tp-mark) { width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.3); color: #ffe08a; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.hx-main.hx-acc .hx-acc-hx-body b { font-family: var(--hx-font-display), sans-serif; font-weight: 800; font-size: calc(var(--w) * 0.22); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 1px 0 #b93b43, 0 2px 0 #8d252c, 0 4px 6px rgba(0, 0, 0, 0.5); }
.hx-main.hx-acc .hx-acc-hx-body small { font-size: calc(var(--w) * 0.1); font-weight: 700; letter-spacing: 0.02em; opacity: 0.92; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.hx-main.hx-acc .hx-acc-hx-cell.is-service .hx-acc-hx-body b { color: #ffe08a; text-shadow: 0 1px 0 #a67b1c, 0 2px 0 #6f5208, 0 4px 6px rgba(0, 0, 0, 0.55); }
.hx-main.hx-acc .hx-acc-hx-cell.is-service .hx-acc-hx-body small { color: #ffe9b0; }
.hx-main.hx-acc .hx-acc-hx-cell.is-nothing .hx-acc-hx-body { color: #dfe4ee; }
.hx-main.hx-acc .hx-acc-hx-cell.is-nothing .hx-acc-hx-body b { font-size: calc(var(--w) * 0.16); text-shadow: 0 1px 0 #545c70, 0 2px 0 #3f4656, 0 4px 6px rgba(0, 0, 0, 0.5); }
.hx-main.hx-acc .hx-acc-hx-cell.is-nothing .hx-acc-hx-body svg { color: #c9d0dd; }
.hx-main.hx-acc .hx-acc-hx-cell.is-hi, .hx-main.hx-acc .hx-acc-hx-cell:hover { --z: 18px; }
.hx-main.hx-acc .hx-acc-hx-cell.is-hi .hx-acc-hx-glow, .hx-main.hx-acc .hx-acc-hx-cell:hover .hx-acc-hx-glow { display: block; }
.hx-main.hx-acc .hx-acc-hx-cell.is-hi .hx-acc-hx-face, .hx-main.hx-acc .hx-acc-hx-cell:hover .hx-acc-hx-face { background: radial-gradient(70% 70% at 50% 30%, #ffb08a, #fb7a62 55%, #d63a44 100%); }
.hx-main.hx-acc .hx-acc-hx-cell.is-service.is-hi .hx-acc-hx-face, .hx-main.hx-acc .hx-acc-hx-cell.is-service:hover .hx-acc-hx-face { filter: none; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit { --z: 26px; transition-duration: 90ms; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-face, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-face { background: radial-gradient(70% 70% at 50% 30%, #fff8dc, #ffd66b 52%, #f0a029 100%) !important; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-glow, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-glow { display: block; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-body, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-body { color: #2a1a00; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-body b, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-body b { color: #2a1a00; text-shadow: 0 1px 0 #fff3c4, 0 2px 0 #d9931f, 0 4px 6px rgba(0, 0, 0, 0.3); }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-body small, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-body small { color: #4a2e00; text-shadow: none; }
.hx-main.hx-acc .hx-acc-hx-cell.is-lit .hx-acc-hx-body svg, .hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-body svg { color: #4a2e00; }
.hx-main.hx-acc .hx-acc-hx-cell.is-win { --z: 30px; animation: hx-hx-rise 760ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.hx-main.hx-acc .hx-acc-hx-cell.is-win .hx-acc-hx-glow { animation: hx-hx-blink 520ms steps(1) 5; }
@keyframes hx-hx-blink { 50% { background: radial-gradient(closest-side, transparent 58%, rgba(250, 107, 109, 0.95) 62%, rgba(250, 107, 109, 0.6) 70%, rgba(255, 214, 107, 0.35) 80%, transparent 92%); } }
@keyframes hx-hx-rise { 0% { --z: 26px; } 55% { --z: 52px; } 100% { --z: 30px; } }

/* ── the SPIN octagon ── */
.hx-main.hx-acc .hx-acc-hx-spin { -webkit-tap-highlight-color: transparent; position: absolute; left: 0; top: 0; width: var(--c, 120px); height: var(--c, 120px); margin: calc(var(--c, 120px) / -2) 0 0 calc(var(--c, 120px) / -2); padding: 0; border: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; transform: translateZ(14px); transition: transform 140ms ease; font: inherit; color: #fff; }
.hx-main.hx-acc .hx-acc-hx-spin > span { position: absolute; inset: 0; clip-path: var(--oct); }
.hx-main.hx-acc .hx-acc-hx-spin-side { background: var(--gold-d); }
.hx-main.hx-acc .hx-acc-hx-spin-side:nth-child(1) { top: 9px; bottom: -9px; }
.hx-main.hx-acc .hx-acc-hx-spin-side:nth-child(2) { top: 6px; bottom: -6px; }
.hx-main.hx-acc .hx-acc-hx-spin-side:nth-child(3) { top: 3px; bottom: -3px; background: var(--gold-c); }
.hx-main.hx-acc .hx-acc-hx-spin-frame { background: linear-gradient(160deg, var(--gold-a) 0%, var(--gold-b) 40%, var(--gold-c) 75%, var(--gold-a) 100%); }
.hx-main.hx-acc .hx-acc-hx-spin-face { inset: 9px !important; background: radial-gradient(70% 70% at 50% 30%, #2d3a5f, #182035 60%, #0b1020); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -14px 24px rgba(0, 0, 0, 0.45); }
.hx-main.hx-acc .hx-acc-hx-spin-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 48%); }
.hx-main.hx-acc .hx-acc-hx-spin-text { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--hx-font-display), sans-serif; font-weight: 900; font-size: calc(var(--c, 120px) * 0.24); letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 0 #d8555a, 0 2px 0 #b93b43, 0 3px 0 #9c2d35, 0 5px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(250, 107, 109, 0.8); pointer-events: none; }
.hx-main.hx-acc .hx-acc-hx-spin:hover { transform: translateZ(20px); }
.hx-main.hx-acc .hx-acc-hx-spin:active, .hx-main.hx-acc .hx-acc-hx-spin.is-busy { transform: translateZ(4px); }
.hx-main.hx-acc .hx-acc-hx-spin.is-busy .hx-acc-hx-spin-text { animation: hx-hx-pulse 900ms ease-in-out infinite; }
@keyframes hx-hx-pulse { 50% { opacity: 0.55; } }
.hx-main.hx-acc .hx-acc-hx-spin:disabled { cursor: not-allowed; }
.hx-main.hx-acc .hx-acc-hx-spin:disabled .hx-acc-hx-spin-text { color: rgba(255, 255, 255, 0.5); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.hx-main.hx-acc .hx-acc-hx-spin:disabled:hover { transform: translateZ(14px); }
.hx-main.hx-acc .hx-acc-hx-spin:focus-visible { outline: none; }
.hx-main.hx-acc .hx-acc-hx-spin:focus-visible .hx-acc-hx-spin-frame { background: #fff3c4; }
.hx-main.hx-acc .hx-acc-hx-spin.is-landed { animation: hx-hx-hub 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hx-hx-hub { 0% { transform: translateZ(14px); } 40% { transform: translateZ(44px); } 100% { transform: translateZ(14px); } }
.hx-main.hx-acc .hx-acc-wh-spark { position: absolute; left: 50%; top: 54%; z-index: 6; width: 8px; height: 8px; border-radius: 50%; background: #ffd66b; box-shadow: 0 0 8px rgba(255, 214, 107, 0.8); pointer-events: none; animation: hx-wh-spark 950ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.hx-main.hx-acc .hx-acc-wh-spark.is-coral { background: #fa6b6d; box-shadow: 0 0 8px rgba(250, 107, 109, 0.8); }
@keyframes hx-wh-spark { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }
.hx-main.hx-acc .hx-acc-wh-hero.is-locked .hx-acc-wh-scene { filter: saturate(0.4) brightness(0.55); }
.hx-main.hx-acc .hx-acc-wh-lock { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 20px; text-align: center; background: rgba(11, 16, 32, 0.5); }
.hx-main.hx-acc .hx-acc-wh-lock svg { color: #ffd66b; }
.hx-main.hx-acc .hx-acc-wh-lock strong { font-family: var(--hx-font-display), sans-serif; font-size: 1.15rem; }
.hx-main.hx-acc .hx-acc-wh-lock small { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); max-width: 30ch; }

/* ── under the stage: the state line and the Boost switch ── */
.hx-main.hx-acc .hx-acc-wh-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; }
.hx-main.hx-acc .hx-acc-wh-state { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.hx-main.hx-acc .hx-acc-wh-boost { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 214, 107, 0.35); cursor: pointer; min-height: 44px; }
.hx-main.hx-acc .hx-acc-wh-boost[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-boost input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hx-main.hx-acc .hx-acc-wh-boost-ui { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); transition: background 0.2s ease; }
.hx-main.hx-acc .hx-acc-wh-boost-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.hx-main.hx-acc .hx-acc-wh-boost input:checked + .hx-acc-wh-boost-ui { background: #ffd66b; }
.hx-main.hx-acc .hx-acc-wh-boost input:checked + .hx-acc-wh-boost-ui::after { transform: translateX(16px); background: #2a1a00; }
.hx-main.hx-acc .hx-acc-wh-boost input:focus-visible + .hx-acc-wh-boost-ui { outline: 2px solid #ffd66b; outline-offset: 2px; }
.hx-main.hx-acc .hx-acc-wh-boost input:disabled ~ * { opacity: 0.5; }
.hx-main.hx-acc .hx-acc-wh-boost-copy { display: grid; gap: 1px; line-height: 1.2; }
.hx-main.hx-acc .hx-acc-wh-boost-copy b { font-size: 0.88rem; }
.hx-main.hx-acc .hx-acc-wh-boost-copy small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.66); white-space: nowrap; }
.hx-main.hx-acc .hx-acc-wh-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(250, 107, 109, 0.2); border: 1px solid rgba(250, 107, 109, 0.45); font-size: 0.88rem; font-weight: 600; }
.hx-main.hx-acc .hx-acc-wh-error[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-result { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 226, 154, 0.4); animation: hx-wh-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hx-main.hx-acc .hx-acc-wh-result[hidden] { display: none; }
@keyframes hx-wh-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.hx-main.hx-acc .hx-acc-wh-result-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 214, 107, 0.18); color: #ffd66b; }
.hx-main.hx-acc .hx-acc-wh-result strong { font-family: var(--hx-font-display), sans-serif; font-size: 1.2rem; line-height: 1.15; }
.hx-main.hx-acc .hx-acc-wh-result p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.hx-main.hx-acc .hx-acc-wh-result-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hx-main.hx-acc .hx-acc-wh-result-actions [hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: transparent; }
.hx-main.hx-acc .hx-acc-wh-ghost:hover { border-color: #ffd66b; color: #ffd66b; }
.hx-main.hx-acc .hx-acc-wh-hero.is-done .hx-acc-wh-controls { display: none; }
.hx-main.hx-acc .hx-acc-wh-claim--hero { grid-column: auto; display: grid; gap: 12px; padding: 14px 16px 12px; border: 1px solid rgba(255, 226, 154, 0.4); border-radius: 18px; background: rgba(255, 255, 255, 0.08); animation: hx-wh-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hx-main.hx-acc .hx-acc-wh-claim--hero[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-claim-title { margin: 0; font-family: var(--hx-font-display), sans-serif; font-size: 1.05rem; }
.hx-main.hx-acc .hx-acc-wh-claim--hero .hx-acc-field > span { color: rgba(255, 255, 255, 0.78); }
.hx-main.hx-acc .hx-acc-wh-claim--hero .hx-flow-input { background: rgba(255, 255, 255, 0.95); }
.hx-main.hx-acc .hx-acc-wh-claim--hero [data-wh-claim-post][hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-claim-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-main.hx-acc .hx-acc-wh-claim-fine { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.hx-main.hx-acc .hx-acc-wh-hero.is-claiming .hx-acc-wh-controls, .hx-main.hx-acc .hx-acc-wh-hero.is-claiming .hx-acc-wh-result { display: none; }

/* ── the invited-by banner ── */
.hx-main.hx-acc .hx-acc-wh-invited { display: flex; align-items: center; gap: 12px; }
.hx-main.hx-acc .hx-acc-wh-invited a { color: inherit; font-weight: 800; }

/* ── on the board: points and packages apart, hovering a tile lifts its cell; the tier bar ── */
.hx-main.hx-acc .hx-acc-wh-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
.hx-main.hx-acc .hx-acc-wh-groups.has-both { grid-template-columns: minmax(0, var(--pts, 1)fr) minmax(0, var(--svc, 1)fr); }
.hx-main.hx-acc .hx-acc-wh-group { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(23, 18, 14, 0.06); }
.hx-main.hx-acc .hx-acc-wh-group.is-service { background: linear-gradient(160deg, #eef2fb, #e6ecf8); border-color: rgba(16, 23, 39, 0.08); }
.hx-main.hx-acc .hx-acc-wh-group h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--hx-font-display), sans-serif; font-size: 0.92rem; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-wh-group h3 span { margin-left: auto; font-family: var(--hx-font-mono), monospace; font-size: 0.72rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-wh-group.is-service h3 svg { color: var(--hx-navy); }
.hx-main.hx-acc .hx-acc-wh-group .hx-acc-wh-prizes { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.hx-main.hx-acc .hx-acc-wh-nothing { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-wh-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hx-main.hx-acc .hx-acc-wh-prize { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(23, 18, 14, 0.08); background: #fff; transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.25s ease; cursor: default; }
.hx-main.hx-acc .hx-acc-wh-prize:hover { transform: translateY(-1px); border-color: rgba(255, 159, 28, 0.55); }
.hx-main.hx-acc .hx-acc-wh-prize-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fdf1ec; color: var(--hx-g2); }
.hx-main.hx-acc .hx-acc-wh-prize.is-service .hx-acc-wh-prize-ic { background: var(--hx-navy); color: #ffe08a; }
.hx-main.hx-acc .hx-acc-wh-prize.is-instagram .hx-acc-wh-prize-ic { background: linear-gradient(135deg, #a4328b, #fc5c2b); color: #fff; }
.hx-main.hx-acc .hx-acc-wh-prize.is-tiktok .hx-acc-wh-prize-ic { background: #0b0c10; color: #fff; box-shadow: inset 0 0 0 1px rgba(41, 204, 211, 0.7), inset -3px -3px 8px rgba(226, 27, 96, 0.6); }
.hx-main.hx-acc .hx-acc-wh-prize.is-facebook .hx-acc-wh-prize-ic { background: #1878f4; color: #fff; }
.hx-main.hx-acc .hx-acc-wh-prize.is-youtube .hx-acc-wh-prize-ic { background: #e62117; color: #fff; }
.hx-main.hx-acc .hx-acc-wh-prize.is-nothing { border-style: dashed; background: rgba(255, 255, 255, 0.55); }
.hx-main.hx-acc .hx-acc-wh-prize.is-nothing .hx-acc-wh-prize-ic { background: rgba(23, 18, 14, 0.06); color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-wh-prize-copy { display: grid; min-width: 0; line-height: 1.15; }
.hx-main.hx-acc .hx-acc-wh-prize-copy strong { font-family: var(--hx-font-display), sans-serif; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-wh-prize-copy small { color: var(--hx-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-wh-prize.is-removed { opacity: 0.4; }
.hx-main.hx-acc .hx-acc-wh-prize.is-removed strong { text-decoration: line-through; }
.hx-main.hx-acc .hx-acc-wh-tier { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #fff4ea, #ffe9e4); border: 1px solid rgba(250, 107, 109, 0.18); }
.hx-main.hx-acc .hx-acc-wh-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hx-main.hx-acc .hx-acc-wh-tier-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hx-font-display), sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-wh-tier-name.is-now { color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-wh-tier-left { font-size: 0.86rem; color: var(--hx-body); text-align: center; }
.hx-main.hx-acc .hx-acc-wh-tier-left b { font-family: var(--hx-font-display), sans-serif; font-size: 1rem; color: var(--hx-cta-b); }
.hx-main.hx-acc .hx-acc-wh-meter { position: relative; height: 14px; border-radius: 999px; background: rgba(23, 18, 14, 0.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.hx-main.hx-acc .hx-acc-wh-meter span { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb86b, var(--hx-g1) 55%, var(--hx-g2)); box-shadow: 0 2px 8px rgba(232, 71, 79, 0.35); }
.hx-main.hx-acc .hx-acc-wh-meter span { overflow: hidden; }
.hx-main.hx-acc .hx-acc-wh-meter span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent); transform: translateX(-120%); }
.hx-main.hx-acc .hx-acc-wh-tier .hx-acc-fine { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .hx-main.hx-acc:not(.hx-noanim) .hx-acc-wh-meter span[data-meter-fill] { animation: hx-acc-fill 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hx-main.hx-acc:not(.hx-noanim) .hx-acc-wh-meter span::after { animation: hx-wh-sheen 2.8s cubic-bezier(0.4, 0, 0.2, 1) 1.1s infinite; }
}
@keyframes hx-wh-sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }

/* ── invite: a three-step path, then the link ── */
.hx-main.hx-acc .hx-acc-wh-path { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hx-main.hx-acc .hx-acc-wh-path::before { content: ""; position: absolute; left: 12%; right: 12%; top: 18px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(232, 71, 79, 0.45) 0 10px, transparent 10px 18px); }
.hx-main.hx-acc .hx-acc-wh-path li { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(23, 18, 14, 0.06); min-width: 0; }
.hx-main.hx-acc .hx-acc-wh-path li.is-payout { background: linear-gradient(170deg, #fff6dc, #ffe7b3); border-color: rgba(233, 163, 35, 0.45); }
.hx-main.hx-acc .hx-acc-wh-path-no { display: grid; place-items: center; width: 38px; height: 38px; margin-top: -1px; border-radius: 50%; font-family: var(--hx-font-display), sans-serif; font-weight: 900; font-size: 1rem; color: #4a2e00; background: radial-gradient(circle at 38% 32%, #fff3c4, #ffd66b 50%, #d9931f); box-shadow: 0 6px 14px -4px rgba(217, 147, 31, 0.6), inset 0 -3px 5px rgba(120, 70, 0, 0.3), 0 0 0 4px #fff; }
.hx-main.hx-acc .hx-acc-wh-path-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 6px; border-radius: 16px; background: #fdf1ec; color: var(--hx-g2); }
.hx-main.hx-acc .hx-acc-wh-path li.is-payout .hx-acc-wh-path-ic { background: rgba(255, 255, 255, 0.75); }
.hx-main.hx-acc .hx-acc-wh-path strong { font-family: var(--hx-font-display), sans-serif; font-size: 1rem; line-height: 1.2; }
.hx-main.hx-acc .hx-acc-wh-path small { font-size: 0.82rem; line-height: 1.4; color: var(--hx-muted); max-width: 26ch; }
.hx-main.hx-acc .hx-acc-wh-path-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hx-main.hx-acc .hx-acc-wh-path-chips b { padding: 5px 10px; border-radius: 999px; background: #2a1a00; color: #ffe08a; font-family: var(--hx-font-mono), monospace; font-size: 0.74rem; font-weight: 700; }
.hx-main.hx-acc .hx-acc-wh-path-chips i { flex-basis: 100%; font-style: normal; font-size: 0.8rem; font-weight: 700; color: #6b4300; }
.hx-main.hx-acc .hx-acc-wh-linkbox { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.08); }
.hx-main.hx-acc .hx-acc-wh-link { display: flex; gap: 8px; align-items: stretch; }
.hx-main.hx-acc .hx-acc-wh-link-field { flex: 1 1 auto; min-width: 0; display: block; }
.hx-main.hx-acc .hx-acc-wh-link-field .hx-flow-input { width: 100%; height: 100%; min-height: 46px; font-family: var(--hx-font-mono), monospace; font-size: 0.84rem; text-overflow: ellipsis; border-color: rgba(23, 18, 14, 0.12); }
.hx-main.hx-acc .hx-acc-wh-link .hx-btn { flex: none; white-space: nowrap; }
.hx-main.hx-acc .hx-acc-wh-link .hx-btn.is-copied { background: var(--hx-green); }
.hx-main.hx-acc .hx-acc-wh-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-main.hx-acc .hx-acc-wh-share-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(23, 18, 14, 0.12); background: #fff; color: var(--hx-ink); font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.86rem; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.hx-main.hx-acc .hx-acc-wh-share-btn:hover { border-color: var(--hx-g2); transform: translateY(-1px); }
.hx-main.hx-acc .hx-acc-wh-share-btn[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-code { margin-left: auto; font-size: 0.82rem; color: var(--hx-muted); }
.hx-main.hx-acc .hx-acc-wh-code b { font-family: var(--hx-font-mono), monospace; letter-spacing: 0.08em; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-wh-friends { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hx-main.hx-acc .hx-acc-wh-friends li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(23, 18, 14, 0.08); font-size: 0.84rem; font-weight: 600; color: var(--hx-ink); }
.hx-main.hx-acc .hx-acc-wh-friend-avatar { width: 28px; height: 28px; font-size: 0.78rem; box-shadow: none; }
.hx-main.hx-acc .hx-acc-wh-friends i { width: 8px; height: 8px; border-radius: 50%; background: #e5b35a; }
.hx-main.hx-acc .hx-acc-wh-friends li.is-paid i { background: var(--hx-green); }

/* ── your spins ── */
.hx-main.hx-acc .hx-acc-wh-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-main.hx-acc .hx-acc-wh-turn { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(23, 18, 14, 0.06); }
.hx-main.hx-acc .hx-acc-wh-turn > * { grid-area: auto; }
.hx-main.hx-acc .hx-acc-wh-turn.is-unclaimed { border-color: rgba(255, 159, 28, 0.45); background: #fff8ee; }
.hx-main.hx-acc .hx-acc-wh-turn-state { display: inline-flex; align-items: center; }
.hx-main.hx-acc .hx-acc-wh-turn .hx-acc-ledger-what strong { font-size: 0.95rem; }
.hx-main.hx-acc .hx-acc-wh-turn .hx-acc-ledger-what small { color: var(--hx-muted); font-size: 0.82rem; }
.hx-main.hx-acc .hx-acc-wh-turn .hx-acc-amount { font-family: var(--hx-font-mono), monospace; font-weight: 700; }
.hx-main.hx-acc .hx-acc-wh-claim { grid-column: 1 / -1; display: grid; gap: 12px; padding: 12px 12px 4px; border-top: 1px dashed rgba(23, 18, 14, 0.12); }
.hx-main.hx-acc .hx-acc-wh-claim[hidden] { display: none; }
.hx-main.hx-acc .hx-acc-wh-claim .hx-acc-form-actions { margin: 0; }

@media (max-width: 1080px) {
  .hx-main.hx-acc .hx-acc-wh-prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hx-main.hx-acc .hx-acc-wh-prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-main.hx-acc .hx-acc-wh-path { grid-template-columns: 1fr; gap: 10px; }
  .hx-main.hx-acc .hx-acc-wh-path::before { left: 19px; right: auto; top: 12%; bottom: 12%; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgba(232, 71, 79, 0.45) 0 10px, transparent 10px 18px); }
  .hx-main.hx-acc .hx-acc-wh-path li { grid-template-columns: 38px 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; justify-items: start; text-align: left; align-items: center; padding: 10px 12px; }
  .hx-main.hx-acc .hx-acc-wh-path-no { grid-row: 1 / span 2; margin: 0; box-shadow: 0 6px 14px -4px rgba(217, 147, 31, 0.6), inset 0 -3px 5px rgba(120, 70, 0, 0.3); }
  .hx-main.hx-acc .hx-acc-wh-path-ic { grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; }
  .hx-main.hx-acc .hx-acc-wh-path small { max-width: none; }
  .hx-main.hx-acc .hx-acc-wh-path-chips { justify-content: flex-start; }
  .hx-main.hx-acc .hx-acc-wh-tier-row { flex-wrap: wrap; }
  .hx-main.hx-acc .hx-acc-wh-tier-left { flex-basis: 100%; order: 3; text-align: left; }
}
@media (max-width: 640px) {
  .hx-main.hx-acc .hx-acc-wh-stage { height: 320px; perspective: 900px; --tilt: 22deg; }
  .hx-main.hx-acc .hx-acc-wh-groups { grid-template-columns: 1fr !important; }
  .hx-main.hx-acc .hx-acc-wh-group .hx-acc-wh-prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-main.hx-acc .hx-acc-hx-pointer { width: 26px; height: 30px; margin-left: -13px; }
  .hx-main.hx-acc .hx-acc-wh-controls { flex-direction: column; align-items: stretch; }
  .hx-main.hx-acc .hx-acc-wh-boost { justify-content: flex-start; }
  .hx-main.hx-acc .hx-acc-wh-link { flex-direction: column; }
  .hx-main.hx-acc .hx-acc-wh-link .hx-btn { min-height: 44px; }
  .hx-main.hx-acc .hx-acc-wh-share > .hx-acc-wh-share-btn { flex: 1 1 auto; justify-content: center; }
  .hx-main.hx-acc .hx-acc-wh-code { flex-basis: 100%; margin: 0; }
  .hx-main.hx-acc .hx-acc-wh-turn { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .hx-main.hx-acc .hx-acc-wh-turn .hx-acc-wh-claim { grid-column: 1 / -1; }
  .hx-main.hx-acc .hx-acc-wh-turn-state .hx-btn { min-height: 40px; }
  .hx-main.hx-acc .hx-acc-wh-result { grid-template-columns: 40px minmax(0, 1fr); }
  .hx-main.hx-acc .hx-acc-wh-result-ic { width: 40px; height: 40px; }
  .hx-main.hx-acc .hx-acc-wh-result-actions > * { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
  .hx-main.hx-acc .hx-acc-wh-stage { height: 300px; }
  .hx-main.hx-acc .hx-acc-wh-prizes { grid-template-columns: 1fr 1fr; }
  .hx-main.hx-acc .hx-acc-wh-path li { grid-template-columns: 34px minmax(0, 1fr); }
  .hx-main.hx-acc .hx-acc-wh-path-ic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-main.hx-acc .hx-acc-wh-result, .hx-main.hx-acc .hx-acc-wh-claim--hero, .hx-main.hx-acc .hx-acc-hx-spin.is-landed, .hx-main.hx-acc .hx-acc-hx-cell.is-win, .hx-main.hx-acc .hx-acc-wh-spark, .hx-main.hx-acc .hx-acc-hx-slot, .hx-main.hx-acc .hx-acc-hx-spin.is-busy .hx-acc-hx-spin-text { animation: none; }
  .hx-main.hx-acc .hx-acc-wh-scene, .hx-main.hx-acc .hx-acc-hx-cell, .hx-main.hx-acc .hx-acc-hx-spin, .hx-main.hx-acc .hx-acc-hx-ring { transition: none !important; }
  .hx-main.hx-acc .hx-acc-hx-cell.is-win { animation: none; }
}
html.hx-noanim .hx-main.hx-acc .hx-acc-hx-slot, html.hx-noanim .hx-main.hx-acc .hx-acc-hx-cell.is-win { animation: none !important; }

/* overview: the nudge to the drum, same strip as the points one */
.hx-main.hx-acc .hx-acc-spin-strip-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--hx-navy); color: #ffd66b; }
@media (max-width: 900px) {
  /* seven tabs (Invite & Spin joined): a touch smaller so every label still fits */
  .hx-main.hx-acc .hx-acc-mobile-nav:has(li:nth-child(7)) a,
  .hx-main.hx-acc .hx-acc-mobile-nav:has(li:nth-child(7)) button { font-size: 0.6rem; letter-spacing: -0.01em; padding-inline: 0; overflow: hidden; }
}