* { box-sizing: border-box; }

:root {
  --app-accent: #d99a15;
  --app-accent-strong: #071810;
  --app-accent-soft: #fff7d8;
  --app-bg: #f4f6f5;
  --app-surface: #ffffff;
  --app-surface-strong: #eef2f0;
  --app-text: #111827;
  --app-muted: #6b7280;
  --app-border: #e5e7eb;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #eef1f3;
  color: var(--app-text);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

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

.theme-mahakal { --app-accent: #d99a15; --app-accent-strong: #071810; --app-accent-soft: #fff7d8; --app-bg: #06150e; --app-surface: #102218; --app-surface-strong: #312312; --app-text: #fff8dc; --app-muted: #d9c178; --app-border: #2d4a38; }
.theme-darkgreen { --app-accent: #0c7b5f; --app-accent-strong: #062c25; --app-accent-soft: #e6fff6; --app-bg: #061c16; --app-surface: #0d3027; --app-surface-strong: #174d3c; --app-text: #eafff7; --app-muted: #91d8c6; --app-border: #1f5948; }
.theme-gold { --app-accent: #d99a15; --app-accent-strong: #7a4c05; --app-accent-soft: #fff7d8; --app-bg: #f7f1df; --app-surface: #fffdf7; --app-surface-strong: #f6e8bd; --app-text: #2c2415; --app-muted: #806b38; --app-border: #ead8a5; }
.theme-blue { --app-accent: #2563eb; --app-accent-strong: #1e3a8a; --app-accent-soft: #eff6ff; --app-bg: #eef4ff; --app-surface: #ffffff; --app-surface-strong: #dbeafe; --app-text: #172554; --app-muted: #52637f; --app-border: #c7d2fe; }
.theme-night { --app-accent: #f6a800; --app-accent-strong: #111111; --app-accent-soft: #fff8e8; --app-bg: #121225; --app-surface: #202040; --app-surface-strong: #2b2b55; --app-text: #f4f1ff; --app-muted: #aaa6cf; --app-border: #383866; }
.theme-purple { --app-accent: #7c3aed; --app-accent-strong: #4c1d95; --app-accent-soft: #f5f3ff; --app-bg: #f6f0ff; --app-surface: #fffaff; --app-surface-strong: #eadcff; --app-text: #35165f; --app-muted: #77628f; --app-border: #ddd6fe; }
.theme-gray { --app-accent: #64748b; --app-accent-strong: #334155; --app-accent-soft: #f1f5f9; --app-bg: #edf0f1; --app-surface: #ffffff; --app-surface-strong: #dfe4e6; --app-text: #2f3538; --app-muted: #6a7479; --app-border: #cbd5e1; }
.theme-red { --app-accent: #dc2626; --app-accent-strong: #7f1d1d; --app-accent-soft: #fef2f2; --app-bg: #fff1f1; --app-surface: #fffafa; --app-surface-strong: #ffdada; --app-text: #4b1111; --app-muted: #8c5a5a; --app-border: #fecaca; }
.theme-green { --app-accent: #16a34a; --app-accent-strong: #064e3b; --app-accent-soft: #ecfdf5; --app-bg: #eefbf2; --app-surface: #fbfffc; --app-surface-strong: #d9f8e4; --app-text: #0d3f24; --app-muted: #557761; --app-border: #bbf7d0; }
.theme-ocean { --app-accent: #0293c8; --app-accent-strong: #073b56; --app-accent-soft: #e6f8ff; --app-bg: #eaf9ff; --app-surface: #fbfeff; --app-surface-strong: #d6f4ff; --app-text: #07384e; --app-muted: #4f7b8d; --app-border: #bae6fd; }
.theme-pink { --app-accent: #db2777; --app-accent-strong: #831843; --app-accent-soft: #fdf2f8; --app-bg: #fff0f8; --app-surface: #fffafd; --app-surface-strong: #ffd8eb; --app-text: #551331; --app-muted: #8d5a73; --app-border: #fbcfe8; }
.theme-orange { --app-accent: #f97316; --app-accent-strong: #7c2d12; --app-accent-soft: #fff7ed; --app-bg: #fff4e8; --app-surface: #fffdf9; --app-surface-strong: #ffe4c7; --app-text: #55210c; --app-muted: #8c6a50; --app-border: #fed7aa; }
.theme-teal { --app-accent: #0f766e; --app-accent-strong: #134e4a; --app-accent-soft: #f0fdfa; --app-bg: #eafbf8; --app-surface: #fbfffe; --app-surface-strong: #d2f5ee; --app-text: #123c39; --app-muted: #537b76; --app-border: #99f6e4; }
.theme-indigo { --app-accent: #4f46e5; --app-accent-strong: #312e81; --app-accent-soft: #eef2ff; --app-bg: #f0f2ff; --app-surface: #fbfbff; --app-surface-strong: #dfe4ff; --app-text: #25245f; --app-muted: #62699a; --app-border: #c7d2fe; }
.theme-cyan { --app-accent: #0891b2; --app-accent-strong: #164e63; --app-accent-soft: #ecfeff; --app-bg: #e9fbff; --app-surface: #fbfeff; --app-surface-strong: #d6f7ff; --app-text: #124456; --app-muted: #557d88; --app-border: #a5f3fc; }
.theme-lime { --app-accent: #65a30d; --app-accent-strong: #365314; --app-accent-soft: #f7fee7; --app-bg: #f6fde9; --app-surface: #fefff8; --app-surface-strong: #e8fac7; --app-text: #2f4510; --app-muted: #687a48; --app-border: #d9f99d; }
.theme-slate { --app-accent: #475569; --app-accent-strong: #0f172a; --app-accent-soft: #f1f5f9; --app-bg: #eef2f7; --app-surface: #fbfcfe; --app-surface-strong: #dfe6ef; --app-text: #1f2937; --app-muted: #667085; --app-border: #cbd5e1; }
.theme-maroon { --app-accent: #9f1239; --app-accent-strong: #4c0519; --app-accent-soft: #fff1f2; --app-bg: #fff0f3; --app-surface: #fffafb; --app-surface-strong: #ffd8df; --app-text: #4c081c; --app-muted: #875969; --app-border: #fecdd3; }

.boot {
  padding: 40px;
  text-align: center;
  font-weight: 900;
}

.login-screen,
.phone-app {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
}

.login-screen {
  display: grid;
  place-items: center;
  padding: 18px;
}

.login-card {
  width: min(390px, 100%);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 24px 18px;
  box-shadow: 0 18px 40px rgb(15 23 42 / 12%);
}

.brand-mark,
.logo-brand-mark {
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.app-logo-img {
  max-width: 112px;
  max-height: 72px;
  object-fit: contain;
}

.login-card h1 {
  margin: 0 0 16px;
  text-align: center;
  font-size: 21px;
}

.login-card label,
.amount-field,
.password-panel label,
.bid-entry-form label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
}

.login-card input,
.amount-field input,
.amount-field select,
.password-panel input,
.password-panel textarea,
.password-panel select,
.bid-entry-form input,
.bid-entry-form select,
.play-custom-fields input,
.play-custom-fields select,
.history-filter-card select {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  padding: 10px;
  outline: none;
}

.login-card input:focus,
.amount-field input:focus,
.amount-field select:focus,
.password-panel input:focus,
.password-panel textarea:focus,
.bid-entry-form input:focus,
.bid-entry-form select:focus,
.play-custom-fields input:focus,
.play-custom-fields select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent);
}

.links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 14px;
}

.links button {
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 800;
}

.login-card form > button,
.panel-action,
.settings-primary-action,
.modal-ok,
.pay-button,
.play-add-button,
.history-filter-card button {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent-strong));
  color: #fff;
  padding: 11px 14px;
  font-weight: 900;
}

.login-card form > button {
  width: 100%;
}

.error,
.success,
.mobile-success,
.fund-message {
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  font-size: 13px;
  font-weight: 800;
}

.error { background: #fee2e2; color: #991b1b; }
.success,
.mobile-success { background: #dcfce7; color: #166534; }
.fund-message { background: var(--app-accent-soft); color: var(--app-text); }

.phone-app {
  width: min(100%, 520px);
  margin: 0 auto;
  padding-bottom: 76px;
}

.topbar-mobile,
.bottom-tabs {
  position: sticky;
  z-index: 20;
  display: grid;
  align-items: center;
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

.topbar-mobile {
  top: 0;
  grid-template-columns: 76px 1fr auto;
  gap: 8px;
  min-height: 54px;
  padding: 8px;
  border-bottom: 1px solid var(--app-border);
}

.topbar-mobile button,
.bottom-tabs button,
.drawer-list button,
.fund-action {
  border: 0;
  background: transparent;
  color: inherit;
}

.menu-button,
.wallet-top-button {
  min-height: 36px;
  border-radius: 8px;
  font-weight: 900;
}

.wallet-top-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wallet-top-button span,
.bottom-tabs .active span,
.drawer-list span,
.settings-icon,
.fund-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--app-accent);
  color: #fff;
}

.wallet-top-button svg,
.bottom-tabs svg,
.drawer-list svg,
.settings-icon svg,
.fund-icon svg {
  width: 16px;
  height: 16px;
}

.topbar-logo,
.image-logo {
  display: grid;
  place-items: center;
}

.topbar-logo-img {
  max-width: 130px;
  max-height: 36px;
  object-fit: contain;
}

.screen-body {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.home-banner-slide {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 8px;
  background: #101010;
}

.home-banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-row {
  display: grid;
  gap: 8px;
}

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

.action-row button {
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent-strong));
  color: #fff;
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: normal;
}

.action-row span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border-radius: 50%;
  background: #fff;
  color: var(--app-accent);
}

.user-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
}

.user-line span:last-child {
  text-align: right;
  color: var(--app-accent);
}

.mini-contact-icon {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--app-accent);
  color: #fff;
  font-size: 10px;
}

.marquee,
.game-type,
.fund-balance,
.settings-detail-card,
.history-filter-card {
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: #1f2937;
}

.marquee {
  overflow: hidden;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
}

.games,
.ledger-list,
.settings-list,
.funds-screen,
.play-type-grid,
.app-theme-grid,
.settings-choice-grid {
  display: grid;
  gap: 8px;
}

.game-row,
.ledger-row,
.app-panel,
.settings-list,
.fund-action,
.add-fund-modal,
.game-modal,
.profile-card,
.rate-row-mobile,
.settings-detail-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 8px 20px rgb(15 23 42 / 7%);
}

.game-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
}

.game-row h2 {
  margin: 0 0 4px;
  font-size: 14px;
}

.game-row p {
  margin: 2px 0;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
}

.game-row .result-line {
  color: var(--app-text);
}

.game-row b {
  display: inline-block;
  margin-right: 10px;
}

.game-type {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
}

.stars {
  color: var(--app-accent);
  font-size: 10px;
  letter-spacing: 1px;
}

.side {
  display: grid;
  gap: 6px;
  justify-items: end;
  align-content: center;
}

.side small {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 900;
}

.side .running { color: #16a34a; }
.side .upcoming { color: #b7791f; }
.side .closed { color: #dc2626; }

.side button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--app-accent);
  color: #fff;
  font-weight: 900;
}

.bottom-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 6px 4px;
  border-top: 1px solid var(--app-border);
}

.bottom-tabs button {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 900;
}

.bottom-tabs span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.app-panel,
.settings-detail-card {
  padding: 14px;
}

.app-panel h2,
.settings-detail-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--app-border);
  padding: 10px 0;
}

.panel-row span,
.ledger-row small,
.settings-row em,
.fund-action em,
.profile-card p,
.rate-row-mobile span,
.settings-detail-note {
  color: var(--app-muted);
}

.panel-action {
  display: inline-flex;
  justify-content: center;
  margin-top: 10px;
}

.locked-note,
.empty-state-mobile,
.guide-mobile-page p {
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.settings-screen {
  display: grid;
  gap: 10px;
}

.settings-title {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-row,
.fund-action,
.ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  text-align: left;
}

.settings-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  background: transparent;
  color: inherit;
}

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

.settings-row strong,
.fund-action strong,
.ledger-row strong,
.rate-row-mobile strong {
  font-size: 13px;
}

.settings-row em,
.fund-action em {
  grid-column: 2 / 3;
  font-size: 11px;
  font-style: normal;
}

.settings-toggle {
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: var(--app-accent);
  position: relative;
}

.settings-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.danger-link strong {
  color: #dc2626;
}

.drawer-shell,
.modal-backdrop,
.codex-page-loader {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.drawer-scrim,
.modal-backdrop,
.codex-page-loader {
  background: rgb(15 23 42 / 48%);
}

.side-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86vw, 340px);
  overflow: auto;
  background: var(--app-surface);
  padding: 12px;
}

.drawer-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent-strong));
  color: #fff;
  padding: 12px;
}

.drawer-avatar,
.logo-drawer-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}

.drawer-avatar img {
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}

.drawer-profile span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  opacity: .86;
}

.drawer-profile button {
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  color: #fff;
  width: 32px;
  height: 32px;
}

.drawer-title {
  margin: 14px 4px 8px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 900;
}

.drawer-list button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 6px;
  color: var(--app-text);
  text-align: left;
  font-weight: 900;
}

