/* GMGN-inspired panel palette, plus the requested home menu background frame.
   Except for that outer frame, original CSS owns sizes, positions, layout, visibility,
   animation, gradient, shadow, mode accent and state indicator. In particular,
   the home menu cards and their frames keep their original dimensions/effects.
   The scoped menu frame adds outer padding without changing its inner cards.
   Use background-color instead of the background shorthand to retain images. */

.j7,
.gm-root,
.profile-card,
.reward-card,
.txa-card,
.ax-pop,
.axs-backdrop,
.tx-pop.j7-pop {
  font-family: "Geist", "Microsoft YaHei", system-ui, sans-serif;
  color: #f5f5f5;
}

.j7 {
  --c-top: #121212;
  --c-form: #171717;
  --c-feed: #121212;
  --c-card: #171717;
  --c-card-b: #242424;
  --c-btn: #1f1f1f;
  --c-btn-h: #292929;
  --c-line: #242424;
  --c-in: #1f1f1f;
  --c-in-b: #2e2e2e;
  --c-tx: #f5f5f5;
  --c-tx-2: #cccccc;
  --c-tx-3: #808080;
  --c-acc: #69cf8d;
  --c-hl: #46b87d;
  --c-hl-bg: #142019;
  --c-blue: #4ea7fa;
  --c-green: #46b87d;
  --c-yellow: #f0b90e;
  --c-red: #de5759;
}

.j7-top,
.j7-foot {
  background-color: #121212;
  border-color: #242424;
  color: #808080;
}

.j7-body {
  background-color: #242424;
}

.j7-form {
  background-color: #171717;
}

.j7-feedwrap {
  background-color: #121212;
}

.j7-tb,
.j7-tabs,
.j7-plat,
.j7-opt,
.j7-buy {
  background-color: #1f1f1f;
  border-color: #2e2e2e;
  border-radius: 6px;
  color: #cccccc;
  font-weight: 500;
}

.j7-tb:hover,
.j7-tab:hover,
.j7-plat:hover,
.j7-buy:hover {
  background-color: #292929;
  border-color: #383838;
}

.j7-tb i {
  color: #cccccc;
}

.j7-plats {
  background-color: #121212;
  border-color: #242424;
  border-radius: 8px;
}

.j7-plat.sel,
.j7-buy.sel,
.j7-opt.wide.on {
  background-color: #19271e;
  border-color: #3b6349;
  color: #69cf8d;
}

.j7-opt .ck,
.j7-opt.on .ck {
  border-color: #2e2e2e;
}

.j7-opt .ck.badge {
  background-color: #242424;
  color: #cccccc;
}

.j7-opt.on {
  color: #f5f5f5;
  border-color: #525252;
}

.j7-opt.on .ck .sq {
  border-color: #69cf8d;
  color: #69cf8d;
}

.j7-opt.on.yellow {
  background-color: #29251a;
  border-color: #61522a;
}

.j7-opt.on.yellow .ck {
  background-color: #302b1c;
  border-color: #61522a;
}

.j7-opt.pairsel.on {
  background-color: #18242e;
  border-color: #304e66;
  color: #8bc5fa;
}

.j7-opt.wide.on .ck.badge {
  background-color: #233d2b;
  color: #69cf8d;
}

.j7-opt .bsum {
  color: #69cf8d;
}

.j7-field {
  background-color: #1f1f1f;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.j7-field:hover {
  border-color: #383838;
}

.j7-field:focus-within {
  border-color: #69cf8d;
}

.j7-field.shake {
  border-color: #de5759;
}

.j7-field input,
.j7-field textarea {
  color: #f5f5f5;
}

.j7-field input::placeholder,
.j7-field textarea::placeholder {
  color: #808080;
}

.j7-buy.ed,
.j7-buy.ed:focus-within {
  background-color: #1f1f1f;
}

.j7-buy.edit.save {
  background-color: #23452f;
  border-color: #46b87d;
  color: #f5f5f5;
}

.j7-deploy {
  background-color: #242424;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.j7-deploy.ready:not(.spent):not(.busy) {
  background-color: #69cf8d;
  border-color: #69cf8d;
  color: #121212;
}

.j7-deploy.ready:not(.spent):not(.busy) i,
.j7-deploy.ready:not(.spent):not(.busy) .kb {
  color: #173d24;
}

.j7-deploy.ready:hover:not(.spent):not(.busy) {
  background-color: #87e8a9;
  border-color: #87e8a9;
}

.j7-deploy.spent,
.j7-deploy.spent.ready {
  background-color: #1f1f1f;
  border-color: #242424;
  color: #808080;
}

.j7-status {
  color: #808080;
}

