:root {

    --night:  #070a12;
    --panel:  #0f1420;
    --panel2: #161d2e;
    --line:   #24304a;
    --ink:    #eef3ff;
    --muted:  #8798b8;
    --neon:   #2f83f6;
    --neon2:  #1e5fd6;
    --cyber:  #1ad9c5;
    --price:  #4fe3ad;
    --ok:     #34d399;
    --warn:   #fbbf24;
    --bad:    #f87171;
    --rare:   #38bdf8;
    --epic:   #a78bfa;
    --legend: #f59e0b;

    --radius-ctl:  12px;
    --radius-card: 18px;

    --font-sans:    "Prompt", "Leelawadee UI", "Segoe UI", sans-serif;
    --font-display: "Chakra Petch", "Prompt", "Leelawadee UI", sans-serif;
}

.tg-body {
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(47,131,246,.12), transparent 60%),
        radial-gradient(760px 380px at 100% 0%, rgba(26,217,197,.07), transparent 55%),
        var(--night);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 300;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.tg-main {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    flex: 1;
    padding: 1rem 1rem 6rem;
}
.tg-main-admin { max-width: 76rem; }

@media (min-width: 768px) {
    .tg-main { padding-bottom: 2.5rem; }
}

.tg-footer {
    border-top: 1px solid var(--line);
    padding: 1.5rem 0;
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
}