.play-type-screen {
  display: grid;
  gap: 10px;
}

.play-type-screen h2 {
  margin: 4px 0;
  font-size: 18px;
}

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

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

.play-type-grid button,
.selected-play-grid button,
.app-theme-grid button,
.settings-choice-grid button {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text);
  padding: 12px;
  text-align: left;
  font-weight: 900;
}

.play-type-grid button,
.selected-play-grid button {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 112px;
  padding: 10px 8px;
  text-align: center;
}

.selected-play-grid button {
  min-height: 124px;
}

.phone-app:has(.selected-game-type-screen) {
  background: var(--app-bg);
}

.phone-app:has(.selected-game-type-screen) .screen-body {
  gap: 0;
  padding: 0 0 76px;
  background: var(--app-bg);
}

.phone-app:has(.selected-game-type-screen) .topbar-mobile {
  background: var(--app-surface);
  color: var(--app-text);
  border-bottom: 1px solid var(--app-border);
}

.phone-app:has(.selected-game-type-screen) .selected-game-type-screen {
  gap: 0;
  min-height: calc(100vh - 130px);
  background: var(--app-bg);
}

.phone-app:has(.selected-game-type-screen) .play-type-head {
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: var(--app-surface-strong);
  color: var(--app-text);
  box-shadow: none;
  padding: 10px 18px;
}

