:root {
  --floating-nav-offset: 0px;
  color-scheme: light;
  --bg: #f5f1e7;
  --surface: #ffffff;
  --surface-2: #fbfaf5;
  --ink: #102c2a;
  --muted: #6e7772;
  --line: #d9ddd5;
  --primary: #08756e;
  --primary-dark: #054f4b;
  --primary-soft: #e3f2ee;
  --accent: #c89b3c;
  --danger: #d65452;
  --success: #249a68;
  --shadow: 0 18px 45px rgba(15, 55, 60, 0.12);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(13, 140, 152, 0.12), rgba(238, 245, 243, 0) 280px),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  position: relative;
  overflow-x: hidden;
}

.screen {
  min-height: 100vh;
  padding: 18px 16px calc(82px + env(safe-area-inset-bottom));
}

.screen.auth-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  position: relative;
  overflow: hidden;
  padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(2, 20, 19, 0.08) 0%, rgba(2, 25, 23, 0.22) 38%, rgba(2, 25, 23, 0.7) 72%, rgba(2, 18, 18, 0.94) 100%),
    var(--arc-auth-background-image, url("/assets/arc/arc-auth-background-v2.jpg")) center top / cover no-repeat;
}

.screen.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 15%, rgba(237, 195, 88, 0.14), transparent 29%),
    linear-gradient(112deg, rgba(2, 35, 30, 0.16), transparent 58%);
}

.screen.auth-screen::after {
  content: "";
  position: absolute;
  inset: auto -18% -18% -18%;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 41, 45, 0), rgba(7, 41, 45, 0.78));
}

.auth-screen > * {
  width: min(100%, 420px);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 14px;
}

.topbar-title {
  min-width: 0;
  flex: 1;
}

.topbar-title h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.topbar-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(19, 35, 37, 0.06);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-copy h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.05;
}