.j7-status.ok {
  color: #46b87d;
}

.j7-status.err {
  color: #de5759;
}

.j7-status.busy {
  color: #69cf8d;
}

.j7-split {
  background-color: #171717;
  border-color: #242424;
}

.j7-split .grip {
  background-color: #525252;
}

.j7-tw {
  background-color: #171717;
  border-color: #242424;
  border-radius: 8px;
}

.j7-tw.hl {
  background-color: #142019;
  border-color: #375942;
}

.j7-tw .tw-head,
.j7-tw.hl .tw-head,
.j7-tw .tw-vamp,
.j7-tw.hl .tw-vamp {
  border-color: #2e2e2e;
}

.j7-tw .tw-name {
  color: #f5f5f5;
  font-weight: 600;
}

.j7-tw.hl .tw-name {
  color: #69cf8d;
}

.j7-tw .tw-handle,
.j7-tw .tw-time,
.j7-tw .tw-l2,
.j7-tw .tw-ctx,
.j7-tw .tw-icons button {
  color: #808080;
}

.j7-tw.hl .tw-handle {
  color: #46b87d;
}

.j7-tw .tw-text {
  color: #e8e8e8;
}

.j7-tw .tw-link {
  color: #4ea7fa;
}

.j7-tw .tw-media {
  border-radius: 8px;
  background-color: #1f1f1f;
}

.j7-tw .tw-deploy {
  color: #cccccc;
}

.j7-tw .tw-deploy:hover {
  background-color: #242424;
  color: #f5f5f5;
}

.j7-tw.hl .tw-deploy:hover {
  background-color: #233d2b;
  color: #69cf8d;
}

.j7-tw .tw-quote {
  border-color: #525252;
}

.j7-foot .j7-brand {
  color: #cccccc;
}

.j7-foot .j7-simchip {
  color: #69cf8d;
}

/* Keep the initial menu readable over the live market background. */
#game-root > .gm-layer[data-kind="menu"] > .gm-menu {
  box-sizing: border-box;
  min-width: 0;
  width: min(1026px, 100%);
  padding: 28px 32px;
  background-color: #111315;
  border: 1px solid #30343a;
  border-radius: 14px;
  box-shadow: 0 24px 72px #0008;
}

#game-root > .gm-layer[data-kind="menu"] > .gm-menu :is(.gm-tagline, .gm-opt-lbl, .reward-mode-caption, .gm-mode-pb) {
  color: #b2b6c0;
}

@media (max-width: 860px), (max-height: 760px) {
  #game-root > .gm-layer[data-kind="menu"] > .gm-menu {
    padding: 20px;
  }
}

.gm-panel,
.gm-card,
.profile-card,
.reward-card,
.txa-card,
.axs-modal {
  background-color: #171717;
  color: #f5f5f5;
  border-color: #2e2e2e;
  border-radius: 10px;
}

.gm-panel-head,
.gm-panel-foot {
  background-color: #171717;
  border-color: #242424;
}

.gm-ph-sub,
.gm-tagline,
.gm-foot-note,
.gm-disclaimer {
  color: #808080;
}

.gm-mode {
  border-radius: 8px;
  background-color: #171717;
  border-color: #2e2e2e;
}

.gm-mode:hover {
  background-color: #1d1d1d;
  border-color: rgb(var(--mc) / .65);
}

.gm-mode.is-last {
  border-color: rgb(var(--mc) / .45);
}

.gm-mode-icon {
  border-radius: 6px;
  background-color: rgb(var(--mc) / .1);
}

.gm-mode-icon.lg {
  border-radius: 8px;
}

.gm-mode-name {
  font-weight: 600;
}

.gm-mode-goal,
.gm-intro-goal {
  color: #cccccc;
}

.gm-mode-pb {
  color: #808080;
}

.gm-mode-pb b {
  color: #f5f5f5;
}

.gm-help-sec,
.gm-opt-lbl,
.gm-row-lbl span,
.gm-rn label,
.gm-rn span,
.gm-res-sub {
  color: #808080;
}

.gm-help-row,
.gm-row,
.gm-res-body,
.gm-res-share {
  border-color: #242424;
}

.gm-help-row,
.gm-help-rules,
.gm-help-lg {
  color: #cccccc;
}

.gm-rn,
.gm-tile,
.gm-res-coin,
.gm-empty-box,
.gm-cmp-coin {
  background-color: #1f1f1f;
  border-radius: 6px;
}

.gm-rn b {
  font-weight: 500;
}

.gm-rn.up b,
.gm-card.ok .gm-big,
.gm-pz.up .gm-pz-pct {
  color: #46b87d;
}