.phone-app:has(.selected-game-type-screen) .play-type-head button {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--app-accent);
  font-size: 25px;
  box-shadow: none;
}

.phone-app:has(.selected-game-type-screen) .play-type-head strong {
  font-size: 17px;
  font-weight: 900;
}

.phone-app:has(.selected-game-type-screen) .play-type-head span {
  color: var(--app-muted);
  font-size: 14px;
  font-weight: 800;
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid button {
  min-height: 138px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--app-surface) 72%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--app-surface) 72%, #ffffff);
  border-radius: 0;
  background: var(--app-bg);
  color: var(--app-text);
  box-shadow: none;
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid button:nth-child(2n) {
  border-right: 0;
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid button i {
  width: 58px;
  height: 58px;
  background: var(--app-surface);
  color: var(--app-accent);
  box-shadow: 0 2px 9px rgb(15 23 42 / 14%);
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid button i svg {
  width: 31px;
  height: 31px;
}

.phone-app:has(.selected-game-type-screen) .selected-play-grid strong {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 900;
}

.phone-app:has(.selected-game-type-screen) .bottom-tabs {
  background: var(--app-surface);
  color: var(--app-text);
}

.play-type-grid span {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.section-label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 900;
}

.selected-game-type-screen,
.play-game-page {
  background: var(--app-bg);
}

.play-type-head,
.play-game-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--app-surface);
  padding: 10px;
}