.brand-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-panel {
  margin-top: 0;
  padding: 18px;
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(3, 35, 31, 0.66), rgba(3, 28, 28, 0.48));
  border: 1px solid rgba(237, 205, 119, 0.3);
  border-radius: 18px;
  box-shadow:
    0 24px 54px rgba(0, 15, 15, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

.auth-panel .field label {
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.auth-panel .input-wrap {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(2, 27, 25, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.auth-panel .input-wrap:focus-within {
  border-color: rgba(239, 202, 101, 0.9);
  box-shadow:
    0 0 0 3px rgba(239, 202, 101, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-panel .input-wrap svg {
  color: #e9c768;
}

.auth-panel .input-wrap input {
  color: #ffffff;
}

.auth-panel .input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.auth-panel input:-webkit-autofill,
.auth-panel input:-webkit-autofill:hover,
.auth-panel input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px rgba(2, 27, 25, 0.94) inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  transition: background-color 9999s ease-out;
}

.auth-screen .login-auth-panel,
.auth-screen .register-auth-panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-screen .brand {
  align-items: flex-end;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

.auth-screen .brand-copy h1 {
  color: #fff;
}

.auth-screen .brand-copy p {
  color: rgba(255, 255, 255, 0.86);
}

.register-auth-panel {
  gap: 8px;
  padding: 14px;
}

.register-auth-panel .field {
  gap: 0;
}

.register-auth-panel .field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.register-auth-panel .input-wrap {
  min-height: 42px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(2, 27, 25, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.register-auth-panel .input-wrap svg {
  width: 15px;
  height: 15px;
  color: #e9c768;
}

.register-auth-panel .input-wrap input {
  color: #ffffff;
  font-size: 13px;
}

.register-auth-panel .input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.phone-prefix {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
}

.register-auth-panel .primary-btn {
  min-height: 44px;
  margin-top: 6px;
  color: #ffffff;
  background: linear-gradient(135deg, #108a52, #0b6278);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0, 21, 20, 0.3);
}

.auth-registration-bonus {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  padding: 13px 14px;
  color: #ffe49a;
  background: radial-gradient(ellipse at 100% 0%, rgba(232, 181, 67, 0.26), transparent 65%), linear-gradient(115deg, #073e30, #042c24);
  border: 1px solid #b89345;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 231, 160, 0.17), 0 8px 20px rgba(0, 15, 10, 0.18);
}

.auth-bonus-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.auth-bonus-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.auth-bonus-amount {
  color: #ffe8a2;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.auth-bonus-message {
  max-width: 170px;
  color: #fff6db;
  font-size: 12px;
  line-height: 1.4;
}

.registration-money {
  position: relative;
  display: block;
  flex: 0 0 86px;
  width: 86px;
  height: 76px;
  pointer-events: none;
}

.registration-money::before,
.registration-money::after {
  content: "✦";
  position: absolute;
  color: #fff0b3;
  font-size: 18px;
  top: 0;
  right: 0;
}

.registration-money::after {
  top: auto;
  bottom: 0;
  right: 66px;
  font-size: 10px;
}

.registration-money-note {
  position: absolute;
  top: 10px;
  left: 0;
  width: 66px;
  height: 39px;
  display: grid;
  place-items: center;
  color: #bbefd1;
  background: linear-gradient(135deg, #47a779, #135f42);
  border: 2px solid #8bcaa1;
  border-radius: 6px;
  outline: 1px solid #8bcaa1;
  outline-offset: -6px;
  transform: rotate(-18deg);
  box-shadow: 0 5px 0 #0b4b35, 0 10px 12px rgba(0, 0, 0, 0.24);
  font-size: 24px;
  font-weight: 900;
}

.registration-money-coin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #91610b;
  background: linear-gradient(135deg, #fff0a8 5%, #efbd43 55%, #ffe08b);
  border: 3px solid #f5ce66;
  border-radius: 50%;
  outline: 1px solid #b47b16;
  outline-offset: -6px;
  box-shadow: 0 4px 0 #b27715, 0 8px 10px rgba(0, 0, 0, 0.22), inset 0 1px 2px #fff8cd;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #fff3b6;
}

.registration-money .coin-back {
  top: 19px;
  right: 0;
  transform: rotate(15deg);
}

.registration-money .coin-front {
  bottom: 7px;
  left: 16px;
  transform: rotate(-12deg);
}

.auth-panel .primary-btn:focus-visible,
.auth-screen .switch-line button:focus-visible {
  outline: 3px solid #f2cf74;
  outline-offset: 3px;
}

.register-auth-screen .switch-line {
  min-height: 34px;
  justify-content: center;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(2, 27, 25, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.register-auth-screen .switch-line button {
  color: #ffffff;
}

.form-stack {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: #4a5b5d;
  font-size: 12px;
  font-weight: 700;
}

.input-wrap,
.select-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 12px;
  background: rgba(247, 251, 250, 0.88);
  border: 1px solid rgba(207, 225, 221, 0.9);
  border-radius: 8px;
}

.input-wrap:focus-within,
.select-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 140, 152, 0.12);
}

.input-wrap svg,
.select-wrap svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex: 0 0 auto;
}

.input-wrap input,
.select-wrap select {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}

.select-wrap select {
  appearance: none;
}

.bank-select-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(247, 251, 250, 0.88);
  border: 1px solid rgba(207, 225, 221, 0.9);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.bank-select-button.is-selected {
  color: var(--ink);
  font-weight: 800;
}

.bank-select-button:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 140, 152, 0.12);
}

.bank-select-button svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.bank-select-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #078891, #096c78);
  box-shadow: 0 14px 26px rgba(5, 88, 96, 0.32);
}

.secondary-btn {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.ghost-btn {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}

.danger-btn {
  color: #fff;
  background: var(--danger);
}

.primary-btn svg,
.secondary-btn svg,
.ghost-btn svg,
.danger-btn svg {
  width: 18px;
  height: 18px;
}

.switch-line {
  margin-top: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.switch-line button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  color: #ffffff;
  background: transparent;
  font-weight: 700;
}

.legal-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.26);
}

.hero-band {
  padding: 16px;
  color: #fff;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #096c78 0%, #0d8c98 54%, #e69a3f 100%);
  box-shadow: 0 14px 26px rgba(13, 140, 152, 0.22);
}

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

.hero-head > div {
  min-width: 0;
}

.hero-head > span {
  flex: 0 0 auto;
}

.hero-head span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}

.hero-head strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.balance {
  margin-top: 18px;
}

.balance span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.balance strong {
  display: block;
  margin-top: 2px;
  font-size: 32px;
  line-height: 1.05;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.hero-actions button,
.hero-actions a {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #0d555d;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  font-weight: 800;
}

.hero-actions svg {
  width: 17px;
  height: 17px;
}

.hero-actions button:disabled {
  opacity: 0.72;
  cursor: default;
}

.vip-stage {
  margin: 0 -16px;
  padding: 16px 16px 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 16% 34%, rgba(255, 223, 124, 0.52), transparent 18%),
    radial-gradient(circle at 88% 26%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(160deg, #ff8127 0%, #ff9b31 48%, #f05e22 100%);
}

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

.vip-stage-head span {
  font-size: 16px;
  font-weight: 900;
}

.vip-stage-head strong {
  color: rgba(255, 255, 255, 0.88);
  text-align: right;
  font-size: 12px;
  font-weight: 800;
}

.vip-feature-card {
  position: relative;
  min-height: 152px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.75), transparent 24%),
    linear-gradient(135deg, #ffcf5c 0%, #ff8931 46%, #e74727 100%);
  border: 4px solid rgba(244, 44, 39, 0.78);
  border-radius: 8px;
  box-shadow: 0 18px 32px rgba(115, 49, 22, 0.24);
}

.vip-feature-card::after {
  content: "";
  position: absolute;
  inset: auto -22px -70px 18%;
  height: 110px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.vip-feature-main,
.vip-feature-badge,
.vip-feature-price {
  position: relative;
  z-index: 1;
}

.vip-feature-main {
  display: grid;
  align-content: start;
  gap: 8px;
}

.vip-feature-main span {
  font-size: 42px;
  line-height: 0.95;
  font-weight: 950;
  text-shadow: 0 5px 16px rgba(136, 29, 12, 0.2);
}

.vip-feature-main strong,
.vip-feature-main em {
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.vip-feature-badge {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-self: center;
  color: #fff;
  background: linear-gradient(145deg, #d94717, #ff7b22);
  border: 3px solid rgba(255, 230, 155, 0.95);
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(113, 28, 9, 0.24);
}

.vip-feature-badge svg {
  width: 36px;
  height: 36px;
}

.vip-rank-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--rank-fg, #fff);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(145deg, var(--rank-a, #8b5a2b), var(--rank-b, #d6a15d));
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 12px;
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(42, 22, 10, 0.18);
}

.vip-rank-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}

.vip-feature-badge .vip-rank-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.vip-feature-badge .vip-rank-icon svg {
  width: 34px;
  height: 34px;
}

.vip-rank-1 { --rank-a: #6f4328; --rank-b: #c28b55; --rank-fg: #fff9ec; }
.vip-rank-2 { --rank-a: #111827; --rank-b: #596170; --rank-fg: #f8fafc; }
.vip-rank-3 { --rank-a: #8b4513; --rank-b: #cd7f32; --rank-fg: #fff7ed; }
.vip-rank-4 { --rank-a: #d7dde8; --rank-b: #f8fafc; --rank-fg: #334155; }
.vip-rank-5 { --rank-a: #f59e0b; --rank-b: #fde68a; --rank-fg: #713f12; }
.vip-rank-6 { --rank-a: #a5b4fc; --rank-b: #e5e7eb; --rank-fg: #312e81; }
.vip-rank-7 { --rank-a: #22d3ee; --rank-b: #2563eb; --rank-fg: #f0f9ff; }
.vip-rank-8 { --rank-a: #b91c1c; --rank-b: #fb7185; --rank-fg: #fff1f2; }
.vip-rank-9 { --rank-a: #1d4ed8; --rank-b: #60a5fa; --rank-fg: #eff6ff; }
.vip-rank-trial { --rank-a: #0d8c98; --rank-b: #8ee6de; --rank-fg: #ecfeff; }

.vip-feature-price {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 210px;
  margin-top: 2px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #ff9e83, #ec5b3d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 9px 18px rgba(117, 43, 27, 0.2);
  font-size: 18px;
  font-weight: 950;
}

.vip-upgrade-btn,
.vip-owned-label {
  min-height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9a3412;
  background: #fff8e7;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 6px 12px rgba(113, 28, 9, 0.16);
}

.vip-upgrade-btn:active {
  transform: translateY(1px);
}

.vip-owned-label {
  color: rgba(154, 52, 18, 0.72);
}

.vip-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.vip-pager a,
.vip-pager span {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.vip-pager a {
  color: #7b250e;
  background: rgba(255, 248, 220, 0.96);
  box-shadow: 0 8px 16px rgba(89, 34, 14, 0.14);
}

.vip-pager span {
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(117, 44, 18, 0.22);
  white-space: nowrap;
}

.vip-pager svg {
  width: 15px;
  height: 15px;
}

.vip-card-strip {
  display: flex;
  gap: 10px;
  margin: 12px -2px 0;
  padding: 0 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vip-card-strip::-webkit-scrollbar {
  display: none;
}

.vip-level-card {
  flex: 0 0 clamp(104px, 31vw, 118px);
  min-width: 104px;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 8px;
  scroll-snap-align: start;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(117, 44, 18, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  cursor: pointer;
}

.vip-level-card.active {
  color: #7b250e;
  background: #fff8dc;
  border-color: #fff;
  box-shadow: 0 10px 20px rgba(89, 34, 14, 0.18);
}

.vip-level-card.no-access {
  cursor: not-allowed;
  opacity: 0.64;
}

.vip-level-card span,
.vip-level-card strong,
.vip-level-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vip-level-card span {
  font-size: 13px;
  font-weight: 950;
}

.vip-level-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vip-level-title .vip-rank-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.vip-level-title .vip-rank-icon svg {
  width: 15px;
  height: 15px;
}

.vip-level-title b {
  min-width: 0;
  font: inherit;
}

.vip-level-card strong {
  font-size: 13px;
  line-height: 1.15;
}

.vip-level-card em {
  color: currentColor;
  opacity: 0.78;
  font-size: 10px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 800;
}

.vip-detail-section {
  display: grid;
  gap: 10px;
}

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

.vip-income-grid div,
.vip-info-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.vip-income-grid div {
  padding: 12px;
}

.vip-income-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.vip-income-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.vip-intro-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  color: #40251a;
  background: linear-gradient(180deg, #fff7e8, #fffdf8);
  border: 1px solid #f2c690;
  border-radius: 8px;
}

.vip-intro-card h3,
.vip-intro-card p {
  margin: 0;
}

.vip-intro-card h3 {
  color: #85330f;
  font-size: 15px;
}

.vip-intro-card p {
  color: #5e463a;
  font-size: 13px;
  line-height: 1.55;
}

.vip-intro-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vip-intro-list span {
  min-width: 0;
  padding: 9px;
  color: #6f4d12;
  background: #fff;
  border: 1px solid #f3d8a7;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vip-info-card {
  overflow: hidden;
}

.vip-info-card h3 {
  margin: 0;
  padding: 11px 12px;
  color: #85330f;
  background: #fff2dc;
  border-bottom: 1px solid #f2c690;
  font-size: 14px;
}

.vip-table {
  display: grid;
}

.vip-table-head,
.vip-table-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.vip-table.three-cols .vip-table-head,
.vip-table.three-cols .vip-table-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vip-table-head {
  color: #fff;
  background: #f07a23;
  font-size: 11px;
  font-weight: 900;
}

.vip-table-row {
  min-height: 38px;
  color: #40251a;
  background: #fffaf2;
  border-top: 1px solid #f2c690;
  font-size: 12px;
  font-weight: 800;
}

.vip-table-row:nth-child(odd) {
  background: #ffe5c2;
}

.vip-table-head span,
.vip-table-row span {
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 8px 5px;
  text-align: center;
  border-right: 1px solid rgba(157, 81, 25, 0.28);
  overflow-wrap: anywhere;
}

.vip-table-head span:last-child,
.vip-table-row span:last-child {
  border-right: 0;
}

.vip-card-note {
  margin: 0;
  padding: 10px 12px 12px;
  color: #6f4d12;
  background: #fffaf2;
  border-top: 1px solid #f2c690;
  font-size: 12px;
  line-height: 1.5;
}

.activity-config-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 16px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.24), transparent 22%),
    linear-gradient(135deg, #0d8c98, #f29f3d);
  border-radius: 8px;
  box-shadow: 0 14px 26px rgba(13, 140, 152, 0.16);
}

.activity-config-card img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.activity-image-zoom,
.activity-popup-image-button {
  width: 100%;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.activity-image-zoom img,
.activity-popup-image-button img {
  display: block;
}

.activity-config-card span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.activity-config-card h2,
.activity-config-card p {
  margin: 0;
}

.activity-config-card h2 {
  font-size: 22px;
  line-height: 1.15;
}

.activity-config-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.activity-page-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.activity-page-actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #0d555d;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.activity-page-actions button:last-child {
  color: #fff;
  background: rgba(6, 37, 43, 0.42);
}

.activity-page-actions svg {
  width: 16px;
  height: 16px;
}

.lucky-section {
  display: grid;
  place-items: center;
  gap: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #120b05 0%, #2a1908 48%, #070605 100%);
  border-color: rgba(205, 151, 48, 0.45);
}

.lucky-wheel-wrap {
  --wheel-center-y: calc(48.5% - 4px);
  --wheel-radius: 48%;
  --wheel-pointer-top: calc(48.5% - 2px - var(--wheel-radius) + 8px);
  position: relative;
  width: min(90vw, 380px);
  height: min(112vw, 470px);
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  margin: 4px auto 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 218, 116, 0.38);
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.lucky-wheel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.96;
}

.lucky-wheel-pointer,
.lucky-wheel-pointer-img {
  position: absolute;
  top: var(--wheel-pointer-top);
  left: 50%;
  z-index: 4;
  width: 64px;
  height: 78px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.lucky-wheel-disc {
  position: absolute;
  left: 50%;
  top: var(--wheel-center-y);
  z-index: 2;
  width: 96%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(248, 199, 82, 0.18);
  transform: translate(-50%, -50%) rotate(var(--wheel-rotation, 0deg));
  transition: transform 3.1s cubic-bezier(0.12, 0.74, 0.12, 1);
}

.lucky-wheel-base-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.lucky-wheel-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 94px;
  height: 94px;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(-107px);
  transform-origin: center;
  color: #ffe9a4;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.lucky-wheel-prize {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.lucky-wheel-slot img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.48));
  transform: translate(-50%, -50%);
}

.lucky-wheel-amount {
  position: absolute;
  left: 50%;
  top: 59%;
  z-index: 4;
  width: 96px;
  height: 28px;
  display: block;
  overflow: visible;
  transform: translate3d(-50%, -50%, 0) rotate(-90deg);
  transform-origin: center;
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

.lucky-wheel-center {
  position: absolute;
  left: 50%;
  top: calc(var(--wheel-center-y) - 1px);
  z-index: 5;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.lucky-wheel-center-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 9px 13px rgba(0, 0, 0, 0.52));
}

.lucky-wheel-center:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.04);
}

.lucky-wheel-center:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.lucky-result {
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  color: #ffe9a4;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(246, 203, 93, 0.42);
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15, 55, 60, 0.08);
}

.lucky-winner-feed {
  width: min(100%, 420px);
  min-height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 12px;
  color: #fff3b0;
  background: linear-gradient(180deg, rgba(80, 45, 11, 0.74), rgba(11, 8, 5, 0.68));
  border: 1px solid rgba(255, 213, 91, 0.5);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.lucky-winner-line {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.68);
}

.lucky-winner-feed.is-rolling .lucky-winner-line {
  animation: lucky-winner-rise 3s ease-in-out both;
}

.lucky-winner-line span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lucky-winner-spark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: #ffe477;
}

.lucky-winner-spark svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

@keyframes lucky-winner-rise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  18%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

.lucky-prize-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 9, 8, 0.58);
}

.lucky-prize-dialog {
  width: min(78vw, 276px);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 14px 12px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 235, 151, 0.42), transparent 42%),
    linear-gradient(160deg, #2d1707 0%, #5a310c 46%, #1a0d04 100%);
  border: 1px solid rgba(255, 214, 103, 0.72);
  border-radius: 8px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lucky-prize-amount {
  width: 100%;
  padding: 8px 10px;
  color: #fff4b7;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 224, 128, 0.34);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.76);
}

.lucky-prize-image {
  width: 138px;
  height: 138px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
}

.lucky-prize-message {
  color: #fff2ad;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72);
}

.lucky-prize-confirm {
  min-width: 112px;
  min-height: 38px;
  padding: 0 18px;
  color: #3a1b04;
  background: linear-gradient(180deg, #fff2ac 0%, #f0b72e 100%);
  border: 1px solid rgba(255, 239, 170, 0.82);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.invite-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  color: #0d555d;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.invite-strip button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.invite-strip svg {
  width: 15px;
  height: 15px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.user-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  min-width: 0;
  padding: 12px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stat span {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.stat strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
}

.stat-button {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stat-button.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
}

.stat-button.active span,
.stat-button.active strong {
  color: #ffffff;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.quick-link {
  appearance: none;
  min-width: 0;
  height: 78px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px 4px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.quick-link svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.quick-link.company-home-link {
  grid-column: 4;
}

.anti-fraud-gallery,
.trial-intro-gallery,
.charity-gallery {
  display: grid;
  gap: 12px;
}

.anti-fraud-image,
.trial-intro-image,
.charity-image {
  margin: 0;
  overflow: hidden;
  background: #061d4a;
  border: 1px solid rgba(13, 140, 152, 0.18);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(3, 24, 54, 0.12);
}

.anti-fraud-image img,
.trial-intro-image img,
.charity-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.charity-page {
  display: grid;
  gap: 12px;
}

.charity-hero {
  display: grid;
  gap: 8px;
  padding: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(135deg, #007f5f, #0d8c98 58%, #0f766e);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(5, 95, 83, 0.18);
}

.charity-hero span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.charity-hero svg {
  width: 20px;
  height: 20px;
}

.charity-hero h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.charity-hero p {
  margin: 0;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.55;
}

.charity-image {
  position: relative;
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.charity-image span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #087f8c;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(13, 140, 152, 0.2);
  border-radius: 999px;
}

.job-application-page {
  display: grid;
  gap: 12px;
}

.job-application-landing {
  min-height: calc(100vh - 128px);
  grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
}

.job-entry-card,
.job-hero {
  --job-bg: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #062326;
  background-image:
    linear-gradient(90deg, rgba(247, 255, 253, 0.96) 0%, rgba(247, 255, 253, 0.82) 46%, rgba(247, 255, 253, 0.38) 100%),
    var(--job-bg);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(13, 140, 152, 0.2);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(4, 54, 59, 0.1);
}

.job-entry-card::before,
.job-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(17, 144, 104, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(6, 70, 76, 0.08));
}

.job-entry-card {
  min-height: 220px;
  display: grid;
  align-content: end;
  gap: 7px;
  padding: 18px;
  text-decoration: none;
}

.job-entry-card span,
.job-hero span {
  color: #0a7772;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.job-entry-card strong {
  max-width: 22em;
  color: #04252a;
  font-size: 22px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.job-entry-card em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-top: 4px;
  color: #ffffff;
  background: var(--primary);
  border-radius: 999px;
  font-style: normal;
}

.job-entry-card svg,
.job-hero svg {
  width: 18px;
  height: 18px;
}

.job-hero {
  min-height: 226px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 20px;
}

.job-hero h2 {
  margin: 0;
  max-width: 12em;
  color: #03272a;
  font-size: 28px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.job-hero p {
  max-width: 35em;
  margin: 0;
  color: #25535a;
  font-size: 13px;
  line-height: 1.55;
}

.job-intro-copy,
.job-action-panel,
.job-progress-panel,
.job-salary-history,
.job-empty-state {
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.job-intro-copy {
  display: grid;
  gap: 8px;
  color: #23454d;
  font-size: 13px;
  line-height: 1.55;
}

.job-intro-copy p {
  margin: 0;
}

.job-position-list {
  display: grid;
  gap: 10px;
}

.job-position-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.job-position-card b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0a8f77, #0d8c98);
  border-radius: 999px;
  font-size: 14px;
}

.job-position-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.job-position-card p,
.job-position-card span {
  display: block;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.job-position-card span {
  color: #087066;
  font-weight: 900;
}

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

.job-status-grid div {
  min-width: 0;
  padding: 12px;
  background: #f2fbf8;
  border: 1px solid rgba(13, 140, 152, 0.16);
  border-radius: 8px;
}

.job-status-grid span,
.job-action-panel span,
.job-progress-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.job-status-grid strong,
.job-action-panel strong,
.job-progress-head strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.job-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.job-action-panel div {
  min-width: 0;
}

.job-action-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.primary-btn.compact {
  min-height: 34px;
  padding: 0 13px;
  font-size: 12px;
  white-space: nowrap;
}

.job-progress-panel {
  display: grid;
  gap: 12px;
}

.job-progress-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.job-progress-head em {
  color: #087066;
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
}

.job-progress-track {
  height: 10px;
  overflow: hidden;
  background: #dcefed;
  border-radius: 999px;
}

.job-progress-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0c8a74, #19b87a, #f2c94c);
  border-radius: inherit;
}

.job-requirements {
  display: grid;
  gap: 8px;
}

.job-requirements div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.job-requirements div.met {
  background: #effaf3;
  border-color: rgba(20, 150, 90, 0.24);
}

.job-requirements span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.job-requirements strong {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.job-promote-btn {
  width: 100%;
}

.job-salary-history {
  display: grid;
  gap: 8px;
}

.job-salary-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background: #f8fcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.job-salary-row span,
.job-salary-row strong,
.job-salary-row em,
.job-salary-row b,
.job-salary-row i {
  min-width: 0;
  overflow-wrap: anywhere;
}

.job-salary-row strong,
.job-salary-row em {
  display: block;
}

.job-salary-row em {
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.job-salary-row b {
  color: var(--ink);
  font-size: 14px;
}

.job-salary-row i {
  padding: 4px 8px;
  color: #9a6412;
  background: #fff4dc;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.job-salary-row i.paid {
  color: #0d7d55;
  background: #e8f7ef;
}

.job-empty-state {
  display: grid;
  gap: 7px;
  place-items: center;
  min-height: 116px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.job-empty-state strong {
  color: var(--ink);
  font-size: 15px;
}

.job-empty-state.compact {
  min-height: 58px;
}

.support-activity-feed {
  min-height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0 12px;
  color: #063b43;
  background:
    linear-gradient(135deg, rgba(13, 140, 152, 0.13), rgba(20, 184, 143, 0.12)),
    var(--surface);
  border: 1px solid rgba(13, 140, 152, 0.2);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 55, 60, 0.05);
}

.support-activity-line {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.support-activity-feed.is-rolling .support-activity-line {
  animation: support-activity-rise 3s ease-in-out both;
}

.support-activity-line span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-activity-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0d8c98, #14b88f);
  border-radius: 8px;
}

.support-activity-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

@keyframes support-activity-rise {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  18%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

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

.support-contact-card {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 55, 60, 0.05);
}

button.support-contact-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.support-contact-card:disabled {
  cursor: progress;
  opacity: 0.76;
}

.support-contact-card.is-loading .support-contact-icon svg,
.support-contact-card.is-loading > svg {
  animation: spin 0.9s linear infinite;
}

.support-contact-card.is-disabled {
  opacity: 0.62;
}

.support-contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0d8c98, #14b88f);
  border-radius: 8px;
  overflow: hidden;
}

.support-contact-icon svg {
  width: 22px;
  height: 22px;
}

.support-contact-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.support-contact-main {
  min-width: 0;
}

.support-contact-main strong,
.support-contact-main small {
  display: block;
  overflow-wrap: anywhere;
}

.support-contact-main strong {
  font-size: 14px;
}

.support-contact-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.support-contact-action {
  color: var(--primary);
}

.support-contact-action svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 380px) {
  .support-contact-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.user-dashboard-screen {
  position: relative;
  padding: 12px 14px calc(86px + env(safe-area-inset-bottom));
  color: #061922;
  background:
    linear-gradient(158deg, rgba(237, 255, 224, 0.9) 0%, rgba(145, 226, 244, 0.82) 38%, rgba(186, 199, 255, 0.86) 68%, rgba(255, 197, 237, 0.88) 100%),
    #d9f4fb;
}

.user-dashboard-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 38%, rgba(255, 255, 255, 0.24)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px);
}

.user-dashboard-screen > * {
  position: relative;
  z-index: 1;
}

.user-wallet-link {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  color: #0f5af0;
  font-size: 13px;
  font-weight: 800;
}

.user-profile-head {
  min-height: 102px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding-top: 12px;
  text-align: center;
}

.user-profile-head strong {
  margin-top: 2px;
  color: #020f16;
  font-size: 18px;
  line-height: 1.1;
}

.user-profile-head span {
  color: rgba(6, 25, 34, 0.66);
  font-size: 12px;
  font-weight: 700;
}

.user-avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #0c9a7b, #16b8d0);
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(39, 112, 130, 0.18);
}

.user-avatar svg {
  width: 23px;
  height: 23px;
}

.user-balance-block {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-height: 110px;
  padding: 2px 4px 20px;
}

.user-balance-block span {
  color: #020f16;
  font-size: 14px;
  font-weight: 800;
}

.user-balance-block strong {
  color: #3f7dff;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
}

.user-balance-block button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0 10px;
  color: #075d69;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(72, 119, 145, 0.1);
}

.user-balance-block button svg {
  width: 14px;
  height: 14px;
}

.user-dashboard-stats {
  display: grid;
  gap: 10px;
}

.user-dashboard-stats.primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-dashboard-stats.secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.user-stat-tile {
  min-width: 0;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 10px 7px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, rgba(54, 82, 92, 0.44), rgba(72, 82, 125, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px rgba(68, 95, 124, 0.12);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.user-stat-tile:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 13px 25px rgba(68, 95, 124, 0.16);
}

.user-stat-tile span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.user-stat-tile strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  color: #fff;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.user-dashboard-stats.secondary .user-stat-tile {
  min-height: 64px;
}

.user-dashboard-stats.secondary .user-stat-tile span {
  font-size: 13px;
}

.user-dashboard-stats.secondary .user-stat-tile strong {
  font-size: 17px;
}

.income-detail-hero .balance strong {
  font-size: 22px;
}

.income-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.income-detail-row strong,
.income-detail-row span,
.income-detail-row em {
  display: block;
}

.income-detail-row strong {
  color: var(--ink);
  font-size: 14px;
}

.income-detail-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.income-detail-row em {
  margin-top: 5px;
  color: #8a999b;
  font-size: 11px;
  font-style: normal;
}

.income-detail-row b {
  color: var(--success);
  white-space: nowrap;
  font-size: 15px;
}

.user-asset-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 9px;
  color: #0a3a42;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
}

.user-asset-strip.frozen {
  grid-template-columns: 1fr;
  padding: 12px 14px;
}

.user-asset-strip div {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: center;
}

.user-asset-strip span {
  color: rgba(6, 25, 34, 0.64);
  font-size: 11px;
  font-weight: 800;
}

.user-asset-strip strong {
  min-width: 0;
  color: #06232b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.user-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 18px;
  margin-top: 26px;
}

.user-menu-tile {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  color: #061922;
  text-align: center;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.22;
}

.user-menu-tile > span:last-child {
  min-height: 32px;
  display: grid;
  align-items: start;
  overflow-wrap: anywhere;
}

.user-menu-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #676ee8;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(174, 186, 197, 0.68);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 20px rgba(89, 104, 150, 0.16);
}

.user-menu-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.15;
}

.user-menu-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu-tile:nth-child(3n + 1) .user-menu-icon {
  color: #a453d4;
}

.user-menu-tile:nth-child(3n + 2) .user-menu-icon {
  color: #3985e8;
}

.user-menu-tile:nth-child(3n) .user-menu-icon {
  color: #0f9a94;
}

.section {
  margin-top: 16px;
}

.section.first-section {
  margin-top: 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.section-title h2 {
  margin: 0;
  font-size: 16px;
}

.section-title a,
.section-title button {
  color: var(--primary-dark);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.section-title .section-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.list {
  display: grid;
  gap: 9px;
}

.helpbook-list {
  display: grid;
  gap: 0;
  padding: 8px 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.helpbook-row {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 17px;
  color: var(--ink);
  border-bottom: 1px solid rgba(209, 224, 222, 0.72);
}

.helpbook-row:last-child {
  border-bottom: 0;
}

.helpbook-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.helpbook-row span {
  flex: 0 0 auto;
  color: var(--muted);
}

.helpbook-row svg {
  width: 18px;
  height: 18px;
}

.help-detail {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.help-detail > * {
  min-width: 0;
}

.help-detail-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.help-detail-title > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 8px;
}

.help-detail-title svg {
  width: 19px;
  height: 19px;
}

.help-detail-title img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.help-detail h2 {
  margin: 0;
  font-size: 19px;
}

.help-detail-intro {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}

.company-certificate-gallery {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #f7fbff, #eef7f6);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.company-certificate-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-certificate-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: #dff6f4;
  border-radius: 8px;
}

.company-certificate-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.company-certificate-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.company-certificate-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.company-certificate-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 10px;
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(190, 214, 212, 0.9);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.company-certificate-card:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 132, 128, 0.45);
  box-shadow: 0 14px 28px rgba(14, 95, 98, 0.12);
}

.company-certificate-image-frame {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: block;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(207, 222, 221, 0.95);
  border-radius: 8px;
}

.company-certificate-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  display: block;
  background: #fff;
  object-fit: contain;
}

.company-certificate-card strong,
.company-certificate-card span {
  display: block;
  overflow-wrap: anywhere;
}

.company-certificate-card strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.company-certificate-card span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.company-certificate-zoom {
  justify-self: start;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: #e1f6f5;
  border-radius: 10px;
}

.certificate-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.certificate-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 18, 24, 0.76);
  border: 0;
  cursor: zoom-out;
}

.certificate-preview-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 780px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.certificate-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.certificate-preview-top strong,
.certificate-preview-top span {
  display: block;
}

.certificate-preview-top strong {
  color: var(--ink);
  font-size: 14px;
}

.certificate-preview-top span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.certificate-preview-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f5fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.certificate-preview-panel > img {
  width: 100%;
  height: 100%;
  max-height: calc(92vh - 64px);
  display: block;
  object-fit: contain;
  background: #f5f7f8;
}

.help-guide-image {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.help-detail-sections {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.help-detail-section {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 13px;
  background: #f8fbff;
  border: 1px solid #d9e7f8;
  border-radius: 8px;
}

.help-detail-section h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.help-detail-section p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.help-detail-body {
  display: grid;
  gap: 10px;
}

.help-detail-body p {
  margin: 0;
  padding-left: 14px;
  color: var(--muted);
  border-left: 3px solid var(--primary);
  font-size: 13px;
  line-height: 1.62;
}

.row,
.record,
.tier,
.task,
.member,
.message,
.help-item {
  min-width: 0;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.row-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.row-button.is-selected {
  border-color: rgba(13, 140, 152, 0.45);
  background: linear-gradient(135deg, rgba(222, 247, 248, 0.98), #ffffff);
}

.row-button.is-selected .row-icon {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.static-row {
  cursor: default;
}

.row-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.row-icon svg {
  width: 19px;
  height: 19px;
}

.row-main {
  min-width: 0;
  flex: 1;
}

.row-main strong {
  display: block;
  font-size: 14px;
}

.row-main span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.row-action {
  color: var(--muted);
}

.row-action svg {
  width: 17px;
  height: 17px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  color: #6f4d12;
  background: #fff3d9;
  border: 1px solid #f3d697;
  border-radius: 8px;
  font-size: 12px;
}

.notice svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.tabbar {
  display: flex;
  gap: 7px;
  padding: 4px;
  margin-bottom: 12px;
  background: #e5efed;
  border-radius: 8px;
}

.tabbar button {
  min-width: 0;
  flex: 1;
  min-height: 36px;
  color: var(--muted);
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.tabbar button.active {
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(19, 35, 37, 0.06);
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.amount-chip {
  min-height: 48px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
}

.amount-chip.active {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.withdraw-policy-copy {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

[data-withdraw-amount]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.wealth-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.wealth-plan-card {
  min-width: 0;
  min-height: 96px;
  display: grid;
  gap: 5px;
  align-content: center;
  padding: 10px 8px;
  color: var(--ink);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wealth-plan-card.active {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-soft), #ffffff);
}

.wealth-plan-card:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  background: #f4f7f7;
}

.wealth-plan-card strong,
.wealth-plan-card span,
.wealth-plan-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wealth-plan-card strong {
  font-size: 18px;
}

.wealth-plan-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.wealth-plan-card em {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.wealth-order-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(104px, auto);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 11px;
  row-gap: 8px;
}

.wealth-order-row .row-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.wealth-order-row .row-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  align-self: start;
}

.wealth-order-row .row-main strong,
.wealth-order-row .row-main span {
  overflow-wrap: anywhere;
  word-break: normal;
}

.wealth-order-row .badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  white-space: nowrap;
}

.wealth-order-action {
  align-self: end;
  min-width: 104px;
  min-height: 34px;
  padding: 0 10px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.wealth-order-actions {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: grid;
  gap: 6px;
}

@media (max-width: 380px) {
  .wealth-order-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .wealth-order-row .row-main {
    grid-row: 1;
  }

  .wealth-order-row .badge,
  .wealth-order-actions {
    grid-column: 2;
    justify-self: end;
  }

  .wealth-order-row .badge {
    grid-row: 2;
    margin-top: 2px;
  }

  .wealth-order-actions {
    grid-row: 3;
  }
}

.wealth-detail {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.wealth-detail-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.wealth-detail-title .icon {
  color: var(--primary);
}

.wealth-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.wealth-rate-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wealth-rate-row {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 36px;
  color: var(--ink);
  background: #ffffff;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}

.wealth-rate-row.head {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-top: 0;
}

.wealth-rate-row strong,
.wealth-rate-row span {
  min-width: 0;
  padding: 8px 6px;
  text-align: center;
  overflow-wrap: anywhere;
}

.form-card {
  display: grid;
  gap: 13px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invite-guide-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  color: #23464a;
  background: #f1fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invite-guide-card h3,
.invite-guide-card p {
  margin: 0;
}

.invite-guide-card h3 {
  color: var(--ink);
  font-size: 16px;
}

.invite-guide-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.points-hero {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #0d8c98, #f0a43a);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(13, 140, 152, 0.18);
}

.points-hero > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #0d8c98;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}

.points-hero svg {
  width: 30px;
  height: 30px;
}

.points-hero p,
.points-hero strong {
  margin: 0;
}

.points-hero p {
  font-size: 13px;
  opacity: 0.88;
}

.points-hero strong {
  font-size: 38px;
  line-height: 1;
}

.points-exchange-list {
  display: grid;
  gap: 9px;
}

.points-exchange-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.points-exchange-row div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.points-exchange-row strong {
  color: var(--ink);
  font-size: 16px;
}

.points-exchange-row span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.points-exchange-row button {
  min-height: 36px;
  padding: 0 13px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 0;
  border-radius: 8px;
  font-weight: 900;
}

.points-exchange-row button:disabled {
  color: var(--muted);
  background: #edf3f3;
}

.points-rule-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fff8e7;
  border: 1px solid #f5d895;
  border-radius: 8px;
}

.points-rule-card h3,
.points-rule-card p {
  margin: 0;
}

.points-rule-card h3 {
  color: #9a3412;
  font-size: 18px;
  text-align: center;
}

.points-rule-card p {
  color: #5f4633;
  font-size: 13px;
  line-height: 1.65;
}

.points-rule-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.points-rule-list span {
  min-width: 0;
  padding: 9px 6px;
  color: #075c63;
  text-align: center;
  background: rgba(13, 140, 152, 0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

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

.identity-upload-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  color: var(--ink);
  background: #f8fbfa;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.identity-upload-card input {
  width: 100%;
  min-height: 38px;
  font-size: 12px;
}

.identity-upload-card img,
.identity-upload-card em {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef7f7;
  object-fit: cover;
  overflow: hidden;
}

.identity-upload-card em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.record {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-ticker {
  --record-row-height: 64px;
  --record-gap: 9px;
  height: var(--record-row-height);
  overflow: hidden;
  border-radius: 8px;
}

.record-ticker-track {
  display: grid;
  gap: var(--record-gap);
}

.record-ticker.is-rolling .record-ticker-track {
  animation: recordTicker var(--ticker-duration, 12s) cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.record-ticker:hover .record-ticker-track {
  animation-play-state: paused;
}

.record-ticker .record {
  height: var(--record-row-height);
  align-items: center;
}

.record-ticker .record > div {
  min-width: 0;
}

.record-ticker .record strong,
.record-ticker .record span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes recordTicker {
  0%,
  16% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(-1 * var(--record-count) * (var(--record-row-height) + var(--record-gap))));
  }
}

.record strong {
  display: block;
  font-size: 14px;
}

.record span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.record b {
  white-space: nowrap;
  font-size: 14px;
}

.record .income {
  color: var(--success);
}

.record .outcome {
  color: var(--danger);
}

.record-pagination {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr minmax(72px, auto);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.record-pagination button,
.record-pagination span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.record-pagination button {
  padding: 0 10px;
  color: #fff;
  background: var(--primary);
}

.record-pagination button:disabled {
  color: var(--muted);
  background: #e7efed;
  cursor: default;
}

.record-pagination span {
  min-width: 0;
  padding: 0 8px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}

.deposit-record-pagination button,
.deposit-record-pagination span {
  min-height: 44px;
  scroll-margin-bottom: 260px;
}

.deposit-record-pagination span {
  display: block;
  padding: 5px 4px;
  line-height: 17px;
}

.deposit-records {
  scroll-margin-top: 70px;
  margin-bottom: 180px;
}

.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.tier h3,
.task h3,
.message h3,
.help-item h3 {
  margin: 0;
  font-size: 15px;
}

.tier p,
.task p,
.message p,
.help-item p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 8px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.order-task {
  align-items: stretch;
}

.task-actions {
  display: grid;
  align-content: center;
  gap: 7px;
}

.app-task-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: linear-gradient(135deg, var(--primary-soft), #fff7e8);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.app-task-icon svg {
  width: 22px;
  height: 22px;
}

.app-task-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.task button,
.tier button {
  min-width: 78px;
  min-height: 36px;
  padding: 0 10px;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.task-actions button {
  min-width: 72px;
}

.task button:disabled,
.tier button:disabled {
  color: var(--muted);
  background: #e9efee;
  cursor: default;
}

.progress-track {
  height: 7px;
  margin: 9px 0 8px;
  overflow: hidden;
  background: #e8f0ef;
  border-radius: 999px;
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.16s ease;
}

.task-progress {
  margin: 8px 0 5px;
}

.task-progress-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.member {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
}

.team-level-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.team-level-tabs button {
  min-width: 0;
  min-height: 72px;
  padding: 10px 6px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.team-level-tabs button strong,
.team-level-tabs button span {
  display: block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.team-level-tabs button strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.18;
}

.team-level-tabs button span {
  margin-top: 3px;
  font-size: 11px;
}

.team-list-title {
  justify-content: flex-start;
}

.team-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-title-line span {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  color: var(--primary-dark);
  background: #e8f7f6;
  border: 1px solid #c7ece9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.team-member-card {
  align-items: start;
}

.team-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.team-money-grid div {
  min-width: 0;
  padding: 8px;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.team-money-grid span,
.team-money-grid em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.team-money-grid b {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.team-detail-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.team-detail-list p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 8px;
  font-weight: 900;
}

.copy-box {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px dashed var(--primary);
  border-radius: 8px;
}

.copy-box.compact {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.copy-box code {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  color: var(--primary-dark);
  font-weight: 800;
}

.copy-box button {
  width: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
}

.copy-box svg {
  width: 17px;
  height: 17px;
}

.invite-code-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.invite-code-button {
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 10px 24px rgba(13, 140, 152, 0.08);
}

.invite-code-button:disabled {
  opacity: 0.55;
}

.invite-code-button > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--primary);
}

.invite-code-button span,
.invite-code-button small,
.invite-code-button strong {
  min-width: 0;
  display: block;
}

.invite-code-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.invite-code-button strong {
  margin-top: 2px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.invite-qr-layer {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 18px;
}

.invite-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 18, 24, 0.76);
  border: 0;
}

.invite-qr-panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 460px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #f6fbfa;
  border-radius: 14px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4);
}

.invite-qr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.invite-qr-top strong,
.invite-qr-top span {
  display: block;
}

.invite-qr-top strong {
  color: var(--ink);
  font-size: 15px;
}

.invite-qr-top span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.invite-qr-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f5fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.invite-qr-card {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  text-align: center;
}

.invite-qr-brand {
  color: var(--primary-dark);
  font-size: 34px;
  font-weight: 1000;
  line-height: 1;
}

.invite-qr-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.invite-qr-code-text {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  color: var(--primary-dark);
  background: #e1f6f5;
  border-radius: 999px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.invite-qr-code {
  position: relative;
  width: min(72vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 16px auto 12px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(13, 140, 152, 0.12);
}

.invite-qr-code img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.invite-qr-code > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.invite-qr-code b {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 58px;
  padding: 8px 10px;
  transform: translate(-50%, -50%);
  color: var(--primary-dark);
  background: #ffffff;
  border: 2px solid #d9f1ef;
  border-radius: 14px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(8, 127, 140, 0.16);
}

.invite-qr-benefits {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px;
  color: #18434a;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  list-style: none;
}

.invite-qr-benefits li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.4;
}

.invite-qr-benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.56em;
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 999px;
}

.invite-qr-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.invite-qr-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  color: #ffffff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.invite-qr-actions button:first-child {
  color: var(--primary-dark);
  background: #e1f6f5;
}

.invite-qr-actions button:disabled {
  opacity: 0.55;
}

.chart {
  height: 150px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 13px 10px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bar {
  min-width: 0;
  flex: 1;
  display: grid;
  align-items: end;
  gap: 6px;
  height: 100%;
}

.bar i {
  display: block;
  min-height: 12px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--primary), #6fc9c5);
}

.bar span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.income-level-card {
  display: grid;
  gap: 10px;
}

.profit-reference-image {
  position: relative;
  width: 100%;
  margin: 0 0 38px;
  padding: 0;
  overflow: visible;
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.profit-reference-image:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 132, 128, 0.45);
  box-shadow: 0 14px 28px rgba(14, 95, 98, 0.12);
}

.profit-reference-image img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.profit-reference-image > span {
  position: absolute;
  right: 10px;
  bottom: -42px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: rgba(225, 246, 245, 0.94);
  border: 1px solid rgba(12, 132, 128, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(14, 95, 98, 0.14);
}

.income-level-hero {
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(127, 100, 232, 0.95), rgba(120, 211, 236, 0.75) 58%, rgba(255, 181, 199, 0.9)),
    #8f92ff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: inset 0 -22px 48px rgba(255, 255, 255, 0.22);
}

.income-level-hero span {
  color: #e0f24c;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8), 0 5px 12px rgba(4, 72, 113, 0.18);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.income-level-hero h3 {
  margin: 8px 0 0;
  color: #fff;
  text-shadow: 0 3px 0 rgba(24, 121, 185, 0.45), 0 7px 16px rgba(45, 35, 90, 0.24);
  font-size: 27px;
  line-height: 1.08;
}

.daily-income-panel {
  padding: 10px 8px 8px;
  background: #fff;
  border: 2px solid #84db78;
  border-radius: 8px;
}

.daily-income-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.daily-income-legend i {
  width: 11px;
  height: 11px;
  background: #3e9634;
  border-radius: 50%;
}

.daily-income-chart {
  height: 210px;
  display: grid;
  grid-template-columns: repeat(var(--vip-chart-columns, 9), minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  margin-top: 8px;
  padding: 14px 4px 0;
  background: repeating-linear-gradient(to top, transparent 0 33px, #dde4e1 34px);
  border-bottom: 1px solid #cfd9d6;
}

.income-bar {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.income-bar b {
  min-width: 0;
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.income-bar i {
  display: block;
  width: min(72%, 34px);
  min-height: 5px;
  background: #439736;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.income-bar span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.task-income-title {
  justify-self: center;
  min-width: 220px;
  margin-top: 2px;
  padding: 7px 20px;
  color: #fff;
  text-align: center;
  background: #087f59;
  border: 2px solid #f2ead4;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(115, 77, 43, 0.35);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.task-income-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.task-income-table {
  min-width: 720px;
}

.task-income-head,
.task-income-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 1.1fr 0.9fr 1fr 1.15fr 1.25fr;
  align-items: center;
}

.task-income-head {
  color: #fff;
  background: #2d8d3f;
  font-size: 11px;
  font-weight: 900;
}

.task-income-row {
  min-height: 37px;
  color: #4a2b15;
  background: #fffaf0;
  border-top: 1px solid rgba(37, 43, 43, 0.65);
  font-size: 12px;
  font-weight: 800;
}

.task-income-row:nth-child(odd) {
  background: #97db8d;
}

.task-income-head span,
.task-income-row span,
.task-income-row strong {
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 7px 5px;
  text-align: center;
  border-right: 1px solid rgba(37, 43, 43, 0.65);
  overflow-wrap: anywhere;
}

.task-income-head span:last-child,
.task-income-row span:last-child {
  border-right: 0;
}

.reward-banner {
  padding: 10px 12px;
  color: #fff;
  text-align: center;
  background: #b99272;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.reward-table {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.reward-table-head,
.reward-table-row {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: center;
}

.reward-table-head {
  min-height: 38px;
  color: #fff;
  background: #2d8d3f;
  font-size: 11px;
  font-weight: 800;
}

.reward-table-row {
  min-height: 42px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.reward-table-row:nth-child(odd) {
  background: #9cdd9a;
}

.reward-table-head span,
.reward-table-row span,
.reward-table-row strong {
  min-width: 0;
  padding: 9px 4px;
  text-align: center;
  overflow-wrap: anywhere;
}

.reward-table-row strong {
  color: var(--primary-dark);
}

.reward-help {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.reward-help h3 {
  justify-self: center;
  margin: 0 0 2px;
  padding: 5px 22px;
  color: var(--ink);
  background: #ececef;
  border-radius: 999px;
  font-size: 15px;
}

.reward-help p {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.reward-help p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  background: var(--ink);
  border-radius: 50%;
}

.reward-help .reward-help-note {
  margin-top: 4px;
  padding: 10px 12px 10px 34px;
  color: #9f1d1d;
  background: #fff1f1;
  border: 1px solid #f4b6b6;
  border-radius: 8px;
  font-weight: 800;
}

.reward-help .reward-help-note::before {
  left: 13px;
  top: 1.15em;
  width: 7px;
  height: 7px;
  background: #e53935;
}

.wealth-card {
  margin-top: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wealth-card h3 {
  margin: 0;
  padding: 10px 12px;
  color: #fff;
  text-align: center;
  background: #0d7f57;
  font-size: 18px;
}

.wealth-card p {
  margin: 0;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.wealth-table-wrap {
  overflow-x: auto;
}

.wealth-table {
  min-width: 680px;
}

.wealth-table-head,
.wealth-table-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
}

.wealth-table-head {
  color: #08251e;
  background: #0d9a8f;
  font-size: 11px;
  font-weight: 900;
}

.wealth-table-row {
  color: #fff;
  background: #16a86e;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 800;
}

.wealth-table-head span,
.wealth-table-row span {
  min-width: 0;
  padding: 9px 6px;
  text-align: center;
  overflow-wrap: anywhere;
}

.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  width: min(100%, 460px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 28px rgba(19, 35, 37, 0.08);
}

.bottom-nav a {
  min-width: 0;
  height: 52px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--muted);
  border-radius: 8px;
  font-size: 11px;
}

.bottom-nav a.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.bottom-nav svg {
  width: 20px;
  height: 20px;
}

.arc-observation-notice { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid #e4c77e; border-radius: 14px; color: #5f4514; background: #fff8e7; font-size: 12px; line-height: 1.55; }
.arc-observation-notice strong, .arc-observation-notice span { display: block; font-weight: 700; }
.arc-observation-notice p { margin: 6px 0; }

.floating-inbox {
  position: fixed;
  right: max(16px, calc((100vw - min(100vw, 460px)) / 2 + 16px));
  bottom: calc(96px + var(--floating-nav-offset) + env(safe-area-inset-bottom));
  z-index: 24;
}

.floating-inbox.is-drag-positioned {
  right: auto;
  bottom: auto;
}

.floating-inbox.is-dragging {
  user-select: none;
}

.floating-inbox-button {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  padding: 0;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(8, 106, 118, 0.22);
  cursor: grab;
  touch-action: none;
}

.floating-inbox.is-dragging .floating-inbox-button,
.floating-inbox.is-dragging .inbox-panel-head {
  cursor: grabbing;
}

.floating-inbox-label {
  position: absolute;
  top: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: #075f59;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.floating-inbox-button:focus-visible {
  outline: 3px solid #b4983d;
  outline-offset: 4px;
}

.floating-inbox-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #e6f3ec;
  border-radius: 50%;
  filter: drop-shadow(0 8px 16px rgba(8, 106, 118, 0.2));
  pointer-events: none;
}

.floating-inbox-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  color: #fff;
  background: #e5484d;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(120, 20, 30, 0.24);
  pointer-events: none;
}

.floating-inbox-badge:not(.hidden) {
  animation: floating-checkin-notice-blink 1.2s ease-in-out infinite;
}

.floating-inbox-badge.hidden {
  display: none;
}

.inbox-panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(660px, calc(100dvh - 170px - var(--floating-nav-offset) - env(safe-area-inset-bottom)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(219, 232, 229, 0.9);
  border-radius: 12px;
  box-shadow: 0 24px 58px rgba(10, 39, 42, 0.24);
}

.floating-inbox.is-drag-positioned .inbox-panel {
  right: auto;
  bottom: auto;
  left: var(--inbox-panel-x, 0px);
  top: var(--inbox-panel-y, -520px);
}

.inbox-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 0%, rgba(13, 140, 152, 0.18), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7fbfa);
  cursor: grab;
  touch-action: none;
}

.inbox-panel-head button {
  cursor: pointer;
}

.inbox-brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.inbox-brand > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(8, 106, 118, 0.18);
}

.inbox-brand svg {
  width: 18px;
  height: 18px;
}

.inbox-brand strong,
.inbox-detail-title strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.inbox-brand em,
.inbox-detail-title span,
.inbox-item-meta,
.inbox-thread-item span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.inbox-unread-pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.inbox-panel-head button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inbox-compose-button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-color: rgba(8, 106, 118, 0.18) !important;
}

.inbox-panel-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.inbox-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #f7fbfa, #ffffff);
  border-bottom: 1px solid var(--line);
}

.inbox-tabs button {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 900;
}

.inbox-tabs button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: rgba(13, 140, 152, 0.28);
}

.inbox-tabs b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  color: #fff;
  background: #e5484d;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}

.inbox-tab-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.inbox-notice-list {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding: 12px;
  background: #fff;
}

.inbox-notice-card {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #ffffff, #f9fcfb);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(19, 35, 37, 0.04);
}

.inbox-notice-card.is-unread {
  border-color: rgba(229, 72, 77, 0.38);
}

.inbox-notice-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inbox-notice-card strong {
  font-size: 13px;
}

.inbox-notice-card span {
  color: var(--muted);
  font-size: 11px;
}

.inbox-notice-card p {
  margin: 0;
  color: #40575a;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-list {
  min-height: 0;
  max-height: 170px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
  background: linear-gradient(180deg, #f7fbfa, #ffffff);
  border-bottom: 1px solid var(--line);
}

.inbox-item {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(19, 35, 37, 0.04);
}

.inbox-item-top {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-item-top strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.inbox-item-top b {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}

.inbox-item-preview {
  min-width: 0;
  display: block;
  color: #4d6265;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item.is-active {
  border-color: rgba(13, 140, 152, 0.42);
  background: linear-gradient(135deg, rgba(223, 244, 245, 0.92), #ffffff);
}

.inbox-item.is-unread strong::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  background: #e5484d;
  border-radius: 50%;
}

.inbox-detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.inbox-support-detail {
  flex: 1;
}

.inbox-detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
}

.inbox-detail-title > div {
  min-width: 0;
}

.inbox-detail-title b {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0;
}

.inbox-message-card {
  margin: 0 12px 10px;
  padding: 10px 11px;
  background: linear-gradient(180deg, #f9fcfb, #ffffff);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.inbox-sender {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 900;
}

.inbox-message-body {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-thread {
  min-height: 72px;
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 10px;
  background: #fff;
}

.inbox-support-thread {
  padding-top: 2px;
}

.inbox-thread-item {
  max-width: 82%;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.inbox-thread-item + .inbox-thread-item {
  margin-top: 8px;
}

.inbox-thread-item.from-admin {
  justify-self: start;
  background: #f7fbfa;
}

.inbox-thread-item.from-user {
  justify-self: end;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: rgba(8, 106, 118, 0.38);
}

.inbox-thread-item strong {
  color: inherit;
  font-size: 11px;
}

.inbox-thread-item.from-user span {
  color: rgba(255, 255, 255, 0.76);
}

.inbox-thread-item p {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-contact-link {
  color: var(--primary-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.inbox-thread-item.from-user .inbox-contact-link {
  color: inherit;
}

.inbox-reply-form {
  display: grid;
  gap: 7px;
  padding: 10px 12px 11px;
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  border-top: 1px solid var(--line);
}

.inbox-compose-form {
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.inbox-input-box {
  position: relative;
  min-width: 0;
}

.inbox-reply-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 66px;
  padding: 10px 98px 42px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfe1de;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(19, 35, 37, 0.03);
}

.inbox-reply-form textarea:focus {
  border-color: rgba(13, 140, 152, 0.62);
  box-shadow: 0 0 0 3px rgba(13, 140, 152, 0.12);
}

.inbox-input-hint {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.inbox-send-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-width: 80px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(8, 106, 118, 0.2);
}

.inbox-send-button svg {
  width: 15px;
  height: 15px;
}

.inbox-send-button[disabled] {
  opacity: 0.68;
  cursor: not-allowed;
  box-shadow: none;
}

.inbox-empty,
.inbox-readonly {
  margin: 0;
  padding: 18px 10px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.inbox-empty p {
  margin: 0 0 10px;
}

.inbox-empty-action {
  min-height: 34px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

html.welcome-bonus-modal-open,
html.welcome-bonus-modal-open body,
html.withdraw-confirmation-modal-open,
html.withdraw-confirmation-modal-open body {
  overflow: hidden;
}

.withdraw-rental-lock {
  align-items: center;
  color: #6f4b00;
  background: #fff8df;
  border-color: #edd188;
  font-weight: 800;
}

.withdraw-rental-lock span {
  min-width: 0;
  flex: 1 1 auto;
}

.withdraw-rental-lock a {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #ffffff;
  background: #08785f;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.withdraw-confirmation-layer {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(1, 18, 20, 0.52);
  backdrop-filter: blur(8px);
}

.withdraw-confirmation-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.withdraw-confirmation-card {
  position: relative;
  width: min(100%, 360px);
  max-height: calc(100dvh - 28px);
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 20px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.24);
  border-radius: 14px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.28);
}

.withdraw-confirmation-card:focus {
  outline: 3px solid rgba(8, 120, 95, 0.24);
  outline-offset: 2px;
}

.withdraw-confirmation-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.withdraw-confirmation-close:disabled {
  opacity: 0.55;
  cursor: wait;
}

.withdraw-confirmation-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 12px;
}

.withdraw-confirmation-mark svg {
  width: 24px;
  height: 24px;
}

.withdraw-confirmation-heading {
  display: grid;
  gap: 7px;
  padding-right: 26px;
}

.withdraw-confirmation-heading h2,
.withdraw-confirmation-heading p,
.withdraw-confirmation-error {
  margin: 0;
}

.withdraw-confirmation-heading h2 {
  font-size: 21px;
  line-height: 1.2;
}

.withdraw-confirmation-heading p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.withdraw-confirmation-heading strong {
  color: var(--primary-dark);
  white-space: nowrap;
}

.withdraw-confirmation-field {
  margin: 0;
}

.withdraw-confirmation-field input {
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.withdraw-confirmation-error {
  padding: 10px 12px;
  color: #8f2020;
  background: #fff0ef;
  border: 1px solid #f2c4c0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.withdraw-confirmation-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.withdraw-confirmation-actions > button {
  min-width: 0;
  min-height: 48px;
  margin: 0;
}

.withdraw-confirmation-actions .ghost-btn {
  width: 100%;
}

@media (max-width: 360px) {
  .withdraw-confirmation-layer {
    padding-right: 10px;
    padding-left: 10px;
  }

  .withdraw-confirmation-card {
    gap: 12px;
    padding: 16px;
  }

  .withdraw-confirmation-heading h2 {
    font-size: 19px;
  }

  .withdraw-confirmation-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.welcome-bonus-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 211, 91, 0.22), transparent 38%),
    rgba(0, 17, 13, 0.78);
  backdrop-filter: blur(10px);
}

.welcome-bonus-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.welcome-bonus-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 374px);
  max-height: calc(100dvh - 28px);
  display: grid;
  gap: 13px;
  padding: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #12372f;
  background:
    linear-gradient(155deg, rgba(255, 252, 232, 0.98), rgba(241, 255, 248, 0.98)),
    #ffffff;
  border: 1px solid rgba(232, 179, 52, 0.72);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 0 0 4px rgba(255, 213, 98, 0.08);
}

.welcome-bonus-card:focus {
  outline: 3px solid rgba(255, 207, 70, 0.78);
  outline-offset: 2px;
}

.welcome-bonus-x {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ffffff;
  background: rgba(0, 28, 21, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.welcome-bonus-x svg {
  width: 21px;
  height: 21px;
}

.welcome-bonus-x:focus-visible,
.welcome-bonus-primary:focus-visible {
  outline: 3px solid #ffcf46;
  outline-offset: 2px;
}

.welcome-bonus-x:disabled,
.welcome-bonus-primary:disabled {
  opacity: 0.68;
  cursor: wait;
}

.welcome-bonus-image-wrap {
  position: relative;
  min-height: 190px;
  height: clamp(210px, 29dvh, 242px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #286b44, #032e20 78%);
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 121, 0.36);
}

.welcome-bonus-image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(0, 26, 17, 0.68));
  pointer-events: none;
}

.welcome-bonus-image {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
}

.welcome-bonus-image-wrap .registration-money {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%) scale(1.4);
}

.welcome-bonus-amount {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 12px 8px;
  color: #fff3b1;
  white-space: nowrap;
  max-width: 100%;
  font-size: clamp(40px, 12vw, 50px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.welcome-bonus-copy {
  display: grid;
  gap: 5px;
  padding: 0 4px;
  text-align: center;
}

.welcome-bonus-kicker {
  color: #a56d00;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.welcome-bonus-copy h2 {
  margin: 0;
  color: #075f48;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.08;
}

.welcome-bonus-copy p {
  margin: 0;
  color: #315a50;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.welcome-bonus-copy .welcome-bonus-error {
  margin-top: 3px;
  padding: 8px 10px;
  color: #9b2c2c;
  background: #fff0f0;
  border: 1px solid #f6caca;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.welcome-bonus-copy .welcome-bonus-guide {
  margin-top: 5px;
  color: #597168;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.welcome-bonus-primary {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  color: #143c2b;
  background: linear-gradient(135deg, #ffe17d, #f2b52e);
  border: 1px solid rgba(166, 105, 0, 0.34);
  border-radius: 13px;
  box-shadow: 0 9px 22px rgba(192, 125, 10, 0.22);
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.welcome-bonus-primary svg {
  width: 18px;
  height: 18px;
  animation: welcome-bonus-spin 0.9s linear infinite;
}

@keyframes welcome-bonus-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 360px) {
  .welcome-bonus-card {
    gap: 10px;
    padding: 11px;
    border-radius: 18px;
  }

  .welcome-bonus-image-wrap {
    min-height: 178px;
    height: min(37dvh, 222px);
  }

  .welcome-bonus-copy p {
    font-size: 14px;
  }
}

@media (max-height: 600px) {
  .welcome-bonus-image-wrap {
    min-height: 190px;
    height: 190px;
  }

  .welcome-bonus-card {
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-bonus-primary svg {
    animation: none;
  }
}

/* Compact team reward guide */
.team-reward-guide {
  margin: 14px 0;
  overflow: hidden;
  color: #173328;
  background: linear-gradient(145deg, #ffffff 0%, #f5fbf7 100%);
  border: 1px solid #d4e4da;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(7, 66, 44, 0.08);
}

.team-reward-intro {
  padding: 17px 16px 15px;
  color: #ffffff;
  background:
    radial-gradient(circle at 93% 0%, rgba(229, 187, 80, 0.26), transparent 38%),
    linear-gradient(135deg, #064d3d 0%, #08704e 100%);
}

.team-reward-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f2ce70;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-reward-eyebrow svg {
  width: 16px;
  height: 16px;
}

.team-reward-intro h2 {
  margin: 7px 0 4px;
  color: inherit;
  font-size: 22px;
  line-height: 1.12;
}

.team-reward-intro p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.team-reward-heading,
.team-invite-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.team-reward-heading {
  padding: 14px 14px 10px;
}

.team-invite-heading {
  margin: 16px 1px 8px;
}

.team-reward-heading span,
.team-invite-heading span {
  display: block;
  color: #08704e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.team-reward-heading h3,
.team-invite-heading h2 {
  margin: 2px 0 0;
  color: #102d22;
  font-size: 15px;
  line-height: 1.2;
}

.team-reward-heading > small,
.team-invite-heading > small {
  flex: 0 0 auto;
  color: #71857a;
  font-size: 10px;
  font-weight: 700;
}

.team-reward-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px;
}

.team-reward-level {
  min-width: 0;
  padding: 11px;
  background: #ffffff;
  border: 1px solid #d7e5dc;
  border-radius: 13px;
  box-shadow: 0 7px 17px rgba(8, 75, 48, 0.05);
}

.team-reward-level-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e5eee8;
}

.team-reward-level-title > b {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #08784e, #075b3d);
  border-radius: 10px;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.team-reward-level-2 .team-reward-level-title > b {
  background: linear-gradient(135deg, #1f8070, #0d5f58);
}

.team-reward-level-3 .team-reward-level-title > b {
  color: #173328;
  background: linear-gradient(135deg, #f2d27b, #d8a93c);
}

.team-reward-level-title span,
.team-reward-level-title strong,
.team-reward-level-title small {
  min-width: 0;
  display: block;
}

.team-reward-level-title strong {
  color: #173328;
  font-size: 12px;
  line-height: 1.2;
}

.team-reward-level-title small {
  margin-top: 2px;
  color: #75877e;
  font-size: 9px;
  line-height: 1.25;
}

.team-reward-level dl {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
}

.team-reward-level dl > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.team-reward-level dt {
  color: #657a6f;
  font-size: 9px;
  line-height: 1.25;
}

.team-reward-level dd {
  margin: 0;
  color: #08704e;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

@media (max-width: 520px) {
  .team-reward-intro {
    padding: 12px 13px 11px;
  }

  .team-reward-level {
    padding: 7px 5px;
  }

  .team-reward-level-title {
    flex-direction: row;
    gap: 4px;
    padding-bottom: 5px;
  }

  .team-reward-level-title > b {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-radius: 8px;
    font-size: 10px;
  }

  .team-reward-level-title strong {
    font-size: 9px;
  }

  .team-reward-level-title small {
    margin-top: 1px;
    font-size: 7px;
  }

  .team-reward-level dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-top: 5px;
  }

  .team-reward-level dl > div {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: left;
  }

  .team-reward-level dt {
    font-size: 7px;
  }

  .team-reward-level dd {
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .team-reward-intro {
    padding: 15px 13px 13px;
  }

  .team-reward-heading,
  .team-reward-levels {
    padding-right: 11px;
    padding-left: 11px;
  }

}

.flash-drop-layer {
  position: fixed;
  inset: 0;
  z-index: 34;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 18, 20, 0.42);
  backdrop-filter: blur(8px);
}

.flash-drop-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.flash-drop-card {
  position: relative;
  width: min(100%, 344px);
  display: grid;
  gap: 12px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.24);
}

.flash-drop-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.flash-drop-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 8px;
}

.flash-drop-mark svg {
  width: 22px;
  height: 22px;
}

.flash-drop-card h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.flash-drop-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.flash-drop-form {
  display: grid;
  gap: 10px;
}

.flash-drop-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.flash-drop-form input:focus {
  outline: none;
  border-color: rgba(13, 140, 152, 0.62);
  box-shadow: 0 0 0 3px rgba(13, 140, 152, 0.12);
}

.flash-drop-form button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.flash-drop-form button:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.flash-drop-form button svg {
  width: 17px;
  height: 17px;
}

.app-download-layer {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 18, 20, 0.42);
  backdrop-filter: blur(8px);
}

.app-download-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.app-download-card {
  position: relative;
  width: min(100%, 360px);
  display: grid;
  gap: 12px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.24);
}

.app-download-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.app-download-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 8px;
}

.app-download-mark svg {
  width: 22px;
  height: 22px;
}

.app-download-card h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.app-download-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.app-download-choice {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.app-download-option {
  min-width: 0;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.app-download-option.ios {
  color: var(--primary-dark);
  background: linear-gradient(180deg, #ffffff, var(--primary-soft));
  border: 1px solid var(--line);
}

.app-download-option > span:last-child {
  min-width: 0;
  line-height: 1.2;
}

.app-download-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 7px 14px rgba(0, 41, 48, 0.12);
}

.app-download-choice p {
  margin: 0;
  padding: 9px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.first-withdraw-layer {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 18, 20, 0.42);
  backdrop-filter: blur(8px);
}

.first-withdraw-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.first-withdraw-card {
  position: relative;
  width: min(100%, 350px);
  display: grid;
  gap: 13px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.24);
}

.first-withdraw-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.first-withdraw-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 8px;
}

.first-withdraw-card h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.first-withdraw-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.first-withdraw-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.first-withdraw-support-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.first-withdraw-support-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.first-withdraw-support-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.recharge-channel-layer {
  position: fixed;
  inset: 0;
  z-index: 37;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 18, 20, 0.42);
  backdrop-filter: blur(8px);
}

.recharge-channel-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.recharge-channel-card {
  position: relative;
  width: min(100%, 360px);
  display: grid;
  gap: 13px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.24);
}

.recharge-channel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.recharge-channel-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 8px;
}

.recharge-channel-card h2,
.recharge-channel-card p {
  margin: 0;
}

.recharge-channel-card h2 {
  padding-right: 34px;
  font-size: 21px;
  line-height: 1.2;
}

.recharge-channel-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

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

.recharge-channel-option {
  min-width: 0;
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 10px;
  color: var(--primary-dark);
  background: #ffffff;
  border: 1px solid rgba(13, 140, 152, 0.24);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0, 36, 42, 0.08);
}

.recharge-channel-option strong,
.recharge-channel-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.recharge-channel-option strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.recharge-channel-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.recharge-channel-option:disabled,
.recharge-channel-option.is-disabled {
  cursor: not-allowed;
  color: #64748b;
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.24);
  box-shadow: none;
  opacity: 0.82;
}

.recharge-channel-option:disabled span,
.recharge-channel-option.is-disabled span {
  color: #94a3b8;
}

.recharge-channel-option:active {
  transform: translateY(1px);
}

.bank-picker-layer {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(1, 18, 20, 0.42);
  backdrop-filter: blur(8px);
}

.bank-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.bank-picker-card {
  position: relative;
  width: min(100%, 420px);
  max-height: min(76vh, 620px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f4fbfa);
  border: 1px solid rgba(13, 140, 152, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(0, 36, 42, 0.24);
}

.bank-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bank-picker-head span,
.bank-picker-subhead span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bank-picker-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.bank-picker-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.bank-picker-close svg {
  width: 17px;
  height: 17px;
}

.bank-picker-search {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bank-picker-search:focus-within {
  border-color: rgba(13, 140, 152, 0.62);
  box-shadow: 0 0 0 3px rgba(13, 140, 152, 0.12);
}

.bank-picker-search svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.bank-picker-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
}

.bank-form-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.bank-picker-retry {
  display: block;
  margin: 14px auto 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.bank-picker-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-picker-results {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.bank-picker-option {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bank-picker-option:focus-visible,
.bank-picker-option:hover {
  outline: none;
  border-color: rgba(13, 140, 152, 0.48);
  box-shadow: 0 8px 18px rgba(13, 140, 152, 0.12);
}

.bank-picker-option span {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.bank-picker-option small {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.bank-picker-empty {
  padding: 28px 12px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 80;
  max-width: min(360px, calc(100% - 36px));
  transform: translate(-50%, 16px);
  padding: 11px 14px;
  color: #fff;
  background: rgba(19, 35, 37, 0.92);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-size: 13px;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.activity-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 18, 22, 0.48);
  backdrop-filter: blur(8px);
}

.activity-popup-card {
  position: relative;
  width: min(100%, 380px);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 18px 18px;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle at 16% 8%, rgba(242, 159, 61, 0.18), transparent 26%),
    linear-gradient(180deg, #ffffff, #f7fbfa);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(2, 24, 30, 0.24);
}

.activity-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #eef5f4;
  border-radius: 8px;
}

.activity-popup-close svg {
  width: 17px;
  height: 17px;
}

.activity-popup-image {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border-radius: 8px;
}

.activity-popup-card span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.activity-popup-card h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
}

.activity-popup-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
}

.activity-popup-primary {
  width: 100%;
  min-height: 44px;
  margin-top: 3px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 8px;
  font-weight: 900;
}

.activity-popup-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 0.86fr 1fr;
  gap: 8px;
}

.activity-popup-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.activity-popup-secondary svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 760px) {
  :root {
    --floating-nav-offset: 22px;
  }

  body {
    padding: 22px 0;
  }

  .app-shell {
    min-height: calc(100vh - 44px);
    border-radius: 14px;
    overflow: hidden;
  }

  .screen {
    min-height: calc(100vh - 44px);
  }

  .bottom-nav {
    bottom: 22px;
    border-radius: 0 0 14px 14px;
  }
}

@media (max-width: 520px) {
  .job-application-landing {
    min-height: calc(100vh - 104px);
    grid-template-rows: minmax(190px, 1fr) minmax(190px, 1fr);
  }

  .job-entry-card,
  .job-hero {
    background-image:
      linear-gradient(180deg, rgba(247, 255, 253, 0.98) 0%, rgba(247, 255, 253, 0.78) 62%, rgba(247, 255, 253, 0.44) 100%),
      var(--job-bg);
  }

  .job-entry-card {
    min-height: 190px;
    padding: 15px;
  }

  .job-entry-card strong {
    font-size: 19px;
  }

  .job-hero {
    min-height: 196px;
    padding: 16px;
  }

  .job-hero h2 {
    font-size: 24px;
  }

  .job-action-panel,
  .job-progress-head,
  .job-requirements div {
    align-items: stretch;
    flex-direction: column;
  }

  .job-action-panel .primary-btn,
  .job-promote-btn {
    width: 100%;
  }

  .job-status-grid,
  .job-salary-row {
    grid-template-columns: 1fr;
  }

  .floating-inbox {
    right: 12px;
  }

  .inbox-panel {
    width: calc(100vw - 24px);
  }

  .inbox-panel-body {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .company-certificate-card img {
    max-height: none;
  }

  .certificate-preview-layer {
    padding: 10px;
  }

  .certificate-preview-panel {
    width: 96vw;
    max-height: 94vh;
  }

  .invite-qr-layer {
    padding: 10px;
  }
}

@media (max-width: 360px) {
  .screen {
    padding-left: 12px;
    padding-right: 12px;
  }

  .company-certificate-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-link.company-home-link {
    grid-column: auto;
  }

  .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invite-code-actions,
  .invite-qr-actions {
    grid-template-columns: 1fr;
  }

  .brand-copy h1 {
    font-size: 24px;
  }
}

/* ARC daily check-in and Card Collection link */
.activity-checkin {
  --checkin-teal: #087b70;
  --checkin-deep: #063f45;
  --checkin-gold: #e7bd58;
  gap: 12px;
}

.activity-checkin-hero {
  position: relative;
  min-height: 330px;
  display: block;
  overflow: hidden;
  padding: 0;
  color: #ffffff;
  text-align: left;
  border: 1px solid rgba(219, 190, 105, 0.52);
  border-radius: 20px;
  background: #073f43;
  box-shadow: 0 18px 38px rgba(4, 51, 50, 0.2);
  isolation: isolate;
}

.activity-checkin-hero-image,
.activity-checkin-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.activity-checkin-hero-image {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.activity-checkin-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 37, 40, 0.94) 0%, rgba(3, 56, 58, 0.78) 57%, rgba(3, 46, 48, 0.34) 100%),
    linear-gradient(0deg, rgba(2, 35, 37, 0.74), transparent 58%);
}

.activity-checkin-brand {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  color: #073f43;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 7px 18px rgba(0, 29, 30, 0.16);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.activity-checkin-brand img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  border-radius: 50%;
}

.activity-checkin-hero-content {
  min-height: 330px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 21px 18px 18px;
}

.activity-checkin-level {
  max-width: calc(100% - 78px);
  display: flex;
  align-items: center;
  gap: 9px;
}

.activity-checkin-level > span {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  color: #063f45;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff4cc, #e7bd58);
  box-shadow: 0 8px 20px rgba(1, 26, 28, 0.22);
}

.activity-checkin-level > span svg {
  width: 21px;
  height: 21px;
}

.activity-checkin-level div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.activity-checkin-level small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 700;
}

.activity-checkin-level strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-checkin-state {
  max-width: 260px;
  margin-top: auto;
}

.activity-checkin-state h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(23px, 7.4vw, 31px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.activity-checkin-state p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.48;
}

.activity-checkin-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 13px 0 11px;
  color: #f7e8b7;
  font-size: 10px;
  font-weight: 800;
}

.activity-checkin-date svg {
  width: 14px;
  height: 14px;
}

.activity-checkin-hero button {
  width: min(100%, 255px);
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #063f45;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff5cf, #e7bd58);
  box-shadow: 0 10px 22px rgba(0, 24, 25, 0.24);
  font-size: 13px;
  font-weight: 950;
}

.activity-checkin-hero button svg {
  width: 17px;
  height: 17px;
}

.activity-checkin-hero button:disabled {
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(236, 244, 241, 0.18);
  box-shadow: none;
}

.activity-checkin-reward-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.activity-checkin-reward-grid article {
  min-width: 0;
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  color: #153a35;
  border: 1px solid #d3e6de;
  border-radius: 15px;
  background: linear-gradient(155deg, #ffffff, #eef8f4);
  box-shadow: 0 8px 20px rgba(4, 54, 44, 0.06);
}

.activity-checkin-reward-grid article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #087b70;
  border-radius: 11px;
  background: #dbf2eb;
}

.activity-checkin-reward-grid article > span svg {
  width: 18px;
  height: 18px;
}

.activity-checkin-reward-grid article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.activity-checkin-reward-grid small {
  color: #71807e;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.28;
}

.activity-checkin-reward-grid strong {
  overflow-wrap: anywhere;
  color: #075c54;
  font-size: 12px;
  line-height: 1.28;
}

.activity-checkin-reward-grid article.is-bonus {
  border-color: #dfc87f;
  background: linear-gradient(155deg, #fffdf6, #fff4cf);
}

.activity-checkin-reward-grid article.is-bonus > span {
  color: #8a6517;
  background: #f8e4a6;
}

.activity-checkin-reward-grid article.is-muted {
  filter: saturate(0.55);
  opacity: 0.76;
}

.activity-checkin-card-odds {
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 13px 14px;
  color: #153a35;
  border: 1px solid #d7e6df;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f1f9f6);
  box-shadow: 0 8px 20px rgba(4, 54, 44, 0.05);
}

.activity-checkin-card-odds > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.activity-checkin-card-odds > header > span {
  width: 35px;
  height: 35px;
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  color: #087b70;
  border-radius: 11px;
  background: #dbf2eb;
}

.activity-checkin-card-odds > header svg {
  width: 18px;
  height: 18px;
}

.activity-checkin-card-odds > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.activity-checkin-card-odds > header strong {
  font-size: 13px;
}

.activity-checkin-card-odds > header small {
  color: #71807e;
  font-size: 10px;
  line-height: 1.35;
}

.activity-checkin-card-odds dl {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.activity-checkin-card-odds dl > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 7px;
  border: 1px solid #dceae4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.activity-checkin-card-odds dl > div.is-rental {
  border-color: #dfc87f;
  background: #fff9e8;
}

.activity-checkin-card-odds dt,
.activity-checkin-card-odds dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.activity-checkin-card-odds dt {
  color: #71807e;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.25;
}

.activity-checkin-card-odds dd {
  color: #075c54;
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.activity-checkin-card-odds .is-rental dd {
  color: #8a6517;
}

.activity-checkin-how {
  display: grid;
  gap: 11px;
  padding: 14px;
  color: #153a35;
  border: 1px solid #d7e6df;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(4, 54, 44, 0.05);
}

.activity-checkin-how > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.activity-checkin-how > div > svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  color: #c28c1d;
}

.activity-checkin-how p {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 0;
}

.activity-checkin-how p strong {
  font-size: 13px;
}

.activity-checkin-how p span {
  color: #697a78;
  font-size: 11px;
  line-height: 1.45;
}

.activity-checkin-how > a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #087b70;
  border-radius: 11px;
  background: #e7f6f1;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.activity-checkin-how > a svg {
  width: 15px;
  height: 15px;
}

.activity-checkin-tier-rules {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7e6df;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(4, 54, 44, 0.05);
}

.activity-checkin-tier-rules > header {
  display: grid;
  gap: 2px;
}

.activity-checkin-tier-rules > header span {
  color: #153a35;
  font-size: 14px;
  font-weight: 900;
}

.activity-checkin-tier-rules > header p {
  margin: 0;
  color: #71807e;
  font-size: 10px;
}

.activity-checkin-tier-rules > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.activity-checkin-tier-rules article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #e0ebe6;
  border-radius: 11px;
  background: #f7fbf9;
}

.activity-checkin-tier-rules article.is-current {
  border-color: #d8bd6d;
  background: #fff9e8;
  box-shadow: inset 3px 0 #d6a93e;
}

.activity-checkin-tier-rules article > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.activity-checkin-tier-rules strong {
  color: #244741;
  font-size: 11px;
}

.activity-checkin-tier-rules small {
  padding: 2px 5px;
  color: #795715;
  border-radius: 999px;
  background: #f7e5ad;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.activity-checkin-tier-rules article > p {
  margin: 0;
  color: #087b70;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.activity-checkin-tier-rules article > span {
  color: #71807e;
  font-size: 9px;
}

.activity-checkin-rule {
  margin: 0;
  padding: 2px 5px 8px;
  color: #6d7b78;
  font-size: 10px;
  line-height: 1.55;
}

.activity-checkin-result-layer {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px;
}

.activity-checkin-result-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 25, 29, 0.67);
  backdrop-filter: blur(4px);
}

.activity-checkin-result-sheet {
  position: relative;
  width: min(100%, 430px);
  max-height: min(82vh, 680px);
  display: grid;
  justify-items: center;
  gap: 8px;
  overflow: auto;
  padding: 28px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid #e5cc82;
  border-radius: 23px 23px 15px 15px;
  background:
    radial-gradient(circle at 50% 0%, rgba(237, 198, 91, 0.22), transparent 34%),
    #ffffff;
  box-shadow: 0 -16px 44px rgba(1, 26, 30, 0.29);
}

.activity-checkin-result-burst {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #6c4d0d;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff4c8, #e7bd58);
  box-shadow: 0 10px 26px rgba(170, 118, 13, 0.24);
}

.activity-checkin-result-burst svg {
  width: 28px;
  height: 28px;
}

.activity-checkin-result-sheet > small {
  margin-top: 5px;
  color: #087b70;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.activity-checkin-result-sheet > h3 {
  margin: 0 0 5px;
  color: #153a35;
  font-size: 22px;
}

.activity-checkin-result-cash {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #d5e9e0;
  border-radius: 15px;
  background: #eef9f5;
}

.activity-checkin-result-cash > span {
  width: 39px;
  height: 39px;
  display: grid;
  flex: 0 0 39px;
  place-items: center;
  color: #087b70;
  border-radius: 12px;
  background: #d6f0e7;
}

.activity-checkin-result-cash div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.activity-checkin-result-cash small,
.activity-checkin-result-card small {
  color: #71807e;
  font-size: 10px;
}

.activity-checkin-result-cash strong {
  color: #087b70;
  font-size: 20px;
}

.activity-checkin-result-sheet ul {
  width: 100%;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-checkin-result-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e1e9e5;
  border-radius: 13px;
  background: #fbfdfc;
}

.activity-checkin-result-card > span {
  width: 40px;
  height: 48px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  color: #ffffff;
  border-radius: 8px;
  background: linear-gradient(145deg, #087b70, #07535a);
  box-shadow: 0 6px 14px rgba(5, 71, 70, 0.18);
  font-size: 17px;
  font-weight: 950;
}

.activity-checkin-result-card.is-letter > span { background: linear-gradient(145deg, #7b4c94, #4e2d66); }
.activity-checkin-result-card.is-product > span { background: linear-gradient(145deg, #c3922d, #795715); }
.activity-checkin-result-card.is-duplicate > span { filter: saturate(0.55); }
.activity-checkin-result-card > span.activity-checkin-result-product {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.activity-checkin-result-product img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-checkin-result-product::after {
  position: absolute;
  inset: 48% 0 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(4, 31, 29, 0.88));
}

.activity-checkin-result-product b {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  z-index: 2;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.activity-checkin-result-card > div { min-width: 0; display: grid; gap: 3px; }
.activity-checkin-result-card strong { color: #244741; font-size: 11px; }

.activity-checkin-result-kind {
  width: fit-content;
  padding: 2px 5px;
  color: #087b70;
  border-radius: 999px;
  background: #e0f4ed;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.activity-checkin-result-card.is-product .activity-checkin-result-kind {
  color: #795715;
  background: #f8e8b4;
}

.activity-checkin-result-sheet > p,
.activity-checkin-result-no-cards {
  margin: 3px 0;
  color: #6d7b78;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.activity-checkin-result-sheet > button:last-child {
  width: 100%;
  min-height: 43px;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #087b70, #07535a);
  font-weight: 950;
}

.floating-checkin {
  position: fixed;
  right: max(12px, calc((100vw - min(100vw, 460px)) / 2 + 12px));
  bottom: calc(152px + var(--floating-nav-offset) + env(safe-area-inset-bottom));
  z-index: 23;
  width: 74px;
  height: 86px;
}

.floating-checkin.is-drag-positioned {
  right: auto;
  bottom: auto;
}

.floating-checkin.is-dragging {
  user-select: none;
}

.floating-checkin-link {
  position: relative;
  width: 74px;
  height: 86px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  color: #ffffff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  text-decoration: none;
  filter: drop-shadow(0 11px 17px rgba(2, 48, 46, 0.24));
}

.floating-checkin-notice {
  position: absolute;
  top: 0;
  right: 1px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #e33832;
  box-shadow: 0 4px 10px rgba(117, 21, 17, 0.38);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  animation: floating-checkin-notice-blink 1.2s ease-in-out infinite;
}

@keyframes floating-checkin-notice-blink {
  0%, 45%, 100% { opacity: 1; transform: scale(1); }
  65%, 85% { opacity: 0.35; transform: scale(0.86); }
}

.floating-checkin.is-dragging .floating-checkin-link { cursor: grabbing; }

.floating-checkin-link img {
  width: 68px;
  height: 68px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
}

.floating-checkin-link span {
  max-width: 74px;
  min-height: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: -5px;
  padding: 2px 7px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: #087b70;
  box-shadow: 0 5px 12px rgba(4, 55, 52, 0.23);
  font-size: 9px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-checkin.is-claimed .floating-checkin-link {
  filter: saturate(0.67) drop-shadow(0 9px 15px rgba(3, 41, 40, 0.18));
}

.floating-checkin.is-claimed .floating-checkin-link span { background: #607873; }

.floating-checkin.is-locked .floating-checkin-link {
  filter: saturate(0.76) drop-shadow(0 9px 15px rgba(3, 41, 40, 0.2));
}

.floating-checkin.is-locked .floating-checkin-link span {
  background: #536d67;
}

.floating-checkin-link:focus-visible {
  outline: 3px solid rgba(231, 189, 88, 0.85);
  outline-offset: 3px;
  border-radius: 18px;
}

@media (max-width: 360px) {
  .activity-checkin-hero,
  .activity-checkin-hero-content { min-height: 310px; }
  .activity-checkin-hero-content { padding: 17px 14px 15px; }
  .activity-checkin-brand { top: 12px; right: 12px; }
  .activity-checkin-level { max-width: calc(100% - 70px); }
  .activity-checkin-state { max-width: 230px; }
  .activity-checkin-state h3 { font-size: 23px; }
  .activity-checkin-reward-grid { gap: 5px; }
  .activity-checkin-reward-grid article { min-height: 125px; padding: 10px 7px; }
  .activity-checkin-reward-grid article > span { width: 31px; height: 31px; }
  .activity-checkin-reward-grid strong { font-size: 10px; }
  .activity-checkin-reward-grid small { font-size: 8px; }
  .activity-checkin-result-layer { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-checkin,
  .floating-checkin-link,
  .floating-checkin-notice { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-inbox-badge:not(.hidden) {
    animation: none;
  }
}

/* GET solar frontend refresh */
:root {
  --bg: #eef7f0;
  --surface: #ffffff;
  --surface-2: #f7fbf8;
  --ink: #10231b;
  --muted: #62716b;
  --line: #d8e6dc;
  --primary: #0f7a43;
  --primary-dark: #075c34;
  --primary-soft: #e0f4e8;
  --accent: #f6c84c;
  --solar-blue: #0e4d92;
  --solar-blue-soft: #e8f2fb;
  --danger: #c74747;
  --success: #168457;
  --shadow: 0 18px 42px rgba(7, 63, 42, 0.13);
  --radius: 8px;
}

html,
body {
  background:
    linear-gradient(180deg, rgba(15, 122, 67, 0.14), rgba(14, 77, 146, 0.06) 260px, rgba(238, 247, 240, 0) 520px),
    #eef7f0;
  color: var(--ink);
  letter-spacing: 0;
}

.app-shell {
  width: min(100%, 1120px);
  background: var(--surface-2);
  box-shadow: 0 16px 48px rgba(10, 56, 38, 0.12);
}

.screen {
  padding: 18px 16px calc(92px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 18;
  margin: -18px -16px 16px;
  padding: 12px 16px;
  background: rgba(247, 251, 248, 0.92);
  border-bottom: 1px solid rgba(216, 230, 220, 0.8);
  backdrop-filter: blur(16px);
}

.home-brand-banner {
  position: sticky;
  top: 0;
  z-index: 18;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -18px -16px 16px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(135deg, #0f7a43, #0e4d92);
  box-shadow: 0 10px 22px rgba(10, 56, 38, 0.16);
}

.home-brand-banner strong {
  font-size: 18px;
  line-height: 1.2;
}

.home-brand-banner span {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.2;
}

.topbar-title h1 {
  color: #0c2a1b;
  font-size: 19px;
}

.topbar-title p {
  color: #5d6d65;
}

.brand-logo,
.topbar-logo,
.company-brand-logo,
.user-brand-logo {
  display: block;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(216, 230, 220, 0.9);
  box-shadow: 0 10px 24px rgba(11, 61, 42, 0.12);
}

.brand-logo {
  width: 76px;
  height: 76px;
  border-radius: 8px;
}

.topbar-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.icon-btn,
.primary-btn,
.secondary-btn,
.ghost-btn,
.amount-chip,
.tabbar button,
.task button,
.quick-link,
.invite-code-button,
.bank-select-button {
  border-radius: 8px;
}

.primary-btn {
  min-height: 48px;
  background: linear-gradient(135deg, #0f7a43, #0e4d92);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 14px 26px rgba(15, 122, 67, 0.22);
}

.secondary-btn,
.ghost-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 750;
}

.auth-screen {
  background:
    linear-gradient(180deg, rgba(2, 20, 19, 0.08) 0%, rgba(2, 25, 23, 0.22) 38%, rgba(2, 25, 23, 0.7) 72%, rgba(2, 18, 18, 0.94) 100%),
    var(--arc-auth-background-image, url("/assets/arc/arc-auth-background-v2.jpg")) center top / cover no-repeat;
}

.auth-panel {
  background: linear-gradient(145deg, rgba(3, 35, 31, 0.66), rgba(3, 28, 28, 0.48));
  border-color: rgba(237, 205, 119, 0.3);
}

.auth-screen .brand {
  align-items: center;
}

.auth-screen .brand-copy h1 {
  font-size: 32px;
  color: #fff;
}

.auth-screen .brand-copy p {
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 560px) and (max-height: 720px) {
  .screen.auth-screen {
    background-position: 0 0, center -140px;
  }
}

.get-media-banner,
.get-company-hero,
.charity-hero {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(216, 230, 220, 0.92);
  background: #0d3323;
  box-shadow: var(--shadow);
}

.get-home-summary,
.section,
.form-card,
.vip-stage,
.vip-info-card,
.vip-intro-card,
.user-balance-block,
.user-asset-strip,
.copy-box {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 26px rgba(10, 56, 38, 0.07);
}

.get-home-summary {
  display: block;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}

.get-home-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.get-home-account-item {
  min-width: 0;
  padding: 16px;
  background: #fff;
}

.get-home-account-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.get-home-account-item strong {
  display: block;
  margin-top: 6px;
  color: #0c2a1b;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.get-home-actions {
  margin-bottom: 14px;
}

.hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stat span {
  color: var(--muted);
  font-size: 12px;
}

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

.hero-actions a,
.hero-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  background: #0f7a43;
  font-size: 13px;
  font-weight: 800;
}

.hero-actions a:nth-child(2) {
  background: #0e4d92;
}

.get-home-actions a:nth-child(3) {
  color: #16340f;
  background: #f6c84c;
}

.get-home-actions a:nth-child(4) {
  color: #0f7a43;
  background: #e6f6ed;
}

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

.stat {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(10, 56, 38, 0.06);
}

.stat strong {
  color: #0c2a1b;
  overflow-wrap: anywhere;
}

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

.quick-link {
  min-height: 74px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #18332a;
  box-shadow: 0 8px 16px rgba(10, 56, 38, 0.06);
}

.quick-link svg {
  color: var(--primary);
}

.get-media-banner {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 0;
  margin: 14px 0;
  min-height: 178px;
  background: #fff;
}

.get-media-banner.no-image,
.get-company-hero.no-image,
.get-charity-hero.no-image {
  grid-template-columns: 1fr;
}

.get-media-banner > img {
  width: 100%;
  height: 100%;
  min-height: 178px;
  object-fit: cover;
}

.get-media-banner > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
}

.get-media-banner span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.get-media-banner strong {
  margin-top: 8px;
  color: #0c2a1b;
  font-size: 20px;
  line-height: 1.18;
}

.get-media-banner p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.section-title h2 {
  color: #0c2a1b;
  font-size: 17px;
}

.section-title a,
.section-title button {
  color: var(--primary);
  font-weight: 800;
}

.task.get-task-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 112px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(10, 56, 38, 0.07);
}

.task.get-task-card h3 {
  margin: 0 0 6px;
  color: #0c2a1b;
  font-size: 15px;
  line-height: 1.25;
}

.task.get-task-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.solar-task-thumb {
  position: relative;
  display: block;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--primary-soft);
}

.solar-task-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solar-task-thumb svg {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  padding: 4px;
  color: #fff;
  background: rgba(15, 122, 67, 0.88);
  border-radius: 8px;
}

.task.get-task-card button {
  min-width: 72px;
  min-height: 38px;
  color: #fff;
  background: var(--primary);
  font-weight: 800;
}

.task.get-task-card button:disabled {
  color: #718178;
  background: #e7eee9;
}

.badge {
  border-radius: 999px;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.tabbar {
  border: 1px solid var(--line);
  background: #edf7f1;
  border-radius: 8px;
}

.tabbar button.active,
.amount-chip.active {
  color: #fff;
  background: var(--primary);
}

.amount-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: #153d2d;
  font-weight: 800;
}

.input-wrap,
.select-wrap,
.bank-select-button {
  border-color: var(--line);
  background: #fbfdfb;
}

.notice {
  border-radius: 8px;
  border: 1px solid #dcebd6;
  background: #f3faf4;
  color: #284236;
}

.get-company-hero {
  display: grid;
  grid-template-columns: 52% 1fr;
  min-height: 300px;
  background: #092a1d;
  color: #fff;
}

.get-company-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.get-company-hero > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(135deg, rgba(7, 42, 29, 0.94), rgba(12, 67, 117, 0.84));
}

.company-brand-logo,
.user-brand-logo {
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  border-radius: 8px;
}

.get-company-hero span {
  color: #f7d66a;
  font-weight: 800;
}

.get-company-hero h2 {
  margin: 8px 0;
  font-size: 30px;
  line-height: 1.08;
}

.get-company-hero p {
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
}

.arc-company-page {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.arc-company-facts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.arc-company-facts > div {
  min-width: 0;
  padding: 10px 8px;
  background: rgba(3, 31, 29, 0.52);
}

.arc-company-facts dt,
.arc-company-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.arc-company-facts dt {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.arc-company-facts dd {
  margin-top: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.arc-company-introduction {
  gap: 14px;
}

.arc-company-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.arc-company-section-heading > span {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0f7a43, #0e4d92);
  border-radius: 8px;
}

.arc-company-section-heading svg {
  width: 21px;
  height: 21px;
}

.arc-company-section-heading small,
.arc-company-section-heading h2 {
  display: block;
  margin: 0;
}

.arc-company-section-heading small {
  color: #0f7a43;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arc-company-section-heading h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 21px;
}

.arc-company-timeline {
  min-width: 0;
  padding: 18px 16px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f5faf6);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(10, 56, 38, 0.07);
}

.arc-company-timeline-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce8df;
}

.arc-company-timeline-head small,
.arc-company-timeline-head h2,
.arc-company-timeline-head p {
  margin: 0;
}

.arc-company-timeline-head small {
  color: #0f7a43;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.arc-company-timeline-head h2 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 22px;
}

.arc-company-timeline-head p {
  max-width: 430px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.arc-company-timeline-list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
}

.arc-company-timeline-list li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 15px;
  padding: 0 0 21px;
}

.arc-company-timeline-list li::before {
  content: "";
  position: absolute;
  top: 29px;
  bottom: -1px;
  left: 30px;
  width: 2px;
  background: linear-gradient(#b7d9c2, #dce8df);
}

.arc-company-timeline-list li:last-child::before {
  display: none;
}

.arc-company-timeline-list time {
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 6px;
  color: #fff;
  background: linear-gradient(135deg, #0f7a43, #0b6152);
  border: 3px solid #edf7f0;
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(15, 122, 67, 0.17);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.arc-company-timeline-list h3,
.arc-company-timeline-list p {
  margin: 0;
  overflow-wrap: anywhere;
}

.arc-company-timeline-list h3 {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.arc-company-timeline-list p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (min-width: 760px) {
  .arc-company-introduction .help-detail-sections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .get-company-hero {
    min-height: 0;
  }

  .get-company-hero > div {
    padding: 18px;
  }

  .get-company-hero .company-brand-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
  }

  .get-company-hero > div > span {
    font-size: 11px;
    line-height: 1.35;
  }

  .get-company-hero h2 {
    margin: 6px 0;
    font-size: 25px;
  }

  .get-company-hero p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .arc-company-facts {
    margin-top: 14px;
  }

  .arc-company-facts > div {
    padding: 8px 6px;
  }

  .arc-company-facts dd {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .arc-company-timeline {
    padding: 16px 13px 6px;
  }

  .arc-company-timeline-head {
    display: grid;
    gap: 7px;
  }

  .arc-company-timeline-head p {
    text-align: left;
  }

  .arc-company-timeline-list li {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
  }

  .arc-company-timeline-list li::before {
    left: 24px;
  }

  .arc-company-timeline-list time {
    font-size: 10px;
  }
}

.company-certificate-card,
.help-detail-section,
.helpbook-row,
.record,
.member,
.row,
.income-detail-row {
  border-radius: 8px;
}

.company-certificate-image-frame {
  border-radius: 8px;
  background: #eef7f0;
}

.get-user-head {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(7, 51, 48, 0.9), rgba(180, 128, 32, 0.72)),
    url("/assets/arc/arc-auth-showroom.jpg") center / cover no-repeat;
  border-radius: 8px;
}

.get-user-head span {
  color: rgba(255, 255, 255, 0.86);
}

.bottom-nav {
  width: min(100%, 1120px);
  left: 50%;
  transform: translateX(-50%);
  border-top: 1px solid rgba(216, 230, 220, 0.94);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.bottom-nav a {
  color: #687870;
}

.bottom-nav a.active {
  color: var(--primary);
}

.bottom-nav a.active svg {
  color: var(--primary);
}

.get-charity-hero {
  display: grid;
  grid-template-columns: 48% 1fr;
  background: #fff;
}

.get-charity-hero img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.get-charity-hero > div {
  padding: 20px;
}

.get-info-image-card {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 24px rgba(10, 56, 38, 0.07);
}

.get-info-image-card figcaption {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.get-info-image-card figcaption strong {
  color: #0c2a1b;
}

.get-info-image-card figcaption span {
  color: var(--muted);
  line-height: 1.45;
}

@media (min-width: 900px) {
  .screen {
    padding: 24px 32px calc(104px + env(safe-area-inset-bottom));
  }

  .topbar {
    margin: -24px -32px 22px;
    padding: 14px 32px;
  }

  .home-brand-banner {
    margin: -24px -32px 22px;
    padding: 14px 32px;
  }

  .get-home-account-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .get-home-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quick-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .get-task-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .app-shell {
    width: 100%;
  }

  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .get-media-banner,
  .get-company-hero,
  .get-charity-hero {
    grid-template-columns: 1fr;
  }

  .get-media-banner > img {
    min-height: 160px;
    max-height: 210px;
  }

  .task.get-task-card {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .task.get-task-card > button,
  .task.get-task-card .task-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .task.get-task-card .task-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .solar-task-thumb {
    width: 68px;
    height: 68px;
  }
}

/* GET complete frontend theme */
.lucide {
  display: block;
  flex: 0 0 auto;
  stroke-width: 1.9;
  vector-effect: non-scaling-stroke;
}

.icon-btn {
  color: #0b6b3d;
  background: #ffffff;
  border-color: #cfe1d5;
  box-shadow: 0 7px 18px rgba(8, 75, 48, 0.08);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  color: #ffffff;
  background: #0f7a43;
  border-color: #0f7a43;
  outline: none;
}

.primary-btn,
.task button:not(:disabled),
.tier button:not(:disabled),
.points-exchange-row button:not(:disabled),
.wealth-order-action,
.inbox-send-button,
.activity-popup-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #0f7a43 0%, #0b6745 58%, #0e4d92 100%);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(15, 122, 67, 0.18);
}

.primary-btn:hover:not(:disabled),
.task button:hover:not(:disabled),
.tier button:hover:not(:disabled),
.points-exchange-row button:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.secondary-btn,
.ghost-btn {
  color: #075c34;
  background: #ffffff;
  border: 1px solid #cfe1d5;
  box-shadow: 0 7px 18px rgba(8, 75, 48, 0.05);
}

.hero-band,
.points-hero,
.activity-config-card,
.income-level-hero {
  color: #ffffff;
  background: linear-gradient(135deg, #075c34 0%, #0f7a43 52%, #0e4d92 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(7, 71, 47, 0.18);
}

.hero-band::before,
.points-hero::before,
.activity-config-card::before,
.income-level-hero::before {
  display: none;
}

.hero-band span,
.hero-band p,
.activity-config-card span,
.activity-config-card p {
  color: rgba(255, 255, 255, 0.84);
}

.hero-band strong,
.hero-band h2,
.activity-config-card h2 {
  color: #ffffff;
}

.section,
.form-card,
.points-rule-card,
.invite-guide-card,
.help-detail,
.job-application-page,
.wealth-detail {
  border-color: #d6e5da;
}

.section,
.form-card,
.row,
.record,
.task,
.tier,
.member,
.message,
.help-item,
.income-detail-row,
.helpbook-row,
.points-exchange-row,
.wealth-plan-card {
  background: #ffffff;
  border-color: #d6e5da;
  box-shadow: 0 8px 22px rgba(8, 75, 48, 0.055);
}

.section-title h2,
.row-main strong,
.record strong,
.task h3,
.tier h3,
.member h3,
.message h3 {
  color: #102d20;
}

.section-title a,
.section-title button,
.row-action,
.record .income,
.income-detail-row b {
  color: #0f7a43;
}

.input-wrap,
.select-wrap,
.bank-select-button,
.bank-picker-search,
.inbox-input-box {
  color: #10231b;
  background: #fbfdfb;
  border-color: #cfe1d5;
}

.input-wrap:focus-within,
.select-wrap:focus-within,
.bank-select-button:focus-visible,
.bank-picker-search:focus-within,
.inbox-input-box:focus-within {
  border-color: #0f7a43;
  box-shadow: 0 0 0 3px rgba(15, 122, 67, 0.12);
}

.input-wrap svg,
.select-wrap svg,
.bank-select-button svg,
.bank-picker-search svg {
  color: #0f7a43;
}

.notice {
  color: #5d4b16;
  background: #fff8df;
  border-color: #efdc9c;
}

.notice svg {
  color: #a87906;
}

.tabbar {
  background: #e9f2ec;
  border: 1px solid #d4e4d9;
}

.tabbar button {
  color: #617169;
  background: transparent;
  border-color: transparent;
}

.tabbar button.active {
  color: #075c34;
  background: #ffffff;
  border-color: #c9dfd1;
  box-shadow: 0 6px 16px rgba(8, 75, 48, 0.09);
}

.amount-chip {
  color: #153526;
  background: #ffffff;
  border-color: #cfe1d5;
}

.amount-chip.active,
.wealth-plan-card.active,
.row-button.is-selected {
  color: #075c34;
  background: linear-gradient(180deg, #e8f6ed, #ffffff);
  border-color: #0f7a43;
  box-shadow: inset 0 0 0 1px rgba(15, 122, 67, 0.08), 0 8px 20px rgba(15, 122, 67, 0.08);
}

.row-icon,
.user-menu-icon,
.support-contact-icon,
.first-withdraw-mark,
.recharge-channel-mark {
  color: #0f7a43;
  background: #e5f5eb;
  border: 1px solid #cce7d5;
  border-radius: 8px;
}

.row-button.is-selected .row-icon {
  color: #ffffff;
  background: #0f7a43;
  border-color: #0f7a43;
}

.support-activity-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #0f7a43, #0e4d92);
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.support-activity-icon svg {
  stroke-width: 1.9;
}

.quick-link {
  min-height: 90px;
  gap: 7px;
  color: #173a29;
  background: #ffffff;
  border-color: #d2e3d8;
  box-shadow: 0 8px 18px rgba(8, 75, 48, 0.06);
}

.quick-link > svg {
  width: 42px;
  height: 42px;
  padding: 1px;
  stroke-width: 1.45;
  color: #0f7a43;
  background: #e5f5eb;
  border: 1px solid #cce7d5;
  border-radius: 8px;
}

.quick-link:nth-child(3n + 2) > svg {
  color: #0e4d92;
  background: #e8f2fb;
  border-color: #c9dff2;
}

.quick-link:nth-child(3n) > svg {
  color: #7a5a00;
  background: #fff6d9;
  border-color: #f1dfa0;
}

.quick-link span {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bottom-nav {
  border-top-color: #d4e4d9;
  box-shadow: 0 -10px 26px rgba(8, 75, 48, 0.08);
}

.bottom-nav a {
  gap: 4px;
  color: #6a7971;
}

.bottom-nav a svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  color: #65756d;
  background: #f1f5f2;
  border: 1px solid transparent;
  border-radius: 8px;
}

.bottom-nav a.active {
  color: #0f7a43;
  background: transparent;
}

.bottom-nav a.active svg {
  color: #ffffff;
  background: #0f7a43;
  border-color: #0f7a43;
  box-shadow: 0 7px 16px rgba(15, 122, 67, 0.22);
}

.vip-rank-1,
.vip-rank-4,
.vip-rank-7 {
  --rank-a: #075c34;
  --rank-b: #2bad6d;
  --rank-fg: #ffffff;
}

.vip-rank-2,
.vip-rank-5,
.vip-rank-8 {
  --rank-a: #0e4d92;
  --rank-b: #4c91ca;
  --rank-fg: #ffffff;
}

.vip-rank-3,
.vip-rank-6,
.vip-rank-9,
.vip-rank-trial {
  --rank-a: #d3a114;
  --rank-b: #f6c84c;
  --rank-fg: #263b18;
}

.vip-stage,
.vip-info-card,
.vip-intro-card,
.vip-level-card,
.vip-income-grid div {
  color: #153526;
  background: #ffffff;
  border-color: #d4e4d9;
}

.vip-level-card.active,
.vip-feature-card {
  border-color: #0f7a43;
  background: linear-gradient(145deg, #eff9f2, #ffffff 58%, #edf5fb);
}

.vip-info-card h3,
.vip-table-head,
.task-income-head,
.wealth-rate-row.head {
  color: #ffffff;
  background: linear-gradient(135deg, #075c34, #0f7a43 58%, #0e4d92);
  border-color: #0f7a43;
}

.vip-table-row,
.task-income-row,
.wealth-rate-row {
  color: #18382a;
  background: #ffffff;
  border-color: #d8e6dc;
}

.vip-table-row:nth-child(odd),
.task-income-row:nth-child(odd) {
  background: #f4faf6;
}

.vip-card-note,
.vip-intro-card,
.points-rule-card {
  color: #344b40;
  background: #eef7f1;
  border-color: #cfe4d6;
}

.wealth-plan-card em,
.wealth-detail-title,
.wealth-order-row .row-icon {
  color: #0f7a43;
}

.wealth-plan-card:disabled,
.points-exchange-row button:disabled,
.task button:disabled,
.tier button:disabled {
  color: #89968f;
  background: #eef2ef;
  border-color: #dde5df;
  box-shadow: none;
}

.wealth-rate-table {
  border-color: #cfe1d5;
}

.points-hero {
  grid-template-columns: 60px minmax(0, 1fr);
}

.points-hero > span {
  color: #0f7a43;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(4, 48, 30, 0.16);
}

.points-exchange-row button {
  border-radius: 8px;
}

.points-rule-card h3 {
  color: #075c34;
}

.points-rule-card p {
  color: #4e6257;
}

.points-rule-list span {
  color: #0e4d92;
  background: #e8f2fb;
  border: 1px solid #cfdfef;
}

.activity-config-card {
  padding: 18px;
}

.activity-config-card img {
  max-height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.activity-page-actions button {
  color: #075c34;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.activity-page-actions button:last-child {
  color: #17340c;
  background: #f6c84c;
  border-color: #f6c84c;
}

.lucky-section {
  padding: 16px;
  background: linear-gradient(180deg, #f4faf6, #edf5fb);
  border-color: #d0e2d6;
}

.lucky-wheel-wrap {
  --wheel-center-y: 50%;
  position: relative;
  width: min(86vw, 410px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  background: #e8f2fb;
  border: 1px solid #c9dff2;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(9, 73, 49, 0.14);
}

.lucky-wheel-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(232, 246, 237, 0.72)),
    url("/assets/arc/products/rental-6-home-appliances.jpg") center / cover no-repeat;
  opacity: 0.42;
}

.lucky-wheel-bg,
.lucky-wheel-pointer-img,
.lucky-wheel-base-img,
.lucky-wheel-center-img,
.lucky-wheel-slot img,
.lucky-wheel-amount {
  display: none;
}

.lucky-wheel-pointer {
  top: 4px;
  left: 50%;
  z-index: 6;
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #17340c;
  background: #f6c84c;
  border: 4px solid #ffffff;
  border-radius: 8px;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 10px rgba(8, 75, 48, 0.2));
}

.lucky-wheel-pointer svg {
  width: 21px;
  height: 21px;
}

.lucky-wheel-disc {
  left: 50%;
  top: 50%;
  width: 88%;
  border: 9px solid #ffffff;
  outline: 3px solid #0f7a43;
  box-shadow: 0 15px 32px rgba(8, 75, 48, 0.18);
}

.lucky-wheel-slot {
  width: 72px;
  height: 64px;
  transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(calc(clamp(88px, 25vw, 124px) * -1));
  color: #102d20;
  text-shadow: none;
}

.lucky-wheel-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: rotate(calc(var(--slot-angle) * -1));
}

.lucky-wheel-prize-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #0f7a43;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(7, 58, 38, 0.13);
}

.lucky-wheel-prize-icon svg {
  width: 18px;
  height: 18px;
}

.lucky-wheel-prize-amount {
  max-width: 72px;
  padding: 2px 5px;
  color: #102d20;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.lucky-wheel-center {
  top: 50%;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
  background: linear-gradient(145deg, #0f7a43, #0e4d92);
  border: 6px solid #ffffff;
  box-shadow: 0 10px 24px rgba(7, 58, 38, 0.28), inset 0 0 0 2px rgba(246, 200, 76, 0.82);
}

.lucky-wheel-center svg {
  width: 24px;
  height: 24px;
}

.lucky-wheel-center span {
  font-size: 12px;
  font-weight: 900;
}

.lucky-wheel-center:disabled {
  opacity: 0.62;
}

.lucky-result,
.lucky-winner-feed {
  color: #173a29;
  background: #ffffff;
  border-color: #cfe1d5;
  box-shadow: 0 8px 20px rgba(8, 75, 48, 0.06);
  text-shadow: none;
}

.lucky-winner-line {
  color: #173a29;
  text-shadow: none;
}

.lucky-winner-spark {
  color: #0f7a43;
}

.lucky-prize-layer {
  background: rgba(6, 35, 24, 0.62);
  backdrop-filter: blur(7px);
}

.lucky-prize-dialog {
  background: #ffffff;
  border-color: #cfe1d5;
  box-shadow: 0 22px 48px rgba(5, 42, 28, 0.28);
}

.lucky-prize-amount {
  color: #075c34;
  background: #e8f6ed;
  border-color: #cce7d5;
  text-shadow: none;
}

.lucky-prize-image {
  width: 108px;
  height: 108px;
  padding: 8px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #d6e5da;
  border-radius: 8px;
  filter: none;
}

.lucky-prize-message {
  color: #18382a;
  text-shadow: none;
}

.lucky-prize-confirm {
  color: #ffffff;
  background: #0f7a43;
  border-color: #0f7a43;
  box-shadow: 0 8px 18px rgba(15, 122, 67, 0.2);
}

.inbox-panel,
.activity-popup-card,
.first-withdraw-card,
.recharge-channel-card,
.bank-picker-card,
.invite-qr-card,
.certificate-preview-card {
  background: #ffffff;
  border-color: #cfe1d5;
  border-radius: 8px;
  box-shadow: 0 24px 54px rgba(5, 42, 28, 0.24);
}

.inbox-panel-head,
.inbox-tabs {
  background: linear-gradient(180deg, #f4faf6, #ffffff);
  border-color: #d6e5da;
}

.inbox-brand > span,
.inbox-compose-button {
  color: #ffffff;
  background: linear-gradient(135deg, #0f7a43, #0e4d92) !important;
  border-color: transparent !important;
}

.inbox-tabs button.active,
.inbox-item.is-active,
.inbox-notice-card.is-unread {
  color: #075c34;
  background: #e8f6ed;
  border-color: #bcdcc7;
}

.recharge-channel-option,
.bank-picker-option,
.first-withdraw-support-btn {
  background: #f8fbf9;
  border-color: #d6e5da;
  border-radius: 8px;
}

.recharge-channel-option:hover:not(:disabled),
.bank-picker-option:hover,
.first-withdraw-support-btn:hover:not(:disabled) {
  color: #075c34;
  background: #e8f6ed;
  border-color: #0f7a43;
}

.user-menu-tile:nth-child(3n + 1) .user-menu-icon,
.user-menu-tile:nth-child(3n + 2) .user-menu-icon,
.user-menu-tile:nth-child(3n) .user-menu-icon {
  color: #0f7a43;
  background: #e5f5eb;
  border-color: #cce7d5;
}

.user-menu-tile:nth-child(3n + 2) .user-menu-icon {
  color: #0e4d92;
  background: #e8f2fb;
  border-color: #c9dff2;
}

.auth-screen .register-auth-panel .primary-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #0f7a43, #0e4d92);
  border-radius: 12px;
}

.auth-screen .register-auth-panel .input-wrap {
  background: rgba(2, 27, 25, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

@media (max-height: 700px) {
  .screen.register-auth-screen {
    gap: 8px;
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .register-auth-screen .brand-logo {
    width: 56px;
    height: 56px;
  }

  .register-auth-screen .brand-copy h1 {
    font-size: 26px;
  }

  .register-auth-screen .brand-copy p {
    margin-top: 3px;
    font-size: 11px;
  }

  .register-auth-panel {
    gap: 6px;
    padding: 12px;
  }

  .register-auth-panel .input-wrap {
    min-height: 40px;
  }

  .auth-registration-bonus {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .register-auth-panel .primary-btn {
    min-height: 42px;
  }

  .register-auth-screen .switch-line {
    margin-top: 0;
  }

  .register-auth-screen .legal-note {
    line-height: 1.35;
  }
}

@media (max-width: 640px) {
  .quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .quick-link {
    min-height: 90px;
    gap: 4px;
    padding: 4px 3px;
    font-size: 11px;
  }

  .quick-link > svg {
    width: 40px;
    height: 40px;
    padding: 1px;
  }

  .wealth-plan-grid {
    grid-template-columns: 1fr;
  }

  .wealth-rate-row.head {
    display: none;
  }

  .wealth-rate-row:not(.head) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .wealth-rate-row:not(.head) strong,
  .wealth-rate-row:not(.head) span {
    min-width: 0;
    padding: 8px;
    color: #18382a;
    text-align: left;
    background: #f4faf6;
    border-radius: 6px;
    overflow-wrap: normal;
    word-break: normal;
  }

  .wealth-rate-row:not(.head) strong::before,
  .wealth-rate-row:not(.head) span::before {
    display: block;
    margin-bottom: 3px;
    color: #6a7971;
    font-size: 10px;
    font-weight: 700;
  }

  .wealth-rate-row:not(.head) strong::before {
    content: "Term";
  }

  .wealth-rate-row:not(.head) span:nth-child(2)::before {
    content: "Minimum";
  }

  .wealth-rate-row:not(.head) span:nth-child(3)::before {
    content: "Income";
  }

  .wealth-rate-row:not(.head) span:nth-child(4)::before {
    content: "Rental";
  }

  .points-exchange-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .points-exchange-row button {
    width: 100%;
  }

  .lucky-wheel-slot {
    transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(calc(clamp(86px, 25vw, 106px) * -1));
  }
}

@media (max-width: 360px) {
  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lucky-wheel-center {
    width: 78px;
    height: 78px;
  }

  .lucky-wheel-slot {
    transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(-82px);
  }
}

/* GET solar tier badges */
.vip-feature-card::after {
  display: none;
}

.vip-feature-badge {
  width: 86px;
  height: 86px;
  padding: 6px;
  color: #0f7a43;
  background: #ffffff;
  border: 1px solid #c8dfd0;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(8, 75, 48, 0.14);
}

.vip-rank-icon {
  --rank-a: #0f7a43;
  --rank-b: #2cab69;
  --rank-fg: #ffffff;
  --rank-label-bg: #ffffff;
  --rank-label-fg: #075c34;
  position: relative;
  width: 38px;
  height: 38px;
  overflow: visible;
  color: var(--rank-fg);
  background: linear-gradient(145deg, var(--rank-a), var(--rank-b));
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(7, 63, 42, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.vip-rank-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}

.vip-rank-icon small {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 2;
  min-width: 20px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: var(--rank-label-fg);
  background: var(--rank-label-bg);
  border: 1px solid currentColor;
  border-radius: 5px;
  box-shadow: 0 4px 9px rgba(7, 63, 42, 0.16);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.vip-feature-badge .vip-rank-icon {
  width: 72px;
  height: 72px;
  border-radius: 8px;
}

.vip-feature-badge .vip-rank-icon svg {
  width: 36px;
  height: 36px;
}

.vip-feature-badge .vip-rank-icon small {
  right: -4px;
  bottom: -4px;
  min-width: 28px;
  height: 22px;
  font-size: 10px;
}

.vip-level-title {
  gap: 9px;
}

.vip-level-title .vip-rank-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.vip-level-title .vip-rank-icon svg {
  width: 18px;
  height: 18px;
}

.vip-level-title .vip-rank-icon small {
  right: -5px;
  bottom: -4px;
  min-width: 18px;
  height: 15px;
  padding: 0 3px;
  font-size: 7px;
}

.vip-rank-trial {
  --rank-a: #f6c84c;
  --rank-b: #eaae20;
  --rank-fg: #16451d;
  --rank-label-bg: #fff9df;
  --rank-label-fg: #6f5200;
}

.vip-rank-1 {
  --rank-a: #0f7a43;
  --rank-b: #38b875;
}

.vip-rank-2 {
  --rank-a: #0e4d92;
  --rank-b: #3388c4;
  --rank-label-fg: #0e4d92;
}

.vip-rank-3 {
  --rank-a: #d09a08;
  --rank-b: #f6c84c;
  --rank-fg: #17340c;
  --rank-label-bg: #fff9df;
  --rank-label-fg: #6f5200;
}

.vip-rank-4 {
  --rank-a: #075c34;
  --rank-b: #16915a;
}

.vip-rank-5 {
  --rank-a: #123e70;
  --rank-b: #0e6daf;
  --rank-label-fg: #0e4d92;
}

.vip-rank-6 {
  --rank-a: #4c861a;
  --rank-b: #8fbd32;
  --rank-label-fg: #3d6815;
}

.vip-rank-7 {
  --rank-a: #0a315e;
  --rank-b: #0e4d92;
  --rank-label-fg: #0e4d92;
}

.vip-rank-8 {
  --rank-a: #087147;
  --rank-b: #d1ad23;
}

.vip-rank-9 {
  --rank-a: #ad7c00;
  --rank-b: #f6c84c;
  --rank-fg: #17340c;
  --rank-label-bg: #fff9df;
  --rank-label-fg: #6f5200;
}

@media (max-width: 640px) {
  .vip-feature-badge {
    width: 78px;
    height: 78px;
    padding: 5px;
  }

  .vip-feature-badge .vip-rank-icon {
    width: 66px;
    height: 66px;
  }
}

/* GET trial action and account background */
.vip-feature-card.is-trial .vip-feature-price {
  color: #075c34;
  background: #dff4e8;
  border-color: #a9d5b8;
  box-shadow: 0 9px 18px rgba(15, 122, 67, 0.14);
}

.get-user-screen {
  color: #102d20;
  background: #eaf7ee;
}

.get-user-screen::before {
  background: none;
}

.get-user-screen .user-wallet-link,
.get-user-screen .user-balance-block strong {
  color: #0f7a43;
}

.get-user-screen .user-asset-strip {
  color: #173a29;
  background: #ffffff;
  border-color: #cfe3d5;
  box-shadow: 0 9px 22px rgba(8, 75, 48, 0.07);
  backdrop-filter: none;
}

.get-user-screen .user-asset-strip span {
  color: #62716b;
}

.get-user-screen .user-dashboard-stats .user-stat-tile {
  color: #ffffff;
  background: #78ad90;
  border-color: #6ba183;
  box-shadow: 0 9px 20px rgba(8, 75, 48, 0.12);
  backdrop-filter: none;
}

.get-user-screen .user-dashboard-stats .user-stat-tile:hover {
  background: #6fa587;
  box-shadow: 0 12px 24px rgba(8, 75, 48, 0.16);
}

.get-user-screen .user-dashboard-stats .user-stat-tile span,
.get-user-screen .user-dashboard-stats .user-stat-tile strong {
  color: #ffffff;
}

.get-user-screen .user-menu-tile {
  color: #173a29;
}

.get-user-screen .user-menu-tile:nth-child(n) .user-menu-icon {
  color: #0f7a43;
  background: #f1faf4;
  border-color: #c9e2d1;
  box-shadow: 0 8px 18px rgba(8, 75, 48, 0.08);
}

.get-user-screen .user-menu-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.7;
}

/* ARC Nigeria mobile home */
.ng-home-screen {
  --ng-navy: #102c2a;
  --ng-green: #08756e;
  --ng-green-dark: #054f4b;
  --ng-green-soft: #e5f3ef;
  --ng-muted: #6e7772;
  --ng-line: #d9ddd5;
  padding: 12px 16px calc(88px + env(safe-area-inset-bottom));
  color: var(--ng-navy);
  background: #fbfaf5;
}

.ng-home-screen .home-brand-banner {
  position: static;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px;
  padding: 0 4px;
  background: transparent;
  box-shadow: none;
}

.ng-home-screen .home-brand-banner img {
  display: block;
  width: clamp(118px, 39vw, 150px);
  height: 30px;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
}

.ng-home-invite-copy {
  min-width: 0;
  max-width: 148px;
  min-height: 36px;
  display: flex;
  flex: 0 1 148px;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 5px 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #073f2c 0%, #087847 100%);
  border: 1px solid rgba(5, 104, 60, 0.3);
  border-radius: 10px;
  box-shadow: 0 7px 16px rgba(7, 75, 47, 0.2);
  text-align: left;
}

.ng-home-invite-copy:hover {
  background: linear-gradient(135deg, #084b34 0%, #099854 100%);
  border-color: rgba(5, 104, 60, 0.42);
}

.ng-home-invite-copy:focus-visible {
  outline: 3px solid rgba(7, 153, 79, 0.2);
  outline-offset: 2px;
}

.ng-home-screen .ng-home-invite-copy > span {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
  padding-left: 0;
  color: inherit;
  border-left: 0;
  font-size: inherit;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ng-home-invite-copy small,
.ng-home-invite-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-home-invite-copy small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ng-home-invite-copy strong {
  margin-top: 2px;
  overflow: visible;
  color: #ffe39a;
  font-size: 11px;
  line-height: 1.05;
  text-overflow: clip;
}

.ng-home-invite-copy > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #fff3c9;
  stroke-width: 2;
}

.ng-home-summary {
  margin: 0 0 12px;
  padding: 10px;
  overflow: visible;
  border: 1px solid var(--ng-line);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(7, 26, 56, 0.045);
}

.ng-home-summary-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ng-home-summary .get-home-account-grid {
  display: grid;
  grid-template-columns: minmax(118px, 1.2fr) repeat(2, minmax(82px, 0.9fr));
  grid-template-areas:
    "account balance frozen"
    "vip balance frozen";
  gap: 0;
  align-items: center;
  background: transparent;
}

.ng-home-summary .get-home-account-item {
  min-width: 0;
  padding: 2px 12px;
  background: transparent;
}

.ng-home-summary .ng-account-name {
  grid-area: account;
  align-self: end;
  padding-left: 0;
}

.ng-home-summary .ng-account-vip {
  grid-area: vip;
  align-self: start;
  padding-left: 0;
}

.ng-home-summary .ng-account-balance {
  grid-area: balance;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--ng-line);
}

.ng-home-summary .ng-account-frozen {
  grid-area: frozen;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--ng-line);
}

.ng-home-summary .ng-account-name > span,
.ng-home-summary .ng-account-vip > span {
  display: none;
}

.ng-home-summary .get-home-account-item > span {
  color: var(--ng-muted);
  font-size: 11px;
  line-height: 1.2;
}

.ng-home-summary .ng-account-balance > span,
.ng-home-summary .ng-frozen-heading > span {
  color: var(--ng-muted);
  font-size: 12px;
  font-weight: 650;
}

.ng-home-summary .get-home-account-item strong {
  margin-top: 4px;
  color: var(--ng-navy);
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ng-home-summary .ng-account-name strong {
  margin: 0 0 5px;
  font-size: 18px;
}

.ng-home-summary .ng-account-vip strong {
  margin: 0;
  color: var(--ng-green);
  font-size: 13px;
  font-weight: 750;
}

.ng-home-summary .get-home-account-grid.has-multiple-rentals {
  grid-template-areas:
    "account balance frozen"
    "vip balance frozen"
    "terms terms terms";
}

.ng-home-summary .ng-account-balance strong,
.ng-home-summary .ng-account-frozen strong {
  overflow: hidden;
  color: #061b35;
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
}

.ng-home-summary .get-home-account-item strong > .notranslate {
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.ng-home-summary .ng-account-balance strong.is-long,
.ng-home-summary .ng-account-frozen strong.is-long {
  font-size: clamp(18px, 1.8vw, 21px);
}

.ng-home-summary .ng-account-balance strong.is-very-long,
.ng-home-summary .ng-account-frozen strong.is-very-long {
  font-size: clamp(14px, 1.4vw, 17px);
}

.ng-frozen-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ng-frozen-heading > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ng-frozen-rule {
  position: relative;
  flex: 0 0 auto;
}

.ng-frozen-rule summary {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  list-style: none;
  color: var(--ng-green-dark);
  background: var(--ng-green-soft);
  border: 1px solid #c7e3d1;
  border-radius: 50%;
  cursor: pointer;
}

.ng-frozen-rule summary::-webkit-details-marker {
  display: none;
}

.ng-frozen-rule summary svg {
  width: 12px;
  height: 12px;
}

.ng-frozen-rule[open] summary {
  color: #fff;
  background: var(--ng-green);
  border-color: var(--ng-green);
}

.ng-frozen-rule-popover {
  position: absolute;
  top: 24px;
  right: -8px;
  z-index: 40;
  width: min(270px, calc(100vw - 48px));
  padding: 12px 13px;
  color: var(--ng-navy);
  background: #fff;
  border: 1px solid #cfd9d3;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(7, 26, 56, 0.16);
}

.ng-frozen-rule-popover b {
  display: block;
  font-size: 13px;
}

.ng-frozen-rule-popover ul {
  margin: 7px 0 0;
  padding-left: 16px;
}

.ng-frozen-rule-popover li {
  color: var(--ng-muted);
  font-size: 11px;
  line-height: 1.4;
}

.ng-frozen-rule-popover li + li {
  margin-top: 5px;
}

.ng-home-fund-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ng-home-fund-actions a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--ng-green-dark);
  background: #fff;
  border: 1px solid var(--ng-green);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 750;
}

.ng-home-fund-actions a:last-child {
  color: var(--ng-navy);
  border-color: #aeb9c7;
}

.ng-home-fund-actions svg {
  width: 16px;
  height: 16px;
}

.ng-home-income-card {
  margin: 0 0 12px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--ng-line);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(7, 26, 56, 0.045);
}

.ng-home-income-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 1px 8px;
}

.ng-home-income-card-head strong {
  color: var(--ng-navy);
  font-size: 14px;
  line-height: 1.2;
}

.ng-home-income-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ng-muted);
  font-size: 10px;
  line-height: 1.2;
}

.ng-home-income-card-head svg {
  width: 12px;
  height: 12px;
}

.ng-home-income-card .profit-reference-image {
  margin: 0;
  overflow: hidden;
  background: #f5f9f6;
  border-color: #d8e5dc;
  border-radius: 9px;
  box-shadow: none;
}

.ng-home-income-card .profit-reference-image img {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
}

.ng-home-income-card .profit-reference-image > span {
  right: 8px;
  bottom: 8px;
  color: #ffffff;
  background: rgba(7, 26, 56, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 5px 14px rgba(7, 26, 56, 0.2);
}

.ng-home-income-card .profit-reference-image:focus-visible {
  outline: 3px solid rgba(7, 153, 79, 0.28);
  outline-offset: 2px;
}

.ng-home-rental-guide-card {
  width: 100%;
  max-width: 460px;
  min-width: 0;
  margin: 14px auto 0;
  padding: 10px;
  overflow: hidden;
}

.ng-home-rental-guide-card .profit-reference-image img {
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
}

.ng-home-activity-feed {
  min-height: 44px;
  display: grid;
  align-items: center;
  contain: layout paint style;
  overflow: hidden;
  margin: -4px 0 12px;
  padding: 5px 10px;
  color: var(--ng-navy);
  background: #ffffff;
  border: 1px solid var(--ng-line);
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(7, 26, 56, 0.04);
}

.ng-home-activity-feed[hidden] {
  display: none;
}

.ng-home-activity-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.25;
}

.ng-home-activity-feed.is-animating .ng-home-activity-line {
  animation: ng-home-activity-enter 420ms ease-out both;
}

.ng-home-activity-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #087847;
  background: #e8f7ef;
  border-radius: 8px;
}

.ng-home-activity-icon.is-withdraw {
  color: #0d4a82;
  background: #eaf3fb;
}

.ng-home-activity-icon.is-vip-upgrade {
  color: #765407;
  background: #fff4d3;
}

.ng-home-activity-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.ng-home-activity-copy {
  min-width: 0;
  overflow: hidden;
  color: #516078;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-home-activity-copy b {
  margin-right: 4px;
  color: var(--ng-navy);
  font-weight: 800;
}

.ng-home-activity-line > strong {
  min-width: 0;
  color: #087847;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.ng-home-activity-line.is-withdraw > strong {
  color: #0d4a82;
}

@keyframes ng-home-activity-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ng-home-activity-feed.is-animating .ng-home-activity-line {
    animation: none;
  }
}

.ng-task-guide {
  margin: 0 0 14px;
  padding: 9px;
  background: #fbfffc;
  border: 1px solid #cce7d6;
  border-radius: 13px;
}

.ng-task-guide > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ng-task-guide > header strong {
  color: var(--ng-green-dark);
  font-size: 14px;
}

.ng-task-guide > header button,
.ng-task-guide-collapsed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  color: var(--ng-green-dark);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.ng-task-guide > header svg,
.ng-task-guide-collapsed svg {
  width: 15px;
  height: 15px;
}

.ng-task-guide > header button svg {
  transform: rotate(180deg);
}

.ng-task-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e0ece4;
  border-radius: 11px;
  background: #fff;
}

.ng-task-guide-step {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 3px 5px;
  align-content: center;
  padding: 7px 6px;
}

.ng-task-guide-step + .ng-task-guide-step {
  border-left: 1px solid #e5ece7;
}

.ng-guide-number {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ng-green);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.ng-guide-icon {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  align-self: center;
  margin-top: 12px;
  color: var(--ng-green);
}

.ng-guide-icon svg {
  width: 18px;
  height: 18px;
}

.ng-task-guide-step > div {
  min-width: 0;
  align-self: center;
  margin-top: 10px;
}

.ng-task-guide-step strong,
.ng-task-guide-step small {
  display: block;
}

.ng-task-guide-step strong {
  color: var(--ng-navy);
  font-size: 10px;
  line-height: 1.15;
}

.ng-task-guide-step small {
  margin-top: 3px;
  color: var(--ng-muted);
  font-size: 8px;
  line-height: 1.2;
}

.ng-task-guide-collapsed {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  margin: 0 0 16px;
  background: var(--ng-green-soft);
  border: 1px solid #d4e9dc;
  border-radius: 12px;
}

.ng-home-tasks {
  margin: 0;
}

.ng-home-tasks-head {
  margin-bottom: 10px;
}

.ng-home-tasks-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.ng-home-tasks-head h1 {
  margin: 0;
  color: var(--ng-navy);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.ng-home-tasks-head > div > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--ng-green-dark);
  background: var(--ng-green-soft);
  border: 1px solid #cee7d7;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.ng-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ng-task-list > .empty {
  grid-column: 1 / -1;
}

.ng-task-row {
  min-width: 0;
  position: relative;
  min-height: 184px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ng-line);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(7, 26, 56, 0.035);
}

.ng-task-row.is-recommended {
  border-color: #55bd83;
  box-shadow: 0 6px 18px rgba(7, 153, 79, 0.08);
}

.ng-task-visual {
  min-width: 0;
  min-height: 149px;
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 10px 10px;
  background: #e8efeb;
}

.ng-task-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 24, 35, 0.02) 20%, rgba(3, 24, 35, 0.18) 52%, rgba(3, 24, 35, 0.88) 100%);
}

.ng-task-thumb {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #e8efeb;
}

.ng-task-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.ng-task-main {
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: left;
}

.ng-task-main h3 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.ng-task-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 9.5px;
  line-height: 1;
}

.ng-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.ng-task-meta span + span::before {
  content: "·";
  margin-right: 1px;
  color: rgba(255, 255, 255, 0.64);
  font-weight: 800;
}

.ng-task-meta svg {
  width: 12px;
  height: 12px;
}

.ng-task-main .task-progress {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.ng-task-main .task-progress i {
  display: block;
  height: 100%;
  background: var(--ng-green);
  border-radius: inherit;
}

.ng-task-main .task-progress-text {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 8.5px;
}

.ng-task-earn {
  min-width: 0;
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(3, 24, 35, 0.14);
  backdrop-filter: blur(4px);
}

.ng-task-earn > strong {
  display: block;
  color: var(--ng-green);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ng-task-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--ng-line);
}

.ng-task-actions.has-multiple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ng-task-action {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 5px;
  color: #fff;
  background: var(--ng-green);
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 750;
}

.ng-task-action + .ng-task-action {
  border-left: 1px solid rgba(255, 255, 255, 0.42);
}

.ng-task-action svg {
  width: 13px;
  height: 13px;
}

.ng-task-action.is-secondary {
  color: var(--ng-green-dark);
  background: #fff;
  box-shadow: inset -1px 0 0 var(--ng-line);
}

.ng-task-action.is-running,
.ng-task-action.is-complete,
.ng-task-action.is-locked {
  color: #69778a;
  background: #f8faf9;
}

.ng-task-action.is-complete {
  color: var(--ng-green-dark);
  background: var(--ng-green-soft);
}

.ng-task-row.is-locked .ng-task-thumb {
  opacity: 0.7;
}

.ng-task-security {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
  padding: 9px 12px;
  color: var(--ng-muted);
  background: #fbfdfc;
  border: 1px solid #dce9e1;
  border-radius: 11px;
  font-size: 10px;
  text-align: center;
}

.ng-task-security svg {
  width: 18px;
  height: 18px;
  color: var(--ng-green);
}

.bottom-nav {
  width: min(100%, 460px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  border-top-color: #dde4e9;
  box-shadow: 0 -8px 24px rgba(7, 26, 56, 0.07);
}

.bottom-nav a {
  min-height: 58px;
  height: auto;
  gap: 4px;
  color: #637087;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
}

.bottom-nav a span {
  max-width: 78px;
}

.bottom-nav a svg {
  width: 27px;
  height: 27px;
  padding: 3px;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.bottom-nav a.active {
  color: var(--ng-green, #07994f);
  background: transparent;
}

.bottom-nav a.active svg {
  color: currentColor;
  background: transparent;
  border: 0;
  box-shadow: none;
  fill: rgba(7, 153, 79, 0.08);
}

html:has(.ng-home-screen),
body:has(.ng-home-screen) {
  scrollbar-width: none;
}

html:has(.ng-home-screen)::-webkit-scrollbar,
body:has(.ng-home-screen)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (max-width: 420px) {
  .ng-home-summary {
    padding: 10px;
  }

  .ng-home-summary-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .ng-home-summary .get-home-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "account vip"
      "balance frozen";
  }

  .ng-home-summary .get-home-account-grid.has-multiple-rentals {
    grid-template-areas:
      "account vip"
      "terms terms"
      "balance frozen";
  }

  .ng-home-summary .get-home-account-item {
    padding-inline: 10px;
  }

  .ng-home-summary .ng-account-name,
  .ng-home-summary .ng-account-vip {
    align-self: center;
    padding-left: 0;
  }

  .ng-home-summary .ng-account-name strong {
    margin: 0;
    font-size: 17px;
  }

  .ng-home-summary .ng-account-vip {
    text-align: right;
  }

  .ng-home-summary .ng-account-balance,
  .ng-home-summary .ng-account-frozen {
    min-height: 86px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--ng-line);
  }

  .ng-home-summary .ng-account-balance {
    border-left: 0;
  }

  .ng-home-summary .ng-account-balance strong,
  .ng-home-summary .ng-account-frozen strong {
    font-size: clamp(19px, 5.6vw, 22px);
  }

  .ng-home-summary .ng-account-balance strong.is-long,
  .ng-home-summary .ng-account-frozen strong.is-long {
    font-size: clamp(15px, 4.4vw, 17px);
  }

  .ng-home-summary .ng-account-balance strong.is-very-long,
  .ng-home-summary .ng-account-frozen strong.is-very-long {
    font-size: clamp(12px, 3.8vw, 15px);
  }

  .ng-home-tasks-head {
    margin-bottom: 9px;
  }

  .ng-home-tasks-head h1 {
    font-size: 25px;
  }

  .ng-home-tasks-head > div {
    gap: 7px;
  }

  .ng-home-tasks-head > div > span {
    padding-inline: 8px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .ng-home-screen {
    padding-inline: 12px;
  }

  .ng-home-summary {
    padding: 10px;
  }

  .ng-home-summary-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .ng-home-summary .get-home-account-item {
    padding-inline: 8px;
  }

  .ng-home-summary .ng-account-name,
  .ng-home-summary .ng-account-vip {
    padding-left: 0;
  }

  .ng-home-summary .ng-account-name strong {
    font-size: 16px;
  }

  .ng-home-summary .ng-account-vip strong {
    font-size: 11px;
  }

  .ng-home-tasks-head {
    margin-bottom: 8px;
  }

  .ng-home-tasks-head h1 {
    font-size: 23px;
  }

  .ng-home-tasks-head > div {
    gap: 6px;
  }

  .ng-home-tasks-head > div > span {
    padding-inline: 7px;
    font-size: 9px;
  }

  .ng-task-list {
    gap: 8px;
  }

  .ng-task-row {
    min-height: 178px;
  }

  .ng-task-visual {
    min-height: 143px;
    padding-inline: 8px;
  }
}

@media (max-width: 340px) {
  .ng-home-fund-actions a {
    min-height: 34px;
  }

  .ng-home-tasks-head {
    margin-bottom: 8px;
  }

  .ng-home-tasks-head h1 {
    font-size: 20px;
    white-space: nowrap;
  }

  .ng-home-tasks-head > div > span {
    padding-inline: 6px;
    font-size: 8px;
  }

  .ng-task-row {
    min-height: 174px;
  }

  .ng-task-visual {
    min-height: 139px;
    padding-inline: 7px;
  }

  .ng-task-meta {
    gap: 3px;
    font-size: 8.5px;
  }

  .ng-task-meta span {
    gap: 3px;
  }

  .ng-task-action {
    font-size: 10px;
  }
}

/* ARC Nigeria mobile VIP */
.ng-vip-screen {
  --ng-navy: #102c2a;
  --ng-green: #08756e;
  --ng-green-dark: #054f4b;
  --ng-green-soft: #e5f3ef;
  --ng-muted: #6e7772;
  --ng-line: #d9ddd5;
  padding: 12px max(16px, calc((100% - 460px) / 2)) calc(92px + env(safe-area-inset-bottom));
  color: var(--ng-navy);
  background: #fbfaf5;
}

.ng-vip-screen .home-brand-banner {
  position: static;
  min-height: 30px;
  justify-content: flex-start;
  margin: 0 0 20px;
  padding: 0 4px;
  background: transparent;
  box-shadow: none;
}

.ng-vip-screen .home-brand-banner img {
  display: block;
  width: 150px;
  height: 30px;
  object-fit: contain;
}

.ng-vip-head {
  margin: 0 0 15px;
}

.ng-vip-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ng-vip-title-row h1,
.ng-vip-head p,
.ng-vip-next-card h2,
.ng-vip-next-card p,
.ng-vip-compare h2,
.ng-vip-rule-body p {
  margin: 0;
}

.ng-vip-title-row h1 {
  color: var(--ng-navy);
  font-size: clamp(28px, 7.6vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 850;
}

.ng-vip-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 5px 12px;
  color: var(--ng-green-dark);
  background: #fff;
  border: 1px solid var(--ng-green);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
}

.ng-vip-head p {
  margin-top: 8px;
  color: var(--ng-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ng-vip-next-card {
  padding: 16px;
  background: #f5fbf7;
  border: 2px solid var(--ng-green);
  border-radius: 15px;
  box-shadow: 0 9px 24px rgba(7, 26, 56, 0.045);
}

.ng-vip-next-card:not(.is-recommended) {
  background: #fff;
  border-color: #cadbd1;
}

.ng-vip-next-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.ng-vip-next-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ng-green);
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0.055em;
  font-weight: 900;
}

.ng-vip-next-card h2 {
  color: var(--ng-navy);
  font-size: clamp(35px, 10vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 880;
}

.ng-vip-next-price {
  min-width: 0;
  text-align: right;
}

.ng-vip-next-price span,
.ng-vip-next-price strong {
  display: block;
}

.ng-vip-next-price span {
  color: var(--ng-muted);
  font-size: 12px;
  line-height: 1.2;
}

.ng-vip-next-price strong {
  margin-top: 4px;
  color: var(--ng-green);
  font-size: clamp(19px, 5.5vw, 24px);
  line-height: 1.1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ng-vip-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #d5e2da;
  border-radius: 11px;
}

.ng-vip-metrics > div {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  text-align: center;
}

.ng-vip-metrics > div:nth-child(odd) {
  border-right: 1px solid #d5e2da;
}

.ng-vip-metrics > div:nth-child(-n + 2) {
  border-bottom: 1px solid #d5e2da;
}

.ng-vip-metrics span {
  color: var(--ng-muted);
  font-size: 11px;
  line-height: 1.18;
}

.ng-vip-metrics strong {
  display: block;
  margin: 3px 0;
  color: var(--ng-green);
  font-size: clamp(21px, 6vw, 27px);
  line-height: 1.05;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ng-vip-metrics > .ng-vip-100-day strong {
  font-size: clamp(16px, 4.6vw, 22px);
  letter-spacing: -0.025em;
}

.ng-vip-card-note {
  margin-top: 13px !important;
  color: #526076;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.ng-vip-primary {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 16px;
  color: #fff;
  background: var(--ng-green);
  border: 1px solid var(--ng-green);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(7, 153, 79, 0.16);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 850;
  text-align: center;
}

.ng-vip-primary:hover {
  background: var(--ng-green-dark);
  border-color: var(--ng-green-dark);
}

.ng-vip-primary:active {
  transform: translateY(1px);
}

.ng-vip-primary.is-disabled,
.ng-vip-primary:disabled {
  color: #728093;
  background: #f4f6f5;
  border-color: #dfe5e2;
  box-shadow: none;
  cursor: default;
}

.ng-vip-compare {
  margin-top: 22px;
}

.arc-rental-level-card { position: relative; isolation: isolate; display: grid; gap: 10px; width: 100%; min-width: 0;
  overflow: hidden; padding: 14px; text-align: left; color: #fff9e9; background: #073c32; border: 1px solid #bba26d;
  border-radius: 16px; box-shadow: 0 5px 15px #0a574014; font: inherit; cursor: pointer; }
.arc-rental-card-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.arc-rental-level-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, #032d27fa 0%, #032d27eb 39%, #032d2720 77%), linear-gradient(90deg, #043b31f2 0%, #043b31d9 37%, #043b311a 78%); }
.arc-rental-level-card:focus-visible { outline: 3px solid #c89b3c; outline-offset: 3px; }
.arc-rental-level-card:active:not(:disabled) { transform: translateY(1px); }
.arc-rental-level-card.is-active { border-color: #129f7a; box-shadow: 0 0 0 1px #129f7a; cursor: default; opacity: 1; }
.arc-rental-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 50px; }
.arc-rental-card-head > span:first-child { display: grid; gap: 5px; min-width: 0; max-width: 65%; }
.arc-rental-card-head strong { color: #fff4d0; font-size: 24px; line-height: 1.1; text-shadow: 0 1px 4px #002b24; }
.arc-rental-card-head span span { font-size: 12px; line-height: 1.35; color: #eff6eb; text-shadow: 0 1px 4px #002b24; }
.arc-rental-card-term { flex-shrink: 0; padding: 4px 8px; border: 1px solid #ffedc26b; border-radius: 20px;
  color: #fff4d1; background: #123a30e6; font-size: 10px; line-height: 1.4; font-weight: 700; }
.arc-rental-card-economics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.arc-rental-card-economics > span { display: grid; gap: 4px; min-width: 0; }
.arc-rental-card-economics > span + span { padding-left: 8px; border-left: 1px solid #d4e4d936; }
.arc-rental-card-economics small { color: #e1eee5; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.arc-rental-card-economics strong { color: #fff9e9; font-size: clamp(23px, 6.2vw, 27px); line-height: 1.3; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.025em; }
.arc-rental-card-economics strong.is-medium-amount { font-size: clamp(19px, 5.1vw, 24px); }
.arc-rental-card-economics strong.is-long-amount { font-size: clamp(16px, 4.25vw, 20px); }
.arc-rental-card-economics > span + span strong { color: #ffe097; }
.arc-vip-income-note { margin: 0 0 12px; color: #5a7565; font-size: 11px; line-height: 1.45; }
.arc-deposit-quick { display: grid; gap: 9px; margin-bottom: 14px; }
.arc-deposit-quick > span { color: #527367; font-size: 12px; }
.arc-deposit-amount-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arc-deposit-amount-grid button { display: grid; gap: 3px; place-content: center; min-width: 0; min-height: 60px; padding: 8px 4px;
  border: 1px solid #c7ddd2; border-radius: 10px; color: #095645; background: #f1f8f4; text-align: center; }
.arc-deposit-amount-grid small { font-size: 10px; color: #5d786b; }
.arc-deposit-amount-grid strong { font-size: clamp(16px, 4.5vw, 21px); line-height: 1.2; font-weight: 850; white-space: nowrap; letter-spacing: -.02em; }
.arc-deposit-amount-grid button[aria-pressed="true"] { color: #fff4ce; background: #08644f; border-color: #b19547; box-shadow: 0 0 0 1px #b19547; }
.arc-deposit-amount-grid button[aria-pressed="true"] small { color: #e4eee5; }
.arc-deposit-amount-grid button:focus-visible { outline: 3px solid #c89b3c; outline-offset: 2px; }
.arc-rental-card-refund { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px; border-radius: 7px; background: #d3f7dc14; color: #e5f6e6; font-size: 10px; line-height: 1.4; }
.arc-rental-card-refund svg { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 1px; color: #e7d699; }
.arc-rental-card-footer { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding-top: 9px;
  border-top: 1px solid #dce9e132; color: #dcebe1; font-size: 10px; line-height: 1.4; }
.arc-rental-card-footer strong { display: inline-flex; align-items: center; gap: 5px; color: #fff0bf; font-size: 11px; }
.arc-rental-card-footer svg { flex-shrink: 0; width: 15px; height: 15px; }
.arc-rental-pending-banner { display: flex; gap: 12px; justify-content: space-between; width: 100%; margin-bottom: 12px; padding: 12px; color: #785608; background: #fff4ce; border: 1px solid #e8cf85; border-radius: 10px; font: inherit; font-size: 13px; }
.arc-rental-checkout-layer { position: fixed; inset: 0; z-index: 72; display: grid; align-items: center; justify-items: center; padding: 16px; background: #001d2466; backdrop-filter: blur(5px); }
.arc-rental-checkout-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.arc-rental-checkout-card { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border-radius: 18px; background: #fff; color: #163d32; box-shadow: 0 20px 70px #001e2840; }
.arc-rental-checkout-card h2 { margin: 4px 28px 14px 0; font-size: 23px; line-height: 1.2; }
.arc-rental-checkout-card p { font-size: 13px; line-height: 1.55; }
.arc-checkout-close { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #edf5f1; color: #477165; border: 0; font-size: 25px; }
.arc-checkout-product { font-weight: 750; }
.arc-checkout-amounts { display: grid; gap: 9px; margin: 16px 0; }
.arc-checkout-amounts div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.arc-checkout-amounts dt { color: #617b70; }
.arc-checkout-amounts dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.arc-checkout-amounts .is-total { border-top: 1px solid #d7e5dc; padding-top: 12px; align-items: center; }
.arc-checkout-amounts .is-total dd { color: #00724b; font-size: 26px; }
.arc-rental-checkout-card .arc-checkout-fineprint { color: #6a7e74; font-size: 11px; }
.arc-checkout-actions { display: grid; gap: 8px; margin-top: 18px; }
.arc-checkout-primary, .arc-checkout-secondary { display: block; width: 100%; padding: 13px 10px; border: 0; border-radius: 10px; font: inherit; text-align: center; text-decoration: none; font-weight: 750; font-size: 14px; }
.arc-checkout-primary { background: #06734d; color: #fff; }
.arc-checkout-secondary { background: #eef5f0; color: #426b59; }
.arc-rental-checkout-card button:disabled { opacity: .55; cursor: wait; }
.arc-rental-checkout-card .arc-checkout-error { padding: 10px; color: #8b3425; background: #fff1eb; border-radius: 8px; }

/* Dedicated daily task and VIP purchase pages. */
.arc-home-direct-referral { margin: 16px 0 160px; overflow: hidden; border: 1px solid #c9ab63; border-radius: 18px; background: #043d31; }
.arc-home-direct-referral .profit-reference-image { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; }
.arc-home-direct-referral .profit-reference-image img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.arc-home-direct-referral .profit-reference-image > span { top: 10px; bottom: auto; right: 10px; color: #f5d48a; background: #043d31cc; border-color: #c9ab6380; }
.arc-home-direct-referral .profit-reference-image:focus-visible { outline: 3px solid #f7d883; outline-offset: -4px; }
.arc-home-vip-entry { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; min-height: 128px;
  margin: 14px 0; padding: 18px 20px; border: 1px solid #cfb467; border-radius: 18px; text-align: left; overflow: hidden;
  color: #fff8de; background: #043e32; box-shadow: 0 8px 22px #063d3129, inset 0 0 0 1px #f5da8b22; cursor: pointer; font: inherit; }
.arc-home-vip-art { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.arc-home-vip-entry::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #032f286e, #032f2824 53%, transparent 70%); pointer-events: none; }
.arc-home-vip-copy { display: grid; gap: 8px; min-width: 0; width: 60%; padding-bottom: 20px; text-shadow: 0 2px 8px #001e22; }
.arc-home-vip-copy strong { color: #fff3cb; font-size: clamp(23px, 6.2vw, 27px); line-height: 1.1; font-weight: 850; letter-spacing: -.025em; }
.arc-home-vip-copy > span { max-width: 175px; color: #e1ece1; font-size: 11px; line-height: 1.45; }
.arc-home-vip-arrow { position: absolute; left: 20px; bottom: 13px; display: grid; place-items: center; width: 31px; height: 20px;
  color: #f4d488; border: 1px solid #d5b56c80; border-radius: 20px; background: #e6c98515; }
.arc-home-vip-arrow svg { width: 18px; height: 18px; }
.arc-home-vip-entry:focus-visible, .arc-task-vip-link:focus-visible { outline: 3px solid #be8c25; outline-offset: 3px; }
.arc-task-earnings-head { margin: 8px 0 16px; }
.arc-task-earnings-head h1 { margin: 0 0 9px; color: #082e35; font-size: 28px; line-height: 1.15; }
.arc-task-earnings-head p { margin: 0 0 8px; color: #3e655b; font-size: 13px; line-height: 1.55; }
.arc-task-earnings-head small { display: block; color: #718177; font-size: 11px; line-height: 1.5; }
.arc-task-earnings-total { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 18px; padding: 14px 16px; border: 1px solid #c8dfd3; border-radius: 14px; background: #eef8f1; }
.arc-task-earnings-total span { font-size: 13px; color: #43685c; }
.arc-task-earnings-total strong { color: #007864; font-size: 26px; font-weight: 850; }
.ng-task-earnings-screen .ng-home-tasks-head h2 { margin: 0; color: #073338; font-size: 23px; }
.arc-task-earnings-guides { display: grid; gap: 16px; margin-top: 24px; }
.arc-task-earnings-guides .ng-home-income-card { margin: 0; }
.arc-task-earnings-guides .profit-reference-image img { display: block; width: 100%; max-height: none; height: auto; object-fit: contain; }
.arc-task-vip-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 14px; padding: 13px; border: 0; border-radius: 12px; background: #086552; color: white; font: inherit; cursor: pointer; }
html.arc-vip-checkout-open, .arc-vip-checkout-open body { overflow: hidden; }
.arc-vip-page-open .floating-inbox, .arc-vip-page-open .floating-checkin { visibility: hidden; }
.arc-vip-page-open .recharge-channel-layer { z-index: 74; }
.arc-vip-page-open .certificate-preview-layer { z-index: 80; }
.arc-vip-purchase-page { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.arc-vip-page-header { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid #d9e6dd; }
.arc-vip-page-header button { display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 8px 10px 8px 4px;
  border: 1px solid #c9ded1; border-radius: 10px; background: #fff; color: #145c48; font: inherit; font-size: 12px; font-weight: 700; }
.arc-vip-page-header button svg { width: 18px; height: 18px; }
.arc-vip-page-header button:focus-visible { outline: 3px solid #be8c25; outline-offset: 2px; }
.arc-vip-page-header h1 { flex: 1; margin: 0; color: #0e3b32; font-size: clamp(21px, 5.8vw, 25px); line-height: 1.15; }
.arc-vip-page-crown { display: grid; place-items: center; color: #a47b23; }
.arc-vip-purchase-content .ng-vip-compare { margin-top: 14px; }
.arc-vip-purchase-content .ng-vip-title-row { flex-wrap: wrap; gap: 6px; }
.arc-vip-purchase-content .ng-vip-title-row > strong { font-size: 15px; }
.arc-vip-purchase-content .ng-vip-head p { margin-top: 8px; color: #5a7565; font-size: 12px; line-height: 1.5; }
.arc-vip-purchase-content .arc-rental-level-card { scroll-margin-top: 12px; scroll-margin-bottom: calc(92px + env(safe-area-inset-bottom)); }
.arc-account-service-card[href="#/vip?from=user"] { grid-column: 1 / -1; min-height: 85px; grid-template-rows: auto;
  grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; align-content: center;
  border-color: #cfb467; background: linear-gradient(105deg, #fff9e7, #eef7ef); }
.arc-account-service-card[href="#/vip?from=user"] .arc-account-service-copy { grid-column: 2; }
.arc-account-service-card[href="#/vip?from=user"] .arc-account-service-copy strong { font-size: 17px; }
.arc-account-service-card[href="#/vip?from=user"] > .arc-account-service-arrow { position: static; }
.bottom-nav a[href="#/rentals"] > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; font-size: 10px; line-height: 1.15; }
@media (max-width: 350px) {
  .arc-home-vip-entry { padding: 17px 14px; min-height: 120px; }
  .arc-home-vip-copy { width: 61%; }
  .arc-home-vip-copy strong { font-size: 22px; }
  .arc-home-vip-arrow { left: 14px; }
  .arc-vip-purchase-content { padding-inline: 8px; }
  .arc-vip-purchase-content .arc-rental-level-card { padding: 12px; }
  .arc-vip-purchase-content .arc-rental-card-economics { gap: 5px; }
  .arc-vip-purchase-content .arc-rental-card-economics > span + span { padding-left: 5px; }
}

.ng-vip-compare h2 {
  margin-bottom: 6px;
  color: var(--ng-navy);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 850;
}

.ng-vip-level-list {
  min-width: 0;
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ng-vip-level-list::-webkit-scrollbar {
  display: none;
}

.ng-vip-level-row {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) 18px;
  align-items: center;
  column-gap: 10px;
  overflow: hidden;
  padding: 12px;
  color: var(--ng-navy);
  background: #f8fbf8;
  border: 1px solid rgba(13, 91, 76, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(7, 46, 41, 0.08);
}

.ng-vip-level-row::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(252, 255, 252, 0.99) 0%, rgba(252, 255, 252, 0.95) 42%, rgba(252, 255, 252, 0.66) 68%, rgba(7, 75, 68, 0.12) 100%);
}

.ng-vip-level-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.015);
}

.ng-vip-level-row.is-selected {
  min-height: 98px;
  padding-bottom: 23px;
  color: var(--ng-green-dark);
  border-color: #c7a349;
  box-shadow: 0 10px 25px rgba(7, 95, 85, 0.14), inset 0 0 0 2px rgba(199, 163, 73, 0.38);
}

.ng-vip-level-row.is-selected::before {
  background: linear-gradient(90deg, rgba(238, 251, 244, 0.99) 0%, rgba(238, 251, 244, 0.94) 43%, rgba(238, 251, 244, 0.57) 70%, rgba(198, 157, 57, 0.14) 100%);
}

.ng-vip-level-row.is-current:not(.is-selected)::before {
  background: linear-gradient(90deg, rgba(244, 253, 248, 0.99) 0%, rgba(244, 253, 248, 0.94) 42%, rgba(244, 253, 248, 0.61) 69%, rgba(7, 117, 102, 0.12) 100%);
}

.ng-vip-level-row:focus-visible,
.ng-vip-primary:focus-visible,
.ng-vip-rule summary:focus-visible {
  outline: 3px solid rgba(7, 153, 79, 0.24);
  outline-offset: -2px;
}

.ng-vip-list-level {
  font-size: 15px;
  line-height: 1.1;
  font-weight: 850;
  white-space: nowrap;
}

.ng-vip-list-main,
.ng-vip-list-money {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.ng-vip-list-main {
  align-items: flex-start;
}

.ng-vip-list-money {
  align-items: flex-end;
  padding: 6px 7px;
  text-align: right;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  box-shadow: 0 3px 12px rgba(12, 49, 43, 0.06);
}

.ng-vip-list-price,
.ng-vip-list-tasks,
.ng-vip-list-daily {
  color: #4f5d72;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 650;
}

.ng-vip-list-price,
.ng-vip-list-daily {
  white-space: nowrap;
}

.ng-vip-list-tasks {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ng-vip-level-row.is-selected .ng-vip-list-price,
.ng-vip-level-row.is-selected .ng-vip-list-tasks,
.ng-vip-level-row.is-selected .ng-vip-list-daily {
  color: #385b4a;
}

.ng-vip-list-icon {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  color: #526076;
}

.ng-vip-list-icon svg {
  width: 17px;
  height: 17px;
}

.ng-vip-level-row.is-selected .ng-vip-list-icon {
  color: var(--ng-green);
}

.ng-vip-level-row small {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 2px;
  padding: 2px 7px;
  color: var(--ng-green-dark);
  background: #d9f0e2;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 850;
}

.ng-vip-disclosures {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ng-vip-rule {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ng-line);
  border-radius: 12px;
}

.ng-vip-rule summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  color: var(--ng-green-dark);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

.ng-vip-rule summary::-webkit-details-marker {
  display: none;
}

.ng-vip-rule summary span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ng-vip-rule summary svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ng-vip-rule summary > svg {
  transition: transform 160ms ease;
}

.ng-vip-rule[open] summary > svg {
  transform: rotate(180deg);
}

.ng-vip-rule-body {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
  color: var(--ng-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ng-vip-rule-body .profit-reference-image {
  margin: 4px 0 0;
  overflow: hidden;
  background: #f5f9f6;
  border-color: var(--ng-line);
  border-radius: 9px;
  box-shadow: none;
}

.ng-vip-rule-body .profit-reference-image img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.ng-vip-rule-body .profit-reference-image > span {
  right: 8px;
  bottom: 8px;
  color: #ffffff;
  background: rgba(7, 26, 56, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 5px 14px rgba(7, 26, 56, 0.2);
}

.ng-vip-rule-body .profit-reference-image:focus-visible {
  outline: 3px solid rgba(7, 153, 79, 0.28);
  outline-offset: 2px;
}

html:has(.ng-vip-screen),
body:has(.ng-vip-screen) {
  scrollbar-width: none;
}

html:has(.ng-vip-screen)::-webkit-scrollbar,
body:has(.ng-vip-screen)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ARC asset-rental visual system */
.arc-wordmark {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #102c2a;
}

.arc-wordmark-mark {
  width: 34px;
  height: 30px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 7px;
}

.arc-wordmark-mark img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102px;
  height: 102px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -45%);
}

.arc-wordmark > span:last-child,
.arc-wordmark b,
.arc-wordmark small {
  display: block;
}

.arc-wordmark b {
  color: #075f59;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .12em;
}

.arc-wordmark small {
  margin-top: 3px;
  color: #957126;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ng-home-summary .ng-account-vip {
  min-width: 0;
}

.ng-account-rental-days {
  display: block;
  margin-top: 3px;
  color: #957126;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.ng-account-rental-term-list {
  grid-area: terms;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ng-line);
}

.ng-account-rental-term {
  min-width: 0;
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 7px;
  color: #173a37;
  background: linear-gradient(135deg, #f5fbf7, #fffaf0);
  border: 1px solid #d8e6dc;
  border-radius: 8px;
  white-space: nowrap;
}

.ng-account-rental-term b {
  color: #08756e;
  font-size: 10px;
  font-weight: 900;
}

.ng-account-rental-term span {
  min-width: 0;
  color: #705a25;
  font-size: 9px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .ng-account-rental-term-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ng-task-visual .ng-task-thumb {
  width: auto;
  height: auto;
  background: #e8efeb;
  border: 0;
  border-radius: 0;
}

.ng-task-visual .ng-task-thumb img {
  object-fit: cover;
}

.ng-task-earn strong,
.ng-vip-next-price strong,
.ng-vip-metrics strong {
  color: #08756e;
}

.arc-rental-product {
  position: relative;
  height: 154px;
  margin: 14px 0 0;
  overflow: hidden;
  background: #ede9df;
  border: 1px solid #d9ddd5;
  border-radius: 12px;
}

.arc-rental-product img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.arc-rental-product::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(180deg, transparent, rgba(5, 43, 40, .82));
}

.arc-rental-product figcaption {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
}

.arc-rental-product figcaption span {
  font-size: 17px;
  font-weight: 850;
}

.arc-rental-product figcaption small {
  color: #f2d58c;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.ng-vip-metrics .is-product-name {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(14px, 4.4vw, 18px);
  text-overflow: ellipsis;
}

.ng-vip-primary {
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(135deg, #075f59, #08756e);
  border-color: #075f59;
}

.ng-vip-primary small {
  color: rgba(255, 239, 196, .88);
  font-size: 9px;
  font-weight: 650;
}

.ng-vip-level-row.is-expired {
  border-color: rgba(200, 155, 60, 0.62);
  box-shadow: 0 8px 20px rgba(111, 78, 18, 0.09), inset 3px 0 0 #c89b3c;
}

.ng-vip-level-row.is-expired::before {
  background: linear-gradient(90deg, rgba(253, 249, 239, 0.99) 0%, rgba(253, 249, 239, 0.94) 43%, rgba(253, 249, 239, 0.64) 70%, rgba(200, 155, 60, 0.14) 100%);
}

.ng-vip-level-row.is-expired .ng-vip-list-price {
  color: #9a6e12;
  font-weight: 850;
}

.arc-rental-guide {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.arc-guide-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: #173a37;
  background: linear-gradient(145deg, #f9fcfa 0%, #edf6f1 100%);
  border: 1px solid #d6e5dc;
  border-radius: 11px;
}

.arc-guide-visual,
.arc-guide-content,
.arc-guide-step-copy {
  min-width: 0;
}

.arc-guide-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e2e8e3;
  border-radius: 0;
  color: inherit;
  cursor: zoom-in;
}

.arc-guide-visual .arc-rental-guide {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.arc-guide-visual:focus-visible {
  outline: 3px solid rgba(8, 117, 110, .3);
  outline-offset: -3px;
}

.arc-guide-zoom {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(7, 95, 89, .9);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(2, 43, 40, .22);
  pointer-events: none;
}

.arc-guide-zoom svg {
  width: 16px;
  height: 16px;
}

.arc-guide-content {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.arc-guide-eyebrow {
  overflow-wrap: anywhere;
  color: #9a6e12;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.arc-guide-content h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #102c2a;
  font-size: 14px;
  line-height: 1.18;
  font-weight: 850;
}

.arc-guide-flow {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.arc-guide-flow li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid #dce8e1;
  border-radius: 8px;
}

.arc-guide-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -5px;
  z-index: 1;
  width: 2px;
  height: 6px;
  background: #c4a45e;
}

.arc-guide-step-number {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #08756e;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
}

.arc-guide-step-copy small,
.arc-guide-step-copy strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.arc-guide-step-copy small {
  color: #63736e;
  font-size: 9px;
  line-height: 1.18;
  font-weight: 650;
}

.arc-guide-step-copy strong {
  margin-top: 1px;
  color: #08756e;
  font-size: clamp(13px, 4vw, 17px);
  line-height: 1.1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.arc-guide-note {
  margin: 3px 0 0 !important;
  overflow-wrap: anywhere;
  color: #5d6d68;
  font-size: 9px;
  line-height: 1.35;
}

@media (max-width: 350px) {
  .arc-guide-content {
    padding: 10px;
  }

  .arc-guide-flow li {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 6px;
  }

  .arc-guide-step-number {
    width: 18px;
    height: 18px;
  }
}

.bottom-nav a.active,
.bottom-nav a.active svg {
  color: #075f59;
}

/* ARC rental navigation artwork generated for the five primary destinations. */
.bottom-nav a {
  position: relative;
  border-radius: 14px;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.bottom-nav a > span:last-child {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.arc-bottom-nav-icon {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  background-image: url("/assets/arc/navigation/arc-bottom-nav-v1.png?v=1");
  background-repeat: no-repeat;
  background-size: 500% 100%;
  background-position-y: 50%;
  opacity: 0.76;
  transform: scale(0.9);
  filter: saturate(0.8);
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

.arc-bottom-nav-icon[data-arc-nav-icon="home"] { background-position-x: 0%; }
.arc-bottom-nav-icon[data-arc-nav-icon="rentals"] { background-position-x: 25%; }
.arc-bottom-nav-icon[data-arc-nav-icon="activities"] { background-position-x: 50%; }
.arc-bottom-nav-icon[data-arc-nav-icon="games"] { background-position-x: 75%; }
.arc-bottom-nav-icon[data-arc-nav-icon="account"] { background-position-x: 100%; }

.bottom-nav a.active {
  color: #075f59;
  background: linear-gradient(180deg, rgba(236, 249, 243, 0.98), rgba(247, 251, 248, 0.98));
  box-shadow: inset 0 0 0 1px rgba(7, 95, 89, 0.12);
}

.bottom-nav a.active::after {
  position: absolute;
  right: 15px;
  bottom: 3px;
  left: 15px;
  height: 2px;
  border-radius: 999px;
  background: #d4a83f;
  content: "";
}

.bottom-nav a.active .arc-bottom-nav-icon {
  opacity: 1;
  transform: translateY(-1px) scale(1);
  filter: saturate(1.08) drop-shadow(0 3px 4px rgba(7, 95, 89, 0.16));
}

.bottom-nav a:focus-visible {
  outline: 3px solid rgba(7, 95, 89, 0.35);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a,
  .arc-bottom-nav-icon {
    transition: none;
  }
}

@media (forced-colors: active) {
  .bottom-nav a.active {
    border: 2px solid CanvasText;
  }

  .bottom-nav a.active::after {
    background: Highlight;
  }
}

@media (max-width: 360px) {
  .arc-wordmark small { display: none; }
  .arc-rental-product { height: 138px; }
  .ng-account-rental-days { font-size: 8px; }
  .ng-account-rental-term { padding-inline: 5px; }
  .ng-account-rental-term b { font-size: 9px; }
  .ng-account-rental-term span { font-size: 8px; }
}

@media (max-width: 360px) {
  .ng-vip-screen {
    padding-inline: 12px;
  }

  .ng-vip-screen .home-brand-banner {
    margin-bottom: 16px;
  }

  .ng-vip-title-row {
    align-items: flex-start;
  }

  .ng-vip-title-row h1 {
    font-size: 27px;
  }

  .ng-vip-status {
    min-height: 27px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .ng-vip-next-card {
    padding: 14px;
  }

  .ng-vip-next-head {
    gap: 10px;
  }

  .ng-vip-next-price strong {
    font-size: 18px;
  }

  .ng-vip-metrics > div {
    min-height: 72px;
  }

  .ng-vip-level-row {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) 16px;
    column-gap: 8px;
    padding-inline: 10px;
  }

  .ng-vip-level-row.is-selected {
    min-height: 94px;
    padding-bottom: 25px;
  }
}

/* ARC Nigeria mobile game hub */
.ng-game-screen {
  width: min(100%, 460px);
  max-width: 460px;
  min-height: 100vh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 100% 0, rgba(7, 153, 79, 0.1), transparent 250px),
    linear-gradient(180deg, #f8fcf9 0, #f3f8f5 100%);
}

.ng-game-screen .topbar {
  background: rgba(248, 252, 249, 0.94);
}

.game-hub {
  display: grid;
  gap: 16px;
}

.game-wallet-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(74, 222, 128, 0.24), transparent 34%),
    linear-gradient(145deg, #071f1a 0%, #0a4933 58%, #087846 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(7, 50, 35, 0.2);
}

.game-wallet-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -56px;
  bottom: -82px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.025);
}

.game-wallet-heading,
.game-library-heading,
.game-points-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.game-library-heading > div > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.game-wallet-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.game-wallet-heading h2 svg {
  width: 17px;
  height: 17px;
  color: #72e5a3;
}

.game-wallet-status {
  max-width: 126px;
  padding: 4px 7px;
  color: #d5f7e2;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.game-wallet-status.is-error {
  color: #ffe4cc;
  background: rgba(247, 147, 26, 0.13);
}

.game-wallet-balances {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 94px;
  gap: 1px;
  margin: 7px 0 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.game-wallet-balances > div {
  min-width: 0;
  padding: 7px 9px 8px;
  background: rgba(5, 28, 23, 0.24);
}

.game-wallet-balances > .game-wallet-balance-cash {
  padding-inline: 6px;
}

.game-wallet-balances > .game-wallet-balance-v {
  padding-inline: 5px;
}

.game-wallet-balances > .game-wallet-balance-plays {
  padding-inline: 4px;
  text-align: center;
}

.game-wallet-balance-plays > span {
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
}

.game-wallet-play-split {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.game-wallet-play-split > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.game-wallet-play-split b {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 7px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.game-wallet-balances .is-long strong {
  font-size: 20px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.game-wallet-balances .is-very-long strong {
  font-size: 16px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.game-wallet-balances span,
.game-points-row > div > span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 700;
}

.game-wallet-balances strong,
.game-points-row strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: clamp(24px, 6vw, 27px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.game-wallet-balances strong small,
.game-points-row strong small {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.72;
}

.game-wallet-exchange,
.game-wallet-retry {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  color: #073722;
  background: #fff;
  border: 0;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.game-wallet-exchange svg,
.game-wallet-retry svg {
  width: 17px;
  height: 17px;
}

.game-wallet-exchange small {
  padding: 3px 6px;
  color: #64746b;
  background: #edf4ef;
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-wallet-exchange:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.game-v-exchange {
  margin-top: 6px;
  padding: 7px;
  background: rgba(2, 20, 16, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.game-v-exchange-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.game-v-exchange-heading > strong {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.game-v-rate {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.game-v-rate > small,
.game-v-input-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-v-rate > b {
  color: #ffe7a0;
  font-size: 13px;
  white-space: nowrap;
}

.game-v-exchange-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(88px, 0.72fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 6px;
}

.game-v-direction-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.game-v-direction-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.game-v-direction-tabs label {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.66);
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.game-v-direction-tabs label b {
  color: #ffe7a0;
  font-size: 12px;
}

.game-v-direction-tabs label svg {
  width: 11px;
  height: 11px;
  opacity: 0.7;
}

.game-v-direction-tabs label em {
  color: currentColor;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.game-v-direction-full,
.game-wallet-exchange-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#game-v-direction-cash:checked ~ .game-v-direction-tabs label[for="game-v-direction-cash"],
#game-v-direction-coins:checked ~ .game-v-direction-tabs label[for="game-v-direction-coins"] {
  color: #073722;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

#game-v-direction-cash:checked ~ .game-v-direction-tabs label[for="game-v-direction-cash"] b,
#game-v-direction-coins:checked ~ .game-v-direction-tabs label[for="game-v-direction-coins"] b {
  color: #087846;
}

#game-v-direction-cash:focus-visible ~ .game-v-direction-tabs label[for="game-v-direction-cash"],
#game-v-direction-coins:focus-visible ~ .game-v-direction-tabs label[for="game-v-direction-coins"] {
  outline: 2px solid #b8f3cf;
  outline-offset: 2px;
}

.game-v-exchange-directions {
  min-width: 0;
}

.game-v-exchange-direction {
  min-width: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end;
  gap: 3px 4px;
}

#game-v-direction-cash:checked ~ .game-v-exchange-directions .is-cash-to-v,
#game-v-direction-coins:checked ~ .game-v-exchange-directions .is-v-to-cash {
  display: grid;
}

.game-v-input {
  min-width: 0;
  display: block;
  position: relative;
}

.game-v-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.game-v-input-control {
  min-height: 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
}

.game-v-input-control b {
  padding-left: 12px;
  color: #9fe7bd;
  font-size: 14px;
}

.game-v-input-control input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 10px 0 5px;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
  font-weight: 800;
}

.game-v-input-control input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.game-v-input-control:focus-within {
  border-color: rgba(139, 236, 178, 0.72);
  box-shadow: 0 0 0 3px rgba(57, 211, 119, 0.13);
}

.game-v-estimate {
  grid-column: 1 / -1;
  min-width: 0;
  color: #b9f1cf;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.game-v-exchange .game-wallet-exchange {
  align-self: end;
  min-width: 44px;
  padding: 0;
}

.game-v-exchange .game-wallet-exchange small {
  display: none;
}

.game-v-exchange .game-wallet-exchange.is-reverse {
  color: #fff;
  background: rgba(30, 142, 91, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.game-v-exchange .game-wallet-exchange svg[data-lucide="loader-circle"] {
  animation: spin 900ms linear infinite;
}

.game-chance-rules {
  margin-top: 2px;
  padding: 0 3px;
  color: #fff;
  background: transparent;
  border: 0;
}

.game-chance-rules summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
  list-style: none;
}

.game-chance-rules summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.game-chance-rules[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.game-chance-rules summary::-webkit-details-marker {
  display: none;
}

.game-chance-rules summary svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 226, 154, 0.82);
}

.game-chance-rules > p {
  margin: 7px 0 9px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  line-height: 1.55;
}

.game-play-rule-cards {
  display: grid;
  gap: 8px;
}

.game-play-rule-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
}

.game-play-rule-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.game-play-rule-card > header > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #073722;
  background: #72e5a3;
}

.game-play-rule-card.is-permanent > header > span { background: #ffe29a; }
.game-play-rule-card > header svg { width: 14px; height: 14px; }
.game-play-rule-card > header > div { min-width: 0; }
.game-play-rule-card > header strong { display: block; color: #fff; font-size: 10px; line-height: 1.25; }
.game-play-rule-card > header p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.67); font-size: 8px; line-height: 1.45; }

.game-chance-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.game-chance-rule-head,
.game-chance-rule-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  text-align: center;
  border-radius: 8px;
}

.game-chance-rule-head {
  grid-column: 1 / -1;
  min-height: 25px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.game-chance-rule-row {
  min-height: 32px;
  gap: 4px;
  padding: 4px 2px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.game-chance-rule-row strong {
  color: #ffe29a;
  font-size: 10px;
}



.game-library {
  display: grid;
  gap: 12px;
}

.game-library-heading {
  align-items: end;
  padding: 0 2px;
}

.game-library-heading > div > span {
  color: #07994f;
}

.game-library-heading h2 {
  margin: 3px 0 0;
  color: #0b2030;
  font-size: 23px;
  line-height: 1.1;
}

.game-library-heading > small {
  max-width: 150px;
  color: #718078;
  font-size: 9px;
  line-height: 1.35;
  text-align: right;
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.game-tile {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 132px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: linear-gradient(135deg, #061d18, #0a5439);
  border: 1px solid rgba(10, 95, 62, 0.22);
  border-radius: 17px;
  box-shadow: 0 14px 28px rgba(6, 45, 31, 0.16);
  text-align: left;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.game-tile:hover {
  border-color: rgba(230, 193, 91, 0.44);
  box-shadow: 0 18px 34px rgba(6, 45, 31, 0.22);
  transform: translateY(-2px);
}

.game-tile:focus-visible {
  outline: 3px solid rgba(8, 153, 79, 0.3);
  outline-offset: 3px;
}

.game-tile-background,
.game-tile-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.game-tile-background {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.game-tile-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 20, 17, 0.96) 0%, rgba(4, 33, 25, 0.9) 42%, rgba(4, 34, 25, 0.46) 68%, rgba(4, 31, 23, 0.12) 100%),
    linear-gradient(0deg, rgba(2, 18, 14, 0.28), transparent 60%);
}

.game-tile-copy {
  position: relative;
  z-index: 1;
  width: min(69%, 275px);
  min-width: 0;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 16px 13px;
}

.game-tile-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 3px 7px;
  color: #dffbeb;
  background: rgba(21, 164, 91, 0.22);
  border: 1px solid rgba(116, 229, 167, 0.22);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.game-tile-badge.is-coins {
  color: #ffe8a4;
  background: rgba(199, 152, 42, 0.2);
  border-color: rgba(246, 208, 108, 0.25);
}

.game-tile-copy strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 19px;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.game-tile-copy > small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.game-tile-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 9px;
}

.game-tile-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.game-tile-status.is-maintenance {
  color: #ffe1ac;
  background: rgba(201, 131, 31, 0.2);
  border-color: rgba(255, 207, 134, 0.22);
}

.game-tile-status.is-integration {
  color: #fff2bd;
  background: rgba(8, 126, 94, 0.45);
  border-color: rgba(246, 213, 105, 0.34);
}

.game-tile-chances,
.game-preview-chances {
  display: inline-flex;
  align-items: center;
  color: #ffe6a0;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.game-tile-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #0a4d31;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}

.game-tile-arrow svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.game-grid-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 16px;
  color: #708078;
  background: #fff;
  border: 1px dashed #cadbd1;
  border-radius: 14px;
  font-size: 12px;
  text-align: center;
}

.game-preview {
  display: grid;
  gap: 14px;
}

.game-preview-back {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #12623f;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.game-preview-back svg {
  width: 16px;
  height: 16px;
}

.game-detail-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.game-detail-assets {
  width: min(210px, 64%);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.game-detail-assets.is-v-only {
  width: min(118px, 42%);
  grid-template-columns: minmax(0, 1fr);
}

.game-detail-asset {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: #fff;
  background: linear-gradient(135deg, #06483e, #087566);
  border: 1px solid rgba(216, 179, 76, 0.42);
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(4, 58, 49, 0.14);
}

.game-detail-asset.is-coins {
  color: #0a4c3e;
  background: linear-gradient(145deg, #fffdf4, #f8e9b2);
  border-color: rgba(181, 139, 38, 0.38);
}

.game-detail-assets.has-crash-decimal {
  width: min(258px, 72%);
  grid-template-columns: 0.78fr 1fr 0.92fr;
}

.game-detail-asset.is-decimal {
  color: #0c463b;
  background: linear-gradient(145deg, #eefaf3, #d8f0e3);
  border-color: rgba(8, 113, 83, 0.27);
}

.game-detail-asset.is-decimal > svg,
.game-detail-asset.is-decimal strong {
  color: #08765d;
}

.game-detail-asset.is-decimal small {
  color: rgba(26, 78, 62, 0.66);
  font-size: 7px;
  letter-spacing: 0;
}

.game-detail-assets.has-crash-decimal .game-detail-asset {
  grid-template-columns: 1fr;
  gap: 2px;
  min-height: 48px;
  padding-inline: 5px;
  text-align: center;
}

.game-detail-assets.has-crash-decimal .game-detail-asset > svg {
  display: none;
}

.game-detail-assets.has-crash-decimal .game-detail-asset strong {
  font-size: clamp(14px, 4.1vw, 19px);
  white-space: nowrap;
}

.game-detail-asset > svg {
  width: 17px;
  height: 17px;
  color: #f4d77d;
}

.game-detail-asset.is-coins > svg {
  color: #08705d;
}

.game-detail-asset > span,
.game-detail-asset small,
.game-detail-asset strong {
  min-width: 0;
  display: block;
}

.game-detail-asset small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-detail-asset.is-coins small {
  color: rgba(36, 65, 54, 0.67);
}

.game-detail-asset strong {
  margin-top: 3px;
  color: #fff5cf;
  font-size: clamp(17px, 4.8vw, 21px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.game-detail-asset.is-coins strong {
  color: #075b4b;
}

.game-detail-asset strong em {
  margin-left: 2px;
  font-size: 0.52em;
  font-style: normal;
  letter-spacing: 0;
}

@media (max-width: 360px) {
  .game-detail-topline {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .game-detail-assets {
    width: 100%;
  }

  .game-detail-assets.is-v-only {
    width: min(128px, 46%);
    margin-left: auto;
  }

  .game-detail-assets.has-crash-decimal {
    width: 100%;
    grid-template-columns: 0.75fr 1fr 0.9fr;
  }

  .game-detail-asset.is-decimal small {
    font-size: 7px;
    letter-spacing: 0;
  }

  .game-detail-asset {
    min-height: 50px;
    padding-inline: 10px;
  }

  .game-detail-assets.has-crash-decimal .game-detail-asset {
    padding-inline: 5px;
  }
}

.game-preview-hero {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #061d18, #0a5439);
  border: 1px solid rgba(10, 95, 62, 0.22);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(6, 45, 31, 0.2);
}

.game-preview-hero > img,
.game-preview-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.game-preview-hero > img {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.game-preview-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 20, 17, 0.97) 0%, rgba(4, 33, 25, 0.86) 48%, rgba(4, 34, 25, 0.26) 100%);
}

.game-preview-copy {
  width: min(68%, 285px);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
}

.game-preview-copy h2 {
  margin: 10px 0 0;
  color: #fff;
  font-size: 27px;
  line-height: 1.08;
}

.game-preview-copy p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  line-height: 1.5;
}

.game-preview-copy > strong {
  display: inline-flex;
  margin-top: 15px;
  padding: 6px 10px;
  color: #e7fff1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.game-preview-chances {
  margin-top: 10px;
  padding: 5px 8px;
  background: rgba(231, 181, 54, 0.16);
  border: 1px solid rgba(255, 225, 143, 0.22);
  border-radius: 999px;
}

.game-preview-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  color: #264c39;
  background: #fff;
  border: 1px solid #d9e8df;
  border-radius: 14px;
}

.game-preview-note > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #08994f;
}

.game-preview-note strong {
  display: block;
  font-size: 12px;
}

.game-preview-note p {
  margin: 4px 0 0;
  color: #6e7d75;
  font-size: 10px;
  line-height: 1.5;
}

.slots-integration {
  gap: 11px;
}

.slots-integration-hero {
  position: relative;
  isolation: isolate;
  min-height: 188px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #062f29;
  border: 1px solid rgba(228, 188, 72, 0.36);
  border-radius: 20px;
  box-shadow: 0 15px 32px rgba(4, 55, 43, 0.2);
}

.slots-integration-hero > img,
.slots-integration-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slots-integration-hero > img {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.slots-integration-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 27, 23, 0.97) 0%, rgba(3, 50, 38, 0.84) 56%, rgba(3, 46, 35, 0.23) 100%),
    linear-gradient(0deg, rgba(1, 20, 17, 0.7), transparent 64%);
}

.slots-integration-copy {
  width: min(76%, 310px);
  padding: 19px;
}

.slots-integration-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  color: #173e30;
  background: linear-gradient(135deg, #fff2b6, #e7bf4e);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.slots-integration-copy h2 {
  margin: 9px 0 0;
  color: #fff;
  font-size: clamp(25px, 7vw, 31px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.slots-integration-copy p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.48;
}

.slots-integration-status,
.slots-integration-settlement {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: #173d31;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d9e8df;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(7, 75, 54, 0.07);
}

.slots-integration-status-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #087d59;
  background: #e6f7ef;
  border-radius: 11px;
}

.slots-integration-status-icon svg,
.slots-integration-settlement > svg {
  width: 18px;
  height: 18px;
}

.slots-integration-status strong,
.slots-integration-settlement strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.slots-integration-status p,
.slots-integration-settlement p {
  margin: 3px 0 0;
  color: #6b7d74;
  font-size: 9px;
  line-height: 1.45;
}

.slots-integration-status-dot {
  width: 9px;
  height: 9px;
  background: #139b68;
  border: 2px solid #dff6ec;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(19, 155, 104, 0.12);
}

.slots-integration-status.is-loading .slots-integration-status-icon svg {
  animation: spin 1s linear infinite;
}

.slots-integration-status.is-loading .slots-integration-status-dot {
  background: #c89a27;
  border-color: #fff4cf;
  box-shadow: 0 0 0 3px rgba(200, 154, 39, 0.12);
}

.slots-integration-status.is-degraded .slots-integration-status-icon,
.slots-integration-status.is-disabled .slots-integration-status-icon {
  color: #9a641a;
  background: #fff3d9;
}

.slots-integration-status.is-degraded .slots-integration-status-dot,
.slots-integration-status.is-disabled .slots-integration-status-dot {
  background: #cf8a27;
  border-color: #fff1d5;
  box-shadow: 0 0 0 3px rgba(207, 138, 39, 0.12);
}

.slots-integration-settlement {
  grid-template-columns: auto minmax(0, 1fr);
  background: linear-gradient(145deg, #f4fbf7, #fffdf5);
  border-color: #d7e6d6;
}

.slots-integration-settlement > svg {
  color: #0b8c5c;
}

.slots-integration-play {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  color: #76847d;
  background: #e9eeeb;
  border: 1px solid #d7dfda;
  border-radius: 14px;
  box-shadow: none;
  cursor: not-allowed;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  opacity: 1;
}

.slots-integration-launch {
  min-width: 0;
  margin: 0;
}

.slots-integration-launch .slots-integration-play {
  width: 100%;
}

.slots-integration-play.is-ready {
  color: #063c32;
  border-color: #e5bb52;
  background: linear-gradient(180deg, #ffe89a, #e8b63e);
  box-shadow: 0 11px 24px rgba(171, 123, 15, 0.2);
  cursor: pointer;
}

.slots-integration-play.is-ready:hover:not(:disabled) {
  filter: brightness(1.03);
}

.slots-integration-play.is-ready:focus-visible {
  outline: 3px solid rgba(0, 123, 103, 0.3);
  outline-offset: 2px;
}

.slots-integration-play.is-ready:disabled {
  opacity: 0.72;
  cursor: wait;
}

.slots-integration-play.is-ready:disabled svg {
  animation: slots-integration-spin 0.9s linear infinite;
}

.slots-integration-settlement.is-ready {
  border-color: rgba(0, 123, 103, 0.2);
  background: rgba(229, 248, 241, 0.78);
}

.slots-integration-play svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 360px) {
  .slots-integration-hero {
    min-height: 174px;
  }

  .slots-integration-copy {
    width: 82%;
    padding: 16px;
  }

  .slots-integration-status,
  .slots-integration-settlement {
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slots-integration-status.is-loading .slots-integration-status-icon svg {
    animation: none;
  }
}

@keyframes slots-integration-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .slots-integration-play.is-ready:disabled svg { animation: none; }
}

/* ARC Crash / Game2 service bridge */
.crash-integration {
  gap: 11px;
}

.crash-integration-hero {
  position: relative;
  isolation: isolate;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #041c21;
  border: 1px solid rgba(238, 194, 71, 0.4);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(3, 43, 46, 0.2);
}

.crash-integration-hero > img,
.crash-integration-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crash-integration-hero > img {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.crash-integration-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 23, 27, 0.97) 0%, rgba(3, 44, 43, 0.76) 55%, rgba(3, 39, 40, 0.13) 100%),
    linear-gradient(0deg, rgba(2, 18, 21, 0.78), transparent 68%);
}

.crash-integration-copy {
  width: min(79%, 320px);
  padding: 19px;
}

.crash-integration-kicker {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  color: #173b34;
  background: linear-gradient(135deg, #fff1ad, #e9b944);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crash-integration-copy h2 {
  margin: 9px 0 0;
  color: #fff;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.crash-integration-copy p {
  max-width: 250px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
}

.crash-integration-status {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: #153d35;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d6e8df;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(5, 69, 57, 0.07);
}

.crash-integration-status-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #087d60;
  background: #e5f7ef;
  border-radius: 11px;
}

.crash-integration-status-icon svg {
  width: 18px;
  height: 18px;
}

.crash-integration-status strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.crash-integration-status p {
  margin: 3px 0 0;
  color: #6b7d75;
  font-size: 9px;
  line-height: 1.45;
}

.crash-integration-status-dot {
  width: 9px;
  height: 9px;
  background: #159b69;
  border: 2px solid #dff6ec;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(21, 155, 105, 0.12);
}

.crash-integration-status.is-loading .crash-integration-status-icon svg,
.crash-integration-play.is-ready:disabled svg {
  animation: slots-integration-spin 0.9s linear infinite;
}

.crash-integration-status:is(.is-maintenance, .is-degraded, .is-disabled, .is-connected) .crash-integration-status-icon {
  color: #9a651b;
  background: #fff3d8;
}

.crash-integration-status:is(.is-maintenance, .is-degraded, .is-disabled, .is-connected) .crash-integration-status-dot {
  background: #cf8b28;
  border-color: #fff1d5;
  box-shadow: 0 0 0 3px rgba(207, 139, 40, 0.12);
}

.crash-integration-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.crash-integration-rules > div {
  min-width: 0;
  padding: 11px 9px;
  color: #193f36;
  background: #fff;
  border: 1px solid #d9e8e0;
  border-radius: 13px;
}

.crash-integration-rules > div > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #08775c;
  background: #e9f7f0;
  border-radius: 8px;
}

.crash-integration-rules svg {
  width: 14px;
  height: 14px;
}

.crash-integration-rules small,
.crash-integration-rules strong {
  display: block;
  overflow-wrap: anywhere;
}

.crash-integration-rules small {
  margin-top: 8px;
  color: #718178;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.crash-integration-rules strong {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.3;
}

.crash-integration-decimal-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 13px;
  color: #173e35;
  background: linear-gradient(145deg, #effaf4, #fffdf5);
  border: 1px solid #d4e6da;
  border-radius: 14px;
}

.crash-integration-decimal-note > svg {
  width: 18px;
  height: 18px;
  color: #0a895d;
}

.crash-integration-decimal-note strong {
  display: block;
  font-size: 11px;
}

.crash-integration-decimal-note p {
  margin: 4px 0 0;
  color: #677a70;
  font-size: 9px;
  line-height: 1.5;
}

.crash-integration-launch {
  min-width: 0;
  margin: 0;
}

.crash-integration-play {
  width: 100%;
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  color: #77847e;
  background: #e9eeeb;
  border: 1px solid #d6dfda;
  border-radius: 14px;
  cursor: not-allowed;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  opacity: 1;
}

.crash-integration-play.is-ready {
  color: #083c32;
  background: linear-gradient(180deg, #ffeb9b, #e8b53d);
  border-color: #e4b850;
  box-shadow: 0 11px 24px rgba(171, 123, 15, 0.2);
  cursor: pointer;
}

.crash-integration-play.is-ready:hover:not(:disabled) {
  filter: brightness(1.03);
}

.crash-integration-play.is-ready:focus-visible {
  outline: 3px solid rgba(0, 123, 103, 0.3);
  outline-offset: 2px;
}

.crash-integration-play.is-ready:disabled {
  cursor: wait;
  opacity: 0.72;
}

.crash-integration-play svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 360px) {
  .crash-integration-hero {
    min-height: 174px;
  }

  .crash-integration-copy {
    width: 86%;
    padding: 16px;
  }

  .crash-integration-rules {
    gap: 5px;
  }

  .crash-integration-rules > div {
    padding: 9px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crash-integration-status.is-loading .crash-integration-status-icon svg,
  .crash-integration-play.is-ready:disabled svg {
    animation: none;
  }
}

.game-preview-unavailable {
  justify-items: center;
  padding: 42px 22px;
  color: #173528;
  background: #fff;
  border: 1px solid #d9e8df;
  border-radius: 18px;
  text-align: center;
}

.game-preview-unavailable-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #a66b1b;
  background: #fff4dc;
  border-radius: 50%;
}

.game-preview-unavailable-icon svg {
  width: 25px;
  height: 25px;
}

.game-preview-unavailable h2 {
  margin: 0;
  font-size: 21px;
}

.game-preview-unavailable p {
  margin: -6px 0 0;
  color: #718078;
  font-size: 11px;
}

.game-preview-unavailable > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  color: #fff;
  background: #078b4a;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.game-preview-unavailable > a svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 360px) {
  .ng-game-screen {
    padding-inline: 12px;
  }

  .game-wallet-card {
    padding: 11px;
  }

  .game-wallet-heading {
    align-items: center;
  }

  .game-wallet-status {
    max-width: 105px;
  }

  .game-v-exchange {
    padding: 6px;
  }

  .game-v-rate {
    gap: 4px;
  }

  .game-v-exchange-control {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .game-v-direction-tabs label {
    padding-inline: 1px;
  }

  .game-grid {
    gap: 10px;
  }

  .game-tile {
    min-height: 124px;
  }

  .game-tile-copy {
    width: 71%;
    min-height: 124px;
    padding: 13px;
  }

  .game-preview-hero {
    min-height: 196px;
  }

  .game-preview-copy {
    width: 72%;
    min-height: 196px;
    padding: 16px;
  }
}

/* ARC chance-based roulette */
.arc-roulette {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding-bottom: 92px;
  color: #102d26;
}

.arc-roulette-topline,
.arc-roulette-intro,
.arc-roulette-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.arc-roulette-balance {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 6px;
  padding: 7px 10px;
  color: #fff;
  background: linear-gradient(135deg, #06483e, #087566);
  border: 1px solid rgba(216, 179, 76, 0.42);
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(4, 58, 49, 0.16);
}

.arc-roulette-balance svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: #f4d77d;
}

.arc-roulette-balance small,
.arc-roulette-balance strong {
  min-width: 0;
  display: block;
  line-height: 1.1;
}

.arc-roulette-balance small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.arc-roulette-balance strong {
  margin-top: 3px;
  color: #fff5cf;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.arc-roulette-intro {
  align-items: stretch;
  padding: 12px 13px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 207, 117, 0.18), transparent 42%),
    linear-gradient(135deg, #042e29, #075b50);
  border: 1px solid rgba(216, 179, 76, 0.3);
  border-radius: 15px;
}

.arc-roulette-brand {
  width: 45px;
  min-width: 45px;
  display: grid;
  place-items: center;
  color: #f1cf70;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(242, 207, 117, 0.28);
  border-radius: 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.arc-roulette-intro > div {
  min-width: 0;
  flex: 1;
  align-self: center;
}

.arc-roulette-intro small {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-roulette-intro h1 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(17px, 5vw, 22px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.arc-roulette-entry {
  align-self: center;
  padding: 5px 7px;
  color: #ffe89e;
  background: rgba(224, 184, 73, 0.14);
  border: 1px solid rgba(240, 208, 118, 0.3);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.arc-roulette-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  background: #042924;
  border: 1px solid rgba(207, 167, 61, 0.58);
  border-radius: 22px;
  box-shadow: 0 22px 42px rgba(2, 44, 38, 0.23), inset 0 0 0 1px rgba(255, 232, 160, 0.08);
}

.arc-roulette-stage-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.arc-roulette-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 22, 19, 0.02) 0 67%, rgba(1, 22, 19, 0.42) 100%),
    radial-gradient(circle at 50% 37%, transparent 0 36%, rgba(0, 22, 19, 0.08) 58%, rgba(0, 22, 19, 0.18) 100%);
}

.arc-roulette-wheel-shell {
  position: absolute;
  z-index: 2;
  top: 19.55%;
  left: 50%;
  width: 73.4%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.arc-roulette-wheel-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5%;
  border-radius: 50%;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 0 28px rgba(235, 193, 81, 0.25);
  pointer-events: none;
}

.arc-roulette-wheel {
  position: absolute;
  inset: 0;
  overflow: visible;
  border-radius: 50%;
  transform: rotate(0deg);
  will-change: transform;
}

.arc-roulette-wheel-face {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.arc-roulette-wheel.has-result {
  transform: rotate(var(--arc-wheel-target));
}

.arc-roulette-wheel.is-spinning {
  animation: arcRouletteSpin 2.8s cubic-bezier(0.12, 0.72, 0.08, 1) both;
}

.arc-roulette-segment {
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  width: 46px;
  height: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--arc-segment-angle));
  transform-origin: 50% 100%;
}

.arc-roulette-segment b {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 26px;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-top: clamp(32px, 11.5vw, 48px);
  color: #fff;
  font-size: clamp(14px, 4.6vw, 19px);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 26px;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.72);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  white-space: nowrap;
}

.arc-roulette-segment b em {
  position: absolute;
  top: 20px;
  color: currentColor;
  font-size: 4px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
}

.arc-roulette-segment b span {
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0.2px currentColor;
}

.arc-roulette-segment b small {
  font-size: clamp(9px, 2.4vw, 11px);
  font-weight: 850;
  letter-spacing: 0.03em;
}

.arc-roulette-segment:nth-of-type(odd) b {
  color: #073d35;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.52);
}

.arc-roulette-pointer {
  position: absolute;
  z-index: 7;
  top: 13.7%;
  left: 50%;
  width: clamp(19px, 5.8%, 24px);
  height: auto;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.68));
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.arc-roulette-spin {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: clamp(54px, 17vw, 66px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 1px;
  padding: 0;
  color: #073f36;
  background: radial-gradient(circle at 36% 27%, #fffbd8 0, #efca60 46%, #b57d18 100%);
  border: 3px solid #fff0a8;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #8f6718, 0 0 0 5px rgba(255, 236, 154, 0.68), 0 8px 16px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -50%);
}

.arc-roulette-spin span {
  max-width: 52px;
  font-size: clamp(8px, 2.8vw, 12px);
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.arc-roulette-spin small {
  color: rgba(6, 55, 47, 0.7);
  font-size: 7px;
  font-weight: 900;
}

.arc-roulette-spin:focus-visible,
.arc-roulette-status button:focus-visible,
.arc-roulette-result-dialog button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.arc-roulette-spin:disabled {
  cursor: not-allowed;
  filter: none;
  opacity: 1;
}

.arc-roulette-status {
  position: absolute;
  z-index: 4;
  right: 13px;
  bottom: 13px;
  left: 13px;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 12px 11px;
  color: #fff;
  background: linear-gradient(145deg, rgba(2, 39, 34, 0.94), rgba(4, 65, 56, 0.91));
  border: 1px solid rgba(241, 207, 114, 0.46);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
  backdrop-filter: blur(8px);
}

.arc-roulette-status strong {
  color: #fff8dc;
  font-size: 12px;
}

.arc-roulette-status small {
  color: rgba(255, 255, 255, 0.66);
  max-width: 275px;
  font-size: 8px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.arc-roulette-status button,
.arc-roulette-rentals-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 6px 12px;
  color: #063f36;
  background: linear-gradient(180deg, #fff4bd, #e8c65f);
  border: 1px solid #ffe99b;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.arc-roulette-status button svg,
.arc-roulette-rentals-link svg {
  width: 14px;
  height: 14px;
}

.arc-roulette-rentals-link {
  margin-top: 5px;
}

.arc-roulette-status.is-error {
  border-color: rgba(255, 177, 131, 0.55);
}

.arc-roulette-result,
.arc-roulette-rules,
.arc-roulette-history {
  min-width: 0;
  background: #fff;
  border: 1px solid #d6e7dc;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(4, 62, 51, 0.08);
}

.arc-roulette-result {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  color: #31564a;
}

.arc-roulette-result > span {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #087260;
  background: #e8f7f1;
  border-radius: 50%;
}

.arc-roulette-result > span svg {
  width: 19px;
  height: 19px;
}

.arc-roulette-result p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.arc-roulette-result div {
  min-width: 0;
}

.arc-roulette-result div small {
  display: block;
  color: #9c7628;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.arc-roulette-result div strong {
  display: block;
  margin-top: 3px;
  color: #075f51;
  font-size: 19px;
}

.arc-roulette-result-overlay {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 25, 21, 0.72);
  backdrop-filter: blur(7px);
}

.arc-roulette-result-dialog {
  position: relative;
  width: min(100%, 330px);
  overflow: hidden;
  padding: 27px 22px 20px;
  color: #123d33;
  background:
    radial-gradient(circle at 50% 0, rgba(241, 205, 103, 0.26), transparent 42%),
    #fffdf4;
  border: 1px solid #e2bd57;
  border-radius: 23px;
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.38);
  text-align: center;
  animation: arcRouletteResultIn 260ms ease-out both;
}

.arc-roulette-result-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #315b50;
  background: rgba(7, 83, 70, 0.07);
  border: 0;
  border-radius: 50%;
}

.arc-roulette-result-close svg {
  width: 18px;
  height: 18px;
}

.arc-roulette-result-emblem {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  color: #765212;
  background: radial-gradient(circle at 34% 26%, #fff6bf, #e1b64e 70%);
  border: 4px solid #fff1ae;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(158, 113, 25, 0.2), 0 10px 25px rgba(127, 87, 15, 0.22);
}

.arc-roulette-result-emblem svg {
  width: 34px;
  height: 34px;
}

.arc-roulette-result-dialog > small {
  color: #9a7426;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.arc-roulette-result-dialog h2 {
  margin: 7px 0 0;
  color: #075d50;
  font-size: 32px;
  line-height: 1.08;
}

.arc-roulette-result-dialog p {
  margin: 10px auto 18px;
  color: #647a72;
  font-size: 11px;
  line-height: 1.55;
}

.arc-roulette-result-confirm {
  width: 100%;
  min-height: 46px;
  color: #fff;
  background: linear-gradient(135deg, #075d50, #09826c);
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(5, 92, 77, 0.21);
}

.arc-roulette-rules,
.arc-roulette-history {
  padding: 14px;
}

.arc-roulette-section-heading {
  align-items: flex-start;
  margin-bottom: 11px;
}

.arc-roulette-section-heading > div {
  min-width: 0;
}

.arc-roulette-section-heading small {
  display: block;
  color: #a37a27;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.arc-roulette-section-heading h2 {
  margin: 3px 0 0;
  color: #143e34;
  font-size: 17px;
}

.arc-roulette-section-heading > svg {
  width: 22px;
  height: 22px;
  color: #0a7b66;
}

.arc-roulette-section-heading > span {
  padding: 4px 7px;
  color: #6b8178;
  background: #eef6f1;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.arc-roulette-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.arc-game-earn-methods {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arc-game-earn-methods li {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  color: #4d685e;
  background: #f5faf7;
  border: 1px solid #dfece5;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.5;
}

.arc-game-earn-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #075f59;
  background: #dceee5;
  border-radius: 50%;
  font-weight: 800;
}

.arc-game-earn-methods li strong {
  color: #075f59;
  font-size: 13px;
}

.arc-game-earn-methods li p {
  margin: 5px 0;
}

.arc-game-earn-methods li small {
  display: block;
  color: #5d7269;
  font-size: 11px;
}

.arc-game-earn-usage {
  margin: 10px 0 12px;
  color: #5d7269;
  font-size: 11px;
  line-height: 1.5;
}

.arc-roulette-responsible {
  margin: 9px 1px 0;
  color: #72867d;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.arc-roulette-rule-grid > div {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 9px 6px;
  color: #587066;
  background: #f5faf7;
  border: 1px solid #e0ece5;
  border-radius: 11px;
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
}

.arc-roulette-rule-grid b,
.arc-roulette-rule-grid svg {
  width: 24px;
  height: 24px;
  color: #08735f;
  font-size: 20px;
  line-height: 24px;
}

.arc-roulette-history-list {
  display: grid;
  gap: 7px;
}

.arc-roulette-history-list > p {
  margin: 0;
  padding: 22px 12px;
  color: #73867d;
  background: #f7faf8;
  border: 1px dashed #d4e4da;
  border-radius: 11px;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.arc-roulette-history-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: #f7faf8;
  border: 1px solid #e1ece6;
  border-radius: 11px;
}

.arc-roulette-history-row > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #71867c;
  background: #edf3ef;
  border-radius: 50%;
}

.arc-roulette-history-row > span.is-win {
  color: #8a6318;
  background: #fff2c8;
}

.arc-roulette-history-row svg {
  width: 15px;
  height: 15px;
}

.arc-roulette-history-row > div {
  min-width: 0;
}

.arc-roulette-history-row strong,
.arc-roulette-history-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arc-roulette-history-row strong {
  color: #173f35;
  font-size: 11px;
}

.arc-roulette-history-row small {
  margin-top: 3px;
  color: #7b8d85;
  font-size: 8px;
}

.arc-roulette-history-row code {
  color: #768a81;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
}

@keyframes arcRouletteSpin {
  from { transform: rotate(var(--arc-wheel-from, 0deg)); }
  to { transform: rotate(var(--arc-wheel-target)); }
}

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

@media (max-width: 360px) {
  .arc-roulette {
    gap: 11px;
  }

  .arc-roulette-intro {
    padding: 10px;
  }

  .arc-roulette-brand {
    width: 41px;
    min-width: 41px;
  }

  .arc-roulette-stage {
    border-radius: 18px;
  }

  .arc-roulette-status {
    right: 9px;
    bottom: 9px;
    left: 9px;
    padding: 8px;
  }

  .arc-roulette-rule-grid {
    gap: 5px;
  }

  .arc-roulette-rule-grid > div {
    min-height: 78px;
    padding-inline: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-roulette-wheel.is-spinning,
  .arc-roulette-result-dialog {
    animation-duration: 1ms;
  }
}
/* ARC Nigeria mobile activity hub */
.ng-activity-screen {
  background:
    radial-gradient(circle at 100% 0%, rgba(12, 160, 86, 0.1), transparent 33%),
    #f5f8f6;
}

.activity-hub,
.activity-detail {
  display: grid;
  gap: 14px;
  padding: 4px 12px 96px;
  color: #0b1f3a;
}

.activity-hub-intro {
  padding: 6px 2px 2px;
}

.activity-hub-intro > span,
.activity-tile-badge {
  color: #087847;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-hub-intro h2,
.activity-detail-heading h2 {
  margin: 3px 0 2px;
  color: #081a34;
  font-size: clamp(24px, 7vw, 31px);
  line-height: 1.05;
}

.activity-hub-intro p,
.activity-detail-heading p {
  margin: 0;
  color: #607086;
  font-size: 13px;
  line-height: 1.45;
}

.activity-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}

.activity-tile {
  position: relative;
  display: block;
  min-height: 124px;
  overflow: hidden;
  border: 1px solid rgba(8, 54, 38, 0.12);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(128deg, #061b34 0%, #0a4938 58%, #0ba05b 100%);
  box-shadow: 0 8px 20px rgba(6, 35, 27, 0.09);
  text-decoration: none;
  isolation: isolate;
}

.activity-tile-popup { background: linear-gradient(128deg, #15204a 0%, #40539b 58%, #6d78cf 100%); }
.activity-tile-rental-reward-code { background: linear-gradient(128deg, #2d1908 0%, #795011 58%, #d19422 100%); }
.activity-tile-card-collection { background: linear-gradient(128deg, #25113b 0%, #633c82 58%, #a976c2 100%); }
.activity-tile-company-stock { background: linear-gradient(128deg, #082626 0%, #11695a 58%, #18a77a 100%); }
.activity-tile-daily-checkin { background: linear-gradient(128deg, #102538 0%, #17627a 58%, #20a9ac 100%); }

.activity-tile:focus-visible,
.activity-detail button:focus-visible,
.activity-detail a:focus-visible,
.activity-detail input:focus-visible {
  outline: 3px solid rgba(9, 165, 91, 0.35);
  outline-offset: 2px;
}

.activity-tile-art {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: -1;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  color: rgba(255, 232, 167, 0.82);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%) rotate(-8deg);
}

.activity-tile-art svg {
  width: 57px;
  height: 57px;
  stroke-width: 1.4;
}

.activity-tile-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2, 14, 29, 0.22), rgba(2, 14, 29, 0) 78%);
}

.activity-tile-copy {
  display: grid;
  align-content: center;
  min-height: 124px;
  padding: 14px 124px 13px 16px;
}

.activity-tile-badge {
  width: max-content;
  margin-bottom: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff4c7;
  background: rgba(255, 255, 255, 0.13);
}

.activity-tile-copy > strong {
  font-size: 19px;
  line-height: 1.08;
}

.activity-tile-copy > small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.activity-tile-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.activity-tile-footer svg { width: 14px; height: 14px; }

.activity-hub-retry,
.activity-state-card button,
.activity-detail-back {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #bed7c9;
  border-radius: 10px;
  color: #076b40;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.activity-detail-back svg,
.activity-hub-retry svg { width: 15px; height: 15px; }

.activity-detail-heading { margin-bottom: 1px; }

.activity-state-card,
.activity-invite-share,
.activity-invite-progress,
.activity-stock-rule,
.activity-announcement-card,
.activity-reward-code-card,
.activity-collection-summary,
.activity-stock-orders {
  border: 1px solid #d9e5de;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 17px rgba(9, 39, 27, 0.045);
}

.activity-state-card { padding: 18px; text-align: center; }
.activity-state-card p { margin: 0 0 10px; color: #66758a; }
.activity-state-card.is-error { border-color: #f1c9c9; background: #fff8f8; }

.activity-invite-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}

.activity-invite-share div { display: grid; gap: 2px; min-width: 0; }
.activity-invite-share span { color: #718096; font-size: 10px; }
.activity-invite-share strong { font-size: 18px; letter-spacing: 0.04em; }
.activity-invite-share button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #087847;
  font-weight: 800;
}
.activity-invite-share button svg { width: 15px; height: 15px; }

.activity-vip-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 2px 0 5px;
}
.activity-vip-tabs a {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border: 1px solid #d5e2da;
  border-radius: 999px;
  color: #536276;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.activity-vip-tabs a.active { border-color: #079653; color: #fff; background: #079653; }

.activity-invite-progress { padding: 13px 14px; }
.activity-invite-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-invite-progress span { color: #526276; font-size: 12px; }
.activity-invite-progress strong { color: #079653; font-size: 25px; }
.activity-invite-progress p { margin: 7px 0 0; color: #7a8798; font-size: 10px; line-height: 1.45; }
.activity-invite-progress .activity-invite-formula {
  color: #087847;
  font-size: 11px;
  font-weight: 800;
}

.activity-milestone-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.activity-milestone {
  --milestone-accent: #4fdfa0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr);
  grid-template-areas:
    "stage status"
    "people status"
    "requirement status"
    "reward status"
    "formula status"
    "progress progress"
    "progress-copy progress-copy";
  width: 100%;
  min-height: 154px;
  min-width: 0;
  align-content: start;
  gap: 5px 12px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(125, 224, 176, 0.32);
  border-radius: 16px;
  color: #fff;
  background-color: #06192f;
  background-image:
    linear-gradient(100deg, rgba(3, 17, 36, 0.83) 0%, rgba(2, 49, 46, 0.54) 58%, rgba(2, 75, 48, 0.18) 100%),
    url("/assets/activities/invite-milestone-card-v1.jpg?v=1");
  background-position: center 58%;
  background-size: cover;
  box-shadow: 0 8px 18px rgba(4, 29, 26, 0.12);
  font: inherit;
  text-align: left;
  appearance: none;
  isolation: isolate;
  opacity: 1;
}
.activity-milestone:nth-child(2) { --milestone-accent: #65e7b4; background-position: center 63%; }
.activity-milestone:nth-child(3) { --milestone-accent: #5adfcb; background-position: center 68%; }
.activity-milestone:nth-child(4) { --milestone-accent: #62cbd8; background-position: center 73%; }
.activity-milestone:nth-child(5) { --milestone-accent: #b6d982; background-position: center 78%; }
.activity-milestone:nth-child(6) { --milestone-accent: #f0cb68; background-position: center 83%; }
.activity-milestone > * { position: relative; z-index: 1; min-width: 0; }
.activity-milestone-stage {
  grid-area: stage;
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(4, 21, 36, 0.28);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.activity-milestone > strong {
  grid-area: people;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-milestone-requirement {
  grid-area: requirement;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-milestone > b {
  grid-area: reward;
  max-width: 100%;
  overflow: hidden;
  color: #f6d674;
  font-size: clamp(17px, 4.8vw, 21px);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-milestone > b.is-long { font-size: clamp(14px, 4vw, 17px); }
.activity-milestone > b.is-very-long { font-size: clamp(12px, 3.5vw, 15px); }
.activity-milestone-formula {
  grid-area: formula;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
}
.activity-milestone-progress {
  grid-area: progress;
  display: block;
  height: 7px;
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}
.activity-milestone-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--milestone-accent), #f4d16f);
  box-shadow: 0 0 10px color-mix(in srgb, var(--milestone-accent) 55%, transparent);
  transition: width 280ms ease;
}
.activity-milestone-progress-copy {
  grid-area: progress-copy;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}
.activity-milestone-status {
  grid-area: status;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(4, 18, 33, 0.45);
  font-size: 12px;
  font-weight: 900;
}
.activity-milestone-status svg { width: 15px; height: 15px; }
.activity-milestone:disabled { cursor: default; opacity: 1; }
.activity-milestone.is-locked {
  background-image:
    linear-gradient(100deg, rgba(4, 18, 36, 0.84) 0%, rgba(4, 54, 48, 0.57) 58%, rgba(3, 76, 50, 0.2) 100%),
    url("/assets/activities/invite-milestone-card-v1.jpg?v=1");
}
.activity-milestone.is-ready {
  border-color: #e9c967;
  background-image:
    linear-gradient(100deg, rgba(3, 18, 35, 0.76) 0%, rgba(1, 92, 62, 0.38) 58%, rgba(2, 104, 64, 0.08) 100%),
    url("/assets/activities/invite-milestone-card-v1.jpg?v=1");
  box-shadow: 0 9px 22px rgba(3, 99, 60, 0.2), 0 0 0 1px rgba(238, 206, 103, 0.16);
}
.activity-milestone.is-ready:not(:disabled) { cursor: pointer; }
.activity-milestone.is-ready:not(:disabled):hover { transform: translateY(-1px); }
.activity-milestone.is-ready:not(:disabled):active { transform: scale(0.985); }
.activity-milestone.is-ready .activity-milestone-status {
  border-color: rgba(255, 225, 130, 0.5);
  color: #071a2c;
  background: linear-gradient(135deg, #f6dc88, #e8bd4f);
}
.activity-milestone.is-claimed {
  border-color: rgba(101, 230, 171, 0.5);
  background-image:
    linear-gradient(100deg, rgba(3, 29, 36, 0.78) 0%, rgba(3, 102, 69, 0.43) 58%, rgba(3, 115, 72, 0.1) 100%),
    url("/assets/activities/invite-milestone-card-v1.jpg?v=1");
}
.activity-milestone.is-claimed .activity-milestone-status {
  color: #d8ffeb;
  background: rgba(9, 132, 80, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .activity-milestone,
  .activity-milestone-progress > i { transition: none; }
}

.activity-announcement-card { overflow: hidden; padding: 14px; }
.activity-announcement-image { display: block; width: calc(100% + 28px); margin: -14px -14px 14px; padding: 0; border: 0; background: #edf4f0; }
.activity-announcement-image img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.activity-announcement-card > span { color: #087847; font-size: 11px; font-weight: 800; }
.activity-announcement-card h3 { margin: 5px 0 7px; font-size: 22px; }
.activity-rich-copy { margin: 0; color: #566579; line-height: 1.58; white-space: pre-line; overflow-wrap: anywhere; }
.activity-announcement-card > button:last-child { margin-top: 14px; min-height: 36px; border: 0; border-radius: 9px; color: #fff; background: #087847; font-weight: 800; }

.activity-reward-code-card { display: grid; gap: 13px; padding: 18px 14px; }
.activity-reward-code-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #087847; background: #e7f7ee; }
.activity-reward-code-icon svg { width: 25px; height: 25px; }
.activity-reward-code-card .flash-drop-form { margin: 0; }
.activity-reward-code-card > p { margin: 0; color: #68778a; font-size: 11px; line-height: 1.5; }

.activity-collection-summary { padding: 22px 18px; text-align: center; }
.activity-collection-summary > span { color: #087847; font-size: 34px; font-weight: 900; }
.activity-collection-summary h3 { margin: 3px 0; }
.activity-collection-summary p { margin: 0; color: #708095; font-size: 12px; line-height: 1.45; }
.activity-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.activity-collection-grid > span { position: relative; display: grid; min-height: 108px; place-items: center; border: 1px dashed #cbd8d0; border-radius: 13px; color: #9aaba1; background: linear-gradient(145deg, #f8faf9, #eef3f0); }
.activity-collection-grid svg { width: 28px; height: 28px; }
.activity-collection-grid small { position: absolute; right: 7px; bottom: 5px; }

/* ARC weekly Card Collection */
.activity-card-collection {
  --collection-ink: #071b32;
  --collection-green: #087847;
  --collection-gold: #d5a52b;
  min-width: 0;
  gap: 12px;
}

.activity-card-collection > * { min-width: 0; }

.collection-week-card,
.collection-reward-guide,
.collection-play-guide,
.collection-main-tabs,
.collection-board-tabs,
.collection-view {
  border: 1px solid #d7e5dc;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(7, 45, 33, 0.055);
}

.collection-week-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  padding: 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(222, 175, 57, 0.2), transparent 38%),
    linear-gradient(145deg, #061d32, #075846 72%, #078554);
  color: #fff;
}

.collection-week-copy { display: grid; gap: 3px; min-width: 0; }
.collection-week-copy > span { display: flex; align-items: center; gap: 5px; color: #bdebd6; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.collection-week-copy > span svg { width: 13px; height: 13px; }
.collection-week-copy > strong { overflow: hidden; font-size: 17px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.collection-week-copy > small { color: rgba(255, 255, 255, 0.72); font-size: 9px; line-height: 1.35; }
.collection-week-progress { display: grid; min-width: 66px; align-content: center; justify-items: center; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 13px; background: rgba(0, 0, 0, 0.15); }
.collection-week-progress strong { color: #f7d875; font-size: 24px; line-height: 1; }
.collection-week-progress strong small { font-size: 11px; }
.collection-week-progress > span { margin-top: 3px; color: rgba(255, 255, 255, 0.73); font-size: 8px; text-align: center; }

.collection-week-track {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding-top: 5px;
}

.collection-week-track::before { position: absolute; top: 16px; right: 11%; left: 11%; height: 1px; content: ""; background: rgba(255, 255, 255, 0.2); }
.collection-week-track a { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: center; gap: 3px; color: rgba(255, 255, 255, 0.67); text-align: center; }
.collection-week-track a > i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: #075241; font-size: 9px; font-style: normal; font-weight: 900; }
.collection-week-track a > i svg { width: 12px; height: 12px; }
.collection-week-track a > b { font-size: 9px; }
.collection-week-track a > small { overflow: hidden; max-width: 100%; font-size: 7px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.collection-week-track a.active { color: #fff; }
.collection-week-track a.active > i { border-color: #f4d36a; color: #092036; background: #f4d36a; box-shadow: 0 0 0 3px rgba(244, 211, 106, 0.16); }
.collection-week-track a.done > i { border-color: #5fe1a3; color: #062318; background: #5fe1a3; }

.collection-reward-guide,
.collection-play-guide {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 12px;
}

.collection-reward-guide > header,
.collection-play-guide > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.collection-reward-guide > header > span,
.collection-play-guide > header > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #775a12;
  background: #fff2c6;
}

.collection-reward-guide > header svg,
.collection-play-guide > header svg { width: 17px; height: 17px; }
.collection-reward-guide > header > div,
.collection-play-guide > header > div { display: grid; min-width: 0; gap: 2px; }
.collection-reward-guide > header strong,
.collection-play-guide > header strong { color: var(--collection-ink); font-size: 13px; }
.collection-reward-guide > header small,
.collection-play-guide > header small { color: #6e7c8d; font-size: 8px; line-height: 1.4; }

.collection-reward-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.collection-reward-guide-grid > article {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid #dce7e0;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fbf9, #f1f7f3);
}

.collection-reward-guide-grid > article > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.collection-reward-guide-grid > article > div b {
  display: grid;
  min-width: 30px;
  min-height: 24px;
  place-items: center;
  padding: 3px 5px;
  border-radius: 7px;
  color: #fff;
  background: #087847;
  font-size: 8px;
}

.collection-reward-guide-grid > article > div span {
  color: #263c4f;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.collection-reward-guide-grid > article > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 0;
  padding: 6px 7px;
  border-radius: 8px;
  color: #6d7b8c;
  background: #fff;
  font-size: 8px;
}

.collection-reward-guide-grid > article > p strong {
  color: #087847;
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

.collection-reward-guide-grid ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-reward-guide-grid li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 4px 5px;
  border-radius: 6px;
  color: #7a8795;
  background: rgba(8, 120, 71, 0.055);
  font-size: 8px;
}

.collection-reward-guide-grid li strong {
  min-width: 0;
  color: #2b4051;
  font-size: 8px;
  text-align: right;
  white-space: nowrap;
}

.activity-card-collection [data-collection-reward-amount] {
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.collection-play-guide > header > span { color: #fff; background: #087847; }
.collection-play-guide-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.collection-play-guide-rules article { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px; padding: 9px; border: 1px solid #dce7e0; border-radius: 11px; background: #f3f8f5; }
.collection-play-guide-rules article > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #087847; background: #dff2e7; }
.collection-play-guide-rules article.is-permanent > span { color: #785a0f; background: #fff0bf; }
.collection-play-guide-rules article > span svg { width: 14px; height: 14px; }
.collection-play-guide-rules article > div { min-width: 0; }
.collection-play-guide-rules strong { display: block; color: #1d3447; font-size: 10px; line-height: 1.25; }
.collection-play-guide-rules p { margin: 3px 0 0; color: #687789; font-size: 8px; line-height: 1.45; }
.collection-play-levels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
.collection-play-levels > span { display: grid; min-width: 0; justify-items: center; gap: 1px; padding: 5px 2px; border: 1px solid #dfebe4; border-radius: 7px; background: #fff; }
.collection-play-levels b { color: #087847; font-size: 9px; }
.collection-play-levels small { color: #6d7b8c; font-size: 8px; }

.collection-main-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
}

.collection-main-tabs a { display: grid; min-width: 0; min-height: 51px; place-items: center; align-content: center; gap: 3px; border-radius: 11px; color: #66758a; font-size: 9px; font-weight: 800; }
.collection-main-tabs a svg { width: 18px; height: 18px; }
.collection-main-tabs a.active { color: #fff; background: linear-gradient(135deg, #087847, #075c47); box-shadow: 0 5px 12px rgba(8, 120, 71, 0.2); }

.collection-state-card { display: grid; justify-items: center; gap: 7px; }
.collection-state-card > svg { width: 22px; height: 22px; color: #087847; }
.collection-state-card > p { margin: 0; }

.collection-view { display: grid; gap: 12px; padding: 12px; }

.collection-board-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: #f0f6f2;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.collection-board-tabs a { position: relative; display: grid; min-width: 0; min-height: 43px; align-content: center; justify-items: center; gap: 1px; border-radius: 9px; color: #66758a; }
.collection-board-tabs a > span { font-size: 10px; font-weight: 900; }
.collection-board-tabs a > small { font-size: 8px; }
.collection-board-tabs a > i { position: absolute; top: -6px; right: -1px; padding: 2px 4px; border-radius: 999px; color: #fff; background: #536577; font-size: 6px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.collection-board-tabs a.active { color: #fff; background: #087847; }
.collection-board-tabs a.active > i { color: #082238; background: #f2cf64; }

.collection-board-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.collection-board-heading > div { min-width: 0; }
.collection-board-heading > div > span,
.collection-section-heading > span { color: #087847; font-size: 9px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.collection-board-heading h3,
.collection-section-heading h3 { margin: 2px 0 3px; color: var(--collection-ink); font-size: 18px; line-height: 1.1; }
.collection-board-heading p,
.collection-section-heading p { margin: 0; color: #6d7b8d; font-size: 9px; line-height: 1.4; }
.collection-board-heading > strong { display: grid; min-width: 55px; height: 55px; place-items: center; align-content: center; border: 1px solid #dbe7df; border-radius: 16px; color: #087847; background: #f2f8f4; font-size: 22px; line-height: 1; }
.collection-board-heading > strong small { font-size: 9px; }
.collection-section-heading { padding: 2px; }

.collection-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.collection-card {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 0.77;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 7px 4px;
  border: 1px solid #c8d7ce;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #113852, #087454);
  box-shadow: 0 4px 10px rgba(6, 39, 29, 0.11);
  isolation: isolate;
}

.collection-card > img,
.collection-card-shade { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.collection-card > img { object-fit: cover; }
.collection-card-shade { z-index: -1; background: linear-gradient(180deg, rgba(3, 22, 36, 0.2), rgba(3, 22, 36, 0.02) 42%, rgba(3, 22, 36, 0.82)); }
.collection-card-day { position: absolute; top: 5px; left: 5px; padding: 2px 4px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: #fff; background: rgba(4, 22, 36, 0.55); font-size: 6px; font-weight: 900; letter-spacing: 0.06em; }
.collection-card > strong { max-width: 95%; overflow: hidden; color: #fff; font-size: clamp(27px, 11vw, 45px); font-weight: 1000; line-height: 0.95; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42); text-overflow: ellipsis; white-space: nowrap; }
.collection-card-product { filter: saturate(1.03) contrast(1.02); }
.collection-card-product ~ strong { font-size: clamp(23px, 8vw, 36px); }
.collection-card > small { position: absolute; right: 4px; bottom: 5px; left: 4px; overflow: hidden; color: rgba(255, 255, 255, 0.92); font-size: 7px; font-weight: 800; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.collection-card-state { position: absolute; top: 5px; right: 5px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #082238; background: #f4d36a; }
.collection-card-state svg { width: 11px; height: 11px; }
.collection-card.is-owned { border-color: #e3c45d; box-shadow: 0 5px 14px rgba(209, 163, 35, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.collection-card.is-missing { border-style: dashed; filter: grayscale(0.9); box-shadow: none; }
.collection-card.is-missing > img { opacity: 0.18; }
.collection-card.is-missing .collection-card-shade { background: rgba(14, 31, 43, 0.85); }
.collection-card.is-missing > strong { color: rgba(255, 255, 255, 0.36); text-shadow: none; }
.collection-card.is-missing .collection-card-state { color: #84919c; background: rgba(255, 255, 255, 0.15); }
.collection-card.is-gift-locked .collection-card-state { color: #fff; background: #536577; }

.collection-auto-note,
.collection-gift-rule { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 9px; border-radius: 10px; color: #536477; background: #f1f7f3; font-size: 8px; line-height: 1.4; }
.collection-auto-note svg,
.collection-gift-rule svg { flex: 0 0 auto; width: 14px; height: 14px; color: #087847; }

.collection-pack-button,
.collection-reward-card {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  border-radius: 13px;
  font: inherit;
  text-align: left;
}

.collection-pack-button { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding: 10px; color: #fff; background: linear-gradient(135deg, #0b7652, #075b49); }
.collection-pack-button > svg:first-child { width: 24px; height: 24px; color: #f4d36a; }
.collection-pack-button > svg:last-child { width: 16px; height: 16px; }
.collection-pack-button span { display: grid; min-width: 0; gap: 2px; }
.collection-pack-button strong { font-size: 11px; }
.collection-pack-button small { color: rgba(255, 255, 255, 0.72); font-size: 8px; line-height: 1.25; }

.collection-reward-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label amount" "state state"; gap: 6px 8px; padding: 11px; border: 1px solid #dde7e1; color: #657485; background: #f5f8f6; }
.collection-reward-card > span { grid-area: label; display: flex; align-items: center; gap: 7px; min-width: 0; }
.collection-reward-card > span svg { flex: 0 0 auto; width: 20px; height: 20px; }
.collection-reward-card > span small { font-size: 9px; font-weight: 800; }
.collection-reward-card > strong { grid-area: amount; color: #394c5c; font-size: 16px; }
.collection-reward-card > b { grid-area: state; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; border-radius: 8px; background: #e6ece8; font-size: 9px; }
.collection-reward-card > b svg { width: 12px; height: 12px; }
.collection-reward-card:disabled { cursor: default; opacity: 1; }
.collection-reward-card.is-ready { border-color: #d9b643; color: #fff; background: linear-gradient(135deg, #0a6f4e, #063d39); box-shadow: 0 7px 16px rgba(7, 94, 67, 0.19); }
.collection-reward-card.is-ready > strong { color: #f6d66b; }
.collection-reward-card.is-ready > b { color: #082238; background: #f2ce62; }
.collection-reward-card.is-claimed { color: #247052; background: #ebf7ef; }

.collection-pending-claims { display: grid; gap: 7px; padding: 9px; border: 1px solid #efd579; border-radius: 13px; background: linear-gradient(145deg, #fffbeb, #f4faf6); }
.collection-pending-claims > header { display: grid; gap: 2px; }
.collection-pending-claims > header > span { display: flex; align-items: center; gap: 5px; color: #76571d; font-size: 10px; font-weight: 900; }
.collection-pending-claims > header svg { width: 15px; height: 15px; color: #be8e1c; }
.collection-pending-claims > header > small { color: #7a786b; font-size: 7px; line-height: 1.3; }
.collection-pending-claims > div { display: grid; gap: 6px; }
.collection-pending-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; width: 100%; min-width: 0; min-height: 59px; padding: 8px; border: 1px solid #eadb9e; border-radius: 10px; color: #102338; background: #fff; font: inherit; text-align: left; box-shadow: 0 3px 9px rgba(98, 74, 15, 0.06); }
.collection-pending-card > span { display: grid; min-width: 0; gap: 1px; }
.collection-pending-card > span > small { color: #8a722d; font-size: 7px; font-weight: 800; }
.collection-pending-card > span > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collection-pending-card > span > em { color: #758293; font-size: 7px; font-style: normal; }
.collection-pending-card > b { display: grid; justify-items: end; color: #087847; font-size: 12px; text-align: right; }
.collection-pending-card > b > small { color: #a07b1a; font-size: 7px; }
.collection-pending-card > svg { width: 14px; height: 14px; color: #a57e1d; }
.collection-pending-card:disabled { cursor: default; opacity: 0.68; }

.collection-overall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.collection-overall-grid article { display: grid; min-width: 0; min-height: 98px; align-content: center; justify-items: center; gap: 5px; padding: 8px 4px; border: 1px dashed #ccd9d1; border-radius: 13px; color: #85918c; background: #f4f7f5; text-align: center; }
.collection-overall-grid article svg { width: 25px; height: 25px; }
.collection-overall-grid article strong { font-size: 9px; }
.collection-overall-grid article small { font-size: 7px; }
.collection-overall-grid article.complete { border-style: solid; border-color: #dfbe51; color: #087847; background: linear-gradient(145deg, #fff9df, #eef9f2); box-shadow: 0 4px 12px rgba(210, 171, 53, 0.12); }
.collection-overall-grid article.complete svg { color: #d1a426; }

.collection-backpack-list { display: grid; gap: 8px; }
.collection-backpack-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid #dbe6df; border-radius: 13px; background: #fbfdfb; }
.collection-backpack-row > .collection-card { width: 54px; height: 70px; aspect-ratio: auto; border-radius: 9px; }
.collection-backpack-row > .collection-card > strong { font-size: 22px; }
.collection-backpack-row > .collection-card > small { display: none; }
.collection-backpack-row > div { display: grid; min-width: 0; gap: 2px; }
.collection-backpack-row > div > span { overflow: hidden; color: #087847; font-size: 7px; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.collection-backpack-row > div > strong { overflow: hidden; color: #102338; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.collection-backpack-row > div > small { color: #748194; font-size: 8px; }
.collection-backpack-row > a,
.collection-backpack-row > b { display: inline-flex; min-height: 31px; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; border-radius: 8px; font-size: 9px; font-weight: 900; }
.collection-backpack-row > a { color: #fff; background: #087847; }
.collection-backpack-row > b { color: #718091; background: #e8eeea; }
.collection-backpack-row > a svg,
.collection-backpack-row > b svg { width: 13px; height: 13px; }

.collection-empty-state { display: grid; min-height: 150px; align-content: center; justify-items: center; gap: 6px; padding: 18px; border: 1px dashed #cddad2; border-radius: 13px; color: #778597; background: #f7faf8; text-align: center; }
.collection-empty-state > svg { width: 28px; height: 28px; color: #9aa8a0; }
.collection-empty-state > strong { color: #33495c; font-size: 13px; }
.collection-empty-state > p { max-width: 230px; margin: 0; font-size: 9px; line-height: 1.4; }
.collection-empty-state > a { margin-top: 3px; padding: 7px 10px; border-radius: 8px; color: #fff; background: #087847; font-size: 9px; font-weight: 900; }

.collection-gift-selected { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label change" "card change"; align-items: center; gap: 2px 8px; padding: 10px; border: 1px solid #d8e5dd; border-radius: 12px; background: #f4f9f6; }
.collection-gift-selected > span { grid-area: label; color: #718092; font-size: 8px; }
.collection-gift-selected > strong { grid-area: card; color: #087847; font-size: 15px; }
.collection-gift-selected > a { grid-area: change; padding: 6px 8px; border-radius: 8px; color: #087847; background: #fff; font-size: 9px; font-weight: 900; }

.collection-gift-form { display: grid; gap: 11px; }
.collection-gift-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.collection-gift-form legend { grid-column: 1 / -1; margin-bottom: 5px; color: #5f6f80; font-size: 9px; font-weight: 800; }
.collection-gift-form fieldset label { position: relative; }
.collection-gift-form fieldset input { position: absolute; opacity: 0; }
.collection-gift-form fieldset span { display: grid; min-height: 37px; place-items: center; padding: 6px; border: 1px solid #d6e2da; border-radius: 9px; color: #5f6f80; background: #f8faf9; font-size: 9px; font-weight: 800; }
.collection-gift-form fieldset input:checked + span { border-color: #087847; color: #087847; background: #e8f6ee; box-shadow: inset 0 0 0 1px #087847; }
.collection-gift-form > label { display: grid; gap: 4px; }
.collection-gift-form > label > span { color: #5f6f80; font-size: 9px; font-weight: 800; }
.collection-gift-form input[name="identifier"] { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid #cbdad1; border-radius: 10px; color: #102338; background: #fff; }
.collection-gift-form > button,
.collection-gift-confirm form button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; color: #fff; background: #087847; font-size: 11px; font-weight: 900; }
.collection-gift-form button svg,
.collection-gift-confirm button svg { width: 16px; height: 16px; }

.collection-gift-warning { display: flex; align-items: flex-start; gap: 6px; padding: 8px 9px; border: 1px solid #f0d79c; border-radius: 9px; color: #76561b; background: #fff9e9; font-size: 8px; line-height: 1.4; }
.collection-gift-warning svg { flex: 0 0 auto; width: 14px; height: 14px; }
.collection-gift-confirm { display: grid; gap: 8px; padding: 12px; border: 1px solid #d5e3da; border-radius: 13px; background: #f8fbf9; text-align: center; }
.collection-gift-confirm > span { display: flex; align-items: center; justify-content: center; gap: 5px; color: #087847; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.collection-gift-confirm > span svg { width: 14px; height: 14px; }
.collection-gift-confirm > strong { color: #102338; font-size: 21px; }
.collection-gift-confirm > p { margin: 0; color: #617185; font-size: 9px; line-height: 1.4; }
.collection-gift-confirm form { display: grid; }
.collection-gift-cancel { min-height: 34px; color: #607083; background: transparent; font-size: 9px; font-weight: 800; }

.collection-seal { display: inline-flex; min-width: 61px; min-height: 31px; align-items: center; justify-content: center; gap: 4px; padding: 5px 7px; border-radius: 999px; color: #087847; background: #e7f6ed; font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.collection-seal svg { width: 12px; height: 12px; }
.collection-seal.closed { color: #596979; background: #e8eeea; }
.collection-seal.upcoming { color: #7b6120; background: #fff4cf; }
.collection-ranking-list { display: grid; gap: 6px; }
.collection-ranking-list article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-width: 0; min-height: 54px; padding: 7px 8px; border: 1px solid #e0e8e3; border-radius: 11px; background: #fafcfb; }
.collection-ranking-list article > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #536577; font-size: 11px; }
.collection-ranking-list article:nth-child(1) > b { color: #513800; background: #f0c94f; }
.collection-ranking-list article:nth-child(2) > b { color: #3c4b58; background: #d7e0e5; }
.collection-ranking-list article:nth-child(3) > b { color: #fff; background: #b97a43; }
.collection-ranking-list article > span { display: grid; min-width: 0; gap: 2px; }
.collection-ranking-list article > span strong { overflow: hidden; color: #13283c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collection-ranking-list article > span small { color: #788697; font-size: 7px; }
.collection-ranking-list article > em { max-width: 78px; color: #087847; font-size: 8px; font-style: normal; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
.collection-ranking-list article > svg { width: 17px; height: 17px; color: #d3a82f; }
.collection-ranking-list article.is-empty { opacity: 0.65; }
.collection-ranking-list article.is-me { border-color: #d7b74d; background: #fffae9; box-shadow: inset 3px 0 #d7b74d; }
.collection-ranking-rule { padding: 10px; border-radius: 11px; color: #627185; background: #f1f6f3; }
.collection-ranking-rule strong { color: #253b4e; font-size: 10px; }
.collection-ranking-rule p { margin: 4px 0 7px; font-size: 8px; line-height: 1.4; }
.collection-ranking-rule span { color: #087847; font-size: 9px; font-weight: 900; }
.collection-ranking-rule span > b { font: inherit; }

@media (max-width: 390px) {
  .collection-reward-guide-grid { grid-template-columns: 1fr; }
  #app:has(> .floating-checkin) .activity-card-collection .collection-reward-guide { margin-right: 82px; }
}

@media (max-width: 360px) {
  .collection-reward-guide,
  .collection-play-guide { padding: 10px; }
  .collection-reward-guide-grid { gap: 6px; }
  .collection-reward-guide-grid > article { padding: 7px; }
  .collection-play-guide-rules { grid-template-columns: 1fr; }
  .collection-play-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-view { padding: 10px; }
  .collection-card-grid { gap: 6px; }
  .collection-card { border-radius: 10px; }
  .collection-card > strong { font-size: clamp(25px, 10.5vw, 38px); }
  .collection-week-track a > small { font-size: 6px; }
  .collection-ranking-list article { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 5px; padding: 6px; }
  .collection-ranking-list article > em { max-width: 66px; font-size: 7px; }
  .collection-ranking-list article > svg { display: none; }
}

.activity-stock-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; }
.activity-stock-rule div { display: flex; align-items: center; gap: 7px; min-width: 0; color: #586879; font-size: 11px; }
.activity-stock-rule svg { flex: 0 0 auto; width: 17px; height: 17px; color: #087847; }
.activity-stock-rule > strong { flex: 0 0 auto; color: #087847; font-size: 11px; }
.activity-stock-plans { display: grid; gap: 10px; }
.activity-stock-plan {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  border: 1px solid rgba(214, 185, 93, 0.48);
  border-radius: 17px;
  color: #fff;
  background: #073d37;
  box-shadow: 0 10px 24px rgba(5, 46, 40, 0.14);
  isolation: isolate;
}
.activity-stock-plan-image,
.activity-stock-plan-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.activity-stock-plan-image { z-index: -3; object-fit: cover; transition: transform 180ms ease; }
.activity-stock-plan-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(2, 25, 28, 0.94) 0%, rgba(4, 43, 39, 0.82) 54%, rgba(4, 42, 39, 0.42) 100%), linear-gradient(0deg, rgba(1, 18, 20, 0.74), transparent 58%);
}
.activity-stock-plan-content { display: grid; align-content: space-between; min-height: 214px; padding: 15px; pointer-events: none; }
.activity-stock-plan header { display: grid; gap: 3px; max-width: 72%; }
.activity-stock-plan header span { color: #f7d878; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.activity-stock-plan header strong { color: #fff; font-size: 21px; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.28); }
.activity-stock-plan dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 10px; border: 1px solid rgba(255,255,255,.19); border-radius: 11px; background: rgba(1, 29, 29, .56); backdrop-filter: blur(5px); }
.activity-stock-plan dl > div { min-width: 0; padding: 9px 6px; text-align: center; }
.activity-stock-plan dl > div + div { border-left: 1px solid rgba(255,255,255,.15); }
.activity-stock-plan dt { color: rgba(238, 248, 246, .76); font-size: 8px; }
.activity-stock-plan dd { margin: 3px 0 0; color: #fff2b7; font-size: 11px; font-weight: 900; overflow-wrap: anywhere; }
.activity-stock-plan-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: #fff; font-size: 10px; font-weight: 800; }
.activity-stock-plan-status > span { display: inline-flex; align-items: center; gap: 6px; }
.activity-stock-plan-status svg { width: 15px; height: 15px; color: #f5d36a; }
.activity-stock-plan-status > svg { flex: 0 0 auto; }
.activity-stock-plan-status.is-blocked { color: rgba(255,255,255,.78); }
.activity-stock-plan-hit { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.activity-stock-plan.is-selectable:active { transform: scale(.992); }
.activity-stock-plan.is-selectable:hover .activity-stock-plan-image { transform: scale(1.025); }
.activity-stock-plan.is-disabled .activity-stock-plan-image { filter: saturate(.55) brightness(.76); }
.activity-stock-plan.is-owned { border-color: rgba(255,255,255,.25); }
.activity-stock-purchase-layer { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; justify-items: center; }
.activity-stock-purchase-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 18, 21, .66); backdrop-filter: blur(3px); }
.activity-stock-purchase-sheet { position: relative; z-index: 1; width: min(100%, 520px); display: grid; gap: 14px; padding: 9px 16px calc(18px + env(safe-area-inset-bottom)); color: #0b2330; border: 1px solid #d7e3dc; border-bottom: 0; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #fff, #f4faf7); box-shadow: 0 -20px 55px rgba(0, 24, 27, .28); }
.activity-stock-purchase-grip { width: 44px; height: 4px; justify-self: center; border-radius: 999px; background: #cedbd5; }
.activity-stock-purchase-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-stock-purchase-sheet > header small { color: #087847; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.activity-stock-purchase-sheet h3 { margin: 3px 0 0; font-size: 21px; }
.activity-stock-purchase-sheet > header button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; padding: 0; place-items: center; border: 1px solid #d8e5de; border-radius: 50%; color: #3f5261; background: #fff; }
.activity-stock-purchase-sheet > header svg { width: 18px; height: 18px; }
.activity-stock-purchase-sheet dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid #dce7e1; border-radius: 12px; background: #fff; }
.activity-stock-purchase-sheet dl > div { min-width: 0; padding: 10px 7px; text-align: center; }
.activity-stock-purchase-sheet dl > div + div { border-left: 1px solid #e1ebe5; }
.activity-stock-purchase-sheet dt { color: #748390; font-size: 8px; }
.activity-stock-purchase-sheet dd { margin: 4px 0 0; color: #087847; font-size: 11px; font-weight: 900; overflow-wrap: anywhere; }
.activity-stock-purchase-warning { display: flex; gap: 9px; padding: 10px; border: 1px solid #efd99c; border-radius: 11px; color: #644a08; background: #fff9e8; }
.activity-stock-purchase-warning > svg { width: 19px; height: 19px; flex: 0 0 auto; color: #a97400; }
.activity-stock-purchase-warning p { display: grid; gap: 2px; margin: 0; }
.activity-stock-purchase-warning strong { font-size: 11px; }
.activity-stock-purchase-warning span { font-size: 9px; line-height: 1.45; }
.activity-stock-purchase-sheet form { display: grid; gap: 10px; }
.activity-stock-purchase-sheet label { display: grid; gap: 5px; }
.activity-stock-purchase-sheet label span { color: #536674; font-size: 10px; font-weight: 800; }
.activity-stock-purchase-sheet input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #bdd5c8; border-radius: 10px; color: #0b3d34; background: #fff; font-size: 16px; font-weight: 900; }
.activity-stock-purchase-sheet input[readonly] { background: #f1f7f4; }
.activity-stock-purchase-sheet .activity-stock-purchase-calculation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.activity-stock-purchase-calculation .is-insufficient { background: #fff1ee; }
.activity-stock-purchase-calculation .is-insufficient dd { color: #b3261e; }
.activity-stock-insufficient { margin-top: -4px; color: #b3261e; font-size: 10px; font-weight: 800; }
.activity-stock-insufficient[hidden] { display: none; }
.activity-stock-purchase-sheet form button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 9px 14px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #086c4c, #0b9670); font-weight: 900; box-shadow: 0 8px 18px rgba(8, 120, 71, .2); }
.activity-stock-purchase-sheet form button:disabled { color: #7e8d88; background: #e2e9e5; box-shadow: none; }
.activity-stock-purchase-sheet form button svg { width: 17px; height: 17px; }
.activity-stock-orders { display: grid; gap: 8px; padding: 14px; }
.activity-stock-orders h3 { margin: 0 0 3px; }
.activity-stock-orders article { padding: 10px; border-radius: 10px; background: #f4f8f5; }
.activity-stock-orders article > div { display: flex; justify-content: space-between; gap: 8px; }
.activity-stock-orders article p { margin: 5px 0; color: #536477; font-size: 11px; }
.activity-stock-orders article small { color: #788697; }

@media (max-width: 360px) {
  .activity-tile { min-height: 116px; }
  .activity-tile-copy { min-height: 116px; padding-right: 103px; }
  .activity-tile-art { right: 4px; width: 96px; height: 96px; }
  .activity-tile-art svg { width: 48px; height: 48px; }
  .activity-stock-plan-content { padding: 13px; }
  .activity-stock-plan dl > div { padding-inline: 4px; }
  .activity-stock-plan dd { font-size: 10px; }
  .activity-stock-purchase-sheet { padding-inline: 13px; }
}

@media (max-width: 340px) {
  .activity-milestone {
    grid-template-columns: minmax(0, 1fr) 86px;
    min-height: 150px;
    gap: 4px 8px;
    padding: 11px;
  }
  .activity-milestone-status { min-height: 72px; }
}

/* Wallet hub */
.wallet-page {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.wallet-balance-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d3e4d9;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(8, 75, 48, 0.08);
}

.wallet-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #dce8e0;
}

.wallet-balance-item {
  min-width: 0;
  padding: 18px 15px;
  background: #ffffff;
}

.wallet-balance-item span {
  display: block;
  color: #66766e;
  font-size: 11px;
  font-weight: 750;
}

.wallet-balance-item strong {
  display: block;
  min-width: 0;
  margin-top: 7px;
  color: #087847;
  font-size: clamp(17px, 5.3vw, 23px);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.wallet-balance-item.is-locked strong {
  color: #183b56;
}

.wallet-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
  background: #f8fbf9;
  border-top: 1px solid #e1ebe4;
}

.wallet-primary-actions a {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 850;
}

.wallet-primary-actions a svg {
  width: 17px;
  height: 17px;
}

.wallet-primary-actions .is-deposit {
  color: #ffffff;
  background: #087847;
  border: 1px solid #087847;
  box-shadow: 0 8px 18px rgba(8, 120, 71, 0.18);
}

.wallet-primary-actions .is-withdraw {
  color: #17324a;
  background: #ffffff;
  border: 1px solid #b9c9d7;
}

.wallet-record-section {
  min-width: 0;
  margin-top: 0;
  padding: 14px;
  border: 1px solid #d6e5da;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 75, 48, 0.055);
}

.wallet-record-section .section-title {
  margin-bottom: 12px;
}

.wallet-record-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}

.wallet-record-filter button {
  min-width: 0;
  padding: 6px 3px;
  font-size: 11px;
  white-space: nowrap;
}

.wallet-record-list {
  min-width: 0;
}

.wallet-record-list .record {
  gap: 8px;
}

.wallet-record-list .record > div {
  min-width: 0;
  flex: 1;
}

.wallet-record-list .record strong,
.wallet-record-list .record span {
  overflow-wrap: anywhere;
}

.wallet-record-list .record b {
  min-width: 0;
  max-width: 44%;
  flex: 0 1 auto;
  color: inherit;
  font-size: clamp(11px, 3.5vw, 14px);
  line-height: 1.25;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.wallet-record-list .record b.income {
  color: var(--success);
}

.wallet-record-list .record b.outcome {
  color: var(--danger);
}

.wallet-view-all {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
  color: #087847;
  background: #f0f8f3;
  border: 1px solid #d2e6d9;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

.wallet-view-all svg {
  width: 15px;
  height: 15px;
}

.get-user-screen .user-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 340px) {
  .wallet-balance-item {
    padding: 15px 11px;
  }

  .wallet-primary-actions {
    padding: 10px;
  }

  .wallet-record-section {
    padding: 12px 10px;
  }

  .wallet-record-filter button {
    font-size: 10px;
  }
}

/* Mobile-readable team relationship filters */
.team-level-tabs button {
  min-height: 76px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px;
  color: #41594c;
  background: #ffffff;
  border: 1px solid #cfe1d5;
  box-shadow: 0 7px 17px rgba(8, 75, 48, 0.06);
}

.team-level-tabs button strong {
  color: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.team-level-tabs button span {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 3px 7px;
  color: #087847;
  background: #e9f7ef;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.team-level-tabs button.active {
  color: #ffffff;
  background: linear-gradient(135deg, #087847, #075c34);
  border-color: #087847;
  box-shadow: 0 10px 22px rgba(8, 120, 71, 0.22);
}

.team-level-tabs button.active strong,
.team-level-tabs button.active span {
  color: inherit;
}

.team-level-tabs button.active span {
  background: rgba(255, 255, 255, 0.18);
}

.team-level-tabs button:focus-visible {
  outline: 3px solid rgba(8, 120, 71, 0.24);
  outline-offset: 2px;
}

.team-selected-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #087847;
  background: #e9f7ef;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .team-level-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ARC account centre */
.arc-account-screen {
  min-height: 100vh;
  padding: 14px 14px calc(98px + env(safe-area-inset-bottom));
  color: #102b22;
  background:
    radial-gradient(circle at 94% 4%, rgba(201, 161, 63, 0.15), transparent 29%),
    linear-gradient(180deg, #edf7f1 0%, #f8fbf8 52%, #eef7f1 100%);
}

.arc-account-screen::before {
  display: none;
}

.arc-account-screen > * {
  width: min(100%, 660px);
  margin-right: auto;
  margin-left: auto;
}

.arc-account-hero {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  color: #ffffff;
  background:
    linear-gradient(105deg, rgba(4, 48, 42, 0.98) 0%, rgba(5, 71, 60, 0.94) 54%, rgba(7, 73, 60, 0.72) 100%),
    url("/assets/arc/arc-auth-showroom.jpg") 76% center / cover no-repeat;
  border: 1px solid rgba(225, 190, 102, 0.28);
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(4, 51, 42, 0.2);
}

.arc-account-hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  bottom: -82px;
  pointer-events: none;
  border: 1px solid rgba(242, 207, 117, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(242, 207, 117, 0.045);
}

.arc-account-hero > * {
  position: relative;
  z-index: 1;
}

.arc-account-brandline {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.arc-account-wordmark {
  color: #f0cd71;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
}

.arc-account-company {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-account-member-badge {
  padding: 5px 8px;
  color: #f5d784;
  background: rgba(242, 207, 117, 0.1);
  border: 1px solid rgba(242, 207, 117, 0.3);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.arc-account-identity {
  min-width: 0;
  padding: 22px 0 4px;
}

.arc-account-identity-copy {
  min-width: 0;
}

.arc-account-identity-copy small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.63);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.arc-account-identity-copy h1 {
  min-width: 0;
  margin: 0;
  color: #ffffff;
  font-size: clamp(20px, 6vw, 29px);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.arc-account-expiry-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.arc-account-expiry {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  color: #fff7dc;
  background: rgba(230, 189, 85, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
}

.arc-account-expiry b,
.arc-account-expiry time {
  min-width: 0;
  display: block;
  color: inherit;
  overflow-wrap: anywhere;
}

.arc-account-expiry b {
  font-size: 10px;
  font-weight: 900;
}

.arc-account-expiry time {
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  line-height: 1.25;
}

.arc-account-assets,
.arc-account-services {
  min-width: 0;
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d7e7dc;
  border-radius: 18px;
  box-shadow: 0 13px 30px rgba(8, 72, 49, 0.08);
}

.arc-account-section-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.arc-account-section-heading div {
  min-width: 0;
}

.arc-account-section-heading small {
  display: block;
  color: #a47722;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.arc-account-section-heading h2 {
  margin: 3px 0 0;
  color: #12382c;
  font-size: 17px;
  line-height: 1.2;
}

.arc-account-section-heading > span {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #567067;
  background: #eef7f1;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.arc-account-fund-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 8px;
}

.arc-account-fund {
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 13px;
  padding: 13px;
  border-radius: 14px;
}

.arc-account-fund span {
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.arc-account-fund strong {
  min-width: 0;
  font-size: clamp(17px, 5vw, 27px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.arc-account-fund.is-available {
  color: #ffffff;
  background: linear-gradient(135deg, #09604f, #0d8268);
  box-shadow: 0 12px 25px rgba(7, 100, 79, 0.2);
}

.arc-account-fund.is-available span {
  color: rgba(255, 255, 255, 0.74);
}

.arc-account-fund.is-locked {
  color: #183c31;
  background: linear-gradient(145deg, #f5f8f2, #e8f2e9);
  border: 1px solid #d4e3d6;
}

.arc-account-fund.is-locked span {
  color: #697b74;
}

.arc-account-invite {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  background: linear-gradient(110deg, #fffaf0, #ffffff 62%);
  border: 1px solid #ead9ad;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(117, 81, 17, 0.07);
}

.arc-account-invite-icon,
.arc-account-service-icon,
.arc-account-logout-icon {
  display: grid;
  place-items: center;
}

.arc-account-invite-icon {
  width: 42px;
  height: 42px;
  color: #8e681c;
  background: #f8e9bd;
  border-radius: 13px;
}

.arc-account-invite-icon svg {
  width: 22px;
  height: 22px;
}

.arc-account-invite-copy {
  min-width: 0;
}

.arc-account-invite-copy small,
.arc-account-invite-copy strong {
  display: block;
}

.arc-account-invite-copy small {
  margin-bottom: 3px;
  color: #8b7851;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.arc-account-invite-copy strong {
  min-width: 0;
  color: #17372d;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arc-account-copy-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: #ffffff;
  background: #0a6956;
  border: 1px solid #0a6956;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 8px 17px rgba(8, 96, 77, 0.16);
}

.arc-account-copy-button svg {
  width: 14px;
  height: 14px;
}

.arc-account-copy-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.arc-support-entry {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid #b8d4c9;
  border-radius: 14px;
  background: #edf7f2;
  color: #143f34;
  text-decoration: none;
}

.arc-support-entry-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #075f59;
  color: #fff;
}

.arc-support-entry-icon svg {
  width: 24px;
  height: 24px;
}

.arc-support-entry-copy {
  flex: 1;
  min-width: 0;
}

.arc-support-entry-copy strong,
.arc-support-entry-copy small {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.arc-support-entry-copy strong {
  font-size: 16px;
}

.arc-support-entry-copy small {
  margin-top: 3px;
  color: #506b60;
  font-size: 12px;
}

.arc-support-entry-arrow {
  display: flex;
  flex: 0 0 20px;
}

.arc-support-entry-arrow svg {
  width: 20px;
  height: 20px;
}

.arc-support-entry:hover {
  border-color: #075f59;
}

.arc-support-entry:focus-visible {
  outline: 3px solid #b4983d;
  outline-offset: 3px;
}

.arc-home-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.arc-home-quick-links > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 10px;
  border: 1px solid #b8d4c9;
  border-radius: 12px;
  background: #edf7f2;
  color: #143f34;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.arc-home-quick-links .arc-support-entry-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 0;
  color: #075f59;
  background: none;
}

.arc-home-quick-links .arc-support-entry-copy {
  flex: 0 1 auto;
}

.arc-home-quick-links strong,
.arc-home-quick-links .arc-home-download span {
  font-size: 13px;
  line-height: 1.3;
}

.arc-home-download > svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.arc-home-download:focus-visible {
  outline: 3px solid #b4983d;
  outline-offset: 3px;
}

.arc-support-dialog {
  width: min(410px, calc(100% - 24px));
  max-height: calc(100svh - 32px);
  box-sizing: border-box;
  overflow: auto;
  padding: 20px;
  border: 0;
  border-radius: 20px;
  background: #fffdf9;
  color: #143f34;
  box-shadow: 0 24px 70px #0004;
}

.arc-support-dialog::backdrop {
  background: #082c27aa;
}

.arc-support-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.arc-support-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.arc-support-dialog > p {
  color: #506b60;
  font-size: 13px;
  line-height: 1.5;
}

.arc-support-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #edf3f0;
  color: #143f34;
  cursor: pointer;
}

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

.arc-support-choice-grid .support-contact-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 110px;
  padding: 14px 8px;
  gap: 8px;
  border: 1px solid #c9dfd4;
  border-radius: 14px;
  color: #143f34;
  background: #edf7f2;
  text-align: center;
}

.arc-support-choice-grid .support-contact-main strong {
  font-size: 13px;
  white-space: normal;
  line-height: 1.35;
}

.arc-support-choice-grid .support-contact-action {
  display: none;
}

.arc-support-dialog .arc-support-status {
  margin-bottom: 0;
  color: #9d3f37;
}

.arc-support-status:empty {
  display: none;
}

.arc-support-dialog button:focus-visible {
  outline: 3px solid #b4983d;
  outline-offset: 2px;
}

.arc-account-service-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.arc-account-service-card {
  position: relative;
  min-width: 0;
  min-height: 122px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 10px 8px;
  padding: 12px;
  color: #173a2e;
  background: linear-gradient(145deg, #f7fbf8, #eef6f0);
  border: 1px solid #d5e5d9;
  border-radius: 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.arc-account-service-card:hover {
  border-color: #a9cfb8;
  box-shadow: 0 10px 22px rgba(9, 85, 58, 0.1);
  transform: translateY(-1px);
}

.arc-account-service-icon {
  width: 44px;
  height: 44px;
  color: #087159;
  background: #ffffff;
  border: 1px solid #cfe3d6;
  border-radius: 13px;
  box-shadow: 0 7px 15px rgba(9, 85, 58, 0.08);
}

.arc-account-service-icon svg,
.arc-account-service-icon img {
  width: 24px;
  height: 24px;
}

.arc-account-service-copy {
  min-width: 0;
  grid-column: 1 / -1;
}

.arc-account-service-copy strong,
.arc-account-service-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.arc-account-service-copy strong {
  color: #16392d;
  font-size: 13px;
  line-height: 1.2;
}

.arc-account-service-copy small {
  margin-top: 4px;
  color: #687b73;
  font-size: 10px;
  line-height: 1.35;
}

.arc-account-service-arrow {
  align-self: center;
  justify-self: end;
  color: #9bafaa;
}

.arc-account-service-card > .arc-account-service-arrow {
  position: absolute;
  top: 21px;
  right: 12px;
}

.arc-account-service-arrow svg {
  width: 15px;
  height: 15px;
}

.arc-account-logout {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  color: #99423e;
  text-align: left;
  background: #fff8f7;
  border: 1px solid #efd6d3;
  border-radius: 14px;
}

.arc-account-logout-icon {
  width: 40px;
  height: 40px;
  background: #fae9e6;
  border-radius: 12px;
}

.arc-account-logout-icon svg,
.arc-account-logout-icon img {
  width: 21px;
  height: 21px;
}

.arc-account-logout > span:nth-child(2) {
  min-width: 0;
}

.arc-account-logout strong,
.arc-account-logout small {
  display: block;
}

.arc-account-logout strong {
  font-size: 13px;
}

.arc-account-logout small {
  margin-top: 2px;
  color: #9d716e;
  font-size: 10px;
}

.arc-account-service-card:focus-visible,
.arc-account-copy-button:focus-visible,
.arc-account-logout:focus-visible {
  outline: 3px solid rgba(13, 123, 91, 0.24);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .arc-account-screen {
    padding-right: 11px;
    padding-left: 11px;
  }

  .arc-account-hero,
  .arc-account-assets,
  .arc-account-services {
    border-radius: 17px;
  }

  .arc-account-hero {
    padding: 15px;
  }

  .arc-account-company {
    font-size: 9px;
  }

  .arc-account-member-badge {
    padding-right: 6px;
    padding-left: 6px;
  }

  .arc-account-assets,
  .arc-account-services {
    padding: 13px;
  }

  .arc-account-fund {
    min-height: 90px;
    padding: 11px;
  }

  .arc-account-fund-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .arc-account-fund {
    min-height: 82px;
  }

  .arc-account-invite {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  .arc-account-invite-icon {
    width: 38px;
    height: 38px;
  }

  .arc-account-copy-button {
    padding: 0 9px;
  }

  .arc-account-service-card {
    min-height: 118px;
    padding: 10px;
  }
}

/* ARC Card Flip preview skeleton */
.arc-card-flip {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding-bottom: 92px;
  color: #102d26;
}

.arc-card-flip-topline,
.arc-card-flip-intro,
.arc-card-flip-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.arc-card-flip .game-preview-back:focus-visible {
  outline: 3px solid rgba(8, 120, 94, 0.28);
  outline-offset: 4px;
  border-radius: 4px;
}

.arc-card-flip-balance {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 6px;
  padding: 7px 10px;
  color: #fff;
  background: linear-gradient(135deg, #06483e, #087566);
  border: 1px solid rgba(216, 179, 76, 0.42);
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(4, 58, 49, 0.16);
}

.arc-card-flip-balance svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: #f4d77d;
}

.arc-card-flip-balance small,
.arc-card-flip-balance strong {
  min-width: 0;
  display: block;
  line-height: 1.1;
}

.arc-card-flip-balance small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.arc-card-flip-balance strong {
  margin-top: 3px;
  color: #fff5cf;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.arc-card-flip-intro {
  align-items: stretch;
  padding: 12px 13px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 207, 117, 0.2), transparent 42%),
    linear-gradient(135deg, #042e29, #075b50);
  border: 1px solid rgba(216, 179, 76, 0.32);
  border-radius: 15px;
}

.arc-card-flip-brand {
  width: 45px;
  min-width: 45px;
  display: grid;
  place-items: center;
  color: #f1cf70;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(242, 207, 117, 0.28);
  border-radius: 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.arc-card-flip-intro > div {
  min-width: 0;
  flex: 1;
  align-self: center;
}

.arc-card-flip-intro small {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-card-flip-intro h1 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(17px, 5vw, 22px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.arc-card-flip-preview-badge {
  align-self: center;
  padding: 5px 7px;
  color: #ffe89e;
  background: rgba(224, 184, 73, 0.14);
  border: 1px solid rgba(240, 208, 118, 0.3);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.arc-card-flip-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: 18px clamp(12px, 4vw, 18px) 20px;
  background:
    radial-gradient(circle at 50% 26%, rgba(24, 126, 103, 0.58), transparent 46%),
    #042924;
  border: 1px solid rgba(207, 167, 61, 0.58);
  border-radius: 22px;
  box-shadow: 0 22px 42px rgba(2, 44, 38, 0.23), inset 0 0 0 1px rgba(255, 232, 160, 0.08);
}

.arc-card-flip-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 24, 20, 0.14), rgba(1, 25, 21, 0.48)),
    radial-gradient(circle at 50% 54%, transparent 0 34%, rgba(0, 20, 17, 0.28) 100%);
}

.arc-card-flip-stage-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.arc-card-flip-stage-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0 2px 15px;
  text-align: center;
}

.arc-card-flip-stage-copy > span {
  color: #f1cf70;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.arc-card-flip-stage-copy h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(19px, 5.7vw, 24px);
  line-height: 1.12;
}

.arc-card-flip-stage-copy p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  line-height: 1.35;
}

.arc-card-flip-grid {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arc-card-flip-cell,
.arc-card-flip-card {
  min-width: 0;
}

.arc-card-flip-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 0.72;
  overflow: hidden;
  padding: 0;
  color: #fff3c7;
  background:
    radial-gradient(circle at 50% 42%, rgba(235, 196, 91, 0.21), transparent 42%),
    linear-gradient(145deg, #07564c, #032c28);
  border: 1px solid rgba(248, 218, 130, 0.72);
  border-radius: clamp(10px, 3.4vw, 14px);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font: inherit;
  text-align: inherit;
  appearance: none;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.arc-card-flip-card:disabled {
  opacity: 1;
  cursor: default;
}

.arc-card-flip-card:not(:disabled):hover {
  border-color: #ffe498;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(247, 211, 111, 0.2);
  transform: translateY(-2px) scale(1.015);
}

.arc-card-flip-card:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

.arc-card-flip-card:focus-visible {
  outline: 3px solid #ffe28b;
  outline-offset: 3px;
}

.arc-card-flip-card.is-selected:not(.is-face-up) {
  border-color: #fff0ae;
  box-shadow: 0 0 0 3px rgba(240, 199, 86, 0.3), 0 13px 26px rgba(0, 0, 0, 0.42);
  animation: arcCardFlipSelected 760ms ease-in-out infinite alternate;
}

.arc-card-flip-card.is-winning {
  border-color: #fff1a9;
  box-shadow: 0 0 0 3px rgba(247, 207, 89, 0.42), 0 0 28px rgba(255, 216, 101, 0.58), 0 14px 27px rgba(0, 0, 0, 0.42);
  transform: translateY(-2px) scale(1.025);
}

.arc-card-flip-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 4px;
  border: 1px solid rgba(255, 233, 163, 0.26);
  border-radius: calc(clamp(10px, 3.4vw, 14px) - 4px);
  pointer-events: none;
}

.arc-card-flip-card-number {
  position: absolute;
  z-index: 4;
  top: 10%;
  right: 5px;
  left: 5px;
  overflow: hidden;
  color: rgba(255, 245, 210, 0.73);
  font-size: clamp(6px, 1.9vw, 8px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-card-flip-card-art,
.arc-card-flip-card-back,
.arc-card-flip-card-face,
.arc-card-flip-card-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.arc-card-flip-card-art {
  z-index: 0;
  display: block;
}

.arc-card-flip-card-back,
.arc-card-flip-card-face img {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.arc-card-flip-card-back,
.arc-card-flip-card-face {
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.arc-card-flip-card-face {
  display: block;
  opacity: 0;
  transform: rotateY(90deg);
}

.arc-card-flip-card.is-face-up .arc-card-flip-card-back {
  opacity: 0;
  transform: rotateY(-90deg);
}

.arc-card-flip-card.is-face-up .arc-card-flip-card-face {
  opacity: 1;
  transform: rotateY(0);
}

.arc-card-flip-reward {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: #fff7d6;
  font-size: clamp(20px, 6vw, 27px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.72), 0 0 14px rgba(237, 200, 99, 0.22);
  transform: translate(-50%, -40%);
  white-space: nowrap;
}

.arc-card-flip-card.is-face-up .arc-card-flip-reward {
  opacity: 1;
}

.arc-card-flip-reward small {
  font-size: 0.48em;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.arc-card-flip-no-prize {
  max-width: 72px;
  font-size: clamp(10px, 3vw, 13px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.arc-card-flip-win-tag {
  position: absolute;
  z-index: 5;
  right: 7px;
  bottom: 8%;
  left: 7px;
  padding: 3px 4px;
  color: #063c34;
  background: linear-gradient(180deg, #fff1ac, #d7a83e);
  border: 1px solid rgba(255, 248, 208, 0.82);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  font-size: clamp(6px, 1.8vw, 8px);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

@keyframes arcCardFlipSelected {
  from { transform: translateY(-1px) scale(1); }
  to { transform: translateY(-3px) scale(1.025); }
}

.arc-card-flip-preview-note,
.arc-card-flip-rules {
  min-width: 0;
  background: #fff;
  border: 1px solid #d6e7dc;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(4, 62, 51, 0.08);
}

.arc-card-flip-preview-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
}

.arc-card-flip-preview-note > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #8a6318;
  background: #fff2c8;
  border-radius: 50%;
}

.arc-card-flip-preview-note > span svg {
  width: 19px;
  height: 19px;
}

.arc-card-flip-preview-note div {
  min-width: 0;
}

.arc-card-flip-preview-note strong {
  display: block;
  color: #075f51;
  font-size: 12px;
}

.arc-card-flip-preview-note p {
  margin: 3px 0 0;
  color: #667c73;
  font-size: 9px;
  line-height: 1.45;
}

.arc-card-flip-preview-note button {
  grid-column: 2;
  justify-self: start;
  margin-top: -2px;
  padding: 7px 11px;
  color: #fff;
  background: linear-gradient(135deg, #087966, #075348);
  border: 1px solid rgba(4, 81, 68, 0.34);
  border-radius: 999px;
  box-shadow: 0 6px 13px rgba(5, 88, 73, 0.14);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.arc-card-flip-preview-note button:focus-visible {
  outline: 3px solid rgba(8, 120, 94, 0.24);
  outline-offset: 3px;
}

.arc-card-flip-preview-note.is-win {
  background: linear-gradient(135deg, #fffdf2, #fff7d5);
  border-color: #e5c45f;
}

.arc-card-flip-preview-note.is-win > span {
  color: #075b4e;
  background: #f4d77d;
}

.arc-card-flip-preview-note.is-loading > span svg,
.arc-card-flip-preview-badge.is-loading {
  animation: arcCardFlipLoading 1.1s linear infinite;
}

@keyframes arcCardFlipLoading {
  to { transform: rotate(360deg); }
}

.arc-card-flip-rules {
  padding: 14px;
}

.arc-card-flip-section-heading {
  align-items: flex-start;
  margin-bottom: 11px;
}

.arc-card-flip-section-heading > div {
  min-width: 0;
}

.arc-card-flip-section-heading small {
  display: block;
  color: #a37a27;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.arc-card-flip-section-heading h2 {
  margin: 3px 0 0;
  color: #143e34;
  font-size: 17px;
}

.arc-card-flip-section-heading > svg {
  width: 22px;
  height: 22px;
  color: #0a7b66;
}

.arc-card-flip-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.arc-card-flip-rule-grid > div {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 9px 6px;
  color: #587066;
  background: #f5faf7;
  border: 1px solid #e0ece5;
  border-radius: 11px;
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
}

.arc-card-flip-rule-grid b,
.arc-card-flip-rule-grid svg {
  width: 24px;
  height: 24px;
  color: #08735f;
  font-size: 20px;
  line-height: 24px;
}

@media (max-width: 360px) {
  .arc-card-flip {
    gap: 11px;
  }

  .arc-card-flip-intro {
    padding: 10px;
  }

  .arc-card-flip-brand {
    width: 40px;
    min-width: 40px;
  }

  .arc-card-flip-preview-badge {
    padding-right: 5px;
    padding-left: 5px;
    font-size: 7px;
  }

  .arc-card-flip-stage {
    padding: 15px 9px 16px;
    border-radius: 18px;
  }

  .arc-card-flip-stage-copy {
    margin-bottom: 12px;
  }

  .arc-card-flip-grid {
    gap: 6px;
  }

  .arc-card-flip-rule-grid > div {
    min-height: 78px;
    padding-right: 4px;
    padding-left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-card-flip-card-back,
  .arc-card-flip-card-face {
    transition: none;
  }

  .arc-card-flip-card,
  .arc-card-flip-card.is-selected:not(.is-face-up),
  .arc-card-flip-preview-note.is-loading > span svg,
  .arc-card-flip-preview-badge.is-loading {
    animation: none;
    transition: none;
  }
}
/* Registration follow-up: income explanation and first-task walkthrough. */
html.arc-onboarding-open, html.arc-onboarding-open body { overflow: hidden; }
.arc-onboarding-layer { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(0, 23, 18, .8); backdrop-filter: blur(8px); }
.arc-onboarding-card { width: min(100%, 430px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid #d4bf75; border-radius: 22px;
  color: #153c32; background: #f9fcf8; box-shadow: 0 24px 70px #00150da0; text-align: left; }
.arc-onboarding-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; flex-shrink: 0; }
.arc-onboarding-header > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #7a641b; }
.arc-onboarding-header button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #31604c; background: #e8f1eb; }
.arc-onboarding-header svg { width: 20px; height: 20px; }
.arc-onboarding-progress { padding: 5px 20px 14px; flex-shrink: 0; color: #61716c; font-size: 12px; }
.arc-onboarding-progress > div { display: flex; gap: 6px; margin-top: 8px; }
.arc-onboarding-progress i { flex: 1; height: 4px; border-radius: 3px; background: #dbe7df; }
.arc-onboarding-progress i.is-done { background: #078855; }
.arc-onboarding-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; }
.arc-onboarding-content h2 { color: #063f31; font-size: clamp(22px, 6vw, 27px); line-height: 1.12; margin: 0 0 12px; letter-spacing: -.035em; }
.arc-onboarding-content h2:focus { outline: none; }
.arc-onboarding-content p { font-size: 14px; line-height: 1.5; margin: 10px 0; color: #466054; }
.arc-onboarding-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.arc-onboarding-metric { min-width: 0; background: #e6f3e8; padding: 14px 10px; border: 1px solid #cde0cf; border-radius: 12px; }
.arc-onboarding-metric > span { display: block; font-size: 11px; line-height: 1.4; color: #4c6559; margin-bottom: 8px; }
.arc-onboarding-metric > strong { display: block; color: #00683f; font-size: clamp(20px, 6vw, 29px); line-height: 1.05; letter-spacing: -.05em; overflow-wrap: anywhere; }
.arc-onboarding-content .arc-onboarding-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px; color: #4e593e;
  background: #fff7db; border: 1px solid #eee1b7; border-radius: 10px; font-size: 12px; }
.arc-onboarding-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.arc-onboarding-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.arc-onboarding-levels button { min-width: 0; min-height: 40px; padding: 7px 3px; border: 1px solid #c7dbce; border-radius: 8px; background: #fff; color: #275b44; font-size: 12px; font-weight: 700; }
.arc-onboarding-levels button[aria-pressed="true"] { background: #067d4d; color: #fff; border-color: #067d4d; }
.arc-onboarding-product { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.arc-onboarding-product img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.arc-onboarding-content .arc-onboarding-example { border-left: 3px solid #078855; background: #ecf4ef; padding: 10px 12px; color: #195339; font-weight: 700; font-size: 13px; }
.arc-onboarding-sum { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 16px; font-size: 12px; }
.arc-onboarding-sum b { display: block; font-size: 23px; color: #006a43; margin-top: 6px; }
.arc-onboarding-tasks { list-style: none; padding: 0; margin: 16px 0; }
.arc-onboarding-tasks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #dce9de; }
.arc-onboarding-tasks li > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #0b7a50; color: white; font-size: 14px; font-weight: 800; }
.arc-onboarding-tasks li p { margin: 2px 0; }
.arc-onboarding-content .arc-onboarding-ready { font-size: 12px; color: #607669; }
.arc-onboarding-footer { border-top: 1px solid #dbe8df; padding: 12px 16px; background: #f9fcf8; flex-shrink: 0; }
.arc-onboarding-footer > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.arc-onboarding-footer button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 10px; font-size: 13px; font-weight: 800; padding: 8px; }
.arc-onboarding-back { background: white; border: 1px solid #ccddd0; color: #476951; }
.arc-onboarding-next { background: #067d4d; border: 1px solid #067d4d; color: white; }
.arc-onboarding-next svg { width: 16px; height: 16px; flex-shrink: 0; }
.arc-onboarding-footer .arc-onboarding-products { border: 0; background: transparent; color: #426650; width: 100%; margin-top: 5px; }
.arc-onboarding-card button:focus-visible { outline: 3px solid #bb910c; outline-offset: 2px; }
.arc-onboarding-entry { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 12px;
  background: #edf5ec; border: 1px solid #c7ddc8; color: #246344; border-radius: 10px; font-size: 13px; font-weight: 700; margin: 12px 0; }
.arc-onboarding-entry svg { width: 17px; height: 17px; }
.arc-onboarding-entry svg:last-child { margin-left: auto; }
@media (max-height: 600px) { .arc-onboarding-header { padding-top: 4px; } .arc-onboarding-progress { padding-bottom: 8px; } .arc-onboarding-footer { padding-top: 8px; padding-bottom: 8px; } }

/* Games entry: two illustrated destinations, with live accessible text. */
.ng-play-screen{background:#faf9f3}
.arc-play-hub{display:grid;gap:18px;padding:4px 0 24px}
.arc-play-entry{position:relative;display:block;isolation:isolate;overflow:hidden;min-height:220px;padding:22px;border:1px solid #b79b50;border-radius:22px;background:#032b23;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(4,46,35,.12)}
.arc-play-entry-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}
.arc-play-entry::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,26,19,.78),rgba(0,26,19,.42) 46%,rgba(0,26,19,0) 78%)}
.arc-play-entry-content{display:flex;flex-direction:column;align-items:flex-start;min-height:176px;width:61%;position:relative}
.arc-play-entry-kicker{color:#dfc077;font-size:10px;font-weight:750;letter-spacing:2px;line-height:1.4;margin-bottom:9px}
.arc-play-entry h2{margin:0;color:#fff6dc;font-size:32px;line-height:1.08;font-weight:800;letter-spacing:-.7px}
.arc-play-entry p{margin:10px 0 19px;max-width:186px;font-size:12px;line-height:1.55;color:#e0ece5}
.arc-play-entry-action{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:12px;font-weight:700;color:#ffe39a}
.arc-play-entry-action>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(236,202,124,.6);border-radius:50%;background:rgba(216,178,78,.12)}
.arc-play-entry-action svg{width:15px;height:15px}
.arc-play-entry:focus-visible{outline:3px solid #087e65;outline-offset:4px}
@media(hover:hover){.arc-play-entry:hover{border-color:#efd485;box-shadow:0 12px 26px rgba(4,46,35,.2)}}
@media(max-width:350px){.arc-play-entry{padding:18px;min-height:216px}.arc-play-entry h2{font-size:29px}.arc-play-entry-content{width:65%}}