.gm-rn.down b,
.gm-card.fail .gm-big,
.gm-pz.down .gm-pz-pct {
  color: #de5759;
}

.gm-hud,
.gm-pos {
  background-color: #171717;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.gm-hud-mode,
.gm-hud-btn,
.gm-hud-end {
  border-radius: 4px;
}

.gm-hud-text,
.gm-hud-round {
  color: #808080;
}

.gm-hud-end {
  background-color: #242424;
  border-color: #2e2e2e;
  color: #cccccc;
}

.gm-hud-end.out {
  background-color: #69cf8d;
  border-color: #69cf8d;
  color: #121212;
}

.gm-hud-btn:hover {
  background-color: #242424;
  border-color: #2e2e2e;
}

.gm-hud-menu.ask {
  background-color: #2b1b1c;
  border-color: #814143;
  color: #de5759;
}

.gm-held-chip {
  background-color: #171717;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.gm-btn,
.profile-nav,
.txa-secondary,
.txa-wbtn {
  background-color: #1f1f1f;
  color: #cccccc;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.gm-btn:hover:not(:disabled),
.profile-nav:hover,
.txa-secondary:hover:not(:disabled),
.txa-wbtn:hover:not(:disabled) {
  background-color: #292929;
  border-color: #383838;
  color: #f5f5f5;
}

.gm-btn.primary,
.txa-primary,
.txa-act.primary {
  background-color: #69cf8d;
  border-color: #69cf8d;
  color: #121212;
}

.gm-btn.primary:hover:not(:disabled),
.txa-primary:hover:not(:disabled),
.txa-act.primary:hover:not(:disabled) {
  background-color: #87e8a9;
  border-color: #87e8a9;
  color: #121212;
}

.gm-btn.ghost {
  background-color: transparent;
  border-color: #2e2e2e;
}

.gm-btn.danger {
  background-color: #2b1b1c;
  border-color: #814143;
  color: #de5759;
}

.gm-btn.danger:hover:not(:disabled) {
  background-color: #382022;
  border-color: #a74c4e;
  color: #de5759;
}

.gm-btn.danger.ghost {
  background-color: transparent;
}

.gm-btn i {
  color: #808080;
}

.gm-btn.primary i,
.gm-btn.danger i {
  color: inherit;
}

.gm-menu-bar .gm-btn,
.gm-menu-bar .gm-link {
  border-color: transparent;
  color: #cccccc;
}

.gm-menu-bar .gm-btn:hover,
.gm-menu-bar .gm-link:hover {
  background-color: #242424;
  color: #f5f5f5;
}

.gm-seg,
.gm-seg.gm-seg-diff,
.ax-seg,
.txa-tabs {
  background-color: #121212;
  border-color: #242424;
  border-radius: 6px;
}

.gm-seg button,
.gm-seg.gm-seg-diff button,
.ax-seg button,
.txa-tab {
  border-radius: 4px;
  color: #808080;
  font-weight: 500;
}

.gm-seg button.on,
.ax-seg button.on,
.txa-tab.on {
  background-color: #242424;
  color: #69cf8d;
}

.gm-seg.gm-seg-diff button[data-v=sweat].on,
.gm-seg.gm-seg-mini button[data-v=sweat].on {
  background-color: #2b1b1c;
  color: #de5759;
}

.gm-seg.gm-seg-diff button[data-v=pro].on,
.gm-seg.gm-seg-mini button[data-v=pro].on {
  background-color: #29251a;
  color: #f0b90e;
}

.gm-seg.gm-seg-diff button[data-v=casual].on,
.gm-seg.gm-seg-mini button[data-v=casual].on {
  background-color: #18242e;
  color: #4ea7fa;
}

.gm-num-wrap,
.gm-num.sm,
.gm-text,
.txa-input {
  background-color: #1f1f1f;
  border-color: #2e2e2e;
  border-radius: 6px;
  color: #f5f5f5;
}

.gm-num-wrap:focus-within,
.gm-num.sm:focus,
.gm-text:focus,
.txa-input:focus {
  border-color: #69cf8d;
}

.txa-input::placeholder {
  color: #808080;
}

.gm-range {
  accent-color: #69cf8d;
}

.gm-kbd,
.axs-backdrop kbd {
  background-color: #242424;
  border-color: #383838;
  color: #cccccc;
}

.gm-kbd.inv {
  background-color: rgb(18 18 18 / .12);
  border-color: rgb(18 18 18 / .2);
  color: #173d24;
}

.gm-switch {
  background-color: #383838;
}

.gm-switch.on {
  background-color: #69cf8d;
}

.gm-table {
  color: #cccccc;
}

.gm-table th {
  color: #808080;
  border-color: #242424;
  background-color: #171717;
}

.gm-table td {
  border-color: #242424;
}

.gm-table tbody tr:hover {
  background-color: #1f1f1f;
}

.profile-header h2,
.reward-title h2 {
  font-weight: 600;
}

.profile-header p,
.profile-note,
.profile-label,
.profile-metric small,
.profile-detail-row > span,
.profile-history-head,
.profile-history-row small,
.profile-empty,
.reward-note,
.reward-label,
.reward-mode-caption {
  color: #808080;
}

.profile-status,
.reward-rule {
  color: #69cf8d;
}

.profile-metric {
  background-color: #1f1f1f;
  border-color: #242424;
  border-radius: 8px;
}

.profile-value {
  color: #f5f5f5;
  font-weight: 500;
}

.profile-panel {
  background-color: #171717;
  border-color: #2e2e2e;
  border-radius: 8px;
}

.profile-panel h3 {
  font-weight: 600;
}

.profile-tabs,
.profile-history-head,
.profile-history-row,
.profile-transaction,
.profile-redeem-action {
  border-color: #242424;
}

.profile-tabs .on,
.profile-subtabs [aria-pressed=true],
.reward-mode-row .on {
  background-color: #19271e;
  border-color: #3b6349;
  color: #69cf8d;
}

.profile-address,
.profile-tx-link {
  color: #4ea7fa;
}

.profile-address:hover,
.profile-tx-link:hover {
  color: #8bc5fa;
}

.profile-card .positive {
  color: #46b87d;
}

.profile-card .negative {
  color: #de5759;
}

.profile-review {
  background-color: #142019;
  border-color: #375942;
}

.profile-review h3,
.profile-redeem-amount strong {
  color: #69cf8d;
}

.profile-calldata,
.reward-address {
  color: #cccccc;
}

.profile-pending-reward {
  color: #c9ab5e;
}

.reward-status {
  background-color: #1f1f1f;
  border-color: #2e2e2e;
  border-radius: 6px;
}

.profile-card button:focus-visible,
.reward-card button:focus-visible {
  outline-color: #69cf8d;
}

.txa-note,
.txa-foot,
.txa-dim {
  color: #808080;
  border-color: #242424;
}

.txa-sub-box {
  background-color: #121212;
}

.txa-wbtn.pending {
  border-color: #69cf8d;
}

.txa-ghost {
  color: #cccccc;
  border-radius: 6px;
}

.txa-ghost:hover {
  background-color: #242424;
  color: #f5f5f5;
}

.txa-act {
  color: #69cf8d;
}

.ax-pop,
.tx-pop.j7-pop {
  background-color: #171717;
  border-color: #2e2e2e;
  border-radius: 8px;
}

.ax-pop-h,
.j7-pop-h {
  font-weight: 600;
  color: #f5f5f5;
}

.ax-pop-note,
.ax-pop-dim,
.ax-mrow-l small {
  color: #808080;
}

.ax-pop-sec {
  color: #808080;
  border-color: #242424;
}

.ax-mrow {
  color: #cccccc;
  border-radius: 4px;
}

.ax-mrow:hover:not(:disabled) {
  background-color: #242424;
  color: #f5f5f5;
}

.ax-mrow.static:hover {
  background-color: transparent;
}

.ax-mrow i {
  color: #808080;
}

.axs-top,
.axs-chips,
.axs-foot {
  border-color: #242424;
}

.axs-top {
  background-color: #1f1f1f;
}

.axs-in {
  color: #f5f5f5;
}

.axs-in::placeholder {
  color: #808080;
}

.axs-chip {
  background-color: #1f1f1f;
  border-color: #2e2e2e;
  border-radius: 4px;
  color: #cccccc;
}

.axs-chip.on {
  background-color: #19271e;
  border-color: #3b6349;
  color: #69cf8d;
}

.axs-row {
  border-radius: 4px;
}

.axs-row.sel {
  background-color: #242424;
}

.axs-tk {
  color: #f5f5f5;
  font-weight: 500;
}

.axs-nm,
.axs-label {
  color: #cccccc;
}

.axs-l2,
.axs-count,
.axs-foot,
.axs-num .k {
  color: #808080;
}

.axs-qb {
  background-color: #69cf8d;
  color: #121212;
  border-radius: 6px;
}

.axs-qb:hover {
  background-color: #87e8a9;
}

.axs-prev {
  background-color: #171717;
  border-color: #2e2e2e;
  border-radius: 8px;
}

.axs-num b.up,
.axs-num.mc b.up {
  color: #46b87d;
}

.axs-num b.dn,
.axs-num.mc b.dn {
  color: #de5759;
}