.play-type-head button,
.play-back-button,
.fund-modal-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--app-accent);
  color: #fff;
  font-weight: 900;
}

.play-type-grid button i,
.selected-play-grid button i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--app-accent);
  box-shadow: 0 5px 14px rgb(15 23 42 / 14%);
}

.play-type-grid button i svg,
.selected-play-grid button i svg {
  width: 25px;
  height: 25px;
}

.play-type-grid strong,
.selected-play-grid strong {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-size: 12px;
}

.modal-backdrop {
  display: grid;
  place-items: end center;
  padding: 12px;
}

.game-modal,
.add-fund-modal {
  width: min(100%, 480px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 14px;
}

.bid-entry-form,
.play-custom-fields,
.play-submit-bar,
.quick-amounts,
.fund-modal-head,
.history-filter-card > div {
  display: grid;
  gap: 8px;
}

.play-radio-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.play-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.play-entry-table,
.history-table-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-radius: 8px;
  background: var(--app-surface-strong);
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.play-submit-bar {
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  border-top: 1px solid var(--app-border);
  padding-top: 10px;
}

.play-submit-bar small {
  display: block;
  color: var(--app-muted);
  font-size: 10px;
}

.mini {
  margin: 0;
}

.fund-modal-head {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.fund-modal-head h2 {
  margin: 0;
}

.quick-amounts {
  grid-template-columns: repeat(3, 1fr);
}

.quick-amounts button {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-text);
  padding: 10px;
  font-weight: 900;
}

.amount-field div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.amount-field div span {
  padding: 10px;
  background: var(--app-surface-strong);
}

.amount-field div input {
  border: 0;
  border-radius: 0;
}

.fund-done {
  width: 100%;
  margin-top: 8px;
}

.history-filter-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.history-filter-card > div {
  grid-template-columns: repeat(3, 1fr);
}

.history-filter-card label {
  display: grid;
  gap: 4px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 900;
}

.history-row,
.wallet-ledger-row {
  grid-template-columns: 1fr;
  align-items: start;
}

.fund-balance,
.wallet-balance-card {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.fund-balance strong {
  font-size: 32px;
}

.profile-mobile-page,
.guide-mobile-page,
.share-mobile-page,
.rate-list-mobile,
.ticket-mobile-page {
  display: grid;
  gap: 10px;
}

.profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--app-accent);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.profile-card h3 {
  margin: 0 0 4px;
}

.rate-tabs,
.theme-choice {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.rate-tabs button,
.theme-choice button {
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text);
  padding: 8px 12px;
  font-weight: 900;
}

.rate-tabs button.active,
.theme-choice button.active,
.settings-choice-grid button.active,
.app-theme-grid button.active {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}

.rate-section {
  display: grid;
  gap: 8px;
}

.rate-row-mobile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
}