:focus-visible {
    outline: 2px solid var(--cyber);
    outline-offset: 2px;
    border-radius: 6px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #33436b; }

.stack     { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm  { display: flex; flex-direction: column; gap: .75rem; }
.stack-lg  { display: flex; flex-direction: column; gap: 1.5rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.btn-row   { display: flex; gap: .625rem; }
.narrow    { max-width: 32rem; margin-inline: auto; }
.narrow-xs { max-width: 28rem; margin-inline: auto; }
.narrow-sm { max-width: 32rem; margin-inline: auto; }
.narrow-md { max-width: 44rem; margin-inline: auto; }
.narrow-lg { max-width: 58rem; margin-inline: auto; }
.pad   { padding: 1.25rem; }
.pad-x { padding-inline: 1.25rem; }
.pad-t { padding-top: 1.25rem; }
.min-w-0 { min-width: 0; }
.break-all { word-break: break-all; }

.two-col { display: grid; gap: 1rem; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.page-title    { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 0; }
.detail-title  { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0; }
.section-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem;
                 display: flex; align-items: center; gap: .5rem; }
.section-sub   { font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--muted);
                 margin: 0 0 .5rem; }
.page-sub  { font-size: .875rem; color: var(--muted); margin: 0; }
.small     { font-size: .875rem; }
.tiny      { font-size: .75rem; }
.mono      { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.underline { text-decoration: underline; }
.strike    { text-decoration: line-through; }

.txt-muted  { color: var(--muted); }
.txt-ink    { color: var(--ink); }
.txt-ok     { color: var(--ok); }
.txt-bad    { color: var(--bad); }
.txt-warn   { color: var(--warn); }
.txt-cyber  { color: var(--cyber); }
.txt-price  { color: var(--price); }
.txt-epic   { color: var(--epic); }
.txt-rare   { color: var(--rare); }
.txt-legend { color: var(--legend); }

.link-epic  { color: var(--epic); text-decoration: underline; }
.link-cyber { color: var(--cyber); text-decoration: underline; }
.link-hover { color: inherit; text-decoration: none; }
.link-hover:hover { color: var(--epic); }

.truncate-sm { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-md { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-neon, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: var(--radius-ctl);
    padding: .625rem 1.25rem;
    font-family: var(--font-display); font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: filter .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn-neon {
    background: linear-gradient(135deg, var(--neon2), var(--neon));
    color: #fff; border: none;
}
.btn-neon:hover { filter: brightness(1.1); box-shadow: 0 0 24px rgba(47,131,246,.4); color: #fff; }
.btn-neon:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

.btn-ghost {
    border: 1px solid var(--line); background: var(--panel);
    color: var(--ink); font-weight: 500;
}
.btn-ghost:hover { border-color: rgba(47,131,246,.6); color: #fff; }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.btn-on-hero { background: rgba(255,255,255,.1); color: #fff; }
.btn-danger-ghost { border-color: rgba(248,113,113,.4); color: var(--bad); }
.btn-danger-ghost:hover { border-color: var(--bad); color: var(--bad); }

.btn-sm { padding: .375rem 1rem; font-size: .875rem; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }

.btn-pay {
    border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 600;
    background: linear-gradient(to right, var(--neon2), var(--neon));
    color: #fff; text-decoration: none; position: relative; z-index: 2;
}
.btn-pay:hover { filter: brightness(1.1); color: #fff; }

.btn-icon-danger {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.75rem; height: 1.75rem;
    border-radius: 8px; border: 1px solid transparent; background: none;
    color: var(--muted); cursor: pointer;
    transition: color .15s, background-color .15s, border-color .15s;
}
.btn-icon-danger:hover { color: var(--bad); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
.btn-icon-danger:disabled { opacity: .3; cursor: not-allowed; }
.btn-icon-danger:disabled:hover { color: var(--muted); border-color: transparent; background: none; }
@media (max-width: 767px) { .btn-icon-danger { width: 2.5rem; height: 2.5rem; } }

.row-actions { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }

.input-dark {
    width: 100%;
    border-radius: var(--radius-ctl);
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--ink);
    padding: .625rem .875rem;
    font-family: var(--font-sans);
    font-size: .95rem;
}
.input-dark::placeholder { color: rgba(142,138,168,.7); }
.input-dark:focus { border-color: var(--neon); outline: none; }
.input-dark option { background: var(--panel2); color: var(--ink); }

.input-lg     { font-size: 1.05rem; }
.input-num    { width: 7rem; }
.input-search { width: 16rem; }
.input-date   { width: auto; color-scheme: dark; }
.input-auto   { width: auto; }

.iw-4 { width: 4rem; } .iw-6 { width: 6rem; } .iw-7 { width: 7rem; } .iw-9 { width: 9rem; }

.field { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.field-label { font-weight: 500; }
.field-hint  { font-size: .75rem; color: var(--muted); }
.field-inline { flex-direction: column; }
.field-narrow { max-width: 16rem; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: .75rem; }
.fieldset legend { float: none; width: auto; font-size: .875rem; padding-inline: .375rem; }

.check-row { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); }
.check-row input { accent-color: var(--neon); width: 1rem; height: 1rem; }

.card-panel {
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: var(--panel);
}
.empty-box {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    padding: 2.5rem 1.25rem; text-align: center;
}
.empty-note { padding: 1.5rem; text-align: center; font-size: .875rem; color: var(--muted); margin: 0; }
.empty-emoji { font-size: 2.25rem; }
.empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 999px;
    background: var(--panel2); color: var(--muted);
}

.note-muted { border: 1px solid var(--line); background: var(--panel2);
              border-radius: var(--radius-ctl); padding: .5rem .75rem; color: var(--muted); margin: 0; }
.note-cyber { border: 1px solid rgba(26,217,197,.4); background: rgba(26,217,197,.1);
              border-radius: var(--radius-ctl); padding: .625rem .75rem; font-size: .875rem; margin: 0; }
.note-bad   { border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.1);
              border-radius: var(--radius-ctl); padding: .5rem .75rem; font-size: .875rem; margin: 0; }
.note-warn  { border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.1);
              border-radius: var(--radius-ctl); padding: .625rem .75rem; font-size: .875rem; margin: 0; }

.chip {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
    padding: .375rem .875rem; font-size: .875rem; color: var(--muted);
    text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s;
}
.chip:hover { border-color: rgba(47,131,246,.5); color: var(--ink); }
.chip-on { border-color: var(--neon); background: rgba(47,131,246,.15); color: #cfe3ff; font-weight: 500; }
.chip-xs { padding: .25rem .625rem; font-size: .75rem; }
.chip-count { margin-left: .25rem; opacity: .7; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-row-tight { gap: .375rem; }

.tg-nav {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid var(--line);
    background: rgba(7,10,18,.72); backdrop-filter: blur(12px);
}
.tg-nav-inner {
    max-width: 64rem; margin: 0 auto; padding: .75rem 1rem;
    display: flex; align-items: center; gap: 1rem;
}
.tg-brand { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
            letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.tg-brand-accent {
    background: linear-gradient(to right, var(--neon), var(--cyber));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tg-nav-links { align-items: center; gap: .25rem; font-size: .875rem; }
.tg-nav-link { border-radius: 8px; padding: .375rem .75rem; color: var(--muted); text-decoration: none; }
.tg-nav-link:hover { color: var(--ink); }
.tg-nav-admin { color: var(--warn); }
.tg-nav-admin:hover { filter: brightness(1.1); color: var(--warn); }
.tg-nav-right { margin-left: auto; display: flex; align-items: center; gap: .625rem; }
.tg-user-pill {
    display: inline-flex; align-items: center; gap: .375rem;
    border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
    padding: .375rem .875rem; font-size: .875rem; color: var(--ink); text-decoration: none;
}
.tg-logout {
    border-radius: 8px; border: 1px solid var(--line); background: none;
    padding: .25rem .625rem; font-size: .75rem; color: var(--muted); cursor: pointer;
}
.tg-logout:hover { border-color: rgba(248,113,113,.5); color: var(--bad); }

@media (max-width: 767px) {
    .tg-logout, .tg-user-pill {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

.tg-bottomnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    border-top: 1px solid var(--line);
    background: rgba(9,13,22,.92); backdrop-filter: blur(12px);
}
.tg-bottomnav-inner {
    max-width: 28rem; margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: space-around;
    padding: .375rem .5rem .5rem;
}
.tg-tab {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    width: 3.5rem; padding: .25rem 0; font-size: .625rem;
    color: var(--muted); text-decoration: none;
}
.tg-tab.is-active { color: var(--cyber); }
.tg-tab-fab { position: relative; top: -1rem; gap: .125rem; }
.tg-fab-circle {
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 999px;
    background: linear-gradient(to bottom right, var(--neon), var(--cyber));
    color: #fff; box-shadow: 0 6px 20px rgba(47,131,246,.55);
}
.tg-fab-label { font-size: .625rem; font-weight: 500; color: var(--cyber); }

.icon     { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-sm  { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-lg  { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.icon-xl  { width: 3rem; height: 3rem; flex-shrink: 0; }
.icon-xxl { width: 7rem; height: 7rem; flex-shrink: 0; }

.game-icon { border-radius: 22%; object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,.4); flex-shrink: 0; }
.game-icon-emoji { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }

.hero {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, #123a8f 0%, #0b1e5c 55%, #0e5f6e 100%);
    padding: 1.5rem;
}
@media (min-width: 768px) { .hero { padding: 2.5rem; } }
.hero-topup { background: linear-gradient(135deg, #0f2f78 0%, #0a1a4d 55%, #0c4a52 100%); }
.hero-glow {
    pointer-events: none; position: absolute; right: -4rem; top: -5rem;
    width: 14rem; height: 14rem; border-radius: 999px;
    background: rgba(26,217,197,.2); filter: blur(48px);
}
.hero-title {
    position: relative; font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0;
}
@media (min-width: 768px) { .hero-title { font-size: 2.25rem; } }
.hero-title-sm { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: .75rem 0 0; }
.hero-accent {
    background: linear-gradient(to right, #8fb8ff, #5ff0dd);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { position: relative; margin: .5rem 0 0; max-width: 30rem; font-size: .875rem; color: #c7dbff; }
.hero-actions { position: relative; margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.pill {
    display: inline-block; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1);
    padding: .25rem .75rem; font-size: .75rem; font-weight: 500; color: #a9c7ff;
}

.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (min-width: 640px) { .game-grid { grid-template-columns: repeat(6, 1fr); } }
.game-tile {
    display: flex; flex-direction: column; align-items: center; gap: .625rem;
    border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--panel);
    padding: 1rem .5rem; text-align: center; text-decoration: none; color: var(--ink);
    transition: transform .15s, border-color .15s, box-shadow .15s;
    min-width: 0;
}
.game-tile:hover {
    transform: translateY(-2px); border-color: rgba(47,131,246,.6);
    box-shadow: 0 0 16px rgba(47,131,246,.3); color: var(--ink);
}
.game-tile-name { font-size: .75rem; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }

.stat-grid-3 > *, .stat-grid-4 > *, .stat-grid-6 > *,
.item-grid > *, .game-grid > *, .feature-grid > *,
.two-col > *, .form-grid > * { min-width: 0; }

.stat-value, .stat-label, .rank-name, .offer-text,
.field-label, .field-hint { overflow-wrap: anywhere; }

.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .item-grid { grid-template-columns: repeat(4, 1fr); } }

.item-card {
    display: flex; flex-direction: column; gap: .5rem;
    border-radius: var(--radius-card); border: 1px solid var(--line);
    background: var(--panel); padding: .75rem;
    text-decoration: none; color: var(--ink);
    transition: transform .15s, box-shadow .15s;

    min-width: 0;
}
.item-card:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(47,131,246,.25); color: var(--ink); }
.brd-line   { border-color: var(--line); }
.brd-rare   { border-color: rgba(56,189,248,.5); }
.brd-epic   { border-color: rgba(167,139,250,.5); }
.brd-legend { border-color: rgba(245,158,11,.6); box-shadow: 0 0 18px rgba(245,158,11,.15); }

.item-art {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 2/1; border-radius: 12px;
    background: linear-gradient(to bottom right, var(--panel2), #171b2e);
    transition: transform .15s;
}
.item-card:hover .item-art { transform: scale(1.03); }
.item-art-emoji { font-size: 2.25rem; line-height: 1; }

.badge-any {
    position: absolute; right: .375rem; top: .375rem;
    border-radius: 999px; background: linear-gradient(to right, var(--neon2), #0e9e91);
    padding: .125rem .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.badge-off {
    position: absolute; left: .375rem; top: .375rem;
    border-radius: 999px; background: var(--bad);
    padding: .125rem .5rem; font-size: .625rem; font-weight: 700; color: #fff;
}
.badge-off-lg {
    border-radius: 999px; background: var(--bad);
    padding: .25rem .625rem; font-size: .75rem; font-weight: 700; color: #fff;
}
.badge-save {
    border-radius: 999px; background: rgba(248,113,113,.15);
    padding: .125rem .375rem; font-size: .625rem; font-weight: 500; color: var(--bad);
}

.item-body   { min-height: 2.5rem; }
.item-rarity { font-size: .625rem; font-weight: 700; letter-spacing: .1em; }
.rar-rare { color: var(--rare); } .rar-epic { color: var(--epic); } .rar-legend { color: var(--legend); }
.item-rarity-lg { font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.item-name {
    font-size: .875rem; font-weight: 500; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

    overflow-wrap: anywhere;
}
.item-meta { margin-top: .125rem; font-size: .75rem; color: var(--muted); }
.item-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.item-price { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--price); font-variant-numeric: tabular-nums; }
.item-price-rate { font-size: .875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-price-old { font-size: .75rem; color: var(--muted); text-decoration: line-through; }
.item-cta {
    flex-shrink: 0; border-radius: 999px;
    background: linear-gradient(to right, var(--neon2), var(--neon));
    padding: .25rem .875rem; font-size: .75rem; font-weight: 600; color: #fff;
}

.item-detail-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .item-detail-grid { grid-template-columns: 1fr 1fr; } }
.item-detail { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.item-hero {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 2/1; border-radius: 12px;
    background: linear-gradient(to bottom right, var(--panel2), #171b2e);
}
.item-hero-emoji { font-size: 4.5rem; line-height: 1; }
.item-desc { font-size: .875rem; line-height: 1.7; color: rgba(241,239,250,.9); margin: 0; }
.delivery-strip {
    display: flex; align-items: center; gap: .5rem;
    border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
    padding: .75rem 1rem; font-size: .875rem;
}
.price-lg { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }
.price-md { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }
.price-old { font-family: var(--font-display); font-size: 1.125rem; color: var(--muted); text-decoration: line-through; }
.price-row { display: flex; align-items: center; gap: .75rem; }

.buybox { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.buybox-auth { display: flex; gap: .5rem; }
.preview-box {
    border-radius: var(--radius-ctl); border: 1px solid rgba(26,217,197,.3);
    background: rgba(26,217,197,.05); padding: .625rem .875rem; font-size: .875rem;
}
.save-box {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border-radius: var(--radius-ctl); border: 1px solid rgba(248,113,113,.3);
    background: rgba(248,113,113,.05); padding: .625rem 1rem;
}

.filter-box { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filter-label { margin-right: .25rem; font-size: .875rem; font-weight: 500; color: var(--muted); }
.filter-sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); }

.crumb { font-size: .875rem; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb-now { color: var(--ink); }
.game-head { display: flex; align-items: center; gap: .875rem; }

.badge-status {
    display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid;
    padding: .125rem .625rem; font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.badge-ok    { border-color: rgba(52,211,153,.4);  background: rgba(52,211,153,.1);  color: var(--ok); }
.badge-warn  { border-color: rgba(251,191,36,.4);  background: rgba(251,191,36,.1);  color: var(--warn); }
.badge-bad   { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: var(--bad); }
.badge-cyber { border-color: rgba(26,217,197,.4);  background: rgba(26,217,197,.1);  color: var(--cyber); }
.badge-mute  { border-color: var(--line); background: var(--panel2); color: var(--muted); }

.mini-badge { border-radius: 999px; border: 1px solid; padding: .0625rem .5rem; font-size: .625rem; margin-left: .375rem; }
.mb-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: var(--warn); }
.mb-bad  { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: var(--bad); }

.ticker { overflow: hidden; }
.ticker-head {
    border-bottom: 1px solid var(--line); padding: .625rem 1rem;
    font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--muted); margin: 0;
}
.ticker-list { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.ticker-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid rgba(36,48,74,.6); }
.ticker-row:first-child { border-top: none; }
.ticker-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-price { font-weight: 600; color: var(--price); font-variant-numeric: tabular-nums; }
.ticker-time { width: 6rem; text-align: right; font-size: .75rem; color: var(--muted); }

.stat-grid-3, .stat-grid-4, .stat-grid-6 { display: grid; gap: .75rem; }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
.stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
    .stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) { .stat-grid-6 { grid-template-columns: repeat(6, 1fr); } }

.stat-tile { padding: 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.card-panel.stat-tile { background: var(--panel); }
.stat-label { font-size: .75rem; color: var(--muted); }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-link { text-decoration: none; color: inherit; transition: border-color .15s; }
.stat-link:hover { border-color: rgba(47,131,246,.5); color: inherit; }

.bar-chart { display: flex; height: 10rem; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .375rem; height: 100%; justify-content: flex-end; }
.bar-num { font-size: .625rem; color: var(--muted); font-variant-numeric: tabular-nums; min-height: .75rem; }
.bar { width: 100%; border-radius: 4px 4px 0 0; overflow: hidden; }
.bar-solid { background: linear-gradient(to top, var(--neon2), var(--cyber)); }
.bar-stack { display: flex; flex-direction: column-reverse; }
.seg { display: block; width: 100%; }
.seg-ok { background: var(--ok); } .seg-warn { background: var(--warn); } .seg-bad { background: var(--bad); }
.bar-label { font-size: .625rem; color: var(--muted); }

.legend { display: flex; gap: .75rem; font-size: .75rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .25rem; }
.sw { width: .625rem; height: .625rem; border-radius: 2px; display: inline-block; }
.sw-ok { background: var(--ok); } .sw-warn { background: var(--warn); } .sw-bad { background: var(--bad); }

.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rank-row { display: flex; align-items: center; gap: .625rem; font-size: .875rem; }
.rank-no { width: 1rem; text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.rank-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-amount { width: 5rem; text-align: right; font-weight: 600; color: var(--price); font-variant-numeric: tabular-nums; }
.rank-count { width: 3.5rem; text-align: right; }
.progress-track { flex: 1; height: .375rem; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: linear-gradient(to right, var(--neon2), var(--cyber)); }
.progress-bad { background: rgba(248,113,113,.7); }

.table-wrap { overflow-x: auto; }
.tg-table { width: 100%; min-width: 40rem; font-size: .875rem; border-collapse: collapse; }
.tg-table thead th {
    border-bottom: 1px solid var(--line); text-align: left; padding: .625rem 1rem;
    font-size: .75rem; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap;
}
.tg-table tbody td { border-top: 1px solid rgba(36,48,74,.6); padding: .625rem 1rem; vertical-align: middle; }
.row-off { opacity: .5; }
.sub-line { display: block; font-size: .625rem; font-weight: 400; color: var(--muted); }

.toggle-pill {
    border-radius: 999px; border: 1px solid; padding: .125rem .625rem;
    font-size: .75rem; cursor: pointer; background: none;
}
.toggle-pill.on  { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); color: var(--ok); }
.toggle-pill.off { border-color: var(--line); background: var(--panel2); color: var(--muted); }

.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.order-row {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--panel);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.order-row:hover { transform: translateY(-2px); border-color: rgba(47,131,246,.5); box-shadow: 0 0 18px rgba(47,131,246,.18); }
.order-stripe { position: absolute; left: 0; top: 0; height: 100%; width: 4px; }
.stripe-warn { background: var(--warn); } .stripe-ok { background: var(--ok); }
.stripe-cyber { background: var(--cyber); } .stripe-line { background: var(--line); }
.order-hit { position: absolute; inset: 0; z-index: 1; }
.order-inner { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem .875rem 1.25rem; }
.order-main { min-width: 0; flex: 1; }
.order-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.order-meta { margin-top: .125rem; display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; font-size: .75rem; color: var(--muted); }
.order-right { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: .25rem; }
.order-price { font-weight: 600; color: var(--price); font-variant-numeric: tabular-nums; }

.detail-head { display: flex; align-items: center; gap: .75rem; }
.detail-emoji { font-size: 1.75rem; line-height: 1; }
.detail-list {
    display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem;
    border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
    padding: 1rem; font-size: .875rem; margin: 0;
}
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; text-align: right; }
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; font-size: .875rem; margin: 0; }
.kv-list dt { color: var(--muted); }
.kv-list dd { margin: 0; }

.code-box {
    overflow-x: auto; border-radius: 8px; border: 1px solid rgba(52,211,153,.4);
    background: #0d1f18; padding: .75rem;
    font-family: ui-monospace, monospace; font-size: .875rem; color: var(--price);
    white-space: pre-wrap; word-break: break-all; margin: 0 0 .5rem;
}
.slip-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.slip-mini { display: flex; align-items: center; gap: .75rem; }

.pay-head { display: flex; align-items: flex-start; gap: .75rem; }
.countdown { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--warn); font-size: .875rem; }
.countdown.is-urgent { color: var(--bad); }
.qr-panel { display: flex; flex-direction: column; align-items: center; gap: .5rem; border-radius: 12px; background: #fff; padding: 1rem; }
.qr-img { width: 13rem; height: 13rem; }
.qr-note { text-align: center; font-size: .75rem; font-weight: 500; color: #1c1a28; }
.qr-warn { padding: 1.5rem 0; text-align: center; font-size: .875rem; color: #1c1a28; margin: 0; }
.qr-amount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #0e7490; font-variant-numeric: tabular-nums; }

.thanks-head { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.thanks-medal {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 6rem; height: 6rem; border-radius: 999px;
    background: linear-gradient(to bottom right, rgba(52,211,153,.25), rgba(26,217,197,.15));
}
.thanks-glow { position: absolute; inset: 0; border-radius: 999px; background: rgba(52,211,153,.2); filter: blur(32px); }
.thanks-item { display: flex; align-items: center; gap: .75rem; }
.amount-row {
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
    padding: .625rem 1rem; font-size: .875rem;
}

.dropzone {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    cursor: pointer; border-radius: var(--radius-card);
    border: 2px dashed #33436b; background: #0b0f1a;
    padding: 1.5rem; text-align: center; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--neon); background: rgba(47,131,246,.05); }
.dropzone.has-file { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.05); }
.dropzone.has-file .js-drop-title { color: var(--ok); }
.dropzone-icon {
    display: flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 999px;
    background: linear-gradient(to bottom right, rgba(47,131,246,.25), rgba(26,217,197,.15));
    color: var(--cyber);
}
.dropzone-preview { width: 6rem; height: 6rem; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.dropzone-sub { margin-top: .125rem; display: block; font-size: .75rem; color: var(--muted); }
.slip-uploader { display: flex; flex-direction: column; gap: .75rem; }

.verify-steps { display: flex; flex-direction: column; gap: .625rem; padding: 1rem; }
.verify-row { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.verify-mark {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1px solid var(--line);
    font-size: .75rem; font-weight: 700; color: var(--muted); flex-shrink: 0;
}
.verify-row.is-done .verify-mark { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.15); color: var(--ok); }
.verify-row.is-now .verify-mark  { border-color: var(--neon); background: rgba(47,131,246,.15); color: var(--cyber); animation: pulse 1.2s ease-in-out infinite; }
.verify-label { color: var(--muted); }
.verify-row.is-done .verify-label, .verify-row.is-now .verify-label { color: var(--ink); }
.verify-now { margin-left: auto; font-size: .75rem; color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.pending-slip { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-color: rgba(251,191,36,.4); }
.pending-head { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; }

.offer-picker { display: flex; flex-direction: column; gap: .75rem; }
.offer-list { display: flex; flex-direction: column; gap: .5rem; }
.offer {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    border-radius: var(--radius-ctl); border: 1px solid var(--line); background: none;
    padding: .75rem; text-align: left; font-size: .875rem; color: var(--ink);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.offer:hover { border-color: rgba(47,131,246,.5); }
.offer.is-picked { border-color: var(--neon); background: rgba(47,131,246,.1); }
.offer-text { flex: 1; min-width: 0; }
.offer-sub { display: block; font-size: .75rem; color: var(--muted); }
.offer-price { font-weight: 600; color: var(--price); font-variant-numeric: tabular-nums; }
.offer-fields {
    display: flex; flex-direction: column; gap: .5rem;
    border-radius: var(--radius-ctl); border: 1px solid var(--line); background: var(--panel2); padding: .75rem;
}

.slip-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.slip-check-row { display: flex; align-items: center; gap: .625rem; font-size: .875rem; }
.chk-mark {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1px solid;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.chk-label { min-width: 0; flex: 1; }
.chk-no { font-size: .75rem; color: var(--muted); }
.chk-text { flex-shrink: 0; font-size: .75rem; font-weight: 500; }
.chk-pass  { border-color: rgba(52,211,153,.5);  background: rgba(52,211,153,.15);  color: var(--ok); }
.chk-fail  { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.15); color: var(--bad); }
.chk-error { border-color: rgba(251,191,36,.5);  background: rgba(251,191,36,.15);  color: var(--warn); }
.chk-skip, .chk-none { border-color: var(--line); background: var(--panel2); color: var(--muted); }
span.chk-pass, span.chk-fail, span.chk-error, span.chk-skip, span.chk-none { border: none; background: none; }

.admin-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .75rem; }
.admin-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--warn); margin: 0; }
.admin-who { font-size: .75rem; color: var(--muted); }
.admin-nav { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; }
.admin-nav .chip { flex-shrink: 0; }

.admin-order { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.ao-head { display: flex; align-items: flex-start; gap: .75rem; }
.ao-slips { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.ao-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.ao-form { display: flex; flex: 1; min-width: 16rem; align-items: flex-end; gap: .5rem; }
.gd-chip { margin-left: .375rem; border-radius: 4px; background: var(--panel2); padding: .125rem .375rem; color: var(--cyber); }
.slip-chip { border-radius: 999px; border: 1px solid; padding: .0625rem .5rem; font-size: .6875rem; text-decoration: none; }
.slip-chip.txt-ok   { border-color: rgba(52,211,153,.4);  background: rgba(52,211,153,.1); }
.slip-chip.txt-bad  { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
.slip-chip.txt-warn { border-color: rgba(251,191,36,.4);  background: rgba(251,191,36,.1); }

.queue-card { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-color: rgba(251,191,36,.4); }
.queue-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }

.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.export-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem; }
.form-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; }
.form-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } .span-2 { grid-column: span 2; } }
@media (min-width: 992px) { .form-grid { grid-template-columns: repeat(3, 1fr); } .span-3 { grid-column: span 3; } }
.form-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.simple-list li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.simple-list li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-emoji { display: inline-flex; width: 20px; justify-content: center; }

.scroll-list { max-height: 22rem; overflow-y: auto; padding-right: .25rem; }
.add-form {
    border-bottom: 1px solid var(--line);
    padding-bottom: .75rem;
    margin-bottom: .25rem;
}
.code-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; }
.code-list li { display: flex; align-items: center; gap: .5rem; }

.slip-detail-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .slip-detail-grid { grid-template-columns: 280px 1fr; } }
.slip-img { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #fff; object-fit: contain; }
.label-cap { padding-inline: .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--muted); margin: 0; }

.verdict { border-radius: var(--radius-card); border: 1px solid; padding: .75rem 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.vd-ok    { border-color: rgba(52,211,153,.5);  background: rgba(52,211,153,.1);  color: var(--ok); }
.vd-cyber { border-color: rgba(26,217,197,.5);  background: rgba(26,217,197,.1);  color: var(--cyber); }
.vd-bad   { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); color: var(--bad); }
.vd-warn  { border-color: rgba(251,191,36,.5);  background: rgba(251,191,36,.1);  color: var(--warn); }
.vd-mute  { border-color: var(--line); background: var(--panel2); color: var(--muted); }

.raw-summary { cursor: pointer; font-weight: 500; color: var(--muted); }
.raw-json {
    margin-top: .5rem; overflow-x: auto; border-radius: 8px; border: 1px solid var(--line);
    background: #0b0f1a; padding: .75rem; font-family: ui-monospace, monospace; font-size: .75rem; color: var(--muted);
}
.var-chip { border-radius: 4px; background: var(--panel2); padding: .125rem .375rem; font-family: ui-monospace, monospace; color: var(--cyber); }
.status-strip { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); }

.mt-1 { margin-top: .25rem; }

.toggle-box {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    border-radius: var(--radius-ctl); border: 1px solid rgba(26,217,197,.3);
    background: rgba(26,217,197,.05); padding: .75rem;
}
.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-off, .switch-on { font-size: .6875rem; font-weight: 500; }
.switch-off { color: var(--muted); }
.switch-on  { color: var(--ok); display: none; }
.switch input:checked ~ .switch-off { display: none; }
.switch input:checked ~ .switch-on  { display: inline; }
.switch-track {
    position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px;
    background: var(--line); transition: background .15s;
}
.switch-track::after {
    content: ''; position: absolute; left: .125rem; top: .125rem;
    width: 1rem; height: 1rem; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.switch input:checked ~ .switch-track { background: var(--ok); }
.switch input:checked ~ .switch-track::after { transform: translateX(1rem); }

.auth-wrap { max-width: 24rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; }
.auth-title { text-align: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.auth-foot { text-align: center; font-size: .875rem; color: var(--muted); margin: 0; }

.profile-head { display: flex; align-items: center; gap: .75rem; }
.avatar {
    display: flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 999px;
    background: linear-gradient(to bottom right, rgba(47,131,246,.25), rgba(26,217,197,.15));
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--cyber);
}
.profile-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }

.step-list { list-style: none; margin: 0; padding: 0; }
.step-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-size: .875rem; border-top: 1px solid rgba(36,48,74,.6); }
.step-row:first-child { border-top: none; }
.step-num {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.75rem; height: 1.75rem; border-radius: 999px;
    background: linear-gradient(to bottom right, var(--neon), var(--cyber));
    font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: #fff;
}
.faq { padding: 1rem; }
.faq-q { cursor: pointer; list-style: none; font-size: .875rem; font-weight: 500; }
.faq-q::-webkit-details-marker { display: none; }
.faq-arrow { display: inline-block; margin-right: .5rem; transition: transform .15s; }
.faq[open] .faq-arrow { transform: rotate(90deg); }
.faq-a { margin: .5rem 0 0; padding-left: 1.25rem; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.contact-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; font-size: .875rem; }

.step-strip { position: relative; margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.step-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.step-line { position: absolute; left: 50%; top: 1.25rem; height: 1px; width: 100%; background: rgba(255,255,255,.15); }
.step-circle {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff;
}
.step-label { font-size: .75rem; font-weight: 600; color: #fff; }
.step-sub { font-size: .625rem; color: #a9c7ff; }
.step-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; border-radius: 999px;
    background: rgba(47,131,246,.2); font-size: .6875rem; font-weight: 700; color: #a9c7ff;
}

.promptpay-card {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card); border: 1px solid var(--line);
    background: linear-gradient(to bottom right, #14233f, #0e2e33); padding: 1.25rem;
}
.pp-watermark { pointer-events: none; position: absolute; right: -1.5rem; top: -1.5rem; color: rgba(255,255,255,.05); }
.pp-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pp-label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--cyber); }
.pp-step { border-radius: 999px; background: rgba(255,255,255,.1); padding: .0625rem .625rem; font-size: .625rem; color: rgba(255,255,255,.7); }
.pp-value { position: relative; margin-top: .75rem; }
.pp-account { position: relative; margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); padding-top: .75rem; font-size: .875rem; }
.pp-account span { color: rgba(255,255,255,.6); }
.pp-account b { color: #fff; }
.pp-note { position: relative; margin: .5rem 0 0; font-size: .75rem; color: rgba(255,255,255,.5); }
.copy-value {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1);
    padding: .375rem .75rem; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 1.125rem; font-weight: 700; color: #fff; cursor: pointer; transition: border-color .15s;
}
.copy-value:hover { border-color: rgba(255,255,255,.3); }

.feature-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }
.feature-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 8px;
    background: linear-gradient(to bottom right, rgba(47,131,246,.2), rgba(26,217,197,.1)); color: var(--cyber);
}

.flash-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.flash { border-radius: var(--radius-ctl); border: 1px solid; padding: .625rem .875rem; font-size: .875rem; margin: 0; }
.flash-ok   { border-color: rgba(52,211,153,.4);  background: rgba(52,211,153,.1);  color: var(--ok); }
.flash-bad  { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: var(--bad); }
.flash-warn { border-color: rgba(251,191,36,.4);  background: rgba(251,191,36,.1);  color: var(--warn); }
.flash-info { border-color: rgba(26,217,197,.4);  background: rgba(26,217,197,.1);  color: var(--cyber); }

.error-card { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem 1.5rem; text-align: center; max-width: 30rem; margin-inline: auto; }
.error-emoji { font-size: 3rem; }
.error-code { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; margin: 0; color: var(--muted); }
.error-msg { color: var(--ink); margin: 0; }
.error-actions { display: flex; gap: .5rem; margin-top: .5rem; }

@keyframes tg-pop {
    0%   { transform: scale(.5); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes tg-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.animate-pop  { animation: tg-pop .55s cubic-bezier(.2,.8,.2,1) both; }
.animate-rise { animation: tg-rise .5s ease-out .15s both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.swal2-popup { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: var(--radius-card) !important; font-family: var(--font-sans) !important; }
.swal2-title { color: var(--ink) !important; font-family: var(--font-display) !important; }
.swal2-html-container { color: var(--muted) !important; }
.swal2-confirm { background: linear-gradient(to right, var(--neon2), var(--neon)) !important; border-radius: var(--radius-ctl) !important; }
.swal2-cancel  { background: var(--panel2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-ctl) !important; }

.dataTables_wrapper { color: var(--muted); padding: 0 1rem 1rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: .25rem .5rem;
}
.dataTables_wrapper .paginate_button { color: var(--muted) !important; }
.dataTables_wrapper .paginate_button.current { background: var(--neon) !important; color: #fff !important; border-radius: 6px; }

.dt-container { color: var(--muted); padding: 0 1rem 1rem; }
.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
    border-radius: 8px; padding: .3rem .55rem; margin-inline: .35rem;
}
.dt-container .dt-paging .dt-paging-button {
    color: var(--muted) !important; border-radius: 6px; padding: .3rem .7rem;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--neon) !important; color: #fff !important; border-color: transparent !important;
}
.dt-container .dt-info { color: var(--muted); font-size: .8rem; }
table.dataTable > tbody > tr { background: transparent; }
table.dataTable > tbody > tr:hover { background: rgba(47,131,246,.06); }
table.dataTable td, table.dataTable th { border-color: rgba(36,48,74,.6) !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img.game-icon { display: inline-block; }

.btn-neon { position: relative; overflow: hidden; }
.btn-neon::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease;
}
.btn-neon:hover::after { transform: translateX(120%); }
.btn-neon:active, .btn-ghost:active { transform: translateY(1px) scale(.99); }

.item-card, .game-tile { will-change: transform; }

@keyframes tg-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-14px, 12px); }
}
.hero-glow { animation: tg-float 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }

a, .chip, .tg-nav-link, .tg-tab { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }

[data-aos] { will-change: opacity, transform; }

@media (max-width: 767px) {
    .btn-neon, .btn-ghost, .input-dark { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .chip, .toggle-pill { min-height: 38px; display: inline-flex; align-items: center; }
}

.input-dark { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.input-dark:focus { box-shadow: 0 0 0 3px rgba(47,131,246,.22); }

.card-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px -24px rgba(0,0,0,.9); }

.tg-nav-link:hover { background: rgba(47,131,246,.12); }

.chip:active, .game-tile:active, .item-card:active, .order-row:active,
.offer:active, .tg-user-pill:active, .copy-value:active, .stat-link:active {
    transform: translateY(1px) scale(.995);
}

.tg-shell    { flex: 1; display: flex; width: 100%; align-items: stretch; }
.tg-viewport { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-content  { flex: 1; width: 100%; max-width: 76rem; margin-inline: auto; padding: 1.4rem 1rem 3rem; }
.tg-footer {
    border-top: 1px solid var(--line); margin-top: 1.5rem; padding: 2rem 0 1.5rem;
    text-align: left; font-size: .8125rem; line-height: 1.7; color: var(--muted);
}
@media (max-width: 767px) { .tg-footer { padding-bottom: 5.5rem; } }

.tg-footer-grid,
.tg-footer-legal { max-width: 64rem; margin-inline: auto; padding-inline: 1rem; }
.tg-footer-grid  { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tg-footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.tg-footer-col p  { margin: 0 0 .45rem; }
.tg-footer-head   { font-weight: 600; color: var(--ink); margin-bottom: .55rem; }
.tg-footer-links  { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tg-footer-links a { color: var(--muted); text-decoration: none; }
.tg-footer-links a:hover,
.tg-footer-links a:focus-visible { color: var(--neon); }
.tg-footer-plain  { color: var(--muted); }

.tg-footer-legal {
    margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .72rem; text-align: center;
}
.tg-footer-legal-id { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .78rem; }

.help-contact-ways { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .5rem !important; }
.help-contact-ways a { color: #cfe3ff; text-decoration: underline; text-underline-offset: 2px; }
.help-contact-ways a:hover { color: var(--ink); }

.tg-rail { display: none; }
@media (min-width: 1024px) {
    .tg-content { padding: 2rem 2.25rem 2.5rem; }
    .tg-rail {
        display: flex; flex-direction: column; gap: 1rem;
        width: 264px; flex-shrink: 0;
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
        padding: 1.25rem 1rem;
        border-right: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(47,131,246,.07), transparent 32%), rgba(12,17,29,.65);
        backdrop-filter: blur(6px);
    }
}
.tg-rail-brand {
    display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; margin-bottom: .1rem;
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
    color: var(--ink); text-decoration: none;
}
.tg-rail-logo { width: 2.1rem; height: 2.1rem; border-radius: 9px; }
.tg-rail-cta  { width: 100%; }
.tg-rail-nav  { display: flex; flex-direction: column; gap: .25rem; }
.tg-rail-link {
    display: flex; align-items: center; gap: .8rem; padding: .6rem .75rem; border-radius: 12px;
    color: var(--muted); text-decoration: none; font-weight: 500; border: 1px solid transparent;
}
.tg-rail-link:hover { background: rgba(255,255,255,.045); color: var(--ink); }
.tg-rail-link.is-active { background: rgba(47,131,246,.14); color: var(--ink); border-color: rgba(47,131,246,.32); }
.tg-rail-link.is-active .icon { color: var(--neon); }
.tg-rail-admin { color: var(--warn); }
.tg-rail-admin:hover { color: var(--warn); }
.tg-rail-spacer { flex: 1; min-height: .5rem; }
.tg-rail-promo {
    border-radius: 14px; border: 1px solid var(--line);
    background: linear-gradient(140deg, rgba(47,131,246,.14), rgba(26,217,197,.06)); padding: .85rem; font-size: .75rem;
}
.tg-rail-promo b { display: block; font-family: var(--font-display); margin-bottom: .25rem; color: var(--ink); }
.tg-rail-promo p { margin: 0; color: var(--muted); line-height: 1.55; }
.tg-rail-user {
    display: flex; align-items: center; gap: .5rem; border-radius: 14px; border: 1px solid var(--line);
    background: var(--panel); padding: .5rem;
}
.tg-rail-user-main { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; text-decoration: none; color: var(--ink); }
.tg-rail-avatar {
    display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px;
    background: linear-gradient(135deg, var(--neon2), var(--cyber)); font-family: var(--font-display); font-weight: 700; color: #fff;
}
.tg-rail-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tg-rail-logout {
    display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 8px;
    border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer;
}
.tg-rail-logout:hover { border-color: rgba(248,113,113,.5); color: var(--bad); }
.tg-rail-auth { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tg-rail-auth .btn-ghost, .tg-rail-auth .btn-neon { width: 100%; }

.tg-appbar { display: none; }
@media (max-width: 1023px) {
    .tg-appbar {
        position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
        gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line);
        background: rgba(7,10,18,.82); backdrop-filter: blur(12px);
    }
}
.tg-appbar-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display);
                   font-size: 1.05rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.tg-appbar-logo  { width: 1.8rem; height: 1.8rem; border-radius: 8px; }
.tg-appbar-right { display: flex; align-items: center; gap: .5rem; }

.tg-tabbar { display: none; }
@media (max-width: 1023px) {
    .tg-tabbar {
        position: fixed; left: 50%; bottom: .7rem; transform: translateX(-50%); z-index: 45;
        width: min(94%, 30rem); display: flex; align-items: stretch; gap: .2rem; padding: .4rem;
        border-radius: 22px; border: 1px solid var(--line);
        background: rgba(13,18,30,.92); backdrop-filter: blur(16px);
        box-shadow: 0 16px 42px -14px rgba(0,0,0,.85);
    }
}
.tg-tab2 {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .45rem .1rem;
    border-radius: 15px; color: var(--muted); font-size: .625rem; font-weight: 500; text-decoration: none;
    transition: color .15s, background-color .15s;
}
.tg-tab2 .icon { width: 1.3rem; height: 1.3rem; }
.tg-tab2.is-active { color: var(--ink); background: rgba(47,131,246,.16); }
.tg-tab2.is-active .icon { color: var(--neon); }
.tg-tab2-accent, .tg-tab2-accent.is-active { color: #fff; background: linear-gradient(135deg, var(--neon2), var(--neon)); }
.tg-tab2-accent .icon { color: #fff; }

.page-head2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .35rem;
              font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cyber); }
.page-head2 h1 { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; margin: 0; }
.ph-sub { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.sec-head h2 { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0; }
.sec-head h2::before { content: ''; width: .28rem; height: 1.15rem; border-radius: 999px; background: linear-gradient(180deg, var(--neon), var(--cyber)); }
.sec-more { font-size: .8125rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.sec-more:hover { color: var(--cyber); }

.home-banner {
    width: 100%; position: relative; overflow: hidden; line-height: 0;
    border-radius: 26px; border: 1px solid rgba(47,131,246,.28);
    background: linear-gradient(135deg, #0e1c44 0%, #0a1330 55%, #07172b 100%);
    box-shadow: 0 26px 58px -34px rgba(47,131,246,.6);
}
.home-banner-img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .home-banner { border-radius: 18px; } }

.home-hero {
    position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(47,131,246,.25);
    background: radial-gradient(120% 140% at 85% 8%, rgba(26,217,197,.18), transparent 55%),
                linear-gradient(135deg, #12204a 0%, #0b1430 55%, #0a1a30 100%);
    padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.75rem;
}
@media (min-width: 900px) { .home-hero { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.home-hero-glow { pointer-events: none; position: absolute; right: -3rem; top: -4rem; width: 16rem; height: 16rem;
                  border-radius: 999px; background: rgba(47,131,246,.35); filter: blur(60px); animation: tg-float 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .home-hero-glow { animation: none; } }
.home-hero-badge { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px;
                   border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); padding: .3rem .8rem;
                   font-size: .75rem; font-weight: 600; color: #cfe3ff; }
.home-hero-badge .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.home-hero-copy { position: relative; }
.home-hero h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.7rem); font-weight: 700; line-height: 1.15; margin: 1rem 0 0; }
.hh-accent { background: linear-gradient(to right, #8fb8ff, #5ff0dd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { margin: .9rem 0 0; max-width: 34rem; color: #c7dbff; font-size: .95rem; line-height: 1.7; }
.home-hero-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.home-hero-side { position: relative; display: grid; gap: .7rem; }
.hh-stat { display: flex; align-items: center; gap: .85rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
           background: rgba(255,255,255,.06); padding: .85rem 1rem; }
.hh-stat-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px;
               background: linear-gradient(135deg, rgba(47,131,246,.35), rgba(26,217,197,.2)); color: #eaf4ff; flex-shrink: 0; }
.hh-stat b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.hh-stat span { font-size: .78rem; color: #b9cdf0; }

.g-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 560px) { .g-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .g-grid { grid-template-columns: repeat(5, 1fr); } }
.g-grid > * { min-width: 0; }
.g-card { position: relative; display: flex; flex-direction: column; gap: .6rem; border-radius: 18px; border: 1px solid var(--line);
          background: var(--panel); padding: .8rem; text-decoration: none; color: var(--ink);
          transition: transform .18s, border-color .18s, box-shadow .18s; }
.g-card:hover { transform: translateY(-4px); border-color: rgba(47,131,246,.55); box-shadow: 0 16px 34px -18px rgba(47,131,246,.6); }
.g-card-art { position: relative; aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: var(--panel2); display: grid; place-items: center; }
.g-card-art img.game-icon { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; box-shadow: none; }
.g-card-art .game-icon-emoji { font-size: 2.6rem; }
.g-card-name { font-size: .85rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.g-card-go { margin-top: auto; font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: .25rem; }
.g-card:hover .g-card-go { color: var(--cyber); }

.hiw { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hiw { grid-template-columns: repeat(3, 1fr); } }
.hiw-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--panel);
            padding: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.hiw-step { position: absolute; right: 1rem; top: .7rem; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: rgba(255,255,255,.05); }
.hiw-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px;
           background: linear-gradient(135deg, rgba(47,131,246,.25), rgba(26,217,197,.15)); color: var(--cyber); }
.hiw-card b { font-family: var(--font-display); }
.hiw-card p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.6; }

.ticker2 { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ticker2 { grid-template-columns: 1fr 1fr; } }
.ticker2-row { display: flex; align-items: center; gap: .7rem; border-radius: 14px; border: 1px solid var(--line);
               background: var(--panel); padding: .6rem .8rem; }
.ticker2-row .game-icon { border-radius: 9px; }
.ticker2-text { min-width: 0; flex: 1; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker2-price { font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }
.ticker2-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex-shrink: 0; }

.item-grid { gap: .85rem; }
.item-card { padding: .8rem; gap: .55rem; border-radius: 16px; }
.item-art { aspect-ratio: 4 / 3; border-radius: 13px; }
.item-name { font-size: .9rem; font-weight: 600; }
.item-foot { padding-top: .15rem; border-top: 1px solid rgba(36,48,74,.5); margin-top: .35rem; }
.item-cta { border-radius: 10px; padding: .3rem .8rem; }

.game-banner {
    display: flex; align-items: center; gap: 1.1rem; border-radius: 20px; border: 1px solid var(--line);
    background: radial-gradient(120% 170% at 92% 5%, rgba(26,217,197,.12), transparent 55%), linear-gradient(135deg, #101a34, #0b1220);
    padding: 1.1rem 1.25rem;
}
.game-banner .game-icon { width: 64px; height: 64px; }
.game-banner-body { min-width: 0; flex: 1; }
.game-banner-name { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; margin: 0; }
.game-banner-sub { margin: .3rem 0 0; color: var(--muted); font-size: .85rem; }
.game-banner-count {
    flex-shrink: 0; align-self: flex-start; border-radius: 999px; border: 1px solid rgba(47,131,246,.3);
    background: rgba(47,131,246,.12); padding: .25rem .7rem; font-size: .75rem; font-weight: 600; color: #cfe3ff;
}

.auth2 { max-width: 62rem; margin-inline: auto; }
.auth2-grid { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .auth2-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.auth2-aside {
    position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(47,131,246,.25);
    background: radial-gradient(120% 140% at 85% 10%, rgba(26,217,197,.16), transparent 55%), linear-gradient(135deg, #12204a, #0a1330);
    padding: 2.25rem; display: none; flex-direction: column; justify-content: center;
}
@media (min-width: 860px) { .auth2-aside { display: flex; } }
.auth2-aside h2 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; margin: 0 0 .75rem; }
.auth2-aside > p { color: #c7dbff; line-height: 1.7; margin: 0 0 1.5rem; }
.auth2-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: .92rem; }
.auth2-points li { display: flex; align-items: center; gap: .6rem; }
.auth2-points .icon { color: var(--cyber); flex-shrink: 0; }
.auth2-form { align-self: center; width: 100%; }

@media (min-width: 768px) { .item-buy-sticky { position: sticky; top: 1.25rem; } }

.tg-body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(47,131,246,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,131,246,.055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(#000, transparent 78%);
            mask-image: linear-gradient(#000, transparent 78%);
}
.tg-shell { position: relative; z-index: 1; }

.card-panel {
    background: rgba(15,20,33,.66);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px -30px rgba(0,0,0,.95);
}

.btn-neon { box-shadow: 0 0 0 1px rgba(94,240,221,.14), 0 10px 26px -10px rgba(47,131,246,.55); }
.btn-neon:hover { box-shadow: 0 0 0 1px rgba(94,240,221,.3), 0 0 28px rgba(47,131,246,.5); }

.home-hero::after {
    content: ''; position: absolute; inset: 14px; pointer-events: none; border-radius: 16px; opacity: .55;
    background:
        linear-gradient(#5ff0dd,#5ff0dd) 0 0/18px 2px,        linear-gradient(#5ff0dd,#5ff0dd) 0 0/2px 18px,
        linear-gradient(#5ff0dd,#5ff0dd) 100% 0/18px 2px,     linear-gradient(#5ff0dd,#5ff0dd) 100% 0/2px 18px,
        linear-gradient(#5ff0dd,#5ff0dd) 0 100%/18px 2px,     linear-gradient(#5ff0dd,#5ff0dd) 0 100%/2px 18px,
        linear-gradient(#5ff0dd,#5ff0dd) 100% 100%/18px 2px,  linear-gradient(#5ff0dd,#5ff0dd) 100% 100%/2px 18px;
    background-repeat: no-repeat;
}
.home-hero-badge { box-shadow: 0 0 0 1px rgba(94,240,221,.15); }

.tg-rail-link { position: relative; }
.tg-rail-link.is-active::before {
    content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 9px;
    background: linear-gradient(180deg, var(--neon), var(--cyber)); box-shadow: 0 0 10px rgba(47,131,246,.8);
}
.tg-rail-brand, .tg-appbar-brand { text-shadow: 0 0 18px rgba(47,131,246,.25); }

.g-card:hover {
    border-color: rgba(94,240,221,.55);
    box-shadow: 0 20px 42px -18px rgba(26,217,197,.5), 0 0 0 1px rgba(94,240,221,.22);
}
.g-card-art::after {
    content: ''; position: absolute; inset: 0; border-radius: 13px; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    background: linear-gradient(180deg, transparent 52%, rgba(4,8,16,.55));
}
.g-card-art::before {
    content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 13px; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(94,240,221,.16) 50%, transparent 60%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.g-card:hover .g-card-art::before { transform: translateX(120%); }

.item-card:hover { box-shadow: 0 20px 40px -20px rgba(26,217,197,.4), 0 0 0 1px rgba(94,240,221,.2); }

.hh-stat { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hh-stat-ico { box-shadow: 0 0 18px -4px rgba(47,131,246,.6); }

.tg-tab2-accent { box-shadow: 0 8px 20px -6px rgba(47,131,246,.7); }

.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.feed-head h2 { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0; }
.feed-head h2::before { content: ''; width: .28rem; height: 1.15rem; border-radius: 999px; background: linear-gradient(180deg, var(--neon), var(--cyber)); }
.feed-live {
    display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px;
    border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.1);
    padding: .18rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ok);
}
.feed-live .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: feed-pulse 1.4s ease-in-out infinite; }
@keyframes feed-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.feed {
    position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line);
    background: rgba(13,18,30,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.feed::before, .feed::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 2; pointer-events: none; }
.feed::before { left: 0;  background: linear-gradient(to right, #070a12, transparent); }
.feed::after  { right: 0; background: linear-gradient(to left,  #070a12, transparent); }
.feed-track { display: flex; width: max-content; padding: .7rem 0; animation: feed-scroll 48s linear infinite; }
.feed-group { display: flex; }
.feed:hover .feed-track { animation-play-state: paused; }
@keyframes feed-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .feed { overflow-x: auto; }
    .feed-track { animation: none; }
}
.feed-chip {
    display: flex; align-items: center; gap: .6rem; flex-shrink: 0; margin-left: .7rem;
    border-radius: 14px; border: 1px solid var(--line); background: rgba(21,28,44,.75);
    padding: .5rem .85rem .5rem .55rem;
}
.feed-chip .game-icon { border-radius: 9px; }
.feed-chip-text { font-size: .82rem; white-space: nowrap; }
.feed-chip-price { font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }
.feed-chip-ok { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 999px;
                background: rgba(52,211,153,.15); color: var(--ok); font-size: .7rem; }

.tg-topnav {
    position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line);
    background: rgba(9,13,22,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.tg-topnav::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(47,131,246,.5), rgba(26,217,197,.45), transparent);
}
.tg-topnav-inner { max-width: 82rem; margin: 0 auto; padding: .7rem 1.1rem; display: flex; align-items: center; gap: 1rem; }
.tg-topnav-brand {
    display: flex; align-items: center; gap: .55rem; font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.tg-topnav-logo { width: 2rem; height: 2rem; border-radius: 9px; }

.tg-topnav-links { display: none; }
@media (min-width: 1024px) { .tg-topnav-links { display: flex; align-items: center; gap: .15rem; margin-left: .75rem; } }
.tg-topnav-link {
    position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
    border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .9rem; text-decoration: none;
}
.tg-topnav-link:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.tg-topnav-link.is-active { color: var(--ink); }
.tg-topnav-link.is-active::after {
    content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .1rem; height: 2px; border-radius: 9px;
    background: linear-gradient(90deg, var(--neon), var(--cyber)); box-shadow: 0 0 10px rgba(47,131,246,.8);
}
.tg-topnav-admin { color: var(--warn); }
.tg-topnav-admin:hover { color: var(--warn); }

.tg-topnav-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.tg-topnav-cta { display: none; }
@media (min-width: 768px) { .tg-topnav-cta { display: inline-flex; } }

.tg-topnav-mobile { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .9rem .55rem; scrollbar-width: none; }
.tg-topnav-mobile::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .tg-topnav-mobile { display: none; } }
.tg-mchip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(21,28,44,.6); color: var(--muted); font-size: .82rem; font-weight: 500; text-decoration: none;
}
.tg-mchip.is-active { border-color: rgba(47,131,246,.5); background: rgba(47,131,246,.14); color: var(--ink); }
.tg-mchip.is-active .icon { color: var(--neon); }
.tg-mchip-admin { color: var(--warn); }

.hero2 {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 26px; border: 1px solid rgba(47,131,246,.28);
    background: linear-gradient(135deg, #0e1c44 0%, #0a1330 55%, #07172b 100%);
    padding: clamp(1.6rem, 4vw, 3.25rem);
    display: grid; gap: 2rem;
}
@media (min-width: 960px) { .hero2 { grid-template-columns: 1.1fr .9fr; align-items: center; } }

.hero2-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero2-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(94,240,221,.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(94,240,221,.08) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 100% at 18% 0%, #000, transparent 72%);
            mask-image: radial-gradient(120% 100% at 18% 0%, #000, transparent 72%);
}
.hero2-orb { position: absolute; border-radius: 999px; filter: blur(64px); opacity: .55; }
.hero2-orb.a { width: 22rem; height: 22rem; right: -6rem; top: -8rem; background: radial-gradient(circle, rgba(47,131,246,.9), transparent 65%); animation: hero-drift1 15s ease-in-out infinite; }
.hero2-orb.b { width: 18rem; height: 18rem; right: 5rem; bottom: -9rem; background: radial-gradient(circle, rgba(26,217,197,.7), transparent 65%); animation: hero-drift2 19s ease-in-out infinite; }
.hero2-scan { position: absolute; left: 0; right: 0; height: 42%; top: -42%; background: linear-gradient(180deg, transparent, rgba(94,240,221,.07), transparent); animation: hero-scan 7.5s linear infinite; }
@keyframes hero-drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-26px,20px); } }
@keyframes hero-drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,-18px); } }
@keyframes hero-scan   { 0% { transform: translateY(0); } 100% { transform: translateY(340%); } }

.hero2::after {
    content: ''; position: absolute; inset: 14px; pointer-events: none; border-radius: 18px; opacity: .55;
    background:
        linear-gradient(#5ff0dd,#5ff0dd) 0 0/20px 2px,        linear-gradient(#5ff0dd,#5ff0dd) 0 0/2px 20px,
        linear-gradient(#5ff0dd,#5ff0dd) 100% 0/20px 2px,     linear-gradient(#5ff0dd,#5ff0dd) 100% 0/2px 20px,
        linear-gradient(#5ff0dd,#5ff0dd) 0 100%/20px 2px,     linear-gradient(#5ff0dd,#5ff0dd) 0 100%/2px 20px,
        linear-gradient(#5ff0dd,#5ff0dd) 100% 100%/20px 2px,  linear-gradient(#5ff0dd,#5ff0dd) 100% 100%/2px 20px;
    background-repeat: no-repeat;
}

.hero2-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
    font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyber); }
.hero2-kicker::before { content: ''; width: 1.7rem; height: 2px; border-radius: 9px; background: linear-gradient(90deg, var(--neon), var(--cyber)); box-shadow: 0 0 10px rgba(47,131,246,.7); }
.hero2 h1 { font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0; text-shadow: 0 0 42px rgba(47,131,246,.25); }
.hero2 h1 .ac { background: linear-gradient(100deg, #8fb8ff, #5ff0dd 55%, #8fb8ff); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: hero-shimmer 6s linear infinite; }
@keyframes hero-shimmer { to { background-position: 200% center; } }
.hero2-sub { margin: 1.1rem 0 0; max-width: 34rem; color: #c7dbff; font-size: 1rem; line-height: 1.75; }
.hero2-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero2-cta .btn-neon { animation: hero-cta-glow 2.8s ease-in-out infinite; }
@keyframes hero-cta-glow {
    0%,100% { box-shadow: 0 0 0 1px rgba(94,240,221,.2), 0 10px 26px -10px rgba(47,131,246,.6); }
    50%     { box-shadow: 0 0 0 1px rgba(94,240,221,.45), 0 0 36px rgba(47,131,246,.55); }
}
.hero2-trust { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; font-size: .8rem; color: #9fb6dd; }
.hero2-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.hero2-trust .icon { width: 1rem; height: 1rem; color: var(--ok); }

.hero2-console {
    position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,14,28,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 54px -34px #000;
}
.hero2-console-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .2rem .35rem .7rem; margin-bottom: .65rem; border-bottom: 1px dashed rgba(255,255,255,.13); }
.hero2-console-title { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display);
    font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #b9cdf0; }
.hero2-console-title .hero2-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: feed-pulse 1.4s ease-in-out infinite; }
.hero2-metrics { display: grid; gap: .55rem; }
.hero2-metric { display: flex; align-items: center; gap: .8rem; border-radius: 13px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); padding: .7rem .85rem;
    transition: transform .16s, border-color .16s, background-color .16s; }
.hero2-metric:hover { transform: translateX(4px); border-color: rgba(94,240,221,.32); background: rgba(94,240,221,.06); }
.hero2-metric-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(47,131,246,.4), rgba(26,217,197,.22)); color: #eaf4ff; box-shadow: 0 0 16px -3px rgba(47,131,246,.7); }
.hero2-metric-body { min-width: 0; flex: 1; }
.hero2-metric b { display: block; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.15; }
.hero2-metric span { font-size: .76rem; color: #9fb6dd; }
.hero2-eq { display: flex; align-items: flex-end; gap: 3px; height: 1.35rem; }
.hero2-eq i { width: 3px; height: 55%; border-radius: 2px; background: linear-gradient(180deg, var(--cyber), var(--neon)); animation: hero-eq 1.1s ease-in-out infinite; }
.hero2-eq i:nth-child(1) { animation-delay: 0s; } .hero2-eq i:nth-child(2) { animation-delay: .2s; }
.hero2-eq i:nth-child(3) { animation-delay: .4s; } .hero2-eq i:nth-child(4) { animation-delay: .15s; }
.hero2-eq i:nth-child(5) { animation-delay: .32s; }
@keyframes hero-eq { 0%,100% { height: 22%; } 50% { height: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .hero2-orb, .hero2-scan, .hero2 h1 .ac, .hero2-cta .btn-neon, .hero2-console-title .hero2-dot, .hero2-eq i { animation: none !important; }
}

.help-ways { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .help-ways { grid-template-columns: 1fr 1fr; } }
.way-card {
    position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line);
    background: rgba(15,20,33,.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 1.25rem 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .7rem;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}
.way-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--neon), var(--cyber)); }
.way-card:hover { transform: translateY(-3px); border-color: rgba(47,131,246,.4); box-shadow: 0 20px 44px -26px rgba(47,131,246,.6); }
.way-tag { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; border-radius: 999px;
    border: 1px solid rgba(47,131,246,.3); background: rgba(47,131,246,.12); padding: .22rem .7rem; font-size: .72rem; font-weight: 700; color: #cfe3ff; }
.way-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0; }
.way-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.way-steps li { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted); }
.way-steps .n { flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; background: rgba(94,240,221,.14); color: var(--cyber); border: 1px solid rgba(94,240,221,.3); }
.way-cta { margin-top: auto; align-self: flex-start; }

.flow { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow > * { min-width: 0; }
.flow-step { position: relative; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); padding: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.flow-node { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 14px;
    background: linear-gradient(135deg, var(--neon2), var(--cyber)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    box-shadow: 0 0 20px -4px rgba(47,131,246,.8); }
.flow-step b { display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); }
.flow-step b .icon { color: var(--cyber); }
.flow-step p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.6; }
@media (min-width: 820px) {
    .flow-step:not(:last-child)::after { content: ''; position: absolute; top: 2.35rem; right: -.65rem; width: 1.3rem; height: 2px;
        background: linear-gradient(90deg, var(--cyber), transparent); z-index: 1; }
}

.faq2 { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .faq2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.faq2 details { border-radius: 14px; border: 1px solid var(--line); background: rgba(15,20,33,.6);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq2 details[open] { border-color: rgba(47,131,246,.45); box-shadow: 0 0 0 1px rgba(47,131,246,.15), 0 16px 32px -24px #000; }
.faq2 summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; font-weight: 600; font-size: .92rem; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary > span:first-child { flex: 1; }
.faq2 .q-plus { flex-shrink: 0; width: 1.55rem; height: 1.55rem; border-radius: 8px; display: grid; place-items: center;
    border: 1px solid var(--line); color: var(--cyber); font-size: 1.1rem; line-height: 1; transition: transform .2s, background-color .2s, border-color .2s; }
.faq2 details[open] .q-plus { transform: rotate(45deg); background: rgba(47,131,246,.15); border-color: rgba(47,131,246,.4); }
.faq2 .a { margin: 0; padding: 0 1rem 1rem; font-size: .86rem; line-height: 1.75; color: var(--muted); }

.help-contact { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(47,131,246,.28);
    background: radial-gradient(120% 160% at 90% 10%, rgba(26,217,197,.16), transparent 55%), linear-gradient(135deg, #12204a, #0a1330);
    padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.help-contact-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px;
    background: rgba(255,255,255,.1); color: var(--cyber); flex-shrink: 0; box-shadow: 0 0 20px -4px rgba(26,217,197,.6); }
.help-contact-body { flex: 1; min-width: 12rem; }
.help-contact h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .25rem; }
.help-contact p { margin: 0; color: #c7dbff; font-size: .86rem; line-height: 1.6; }

.topup-orbit { display: none; }
@media (min-width: 960px) { .topup-orbit { display: block; position: relative; min-height: 23rem; align-self: stretch; pointer-events: none; } }
.topup-orbit::before { content: ''; position: absolute; inset: 10% 8%; border-radius: 999px; background: radial-gradient(circle, rgba(47,131,246,.3), transparent 65%); filter: blur(34px); }
.orb-game {
    position: absolute; display: grid; place-items: center; overflow: hidden; border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14); background: var(--panel2);
    box-shadow: 0 16px 34px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(94,240,221,.08);
    animation: orb-float var(--dur, 6.5s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.orb-game img.game-icon { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: none; }
.orb-game .game-icon-emoji { font-size: 2.4rem; }
.orb-game::after { content: ''; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); background: linear-gradient(160deg, transparent 55%, rgba(4,8,16,.4)); }
.orb-game.g1 { width: 92px;  height: 92px;  top: 4%;  left: 12%; --dur: 6.5s; --delay: 0s;   }
.orb-game.g2 { width: 116px; height: 116px; top: 0%;  left: 50%; --dur: 7.6s; --delay: .7s;  }
.orb-game.g3 { width: 76px;  height: 76px;  top: 33%; left: 2%;  --dur: 6.1s; --delay: 1.5s; }
.orb-game.g4 { width: 132px; height: 132px; top: 39%; left: 33%; --dur: 8.2s; --delay: .4s;  }
.orb-game.g5 { width: 84px;  height: 84px;  top: 70%; left: 10%; --dur: 7s;   --delay: 1.1s; }
.orb-game.g6 { width: 100px; height: 100px; top: 63%; left: 58%; --dur: 6.9s; --delay: 2s;   }
@keyframes orb-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .orb-game { animation: none !important; } }

.topup-steps { position: relative; display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); margin-top: 1.75rem; max-width: 34rem; }
.topup-steps > * { min-width: 0; }
.topup-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: 0 .2rem; }
.topup-step .node { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 16px; position: relative; z-index: 2;
    background: rgba(255,255,255,.08); border: 1px solid rgba(94,240,221,.35); color: #eaf4ff; box-shadow: 0 0 22px -6px rgba(94,240,221,.8); }
.topup-step b { font-family: var(--font-display); color: #fff; font-size: .9rem; }
.topup-step small { font-size: .72rem; color: #bcd3f0; }
.topup-step:not(:last-child)::after { content: ''; position: absolute; top: 1.5rem; left: 66%; width: 68%; height: 2px;
    background: linear-gradient(90deg, rgba(94,240,221,.55), transparent); z-index: 1; }

.pay-flow { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pay-flow { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.pay-col { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.pay-badge { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.pay-badge .num { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--neon2), var(--cyber)); color: #fff; font-size: .82rem; box-shadow: 0 0 14px -3px rgba(47,131,246,.8); }

.pp2 { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(26,217,197,.3);
    background: radial-gradient(120% 150% at 92% 0%, rgba(26,217,197,.16), transparent 55%), linear-gradient(140deg, #0c2440, #091829);
    padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.pp2-wm { position: absolute; right: -1rem; top: -1rem; color: rgba(255,255,255,.05); pointer-events: none; }
.pp2-label { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyber); }
.pp2-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.pp2-copy-hint { font-size: .72rem; color: rgba(255,255,255,.5); }
.pp2-account { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: .85rem; font-size: .9rem; }
.pp2-account span { color: rgba(255,255,255,.6); }
.pp2-account b { color: #fff; }
.pp2-note { position: relative; margin: 0; font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.6; }

.pp2-qr { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.pp2-qr-tile { position: relative; width: min(212px, 68%); aspect-ratio: 1; padding: 12px; border-radius: 16px;
    background: #fff; display: grid; place-items: center;
    box-shadow: 0 16px 36px -16px rgba(0,0,0,.7), 0 0 0 4px rgba(26,217,197,.14), 0 0 24px -6px rgba(26,217,197,.5); }

.pp2-qr-tile::before, .pp2-qr-tile::after { content: ''; position: absolute; width: 20px; height: 20px;
    border: 2.5px solid var(--cyber); pointer-events: none; }
.pp2-qr-tile::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.pp2-qr-tile::after  { right: 9px; bottom: 9px; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
.pp2-qr-img { width: 100%; height: 100%; display: block; border-radius: 4px; }
.pp2-qr-cap { display: inline-flex; align-items: center; gap: .4rem; text-align: center; font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.72); }
.pp2-qr-cap svg { color: var(--cyber); flex-shrink: 0; }

.pay-col > .pp2, .pay-col > .pay-upload { flex: 1; }
.pay-upload { padding: 1.1rem; display: flex; flex-direction: column; }
.pay-upload > .slip-uploader { flex: 1; }
.slip-uploader > .slip-idle { flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.slip-uploader > .slip-idle > .dropzone { flex: 1; justify-content: center; }

.pay-setup { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .75rem; }
.pay-setup > legend { padding: 0; }

.pay-methods { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 576px) { .pay-methods { grid-template-columns: 1fr 1fr; } }

.pay-method { position: relative; display: block; cursor: pointer; }
.pay-method input { position: absolute; width: 0; height: 0; opacity: 0; }
.pay-method-body {
    display: flex; flex-direction: column; gap: .3rem; height: 100%;
    border: 1px solid var(--line); border-radius: var(--radius-ctl);
    background: var(--panel2); padding: .8rem .9rem;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pay-method-top { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--ink); }
.pay-method-top svg { flex-shrink: 0; color: var(--muted); transition: color .15s; }
.pay-method-note { font-size: .75rem; line-height: 1.5; color: var(--muted); }

.pay-method:hover .pay-method-body { border-color: rgba(47,131,246,.45); }
.pay-method input:checked ~ .pay-method-body {
    border-color: var(--neon); background: rgba(47,131,246,.1);
    box-shadow: inset 0 0 0 1px var(--neon);
}
.pay-method input:checked ~ .pay-method-body .pay-method-top svg { color: var(--neon); }
.pay-method input:focus-visible ~ .pay-method-body { outline: 2px solid var(--cyber); outline-offset: 2px; }

.pay-panel {
    display: none; flex-direction: column; gap: .75rem;
    border: 1px solid var(--line); border-left: 3px solid var(--neon);
    border-radius: var(--radius-ctl); background: rgba(255,255,255,.02); padding: .9rem;
}
.pay-setup:has(#pm-promptpay:checked) .pay-panel[data-method="promptpay"],
.pay-setup:has(#pm-bank:checked)      .pay-panel[data-method="bank"] { display: flex; }

@supports not selector(:has(*)) { .pay-panel { display: flex; } }

.pay-preview { display: flex; flex-direction: column; gap: .4rem; }
.pay-preview-cap { font-size: .72rem; color: var(--muted); }
.pay-preview[data-empty="1"] { opacity: .55; }

.link-btn {
    border: 0; background: none; padding: 0; font: inherit; color: var(--cyber);
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--neon); }

.bank-card {
    position: relative; display: flex; flex-direction: column; gap: .85rem;
    overflow: hidden; border-radius: 20px; padding: 1.1rem;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #101827;
}

.bank-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--bank, var(--neon));
}

.bank-card-head { display: flex; align-items: center; gap: .7rem; }
.bank-card-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bank-card-label { font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bank-card-name { font-family: var(--font-display); font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.bank-card-no { color: rgba(255,255,255,.75); overflow-wrap: anywhere; }

.bank-chip {
    display: grid; place-items: center; flex-shrink: 0;
    width: 2.4rem; height: 2.4rem; border-radius: 10px;
    background: rgba(255,255,255,.08); color: var(--cyber);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .bank-chip {
        background: color-mix(in srgb, var(--bank, #2f83f6) 22%, #0b1020);
        color: color-mix(in srgb, var(--bank, #2f83f6) 70%, #ffffff);
    }
}

.bank-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.bank-row-label { font-size: .78rem; color: rgba(255,255,255,.55); }
.bank-holder { font-weight: 500; color: #fff; text-align: right; overflow-wrap: anywhere; }

.bank-copy {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
    background: rgba(255,255,255,.06); color: #fff;
    padding: .45rem .75rem; font: inherit; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.bank-copy:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.bank-copy:focus-visible { outline: 2px solid var(--cyber); outline-offset: 2px; }
.bank-copy:active { transform: translateY(1px); }
.bank-copy svg { flex-shrink: 0; color: var(--cyber); }
.bank-acct { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }

.bank-amount {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.1); padding-top: .85rem;
}
.bank-amount-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--price); }
.bank-copy-amount { border-color: rgba(79,227,173,.35); background: rgba(79,227,173,.1); }
.bank-copy-amount:hover { border-color: rgba(79,227,173,.6); background: rgba(79,227,173,.16); }

.bank-warn { margin: 0; display: flex; align-items: flex-start; gap: .5rem; font-size: .78rem; line-height: 1.6; color: rgba(255,255,255,.6); }
.bank-warn svg { flex-shrink: 0; margin-top: .15rem; color: var(--warn); }

.bank-card-sm { flex-direction: row; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; }
.bank-card-sm::before { display: none; }

.pay-account { display: flex; flex-direction: column; align-items: center; gap: .8rem; }

.pay-empty {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
    border: 1px dashed rgba(251,191,36,.4); border-radius: var(--radius-card);
    background: rgba(251,191,36,.06); padding: 1.5rem 1rem;
}
.pay-empty-icon  { font-size: 1.6rem; }
.pay-empty-title { margin: 0; font-weight: 500; color: var(--warn); }
.pay-empty-note  { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }

.copy-value-lg { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; padding: .55rem .85rem; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .pp2-bank { border-color: color-mix(in srgb, var(--bank) 45%, transparent); }
    .pp2-bank .pp2-label { color: color-mix(in srgb, var(--bank) 60%, #ffffff); }
}

.tg-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.15rem; height: 2.15rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel); color: var(--muted);
    cursor: pointer; transition: color .15s, border-color .15s, background-color .15s, transform .15s;
}
.tg-theme-toggle:hover { color: var(--cyber); border-color: rgba(26,217,197,.5); }
.tg-theme-toggle:active { transform: translateY(1px) scale(.96); }
@media (max-width: 767px) { .tg-theme-toggle { width: 2.35rem; height: 2.35rem; } }

.tg-theme-toggle { display: none !important; }

.tt-moon { display: none; }
.tt-sun  { display: inline-flex; }
[data-theme="light"] .tt-sun  { display: none; }
[data-theme="light"] .tt-moon { display: inline-flex; }

.tg-body, .card-panel, .tg-topnav, .tg-nav, .tg-appbar, .tg-tabbar, .tg-rail,
.game-tile, .item-card, .g-card, .order-row { transition: background-color .25s ease, border-color .25s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) {
    .tg-body, .card-panel, .tg-topnav, .tg-nav, .tg-appbar, .tg-tabbar, .tg-rail,
    .game-tile, .item-card, .g-card, .order-row { transition: none; }
}

:root[data-theme="light"] {
    --night:  #e8eefb;
    --panel:  #ffffff;
    --panel2: #e8f0fd;
    --line:   #c8d9f2;
    --ink:    #121a2b;
    --muted:  #55658c;
    --neon:   #1f6bff;
    --neon2:  #1846c9;
    --cyber:  #0a9fb5;
    --price:  #05a870;
    --ok:     #0f9d6e;
    --warn:   #c26a04;
    --bad:    #e23b3b;
    --rare:   #0ea5e9;
    --epic:   #8b5cf6;
    --legend: #d97706;
}

:root[data-theme="light"] .tg-body {
    background:
        radial-gradient(980px 540px at 4% -12%, rgba(31,107,255,.30), transparent 60%),
        radial-gradient(820px 460px at 102% -6%, rgba(6,196,224,.26), transparent 55%),
        radial-gradient(820px 600px at 48% 118%, rgba(139,92,246,.24), transparent 62%),
        radial-gradient(660px 440px at 94% 106%, rgba(5,180,120,.18), transparent 60%),
        var(--night);
    background-attachment: fixed;
}

:root[data-theme="light"] .tg-body::before {
    background-image:
        linear-gradient(rgba(31,107,255,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,180,200,.09) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(#000, transparent 82%);
            mask-image: linear-gradient(#000, transparent 82%);
}

:root[data-theme="light"] .card-panel {
    background: linear-gradient(180deg, #ffffff, #f2f7ff);
    border-color: rgba(31,107,255,.15);
    box-shadow: inset 0 1px 0 #fff, 0 14px 32px -24px rgba(31,107,255,.4);
}
:root[data-theme="light"] .tg-topnav   { background: linear-gradient(90deg, rgba(235,243,255,.86), rgba(232,250,252,.83)); }
:root[data-theme="light"] .tg-nav       { background: linear-gradient(90deg, rgba(235,243,255,.88), rgba(232,250,252,.85)); }
:root[data-theme="light"] .tg-appbar    { background: linear-gradient(90deg, rgba(235,243,255,.9), rgba(232,250,252,.88)); }
:root[data-theme="light"] .tg-bottomnav { background: rgba(255,255,255,.92); }
:root[data-theme="light"] .tg-tabbar    { background: linear-gradient(120deg, rgba(255,255,255,.94), rgba(233,247,255,.92)); box-shadow: 0 16px 42px -16px rgba(31,107,255,.32); }
:root[data-theme="light"] .tg-rail      { background: linear-gradient(180deg, rgba(31,107,255,.1), transparent 34%), rgba(255,255,255,.74); }

:root[data-theme="light"] .game-tile,
:root[data-theme="light"] .item-card,
:root[data-theme="light"] .g-card,
:root[data-theme="light"] .order-row,
:root[data-theme="light"] .ticker2-row,
:root[data-theme="light"] .hiw-card { border-color: rgba(31,107,255,.16); }
:root[data-theme="light"] .game-tile:hover,
:root[data-theme="light"] .item-card:hover { box-shadow: 0 20px 40px -18px rgba(10,180,210,.5), 0 0 0 1px rgba(10,180,210,.35); }
:root[data-theme="light"] .g-card:hover { box-shadow: 0 22px 44px -18px rgba(10,180,210,.55), 0 0 0 1px rgba(10,180,210,.4); }

:root[data-theme="light"] .stat-tile { position: relative; overflow: hidden; }
:root[data-theme="light"] .stat-tile::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--neon), var(--cyber));
}

:root[data-theme="light"] .dropzone { background: #f4f7fc; border-color: #c4cee2; }

:root[data-theme="light"] .feed { background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
:root[data-theme="light"] .feed::before { background: linear-gradient(to right, #eef1f7, transparent); }
:root[data-theme="light"] .feed::after  { background: linear-gradient(to left,  #eef1f7, transparent); }
:root[data-theme="light"] .feed-chip { background: rgba(255,255,255,.85); }

:root[data-theme="light"] .item-art,
:root[data-theme="light"] .item-hero { background: linear-gradient(to bottom right, var(--panel2), #e2e8f5); }

:root[data-theme="light"] .game-banner {
    background: radial-gradient(120% 170% at 92% 5%, rgba(6,220,230,.34), transparent 55%), linear-gradient(135deg, #1f6bff, #5b21c9 60%, #0b7a95);
    border-color: rgba(31,107,255,.45);
}
:root[data-theme="light"] .game-banner-name { color: #fff; }
:root[data-theme="light"] .game-banner-sub  { color: #eaf2ff; }

:root[data-theme="light"] .chip-on   { color: var(--neon2); }
:root[data-theme="light"] .item-desc { color: #26324a; }
:root[data-theme="light"] .tg-topnav-link:hover { background: rgba(19,26,43,.05); }
:root[data-theme="light"] .tg-rail-link:hover   { background: rgba(19,26,43,.05); }
:root[data-theme="light"] .tg-nav-link:hover    { background: rgba(47,131,246,.1); }
:root[data-theme="light"] .btn-ghost:hover      { color: var(--neon2); }
:root[data-theme="light"] .input-date { color-scheme: light; }

:root[data-theme="light"] .hero,
:root[data-theme="light"] .hero2,
:root[data-theme="light"] .home-hero,
:root[data-theme="light"] .auth2-aside { color: #e8eefc; }
:root[data-theme="light"] .hero .hero-title,
:root[data-theme="light"] .hero2 h1,
:root[data-theme="light"] .home-hero h1,
:root[data-theme="light"] .auth2-aside h2,
:root[data-theme="light"] .hh-stat b,
:root[data-theme="light"] .hero2-metric b { color: #fff; }

:root[data-theme="light"] .hero .btn-ghost,
:root[data-theme="light"] .hero2 .btn-ghost,
:root[data-theme="light"] .home-hero .btn-ghost {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff;
}
:root[data-theme="light"] .hero .btn-ghost:hover,
:root[data-theme="light"] .hero2 .btn-ghost:hover,
:root[data-theme="light"] .home-hero .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }

:root[data-theme="light"] .pp-label,
:root[data-theme="light"] .pp2-label,
:root[data-theme="light"] .pp2-qr-cap svg { color: #1ad9c5; }

:root[data-theme="light"] .home-hero {
    background:
        radial-gradient(130% 150% at 88% 4%, rgba(6,220,230,.42), transparent 55%),
        linear-gradient(135deg, #1f6bff 0%, #5b21c9 52%, #0b7a95 100%);
    border-color: rgba(31,107,255,.45);
}
:root[data-theme="light"] .hero2 {
    background:
        radial-gradient(120% 150% at 90% 6%, rgba(6,220,230,.4), transparent 55%),
        linear-gradient(135deg, #1f6bff 0%, #5b21c9 55%, #0b7a95 100%);
    border-color: rgba(31,107,255,.45);
}
:root[data-theme="light"] .hero        { background: linear-gradient(135deg, #1f6bff 0%, #5b21c9 55%, #0b7a95 100%); }
:root[data-theme="light"] .hero-topup  { background: linear-gradient(135deg, #1f6bff 0%, #4c1fb0 55%, #0e7f8f 100%); }
:root[data-theme="light"] .auth2-aside {
    background:
        radial-gradient(120% 140% at 85% 8%, rgba(6,220,230,.38), transparent 55%),
        linear-gradient(135deg, #1f6bff 0%, #5b21c9 55%, #0b7a95 100%);
    border-color: rgba(31,107,255,.45);
}

:root[data-theme="light"] .home-hero p,
:root[data-theme="light"] .hero-sub,
:root[data-theme="light"] .hero2-sub,
:root[data-theme="light"] .hero2-trust,
:root[data-theme="light"] .hero2-metric span,
:root[data-theme="light"] .hh-stat span,
:root[data-theme="light"] .auth2-aside > p,
:root[data-theme="light"] .step-sub { color: #eaf2ff; }
:root[data-theme="light"] .home-hero-badge,
:root[data-theme="light"] .game-banner-count { color: #f0f6ff; }
:root[data-theme="light"] .hero2-kicker { color: #ccf7ff; }

@media (min-width: 1024px) {
    .tg-topnav-inner { max-width: max(80%, 82rem); }
    .tg-content, .tg-main-admin { max-width: max(80%, 76rem); }
    .tg-nav-inner, .tg-footer-grid, .tg-footer-legal { max-width: max(80%, 64rem); }
}