.settings-detail-kicker {
  margin: 0 0 6px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-choice-grid,
.app-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-setting-page {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: calc(100vh - 54px);
  margin: -8px;
  padding: 8px 12px 18px;
  background: var(--app-bg);
  color: var(--app-text);
  border-inline: 3px solid var(--app-border);
}

.theme-setting-bar,
.theme-setting-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.theme-setting-bar {
  min-height: 34px;
  padding: 0 6px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: 11px;
  box-shadow: 0 1px 4px rgb(15 23 42 / 10%);
}

.theme-setting-bar span {
  color: var(--app-text);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.theme-setting-head {
  min-height: 34px;
  padding: 0 8px;
  background: var(--app-accent);
  color: #fff;
  font-size: 12px;
}

.theme-setting-bar button,
.theme-setting-head button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-weight: 900;
}

.theme-setting-page h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.2;
}

.app-theme-grid button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 7px;
  min-height: 60px;
  padding: 10px 6px 8px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 4px;
  background: var(--theme-swatch-color, #d99a15);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 2px 5px rgb(15 23 42 / 18%);
}

.app-theme-grid button i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgb(255 255 255 / 72%);
  color: transparent;
  font-size: 0;
}

.app-theme-grid button.active {
  min-height: 60px;
  border-color: #fff;
  background: var(--theme-swatch-color, #d99a15);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 20%, transparent), 0 3px 8px rgb(15 23 42 / 22%);
}

.app-theme-grid button.active i {
  position: static;
  background: rgb(255 255 255 / 16%);
  border-color: rgb(255 255 255 / 82%);
  transform: none;
}

.app-theme-grid button.active i::before {
  content: "\2713";
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.app-theme-grid button.active span {
  align-self: auto;
  padding-top: 0;
}

.theme-submit-action {
  min-height: 34px;
  margin-top: 4px;
  border-radius: 4px;
  background: #df2178;
  color: #fff;
  box-shadow: 0 2px 5px rgb(109 24 67 / 18%);
}

.app-theme-grid [data-theme-swatch="mahakal"] { --theme-swatch-color: #d99a15; }
.app-theme-grid [data-theme-swatch="darkgreen"] { --theme-swatch-color: #0c7b5f; }
.app-theme-grid [data-theme-swatch="gold"] { --theme-swatch-color: #d99a15; }
.app-theme-grid [data-theme-swatch="blue"] { --theme-swatch-color: #2563eb; }
.app-theme-grid [data-theme-swatch="night"] { --theme-swatch-color: #111111; }
.app-theme-grid [data-theme-swatch="purple"] { --theme-swatch-color: #7c3aed; }
.app-theme-grid [data-theme-swatch="gray"] { --theme-swatch-color: #94a3b8; }
.app-theme-grid [data-theme-swatch="red"] { --theme-swatch-color: #dc2626; }
.app-theme-grid [data-theme-swatch="green"] { --theme-swatch-color: #16a34a; }
.app-theme-grid [data-theme-swatch="ocean"] { --theme-swatch-color: #0293c8; }
.app-theme-grid [data-theme-swatch="pink"] { --theme-swatch-color: #db2777; }
.app-theme-grid [data-theme-swatch="orange"] { --theme-swatch-color: #f97316; }
.app-theme-grid [data-theme-swatch="teal"] { --theme-swatch-color: #0f766e; }
.app-theme-grid [data-theme-swatch="indigo"] { --theme-swatch-color: #4f46e5; }
.app-theme-grid [data-theme-swatch="cyan"] { --theme-swatch-color: #0891b2; }
.app-theme-grid [data-theme-swatch="lime"] { --theme-swatch-color: #52a506; }
.app-theme-grid [data-theme-swatch="slate"] { --theme-swatch-color: #475569; }
.app-theme-grid [data-theme-swatch="maroon"] { --theme-swatch-color: #9f1239; }

@media (min-width: 421px) {
  .app-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.password-panel textarea,
.ticket-mobile-page textarea {
  min-height: 96px;
  resize: vertical;
}

.is-loading-action {
  position: relative;
  opacity: .8;
  pointer-events: none;
}

.codex-page-loader {
  display: none;
  place-items: center;
}

.codex-page-loader.is-visible {
  display: grid;
}

.codex-loader-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  padding: 18px 22px;
  box-shadow: 0 20px 50px rgb(15 23 42 / 25%);
}

.ticket-message {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--app-surface-strong);
  color: var(--app-text);
  font-size: 12px;
}

.ticket-admin {
  border-left: 3px solid var(--app-accent);
}

.codex-page-loader__spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--app-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

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

@media (max-width: 420px) {
  .phone-app {
    width: 100%;
  }

  .topbar-mobile {
    grid-template-columns: 68px 1fr auto;
  }

  .action-row button {
    font-size: 11px;
    padding-inline: 6px;
  }

  .play-type-grid,
  .history-filter-card > div,
  .settings-choice-grid {
    grid-template-columns: 1fr;
  }

  .app-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .play-submit-bar {
    grid-template-columns: 1fr 1fr;
  }

  .play-submit-bar .modal-ok {
    grid-column: 1 / -1;
  }
}